/* ==========================================================================
   CROWN Scout Girls — Global chrome (nav + footer)
   Distilled from screens/wf-primitives.jsx and screens/CROWN Homepage.html.
   Logo enlarged ~2x per W-25 handoff.
   ========================================================================== */

/* --- Nav ----------------------------------------------------------------- */

/* The nav is wrapped in <div class="csg-scope"> for CROWN's typography
   scoping (see template-parts/site-header.php). That wrapper's default
   block layout gives it an intrinsic height equal to the nav (~121px),
   which is also position:sticky's containing block — so the sticky has
   zero scroll runway and never fires. Collapse the wrapper's box out of
   layout with display:contents; the .csg-scope selector still applies
   inherited typography to descendants, so nothing else regresses. */
.csg-scope:has(> .csg-nav) { display: contents; }

.csg-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--csg-white);
  border-bottom: 1px solid #E4E4E4;
}
.csg-nav__accent {
  height: var(--accent-bar-h);
  background: var(--csg-red);
  width: 100%;
}
.csg-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.csg-nav__in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 120px;
}
.csg-nav__logo img {
  display: block;
  height: 96px;
  width: auto;
}
.csg-nav__links {
  display: flex;
  gap: 22px;
  margin-left: 8px;
  list-style: none;
  padding: 0;
}
.csg-nav__links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.csg-nav__links a:hover { color: #000; }
.csg-nav__links a.is-active,
.csg-nav__links .current-menu-item > a,
.csg-nav__links .current_page_item > a {
  color: #000;
  border-bottom-color: var(--csg-red);
}
.csg-nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.csg-icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #E4E4E4;
  background: transparent;
  color: #555;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.csg-icon-btn:hover { border-color: #999; color: #000; }
.csg-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.csg-btn--red   { background: var(--csg-red); color: #fff; }
.csg-btn--red:hover { background: var(--csg-red-dark); color: #fff; }
.csg-btn--ghost { background: transparent; border-color: #CCC; color: #000; }
.csg-btn--ghost:hover { border-color: #000; }
.csg-btn--sm    { padding: 7px 12px; font-size: 11px; }
/* Parent Zox News theme sets red anchor color on <a>; force button text back to white/black. */
.csg-scope a.csg-btn--red,
.csg-scope a.csg-btn--red:hover,
.csg-scope a.csg-btn--red:visited { color: #fff; }
.csg-scope a.csg-btn--ghost,
.csg-scope a.csg-btn--ghost:visited { color: #000; }

.csg-acct-wrap { position: relative; }
.csg-acct {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  /* button reset — .csg-acct is now a <button> so it can toggle the menu */
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin: 0;
  cursor: pointer;
  font-weight: inherit;
  line-height: 1;
  border-radius: 4px;
}
.csg-acct:hover,
.csg-acct[aria-expanded="true"] { background: #F4F4F4; }
.csg-acct:focus-visible { outline: 2px solid var(--csg-red); outline-offset: 2px; }
.csg-acct__av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F4F4F4;
  border: 1px solid #E4E4E4;
  display: grid;
  place-items: center;
  color: var(--csg-red);
  font-family: var(--font-display);
  font-weight: 700;
}
.csg-acct__nm { white-space: nowrap; }
.csg-acct__chev { transition: transform 0.15s ease; }
.csg-acct[aria-expanded="true"] .csg-acct__chev { transform: rotate(180deg); }

.csg-acct__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #E4E4E4;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}
.csg-acct__menu[hidden] { display: none; }
.csg-acct__menu li { margin: 0; }
.csg-acct__menu li + li { border-top: 1px solid #F1F1F1; }
.csg-acct__menu a {
  display: block;
  padding: 10px 16px;
  color: #000;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.csg-scope .csg-acct__menu a,
.csg-scope .csg-acct__menu a:visited { color: #000; }
.csg-acct__menu a:hover,
.csg-acct__menu a:focus-visible {
  background: #F4F4F4;
  color: var(--csg-red);
  outline: none;
}
.csg-scope .csg-acct__menu a:hover,
.csg-scope .csg-acct__menu a:focus-visible { color: var(--csg-red); }

/* --- Footer -------------------------------------------------------------- */

.csg-foot {
  border-top: 1px solid #E4E4E4;
  background: #F6F6F6;
  margin-top: 8px;
}
.csg-foot__in {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
  flex-wrap: wrap;
}
.csg-foot__logo img {
  display: block;
  height: 104px; /* ~2x parent-theme footer logo */
  width: auto;
}
.csg-foot__tag {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #555;
  max-width: 34ch;
}
.csg-foot__links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.csg-foot__links a {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #555;
  text-decoration: none;
}
.csg-foot__links a:hover { color: #000; }
.csg-foot__cp {
  font-family: var(--font-ui);
  font-size: 12px;
  color: #777;
  width: 100%;
}

/* --- Mobile drawer ------------------------------------------------------- */

.csg-menu-btn { display: none; }

.csg-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}
.csg-drawer.is-open { visibility: visible; pointer-events: auto; }
.csg-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.csg-drawer.is-open .csg-drawer__backdrop { opacity: 1; }
.csg-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(86vw, 340px);
  background: var(--csg-white);
  border-right: 4px solid var(--csg-red);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  padding: 18px 20px 20px;
  transform: translateX(-100%);
  transition: transform var(--dur-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.csg-drawer.is-open .csg-drawer__panel { transform: translateX(0); }
.csg-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.csg-drawer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
}
.csg-drawer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.csg-drawer__links li + li { border-top: 1px solid #EEE; }
.csg-drawer__links a {
  display: block;
  padding: 14px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
}
.csg-scope .csg-drawer__links a,
.csg-scope .csg-drawer__links a:visited { color: #000; }
.csg-drawer__links a:hover,
.csg-drawer__links a:focus-visible { color: var(--csg-red); outline: none; }
.csg-drawer__links .current-menu-item > a,
.csg-drawer__links .current_page_item > a { color: var(--csg-red); }
.csg-drawer__auth {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #EEE;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.csg-drawer__auth .csg-btn { justify-content: center; }
.csg-drawer__acct {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  text-decoration: none;
}
.csg-scope .csg-drawer__acct,
.csg-scope .csg-drawer__acct:visited { color: #000; }
.csg-drawer__acct-nm {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.csg-drawer-open { overflow: hidden; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .csg-nav__in { height: 104px; gap: 20px; }
  .csg-nav__logo img { height: 84px; }
}
@media (max-width: 720px) {
  .csg-wrap { padding: 0 16px; }
  .csg-nav__in { height: 88px; }
  .csg-nav__links { display: none; }
  .csg-nav__logo img { height: 68px; }
  .csg-menu-btn { display: grid; }
  /* Auth chrome moves into the drawer on mobile — hide the header copies. */
  .csg-nav__right .csg-btn,
  .csg-nav__right .csg-acct-wrap { display: none; }
  .csg-foot__in { flex-direction: column; align-items: flex-start; }
  .csg-foot__links { margin-left: 0; }
  .csg-foot__logo img { height: 72px; }
}