/* =========================================================
   header.css — sticky header, brand, nav and mobile toggle.
   The .scrolled class is added by js/nav.js on scroll.
   ========================================================= */

header {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 38px 0 22px;
}
header.scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(20, 38, 74, 0.5);
}

/* full-width header so the brand sits near the left edge and the nav near the right */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: none; padding: 0 clamp(24px, 4vw, 64px); }
.brand { display: flex; align-items: center; gap: 12px; }

/* Transparent shield mark + live wordmark. The shield has a white
   interior so it reads on light and dark alike — no backing needed. */
/* Large & prominent at the top of the page; shrinks once scrolled. */
.brand-logo { display: block; height: 130px; width: auto; flex: none; transition: height .35s ease; }
header.scrolled .brand-logo { height: 58px; }
/* prominent home-screen logo: gentle float + breathing green glow */
header:not(.scrolled) .brand-logo { animation: logoGlowFloat 5s ease-in-out infinite; }
@keyframes logoGlowFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .30)) drop-shadow(0 0 14px rgba(124, 179, 66, .40)); }
  50%      { transform: translateY(-7px); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35)) drop-shadow(0 0 28px rgba(124, 179, 66, .68)); }
}

.brand-text { display: flex; flex-direction: column; line-height: 1.04; }
.brand-text .b1 { font-weight: 800; font-size: 2.95rem; color: var(--heading); transition: color .4s ease, font-size .35s ease; }
.brand-text .b2 { font-weight: 800; font-size: 2.95rem; color: var(--green); transition: font-size .35s ease; }

/* over the dark hero (top of page): a distinctive GOLD gradient
   wordmark (sets the brand name apart from the white/green hero text),
   with a soft gold glow + a light sheen that drifts across every few
   seconds. Two background layers: (1) moving highlight, (2) gold base. */
header:not(.scrolled) .brand-text .b1,
header:not(.scrolled) .brand-text .b2 {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-repeat: no-repeat;
  background-size: 220% 100%, 100% 100%;
  background-position: -150% 0, 0 0;
  filter: drop-shadow(0 2px 11px rgba(0, 0, 0, .30)) drop-shadow(0 0 16px rgba(233, 197, 105, .38));
  animation: nameSheen 5.5s ease-in-out infinite;
}
header:not(.scrolled) .brand-text .b1 {
  background-image:
    linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .75) 50%, transparent 64%),
    linear-gradient(105deg, #fdeec2 0%, #e9c869 100%);
}
header:not(.scrolled) .brand-text .b2 {
  background-image:
    linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .6) 50%, transparent 64%),
    linear-gradient(105deg, #edcb70 0%, #c2922f 100%);
}
@keyframes nameSheen {
  0%   { background-position: -150% 0, 0 0; }
  45%  { background-position: 150% 0, 0 0; }
  100% { background-position: 150% 0, 0 0; }
}

/* Short "RSC" brand mark, shown once the header is scrolled (solid).
   Gradient wordmark (heading → green) with a soft glow + animated
   entrance. Excluded on static headers (e.g. admin) which keep the
   full name. */
.brand-short {
  display: none;
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  line-height: 1;
  background: linear-gradient(115deg, var(--heading) 0%, var(--heading) 38%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(124, 179, 66, 0.35));
  transition: transform .25s ease, filter .25s ease;
}
.brand-short .brand-c { color: inherit; }

header.scrolled:not([data-static]) .brand-text { display: none; }
header.scrolled:not([data-static]) .brand-short {
  display: inline-block;
  animation: rscIn .5s cubic-bezier(.2, .7, .2, 1);
}
/* subtle interactive lift + stronger glow on hover */
header.scrolled:not([data-static]) .brand:hover .brand-short {
  transform: scale(1.06);
  filter: drop-shadow(0 3px 13px rgba(124, 179, 66, 0.6));
}

@keyframes rscIn {
  from { opacity: 0; transform: translateY(6px) scale(.82); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-links { display: flex; align-items: center; gap: 40px; list-style: none; }
.nav-links a {
  font-weight: 600; font-size: clamp(1.05rem, 0.75rem + 0.4vw, 1.2rem); color: var(--ink);
  position: relative; transition: color .2s ease;
}
header:not(.scrolled) .nav-links a { color: rgba(255, 255, 255, 0.85); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--green); transition: width .25s ease; border-radius: 2px;
}
.nav-links a:hover::after { width: 100%; }

/* "Jobs" nav item — a SOLID green pill with a white pulsing dot and a breathing
   glow so the careers/hiring entry point clearly stands out from the plain text
   links (on both the dark hero and the light scrolled header). Links to the
   #careers "We're hiring" section. */
.nav-links a.nav-jobs {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  padding: 10px 20px; border-radius: 100px;
  font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--green), #6ba23a);
  border: 1px solid rgba(143, 209, 79, 0.65);
  box-shadow: 0 7px 18px -5px rgba(124, 179, 66, 0.6);
  animation: jobsGlow 2.4s ease-in-out infinite;
  transition: transform .25s ease, filter .25s ease;
}
.nav-links a.nav-jobs::after { display: none; } /* no underline on the pill */
.nav-links a.nav-jobs:hover { transform: translateY(-2px); filter: brightness(1.08); }
header:not(.scrolled) .nav-links a.nav-jobs { color: #fff; } /* stay white on the dark hero too */

.nj-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: #fff;
  animation: njDot 2s ease-in-out infinite;
}
/* breathing green halo around the pill */
@keyframes jobsGlow {
  0%, 100% { box-shadow: 0 7px 18px -5px rgba(124, 179, 66, 0.55); }
  50%      { box-shadow: 0 9px 26px -4px rgba(124, 179, 66, 0.9), 0 0 0 4px rgba(124, 179, 66, 0.18); }
}
/* pulsing white ring on the little dot */
@keyframes njDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

.nav-actions { display: flex; align-items: center; gap: 14px; }

/* Light / dark toggle */
.theme-toggle {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.theme-toggle:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
header:not(.scrolled) .theme-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
header:not(.scrolled) .theme-toggle:hover { color: var(--green-bright); border-color: var(--green-bright); }

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Theme toggle that lives inside the mobile menu (hidden on desktop) */
.menu-only { display: none; }
.menu-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; font: inherit;
  font-weight: 600; font-size: 0.96rem; color: var(--ink);
  padding: 12px 10px; border-radius: 10px; text-align: left;
}
.menu-toggle:hover { background: rgba(124, 179, 66, 0.1); }
.menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle .icon-sun { display: none; }
[data-theme="dark"] .menu-toggle .icon-moon { display: none; }
[data-theme="dark"] .menu-toggle .icon-sun { display: block; }

.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-btn span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .3s; }
header:not(.scrolled) .menu-btn span { background: #fff; }

/* "We're Hiring" header CTA — a green pill with a pulsing dot that sends
   visitors straight to the Careers page so they never miss that we're open
   to applications. Stays visible on mobile (unlike the other nav actions). */
.btn-hiring {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 19px 42px; border-radius: 100px; white-space: nowrap;
  font-weight: 800; font-size: 1.22rem; line-height: 1; color: #fff; border: none;
  background: linear-gradient(135deg, var(--green), #6ba23a);
  box-shadow: 0 8px 22px -6px rgba(124, 179, 66, 0.55);
  animation: hiringGlow 2.6s ease-in-out infinite;
  transition: transform .25s ease, filter .25s ease;
}
.btn-hiring:hover { transform: translateY(-2px); filter: brightness(1.07); }
/* soft breathing glow so the CTA keeps catching the eye against the header */
@keyframes hiringGlow {
  0%, 100% { box-shadow: 0 8px 22px -6px rgba(124, 179, 66, 0.5); }
  50%      { box-shadow: 0 10px 30px -4px rgba(124, 179, 66, 0.85), 0 0 0 5px rgba(124, 179, 66, 0.14); }
}
/* equalizer — three little bars bounce like an audio meter ("active / buzzing") */
.hiring-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.hiring-eq i {
  width: 4px; height: 100%; border-radius: 2px; background: #fff;
  transform-origin: bottom; animation: hiringEq 1.8s ease-in-out infinite;
}
.hiring-eq i:nth-child(2) { animation-delay: .36s; }
.hiring-eq i:nth-child(3) { animation-delay: .72s; }
@keyframes hiringEq {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hiring-eq i { animation: none; }
  .hiring-eq i:nth-child(1) { height: 55%; }
  .hiring-eq i:nth-child(3) { height: 72%; }
}

/* "Hire Talent" header CTA — the EMPLOYER door (your paying audience). A white
   pill with a green icon badge + arrow. A green sheen sweeps across it on a
   loop and it lifts on hover, so it stays lively and pops on BOTH the dark hero
   and the light scrolled header. */
.btn-hire {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 30px 9px 9px; border-radius: 100px; white-space: nowrap;
  font-weight: 800; font-size: 1.2rem; line-height: 1; border: none;
  color: var(--navy); background: #fff;
  box-shadow: 0 10px 26px -8px rgba(20, 38, 74, 0.42);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
}
.btn-hire:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(20, 38, 74, 0.52); }

/* green circle holding the people icon */
.btn-hire .hire-ic {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--green), #6ba23a);
  box-shadow: 0 3px 9px -3px rgba(124, 179, 66, 0.8);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.btn-hire .hire-ic svg { width: 22px; height: 22px; }
.btn-hire:hover .hire-ic { transform: scale(1.08) rotate(-6deg); }

/* trailing arrow nudges forward on hover */
.btn-hire .hire-arrow { color: var(--green); font-weight: 900; font-size: 1.1rem; transform: translateX(-3px); transition: transform .28s ease; }
.btn-hire:hover .hire-arrow { transform: translateX(3px); }

/* green sheen sweeps across the white pill on a gentle loop (and on hover) */
.btn-hire::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 34%, rgba(124, 179, 66, 0.22) 50%, transparent 66%);
  transform: translateX(-160%);
  animation: hireSheen 5s ease-in-out infinite;
}
.btn-hire:hover::after { animation: none; transform: translateX(160%); transition: transform .7s ease; }
@keyframes hireSheen {
  0%   { transform: translateX(-160%); }
  55%  { transform: translateX(160%); }
  100% { transform: translateX(160%); }
}
.hiring-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #72b532;
    color: #ffffff;
    padding: 17px 32px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}


/* Hiring equalizer icon */
.hiring-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}


/* Three bars */
    .hiring-eq i {
        display: block;
        width: 3px;
        background: #ffffff;
        border-radius: 3px;
    }
.hiring-eq i:nth-child(1) {
     height: 7px;
        }

        .hiring-eq i:nth-child(2) {
            height: 14px;
        }

        .hiring-eq i:nth-child(3) {
            height: 10px;
        }


.hiring-text {
    line-height: 1;
}