/*
Theme Name: BetterHalf
Theme URI: https://betterhalf.digital/
Description: Custom classic theme for BetterHalf.digital — a productized custom-software builder. Sells one offer (bespoke business software, designed and built by a senior product designer leveraging AI, at a fraction of agency cost), captures scoping context via a branching intake form, and proves the claim through an editable Builds case-study library. Hand-built, no page builders. Renders the locked copy out of the box; ACF Pro makes it editable.
Author: Craig Elve
Author URI: https://craigelve.co.uk/
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: betterhalf
*/

/* ============================================================
   BETTERHALF — DESIGN SYSTEM
   Tokens · base · typography · layout · buttons · nav · footer
   Page-specific modules live in assets/css/pages.css
   ============================================================ */

:root {
  /* — Surface & ink — */
  --ink:        #0A0F17;   /* near-black navy — page ground */
  --ink-2:      #0E141F;   /* raised surface */
  --ink-3:      #131B29;   /* card */
  --ink-4:      #1A2434;   /* card hover / inset */
  --cream:      #FDFDFD;   /* primary text */
  --dim:        rgba(253, 253, 253, 0.66);  /* secondary text */
  --dim-2:      rgba(253, 253, 253, 0.44);  /* meta text */

  /* — Accent system (carried from the original BetterHalf brand) — */
  --acc:        #E7FF00;   /* electric — primary accent */
  --acc-dk:     #C8DE00;
  --pink:       #F45188;
  --blue:       #4DC4FF;
  --grad:       linear-gradient(56deg, #E7FF00 -15%, #4DC4FF 115%);
  --grad-bp:    linear-gradient(56deg, #4DC4FF -15%, #F45188 115%);

  /* — Lines — */
  --line:       rgba(253, 253, 253, 0.10);
  --line-2:     rgba(253, 253, 253, 0.16);
  --line-acc:   rgba(231, 255, 0, 0.45);

  /* — Type — */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-normal: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* — Rhythm — */
  --nav-h: 74px;
  --container: 1200px;
  --container-narrow: 820px;
  --gap: clamp(1rem, 2vw, 1.75rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  /* — Motion — */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t: 0.32s var(--ease);
}

/* ---- Self-hosted Inter (drop woff2 files into assets/fonts/, see README) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/InterVariable.woff2') format('woff2');
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font);
  font-weight: var(--fw-normal);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; padding: 0; }
input, textarea, select, button { font: inherit; }

::selection { background: var(--acc); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--acc);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-weight: var(--fw-semi);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 { line-height: 1.06; font-weight: var(--fw-bold); letter-spacing: -0.02em; }

.h-display {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h-1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.03em; }
.h-2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -0.025em; }
.h-3 { font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -0.02em; }

.lede {
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--dim);
  font-weight: var(--fw-normal);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--acc);
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.acc { color: var(--acc); }

p a:not(.btn) {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--line-acc);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t);
}
p a:not(.btn):hover { text-decoration-color: var(--acc); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.section--alt { background: var(--ink-2); }

.section-head { max-width: 760px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head p { margin-top: 1.1rem; }

.stack > * + * { margin-top: 1.1rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  font-weight: var(--fw-semi);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; }

.btn--primary { background: var(--acc); color: var(--ink); font-weight: var(--fw-bold); }
.btn--primary:hover { background: var(--acc-dk); transform: translateY(-2px); }

.btn--ghost {
  background: rgba(253, 253, 253, 0.04);
  color: var(--cream);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: rgba(253, 253, 253, 0.09); border-color: var(--line-2); }

.btn--link {
  padding: 0.4rem 0;
  border-radius: 0;
  color: var(--acc);
  gap: 0.4rem;
}
.btn--link .arrow { transition: transform var(--t); }
.btn--link:hover .arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* ============================================================
   SITE HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
  padding-top: env(safe-area-inset-top);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1.5rem;
}
/* min-height keeps the logo a ≥44px touch target (WCAG 2.5.8) even though
   the mark itself is only 26px tall. */
.nav__brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; min-height: 44px; }
.nav__brand img { height: 26px; width: auto; }

/* On desktop the panel is transparent to layout: its children become flex
   items of .nav, so the bar reads brand | menu | actions exactly as before. */
.nav__panel { display: contents; }

.nav__menu { display: flex; align-items: center; gap: 0.35rem; }
.nav__menu a {
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: var(--fw-med);
  color: var(--dim);
  transition: color var(--t), background var(--t);
}
.nav__menu a:hover,
.nav__menu .current-menu-item > a,
.nav__menu .current_page_item > a { color: var(--cream); background: rgba(253, 253, 253, 0.05); }

.nav__actions { display: flex; align-items: center; gap: 0.75rem; }

/* Overlay-only detail — hidden on desktop. */
.nav__meta { display: none; }

.nav__toggle {
  display: none;
  width: 48px; height: 48px;           /* ≥44px touch target (Apple HIG / WCAG 2.5.8) */
  align-items: center; justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  margin-right: -4px;                   /* optical: keeps the icon on the container edge */
}
.nav__toggle-bars { position: relative; width: 18px; height: 1.5px; background: var(--cream); transition: background var(--t); }
.nav__toggle-bars::before, .nav__toggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--cream); transition: transform var(--t); }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   MOBILE — full-screen overlay menu
   Everything lives in the overlay: links AND both CTAs. The bar
   itself carries only the logo + the toggle.
   ============================================================ */
@media (max-width: 900px) {
  /* backdrop-filter creates a containing block for fixed-position
     descendants, which would trap the overlay inside the header box.
     Dropping it here fixes that — and it's a real perf win on phones. */
  .site-header {
    backdrop-filter: none;
    background: var(--ink);
  }

  .nav__toggle { display: inline-flex; }

  .nav__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--ink);
    padding: calc(var(--nav-h) + env(safe-area-inset-top) + 1.5rem)
             clamp(1.25rem, 6vw, 2rem)
             calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* visibility (not just opacity) keeps links out of the tab order
       when closed — opacity alone leaves them focusable.
       Note the 0s/delay split: transitioning visibility over a duration
       flips it only at the END, which means focus() can never land on an
       opening panel. Instead it flips instantly on open (0s, no delay) and
       is delayed on close so the fade-out stays visible. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s linear 0.28s;
  }
  .nav__panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s linear 0s;
  }

  .nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__menu a {
    display: flex;
    align-items: center;
    min-height: 56px;                  /* generous, thumb-friendly */
    padding: 0.75rem 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.35rem;
    font-weight: var(--fw-semi);
    letter-spacing: -0.02em;
    color: var(--cream);
  }
  .nav__menu a:hover,
  .nav__menu .current-menu-item > a,
  .nav__menu .current_page_item > a { background: transparent; color: var(--acc); }

  /* CTAs: full-width and stacked, secondary above primary — the same order
     the hero uses, so the primary is always the lowest/nearest the thumb. */
  .nav__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 2rem;
  }
  .nav__actions .btn { display: flex; justify-content: center; width: 100%; min-height: 52px; font-size: 1rem; }

  .nav__meta { display: block; margin-top: auto; padding-top: 2.5rem; }
  .nav__email { display: inline-block; color: var(--acc); font-weight: var(--fw-semi); min-height: 44px; line-height: 44px; }
  .nav__prov { color: var(--dim-2); font-size: 0.82rem; line-height: 1.5; margin-top: 0.25rem; }

  /* Locked while the overlay is open (set by main.js). */
  body.nav-open { overflow: hidden; }
}

/* ============================================================
   CARDS / SHARED SURFACES
   ============================================================ */
.card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.card--link:hover { border-color: var(--line-acc); transform: translateY(-3px); }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: var(--fw-med);
  letter-spacing: 0.02em;
  color: var(--dim);
  background: rgba(253, 253, 253, 0.05);
  border: 1px solid var(--line);
}

.num-index {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--acc);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.footer__brand img { height: 30px; margin-bottom: 1.25rem; }
.footer__brand p { color: var(--dim); max-width: 34ch; }
.footer__col h4 { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim-2); font-weight: var(--fw-semi); margin-bottom: 1.1rem; }
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a { color: var(--dim); transition: color var(--t); }
.footer__col a:hover { color: var(--cream); }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  color: var(--dim-2);
  font-size: 0.86rem;
}
.footer__bottom a:hover { color: var(--cream); }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ============================================================
   REVEAL ON SCROLL (progressive; safety net in main.js)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-2 { margin-top: 2rem; }
.divider { height: 1px; background: var(--line); border: 0; margin-block: clamp(3rem, 6vw, 5rem); }