/* ==========================================================================
   base.css — Northline Studio project foundation.
   NOT generated: this file bridges documented gaps in the exports and adds
   the few project-level custom properties the design system doesn't carry.
   Every export variable name is preserved; additions are marked PROJECT.

   Load order (all pages):
     palette.css -> variables.css -> framework-used.css -> base.css
     -> components.css -> pages.css
   ========================================================================== */

/* Export contract: variables.json -> styleManager.htmlFontSize = 10px.
   The builder's rem values only compute correctly at that root size, so
   standalone hosting declares it too (Bricks does the same on render). */
html {
  font-size: 10px; /* as exported — do not "fix" to 62.5% of 16 */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Export gaps patched here (see README "Gaps found in the export"):
   1. --section-space-96 referenced by --section-padding-block but the
      section-space-* group is absent from variables.json.
   2. --body-text-28 referenced by exported .process-card custom CSS.
   3. --neutral referenced by --form-option-off-color.
   4. --shadow-m referenced by Button tokens (btn-shadow--hover).
   Values below follow the naming logic of their exported siblings.
   -------------------------------------------------------------------------- */
:root {
  --section-space-96: var(--scale-96);       /* gap-patch 1 */
  --body-text-28: var(--text-28);            /* gap-patch 2 (tokens: text-28) */
  --neutral: var(--muted-l-6);               /* gap-patch 3: gray, like its peers */
  --shadow-m: var(--shadow-2);               /* gap-patch 4: mid of shadow-1..5 */
  /* gap-patch 5: exported .process-card / .process-grid consume --space-s /
     --space-l from their custom CSS; the export defines only --space-N.
     Mapped to the two nearest shipped steps (README documents this). */
  --space-s: var(--space-16);
  --space-l: var(--space-32);
  /* PROJECT leading tokens: the exported leading-* utilities store literal
     numbers; components that set line-height directly reference these. */
  --leading-none: 1;
  --leading-tight: 1.25;   /* as exported .leading-tight */
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625; /* as exported .leading-relaxed */
  --leading-loose: 2;

  /* PROJECT tokens (not from the export; prefixed to avoid collision) */
  --proj-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --proj-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --proj-nav-open-bg: var(--light);          /* mobile panel surface alias */
}

/* --------------------------------------------------------------------------
   Recolor-contract overrides (README "Recolor map"): the export's Color
   mapping assumed a light-blue brand (hover = lighter tint). For Northline's
   dark vermilion/forest, a lightening hover FAILS contrast
   (white on --primary-l-2 = 3.7:1; --primary-ultra-dark on --primary = 3.3:1).
   Per project rule "values change, names stay fixed", only these VALUES are
   remapped; every name and every dependent reference stays intact, and the
   WordPress side can adopt the same two-line change:
     --primary-hover:  darker shade (hover state reads as "pressed deeper")
     button ink:       --white on filled primary/secondary
   Contrast (computed, light mode): white/btn-primary 7.3:1, white/hover 9.6:1,
   white/btn-secondary 12.3:1, white/secondary-hover 6.6:1, outline primary
   text on paper 6.8:1. Dark mode: white on --primary(#f0774a) is 2.8:1, so in
   dark mode the filled-button ink flips to the surface color (block below).
   -------------------------------------------------------------------------- */
:root {
  --primary-hover:  var(--primary-d-2);   /* was: var(--primary-l-2) */
  --primary-active: var(--primary-d-4);   /* was: var(--primary-d-2) */
  --btn-primary-color: var(--white);      /* was: var(--primary-ultra-dark) */
  --btn-primary-color--hover: var(--white);
  --btn-secondary-color: var(--white);    /* was: var(--secondary-ultra-dark) */
  --btn-secondary-color--hover: var(--white);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* --primary/--secondary flip bright in dark mode (export dark bases
       #f0774a / #8fbcad). White ink would fail (2.8:1); the fixed warm-ink
       token --black (#141412 in both modes) is used instead: 6.6:1 on
       primary, 4.6:1 on the secondary button background. */
    --btn-primary-color: var(--black);
    --btn-primary-color--hover: var(--black);
    --btn-secondary-color: var(--black);
    --btn-secondary-color--hover: var(--black);
  }
}

body {
  margin: 0;
  font-family: var(--proj-font-body);
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
  color: var(--foreground);
  background-color: var(--background);
  overflow-x: clip; /* exported .overflow-clip is the sanctioned overflow tool */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--proj-font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--heading);
  margin: 0;
}
p { margin: 0; }

a {
  color: var(--link-color);
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.25rem;
}
a:hover { color: var(--link-color--hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* Screen-reader-only text (PROJECT utility). */
.sr-only {
  position: absolute;
  inline-size: 0.1rem; block-size: 0.1rem;
  margin: -0.1rem; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Dark-mode muted text: the export keeps --muted single-mode, so small text
   using it would sit at ~3.7:1 on the dark surface. The contract explicitly
   warns scales don't auto-update on static hosts — this is the sanctioned
   project-side review of a USED dependency. Name preserved, value mapped to
   the flipped ladder of --dark (same role: "muted body"). */
@media (prefers-color-scheme: dark) {
  :root {
    --muted: var(--dark-l-2);             /* 5.7:1 on cards, 10.4:1 on page */
    /* --card maps to --white, which is single-mode and never flips — white
       cards with flipped (paper) text. Remap to the lifted dark surface:
       --light-d-2 is the export's own +2 step in the inverted dark ladder
       (#434140 on #141210), so cards sit above both the page (--light) and
       alternating bands (bg-light-d-1 = +1), same elevation role --card
       plays in light mode. */
    --card: var(--light-d-2);
    --muted-dark: var(--dark-l-2);        /* single-mode gray fails on dark card */
    --primary-dark: var(--primary-d-4);   /* tag ink on flipped tint bg */
    --muted-ultra-light: var(--light-d-1);/* form notice panel: single-mode gray */
    --form-label-color: var(--dark-l-2);  /* single-mode gray fails on dark page */
    --danger: var(--danger-l-3);          /* error text on dark bg fails AA */
    --danger-foreground: var(--black);    /* paired with lightened --danger */
    /* Form inputs: exported tokens reference --white / --black-t-* (both
       single-mode) — white boxes with paper text on a dark page. Remapped to
       the flipped ladders; contrast: text 10.2:1, placeholder 4.5:1, border
       5.9:1 vs page. */
    --form-input-background-color: var(--light-d-1);
    --form-input-background-color--focus: var(--light-d-2);
    --form-input-color: var(--dark-l-1);
    --form-input-color--focus: var(--dark);
    --form-input-border-color: var(--dark-l-4);
    --form-placeholder-color: var(--dark-l-4);
  }
}

/* Exported .split-section carries only _direction: row — the flex container
   itself is the builder's Section element default. Declaring the container
   is the portability shim; child widths come from the exported classes. */
.split-section { display: flex; }

/* Exported .split-section sets _width:tablet_portrait=100% on the media half
   but keeps the row direction, so content(50%)+media(100%) would overflow at
   <=991px without the builder runtime. Smallest documented adjustment that
   preserves the export names — halves stack where the builder's own media
   query takes over. */
@media (max-width: 991px) {
  .split-section { flex-direction: column; }
  .split-section__content { width: 100%; }
}

::selection {
  background-color: var(--selection);
  color: var(--selection-foreground);
}

/* Consistent, visible keyboard focus via exported --focus-ring token. */
:focus-visible {
  outline: 0.2rem solid var(--focus-ring);
  outline-offset: 0.2rem;
}

/* Skip link (project utility, hidden until focused). */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-16);
  top: calc(var(--space-16) * -1);
  z-index: 200; /* above --z-index 100 ceiling of the export */
  background: var(--dark);
  color: var(--light);
  padding: var(--space-8) var(--space-16);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-16); color: var(--light); }

/* --------------------------------------------------------------------------
   Layout ROLES from master prompt §3: section > container > block.
   These role names are NOT present in classes.json (verified); they are the
   small project-level layout classes the prompt prescribes for missing roles.
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-padding-block); }
.container {
  width: var(--content-width-safe);
  margin-inline: auto;
}
.block + .block { margin-block-start: var(--container-gap); }

/* Entrance motion adapter (README: builder anim-* runtime is not portable;
   the export scopes those rules to .bricks-is-frontend and its runtime).
   Uses the SAME exported names for tokens and classes; without the builder's
   JS the exported CSS leaves content visible — this adapter matches that. */
.anim-group { --_anim: ; }
.js .anim-child {
  opacity: 0;
  transform: translate3d(0, var(--entrance-animation--distance, 15px), 0);
}
.js .anim-child.anim-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--entrance-animation--duration, 200ms) var(--entrance-animation--easing),
    transform var(--entrance-animation--duration, 200ms) var(--entrance-animation--easing);
  transition-delay: calc(var(--animation-delay-multiplier, 0) *
              var(--entrance-animation--delay, 200ms));
}
@media (prefers-reduced-motion: reduce) {
  .js .anim-child { opacity: 1; transform: none; transition: none; }
}

/* Image slots (no licensed assets supplied — see assets/images/README.md):
   coherent CSS placeholders with real dimensions, never broken URLs. */
.media-slot {
  background:
    linear-gradient(105deg,
      var(--secondary-t-2) 0%,
      var(--primary-t-1) 45%,
      var(--secondary-t-1) 100%);
  border: var(--border--standard);
}
.media-slot--ink {
  background:
    radial-gradient(120% 120% at 0% 0%,
      var(--primary-t-3) 0%,
      transparent 55%),
    linear-gradient(160deg, var(--dark-d-1), var(--dark));
  border-color: var(--dark-t-1);
}