/* ==========================================================================
   Shezan Oxford — WordPress layer
   Loads after the design stylesheets (index.css / style.css), which are kept
   as delivered in /design. Only what WordPress adds or moves lives here.
   ========================================================================== */

/* ------------------------------------------------------ moved inline CSS -- */

/* Our Menus: the masthead photograph was removed; with the column gone the
   copy is centred in the full width, and the flex rows (crumbs, meta) plus
   the gold rule are re-centred to match (was a <style> block in the design) */
.menu-masthead__inner{display:block}
.menu-masthead__copy{
  max-width:min(100%, 760px);
  margin-inline:auto;
  text-align:center;
}
/* the 48ch cap keeps the measure readable, so centre the box itself */
.menu-masthead__text{margin-inline:auto}
.menu-masthead__crumbs,
.menu-masthead__meta{justify-content:center}
.menu-masthead__rule{
  margin-inline:auto;
  background:linear-gradient(90deg, rgba(181,140,103,0) 0%, var(--sx-main) 50%, rgba(181,140,103,0) 100%);
}

/* Special Offers: closing Book a Table (was an inline style) */
.offer-cta__inner{text-align:center; padding:0 0 3rem}

/* ----------------------------------------------------- field-driven bits -- */

/* the allergen note is now rich text, so its paragraphs sit inside the block */
.menu-note__text p{margin:0}
.menu-note__text p + p{margin-top:.8em}

/* review ratings below five: the remaining stars are drawn faint */
.index-voices__star-off{opacity:.28}

/* ------------------------------------------------------------ admin bar -- */
/* the header sticks to the viewport top; keep it clear of the toolbar */
.admin-bar .index-header.is-stuck{top:32px}
@media screen and (max-width:782px){
  .admin-bar .index-header.is-stuck{top:46px}
}
@media screen and (max-width:600px){
  /* the toolbar scrolls away on phones */
  .admin-bar .index-header.is-stuck{top:0}
}

/* ------------------------------------------------------- generic pages -- */
.sx-page{
  padding:0 var(--sx-gutter) var(--sx-section);
  background:var(--sx-bg);
}
.sx-page__inner{max-width:760px; margin:0 auto}

/* "Last updated" closes the banner, set like the crumbs */
.sx-page__updated{
  margin:clamp(28px, 3.4vw, 44px) 0 0;
  font-size:10px;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sx-muted);
}
.sx-page__updated time{color:var(--sx-main)}

/* policy pages (page.php): the opening paragraphs sit in the banner … */
.sx-page__intro{max-width:62ch}
.sx-page__intro p{margin:0}
.sx-page__intro p + p{margin-top:.8em}
.sx-page__intro a{color:var(--sx-main); transition:color .3s var(--sx-ease)}
.sx-page__intro a:hover{color:var(--sx-heading)}

/* … and each H2 section is an offer card carrying editor content */
.sx-doc .offer-card{scroll-margin-top:calc(var(--sx-header-actual, var(--sx-header-h)) + 24px)}
.sx-doc__text{
  max-width:72ch;
  margin:clamp(18px, 2.2vw, 26px) 0 0;
  font-size:16px;
  line-height:1.7;
}
.sx-doc__text > :last-child{margin-bottom:0}

.offer-note__text a{color:var(--sx-main); transition:color .3s var(--sx-ease)}
.offer-note__text a:hover{color:var(--sx-heading)}

.sx-prose{color:var(--sx-para); font-weight:300}
.sx-prose > :first-child{margin-top:0}
.sx-prose h2,
.sx-prose h3,
.sx-prose h4{
  margin:2em 0 .7em;
  color:var(--sx-heading);
  font-weight:300;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sx-prose h2{font-size:clamp(20px, 2.2vw, 26px)}
.sx-prose h3{font-size:clamp(17px, 1.8vw, 20px)}
.sx-prose h4{font-size:15px}
.sx-prose p,
.sx-prose ul,
.sx-prose ol{margin:0 0 1.1em}
.sx-prose ol{padding-left:1.2em}
.sx-prose ol li::marker{color:var(--sx-main)}
/* bullets are short gold rules, not dots */
.sx-prose ul{list-style:none; padding-left:0}
.sx-prose ul li{position:relative; padding-left:30px}
.sx-prose ul li::before{
  content:"";
  position:absolute; left:0; top:.82em;
  width:14px; height:1px;
  background:var(--sx-main);
}
.sx-prose li{margin-bottom:.7em}
.sx-prose a{color:var(--sx-main); text-decoration:underline; text-decoration-color:var(--sx-rule); text-underline-offset:4px; transition:color .3s var(--sx-ease), text-decoration-color .3s var(--sx-ease)}
.sx-prose a:hover{color:var(--sx-heading); text-decoration-color:currentColor}
.sx-prose strong{font-weight:400; color:var(--sx-heading)}
.sx-prose hr{border:0; border-top:1px solid var(--sx-rule-soft); margin:2.4em 0}
.sx-prose img{max-width:100%; height:auto}
.sx-prose table{width:100%; border-collapse:collapse; margin:0 0 1.4em}
.sx-prose th,
.sx-prose td{padding:.6em .4em; border-bottom:1px solid var(--sx-rule-soft); text-align:left}

/* block-editor tables: hairline rows instead of WordPress's boxed cells */
.sx-prose .wp-block-table{margin:6px 0 1.6em; overflow-x:auto}
.sx-prose .wp-block-table table{margin:0; font-size:15px; line-height:1.55}
.sx-prose .wp-block-table thead{border-bottom:1px solid var(--sx-rule)}
.sx-prose .wp-block-table th,
.sx-prose .wp-block-table td{
  padding:14px 20px 14px 0;
  border:0;
  border-bottom:1px solid var(--sx-rule-soft);
  vertical-align:top;
}
.sx-prose .wp-block-table th{
  padding-bottom:12px;
  border-bottom:0;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sx-main);
}
.sx-prose .wp-block-table td:first-child{color:var(--sx-heading)}
.sx-prose .wp-block-table figcaption{margin-top:10px; font-size:13px; color:var(--sx-muted)}

@media screen and (max-width:600px){
  .sx-doc__text{font-size:15.5px}

  /* phones: each row stacks, every value under its column name
     (data-label is added by shezan_table_labels()) */
  .sx-prose .wp-block-table{overflow:visible}
  .sx-prose .wp-block-table thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
  }
  .sx-prose .wp-block-table table{border-top:1px solid var(--sx-rule)}
  .sx-prose .wp-block-table tr{
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--sx-rule-soft);
  }
  .sx-prose .wp-block-table td{
    display:block;
    padding:0;
    border:0;
  }
  .sx-prose .wp-block-table td + td{margin-top:10px}
  .sx-prose .wp-block-table td[data-label]:not([data-label=""])::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font-size:9.5px;
    font-weight:400;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--sx-main);
  }
}

.sx-list{list-style:none; padding:0}
.sx-list li{padding:.8em 0; border-bottom:1px solid var(--sx-rule-soft)}

.sx-404__actions{margin:clamp(28px, 4vw, 44px) 0 0}

/* ------------------------------------------------------- WP essentials -- */
.screen-reader-text{
  position:absolute!important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.screen-reader-text:focus{
  clip:auto; width:auto; height:auto;
  margin:0; padding:12px 18px;
  top:8px; left:8px; z-index:100000;
  background:var(--sx-main); color:var(--sx-bg);
}
.alignleft{float:left; margin:0 1.5em 1em 0}
.alignright{float:right; margin:0 0 1em 1.5em}
.aligncenter{display:block; margin-inline:auto}
.wp-caption-text,
.wp-element-caption{font-size:13px; color:var(--sx-muted); margin-top:.5em}