/* ==========================================================================
   Yogatown 2026 brand layer
   Everything is scoped under body.brand-2026 (added by ct_brand_2026_body_class()
   in lib/framework.php), so the old look is untouched everywhere else.
   This file is the reusable part: tokens, type, buttons, header, promo bar,
   footer. Page-specific sections live in their own file (home-brand-2026.css).

   Style guide + client's Canva direction (2026-09-17)
     Primary     Deep Charcoal #1A1D1F · Midnight Navy #1F2A36 · Deep Teal #0F686D
     Supporting  Sage #6E8A76 · Seafoam #7FB8B0 · Light Blue #ADDFF6 · Lavender Grey #766F8F
     Neutral     Warm Stone #D8CEC2 · Soft White #F7F6F2
     Mix         60% soft white / neutrals · 25% charcoal / midnight · 10% teal · 5% supporting

     Three type roles, used in every block:
       1. Section label — DM Sans, small, all caps, tracked, Deep Teal
       2. Title         — Lora, larger, Charcoal
       3. Body          — DM Sans, letter-spacing .025em (Canva's "25")
     Logo is the outlined logo SVG, so the logo font needs no webfont.
   ========================================================================== */

body.brand-2026 {
  --charcoal: #1A1D1F;
  --midnight: #1F2A36;
  --teal: #0F686D;
  --teal-dark: #0B5357;
  --sage: #6E8A76;
  --seafoam: #7FB8B0;
  --light-blue: #ADDFF6;
  --lavender: #766F8F;
  --stone: #D8CEC2;
  --soft-white: #F7F6F2;

  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  /* Labels, nav and buttons are all DM Sans caps — one sans across the site. */
  --font-nav: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --track-body: .025em; /* Canva letter spacing 25 */

  background: var(--soft-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  letter-spacing: var(--track-body);
  line-height: 1.6;
}

body.brand-2026 p {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--track-body);
  color: inherit;
}

body.brand-2026 .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Labels, links, icons
   -------------------------------------------------------------------------- */

/* Role 1: small dark-teal all-caps section label. */
body.brand-2026 .bh-label {
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 18px;
}

body.brand-2026 .bh-label--teal { color: var(--teal); }
/* On dark backgrounds only — deep teal has too little contrast there. */
body.brand-2026 .bh-label--seafoam { color: var(--seafoam); }

body.brand-2026 .brand-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -4px;
  flex-shrink: 0;
}

body.brand-2026 .bh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
}

body.brand-2026 .bh-link .brand-icon--arrow {
  transition: transform .25s ease;
}

body.brand-2026 .bh-link:hover .brand-icon--arrow {
  transform: translateX(4px);
}

body.brand-2026 .bh-link--light { color: var(--seafoam); }


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

body.brand-2026 .brand-btn {
  display: inline-block;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 19px 32px;
  border: 1.5px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Primary: seafoam fill, white text — matching the Canva render. This is the
   only filled button style on the page; every CTA uses it. */
body.brand-2026 .brand-btn--teal { background: var(--seafoam); border-color: var(--seafoam); color: var(--soft-white); }
body.brand-2026 .brand-btn--teal:hover { background: var(--teal); border-color: var(--teal); color: var(--soft-white); }

body.brand-2026 .brand-btn--dark { background: var(--charcoal); border-color: var(--charcoal); color: var(--soft-white); }
body.brand-2026 .brand-btn--dark:hover { background: var(--teal); border-color: var(--teal); }

body.brand-2026 .brand-btn--outline { background: transparent; border-color: var(--charcoal); color: var(--charcoal); }
body.brand-2026 .brand-btn--outline:hover { background: var(--charcoal); color: var(--soft-white); }

body.brand-2026 .brand-btn--ghost-light { background: transparent; border-color: rgba(247, 246, 242, .55); color: var(--soft-white); }
body.brand-2026 .brand-btn--ghost-light:hover { border-color: var(--soft-white); background: rgba(247, 246, 242, .08); }

/* The theme's own .btn__primary (newsletter forms, and every older page) gets
   the same seafoam fill as .brand-btn--teal so buttons match sitewide. */
body.brand-2026 .btn__primary {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft-white);
  background: var(--seafoam);
  border: 1.5px solid var(--seafoam);
  min-width: 0;
  padding: 17px 28px 15px;
}

body.brand-2026 .btn__primary:after { content: none; }
body.brand-2026 .btn__primary:hover { background: var(--teal); border: 1.5px solid var(--teal); }


/* --------------------------------------------------------------------------
   Promo bar
   -------------------------------------------------------------------------- */

body.brand-2026 .promo-bar {
  background: var(--teal);
  color: var(--soft-white);
}

body.brand-2026 .promo-bar__text {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .01em;
}

body.brand-2026 .promo-bar__link {
  color: var(--soft-white);
  font-weight: 500;
  text-decoration-thickness: 1px;
}

body.brand-2026 .promo-bar__link:hover { text-decoration-color: var(--light-blue); }


/* --------------------------------------------------------------------------
   Header (desktop: centred logo, menu split either side — the theme's layout)
   -------------------------------------------------------------------------- */

body.brand-2026 header {
  background: var(--soft-white);
  border-bottom: 1px solid rgba(26, 29, 31, .08);
}

body.brand-2026 .header__logo {
  width: 120px; /* the logo is near-square, so it needs less width than the old one */
  text-align: center;
}

body.brand-2026 .brand-logo {
  display: block;
  text-decoration: none;
}

body.brand-2026 .brand-logo__img {
  display: block;
  width: 100%;
  height: auto;
}

body.brand-2026 .header__nav > li > a {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding-top: 16px;
}

body.brand-2026 .header__nav > li > a:before { background: rgba(26, 29, 31, .12); height: 1px; }
body.brand-2026 .header__nav > li > a:after { background: var(--teal); height: 2px; }
body.brand-2026 .header__nav > li > a:hover { color: var(--teal); }

body.brand-2026 .header__nav > li .dropdown-menu { border-bottom: 0; }
body.brand-2026 .header__nav > li .dropdown-menu > li { background: var(--soft-white); }
body.brand-2026 .header__nav > li .dropdown-menu > li + li { border-top: 1px solid var(--stone); }

body.brand-2026 .header__nav > li .dropdown-menu > li a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--charcoal);
}

body.brand-2026 .header__nav > li .dropdown-menu > li a:hover { background: var(--stone); }

@media (max-width: 992px) {
  /* The theme floats the mobile header transparently over the page. The new
     hero is dark, so keep the header as its own light band instead. */
  body.brand-2026 header {
    position: relative;
    padding: 18px 0 14px;
  }

  body.brand-2026 .header__logo {
    position: relative;
    top: 0;
    display: block; /* theme sets inline-block, which ignores margin:auto centring */
    width: 120px;
    margin: 0 auto;
  }

  /* Leave room for the theme's fixed hamburger button in the top-right corner. */
  body.brand-2026 .promo-bar {
    padding-left: 64px;
    padding-right: 64px;
  }

  body.brand-2026 .nav-btn {
    background: var(--soft-white);
    border-radius: 50%;
    padding: 13px 12px;
    box-shadow: 0 2px 10px rgba(26, 29, 31, .12);
  }

  body.brand-2026 .nav-btn span { background: var(--charcoal); width: 24px; height: 2px; }
  body.brand-2026 .nav-btn span:nth-child(4) { top: 20px; }

  /* Full-screen menu overlay. Light rather than charcoal: the logo's wordmark is
     black on an opaque white background, so it can't sit on a dark panel. */
  body.brand-2026 header .nav-main {
    background: var(--soft-white);
    background-image: none;
  }

  body.brand-2026 .nav-main .header__logo.mobile { position: absolute; top: 24px; left: 0; right: 0; }

  body.brand-2026 .header__nav > li > a {
    color: var(--charcoal);
    font-size: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(26, 29, 31, .12);
  }

  body.brand-2026 .header__nav > li > a:hover { color: var(--teal); }
  body.brand-2026 .header__nav > li .dropdown-menu > li { background: transparent; }
  body.brand-2026 .header__nav > li .dropdown-menu > li + li { border-top: 0; }
  body.brand-2026 .header__nav > li .dropdown-menu > li a { color: rgba(26, 29, 31, .75); }
  body.brand-2026 .header__nav > li .dropdown-menu > li a:before { background: var(--teal); }
  body.brand-2026 .header__nav > li .dropdown-menu > li a:hover { background: transparent; color: var(--teal); }

  body.brand-2026 header.open .nav-btn span { background: var(--charcoal); }
}


/* --------------------------------------------------------------------------
   Footer (theme markup, restyled: charcoal body, teal base band)
   -------------------------------------------------------------------------- */

body.brand-2026 footer {
  background: var(--charcoal);
  background-image: none;
  color: var(--soft-white);
}

body.brand-2026 footer .scroll-top {
  display: none; /* the diamond "back to top" isn't part of the new system */
}

body.brand-2026 .footer-top {
  background: transparent;
}

/* The theme boxes every .footer__section in a 5px mint border; replace with hairline dividers. */
body.brand-2026 footer .footer__section,
body.brand-2026 .footer-top .footer__section + .footer__section,
body.brand-2026 .footer-top .footer__section:last-child,
body.brand-2026 .footer-bottom .footer__section--two-third {
  border: 0;
  color: var(--soft-white);
}

body.brand-2026 .footer-top .footer__section + .footer__section {
  border-left: 1px solid rgba(247, 246, 242, .12);
}

/* Even thirds put the divider right on top of the locations' chevrons. Give the
   locations column more room so the line falls in the gap before the links. */
@media (min-width: 993px) {
  body.brand-2026 .footer-top .footer__section--one-third:nth-child(1) { width: 32%; }
  body.brand-2026 .footer-top .footer__section--one-third:nth-child(2) { width: 42%; }
  body.brand-2026 .footer-top .footer__section--one-third:nth-child(3) { width: 26%; }
}

@media (max-width: 992px) {
  body.brand-2026 .footer-top .footer__section + .footer__section {
    border-left: 0;
    border-top: 1px solid rgba(247, 246, 242, .12);
  }
}

body.brand-2026 footer h3,
body.brand-2026 footer .heading__secondary--large {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: var(--soft-white);
}

body.brand-2026 footer p,
body.brand-2026 .footer-top .location p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(247, 246, 242, .72);
}

body.brand-2026 .footer-top .location a { color: rgba(247, 246, 242, .72); }
body.brand-2026 .footer-top .location a:hover { color: var(--seafoam); }
body.brand-2026 .footer-top .location + .location:before { background: rgba(247, 246, 242, .12); height: 1px; }
body.brand-2026 .footer-top .location .location__title:after { border-color: var(--seafoam); }

/* The pin SVG carries no fill of its own, so it defaults to black and all but
   disappears on the charcoal footer. */
body.brand-2026 .footer-top .location .icon__location path { fill: var(--seafoam); }

body.brand-2026 footer input[type="text"],
body.brand-2026 footer input[type="email"] {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--soft-white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(247, 246, 242, .4);
  border-radius: 0;
}

body.brand-2026 footer input::placeholder { color: rgba(247, 246, 242, .5); }

body.brand-2026 .footer__nav > li a {
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft-white);
  background: transparent;
  border: 0;
  min-width: 0;
}

body.brand-2026 .footer__nav > li a:after { content: none; }
body.brand-2026 .footer__nav > li a:hover { color: var(--seafoam); border: 0; }

body.brand-2026 footer {
  padding-bottom: 0; /* the teal band closes the page — no charcoal below it */
}

/* Full-bleed teal band. The band is painted once on the row itself: the cells
   sit inside the 970px wrapper, so it spreads outward with a shadow and clips
   to its own height. Painting it on each cell instead means the second cell's
   shadow covers the first cell's social icons. */
body.brand-2026 .footer-bottom {
  position: relative;
  background: var(--teal);
  box-shadow: 0 0 0 100vmax var(--teal);
  clip-path: inset(0 -100vmax);
}

body.brand-2026 .footer-bottom > div {
  background: transparent;
  border-left: 0;
  box-shadow: none;
  clip-path: none;
}

/* Social icons to the left, copyright centred on the full width of the bar. */
body.brand-2026 .footer-bottom .footer__section--one-third {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: auto;
  float: none;
  padding-left: 0;
}

body.brand-2026 .footer-bottom .footer__section--two-third {
  width: 100%;
  float: none;
  text-align: center;
}

body.brand-2026 .footer-bottom .footer__section--two-third { border-left: 0; }
body.brand-2026 .footer-bottom p { color: var(--soft-white); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-accent); }
body.brand-2026 .footer-bottom .social > li .social-icon { fill: var(--soft-white); }
body.brand-2026 .footer-bottom .social > li:hover .social-icon { fill: var(--light-blue); }


/* --------------------------------------------------------------------------
   Exit-intent newsletter popup
   -------------------------------------------------------------------------- */

body.brand-2026 .second-newsletter-popup .popup {
  background: var(--soft-white);
  border: 0;
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(26, 29, 31, .35);
}

body.brand-2026 .second-newsletter-popup .popup .logo { width: 120px; }

body.brand-2026 .second-newsletter-popup .popup h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  text-transform: none;
  color: var(--charcoal);
}

body.brand-2026 .second-newsletter-popup .popup .close { color: var(--charcoal); font-size: 28px; }