/**
 * Fluid Framework
 * A modern, semantic design system
 *
 * Like water: adaptable, natural, powerful yet gentle.
 *
 * @version 2.2.6
 * @license MIT
 *
 * Layer Architecture:
 * 1. reset     - Normalize browser defaults
 * 2. tokens    - Design tokens (CSS custom properties)
 * 3. base      - Default element styles
 * 4. layouts   - Layout utilities and patterns
 * 5. components - Reusable component styles
 * 6. themes    - Theme overrides
 * 7. utilities - Utility classes (use sparingly)
 */

/* Establish layer order first - this is crucial */
@layer reset, tokens, base, layouts, components, themes, utilities;


/* ========================================
   CORE
   Foundation styles every project needs
   ======================================== */

@import "./core/reset.css";
@import "./core/tokens.css";
@import "./core/base.css";


/* ========================================
   LAYOUTS
   Layout primitives and patterns
   ======================================== */

@import "./layouts/positioning.css";


/* ========================================
   COMPONENTS
   Reusable UI components
   ======================================== */

@import "./components/button.css";
@import "./components/card.css";
@import "./components/nav.css";
@import "./components/form.css";
@import "./components/hero.css";
@import "./components/indicator.css";
@import "./components/modal.css";
@import "./components/tooltip.css";
@import "./components/accordion.css";
@import "./components/alert.css";
@import "./components/table.css";
@import "./components/avatar.css";
@import "./components/loading.css";
@import "./components/dropdown.css";
@import "./components/badge.css";
@import "./components/empty-state.css";
@import "./components/step-indicator.css";
@import "./components/search-input.css";
@import "./components/chip.css";
@import "./components/gallery.css";
@import "./components/compare.css";


/* ========================================
   SECTIONS
   Pre-built page sections
   ======================================== */

@import "./sections/features.css";
@import "./sections/testimonials.css";
@import "./sections/cta.css";
@import "./sections/footer.css";
@import "./sections/team.css";
@import "./sections/stats.css";


/* Animations */
@import "./animations/scroll-reveal.css";


/* ========================================
   THEMES (Coming in Phase 4)
   Theme variations and overrides
   ======================================== */

/* @import "./themes/default.css"; */
/* @import "./themes/dark.css"; */
/* @import "./themes/corporate.css"; */


/* ========================================
   UTILITIES
   Single-purpose utility classes
   Use sparingly - prefer semantic components
   ======================================== */

@layer utilities {
  /* Visually hidden but accessible to screen readers */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Focus utility - show only with focus-visible */
  .focus-ring:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: 3px;
  }

  /* Flow utility - consistent vertical spacing */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-5));
  }

  /* Prose utility - optimal reading width (a .content-grid sets its own) */
  .prose:not(.content-grid) {
    max-inline-size: var(--container-prose);
  }

  /* ========================================
     TEXT OVERFLOW CONTROL
     Headings hyphenate overlong words by default (see base.css).
     data-text-overflow overrides the handling per element:

       data-text-overflow="hyphenate"  break + hyphen (the heading default)
       data-text-overflow="break"      hard break, no hyphen
       data-text-overflow="clip"       single line, ellipsis
       data-text-overflow="normal"     browser default (opt back out)

     For shrink-to-fit sizing instead, add data-fit-text and include
     assets/js/fit-text.js (progressive enhancement — these CSS
     rules remain the no-JS safety net).
     ======================================== */

  [data-text-overflow="hyphenate"] {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  [data-text-overflow="break"] {
    overflow-wrap: anywhere;
    hyphens: none;
  }

  [data-text-overflow="clip"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  [data-text-overflow="normal"] {
    overflow-wrap: normal;
    hyphens: manual;
  }

  /* Center utility - horizontally centered content */
  .center {
    display: grid;
    place-items: center;
  }

  /* Icon utility - inline SVG icons */
  .icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    inline-size: 1em;
    block-size: 1em;
    stroke-width: 2;
  }

  .icon--sm { inline-size: 0.875em; block-size: 0.875em; }
  .icon--lg { inline-size: 1.25em; block-size: 1.25em; }
  .icon--xl { inline-size: 1.5em; block-size: 1.5em; }


  /* ========================================
     IMAGE PROTECTION
     Discourage casual right-click saving.
     NOT DRM — just friction for the 95% who right-click.
     Does NOT prevent screenshots, dev tools, or determined users.
     ======================================== */

  [data-protected] {
    position: relative;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  [data-protected]::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Transparent overlay blocks "Save Image As" context menu */
  }


  /* ========================================
     ORIENTATION-AWARE IMAGES
     Show/hide images based on viewport orientation.
     Use with <picture> for art direction.
     ======================================== */

  [data-orientation="portrait"] { display: none; }

  @media (orientation: portrait) {
    [data-orientation="landscape"] { display: none; }
    [data-orientation="portrait"] { display: block; }
  }
}


/* ========================================
   LAYOUTS LAYER
   Container, primitives, prose rhythm, the content grid, section bands
   and the section head.
   ======================================== */

@layer layouts {
  /* Container: --page-edge on EACH side (the gutter knob, never below 3vi),
     the same edge .content-grid, the hero and the section components use. */
  .container {
    --_container-size: var(--container-content, var(--container-xl));
    inline-size: min(100% - 2 * var(--page-edge), var(--_container-size));
    margin-inline: auto;
    container-type: inline-size;
  }

  .container--sm { --_container-size: var(--container-sm); }
  .container--md { --_container-size: var(--container-md); }
  .container--lg { --_container-size: var(--container-lg); }
  .container--xl { --_container-size: var(--container-xl); }
  .container--2xl { --_container-size: var(--container-2xl); }

  /* A display headline fills the column it sits in. */
  .entry-header {
    container-type: inline-size;
    padding-block: var(--space-xl) var(--space-l);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-5));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-4));
    align-items: var(--cluster-align, center);
  }

  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-l) var(--space-m));
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--grid-min, 16rem)), 1fr)
    );
  }


  /* ========================================
     PROSE RHYTHM
     More space above a heading than below it; figures and quotes get a
     larger beat. Old-style figures in running text.
     ======================================== */

  .prose { font-variant-numeric: oldstyle-nums proportional-nums; }
  .prose > * { margin-block: 0; }
  .prose > * + * { margin-block-start: var(--flow, 1.1em); }
  /* A chapter (h2) opens with a hairline and 1.5× the beat; a subsection
     (h3) stays close to its chapter. The outline reads at a glance. */
  .prose > h2 {
    margin-block-start: calc(var(--space-xl) * 1.5);
    padding-block-start: var(--space-m);
    border-block-start: var(--border-width) solid var(--color-border);
  }
  .prose > h3 { margin-block-start: var(--space-l); }
  .prose > :is(h2, h3, h4) + * { margin-block-start: var(--space-s); }
  /* Top margins only: .prose is a grid, and grid items' margins add up
     instead of collapsing (48 + 120px stacked above an h2). A block gets
     the larger beat above it, and the text after it gets the same. */
  .prose > :is(figure, blockquote, .pullquote, table, pre, .gallery, hr) { margin-block: var(--space-l) 0; }
  .prose > :is(figure, blockquote, .pullquote, table, pre, .gallery) + :not(h2, h3) { margin-block-start: var(--space-l); }
  .prose > hr { margin-block-start: var(--space-xl); }
  /* A rule already separates: the chapter after it drops its hairline. */
  .prose > hr + h2 { margin-block-start: var(--space-xl); border-block-start: 0; padding-block-start: 0; }
  .prose > :first-child { margin-block-start: 0; }
  .prose :is(p, li, dd, blockquote) { max-inline-size: var(--measure); }
  :is(h2, h3)[id] { scroll-margin-block-start: var(--space-l); }


  /* ========================================
     CONTENT GRID: content, wide, full
     Children sit in the reading column; data-bleed="wide" (or WordPress
     .alignwide) takes the wide column, data-bleed="full" (.alignfull) the
     whole width, its text returning to the wide column. The side and rail
     tracks shrink to 0 on narrow screens with no media query. A wider
     --rail moves the column off-centre and frees a start-side label track.
     ======================================== */

  .content-grid {
    --_edge: var(--page-edge);
    --_side: max(0rem, (var(--container-content) - var(--measure) - var(--rail)) / 2);
    container-type: inline-size;
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--_edge), 1fr)
      [wide-start] minmax(0, var(--rail)) [rail-end] minmax(0, var(--_side))
      [content-start] min(var(--measure), 100% - 2 * var(--_edge)) [content-end]
      minmax(0, var(--_side)) [wide-end]
      minmax(var(--_edge), 1fr) [full-end];
  }

  .content-grid > * { grid-column: content; }

  /* .content-grid is itself a size container, so a display headline placed
     straight in it would fit the whole grid (the viewport), not its column. */
  .content-grid > :is(.display, .hero__headline) {
    font-size: var(--hero-headline-size,
               clamp(var(--step-4), min(100cqi, var(--measure)) / var(--fit, 8), min(var(--display-max), 15svh)));
  }
  .content-grid > :is([data-bleed="wide"], .alignwide) { grid-column: wide; }

  .content-grid > :is([data-bleed="full"], .alignfull) {
    grid-column: full;
    display: grid;
    grid-template-columns: subgrid;
  }

  .content-grid > :is([data-bleed="full"], .alignfull) > * { grid-column: wide; }

  .content-grid > :is([data-bleed="full"], .alignfull) > :is(img, picture, video) {
    grid-column: full;
    inline-size: 100%;
    border-radius: 0;
  }


  /* ========================================
     SECTION BANDS
     data-bg: none or "plain" (page), "tinted" ("alt" is an alias),
     "inverse" (the dark band; its roles live in tokens.css), "accent" (the
     15% accent wash), "accent-strong" (solid accent; at most one a page).
     Sections are told apart by tone, and by a rule or the section head's
     thick rule when two plain ones meet. Never shadows, gradients or
     rounded panels between sections.
     ======================================== */

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

  /* Every band is a size container, so what sits in it (a side caption,
     a display headline) reads the band's width with or without a .container. */
  :is(.section, .features, .stats, .team, .testimonials, .cta) { container-type: inline-size; }

  /* The section components take the band's full width and put their
     content on the .container edges. */
  :is(.features, .stats, .team, .testimonials) {
    padding-block: var(--space-section);
    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
  }

  /* The band paint. Each band also sets --_band-bg, the hook a component
     band (.cta) reads for its own background, so a band always beats the
     component's default without a :not([data-bg]) guard. A section resets
     it, so a nested band never inherits its parent's paint. Never put an
     accent band next to an accent-strong one: the wash kills the punch. */
  :is(.section, section, .cta) { --_band-bg: initial; }

  :is(.section, section)[data-bg="plain"] { --_band-bg: transparent; }

  :is(.section, section)[data-bg="tinted"],
  :is(.section, section)[data-bg="alt"] {
    --_band-bg: var(--color-surface);
    background-color: var(--color-surface);
  }

  :is(.section, section)[data-bg="accent"] {
    --_band-bg: var(--accent-subtle);
    background-color: var(--accent-subtle);
  }

  /* The dark band (its roles and scheme: tokens.css). The text colour is
     set here: inherited colour was already resolved on body. */
  :is(.section, section)[data-bg="inverse"] {
    --_band-bg: var(--band-inverse);
    background-color: var(--band-inverse);
    color: var(--color-text);
  }

  /* Solid accent, shared with .hero[data-theme="accent"]: the roles point
     at --on-accent, and buttons invert through the --_btn-* hooks. */
  :is(.section, section)[data-bg="accent-strong"],
  .hero[data-theme="accent"] {
    --color-text: var(--on-accent);
    --color-text-muted: var(--on-accent);
    --color-text-subtle: var(--on-accent);
    --color-background: var(--accent);
    --color-border: color-mix(in oklch, var(--on-accent) 40%, transparent);
    --color-border-strong: var(--on-accent);
    --accent-ink: var(--on-accent);
    --color-focus: var(--on-accent);
    /* The error red vanishes on the accent (1.1 to 2.9:1); an invalid
       field keeps its heavy start edge (form.css) in --on-accent. */
    --color-error: var(--on-accent);
    --_btn-color: var(--accent);
    --_btn-bg: var(--on-accent);
    --_btn-bg-hover: color-mix(in oklch, var(--on-accent) 85%, var(--accent));
    --_band-bg: var(--accent);
    background-color: var(--accent);
    color: var(--color-text);
  }

  /* Two plain sections in a row: the second loses its top padding. Its
     section head's thick rule separates them; without a head, a hairline
     on its .container does. A default .cta is painted (surface), so it is
     not plain. Needs :has(); older browsers keep the padding. */
  @supports selector(:has(*)) {
    :is(.section, section):not([data-bg]:not([data-bg="plain"]), .hero, .cta:not([data-bg])) + :is(.section, section):not([data-bg]:not([data-bg="plain"]), .hero, .cta:not([data-bg])) {
      padding-block-start: 0;

      &:not(:has(:is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header))) > .container {
        border-block-start: var(--border-width) solid var(--color-border);
        padding-block-start: calc(var(--space-section) / 2);
      }
    }
  }

  /* A plate between two sections (a .content-grid straight in <main>)
     keeps the section rhythm: the band's space under its caption, and a
     plain section after it starts at the plate's edge. */
  main > .content-grid { padding-block-end: var(--space-section); }
  main > .content-grid + :is(.section, section):not([data-bg]:not([data-bg="plain"])) { padding-block-start: 0; }


  /* ========================================
     SECTION HEAD: the default strong separator
     <header class="section__head">
       <p class="eyebrow"><span class="section__num">02</span> Work</p>
       <h2>Quiet things, <em>made loud</em></h2>
       <p class="lede">One or two sentences.</p>
     </header>
     Start-aligned, one edge: the eyebrow over the h2 over the lede, under a
     thick ink rule. (A label column beside the h2 gave every section two
     start edges, the body back at the page edge under an indented lede; a
     child theme with a rail can hang the eyebrow.) --section-rule (a hook,
     not a knob) sets the rule's width; 0 removes it.
     ======================================== */

  :is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header) {
    display: grid;
    row-gap: var(--space-s);
    text-align: start;
    border-block-start: var(--section-rule, var(--border-width-thick)) solid var(--color-border-strong);
    padding-block-start: var(--space-s);
    margin-block-end: var(--space-xl);
  }

  :is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header) > * { margin: 0; }

  :is(.section__head, .features__header, .stats__header, .team__header, .testimonials__header) h2 {
    font-size: var(--step-3);
    max-inline-size: 18em;
  }

  .section__num { font-variant-numeric: lining-nums tabular-nums; }
}