/* ==========================================================================
   Foundation — design tokens + base rules for the redesigned homepage.
   Every colour, spacing value, and font family is a CSS variable so you can
   retune the whole site by editing one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand colours --- */
  --brand-primary:   #FF6105;   /* orange — hero accents, CTAs */
  --brand-secondary: #F5F5DC;   /* cream — main background & sections */
  --brand-activate:  #D3265B;   /* magenta — active / interactive state */
  --brand-inactive:  #545454;   /* dark grey — text on light bg, muted states */
  --brand-available: #00BF63;   /* green — success / online */
  --brand-yellow:    #EDB30F;
  --lightgrey:       #888;       /* muted body-text grey, lighter than --brand-inactive */

 /* ----------------------------------------------------------------------- */
  /* TEMPORARY TRIAL COLOURS */
  --brand-temp-yellow:    #eec416; 

 /* ----------------------------------------------------------------------- */

  /* Semantic colour aliases — use these in components so intent is obvious */
  --text:            var(--brand-inactive);
  --text-strong:     var(--brand-inactive);
  --bg:              var(--brand-secondary);
  --bg-alt:          #FFFFFF;
  --link:            var(--brand-activate);
  --backdrop:        rgba(17, 17, 17, 0.55);  /* modal / overlay backdrop */

  /* --- Font families ---
     Real font first, then a stylistically-close free fallback so the site
     looks reasonable while licensing is being sorted. */
  --brand-h1:     "Anton", "Bebas Neue", sans-serif;
  --brand-poster: "Antonio", sans-serif;
  --brand-serif:  "Lora", Georgia, serif;
  --brand-body:   "Manrope", system-ui, -apple-system, sans-serif;
  --brand-button: "Space Grotesk", system-ui, sans-serif;

  /* --- Typographic scale (fluid) ---
     clamp(min, preferred, max) — locks the value between a lower and upper
     edge, fluidly scaling in between. Feels alive at every screen size. */
  /*--font-size-body:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);      */
  /* Original (16–18) */
  --font-size-body:  clamp(1.1rem, 1.045rem + 0.33vw, 1.238rem);   /* testing. Made mic icon huge on answering machine. Made How it Works text too big */
  --font-size-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);/* 13–14 */
  --font-size-h1:    clamp(5.5rem, 3rem + 10vw, 12rem);           /* 88–192 */
  --font-size-h2:    clamp(1.25rem, 1rem + 1vw,  1.75rem);        /* 20–28 — ribbon */
  --font-size-h3:    clamp(3rem, 1.95rem + 4.5vw, 5.625rem);      /* 48–90 — big display */
  --font-size-h4:    clamp(1.125rem, 0.96rem + 0.336vw, 1.35rem);/* changed from  0.9375rem, 0.88rem + 0.28vw, 1.125rem */

  /* Line-heights — tight for display, loose for body */
  --line-tight:  1.05;
  --line-snug:   1.2;
  --line-normal: 1.55;

  /* --- Spacing scale (4-based) ---
     Only use these in components — never raw pixel values.
     Making it fluid at the larger end keeps sections airy on big screens
     without wasting space on small ones. */
  --space-xxs:  0.1rem;                                           /*   */
  --space-xs:  0.5rem;                                           /*   */
  --space-sm:  0.75rem;                                            /*   */
  --space-md:  1rem;                                              /* 16  */
  --space-lg:  1.5rem;                                            /* 24  */
  --space-xl:  clamp(2rem, 3vw, 3rem);                            /* 32–48 */
  --space-2xl: clamp(3rem, 6vw, 5rem);                            /* 48–80 */
  --space-3xl: clamp(4rem, 10vw, 8rem);                           /* 64–128 */

  /* --- Layout --- */
  --container-max: 1100px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* soft overshoot for pop-ins */
  --transition-fast: 120ms var(--ease-out);
  --transition-med:  220ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);     /* colour state transitions */
  --pulse-duration:  2s;                        /* loading / breathing pulses */

  /* --- Elevation --- */
  --z-toolbar: 10;
  --z-modal:   100;
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--brand-body);
  font-size: var(--font-size-body);
  line-height: var(--line-normal);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 500;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0em;
  line-height: var(--line-tight);
  text-wrap: balance;
}

h1 {
  font-family: var(--brand-poster);
  font-weight: 500; /* 700 */
  font-size: var(--font-size-h1);
}

/* H2 — the ribbon. Lora bold, uppercase, small, on a magenta band with
   inward-notched pointed ends. This is now the DEFAULT h2 style; also
   available as .section-heading for any other tag that needs the same
   look without being semantically an h2. Tune the notch depth via --r. */
h2, .section-heading {
  --r: 0.4em;

  font-family: var(--brand-serif);
  font-weight: 500; /* Is 500 too skinny or does 700 make the ribbon text too bulky? */
  font-size: var(--font-size-h2);
  line-height: 1.8;
  color: var(--brand-secondary);
  background: var(--brand-inactive);
  padding-inline: calc(var(--r) + 1.2em);
  width: fit-content;

  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--r)) 50%,
    100% 100%,
    0 100%,
    var(--r) 50%
  );
}

/* H3 — the big display heading (formerly h2). Uses --brand-poster,
   uppercase, large. Best used sparingly as a section title. */
h3 {
  font-family: var(--brand-poster);
  font-weight: 500;
  font-size: var(--font-size-h3);
}

/* H4 — the button-text look. Same family as buttons, uppercase, wide
   letter-spacing. Useful as an eyebrow label or small meta heading. */
h4 {
  font-family: var(--brand-button);
  font-weight: 500;
  font-size: var(--font-size-h4);
  line-height: var(--line-snug);
  letter-spacing: 0.02em;
}

p { max-width: 60ch; }
p + p { margin-top: var(--space-md); }

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Sections separated by contrasting backgrounds — set --section-bg per
   section and the whole block picks it up. */
section {
  /* Full block padding so sections have breathing room top AND bottom.
     Adjacent sections with different backgrounds pick up 2 × --space-3xl
     of separation at the boundary. If two sibling sections share a
     background and you want them visually merged, add .no-top-padding
     (or set padding-top: 0 locally) on the second one. */
  padding-block: var(--space-3xl);
  background: var(--section-bg, transparent);
}
/* First section on a page has NO top padding — page content should
   start near the viewport top. Any page whose first section wants a
   different amount (e.g. `.page-head` on the info pages) can set its
   own inner padding-top. */
body > section:first-of-type { padding-top: 0; }
section ul {
  padding: 0 0 0 var(--space-xl);
}

/* Modifier utilities for common section backgrounds. */
.bg-primary   { --section-bg: var(--brand-primary);   color: var(--brand-secondary); }
.bg-secondary { --section-bg: var(--brand-secondary); color: var(--text); }
.bg-white     { --section-bg: var(--bg-alt);          color: var(--text); }
.bg-inactive  { --section-bg: var(--brand-inactive);  color: var(--brand-secondary); }
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-magenta h1, .bg-magenta h2, .bg-magenta h3, .bg-magenta h4,
.bg-inactive h1, .bg-inactive h2, .bg-inactive h3 { color: var(--brand-secondary); }
.bg-yellow   { --section-bg: var(--brand-yellow);   color: var(--brand-secondary); }
.bg-magenta   { --section-bg: var(--brand-activate);   color: var(--brand-secondary); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

/* Buttons — fully pill-shaped, no border, solid fill. Two sizes.
   Default = big (comfortable tap target for primary actions).
   .btn.sm  = small (compact chip for meta actions / dense areas). */

.btn {
  /* Padding + border-width live as CSS variables so ghost variants can
     subtract the border thickness from the padding to keep the outer
     size identical to the solid buttons. Change these in one place. */
  --btn-pad-y: 1.1rem;
  --btn-pad-x: 2.1rem;
  --btn-border-w: 0px;

  display: inline-flex;
  align-self: start;                /* never stretch to fill a flex/grid parent */
  width: fit-content;               /* belt-and-braces for non-flex parents */
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: calc(var(--btn-pad-y) - var(--btn-border-w)) calc(var(--btn-pad-x) - var(--btn-border-w));
  border: none;
  border-radius: 999px;             /* fully pill-shaped */
  background: transparent;
  color: currentColor;
  font-family: var(--brand-button);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.btn.sm {
  --btn-pad-y: var(--space-xs);
  --btn-pad-x: var(--space-md);
  font-size: 1rem;
}

.btn.primary {
  background: var(--brand-primary);
  color: var(--brand-secondary);
}
.btn.primary:hover { background: var(--brand-activate); }

.btn.available {
  background: var(--brand-available);
  color: var(--brand-secondary);
}
.btn.available:hover { filter: brightness(0.95); }

.btn.activate {
  background: var(--brand-activate);
  color: var(--brand-secondary);
}
.btn.activate:hover { filter: brightness(0.95); }

/* Ghost = outlined variant. Only variant with a real border, so it sets
   --btn-border-w which the base padding calc automatically compensates for.
   Result: ghost and solid buttons occupy the same outer size at every scale. */
.btn.ghost {
  --btn-border-w: 2px;
  background: transparent;
  border: var(--btn-border-w) solid currentColor;
}
.btn.ghost.sm {
  --btn-border-w: 1.5px;
}

/* --------------------------------------------------------------------------
   6. Accessibility
   -------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-activate);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}