/* ---------------------------------------------------------------------------
   The ported design, applied to the WHOLE site — for logged-in staff only.

   Loaded only when `?sv-port=1` has been used by somebody who can edit pages
   (see functions.php). The public always gets the current design. Switching the
   live site over is a separate, deliberate act: it is a change to what the
   product looks like, and — because the design started as somebody else's
   commercial Framer template — a licence question. See docs/FRAMER-PORT.md.

   HOW IT REACHES 22 PAGES WITHOUT TOUCHING THEM. Every existing pattern already
   speaks in theme.json presets (`--wp--preset--color--accent`) and a handful of
   component classes (`.sv-card`, `.sv-eyebrow`, `.sv-badge`). So the port is
   applied by redefining those, not by rewriting page bodies. Nothing in
   `patterns/` changes, which means the deploy's drift check stays green and the
   live copy is untouched — the words are the words either way.

   Everything is scoped under `html.sv-port-on`, so this file is inert
   unless the class is on the root element.
   --------------------------------------------------------------------------- */

html.sv-port-on {
  /* THE PALETTE IS NOT HERE ANY MORE, and that is the point of this comment.
     It lived here as an override on top of `theme.json` — the trick that let
     the port ship without touching 22 patterns. It moved into `theme.json`
     itself on 2026-08-30, because an override reaches the front end and NOT the
     block editor: the editor's colour picker was still offering the pre-port
     palette, with a swatch labelled "Accent (EU gold)" that is #f6c945 while
     every page it was used on rendered #00ff88. Anybody editing a page was
     choosing from colours the site does not have.
     What is left here are the tokens that are the PORT's own rather than the
     theme's presets — nothing in `theme.json` names them, so they have nowhere
     else to live. `port-off.css` carries the pre-port palette now, so a staff
     member who switches the design off still sees the site as it was. */
  --sv-port-accent-in: #041b10;
  --sv-port-line-lit: rgba(0, 255, 136, 0.16);
  --sv-port-sans: Inter, ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sv-port-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html.sv-port-on body {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--text);
  font-family: var(--sv-port-sans);
  -webkit-font-smoothing: antialiased;
}

/* Type. The source's scale, with the display sizes clamped so the design holds
   on a phone — published Framer output does not carry its own breakpoints, so
   this is the one place the port is a judgement rather than a measurement. */
html.sv-port-on h1,
html.sv-port-on h2,
html.sv-port-on h3,
html.sv-port-on h4 {
  font-family: var(--sv-port-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
html.sv-port-on h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.04em; }
html.sv-port-on h2 { font-size: clamp(1.75rem, 3.6vw, 2.25rem); line-height: 1.12; }
html.sv-port-on h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
html.sv-port-on p,
html.sv-port-on li { line-height: 1.6; }

/* The components every pattern is built from. */
html.sv-port-on .sv-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  box-shadow: none;
}
html.sv-port-on .sv-card--highlight {
  border-color: var(--sv-port-line-lit);
  background: linear-gradient(180deg, rgba(0, 255, 136, 0.05), var(--wp--preset--color--surface) 60%);
  /* The current design puts a gold glow here. The ported one does not glow. */
  box-shadow: none;
}

html.sv-port-on .sv-eyebrow {
  font-family: var(--sv-port-mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--wp--preset--color--accent);
}

html.sv-port-on .sv-badge {
  font-family: var(--sv-port-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--wp--preset--color--muted);
}
html.sv-port-on .sv-badge--accent {
  color: var(--wp--preset--color--accent);
  border-color: var(--sv-port-line-lit);
  background: rgba(0, 255, 136, 0.08);
}

/* Buttons. The source's are pills; the current theme's are not. */
html.sv-port-on .wp-block-button__link,
html.sv-port-on .wp-element-button {
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--wp--preset--color--accent);
  color: var(--sv-port-accent-in);
  border: 1px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
html.sv-port-on .wp-block-button__link:hover,
html.sv-port-on .wp-element-button:hover {
  transform: translateY(-1px);
  background-color: var(--wp--preset--color--accent-2);
}
html.sv-port-on .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--text);
  border-color: var(--wp--preset--color--border);
}
html.sv-port-on .is-style-outline .wp-block-button__link:hover {
  border-color: var(--sv-port-line-lit);
  color: var(--wp--preset--color--accent);
  background-color: transparent;
}
html.sv-port-on .wp-block-button__link:focus-visible,
html.sv-port-on .wp-element-button:focus-visible,
html.sv-port-on a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
}

html.sv-port-on a { color: var(--wp--preset--color--accent); }
html.sv-port-on code {
  font-family: var(--sv-port-mono);
  color: var(--wp--preset--color--accent);
  background: rgba(0, 255, 136, 0.07);
}
html.sv-port-on hr,
html.sv-port-on .wp-block-separator {
  border-color: var(--wp--preset--color--border);
  opacity: 1;
}
html.sv-port-on table { border-color: var(--wp--preset--color--border); }
html.sv-port-on th,
html.sv-port-on td { border-color: var(--wp--preset--color--border); }
html.sv-port-on th {
  font-family: var(--sv-port-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  font-weight: 400;
}

/* The banner that used to sit here said "visible to you only", which stopped
   being true the moment this became the design. It is gone rather than
   reworded: a bar across the top of the live marketing site, telling visitors
   about a staff switch they cannot use, would be worse than either state.

   The one that remains is its mirror — shown only to an operator who has
   switched the design OFF, because a staff member looking at the pre-port site
   and thinking the deploy failed is the confusion that is now possible. It is
   in port-off.css, which loads only in that case. */

@media (prefers-reduced-motion: reduce) {
  html.sv-port-on .wp-block-button__link,
  html.sv-port-on .wp-element-button { transition: none; }
  html.sv-port-on .wp-block-button__link:hover,
  html.sv-port-on .wp-element-button:hover { transform: none; }
}