/* =========================================================
   Sub-brand — styles for template-subbrand.php
   Load via functions.php (see install notes). Mobile-first.
   ========================================================= */

:root {
  --red: #e8412c;
  --red-dark: #c5331f;
  --ink: #141414;
  --ink-2: #1f1f1f;
  --paper: #ffffff;
  --mist: #ededed;
  --mist-2: #e2e2e2;
  --muted: #555;
  --line: rgba(255, 255, 255, 0.14);
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --max: 1240px;
}

/* skewed condensed display look from the mockup */
.sb-skew {
  display: inline-block;
  transform: skewX(-8deg);
}

/* override parent theme grid-container for page body */
.page-template-template-subbrand .grid-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100%;
}

body.subbrand-page {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
/* Blanket resets for this template's OWN sections. The [ogp_events] embed is excluded:
   it comes fully styled by the parent theme, and `color: inherit` would flatten its link
   colours while `display: block` would stack its inline icons. Excluding it lets the embed
   look exactly as it does on /events/. */
.subbrand-page img:not(.sb-events img) {
  max-width: 100%;
  display: block;
}
.subbrand-page a:not(.sb-events a) {
  text-decoration: none;
  color: inherit;
}

/* ---------- Header ---------- */
.sb-header {
  position: sticky;
  top: 68px;
  z-index: 50;
  background: var(--red);
}
.sb-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  /*   padding:.55rem 1.25rem; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sb-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sb-logo img {
  max-height: 80px;
  max-width: 160px;
}
.sb-logo__text {
  font-family: var(--display);
  color: #fff;
  font-size: 1.4rem;
  line-height: 0.8;
  letter-spacing: 0.5px;
  transform: skewX(-8deg);
}
.sb-logo__text small {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 3px;
}

.sb-nav--main {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.sb-nav--main a {
  font-family: var(--display);
  font-size: 0.85rem;
  color: #fff;
  letter-spacing: 0.5px;
  transform: skewX(-8deg);
  transition: opacity 0.15s;
}
.sb-nav--main a:hover {
  opacity: 0.7;
}
.sb-nav__ig {
  font-style: normal;
}

.sb-subnav {
  background: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 0.45rem 1rem;
}
.sb-subnav a {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--red);
  letter-spacing: 0.5px;
  transform: skewX(-8deg);
}
.sb-subnav a:hover {
  opacity: 0.7;
}

/* ---------- Hero ---------- */
.sb-hero {
  position: relative;
  min-height: min(58vw, 460px);
  background-size: cover;
  background-position: center;
  filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  margin-top: 20px;
}
@media screen and (min-width: 2000px) {
  .sb-hero {
    min-height: min(58vw, 760px);
  }
}

/* Background video variant: covers the hero, sits behind the overlay + content. */
.sb-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sb-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, var(--hero-overlay, 0.6)); /* darkness set per page via the Hero "Overlay darkness" slider */
  z-index: 1;
}
.sb-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 2rem 1rem;
}
.sb-hero__kicker {
  font-family: var(--display);
  font-size: clamp(1.2rem, 3.4vw, 2.1rem);
  margin: 0;
  letter-spacing: 1px;
  transform: skewX(-8deg);
}
.sb-hero__title {
  font-family: var(--display);
  margin: 0.1em 0;
  font-size: clamp(3.4rem, 14vw, 9rem);
  line-height: 0.82;
  letter-spacing: 1px;
  transform: skewX(-8deg);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.sb-hero__sub {
  font-family: var(--display);
  font-size: clamp(1rem, 3.2vw, 2rem);
  margin: 0;
  letter-spacing: 4px;
  transform: skewX(-8deg);
}
/* Hero image variant (shown instead of the text lines).
   Scoped under .sb-hero so it out-specifies the generic `.subbrand-page img` rule. */
.sb-hero .sb-hero__image {
  max-width: min(90%, 820px);
  max-height: 70vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* ---------- Hero: the "Logo + paragraph" variant ---------- */
/* Logo left, brand copy right, on a dark band — shorter than the display-headline heroes
   because it carries two columns rather than one big line of type. The diagonal-stripe
   texture is part of the band, not an image: it shows through whenever the page hasn't set
   a background photo (which arrives as an inline background-image and so wins over this). */
.sb-hero--split {
  min-height: min(42vw, 520px);
  background-color: #161616;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.032) 0 2px,
    rgba(255, 255, 255, 0) 2px 10px
  );
}
.sb-hero--split .sb-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
  text-align: left;
}
.sb-hero__logo img {
  max-height: 220px;
  width: auto;
  margin: 0;
}
.sb-hero__blurb {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.6;
}
.sb-hero__blurb p {
  margin: 0 0 1em;
}
.sb-hero__blurb p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 860px) {
  .sb-hero--split .sb-hero__content {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    text-align: center;
  }
  .sb-hero__logo img {
    max-height: 150px;
    margin: 0 auto;
  }
}

/* ---------- Promo cards ---------- */
.sb-promos {
  display: flex;
  flex-wrap: nowrap; /* always one line; cards share the row equally (1-4) at every width */
  gap: 0;
}

@media screen and (min-width: 2000px) {
  .sb-promos {
    margin: 0 auto;
    max-height: 50vw;
    max-width: 50vw;
  }
}
.sb-promo {
  flex: 1 1 0;
  min-width: 0; /* ← this line is new */
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.4rem;
  background-size: cover;
  background-position: center;
}
.sb-promo--red {
  background: var(--red);
}
.sb-promo--mist {
  background: var(--mist);
}
/* No scrim over the photo — the image shows at full strength. (#333 is the fallback
   behind it, for a tile whose image is missing or still loading, not an overlay.) */
.sb-promo--photo {
  background-color: #333;
}
.sb-promo__title {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  color: #fff;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 0.9;
  transform: skewX(-8deg);
}
.sb-promo__title--ink {
  color: var(--ink);
}
.sb-promo__btn {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  transform: skewX(-8deg);
}
.sb-promo__btn--orange {
  background: #f08a1d;
}

/* ---------- Who are we ---------- */
.sb-who {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.sb-who__media img {
  margin: 0 auto;
  max-height: 380px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.sb-section-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: 0.5px;
  transform: skewX(-6deg);
  margin: 0 0 1rem;
}
.sb-who__text p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 1rem;
  max-width: 54ch;
}

/* ---------- Stats bar ---------- */
.sb-stats {
  background: var(--ink);
  padding: 2.2rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.sb-stat {
  background: var(--red);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.6rem 0.6rem 1.2rem;
  min-width: 200px;
  justify-content: center;
}
.sb-stat__num {
  font-family: var(--display);
  color: #fff;
  font-size: 2.2rem;
  transform: skewX(-8deg);
}
.sb-stat__label {
  font-family: var(--display);
  background: var(--ink);
  color: #fff;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  transform: skewX(-8deg);
}

/* ---------- Champions banner ---------- */
.sb-banner {
  height: min(40vw, 420px);
  background-size: cover;
  background-position: center;
  background-color: #101010;
}

/* ---------- Tournaments ---------- */
.sb-tournaments {
  padding: 3rem 1.25rem;
  text-align: center;
}
.sb-pill-title {
  display: inline-block;
  background: var(--ink);
  color: var(--red);
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  letter-spacing: 1px;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  margin: 0 0 2.2rem;
  transform: skewX(-6deg);
}
.sb-tournaments__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  max-width: var(--max);
  margin: 0 auto;
}
.sb-tourney {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 140px;
}
.sb-tourney__badge {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-tourney__badge.is-empty {
  background: var(--mist);
  border-radius: 50%;
}
.sb-tourney__badge img {
  max-height: 120px;
  width: auto;
}
.sb-tourney__date {
  font-family: var(--display);
  background: var(--red);
  color: #fff;
  padding: 0.3rem 1.4rem;
  border-radius: 999px;
  font-size: 0.8rem;
  transform: skewX(-8deg);
}
/* "View all" → the OGP Event Picker, pre-filtered to this brand.
   Scoped under .subbrand-page so it out-specifies `.subbrand-page a { color: inherit }`
   above — without that the label inherits --ink and vanishes into the dark pill. */
.subbrand-page .sb-tournaments__all {
  display: inline-block;
  margin: 2.4rem 0 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.6rem 1.8rem;
  border-radius: 999px; /* matches .sb-pill-title and .sb-tourney__date */
  transition: background 0.15s ease;
}
.subbrand-page .sb-tournaments__all:hover,
.subbrand-page .sb-tournaments__all:focus-visible {
  background: var(--red);
  color: #fff;
}

/* ---------- Events (the parent theme's [ogp_events] embed) ---------- */
/* This section is now the body of the page, so unlike the rest of the embed's history it
   IS restyled here — from the parent's sidebar-plus-table into the horizontal "Find an
   Event" bar and the borderless row list.

   SPECIFICITY, READ BEFORE EDITING: the parent emits its <style> inline in the body, i.e.
   AFTER this stylesheet, and its selectors are `.ogp-ep .oes-*` = (0,2,0). An override
   written at equal specificity here loses on source order, silently. Everything below is
   therefore `.subbrand-page .sb-events .oes-*` = (0,3,0).

   That same strength is a trap in the other direction: an unguarded override also beats
   the parent's `@media (max-width:880px)` mobile rules, which is why the row and bar
   geometry below is fenced inside its own min-width query.

   Nothing is changed in the parent theme — it is shared with /events/ and anything else
   using [ogp_events]. The two shape changes CSS can't make (moving .oes-search into the
   bar, relabelling its heading) are done by the small script in template-subbrand.php. */
.sb-events {
  padding: 0;
  /* Above the hero, and pulled up so the bar overlaps it. */
  position: relative;
  z-index: 3;
  margin-top: clamp(-72px, -5vw, -40px);
}
.subbrand-page .sb-events .oes-wrap {
  grid-template-columns: 1fr; /* bar spans the full width, list sits under it */
  max-width: 1400px;
  margin: 0 auto;
  gap: 0;
}

/* ---- The "Find an Event" bar ---- */
.subbrand-page .sb-events .oes-filters {
  position: static; /* the parent makes it a sticky sidebar, which fights the overlap */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.subbrand-page .sb-events .oes-filters h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
/* Both belong to the vertical sidebar this bar replaces. */
.subbrand-page .sb-events .oes-reset,
.subbrand-page .sb-events .oes-hr {
  display: none;
}
.subbrand-page .sb-events .oes-field {
  flex: 1 1 190px;
  margin-bottom: 0;
}
/* Every select already names itself ("All States"), so the label above it is a duplicate
   once they sit side by side. */
.subbrand-page .sb-events .oes-field label {
  display: none;
}
.subbrand-page .sb-events .oes-filters .oes-search {
  flex: 0 0 auto;
  padding: 0;
  border-bottom: 0;
}
/* The selects filter on change, so the text box would be a fourth control doing the same
   job in a bar that has no room for it. Only its button rides along. */
.subbrand-page .sb-events .oes-filters .oes-search input {
  display: none;
}
.subbrand-page .sb-events .oes-search button {
  padding: 12px 28px;
  border-radius: 8px;
}

/* ---- Results list ---- */
.subbrand-page .sb-events .oes-panel {
  margin-top: 2.5rem;
  background: none;
  border: 0;
  border-radius: 0;
}
/* No column header and no count/sort strip — the rows read on their own. */
.subbrand-page .sb-events .oes-thead,
.subbrand-page .sb-events .oes-meta {
  display: none;
}
.subbrand-page .sb-events .oes-row {
  padding: 1.25rem 1rem;
}
.subbrand-page .sb-events .oes-ev .nm {
  font-size: 17px;
}
.subbrand-page .sb-events .oes-cta .go {
  padding: 11px 26px;
  font-size: 13px;
}

/* Desktop geometry only. Below 880px the parent restacks each row into a two-column
   grid with named areas; these rules are (0,3,0) and would override that from outside a
   media query, so they are fenced in above its breakpoint. */
@media screen and (min-width: 881px) {
  .subbrand-page .sb-events .oes-row {
    grid-template-columns: 110px 1fr 200px 150px;
  }
  .subbrand-page .sb-events .oes-date .m {
    font-size: 12px;
  }
  .subbrand-page .sb-events .oes-date .d {
    font-size: 32px;
    line-height: 1;
  }
  .subbrand-page .sb-events .oes-ev img {
    width: 64px;
    height: 64px;
  }
}

/* The overlap is a wide-screen effect: on a phone the hero is short and the bar would
   sit on top of the logo. */
@media screen and (max-width: 860px) {
  .sb-events {
    margin-top: 0;
    padding-top: 2rem;
  }
}

/* ---------- Contact ---------- */
.sb-contact {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
}
.sb-contact__overlay {
  filter: brightness(0.8);
}
.sb-contact__panel {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  color: #fff;
}
.sb-contact__panel .sb-section-title {
  color: #fff;
}
.sb-form {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sb-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
}
.sb-form input,
.sb-form textarea {
  background: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--ink);
}

.sb-contact-img {
  /*   margin:0 auto;  */
  max-height: 380px;
  width: 50%;
  object-fit: contain;
  overflow: initial;
}


.sb-contact-form {
  width: 50%;
}

@media screen and (max-width: 768px) {
  .sb-contact-form {
    width: 100%;
    padding: 20px;
  }

  .sb-contact-form h2 { 
    text-align: center;
  }
}
.sb-form textarea {
  resize: vertical;
}
.sb-form__btn {
  align-self: flex-start;
  background: var(--red);
  color: #fff;
  border: 0;
  font-family: var(--display);
  letter-spacing: 1px;
  padding: 0.7rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  transform: skewX(-8deg);
}
.sb-form__btn:hover {
  background: var(--red-dark);
}

.sb-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

@media screen and (max-width: 640px) {
  .sb-flex {
    flex-direction: column;
  }
  /* Match the hero height to the background image's own aspect ratio (set per page
     via --hero-ratio) so the whole banner shows with no crop and no letterbox bars.
     Falls back to 5/3 when there's no ratio (e.g. a video background).
     The split hero is excluded: it is sized by its stacked logo + paragraph, and a fixed
     ratio would either crop the copy or leave a gap under it. */
  .sb-hero:not(.sb-hero--split) {
    min-height: 0;
    aspect-ratio: var(--hero-ratio, 5 / 3);
  }
}
/* ---------- Footer ---------- */
.sb-footer {
  background: var(--ink);
  color: #fff;
  padding: 1.6rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.sb-footer__follow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.sb-footer__follow span {
  font-family: var(--display);
  letter-spacing: 1px;
  transform: skewX(-8deg);
}
.sb-footer__follow a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: opacity 0.15s;
}
.sb-footer__follow a:hover {
  opacity: 0.75;
}
.sb-social-icon {
  width: 16px;
  height: 16px;
  fill: currentColor; /* inherits the link color (dark on the white circle) */
  display: block;
}
.sb-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.sb-footer__links a {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}
.sb-footer__links a:hover {
  color: var(--red);
}
.sb-footer__legal {
  width: 100%;
  margin: 0;
  font-size: 0.75rem;
  color: #999;
}

/* ---------- Responsive ---------- */
@media (min-width: 900px) {
  .sb-who {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
  }
  .sb-who__media img {
    margin: 0;
  }
}

/* ---------- Accessibility ---------- */
.sb-nav--main a:focus-visible,
.sb-subnav a:focus-visible,
.sb-form input:focus-visible,
.sb-form textarea:focus-visible,
.sb-form__btn:focus-visible,
.sb-promo:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- Mobile menu ---------- */
.sb-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.sb-nav-toggle__bar {
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

@media (max-width: 900px) {
  .sb-nav-toggle {
    display: flex;
  }

  /* logo + hamburger row */
  .sb-header__inner {
    flex-wrap: wrap;
    padding: 0.5rem 1.25rem;
  }

  /* OPEN = full-height red overlay covering the page (one menu) */
  .sb-header.is-open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--red);
  }
  .sb-header.is-open .sb-header__inner {
    flex: 0 0 auto;
    margin: 0;
  }

  /* hide both link rows until opened */
  .sb-nav--main,
  .sb-subnav {
    display: none;
  }

  .sb-header.is-open .sb-nav--main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    width: 100%;
    gap: 0;
    padding: 1rem 0 0;
  }

  /* sub-nav joins the same red menu: no white box, white links, no divider */
  .sb-header.is-open .sb-subnav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 1.5rem;
    background: transparent;
    border-top: 0;
  }
  .sb-header.is-open .sb-subnav a {
    color: #fff;
  }

  /* full-width, tappable rows */
  .sb-nav--main a {
    padding: 0.85rem 0;
  }
  .sb-subnav a {
    display: block;
    width: 100%;
    padding: 0.85rem 1.25rem;
  }

  /* hamburger animates into an X when open */
  .sb-header.is-open .sb-nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .sb-header.is-open .sb-nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  .sb-header.is-open .sb-nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

footer#site-footer {
  margin-top: 0;
}

/* ---------- Sub-brand nav (separate menu; static now, sticky variant added later) ---------- */
/* The OGP header is fixed at the top (parent theme), so this sticky bar pins directly
   BELOW it — clearing the header's height, plus the WP admin bar when logged in.
   Higher z-index so page content scrolls cleanly UNDER this bar. */
.sb-brandnav {
  background: var(--red);
  position: sticky;
  /* Clear the fixed OGP header: matches the parent's base `.nav-spacer { height: 62px }`.
     (Its taller variants — .mega-top/.side-slide-top 64px, .reg-header 111px — key off body
     classes this site doesn't set. Re-check here if that ever changes.) */
  --sb-nav-top: 62px;
  top: var(--sb-nav-top);
  z-index: 200;
}
/* Logged-in: offset by the WP admin bar height (32px, or 46px at <=782px). */
body.admin-bar .sb-brandnav {
  top: calc(var(--sb-nav-top) + 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .sb-brandnav {
    top: calc(var(--sb-nav-top) + 46px);
  }
}

/* The OGP header stays FIXED on subbrand pages, exactly as the parent theme ships it
   (`#masthead { position: fixed; top: 0; z-index: 100 }` + `.nav-spacer` reserving its
   height). This file used to override both — static header, spacer hidden — so the header
   scrolled away; that also dropped #mastInsert's drop shadow, because a static header
   leaves the positioned paint layer and the next section's background covers it.
   Both overrides are gone: no #masthead / .nav-spacer rules belong here. The sub-brand nav
   pins BELOW the header — see --sb-nav-top above. */
/* The sticky sub-brand nav sits at z-index:200, which was hiding the OGP header
   dropdowns behind it. Lift an open dropdown above the bar. Scoped to hover/active
   (and to the dropdown itself) so it only applies while a menu is open, leaving the
   header's scroll-away behavior untouched. */
body.subbrand-page .main-navigation .menu-item-has-children:hover,
body.subbrand-page .main-navigation .menu-item-has-children.is-active {
  z-index: 300;
}
body.subbrand-page .main-navigation .sub-menu {
  z-index: 300;
}
/* Mobile: the OGP slide-out menu is z-index:2, below the sticky sub-brand bar (200),
   so the bar covered the top of the open drawer. Lift the drawer above the bar while
   it's open (scoped to the open state, so it doesn't affect anything otherwise). */
body.subbrand-page.side-slide-menu-open .side-slide-menu-wrapper {
  z-index: 300;
}
/* ...and once scrolled, the "stuck" sticky bar sits in its own stacking context and can
   still clip over the drawer, so hide the sub-brand bar entirely while the menu is open. */
body.subbrand-page.side-slide-menu-open .sb-brandnav,
body.subbrand-page.side-slide-menu-open .sb-brandnav__sub {
  display: none;
}
/* The parent theme doesn't lock page scroll when this menu opens, so the content
   scrolls behind the open drawer. Lock the root + body while it's open (the drawer
   is position:fixed with its own overflow, so it still scrolls internally). */
html:has(body.subbrand-page.side-slide-menu-open),
body.subbrand-page.side-slide-menu-open {
  overflow: hidden;
}
.sb-brandnav__inner {
  /* max-width: var(--max); */
  /* margin: 0 auto; */
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sb-brandnav__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.sb-brandnav__logo img {
  max-height: 70px;
  width: auto;
  display: block;
  transform: scale(var(--logo-scale, 1)); /* Brand "Logo scale" slider; visual only, doesn't change layout height */
  transform-origin: left center;
}
.sb-brandnav__main {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.sb-brandnav__main a {
  font-family: var(--display);
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.5px;
  transform: skewX(-8deg);
  transition: opacity 0.15s;
  text-decoration: none;
}
.sb-brandnav__main a:hover {
  opacity: 0.7;
}

.sb-brandnav__sub {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0.5rem 1rem;
}
.sb-brandnav__sub a {
  font-family: var(--display);
  font-size: 0.85rem;
  color: var(--red);
  letter-spacing: 0.5px;
  transform: skewX(-8deg);
  text-decoration: none;
}
.sb-brandnav__sub a:hover {
  opacity: 0.7;
}

/* ---------- Sub-brand nav hamburger (mobile) ---------- */
.sb-brandnav__toggle {
  display: none; /* shown on mobile only */
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sb-brandnav__toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

@media (max-width: 768px) {
  .sb-brandnav__toggle {
    display: flex;
  }
  /* Collapse the links into a dropdown panel below the bar. */
  .sb-brandnav__main {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0.25rem 1.25rem 0.9rem;
    background: var(--red);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.18);
  }
  .sb-brandnav.is-open .sb-brandnav__main {
    display: flex;
  }
  .sb-brandnav__main a {
    width: 100%;
    padding: 0.6rem 0;
  }
  /* Hamburger -> X when open. */
  .sb-brandnav.is-open .sb-brandnav__toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .sb-brandnav.is-open .sb-brandnav__toggle span:nth-child(2) {
    opacity: 0;
  }
  .sb-brandnav.is-open .sb-brandnav__toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}