/* =============================================================
   LIQUID GLASS — site-wide material layer (v1)
   Authentic Apple-style glass: translucent tint + heavy backdrop
   blur/saturate, a bright inner top-edge specular, a soft rim light,
   and a pointer-tracked light streak on interactive surfaces — all
   floating over a slow living aurora. Loaded AFTER styles.css so it
   overrides the flat surfaces.
   ============================================================= */
:root {
  --glass-bg:        rgba(255,255,255,0.52);
  --glass-bg-strong: rgba(255,255,255,0.74);
  --glass-blur:      22px;
  --glass-sat:       180%;
  --glass-border:    rgba(255,255,255,0.65);
  --glass-rim:       0 1px 0 rgba(255,255,255,0.9) inset, 0 0 0 1px rgba(255,255,255,0.12) inset;
  --glass-shadow:    0 10px 34px -14px rgba(12,26,20,0.28), 0 2px 8px -4px rgba(12,26,20,0.14);
  --glass-shadow-lg: 0 30px 70px -26px rgba(12,26,20,0.42), 0 8px 22px -12px rgba(12,26,20,0.22);
}

/* ---------- living aurora backdrop (every page) ---------- */
body { background: #EEF5EF; position: relative; }
body::before {
  content: ""; position: fixed; inset: -18vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 34% at 14% 12%, rgba(63,185,133,0.42), transparent 60%),
    radial-gradient(34% 30% at 88% 6%, rgba(242,180,87,0.30), transparent 60%),
    radial-gradient(42% 40% at 78% 82%, rgba(27,122,80,0.34), transparent 62%),
    radial-gradient(40% 38% at 20% 92%, rgba(140,205,178,0.34), transparent 60%),
    radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.35), transparent 70%);
  filter: saturate(1.08);
  animation: lg-aurora 30s ease-in-out infinite alternate;
}
/* a faint frost so text over the raw aurora stays calm */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(248,251,247,0.30), rgba(248,251,247,0.62));
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
@keyframes lg-aurora {
  0%   { transform: translate3d(0,0,0) scale(1)   rotate(0deg); }
  50%  { transform: translate3d(-3%,2%,0) scale(1.08) rotate(4deg); }
  100% { transform: translate3d(2.5%,-2.5%,0) scale(1.05) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---------- the glass mixin ---------- */
.glass, .nav, .jcard, .cat-tile, .quick-card, .qa-detail, .home-badge,
.searchbar input, .trust-inner, .ao-badge, .always-open {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-rim);
}

/* reusable interactive glass card with specular streak */
.lg-card { position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-rim);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); }
.lg-card::before {   /* top sheen */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent); opacity: .7; }
.lg-card::after {    /* pointer-tracked liquid highlight */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,0.55), transparent 60%); }
.lg-card:hover { transform: translateY(-6px); box-shadow: var(--glass-shadow-lg), var(--glass-rim); background: var(--glass-bg-strong); }
.lg-card:hover::after { opacity: 1; }

/* ---------- nav: floating glass bar ---------- */
.nav { border-left: 0; border-right: 0; border-top: 0;
  border-bottom: 1px solid rgba(255,255,255,0.5) !important;
  background: rgba(248,251,247,0.55) !important;
  box-shadow: 0 6px 24px -18px rgba(12,26,20,0.5); }
.nav.scrolled { background: rgba(248,251,247,0.72) !important; box-shadow: 0 10px 30px -20px rgba(12,26,20,0.55); }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.btn-primary {
  background: linear-gradient(180deg, #239563, #17734a);
  box-shadow: 0 10px 26px -12px rgba(15,76,52,0.65), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 6px rgba(9,48,33,0.35);
  color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(15,76,52,0.7), inset 0 1px 0 rgba(255,255,255,0.5); }
.btn-primary::after {  /* glossy sweep on hover */
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left .6s var(--ease); }
.btn-primary:hover::after { left: 130%; }
.btn-secondary {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border); color: var(--ink);
  box-shadow: var(--glass-shadow), var(--glass-rim); }
.btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,0.9) !important; color: var(--primary); }
.btn-accent { background: linear-gradient(180deg, #f2b457, #dc9127);
  box-shadow: 0 10px 26px -12px rgba(184,120,20,0.6), inset 0 1px 0 rgba(255,255,255,0.5); color: #241a05; }

/* ---------- search ---------- */
.searchbar input { background: var(--glass-bg-strong) !important; border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-rim) !important; }
.searchbar input:focus { box-shadow: 0 0 0 4px rgba(63,185,133,0.28), var(--glass-shadow-lg) !important; }

/* ---------- cards: home job list, categories, trust ---------- */
.jcard, .cat-tile { position: relative; overflow: hidden; border-radius: var(--r-lg);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); }
.jcard::before, .cat-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 44%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); pointer-events: none; opacity: .7; }
.jcard:hover, .cat-tile:hover { transform: translateY(-5px); background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-lg), var(--glass-rim); border-color: rgba(255,255,255,0.8); }

/* ---------- section rhythm: let the aurora breathe ---------- */
.section-muted { background: transparent !important; }
.board-hero::before { background:
  radial-gradient(60% 60% at 50% -10%, rgba(63,185,133,0.28), transparent 70%),
  radial-gradient(40% 40% at 85% 10%, rgba(242,180,87,0.20), transparent 65%) !important; }

/* ---------- home hero badge ---------- */
.home-badge { color: var(--accent-hover); border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--glass-rim); }

/* ---------- quick-apply card + detail panel ---------- */
.quick-card { border-top: 4px solid var(--accent); background: var(--glass-bg-strong); }
.qa-detail { background: var(--glass-bg-strong); }

/* ---------- form fields as glass ---------- */
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.66); border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.field input:focus, .field select:focus, .field textarea:focus {
  background: rgba(255,255,255,0.9); box-shadow: 0 0 0 4px rgba(63,185,133,0.24); }

/* ---------- footer: dark glass ---------- */
.footer { background: linear-gradient(180deg, rgba(10,26,20,0.86), rgba(8,22,17,0.94)) !important;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.12) !important; }

/* ---------- scroll reveal (GSAP-independent baseline) ---------- */
[data-lg-reveal] { opacity: 0; transform: translateY(30px); }
[data-lg-reveal].in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav, .jcard, .cat-tile, .quick-card, .qa-detail, .lg-card,
  .searchbar input, .btn-secondary { background: rgba(255,255,255,0.92) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .nav, .jcard, .cat-tile, .quick-card, .qa-detail, .lg-card { background: rgba(255,255,255,0.95) !important; }
  body::before, body::after { display: none; }
  body { background: var(--bg); }
}

/* =============================================================
   Dockets — deeper glass. More transparency at rest so the aurora
   genuinely reads through, an edge light that travels the rim, and
   a pointer-tracked specular (driven by --mx/--my from layout.js).
   ============================================================= */
.udock {
  background: linear-gradient(155deg, rgba(255,255,255,0.50), rgba(255,255,255,0.30)) !important;
  backdrop-filter: blur(26px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.06) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 14px 40px -18px rgba(12,26,20,0.34),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -14px 26px -18px rgba(12,26,20,0.16) !important; }

/* travelling rim light */
.udock::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; opacity: .85;
  background: conic-gradient(from var(--rim, 0deg),
    rgba(255,255,255,0) 0deg, rgba(255,255,255,.85) 40deg,
    rgba(255,255,255,0) 110deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: lg-rim 9s linear infinite; }
@keyframes lg-rim { to { --rim: 360deg; } }
@property --rim { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: reduce) { .udock::after { animation: none; } }

/* pointer specular on the hovered docket */
.udock .udk-body::before {
  content: ""; position: absolute; inset: -40% -20%; pointer-events: none; opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,0.60), transparent 62%); }
.udock:hover .udk-body::before { opacity: 1; }
.udk-body { position: relative; }

.udock:hover {
  background: linear-gradient(155deg, rgba(255,255,255,0.90), rgba(255,255,255,0.80)) !important;
  box-shadow:
    0 38px 80px -26px rgba(12,26,20,0.50),
    0 10px 26px -14px rgba(12,26,20,0.28),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  border-color: rgba(255,255,255,0.9) !important; }

/* filed docket: darker frosted, clearly inert */
.udock.is-filed {
  background: linear-gradient(155deg, rgba(226,234,228,0.55), rgba(214,224,217,0.45)) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  border-style: solid !important; border-color: rgba(255,255,255,0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important; }
.udock.is-filed::after { display: none; }

/* =============================================================
   Dark glass bands — "How it works" and the closing CTA become
   smoked glass over the aurora instead of flat near-black blocks.
   ============================================================= */
.sameday, .cta {
  background: linear-gradient(158deg, rgba(10,28,21,0.72), rgba(8,22,17,0.82)) !important;
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 70px -30px rgba(6,18,13,0.6), inset 0 1px 0 rgba(255,255,255,0.16); }
.cta { border-radius: var(--r-lg); }
.cta .container { position: relative; }

/* step chips inside the dark band read as small glass tiles */
.sd-step { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md); padding: var(--s4); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--ease), background .3s var(--ease); }
.sd-step:hover { transform: translateY(-4px); background: rgba(255,255,255,0.12); }

/* trust band: floating glass strip */
.trust-inner { border-radius: var(--r-lg); padding: var(--s5) var(--s5) !important;
  border-top: 1px solid rgba(255,255,255,0.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.6) !important; }

/* prose CTA blocks */
.prose-cta { background: var(--glass-bg-strong) !important; border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-shadow), var(--glass-rim); }

/* category tiles get the liquid highlight too */
.cat-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,0.5), transparent 62%); }
.cat-tile:hover::after { opacity: 1; }

/* final step tile: solid emerald, dark legible text (the glass tile rule
   must not wash it out) */
.sd-step.is-final { background: #3FB985 !important; border-color: rgba(255,255,255,0.5) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.sd-step.is-final b, .sd-step.is-final .sd-time, .sd-step.is-final span { color: #08211A !important; }

/* =============================================================
   Board filters + inputs — glass chips over the aurora
   ============================================================= */
.board-filters { background: rgba(248,251,247,0.55) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 8px 26px -20px rgba(12,26,20,0.5); }
.gchip { background: rgba(255,255,255,0.62) !important; border: 1px solid rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px -4px rgba(12,26,20,0.15), inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform .2s var(--ease), background .2s var(--ease); }
.gchip:hover { background: rgba(255,255,255,0.85) !important; transform: translateY(-1px); }
.gchip.on { background: linear-gradient(180deg, #239563, #17734a) !important; color: #fff !important;
  border-color: rgba(255,255,255,0.4) !important;
  box-shadow: 0 8px 18px -10px rgba(15,76,52,0.6), inset 0 1px 0 rgba(255,255,255,0.35); }
input, select, textarea { background: rgba(255,255,255,0.68); border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
input:focus, select:focus, textarea:focus { background: rgba(255,255,255,0.92);
  border-color: rgba(63,185,133,0.6); box-shadow: 0 0 0 4px rgba(63,185,133,0.22); }

/* toast / live pill */
.live-pill, #newToast { background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow: var(--glass-shadow), var(--glass-rim) !important; }

/* job detail page panels */
.job-detail, .detail-card, .detail-side, .job-banner {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), var(--glass-rim) !important; }

/* =============================================================
   Final polish
   ============================================================= */
/* Headlines pick up a touch more optical weight over glass */
h1, h2 { text-wrap: balance; }
.board-hero h1, .hero h1 { letter-spacing: -0.032em; }
.lead, .board-hero .lead { text-wrap: pretty; }

/* Custom scrollbar to match the material */
* { scrollbar-width: thin; scrollbar-color: rgba(27,122,80,0.35) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(27,122,80,0.30); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,122,80,0.5); background-clip: content-box; }

/* Selection */
::selection { background: rgba(63,185,133,0.28); color: var(--ink); }

/* Focus ring reads on glass */
:focus-visible { outline: 2px solid rgba(27,122,80,0.85); outline-offset: 3px; }

/* Nav links get a soft glass pill on hover */
.nav-links a { padding: 7px 12px; border-radius: var(--r-pill);
  transition: background .25s var(--ease), color .25s var(--ease); }
.nav-links a:hover { background: rgba(255,255,255,0.6); }
.nav-links a.is-current { background: rgba(255,255,255,0.75); }
.nav-links a.is-current::after { bottom: -6px; left: 12px; right: 12px; }

/* Mobile: lighten the blur so scrolling stays smooth on phones */
@media (max-width: 640px) {
  :root { --glass-blur: 14px; }
  .udock { backdrop-filter: blur(16px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%) !important; }
  body::before { animation-duration: 44s; }
}

/* =============================================================
   COOKIE CONSENT BANNER
   Deliberately NOT a modal: it must not trap the page (a cookie
   wall is prohibited). "Reject all" carries the same weight as
   "Accept all" — same size, same row, same emphasis, which is
   what the DPC's guidance requires.
   ============================================================= */
.cc-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  padding: 0 16px 16px; display: flex; justify-content: center; pointer-events: none;
  opacity: 0; transform: translateY(18px);
  transition: opacity .32s var(--ease), transform .32s var(--ease); }
.cc-wrap.cc-show { opacity: 1; transform: none; }
.cc-panel { pointer-events: auto; width: min(940px, 100%);
  display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap;
  padding: 20px 22px; border-radius: 22px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(var(--glass-blur, 22px)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 22px)) saturate(180%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 18px 50px rgba(12,27,20,0.16), inset 0 1px 0 rgba(255,255,255,0.9); }
.cc-main { flex: 1 1 420px; min-width: 0; }
.cc-title { font-size: 1.05rem; margin: 0 0 6px; font-weight: 700; }
.cc-text { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.cc-opts { display: grid; gap: 10px; margin-top: 16px; }
.cc-opt { display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; cursor: pointer; }
.cc-opt.is-locked { cursor: default; opacity: .72; }
.cc-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary); flex: none; }
.cc-opt b { display: block; font-weight: 650; }
.cc-opt i { display: block; font-style: normal; color: var(--muted); font-size: .8rem; line-height: 1.45; margin-top: 1px; }
.cc-actions { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.cc-btn { font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  padding: 11px 20px; border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid rgba(27,122,80,0.28); background: rgba(255,255,255,0.75); color: var(--ink);
  transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.cc-btn:hover { background: #fff; transform: translateY(-1px); }
.cc-accept, .cc-save { background: var(--primary); border-color: var(--primary); color: #fff; }
.cc-accept:hover, .cc-save:hover { background: var(--primary-dark, #1B7A50); }
@media (max-width: 720px) {
  .cc-panel { flex-direction: column; align-items: stretch; padding: 18px; border-radius: 20px; }
  .cc-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cc-manage, .cc-save { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-wrap { transition: none; transform: none; }
  .cc-btn:hover { transform: none; }
}

/* Footer "Cookie settings" — a button, styled as the sibling links around it. */
.fb-cookies { font: inherit; font-size: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  opacity: .85; transition: opacity .2s var(--ease); }
.fb-cookies:hover { opacity: 1; }