/* Generated by KELNIVRA Site Factory. Do not edit: change core/, components/ or site.json and rebuild. */

/* ==========================================================================
   KELNIVRA Site Factory — base.css
   Shared foundation for every site: neutral token defaults, reset, typography,
   layout, buttons, skip link, demo notice and accessibility utilities.

   The build places the site's own tokens (generated from site.json "theme")
   right after this file's :root block, so every value here is only a default.
   Components use role tokens (--color-accent), never raw colours.

   Origin: adapted from Apex Auto Detailing (styles.css sections 1, 3–6, 16),
   without its palette, typeface, hero values or light-sweep effect.
   ========================================================================== */


/* 1. Default tokens (overridden by the site theme)
   ========================================================================== */

:root {
  /* Colour roles: a neutral light theme so an incomplete theme still renders legibly */
  --color-bg: #ffffff;
  --color-surface: #f3f4f6;
  --color-surface-raised: #e5e7eb;
  --color-border: #d1d5db;
  --color-control-border: #6b7280;
  --color-text: #111827;
  --color-text-soft: #374151;
  --color-text-muted: #4b5563;
  --color-accent: #1d4ed8;
  --color-accent-hover: #1e40af;
  --color-on-accent: #ffffff;
  --color-focus: #1d4ed8;

  /* Typography */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-body);
  --display-weight: 700;
  --display-leading: 1.05;
  --display-tracking: -0.02em;
  --display-stretch: 100%;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Fluid sizes: minimum at a 320px viewport, maximum at 1440px */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-nav: 0.9375rem;
  --text-base: clamp(1rem, 0.982rem + 0.089vw, 1.0625rem);
  --text-lead: clamp(1.0625rem, 0.991rem + 0.357vw, 1.3125rem);
  --text-brand: 1.375rem;
  --text-menu: 1.5rem;
  --text-h2: clamp(2rem, 1.643rem + 1.786vw, 3.25rem);
  --text-display: clamp(2.75rem, 1.821rem + 4.643vw, 6rem);
  --leading-snug: 1.15;
  --leading-body: 1.6;

  /* Spacing scale (8px rhythm, 4px half-steps) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 75rem;
  --gutter: clamp(1rem, 0.714rem + 1.429vw, 2rem);
  --section-padding: clamp(4rem, 2.857rem + 5.714vw, 8rem);
  --header-height: 4.5rem;

  /* Shape, sizing, motion */
  --radius-control: 4px;
  --border-thin: 1px;
  --border-thick: 2px;
  --tap-target: 2.75rem;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --duration-fast: 150ms;

  /* Elevation order */
  --z-header: 10;
  --z-skip-link: 100;
}


/* 2. Reset and base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Keeps anchor targets from hiding under a sticky header */
  scroll-padding-top: calc(var(--header-height) + var(--border-thin));
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}


/* 3. Typography
   ========================================================================== */

/* Very long words break only when they cannot fit (large browser font sizes on
   narrow screens). "anywhere" also lowers the heading's minimum width, which
   is what flex and grid containers size themselves by. */
h1,
h2,
h3 {
  overflow-wrap: anywhere;
}

h1,
h2 {
  text-wrap: balance;
}

.display-title,
.section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
}

.display-title {
  font-size: var(--text-display);
  line-height: var(--display-leading);
}

.section-title {
  font-size: var(--text-h2);
  line-height: calc(var(--display-leading) + 0.05);
}

/* Short line above a title */
.eyebrow {
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
}

/* Not-found page (404.html), generated for every site */
.not-found__text {
  max-width: 32rem;
  margin-block: var(--space-6) var(--space-8);
  color: var(--color-text-muted);
}


/* 4. Layout
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-padding);
}

.section--surface {
  background-color: var(--color-surface);
}


/* 5. Shared components: buttons, skip link, demo notice
   ========================================================================== */

/* The transparent border keeps a visible edge in forced-colours mode. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-4) var(--space-7);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
}

.button--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:hover {
  background-color: var(--color-accent-hover);
}

/* A ring in the accent colour could disappear against the accent button */
.button--primary:focus-visible {
  outline-color: var(--color-text);
}

/* Explicit transparent background: on a <button> the browser default would show */
.button--secondary {
  border-color: var(--color-control-border);
  background-color: transparent;
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.button--secondary:hover {
  border-color: var(--color-text);
  background-color: var(--color-surface-raised);
}

.button--compact {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-nav);
}

/* Skip link: off screen until it receives keyboard focus */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--gutter);
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline-color: var(--color-text);
}

/* Demo notice for fictional or preview sites, always visible above the header */
.demo-notice {
  padding: var(--space-2) var(--gutter);
  border-bottom: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: center;
}

.demo-notice strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}


/* 6. Accessibility
   ========================================================================== */

/* Text for screen readers only (it stays in the accessible name) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Motion is opt-in: it only runs when the visitor has not asked to reduce it.
   Components put their transitions and animations inside this same query. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button {
    transition:
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease;
  }
}


/* Site theme (from site.json) */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --color-bg: #f6f3ec;
  --color-surface: #ebe6da;
  --color-surface-raised: #e0d9c9;
  --color-border: #d3cbb8;
  --color-control-border: #6f6a5c;
  --color-text: #1f2a22;
  --color-text-soft: #34433a;
  --color-text-muted: #4d574e;
  --color-accent: #2f5d3a;
  --color-accent-hover: #244a2d;
  --color-on-accent: #ffffff;
  --color-focus: #a2482a;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --display-weight: 600;
  --display-leading: 1.02;
  --display-tracking: -0.02em;
  --display-stretch: 100%;
  --radius-control: 999px;
  --container-max: 72rem;
  --radius-media: 1.5rem;
}

/* Component: header */
/* Header and navigation
   Mobile: a disclosure button shows the navigation as a panel below the bar.
   The panel's visibility follows the button's aria-expanded value, so the ARIA
   state is the single source of truth (header.js only flips it).

   52rem is replaced at build time with site.json header.breakpoint
   (default 60rem). The same value reaches header.js through the button's
   data-desktop-query attribute, so CSS and JavaScript cannot drift apart.
   Origin: Apex styles.css section 7, without its logo and type settings.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: var(--border-thin) solid var(--color-border);
  background-color: var(--color-bg);
}

.site-header--static {
  position: relative;
}

/* flex-wrap: with a very large browser font size the toggle (or the desktop
   links) moves to a second row instead of pushing the page sideways. */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: var(--header-height);
  padding-block: var(--space-3);
}

/* flex-wrap and overflow-wrap: with a very large text size on a narrow screen
   the descriptor moves under the name, and a long name may break, instead of
   pushing the page sideways. At normal sizes nothing wraps. */
.brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  min-width: 0;
  min-height: var(--tap-target);
  color: var(--color-text);
  text-decoration: none;
}

/* The logo is inlined, so it can use currentColor and the accent token. */
.brand__mark {
  flex: none;
  width: auto;
  height: 1.75rem;
  color: var(--color-accent);
}

.brand__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: var(--text-brand);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  line-height: 1;
}

.brand__descriptor {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* On very narrow screens (or 400% zoom) only the name stays visible, so the
   brand and the menu button fit on one row. The accessible name is unchanged:
   in the header it comes from a .visually-hidden copy. */
@media (max-width: 22rem) {
  .site-header .brand__descriptor {
    display: none;
  }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: var(--border-thin) solid var(--color-control-border);
  border-radius: var(--radius-control);
  background-color: transparent;
  font-size: var(--text-nav);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.menu-toggle__icon {
  flex: none;
  width: 1.125rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Icon and visible label follow aria-expanded */
.menu-toggle__icon--close,
.menu-toggle__label--open,
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open,
.menu-toggle[aria-expanded="true"] .menu-toggle__label--closed {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__label--open {
  display: block;
}

/* --menu-top is the panel's distance from the top of the viewport, measured by
   header.js while the menu is open (it changes as anything above the header,
   such as the demo notice, scrolls away). The fallback assumes the header is
   at the top. overscroll-behavior keeps panel scrolling from moving the page. */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline: 0;
  max-height: calc(100svh - var(--menu-top, var(--header-height)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--gutter) var(--space-8);
  border-bottom: var(--border-thin) solid var(--color-border);
  background-color: var(--color-bg);
}

.menu-toggle[aria-expanded="true"] + .site-nav {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  border-bottom: var(--border-thin) solid var(--color-border);
}

.site-nav__item--cta {
  margin-top: var(--space-8);
  border-bottom: 0;
}

.site-nav__item--cta .button {
  width: 100%;
}

.site-nav__link {
  display: block;
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-menu);
  font-weight: var(--display-weight);
  line-height: var(--leading-snug);
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--color-accent);
}

/* Without JavaScript the toggle cannot work, so show the links inline instead */
@media (scripting: none) {
  .site-header {
    position: static;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding-inline: 0;
    border-bottom: 0;
  }
}

@media (min-width: 52rem) {
  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-bottom: 0;
    background-color: transparent;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .site-nav__item {
    border-bottom: 0;
  }

  .site-nav__item--cta {
    margin-top: 0;
  }

  .site-nav__link {
    padding-block: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-nav);
    font-weight: var(--weight-medium);
  }
}


/* Component: hero */
/* Hero
   Shared parts first, then the two layouts. Photo-specific values (focal
   point, scrim strength, minimum height) come from site.json and are written
   as per-instance rules by the build; nothing here assumes a particular photo.
   Origin: Apex styles.css section 8, keeping only the general mechanisms
   (media layer behind the text, scrim, art direction, button row).
   ========================================================================== */

.hero {
  --hero-scrim: 85%;
  --hero-min-height: clamp(32rem, 85svh, 52rem);
}

.hero__title {
  max-width: 18ch;
  margin-bottom: var(--space-6);
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--space-8);
  color: var(--color-text-soft);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 30rem) {
  .hero__actions {
    flex-flow: row wrap;
    gap: var(--space-4);
  }
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-surface);
}


/* Split: text and image side by side from 52rem, stacked below it.
   ========================================================================== */

.hero--split {
  padding-block: clamp(var(--space-10), 1.5rem + 4vw, var(--space-24));
}

.hero--split .hero__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.hero--split .hero__media {
  overflow: hidden;
  border-radius: var(--radius-media, 0);
}

.hero--split .hero__image {
  height: auto;
}

@media (min-width: 52rem) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
  }

  .hero--text-only .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Overlay: the image fills the hero behind the text. The scrim mixes the
   theme's background colour into the photo, strongest under the text.
   Re-measure the text contrast over the real photo whenever the photo,
   --hero-scrim or the colours change (see TESTING.md).
   ========================================================================== */

.hero--overlay {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-height);
  overflow: hidden;
}

.hero--overlay .hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero--overlay .hero__media picture {
  height: 100%;
}

.hero--overlay .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--color-bg) var(--hero-scrim), transparent) 75%, var(--color-bg) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-bg) var(--hero-scrim), transparent) 0%, transparent 70%);
}

.hero--overlay .hero__content {
  padding-block: var(--space-32) clamp(var(--space-10), 1.5rem + 4vw, var(--space-24));
}

/* Windows high contrast and similar modes: drop the decorative scrim */
@media (forced-colors: active) {
  .hero--overlay .hero__media::after {
    display: none;
  }
}


/* Component: text-section */
/* Text section (auxiliary component of v0.1)
   ========================================================================== */

.text-section__inner {
  display: grid;
  gap: var(--space-8) var(--space-16);
}

@media (min-width: 52rem) {
  .text-section__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.text-section__intro {
  max-width: 28rem;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
}

.text-section__body {
  display: grid;
  gap: var(--space-5);
  max-width: 40rem;
  color: var(--color-text-soft);
}

.text-section__list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.text-section__list li {
  padding-left: var(--space-6);
  border-left: var(--border-thick) solid var(--color-accent);
}


/* Component: footer */
/* Footer
   Origin: Apex styles.css section 15, unchanged in structure.
   ========================================================================== */

.site-footer {
  padding-block: var(--space-16) var(--space-10);
  border-top: var(--border-thin) solid var(--color-border);
  font-size: var(--text-nav);
}

.site-footer__top {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 48rem) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.site-footer__text {
  max-width: 24rem;
  margin-top: var(--space-5);
  color: var(--color-text-muted);
}

.footer-columns {
  display: grid;
  /* min(): a column never asks for more than the available width (large text sizes) */
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-10) var(--space-8);
}

.footer-column__title {
  margin-bottom: var(--space-4);
  font-size: var(--text-nav);
  font-weight: var(--weight-bold);
}

.footer-column__list {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  color: var(--color-text-soft);
  list-style: none;
  overflow-wrap: anywhere;
}

/* Block padding gives each link a target of at least 24px (WCAG 2.5.8) */
.footer-column__list a,
.site-footer__link {
  display: inline-block;
  padding-block: var(--space-1);
}

.footer-column__list a {
  text-decoration: none;
}

.footer-column__list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.footer-column__note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-7);
  border-top: var(--border-thin) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.site-footer__link {
  color: var(--color-text-soft);
}


/* Per-section settings (from site.json) */
#welcome .hero__image { object-position: 50% 60%; }