/* =====================================================================
   [SKIN] skin.css — Colophon's layout, components, and utilities.
   ---------------------------------------------------------------------
   This is the starter skin. Derived themes replace this file entirely
   with their own design personality. The reset and base sheets are the
   same for every theme in the Colophon collection; this sheet is what
   makes Colophon a minimal starter and not a finished product.

   Architecture: CSS @layers, declared in reset.css. Rules here live in
   the appropriate layer based on their scope:
     @layer layout     — structural containers
     @layer components — reusable UI patterns
     @layer blocks     — WordPress block-specific overrides
     @layer utilities  — single-purpose helpers

   To build your own skin:
   1. Keep the @layer structure.
   2. Bind the --cl-* semantic tokens to your palette colours (below).
   3. Add your layout, component, block, and utility rules.
   4. The reset and base sheets don't need editing — they're the floor.
   ===================================================================== */

/* =====================================================================
   LAYER: layout
   ===================================================================== */
@layer layout {

	/* Root padding binding — matches useRootPaddingAwareAlignments in theme.json */
	:root {
		--wp--style--root--padding-top:    var(--wp--preset--spacing--4);
		--wp--style--root--padding-right:  var(--wp--preset--spacing--5);
		--wp--style--root--padding-bottom: var(--wp--preset--spacing--4);
		--wp--style--root--padding-left:   var(--wp--preset--spacing--5);
	}

	/* Colophon is a light-only theme by default.
	   Derived themes that support dark mode declare color-scheme: light dark here. */
	:root {
		color-scheme: light;
	}

	/* Bind the semantic focus-ring and skip-link tokens to Colophon's palette */
	:root {
		--cl-focus-ring:         var(--wp--preset--color--base-accent);
		--cl-focus-ring-inverse: var(--wp--preset--color--base-paper);
		--cl-skip-bg:            var(--wp--preset--color--base-accent);
		--cl-skip-fg:            var(--wp--preset--color--base-paper);
	}

	/* Site shell — ensures footer hugs the viewport bottom even on short pages */
	.wp-site-blocks {
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}

	.colophon-main {
		flex: 1;
	}

	/* Site header — border below to separate from content */
	.colophon-site-header {
		border-bottom: 1px solid var(--wp--preset--color--base-rule);
	}
}

/* =====================================================================
   LAYER: components
   ===================================================================== */
@layer components {

	/* Eyebrow label style — small, tracked, muted.
	   Registered as a block style in skin.php. */
	.is-style-colophon-eyebrow {
		font-size: var(--wp--preset--font-size--xs);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--base-mid);
	}

	/* Full-bleed band — background fills the viewport.
	   Registered as a block style in skin.php. */
	.is-style-colophon-band {
		background-color: var(--wp--preset--color--base-ground);
	}
}

/* =====================================================================
   LAYER: blocks
   WordPress block-specific overrides
   ===================================================================== */
@layer blocks {

	/* Site title — no default underline on hover */
	.wp-block-site-title a {
		text-decoration: none;
	}

	/* Post title — remove default margin when used as a heading in a list */
	.wp-block-post-list-item .wp-block-post-title {
		margin: 0;
	}

	/* Navigation — remove default list markers */
	.wp-block-navigation__container {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Separator — consistent treatment */
	.wp-block-separator {
		border-color: var(--wp--preset--color--base-rule);
	}
}

/* =====================================================================
   LAYER: utilities
   Single-purpose helpers
   ===================================================================== */
@layer utilities {

	/* Visually mute secondary text (captions, meta) */
	.colophon-muted {
		color: var(--wp--preset--color--base-mid);
	}
}