/* ============================================================================
   GOONDOI RANGERS — SITE HEADER
   This markup lives in a PHP template, which means it sits OUTSIDE the
   .elementor wrapper. Elementor's global classes compile to ".elementor .gc-x"
   and therefore do not reach it, so the header carries its own copy of the few
   component styles it needs (button, caption). Colour and font tokens do reach
   it: Elementor emits those on :root in the kit stylesheet.
   ========================================================================= */

:root {
  /* Tokens the design uses that the Elementor kit does not emit. */
  --gc-r-md: 8px;
  --gc-r-xl: 16px;
  --gc-fs-eyebrow: 0.75rem;
  --gc-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --gc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --gc-shadow-md: 0 1px 3px rgba(0,40,51,0.06), 0 4px 12px rgba(0,40,51,0.05), 0 12px 24px rgba(0,40,51,0.04);
  --gc-shadow-lg: 0 1px 3px rgba(0,40,51,0.08), 0 8px 16px rgba(0,40,51,0.07), 0 24px 48px rgba(0,40,51,0.08);
}

/* The chrome sits outside Elementor's wrapper, so Elementor's own reset does not
   reach it. Without this, padding adds on top of width and the drawer's block
   button overflows the panel, which in turn makes the panel scroll sideways. */
.gc-header, .gc-drawer, .gc-skip,
.gc-header *, .gc-header *::before, .gc-header *::after,
.gc-drawer *, .gc-drawer *::before, .gc-drawer *::after { box-sizing: border-box; }

/* --- Skip link ----------------------------------------------------------- */
.gc-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--surface-card); color: var(--text-brand);
  padding: 12px 20px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.875rem;
  text-decoration: none;
  box-shadow: var(--gc-shadow-md);
  transition: top 200ms var(--gc-ease-out-quart);
}
.gc-skip:focus { top: 1rem; }

/* --- Bar ----------------------------------------------------------------- */
.gc-header { position: sticky; top: 0; z-index: 60; }
.gc-bar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow 300ms var(--gc-ease-out-quart);
}
.gc-header[data-scrolled="true"] .gc-bar { box-shadow: var(--gc-shadow-md); }
/* The white bar stays full width; only the row inside it is capped, so the
   logo and nav do not drift to the far corners on a very wide screen.
   The cap is a growing padding rather than a max-width, because the row has
   padding of its own: a max-width would put that padding INSIDE the 1600 and
   inset the logo 24px from the hero card below it. Written as max() so that
   below ~1632px it resolves to the original padding and nothing changes, and
   above it the edge tracks the hero exactly. */
.gc-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px;
  padding-inline: max(1rem, calc((100% - 1600px) / 2));
}
@media (min-width: 768px) { .gc-bar__inner { padding-inline: max(1.5rem, calc((100% - 1600px) / 2)); } }
.gc-bar__actions { display: flex; align-items: center; gap: 0.75rem; }

/* --- Logo ---------------------------------------------------------------- */
.gc-logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.gc-logo__img { display: block; height: 36px; width: auto; }
.gc-logo:hover .gc-logo__img { opacity: 0.82; }

/* --- Desktop nav --------------------------------------------------------- */
.gc-nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1025px) { .gc-nav { display: flex; align-self: stretch; align-items: stretch; } }

.gc-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 44px; padding: 0 0.875rem;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  color: var(--text-secondary); text-decoration: none; background: none;
  border: 0; cursor: pointer;
  transition: color 180ms var(--gc-ease-out-quart);
}
.gc-nav__link::after {
  content: ''; position: absolute; left: 0.875rem; right: 0.875rem;
  bottom: -1px; height: 2px; background: var(--wetland-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--gc-ease-out-quart);
}
.gc-nav__link:hover { color: var(--text-primary); }
.gc-nav__link:hover::after { transform: scaleX(1); }
.gc-nav__link[aria-current="page"] { color: var(--text-brand); }
.gc-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.gc-nav__link svg { transition: transform 220ms var(--gc-ease-out-quart); }
.gc-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.gc-nav__group { position: relative; display: flex; }
.gc-dropdown {
  position: absolute; top: calc(100% + 1px); left: 0; z-index: 70;
  min-width: 296px; padding: 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-top: 0;
  border-radius: 0 0 var(--gc-r-xl) var(--gc-r-xl);
  box-shadow: var(--gc-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 200ms var(--gc-ease-out-quart), transform 200ms var(--gc-ease-out-quart), visibility 200ms;
}
.gc-nav__group[data-open="true"] .gc-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.gc-dropdown a {
  display: block; padding: 0.6875rem 0.875rem; border-radius: var(--gc-r-md);
  font-family: var(--font-body);
  font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); text-decoration: none;
  transition: background-color 160ms var(--gc-ease-out-quart), color 160ms var(--gc-ease-out-quart);
}
.gc-dropdown a:hover { background: var(--surface-base); color: var(--text-brand); }
.gc-dropdown a[aria-current="page"] { color: var(--text-brand); }

/* --- Burger and header CTA ----------------------------------------------- */
/* The CTA is suppressed on small phones so the bar never has to shrink; the
   drawer carries the same CTA at full width. Three classes deep so it beats
   the shared .gc-header .gc-btn rule further down, which sets display and
   would otherwise win on source order at equal specificity. */
.gc-header .gc-bar__actions .gc-bar__cta { display: none; }
@media (min-width: 640px) {
  .gc-header .gc-bar__actions .gc-bar__cta { display: inline-flex; }
}

.gc-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; padding: 0;
  border: 1px solid var(--border-default); border-radius: 999px;
  background: transparent; color: var(--text-primary); cursor: pointer;
  transition: border-color 200ms var(--gc-ease-out-quart), color 200ms var(--gc-ease-out-quart);
}
.gc-burger:hover { border-color: var(--wetland-500); color: var(--text-brand); }
@media (min-width: 1025px) { .gc-burger { display: none; } }

/* --- Mobile drawer -------------------------------------------------------- */
/* overflow:hidden clips the off-canvas panel; a fixed element is not clipped by
   the body, so without this the closed drawer creates a mobile scrollbar. */
.gc-drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; overflow: hidden; }
.gc-drawer[data-open="true"] { visibility: visible; }
.gc-drawer__scrim {
  position: absolute; inset: 0; background: rgba(33,31,33,0.5);
  opacity: 0; transition: opacity 280ms var(--gc-ease-out-quart);
}
.gc-drawer[data-open="true"] .gc-drawer__scrim { opacity: 1; }
.gc-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(100%, 400px);
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border-left: 1px solid var(--border-line);
  /* translate3d + will-change keeps the panel on its own compositor layer for
     the whole slide. With a plain translateX the layer is re-rasterised each
     frame and the panel lands on fractional device pixels, which shows up on a
     high-DPI phone as the content shimmying by a pixel as the animation ends. */
  transform: translate3d(100%, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 320ms var(--gc-ease-out-expo);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.gc-drawer[data-open="true"] .gc-drawer__panel { transform: translate3d(0, 0, 0); }
.gc-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.gc-drawer__body { padding: 1rem 1.5rem 2rem; }
.gc-drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 52px; padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  color: var(--text-primary); text-decoration: none;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; text-align: left;
}
.gc-drawer__link:hover { color: var(--text-brand); }
.gc-drawer__link svg { transition: transform 220ms var(--gc-ease-out-quart); color: var(--text-tertiary); }
.gc-drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.gc-drawer__sub {
  display: none; padding: 0.25rem 0 0.75rem 0.875rem;
  border-left: 1px solid var(--wetland-500); margin-block: 0.5rem;
}
.gc-drawer__sub[data-open="true"] { display: block; }
.gc-drawer__sub a {
  display: block; min-height: 44px; padding: 0.6875rem 0;
  font-family: var(--font-body);
  font-size: 0.9375rem; color: var(--text-secondary); text-decoration: none;
}
.gc-drawer__sub a:hover { color: var(--text-brand); }

/* --- Components the chrome needs ----------------------------------------- */
/* Scoped to the chrome so they never collide with the Elementor global classes
   of the same name inside page content. */
.gc-header .gc-btn,
.gc-drawer .gc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 48px; padding: 0 1.375rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color 200ms var(--gc-ease-out-quart),
              color 200ms var(--gc-ease-out-quart),
              border-color 200ms var(--gc-ease-out-quart),
              box-shadow 250ms var(--gc-ease-out-quart),
              transform 200ms var(--gc-ease-out-quart);
}
@media (min-width: 768px)  { .gc-header .gc-btn, .gc-drawer .gc-btn { padding: 0 1.5rem; } }
@media (min-width: 1025px) { .gc-header .gc-btn, .gc-drawer .gc-btn { padding: 0 1.75rem; } }

.gc-header .gc-btn--sm,
.gc-drawer .gc-btn--sm { min-height: 44px; padding: 0 1rem; font-size: 0.9375rem; }
@media (min-width: 768px)  { .gc-header .gc-btn--sm, .gc-drawer .gc-btn--sm { padding: 0 1.125rem; } }
@media (min-width: 1025px) { .gc-header .gc-btn--sm, .gc-drawer .gc-btn--sm { padding: 0 1.25rem; } }

.gc-header .gc-btn--block,
.gc-drawer .gc-btn--block { width: 100%; }

.gc-header .gc-btn--primary,
.gc-drawer .gc-btn--primary {
  background: var(--brand-700); color: var(--text-inverse);
  box-shadow: 0 1px 2px rgba(0,40,51,0.05), 0 2px 6px rgba(0,40,51,0.04);
}
.gc-header .gc-btn--primary:hover,
.gc-drawer .gc-btn--primary:hover {
  background: var(--brand-900); box-shadow: var(--gc-shadow-md); transform: translateY(-2px);
}
.gc-header .gc-btn--primary:active,
.gc-drawer .gc-btn--primary:active { transform: translateY(0) scale(0.985); }

.gc-drawer .gc-caption {
  font-family: var(--font-body);
  font-size: 0.875rem; line-height: 1.5; color: var(--text-tertiary);
}
.gc-drawer .gc-num { font-variant-numeric: tabular-nums lining-nums; color: inherit; }

/* Focus is never removed, only restyled. */
.gc-header :focus-visible,
.gc-drawer :focus-visible,
.gc-skip:focus-visible {
  outline: 2px solid var(--brand-700); outline-offset: 3px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gc-drawer__panel, .gc-dropdown, .gc-nav__link::after { transition-duration: 1ms; }
}