/*
 * Base stylesheet: fonts, reset, and the shared chrome (header, overlay
 * menu, audience gate, footer). Page-specific styles belong in their own
 * page templates' extra_css block, not here — see CLAUDE.md, "Where new
 * code goes".
 *
 * Everything below lives in `@layer base` — the same layer name
 * Tailwind's own reset uses — so that Tailwind utility classes (which
 * compile into `@layer utilities`, a later layer) can still override
 * these rules. Un-layered CSS always beats layered CSS regardless of
 * specificity, so without this, plain rules here (e.g. `a { color }`)
 * would silently win over every Tailwind text/color utility on the page.
 */
@layer base {

/* ---------- Fonts — self-hosted, never Google Fonts (CLAUDE.md) ---------- */

@font-face {
  font-family: 'Instrument Sans';
  src: url("../fonts/InstrumentSans-Regular.2b81d5b6a0ff.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url("../fonts/InstrumentSans-Medium.e0b177a490e5.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url("../fonts/InstrumentSans-SemiBold.b0c4d14368e9.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /* design-system.html#type says nothing on the site sets Bold 700 —
     SemiBold is the top of the range — but the modelling-patterns and
     chart-furniture examples in the same document use font-weight: 700
     for hero figures. That's an inconsistency in the reference itself;
     the face is registered so those components aren't silently wrong
     while it gets resolved with Ian/Dan/Alara. */
  font-family: 'Instrument Sans';
  src: url("../fonts/InstrumentSans-Bold.7b231148a218.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reenie Beanie';
  src: url("../fonts/ReenieBeanie-Regular.8cb243bf82f1.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--freyr-bone);
  color: var(--freyr-text);
  font-family: var(--freyr-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--freyr-text);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button {
  font-family: inherit;
}

/* ---------- Utilities ---------- */

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--freyr-space-4);
  z-index: 200;
  background: var(--freyr-ink);
  color: var(--freyr-text-on-ink);
  padding: var(--freyr-space-3) var(--freyr-space-4);
  border-radius: var(--freyr-radius-sm);
  transition: top var(--freyr-duration-base) var(--freyr-ease);
}

.skip-link:focus {
  top: var(--freyr-space-4);
}

/* ---------- Fixed header ---------- */
/* Solid Bone Warm state is the default — safe on any page, including
   ones without a dark hero underneath. Full-bleed hero pages opt into
   the transparent-start behaviour with the --transparent modifier (see
   site.js for the scroll-triggered switch to .is-solid). */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 74px;
  background: var(--freyr-bone-warm);
  border-bottom: 1px solid var(--freyr-border-warm);
  transition: background var(--freyr-duration-base) var(--freyr-ease),
    border-color var(--freyr-duration-base) var(--freyr-ease);
}

.site-header--transparent {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header--transparent.is-solid {
  background: var(--freyr-bone-warm);
  border-bottom-color: var(--freyr-border-warm);
}

.site-header__inner {
  /* Full width, edge to edge — design-reference:/index.html and
     about-us.html both set only side padding on the header itself
     (clamp(20px, 2.6vw, 44px)), no centered/capped container like
     the page content sections get. Capping this to --freyr-container
     was a mistake in the first scaffolding pass. */
  height: 100%;
  padding: 0 var(--freyr-page-gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--freyr-space-6);
}

.site-header__logo {
  justify-self: start;
  display: block;
}

.site-header__logo-img {
  width: 96px;
  height: auto;
  filter: brightness(0); /* Ink, for the default solid state */
}

.site-header--transparent:not(.is-solid) .site-header__logo-img {
  filter: none; /* the SVG is baked Bone (#FFFFFF), correct as-is over a dark hero */
}

.site-header__burger {
  /* Explicit placement, not just source order: .site-header__inner's
     grid-template-columns is 1fr auto 1fr (logo / persona toggle /
     burger). The toggle only renders on the landing page now (see
     header.html's show_persona_toggle) — without it, the burger is
     grid auto-placed into the middle "auto" column instead of the
     last "1fr" one, landing it near-centre instead of at the right
     edge. Pinning it to column 3 keeps it right-aligned either way. */
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
}

.site-header__burger-lines,
.site-header__burger-lines::before,
.site-header__burger-lines::after {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--freyr-ink);
}

.site-header__burger-lines {
  position: relative;
}

.site-header__burger-lines::before,
.site-header__burger-lines::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-header__burger-lines::before {
  top: -6px;
}

.site-header__burger-lines::after {
  top: 6px;
}

.site-header--transparent:not(.is-solid) .site-header__burger-lines,
.site-header--transparent:not(.is-solid) .site-header__burger-lines::before,
.site-header--transparent:not(.is-solid) .site-header__burger-lines::after {
  background: var(--freyr-bone);
}

.site-header__burger:focus-visible {
  outline: 2px solid var(--freyr-hay);
  outline-offset: 2px;
}

/* Overlay menu's close button — the burger's own box and 1px/26px
   lines, crossed, so it sits exactly where the burger was. */
.site-header__close-lines {
  position: relative;
  display: block;
  height: 1px;
  width: 100%;
}

.site-header__close-lines::before,
.site-header__close-lines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--freyr-ink);
}

.site-header__close-lines::before {
  transform: rotate(45deg);
}

.site-header__close-lines::after {
  transform: rotate(-45deg);
}

/* Hay outline would vanish on the Hay overlay. */
.site-header__burger--close:focus-visible {
  outline-color: var(--freyr-ink);
}

/* ---------- Persona toggle ---------- */
/* A native radiogroup: <fieldset> + two <input type="radio">, so arrow
   keys move between options and focus states come from the browser. The
   sliding indicator reads data-selected (set server-side on first paint,
   and by site.js on change) rather than depending on :checked styling
   tricks, which keeps the two header colour states easy to express. */

.persona-toggle__fieldset {
  position: relative;
  display: flex;
  align-items: stretch;
  border: none;
  margin: 0;
  padding: 3px;
  border-radius: 999px;
}

.persona-toggle--compact {
  justify-self: center;
}

.persona-toggle--compact .persona-toggle__fieldset {
  border: 1px solid rgba(22, 22, 22, 0.28);
  background: rgba(22, 22, 22, 0.06);
}

.site-header--transparent:not(.is-solid) .persona-toggle--compact .persona-toggle__fieldset {
  border-color: rgba(243, 241, 236, 0.55);
  background: rgba(22, 22, 22, 0.22);
}

.persona-toggle__indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--freyr-ink);
  transition: transform var(--freyr-duration-base) var(--freyr-ease);
}

.site-header--transparent:not(.is-solid) .persona-toggle__indicator {
  background: var(--freyr-bone);
}

.persona-toggle[data-selected="adviser"] .persona-toggle__indicator {
  transform: translateX(100%);
}

.persona-toggle__option {
  position: relative;
  z-index: 1;
  width: 104px;
  text-align: center;
  padding: 8px 10px;
  font-size: 15px;
  color: var(--freyr-ink);
  cursor: pointer;
}

.site-header--transparent:not(.is-solid) .persona-toggle__option {
  color: var(--freyr-bone);
}

.persona-toggle__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.persona-toggle__option:has(input:checked) {
  color: var(--freyr-hay);
}

.site-header--transparent:not(.is-solid) .persona-toggle__option:has(input:checked) {
  color: var(--freyr-ink);
}

.persona-toggle__option input:focus-visible ~ span {
  outline: 2px solid var(--freyr-hay);
  outline-offset: 2px;
}

.persona-toggle__submit {
  margin-top: var(--freyr-space-2);
  font-size: 13px;
  padding: 4px 10px;
}

/* Large variant, used on the full-screen gate */

.persona-toggle--large .persona-toggle__fieldset {
  gap: var(--freyr-space-4);
  padding: 0;
  background: none;
  border: none;
}

.persona-toggle--large .persona-toggle__indicator {
  display: none;
}

.persona-toggle--large .persona-toggle__option {
  width: auto;
  padding: 16px 28px;
  font-size: 17px;
  font-weight: 500;
  border: 1px solid var(--freyr-ink);
  border-radius: var(--freyr-radius-sm);
  color: var(--freyr-ink);
}

.persona-toggle--large .persona-toggle__option:has(input:checked) {
  background: var(--freyr-ink);
  color: var(--freyr-text-on-ink);
}

/* ---------- Overlay menu ---------- */
/* Markup + layout now built with Tailwind utilities directly in
   overlay_menu.html — this is just the one behavioural rule Tailwind
   utility classes on that element can't express (scroll lock while
   the [hidden] attribute is toggled by site.js). */

body.menu-open,
body.gate-open {
  overflow: hidden;
}

/* ---------- Audience gate ---------- */
/* Layout is built with Tailwind utilities directly in gate.html; this is
   just the hover-preview interaction that utility classes can't express
   on their own — hovering either side (image panel or the central pill)
   dims/grayscales the other side and slides the knob to preview the
   choice. :has() lets both the image link and the pill link (which
   aren't siblings — the pill sits in a separately-positioned overlay)
   trigger the same preview state via one shared data attribute each.

   Every declaration below is !important, and it has to be: the knob's
   resting position and the pills' resting colour come from Tailwind
   utility classes, which compile into `@layer utilities` — a later
   layer than this file's `@layer base`, so without !important these
   rules would silently lose regardless of selector specificity (later
   layer always beats earlier layer, full stop). The veil backgrounds
   are inline `style=""` attributes for the same reason in reverse: nothing
   short of !important beats an inline style at all. This was a real bug
   (reported, not hypothetical) — the knob never slid because of exactly
   this. */

/* Mouse/trackpad only. On touch screens the first tap is treated as a
   hover — it would grey out the other photo and slide the pill without
   following the link, so the gate felt broken on phones. Without these
   rules, both photos stay in colour and any tap opens straight away. */
@media (hover: hover) and (pointer: fine) {
  .gate:has([data-gate-investor]:hover) [data-gate-adviser-img] {
    filter: grayscale(0.85) !important;
  }

  .gate:has([data-gate-adviser]:hover) [data-gate-investor-img] {
    filter: grayscale(0.85) !important;
  }

  .gate:has([data-gate-investor]:hover) [data-gate-investor-img] {
    transform: scale(1.05) !important;
  }

  .gate:has([data-gate-adviser]:hover) [data-gate-adviser-img] {
    transform: scale(1.05) !important;
  }

  .gate:has([data-gate-investor]:hover) [data-gate-investor-veil] {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.62) 0%, rgba(22, 22, 22, 0.18) 45%, rgba(22, 22, 22, 0.68) 100%) !important;
  }

  .gate:has([data-gate-adviser]:hover) [data-gate-adviser-veil] {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.62) 0%, rgba(22, 22, 22, 0.18) 45%, rgba(22, 22, 22, 0.68) 100%) !important;
  }

  .gate:has([data-gate-adviser]:hover) .gate-knob {
    left: 50% !important;
  }

  .gate:has([data-gate-adviser]:hover) [data-gate-pill-investor] {
    color: var(--freyr-bone) !important;
  }

  .gate:has([data-gate-adviser]:hover) [data-gate-pill-adviser] {
    color: var(--freyr-ink) !important;
  }
}

/* Exit — design-reference:/index.html's gateOutLeft/Right. Rendered on
   the page *after* the choice (see gate.html's comment): the gate starts
   in this state, the chrome fades, then the two panels slide off either
   side over the chosen audience's page. Background/pointer-events need
   !important to beat the Tailwind utilities layer (see note above). */
@keyframes gate-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-101%); }
}

@keyframes gate-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(101%); }
}

@keyframes gate-chrome-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.gate[data-gate-exiting] {
  background: transparent !important;
  pointer-events: none !important;
}

.gate[data-gate-exiting] > [data-gate-investor] {
  animation: gate-out-left 0.95s cubic-bezier(0.72, 0, 0.22, 1) 0.18s both;
}

.gate[data-gate-exiting] > [data-gate-adviser] {
  animation: gate-out-right 0.95s cubic-bezier(0.72, 0, 0.22, 1) 0.18s both;
}

.gate[data-gate-exiting] > [data-gate-chrome] {
  animation: gate-chrome-out 0.3s ease both;
}

.gate-toggle a:focus-visible,
.gate a:focus-visible {
  outline: 2px solid var(--freyr-hay);
  outline-offset: 2px;
}

/* Footer markup + layout now built with Tailwind utilities directly in
   footer.html and social_links.html. */

/* ---------- FAQ accordion ---------- */

/* Reveal animation for an opened FAQ answer — 220ms fade-up per
   design_handoff_freyr_website/CHANGELOG.md §2. Toggled by
   core/static/core/js/site.js alongside the `hidden` attribute; the
   `prefers-reduced-motion` rule below already clamps this like every
   other animation on the site. */
@keyframes faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.faq-answer-in {
  animation: faq-answer-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* The two illustration tools keep their original 24px footer padding —
   --freyr-page-gutter was made the site-wide standard everywhere else
   (Ian, 2026-09-24), with the tools explicitly left as they were. */
.template-investor-tool footer,
.template-adviser-tool footer {
  --freyr-page-gutter: var(--freyr-gutter);
}

} /* end @layer base */