/*
Theme Name: Chaiyo
Theme URI: https://inspiredm.co.uk/
Author: INSPIRE
Author URI: https://inspiredm.co.uk/
Description: Bespoke classic WordPress theme for the Chaiyo restaurant group.
Version: 1.23.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chaiyo
*/

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Shared page gutter — applied to containers, not inside the max-width, so all
   box edges (header, content, footer border) line up at the same width. */
:root {
  --chaiyo-gutter: clamp(1.25rem, 4vw, 1.875rem);

  /* Header colour context — flips on the dark header */
  --hdr-fg: var(--wp--preset--color--black);
  --hdr-bg: var(--wp--preset--color--white);
  --header-h: 74px;    /* header height on desktop = 34px content + 1.25rem block padding × 2 */

  /* Shared button geometry — nav pills, Careers CTA and card buttons all use these */
  --btn-w: 143px;
  --btn-h: 34px;
  --btn-radius: 999px;
  --btn-fs: 10px;
  --btn-ls: 0.30em;
  --btn-ib-w: 0.8px;   /* inner border width */
  --btn-ib-v: 4.3px;   /* inner border inset — vertical */
  --btn-ib-h: 5.8px;   /* inner border inset — horizontal */
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  font-family: var(--wp--preset--font-family--text);
  font-size: 15px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: currentColor; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(textarea):focus-visible,
:where(select):focus-visible,
:where(.wp-block-button__link):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--wp--preset--color--black); color: var(--wp--preset--color--white);
  padding: 10px 16px; border-radius: 6px; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* Tracked uppercase label used for names, roles, eyebrows */
.chaiyo-label {
  font-size: 14px; line-height: 1.4; letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   2. Site header
   --------------------------------------------------------------- */
.chaiyo-header {
  position: relative;
  z-index: 50;
  color: var(--wp--preset--color--black);
  padding-inline: var(--chaiyo-gutter);
}
.chaiyo-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.25rem;
  max-width: 1380px;
  margin-inline: auto;
}
.chaiyo-header__brand { flex: 0 0 auto; }
.chaiyo-header__cta { margin-left: auto; }
.chaiyo-header__brand a { text-decoration: none; display: inline-block; }
.chaiyo-header__brand .site-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.custom-logo, .chaiyo-logo { max-height: 34px; width: auto; display: block; }

/* Primary navigation list */
.primary-navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}

/* ---- Shared pill geometry: nav pills, Careers CTA and card buttons ---- */
.primary-navigation a,
.chaiyo-header__cta a,
.wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-w);
  height: var(--btn-h);
  padding: 0;
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--btn-fs);
  letter-spacing: var(--btn-ls);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
/* Inner border — always present, always the current text colour */
.primary-navigation a::before,
.chaiyo-header__cta a::before,
.wp-block-button__link::before {
  content: "";
  position: absolute;
  top: var(--btn-ib-v); bottom: var(--btn-ib-v);
  left: var(--btn-ib-h); right: var(--btn-ib-h);
  border: var(--btn-ib-w) solid currentColor;
  border-radius: 999px;
  pointer-events: none;
  transition: border-color .15s ease;
}

/* Nav pills — 11px / 0.16em; outlined by default, filled on hover */
.primary-navigation a { --btn-fs: 11px; --btn-ls: 0.16em; background: transparent; color: var(--hdr-fg); }
.primary-navigation a:hover,
.primary-navigation a:focus-visible { background: var(--hdr-fg); color: var(--hdr-bg); }

/* Careers — filled by default, outlined on hover (mirror of the nav pills) */
.chaiyo-header__cta a { background: var(--hdr-fg); color: var(--hdr-bg); }
.chaiyo-header__cta a:hover,
.chaiyo-header__cta a:focus-visible { background: transparent; color: var(--hdr-fg); }

/* Dark-header context: flip the colour variables and page chrome */
body.has-dark-header {
  background: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  --hdr-fg: var(--wp--preset--color--white);
  --hdr-bg: var(--wp--preset--color--black);
}
body.has-dark-header .chaiyo-header { color: var(--wp--preset--color--white); }

/* The mobile navigation is handled by a plugin — hide the desktop nav on small screens */
@media (max-width: 899px) {
  .primary-navigation { display: none; }
  /* Header pinned to the top on mobile. The mobile-nav overlay is a fixed
     descendant of the header, so it lives INSIDE the header's stacking context —
     raising the header's own z-index can't beat it. Instead we lift a full-width
     background bar (::before) and the header content above the overlay (z-index 1000). */
  .chaiyo-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    background: var(--hdr-bg);
  }
  .chaiyo-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hdr-bg);
    z-index: 1001;            /* above the overlay's z-index (1000) */
    pointer-events: none;
  }
  /* Logo stays left; Careers is centred — both lifted above the overlay */
  .chaiyo-header__inner { position: relative; z-index: 1001; justify-content: flex-start; }
  /* The dark header separates from the light overlay by contrast; the white
     header needs an edge, or it blends into the overlay and looks like it's
     sitting behind it. */
  body:not(.has-dark-header) .chaiyo-header { border-bottom: 1px solid var(--wp--preset--color--black); }
  .chaiyo-header__cta {
    position: absolute; left: 65%; top: 48%;
    transform: translate(-50%, -50%); margin-left: 0;
  }
}

/* Desktop: pin the header (the mobile header is pinned in the max-width block) */
@media (min-width: 900px) {
  .chaiyo-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--hdr-bg);
  }
}

/* Sub-nav pins beneath the header at every width. --header-h is kept in sync
   with the header's real height by assets/js/header-offset.js, so it sits flush
   whether the header is its mobile or desktop height. */
.chaiyo-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 99;
}


/* Restaurants sub-navigation — dark band shown under the header on restaurant pages */
.chaiyo-subnav--dark {
  background: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.chaiyo-subnav--light {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.chaiyo-subnav__inner {
  display: flex; align-items: center; gap: 1rem;
  max-width: 1380px; margin-inline: auto;
  padding: 0.55rem 0;
}
.chaiyo-subnav__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 12rem;
  flex-wrap: wrap;
}
.chaiyo-subnav__menu a {
  text-decoration: none;
  font-size: 15px; 
  opacity: 0.75; transition: opacity .15s ease;
}
.chaiyo-subnav__menu .current-menu-item > a,
.chaiyo-subnav__menu a:hover,
.chaiyo-subnav__menu a:focus-visible { opacity: 1; }
.chaiyo-subnav__arrow {
  flex: 0 0 auto;
  color: currentColor; text-decoration: none;
  font-size: 16px; line-height: 1; padding: 0.25rem 0.4rem;
  opacity: 0.75; transition: opacity .15s ease;
}
.chaiyo-subnav__arrow:hover,
.chaiyo-subnav__arrow:focus-visible { opacity: 1; }
.chaiyo-subnav__menu .current-menu-item > a { border-bottom: 1px solid currentColor; }
@media (max-width: 640px) {
  .chaiyo-subnav__menu { flex-wrap: nowrap; gap: 2rem; text-align: center }
}
/* Sub-nav prev/next arrows — SVG masked in currentColor (adapts to the band) */
.chaiyo-subnav__arrow {
  flex: 0 0 auto;
  display: inline-block;
  width: 20px;                 /* arrow length */
  height: 10px;                /* keeps the 21.5:11 ratio */
  font-size: 0;                  /* hides the → / ← glyph in the markup */
  text-decoration: none;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/themes/chaiyo/images/prevnextarrow.svg) center / contain no-repeat;
          mask: url(/wp-content/themes/chaiyo/images/prevnextarrow.svg) center / contain no-repeat;
  opacity: 0.75;
  transition: opacity .15s ease;
}
.chaiyo-subnav__arrow--next { transform: scaleX(-1); }   /* SVG points left, so flip for next */
.chaiyo-subnav__arrow:hover,
.chaiyo-subnav__arrow:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------
   3. Card / CTA buttons — geometry and the inner border come from the
   shared pill rule in section 2; these set only fill and text colour.
   The inner border uses currentColor, so it always follows the text.
   --------------------------------------------------------------- */
.wp-block-button.is-style-amber .wp-block-button__link { background: var(--wp--preset--color--amber); color: var(--wp--preset--color--black); }
.wp-block-button.is-style-red   .wp-block-button__link { background: var(--wp--preset--color--red);   color: var(--wp--preset--color--black); }
.wp-block-button.is-style-dark  .wp-block-button__link { background: var(--wp--preset--color--brown); color: var(--wp--preset--color--cream); }
.wp-block-button.is-style-cream .wp-block-button__link { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--brown); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: currentColor; }

/* ---------------------------------------------------------------
   4. Thai hover label swap
   thai-hover.js wraps a label as <span class="chaiyo-en"> + <span class="chaiyo-th">
   and adds .has-thai. On hover/focus the English fades out and the Thai in.
   Both spans inherit the link colour, so they follow each hover state.
   --------------------------------------------------------------- */
.has-thai { position: relative; }
.has-thai .chaiyo-en { transition: opacity .15s ease; }
.has-thai .chaiyo-th {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--thai);
  text-indent: 0; /* Thai keeps the button's letter-spacing */
  opacity: 0; transition: opacity .15s ease;
}
.has-thai:hover .chaiyo-en,
.has-thai:focus-visible .chaiyo-en { opacity: 0; }
.has-thai:hover .chaiyo-th,
.has-thai:focus-visible .chaiyo-th { opacity: 1; }

/* ---------------------------------------------------------------
   5. Restaurant cards (sub-brand pairings)
   --------------------------------------------------------------- */
.restaurant-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.restaurant-card figure,
.restaurant-card .wp-block-image { margin: 0; }
.restaurant-card img { width: 100%; object-fit: cover; }
.restaurant-card__body {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center;
  padding: 1.5rem 1.25rem 1.75rem;
  flex: 1 1 auto;
}
.restaurant-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.2; margin: 0;
}
.restaurant-card.is-plaza     { background: var(--wp--preset--color--navy);  color: var(--wp--preset--color--white); }
.restaurant-card.is-plaza     .restaurant-card__title { color: var(--wp--preset--color--amber); }
.restaurant-card.is-speedboat { background: var(--wp--preset--color--mint);  color: var(--wp--preset--color--brown); }
.restaurant-card.is-speedboat .restaurant-card__title { color: var(--wp--preset--color--red); }
.restaurant-card.is-yai       { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--brown); }
.restaurant-card.is-yai       .restaurant-card__title { color: var(--wp--preset--color--brown); }

/* ---------------------------------------------------------------
   6. Hero standfirst
   --------------------------------------------------------------- */
.chaiyo-hero {
  background: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
}
.chaiyo-hero .chaiyo-hero__lead {
  font-size: clamp(1.5rem, 3.6vw, 2.1875rem); /* ~35px */
  line-height: 1.25;
}
.chaiyo-hero .chaiyo-hero__note {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.4;
}

/* ---------------------------------------------------------------
   7. Team grid
   --------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.team-member { display: flex; flex-direction: column; gap: 0.5rem; }
.team-member img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.team-member__name { margin: 0.5rem 0 0; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; }
.team-member__role { margin: 0; font-size: 13px; opacity: 0.7; }
.team-member__bio  { margin: 0.25rem 0 0; font-size: 13px; line-height: 1.4; }

/* ---------------------------------------------------------------
   8. Content width helpers
   --------------------------------------------------------------- */
.site-main { min-height: 40vh; }
.entry-content > * { margin-block: 0 1.25rem; }

/* ---------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------- */
.chaiyo-footer {
  background: var(--hdr-bg);
  color: var(--hdr-fg);
  padding-block: clamp(2.5rem, 1vw, 4.5rem);
  padding-inline: var(--chaiyo-gutter);
}
body.page-template-default .chaiyo-footer { padding-top: 0 }
/* Footer chop follows the footer: white art on dark pages, black on light */
body:not(.has-dark-header) img[src*="footer-chop.svg"] { content: url(/wp-content/uploads/footer-chop-black.svg); }
/* Hamburger bars follow the header: black on light pages, white on dark */
.imn-hamburger .imn-bar { background-color: var(--hdr-fg) !important; }

.chaiyo-footer__inner {
  max-width: 1380px;
  margin-inline: auto;
  border: 1px solid var(--hdr-fg);
  padding: 1.375rem 1.625rem;
}
.chaiyo-footer a { color: currentColor; text-decoration: none; }
.chaiyo-footer a:hover { text-decoration: underline; }

.chaiyo-footer__main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.chaiyo-footer__centre { justify-self: center; text-align: center; }
.chaiyo-footer__col--right { justify-self: end; text-align: right; }

.chaiyo-footer__logo { max-width: min(320px, 60vw); height: auto; margin: 0 auto; display: block; }

/* Widgets */
.chaiyo-footer .widget { margin: 0 0 0.5rem; }
.chaiyo-footer .widget:last-child { margin-bottom: 0; }
.chaiyo-footer .footer-heading {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.6; margin: 0 0 1rem;
}
.chaiyo-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.chaiyo-footer__col--left a,
.chaiyo-footer__col--left .menu a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* Bottom bar */
.chaiyo-footer__bar {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  font-size: 10px; line-height: 1.25;
}
.chaiyo-footer__address { margin-left: auto; text-align: right; }

@media (max-width: 781px) {
  .chaiyo-footer__main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .chaiyo-footer__col--right { justify-self: center; text-align: center; }
  .chaiyo-footer__bar { justify-content: center; text-align: center; margin: 2em 0 0; gap: 0.25rem; }
  .chaiyo-footer__address { margin-left: 0; }
  .chaiyo-footer__col--left { order: 2; }
  .chaiyo-footer__col--left img { margin: 0 auto 2em }
  .chaiyo-footer__centre { margin: 1em 0 }
  .chaiyo-subnav__arrow { display: none }
}

/* ---------------------------------------------------------------
   10. Motion preferences
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------
   11. Classic-theme content alignment for the_content()
   Full-width sections bleed; default and wide blocks stay centred.
   --------------------------------------------------------------- */
.entry-content { max-width: none; padding-inline: var(--chaiyo-gutter); }

.entry-content > * {
  max-width: var(--wp--style--global--content-size, 1380px);
  margin-inline: auto;
}
.entry-content > .alignwide {
  max-width: var(--wp--style--global--wide-size, 1380px);
}
.entry-content > .alignfull {
  max-width: none;
  margin-inline: calc(-1 * var(--chaiyo-gutter));
  padding-inline: var(--chaiyo-gutter);
}

/* Header CTA menu reset */
.chaiyo-header__cta-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0.5rem;
}

/* Blog/search listing spacing when not using patterns */
.entry-content article + article { margin-top: 2.5rem; }

/* Mobile menu styles */
.imn-overlay { align-items: flex-start !important; }
.imn-menu ul { margin: 2em 0 0 !important }
.imn-menu li { border: 1px solid #000; border-radius: 999px; margin: 1.25em; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; padding: 0.5em 0 }
.imn-menu li a span { text-transform: lowercase; }
.imn-menu .arrow > a { display: flex; align-items: center; justify-content: center; position: relative; }
.imn-menu .arrow > a::after { content: "\27F6"; position: absolute; top: 27.5%; right: 1rem; transform: translateY(-50%); font-size: 2em; line-height: 1; }
.imn-menu .book > a { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 1rem 3rem; background: var(--wp--preset--color--black); color: var(--wp--preset--color--white); border-radius: 999px; font-family: var(--wp--preset--font-family--text); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.imn-menu li.book { border: none }
.imn-menu .book > a::before { content: ""; position: absolute; inset: 5px; border: 1px solid currentColor; border-radius: 999px; pointer-events: none; }
.imn-menu .book > a:hover,
.imn-menu .book > a:focus-visible {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
}
/* ---------------------------------------------------------------
   Team grid -> mobile carousel (phones only)
   Desktop keeps the Kadence grid; JS adds .is-carousel on phones.
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .team-carousel.is-carousel .team-intro {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin: 0 0 2rem !important;
  }

  .team-carousel.is-carousel .tc-viewport { overflow: hidden; width: 100%; }

  .team-carousel.is-carousel .tc-rule {
    box-sizing: border-box;
    height: 0;
    margin: 0 calc(50% - 50vw) 1.5rem;   /* full-bleed line, space before the slides */
    border-top: 1px solid #000;
  }

  .team-carousel.is-carousel .tc-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    transition: transform .35s ease;
    will-change: transform;
  }
  .team-carousel.is-carousel .tc-track > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .team-carousel.is-carousel .tc-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin-top: 1.5rem;
    margin-left: calc(50% - 50vw);        /* full-bleed: span the viewport width */
    margin-right: calc(50% - 50vw);
    padding: 0.85rem var(--chaiyo-gutter); /* keep arrows at the content edges */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  .tc-arrow {
    flex: 0 0 auto;
    display: inline-block;
    width: 28px;                 /* arrow length */
    height: 14px;                /* keeps the 21.5:11 ratio */
    padding: 0;
    border: 0;
    cursor: pointer;
    color: var(--hdr-fg);
    background-color: currentColor;
    -webkit-appearance: none;
            appearance: none;
    -webkit-mask: url(/wp-content/themes/chaiyo/images/prevnextarrow.svg) center / contain no-repeat;
            mask: url(/wp-content/themes/chaiyo/images/prevnextarrow.svg) center / contain no-repeat;
    opacity: 0.75;
    transition: opacity .15s ease;
  }
  .tc-arrow--next { transform: scaleX(-1); }   /* SVG points left, so flip for next */
  .tc-arrow:hover,
  .tc-arrow:focus-visible { opacity: 1; }
}