/* ==========================================================================
   Site-wide theme layer — Bricolage Grotesque / Inter, OKLCH "court blue"
   system. Loaded AFTER each page's own inline <style> block so it wins the
   cascade without needing to touch per-page markup. Every page already
   shares the same custom-property names (--bg, --dark, --text, --poppins,
   --syne, plus a page-specific accent var), so most of the reskin happens
   simply by redefining those names here — see the alias block below.
   ========================================================================== */

:root {
  --radius: 0.625rem;

  /* signature accent */
  --court: oklch(62% 0.18 245);
  --court-deep: oklch(42% 0.14 248);
  --court-glow: oklch(78% 0.14 235);
  --gradient-hero: linear-gradient(to right bottom,
    oklch(0.58 0.16 240) 0%, oklch(0.42 0.16 245) 50%, oklch(0.24 0.1 252) 100%);

  /* base */
  --ink: oklch(14% 0.02 250);
  --cream: oklch(100% 0 0);
  --background: var(--cream);
  --foreground: var(--ink);
  --card: oklch(100% 0 0);
  --primary: var(--ink);
  --primary-foreground: var(--cream);
  --secondary: oklch(94% 0.008 250);
  --muted: oklch(93% 0.008 250);
  --muted-foreground: oklch(45% 0.02 250);
  --accent: var(--court);
  --accent-foreground: oklch(99% 0 0);
  --border: oklch(88% 0.01 250);
  --input: oklch(88% 0.01 250);
  --ring: var(--court);

  /* fixed dark-navy swatch used by intentionally-dark sections (hero,
     footer, CTA) on every page — constant across light/dark mode, since
     these sections are a design choice, not the reactive page background */
  --dark: oklch(16% 0.03 265);
  --dark-2: oklch(22% 0.03 265);

  /* very light neutral panel — homepage sections (tools, kind-words cards,
     work-section backdrop) that need to sit a shade off the page background
     without reading as the heavier --muted grey used for form fields etc */
  --panel: oklch(97.5% 0.004 250);

  /* ---- legacy variable aliases: every page already references these
     names throughout its CSS, so redefining them here reskins the whole
     site without editing each page's rules individually ---- */
  --bg: var(--muted);
  --bg-2: var(--cream);
  --text: var(--ink);
  --text-muted: var(--muted-foreground);
  --poppins: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --syne: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;

  --blue: var(--court);
  --blue-light: color-mix(in srgb, var(--court) 12%, white);
  --blue-mid: color-mix(in srgb, var(--court) 38%, white);
  --violet: var(--court);
  --emerald: var(--court);
  --teal: var(--court);
  --teal-light: color-mix(in srgb, var(--court) 12%, white);
  --teal-mid: color-mix(in srgb, var(--court) 38%, white);
  --accent-bright: var(--court);
  --accent-light: color-mix(in srgb, var(--court) 12%, white);
  --accent-mid: color-mix(in srgb, var(--court) 38%, white);
  --accent-glow: color-mix(in srgb, var(--court) 22%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: oklch(96% 0.01 250);
    --cream: oklch(16% 0.02 260);
    --background: var(--cream);
    --foreground: var(--ink);
    --card: oklch(20% 0.02 260);
    --primary: var(--ink);
    --primary-foreground: oklch(16% 0.02 260);
    --secondary: oklch(25% 0.02 260);
    --muted: oklch(25% 0.02 260);
    --muted-foreground: oklch(68% 0.02 255);
    --border: oklch(32% 0.02 260);
    --input: oklch(32% 0.02 260);
    --accent-foreground: oklch(12% 0 0);

    --bg: var(--muted);
    --bg-2: var(--cream);
    --text: var(--ink);
    --text-muted: var(--muted-foreground);

    --blue-light: color-mix(in srgb, var(--court) 22%, var(--cream));
    --blue-mid: color-mix(in srgb, var(--court) 48%, var(--cream));
    --teal-light: color-mix(in srgb, var(--court) 22%, var(--cream));
    --teal-mid: color-mix(in srgb, var(--court) 48%, var(--cream));
    --accent-light: color-mix(in srgb, var(--court) 22%, var(--cream));
    --accent-mid: color-mix(in srgb, var(--court) 48%, var(--cream));

    --panel: oklch(23% 0.015 260);
  }

  body { background: var(--cream); }
}

/* ==========================================================================
   Typography refinements
   ========================================================================== */

body { font-weight: 400; }

/* the ghost/outline transparent-stroke third line reads as thin and
   unfinished — render it as plain solid bold heading text like the rest
   of the heading instead */
.hero-title .outline { -webkit-text-stroke: 0; color: #fff; }
.cta-title span { color: color-mix(in srgb, white 55%, transparent); }

/* ==========================================================================
   Homepage hero — plain flat blue (matches the project-page hero
   treatment), scoped to index.html's hero specifically via
   :has(.hero-tagline), since .hero/.hero-title are shared class names
   across every page. Flat colour, not a gradient, so contrast is
   guaranteed everywhere without needing a scrim.
   ========================================================================== */

.hero:has(.hero-tagline) {
  background: var(--court-deep);
  position: relative;
  max-width: none;
  width: 100%;
}
.hero:has(.hero-tagline) > * {
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
}
.hero:has(.hero-tagline) .status-text { color: oklch(100% 0 0 / 0.85); }
.hero:has(.hero-tagline) .status-dot {
  background: var(--court-glow);
  box-shadow: 0 0 8px oklch(78% 0.14 235 / 0.6);
}
.hero:has(.hero-tagline) .hero-title { color: #fff; }
.hero:has(.hero-tagline) .hero-title .dim { color: oklch(100% 0 0 / 0.6); }
.hero:has(.hero-tagline) .hero-tagline,
.hero:has(.hero-tagline) .hero-tagline em { color: #fff; }

/* ==========================================================================
   Nav — three zones (logo / centered links / right-aligned CTA), full-width
   header by default, merges into a floating pill once scrolled
   (nav-scroll.js toggles .is-scrolled). Below 900px it collapses to a
   hamburger menu that drops the links + CTA down as a panel
   (nav-scroll.js also toggles .menu-open).
   ========================================================================== */

nav:not(.section-nav) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  transform: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 32px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  z-index: 100;
  transition: top 0.25s ease, width 0.25s ease, padding 0.25s ease,
    border-radius 0.25s ease, box-shadow 0.25s ease, background 0.25s ease,
    border-color 0.25s ease;
}
nav:not(.section-nav).is-scrolled {
  top: 16px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 880px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent);
}
nav:not(.section-nav) .nav-logo { grid-column: 1; justify-self: start; }
nav:not(.section-nav) .nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: 2px;
  align-items: center;
}
nav:not(.section-nav) .nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}
nav:not(.section-nav) .nav-links a {
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
nav:not(.section-nav) .nav-links a:hover { background: var(--secondary); color: var(--foreground); }
nav:not(.section-nav) .nav-links a.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}
/* "Say Hi" — outlined button, not a filled primary pill */
nav:not(.section-nav) .nav-right a.nav-cta {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--foreground);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
nav:not(.section-nav) .nav-right a.nav-cta:hover {
  background: var(--secondary);
  border-color: var(--ring);
}
/* contact.html points its own "Say Hi" at itself — shown as the current page */
nav:not(.section-nav) .nav-right a.nav-cta.active {
  background: var(--secondary);
  border-color: var(--ring);
  color: var(--court-deep);
}

/* Hamburger — hidden on desktop, only shown below the mobile breakpoint */
nav:not(.section-nav) .nav-hamburger {
  display: none;
  grid-column: 3;
  justify-self: end;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
nav:not(.section-nav) .nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--foreground);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
nav:not(.section-nav).menu-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav:not(.section-nav).menu-open .nav-hamburger span:nth-child(2) { opacity: 0; }
nav:not(.section-nav).menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  nav:not(.section-nav) { grid-template-columns: auto 1fr; padding: 16px 20px; }
  nav:not(.section-nav).is-scrolled { top: 12px; width: calc(100% - 24px); padding: 10px 16px; }

  nav:not(.section-nav) .nav-hamburger { display: flex; }
  nav:not(.section-nav) .nav-links,
  nav:not(.section-nav) .nav-right {
    display: none;
  }
  /* dropdown panel, revealed by nav-scroll.js toggling .menu-open on <nav>.
     Grid-row placement (not position:absolute) so the two panels stack in
     flow instead of overlapping each other — the nav itself is
     position:fixed, so it simply grows taller and floats over the page
     content below rather than pushing it down. */
  nav:not(.section-nav).menu-open { grid-template-rows: auto auto auto; row-gap: 0; }
  nav:not(.section-nav).menu-open .nav-logo { grid-row: 1; }
  nav:not(.section-nav).menu-open .nav-hamburger { grid-row: 1; }
  nav:not(.section-nav).menu-open .nav-links,
  nav:not(.section-nav).menu-open .nav-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: 1 / -1;
    justify-self: stretch;
    background: var(--card);
    padding: 8px 20px;
  }
  nav:not(.section-nav).menu-open .nav-links { grid-row: 2; border-top: 1px solid var(--border); padding-top: 16px; }
  nav:not(.section-nav).menu-open .nav-right { grid-row: 3; padding-bottom: 16px; }
  /* each page's own pre-existing CSS hides individual .nav-links anchors
     at this breakpoint (leftover from the old CTA-only-visible pattern) —
     override it so every link in the open dropdown actually shows */
  nav:not(.section-nav) .nav-links a { display: inline-flex; }
  nav:not(.section-nav).menu-open .nav-links a { padding: 12px 8px; text-align: left; border-radius: var(--radius); }
  nav:not(.section-nav).menu-open .nav-right a.nav-cta { justify-content: center; margin-top: 4px; }
  nav:not(.section-nav).menu-open .nav-right {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--ink) 12%, transparent);
  }
  nav:not(.section-nav).is-scrolled.menu-open { border-radius: 24px 24px 0 0; }
}

/* section-nav scrollspy sidebar — removed sitewide on the 4 project detail
   pages (business-workspace, smart-forms, product-management, apex). Each
   of those pages padded its content left at wide viewports to leave room
   for this fixed sidebar (180-240px, vs. their normal 64px gutter) — with
   the sidebar gone, that compensation is undone here too so content goes
   back to being evenly centered. */
.section-nav { display: none !important; }
@media (min-width: 1321px) {
  .hero, .mobile-strip, .video-section, .stats-bar,
  section:not(.work):not(.about):not(.tools):not(.testimonials):not(.cta-section),
  .gallery-section, .cps {
    padding-left: 64px !important;
  }
}

/* closing CTA section on the 4 project pages had 160px top/bottom padding
   — too much empty space, tightened without touching its copy or layout */
.closing { padding: 100px 64px !important; }
@media (max-width: 900px) {
  .closing { padding: 64px 24px !important; }
}

/* project-page heroes: no decorative glow blobs behind the heading — flat/
   gradient colour only. Covers apex-ds-portfolio.html directly (it isn't
   on case-study.css) and backstops the 3 case-study pages too. */
.hero-glow, .hero-glow-2, .hero-glow2 { display: none; }

/* ==========================================================================
   Buttons — already pill-shaped; make sure the pill radius is fully rounded
   and colors ride the token cascade
   ========================================================================== */

.btn-dark, .btn-white, .btn-outline, .btn-ghost, .btn-prim, .btn-sec, .form-submit {
  border-radius: 999px;
}
/* .btn-white/.form-submit sit on fixed-white cards inside permanently-dark
   sections — left on their original var(--dark)/#fff pairing so they don't
   invert into low-contrast pairs when the OS is in dark mode. .btn-dark
   (the homepage hero's "View work" button) now sits on the same kind of
   fixed-colour hero, so it gets the same fixed white/ink treatment instead
   of the reactive --primary tokens. */
.btn-dark { background: #fff; color: var(--ink); }

/* ==========================================================================
   Footer — was a flat, desaturated navy (--dark-2) that read as off-brand
   next to the vivid court-blue hero/CTA elsewhere on the page. Same fixed
   dark family, but graded toward --court-deep so it ties back into the
   site's actual blue accent instead of sitting apart from it.
   ========================================================================== */

footer { background: linear-gradient(135deg, var(--court-deep) 0%, var(--dark) 100%); }

/* contact.html's "Send Message" button had the same flat, off-brand navy
   (--dark) as the footer used to — same gradient fix so it reads as the
   site's blue rather than an unrelated near-black. */
.btn-submit, .form-submit {
  background: linear-gradient(135deg, var(--court-deep) 0%, var(--dark) 100%);
}

/* ==========================================================================
   Project cards — unified single-accent (court blue) media + tag treatment
   ========================================================================== */

.pc-content.blue-tint,
.pc-content.violet-tint,
.pc-content.teal-tint,
.pc-content.green-tint {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--court) 16%, var(--cream)) 0%,
    color-mix(in srgb, var(--court) 4%, var(--cream)) 100%);
}

/* homepage-only: "Projects I'm proud of" backdrop, tools/technologies strip,
   and testimonial cards all sit a shade off the page background — unified
   on one very light grey instead of the heavier --muted tone */
.work, .tools, .testi-card {
  background: var(--panel);
}
.pc-tag.blue, .pc-tag.violet, .pc-tag.teal, .pc-tag.green {
  color: var(--court-deep);
  background: var(--cream);
  border: 1px solid var(--border);
}
.pc-visual.blue-bg, .pc-visual.violet-bg, .pc-visual.teal-bg, .pc-visual.green-bg {
  background: linear-gradient(145deg, var(--cream), var(--muted));
}
.pc-arrow { background: var(--primary); color: var(--primary-foreground); }

.about-photo-bg {
  background: linear-gradient(135deg, var(--court) 0%, var(--court-deep) 60%, var(--ink) 100%);
}
.about-photo-bg::before {
  background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--court) 50%, transparent) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, color-mix(in srgb, var(--court-glow) 35%, transparent) 0%, transparent 55%);
}
.about-photo-inner { background: linear-gradient(160deg, var(--dark-2) 0%, var(--dark) 100%); }

.status-dot, .avail-dot { background: var(--court); box-shadow: 0 0 8px color-mix(in srgb, var(--court) 55%, transparent); }
.hero-chip.ai {
  border-color: color-mix(in srgb, var(--court) 45%, transparent);
  background: color-mix(in srgb, var(--court) 6%, transparent);
}
.cta-glow { background: radial-gradient(circle, color-mix(in srgb, var(--court) 16%, transparent) 0%, transparent 65%); }

/* ==========================================================================
   Eyebrow labels — tighten tracking toward the 0.08–0.12em spec range
   ========================================================================== */

.section-label, .about-label, .journey-title, .tools-label,
.cta-label, .page-label { letter-spacing: 0.1em; }

/* ==========================================================================
   Focus ring — use the shared court accent everywhere
   ========================================================================== */

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}