/* cms-hawk theme: harbor v1.1.0 */
:root {
  --color-primary: #2563eb;
  --color-primary-foreground: #ffffff;
  --color-secondary: #eef1f7;
  --color-secondary-foreground: #11152a;
  --color-accent: #fbbf24;
  --color-accent-foreground: #11152a;
  --color-destructive: #dc2626;
  --color-destructive-foreground: #ffffff;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-background: #f7f8fb;
  --color-foreground: #11152a;
  --color-card: #ffffff;
  --color-card-foreground: #11152a;
  --color-muted: #5f6a82;
  --color-border: #dde2ec;
  --color-foreground-dark: #f7f8fb;
  --color-muted-dark: #c2c9d8;
  --color-border-dark: #2b3656;
  --color-card-dark: #1b2440;
  --color-card-foreground-dark: #f7f8fb;
  --font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-base: 1rem;
  --font-weight-heading: 700;
  --leading-body: 1.6;
  --leading-heading: 1.1;
  --tracking-heading: -0.02em;
  --text-h1: clamp(2rem, 4.5vw, 3.75rem);
  --text-h2: clamp(1.5rem, 3vw, 2.25rem);
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --shadow-sm: 0 1px 2px rgba(17,21,42,0.06);
  --shadow-md: 0 6px 16px -4px rgba(17,21,42,0.12);
  --shadow-lg: 0 16px 32px -8px rgba(17,21,42,0.16);
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1.25rem;
  --radius-full: 9999px;
  --border-width: 1px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --block-space-heading: var(--space-xs);
  --block-space-text: var(--space-sm);
  --block-space-richtext: var(--space-sm);
  --block-space-card: var(--space-lg);
  --block-space-grid: var(--space-lg);
  --block-space-image: var(--space-md);
  --block-space-table: var(--space-md);
  --block-space-embed: var(--space-md);
  --block-space-carousel: var(--space-md);
  --block-space-callout: var(--space-md);
  --block-space-accordion: var(--space-md);
  --block-space-tabs: var(--space-md);
  --block-space-scrollarea: var(--space-md);
  --block-space-video: var(--space-md);
  --block-space-catalogue: var(--space-md);
  --block-space-form: var(--space-md);
  --block-space-button: var(--space-xs);
  --block-space-flex: 0;
  --block-space-gradient: 0;
  --block-space-border: 0;
  --block-space-separator: 0;
}

/* theme-block-rules.css */
/*
 * theme-block-rules.css
 *
 * Static, repo-managed selectors that map data-cms-block markers onto
 * theme tokens (CSS custom properties resolved via :root in the
 * compiled theme CSS).
 *
 * This file is concatenated into every compiled theme's CSS, so all
 * themes get the same rule shape — they only differ in the variable
 * values they ship. Blocks stay dumb (they emit data-cms-block); the
 * theme system owns the visual mapping.
 *
 * Adding a new selector here is part of the BLOCK / RENDERER contract,
 * not a theme concern. Theme authors override the variables.
 */

/* ---- Heading ---- */
/* Tailwind 4 ships no default heading sizes — without these every
 * heading collapses to body size (16px). The scale is a sane
 * baseline that authors / themes can override per token later.
 *
 * `color: inherit` so headings inside a dark Container (e.g. the hero
 * with background-color set inline via styleHints) flip to the
 * Container's text colour automatically. The body rule below seeds
 * the page-level default. */
[data-cms-block="heading"] {
    color: inherit;
    /* Headings use the theme's display font when it defines one, else the
     * body font. Themes set --font-display via a 'font-display' token. */
    font-family: var(--font-display, var(--font-sans));
    /* Weight, line-height and tracking are theme tokens so a theme can feel
     * typographically distinct, not just a different font. */
    font-weight: var(--font-weight-heading, 700);
    line-height: var(--leading-heading, 1.15);
    letter-spacing: var(--tracking-heading, -0.02em);
    /* Heading rhythm: bottom margin from the theme's per-block spacing token
     * (Themes → Block spacing), falling back to a tight default. See the
     * "Per-block bottom spacing" section below for the whole system. */
    margin: 0 0 var(--block-space-heading, 0.3rem);
}
/* Per-level sizes are tokens (--text-h1..h6); the clamp() fallbacks are the
 * Default theme's responsive scale for when no theme stylesheet is loaded. */
h1[data-cms-block="heading"] { font-size: var(--text-h1, clamp(2rem, 4.5vw, 3.75rem)); }
h2[data-cms-block="heading"] { font-size: var(--text-h2, clamp(1.5rem, 3vw, 2.25rem)); }
h3[data-cms-block="heading"] { font-size: var(--text-h3, 1.5rem); }
h4[data-cms-block="heading"] { font-size: var(--text-h4, 1.25rem); }
h5[data-cms-block="heading"] { font-size: var(--text-h5, 1.125rem); }
h6[data-cms-block="heading"] { font-size: var(--text-h6, 1rem); }

/* Body / text colour comes from the theme, but the public page's
 * <body class="bg-white text-gray-900"> overrides it. Force the
 * theme's surface so the active theme actually paints the page. */
body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    line-height: var(--leading-body, 1.6);
}

/* ---- Rich text / Text ---- */
/* Inherit so a parent Container's text colour (via styleHints) wins.
 * The body baseline below provides the page default. */
[data-cms-block="richtext"],
[data-cms-block="text"] {
    color: inherit;
    font-family: var(--font-sans);
}

/* ---- Per-block bottom spacing (theme-controlled vertical rhythm) ----
 * Every stacked block gets a bottom margin from its theme spacing token
 * (Themes → Block spacing → --block-space-<type>, a step on the --space-*
 * scale). It's a stylesheet rule driven by a theme var — never a block prop —
 * so the editor can't change it per instance and every page stays consistent.
 * Bottom-only keeps spacing predictable in block flow, flex and grid alike (no
 * leading gap, no margin-collapse surprises). The fallback after each var is
 * the Default theme's value, so themes synced before this token shipped (and
 * imported themes that omit it) still get sensible spacing. */
[data-cms-block="text"],
[data-cms-block="richtext"] { margin: 0 0 var(--block-space-text, 1rem); }
[data-cms-block="card"] { margin-bottom: var(--block-space-card, 2rem); }
[data-cms-block="grid"] { margin-bottom: var(--block-space-grid, 2rem); }
[data-cms-block="flex"] { margin-bottom: var(--block-space-flex, 0); }
[data-cms-block="image"] { margin-bottom: var(--block-space-image, 1.5rem); }
[data-cms-block="table"] { margin-bottom: var(--block-space-table, 1.5rem); }
[data-cms-block="embed"] { margin-bottom: var(--block-space-embed, 1.5rem); }
[data-cms-block="carousel"] { margin-bottom: var(--block-space-carousel, 1.5rem); }
[data-cms-block="callout"] { margin-bottom: var(--block-space-callout, 1.5rem); }
[data-cms-block="accordion"] { margin-bottom: var(--block-space-accordion, 1.5rem); }
[data-cms-block="tabs"] { margin-bottom: var(--block-space-tabs, 1.5rem); }
[data-cms-block="scrollarea"] { margin-bottom: var(--block-space-scrollarea, 1.5rem); }
[data-cms-block="video"] { margin-bottom: var(--block-space-video, 1.5rem); }
[data-cms-block="catalogue"] { margin-bottom: var(--block-space-catalogue, 1.5rem); }
[data-cms-block="form"] { margin-bottom: var(--block-space-form, 1.5rem); }
[data-cms-block="gradient"] { margin-bottom: var(--block-space-gradient, 0); }
[data-cms-block="border"] { margin-bottom: var(--block-space-border, 0); }
[data-cms-block="button"] { margin-bottom: var(--block-space-button, 0.5rem); }
[data-cms-block="separator"] { margin-bottom: var(--block-space-separator, 0); }

/* Inside a gap-managed container (Grid cell, Card inner, Flex), the container's
 * own `gap` is the only spacing — drop every block's bottom margin so nothing
 * stacks on top of the gap. Descendant (not child) selector so it works through
 * the editor's per-block wrapper divs too, keeping canvas and public in sync. */
[data-cms-flow="gap"] [data-cms-block] {
    margin-bottom: 0;
}

/* Per-instance bottom spacing: the inspector's "Bottom spacing" select can
 * override the theme default for one block (to fix a layout) — "Theme default"
 * keeps the theme value, "None" removes it, or pick any step from the scale.
 * Stored as data-cms-space on the block's immediate parent in both paths
 * (public: a display:contents wrapper; editor: the CraftBlock wrapper), so a
 * child combinator targets exactly that block, not its descendants. Listed
 * AFTER the gap-reset so an explicit choice wins even inside a Card/Flex;
 * (0,2,0) also beats the single-attribute per-block default rules above. */
[data-cms-space="none"] > [data-cms-block] { margin-bottom: 0; }
[data-cms-space="xs"]   > [data-cms-block] { margin-bottom: var(--space-xs, 0.5rem); }
[data-cms-space="sm"]   > [data-cms-block] { margin-bottom: var(--space-sm, 1rem); }
[data-cms-space="md"]   > [data-cms-block] { margin-bottom: var(--space-md, 1.5rem); }
[data-cms-space="lg"]   > [data-cms-block] { margin-bottom: var(--space-lg, 2rem); }
[data-cms-space="xl"]   > [data-cms-block] { margin-bottom: var(--space-xl, 3rem); }
[data-cms-space="2xl"]  > [data-cms-block] { margin-bottom: var(--space-2xl, 4rem); }
[data-cms-space="3xl"]  > [data-cms-block] { margin-bottom: var(--space-3xl, 5rem); }

/* ---- Text blocks as flex items ---- */
/* A text block dropped into a Flex row was collapsing to its longest word —
 * an empty Rich Text shrank to ~1 character wide, so you couldn't even click
 * into it. Make text-bearing blocks fill (and shrink/wrap within) the flex
 * track instead. Scoped to a Flex parent's DIRECT children so it can't touch
 * Cards/grids/Sections (other markers) and is inert in a content-height flex
 * column (no free space to grow into). Two selector families: the public
 * render's block markers, and the editor's per-block wrapper which carries
 * data-craft-block — so canvas and public stay in sync. */
[data-cms-block="flex"] > [data-cms-block="richtext"],
[data-cms-block="flex"] > [data-cms-block="heading"],
[data-cms-block="flex"] > [data-cms-block="text"],
[data-cms-block="flex"] > [data-craft-block="richtext"],
[data-cms-block="flex"] > [data-craft-block="heading"],
[data-cms-block="flex"] > [data-craft-block="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Link ---- */
[data-cms-block="link"] {
    color: var(--color-primary);
}

[data-cms-block="link"]:hover {
    text-decoration: underline;
}

/* ---- Button ---- */
[data-cms-block="button"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-family: var(--font-sans);
    font-weight: 500;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

[data-cms-block="button"][data-variant="primary"] {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}

[data-cms-block="button"][data-variant="secondary"] {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
}

[data-cms-block="button"][data-variant="accent"] {
    background-color: var(--color-accent);
    color: var(--color-accent-foreground);
}

[data-cms-block="button"][data-variant="outline"] {
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
    background-color: transparent;
}

[data-cms-block="button"][data-variant="ghost"] {
    color: var(--color-foreground);
    background-color: transparent;
}

/* ---- Card ---- */
[data-cms-block="card"] {
    background-color: var(--color-card, var(--color-background));
    color: var(--color-card-foreground, var(--color-foreground));
    border: var(--border-width, 1px) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ---- Badge ---- */
[data-cms-block="badge"] {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
}

/* ---- Callout ---- */
[data-cms-block="callout"] {
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    padding: 1rem;
    background-color: color-mix(in oklab, var(--color-primary) 8%, var(--color-background));
    color: var(--color-foreground);
}

/* ---- Separator / Border ---- */
[data-cms-block="separator"],
[data-cms-block="border"] {
    border-color: var(--color-border);
}

/* ---- Container / Flex / Grid / Spacer / ScrollArea / Accordion / Tabs ---- */
/* Layout primitives are mostly Tailwind-driven; we don't restyle them
 * here, but we still emit the marker so plugins / themes can target
 * them by variant via:
 *   [data-cms-block="flex"][data-variant="hero"] { ... }
 */