/* Auditworks design tokens
 * Brand: audit-only recruitment.
 * Navy (#0a1f44) + gold (#f9c933) + soft white (#f8fafc).
 * Poppins typeface, weights 400/500/600/700/800.
 *
 * Pages load this file *and* Tailwind v4 via the browser CDN, so every
 * `audit-dark`, `audit-accent`, `audit-light` utility name resolves
 * through the `@theme` block at the bottom — same names as the source
 * React app, so class names port over verbatim.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --color-audit-dark:   #0a1f44;
  --color-audit-accent: #f9c933;
  --color-audit-light:  #f8fafc;
  --color-audit-cream:  #f4f3ef;

  /* Engine-compatible mirrors so generic helpers from the engine
     (language switcher, blog index, contact admin) inherit the brand. */
  --color-bg:           #ffffff;
  --color-surface:      #ffffff;
  --color-text:         #0a1f44;
  --color-text-muted:   rgba(10, 31, 68, 0.6);
  --color-text-soft:    rgba(10, 31, 68, 0.4);
  --color-border:       rgba(10, 31, 68, 0.1);
  --color-border-soft:  rgba(10, 31, 68, 0.05);
  --color-accent:       #f9c933;
  --color-accent-soft:  rgba(249, 201, 51, 0.12);
  --color-accent-deep:  #0a1f44;
  --color-warn:         #c47a1c;

  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Poppins", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 24px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(10, 31, 68, 0.05);
  --shadow-2: 0 4px 14px rgba(10, 31, 68, 0.08);
  --shadow-3: 0 24px 48px rgba(10, 31, 68, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  background: #ffffff;
  color: var(--color-audit-dark);
  -webkit-font-smoothing: antialiased;
}
body::selection,
body *::selection { background: rgba(249, 201, 51, 0.3); }

/* Editorial type scale lifted from the source's index.css.
 *
 * Source uses `!important` on font-{family,size,weight,line-height} so the
 * sizes always win over Tailwind text-* utilities. We mirror that here. We
 * deliberately do NOT reset margin here — Tailwind's mb-* utilities have to
 * keep working, and source's index.css has no margin reset either. The
 * letter-spacing values from earlier drafts are dropped (source has none). */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans) !important; }
h1 { font-size: 56px !important; font-weight: 800 !important; line-height: 1.1 !important; }
h2 { font-size: 36px !important; font-weight: 700 !important; line-height: 1.25 !important; }
h3 { font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; }
h4 { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.05em !important; }
@media (min-width: 768px) {
  h1 { font-size: 64px !important; }
  h2 { font-size: 42px !important; }
  h3 { font-size: 24px !important; }
  h4 { font-size: 14px !important; }
}

button,
.btn,
header a,
nav a,
.nav-link,
[role="button"] { font-family: var(--font-sans); font-weight: 600; }

/* (Removed: `img,video,svg { max-width: 100%; height: auto; display: block; }`
 * — Tailwind v4 preflight already does this in @layer base. Keeping it here
 * unlayered overrode `h-8` / `h-9` utility heights on the logo. */
img { -webkit-user-drag: none; user-select: none; }

/* (Removed: `a { color: inherit; }` — Tailwind v4 preflight handles this in
 * @layer base. Keeping it here unlayered beat Tailwind's `.text-white` on nav
 * links. */

/* Utility helpers the source uses but Tailwind doesn't ship out of the box. */
.perspective-1000 { perspective: 1000px; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Marquee animation used by the partner-logo ribbon on the home page. */
@keyframes aw-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll { animation: aw-scroll 30s linear infinite; }
.animate-scroll:hover { animation-play-state: paused; }

/* Soft, on-scroll reveal — vanilla replacement for motion.dev's whileInView. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-x {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-x.is-visible { opacity: 1; transform: translateX(0); }
.reveal-r {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-r.is-visible { opacity: 1; transform: translateX(0); }

/* Stagger helpers — pair with .reveal on each child. */
.reveal[data-delay="100"] { transition-delay: 0.1s; }
.reveal[data-delay="200"] { transition-delay: 0.2s; }
.reveal[data-delay="300"] { transition-delay: 0.3s; }
.reveal[data-delay="400"] { transition-delay: 0.4s; }
.reveal[data-delay="500"] { transition-delay: 0.5s; }

/* Animate-in helpers used on accordion content. */
@keyframes aw-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: aw-fade-in 0.3s ease-out; }

/* Mobile-menu open state for the header — toggled by tiny script in navbar. */
.aw-mobile-menu { display: none; }
.aw-mobile-menu.is-open { display: block; }

/* Body scroll lock when mobile menu opens. */
body.aw-no-scroll { overflow: hidden; }

/* Engine-touched widgets (language switcher, contact admin) inherit Poppins. */
[data-aicms="navbar"],
[data-aicms="footer"],
.aicms-lang-switcher { font-family: var(--font-sans); }

/* Override engine default that pads navbar — we own header layout.
 *
 * The engine renders pages with a fixed wrapper `<nav data-aicms="navbar">`
 * at the top of <body> and a fixed `<footer data-aicms="footer">` at the
 * bottom. We CAN'T change those wrappers from the page side, so we style
 * the WRAPPERS here to become the actual fixed header / static footer of
 * the brand and let the shared fragments fill them with brand-styled
 * inner HTML.
 */
[data-aicms="navbar"] {
  display: block;
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-bottom: none;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color 0.5s ease, padding 0.5s ease;
}
/* No `[data-aicms="navbar"] a { font-size: inherit }` — that beat Tailwind's
 * `.text-sm` utility on nav links and rendered them at body-size 16px instead
 * of the design's 14px. Same hazard pattern as the removed `a { color: inherit }`
 * earlier in this file. */

/* Scrolled / dark-hero state on the navbar wrapper is toggled by a small
 * script that lives inside the navbar fragment. Pages declare their hero
 * style via `<body data-hero="dark">`; navbar JS reads that and the scroll
 * position to flip these classes. */
[data-aicms="navbar"].is-solid { background-color: #0a1f44; box-shadow: 0 1px 12px rgba(10,31,68,0.25); }

/* Make the page-content wrapper a vertical flex container so the last
 * section can grow to absorb any leftover space. This prevents a white
 * gap (body background) from showing between the last section and the
 * footer on viewports that are slightly taller than the content. */
[data-aicms="page"] {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
[data-aicms="page"] > :last-child {
  flex-grow: 1 !important;
}

[data-aicms="footer"] {
  display: block;
  border-top: none;
  padding: 0;
  margin-top: 0 !important;
  color: inherit;
  font-size: inherit;
  background: transparent;
}


/* ============================================================
   === EXTENSIONS ===
   ============================================================

   Brand gradient — derived from the Auditworks logo 'O'.
   Warm gold #ffb405 → vivid orange #ff8121 at 135°.

   Applying background-image on .bg-audit-accent means every
   element on every page that carries that class automatically
   renders the gradient instead of the flat accent colour.
   background-image always layers on top of background-color,
   so Tailwind's generated `background-color: #f9c933` sits
   underneath and this wins without any specificity tricks.
   ============================================================ */

:root {
  --audit-gradient-from: #ffb405;
  --audit-gradient-to:   #ff8121;
  --audit-gradient:      linear-gradient(135deg, #ffb405 0%, #ff8121 100%);
  /* Right-side breathing room for gradient TEXT (background-clip: text).
     The gradient box otherwise ends flush at the last glyph, which shaves
     its right edge — worst on italic serif accents like "(her)kent",
     "auditor?" or "carrièrepad.", where the italic overhang of the final
     letter sticks out past the advance width.
     0.25em matches the biggest manual patch previously used on pages
     (pr-4) and comfortably covers Poppins' italic overhang at every
     display size. .text-audit-gradient and .aw-hover-gradient:hover
     extend the gradient box by this much on the right and pull the
     following inline content back by the same amount, so glyphs stop
     clipping and layout never shifts. */
  --audit-gradient-text-pad: 0.25em;
}

/* ── All accent surfaces use the gradient ── */
.bg-audit-accent {
  background-image: var(--audit-gradient);
}

/* ── Stand-alone gradient background utility ── */
.bg-audit-gradient {
  background-image: var(--audit-gradient);
}

/* ── Gradient text fill (display numbers, pull-quotes, eyebrows, etc.) ──
   CONTRAST RULE: the light-gold end (#ffb405) of the gradient washes out
   on white/cream. Use .text-audit-gradient on DARK backgrounds (navy
   heroes, dark cards) or on large display type only. On light sections,
   yellow lettering stays flat .text-audit-accent — never gradient.

   Built-in right room: the last glyph is never clipped (see
   --audit-gradient-text-pad above). Elements that already carry their own
   horizontal padding (pr-* / px-* / pe-* utilities — e.g. the homepage
   hero "auditor?" with pr-4) are left to their own padding: overriding
   it would change their layout, and their padding already extends the
   gradient box just as well. */
.text-audit-gradient {
  background: var(--audit-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.text-audit-gradient:not([class*="pr-"]):not([class*="px-"]):not([class*="pe-"]) {
  padding-right: var(--audit-gradient-text-pad);
  margin-right: calc(var(--audit-gradient-text-pad) * -1);
}

/* ── Gradient icon strokes & fills (SVG icons) ──
   CONTRAST RULE (read first): the light-gold end (#ffb405) of the
   gradient washes out on white/cream — gradient strokes/fills only work
   on DARK surfaces (navy badges, dark sections). On light surfaces the
   BADGE carries the gradient (.bg-audit-accent) and the icon is flat
   navy (text-audit-dark + stroke="currentColor").

   SVG gradients cannot be written in pure CSS — stroke/fill must
   reference a real <linearGradient> in the DOM. Use the ATTRIBUTE form
   on the <svg> (most robust across browsers):

   1. Drop this hidden defs block ONCE per page, just before the first
      icon that uses it:

        <svg width="0" height="0" aria-hidden="true" focusable="false"><defs><linearGradient id="aw-grad-icon" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#ffb405"/><stop offset="100%" stop-color="#ff8121"/></linearGradient></defs></svg>

   2. Reference it in the icon's stroke/fill attribute:

        <svg stroke="url(#aw-grad-icon)" …>        (line icons, dark badges)
        <svg fill="url(#aw-grad-icon)" …>          (solid icons, dark badges)

   Classes (alternative to the attribute; same contrast rule):
        .aw-icon-grad              gradient stroke on line icons
        .aw-icon-grad-fill         gradient fill on solid icons
        .aw-icon-grad-hover-white  ADD for the standard card pattern:
                                   inside a .group card the stroke flips
                                   to white on hover — for badges that
                                   fill with the gradient on hover
                                   (group-hover:bg-audit-accent).
   Unlayered, so these win over Tailwind utilities. */
.aw-icon-grad {
  stroke: url(#aw-grad-icon);
}
.aw-icon-grad-fill {
  fill: url(#aw-grad-icon);
}
.group:hover .aw-icon-grad-hover-white {
  stroke: #ffffff;
}

/* ── Gradient text fill on hover (nav links, partner marquee, etc.)
   Use this class on any element where you want the gold→orange gradient
   to appear on hover. The base state is plain text (inherits color);
   on hover the gradient clip kicks in.
   No CSS transition needed — browsers cannot interpolate between a
   solid color and a gradient. Works on inline, block, and flex elements.
   Hover state carries the same built-in right room as .text-audit-gradient
   (--audit-gradient-text-pad), so the last glyph never clips on hover.
   Same opt-out as above: elements with their own pr-* / px-* / pe-*
   padding (e.g. the partner marquee items with px-8) keep it untouched,
   so they don't jump when the gradient kicks in. ── */
.aw-hover-gradient {
  -webkit-text-fill-color: inherit;
}
.aw-hover-gradient:hover {
  background-image: linear-gradient(135deg, #ffb405 0%, #ff8121 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aw-hover-gradient:hover:not([class*="pr-"]):not([class*="px-"]):not([class*="pe-"]) {
  padding-right: var(--audit-gradient-text-pad);
  margin-right: calc(var(--audit-gradient-text-pad) * -1);
}

/* ── Nav links that contain an inline icon (chevron arrow) to the right.
   Declared unlayered so it wins over Tailwind's @layer utilities and
   guarantees the icon sits next to — not below — the link text,
   regardless of browser-preflight or cascade-layer ordering. ── */
.aw-nav-icon-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

/* ── Warm cream background utility (#f4f3ef) ──
   Used for fact blocks, FAQ accordions, and team cards.
   Change --color-audit-cream here to update every instance
   across the entire site in one edit. ── */
.bg-audit-cream {
  background-color: var(--color-audit-cream);
}

/* ── Alias: routes Tailwind's arbitrary-value class bg-[#f3f2ee]
   (the former cream value, kept so legacy pages keep working) through
   the same design token. Because tokens.css is an unlayered author
   stylesheet, this unlayered rule beats Tailwind's @layer utilities
   rule for the same class — so every existing page that uses
   bg-[#f3f2ee] automatically inherits --color-audit-cream
   without touching a single page file. ── */
.bg-\[#f3f2ee\] {
  background-color: var(--color-audit-cream);
}

/* ── Same alias for the current value, so new pages can use the
   literal class and still inherit the token. ── */
.bg-\[#f4f3ef\] {
  background-color: var(--color-audit-cream);
}

/* ── Button component classes (STABLE CORE)
   Referenced by name from page HTML. Restyle freely — never rename.
   .btn        base shape / reset (combine with a variant)
   .btn-primary   gradient gold pill — primary CTA, dark text
   .btn-secondary navy pill — secondary action, white text
   .btn-ghost     translucent pill — ghost on dark backgrounds
   ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.875rem 2rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.btn-primary {
  background-image: var(--audit-gradient);
  background-color: var(--audit-gradient-from); /* solid fallback */
  color: var(--color-audit-dark);
  box-shadow: 0 8px 24px rgba(255, 129, 33, 0.25);
}
.btn-primary:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 32px rgba(255, 129, 33, 0.35);
}
.btn-secondary {
  background-color: var(--color-audit-dark);
  color: #ffffff;
  box-shadow: var(--shadow-2);
}
.btn-secondary:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-3);
}
.btn-ghost {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ── Vacancy cards — brand gradient on hover ──
   The engine-rendered vacancy cards (`.aw-vacancy`, from the
   vacancy-list / vacancy-featured / vacancy-strip components) get the
   gold→orange gradient as their hover fill instead of the flat gold
   border accent. Text stays navy so the card remains readable on the
   gradient. Declared unlayered and with `!important` so it reliably
   wins over the card's own Tailwind `hover:` / `group-hover:` utilities. */
.aw-vacancy:hover,
.aw-vacancy.group:hover {
  background-image: var(--audit-gradient) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
.aw-vacancy:hover h3,
.aw-vacancy:hover .group-hover\:text-audit-accent {
  color: var(--color-audit-dark) !important;
  -webkit-text-fill-color: var(--color-audit-dark) !important;
}
.aw-vacancy:hover .text-audit-dark\/40,
.aw-vacancy:hover .text-audit-dark\/60,
.aw-vacancy:hover .text-audit-dark\/70 {
  color: rgba(10, 31, 68, 0.85) !important;
}
.aw-vacancy:hover svg {
  color: var(--color-audit-dark) !important;
}
.aw-vacancy:hover .bg-audit-accent,
.aw-vacancy:hover [class*="bg-audit-accent"] {
  background-image: var(--audit-gradient) !important;
  background-color: transparent !important;
  color: var(--color-audit-dark) !important;
}