/*
 * Star Trail — front-end + shared editor styles.
 *
 * Principles:
 *  - Plain CSS, no compiler.
 *  - LOW specificity (single classes, no IDs, no !important).
 *  - NO hard-coded colors/fonts/sizes — everything references theme.json CSS variables
 *    (--wp--preset--color--*, --wp--preset--font-size--*, --wp--preset--spacing--*).
 *    A child theme that changes the palette in its theme.json restyles all of this for free.
 */

/* --- Layout helper CSS variables ---------------------------------------------------------
 * These make it easy to position sticky/fixed elements (menus, headers) directly below the
 * admin bar and/or site header without hard-coding pixel values. See the theme README.
 *
 *   --admin-bar-height : height of the WP admin bar (0 when absent). 46px on <=782, 32px above.
 *   --admin-bar-sticky : 1 while the admin bar is position:fixed (it isn't on small screens).
 *   --header-height    : the site header's height, measured by JS on load/resize.
 *   --header-sticky    : 1 when the header is CSS position:sticky/fixed (detected by JS).
 *   --st-offset-top    : combined offset of whatever is currently sticky at the top.
 *
 * Example:  .my-sticky-thing { position: sticky; top: var(--st-offset-top); }
 */
body {
	--admin-bar-height: 0px;
	--admin-bar-sticky: 0;
	--header-height: 0px;
	--header-sticky: 0;
	--st-offset-top: calc(
		( var( --admin-bar-height ) * var( --admin-bar-sticky ) ) +
		( var( --header-height ) * var( --header-sticky ) )
	);
}
body.admin-bar {
	--admin-bar-height: 32px;
	--admin-bar-sticky: 1;
}
@media ( max-width: 782px ) {
	body.admin-bar {
		--admin-bar-height: 46px;
	}
}
@media ( max-width: 600px ) {
	body.admin-bar {
		--admin-bar-sticky: 0;
	}
}

/* --- Small, safe global niceties (things theme.json can't express) --- */

/* Modern box model everywhere. The block editor and core blocks already assume border-box; this
 * makes the front end (and the editor canvas, since theme.css is an editor style) consistent, so
 * width + padding never overflows a container. Safe with the block editor. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* --- Sticky site header (opt-in) ------------------------------------------------------------
 * Off by default. To enable: Site Editor → Header part → select the outer Group → Settings →
 * Position → Sticky. Core adds `.is-position-sticky` to that Group.
 *
 * Why the extra rule below: a Header template part renders its own <header class="wp-block-template-
 * part"> wrapper around the Group. `position: sticky` on the Group can't work — its containing block
 * is that wrapper, which is exactly as tall as the Group, so there's no room to stick. Instead we
 * PROMOTE the stickiness to the wrapper itself, which is a direct child of `.wp-site-blocks` and so
 * has the whole page to stick against. `:has()` scopes this to the moment you turn Sticky on, and it
 * applies in every template automatically — no per-page setup, no extra Group needed. */
header.wp-block-template-part:has( > .is-position-sticky ) {
	position: sticky;
	/* Sit below the admin bar when it's fixed (front end for logged-in users). */
	top: calc( var( --admin-bar-height, 0px ) * var( --admin-bar-sticky, 0 ) );
	z-index: 100;
}

/* Visible header treatment while sticky: an opaque background (so content doesn't show through) and
 * a shadow that fades in once the page is scrolled at all — `body.st-scrolled` is toggled by
 * header-vars.js. The Group keeps `.is-position-sticky` (the toggle), so these hook off it. Restyle
 * or remove freely; e.g. `body.st-scrolled .st-site-header { padding-block: var(--wp--preset--spacing--20); }`
 * shrinks the header on scroll (padding already transitions). */
.st-site-header {
	transition: box-shadow 0.2s ease, padding 0.2s ease, background-color 0.2s ease;
}
.st-site-header.is-position-sticky {
	background-color: var( --wp--preset--color--base, #fff );
}
body.st-scrolled .st-site-header.is-position-sticky {
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.08 );
}

/* The main content and footer each control their own top spacing via the page template, so they
 * don't need WordPress's default root block-gap above them. Zero it for just those two top-level
 * elements. Uses `:where()` (zero specificity, like core's own `:where(.wp-site-blocks) > *` gap
 * rule) so it's trivial to override, and wins purely by coming later in the cascade. */
:where( .wp-site-blocks ) > :where( main, footer ) {
	margin-block-start: 0;
}

/* Media never overflows its container. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* -------------------------------------------------------------------------
 * Button style variations (registered in functions.php).
 * The Styles tab of any core Button shows: Primary, Secondary, Outline, Text,
 * Ghost, Link. Colors come from the palette, so rebranding is a theme.json change.
 * ------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primary (also the default look, kept explicit for clarity). */
.wp-block-button.is-style-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.is-style-primary .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* Secondary. */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--secondary);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* Outline. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Ghost (subtle filled). */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--line);
}

/* Text (no background/border). */
.wp-block-button.is-style-text .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid transparent;
	padding-left: 0.4em;
	padding-right: 0.4em;
}
.wp-block-button.is-style-text .wp-block-button__link:hover,
.wp-block-button.is-style-text .wp-block-button__link:focus {
	text-decoration: underline;
}

/* Link (inline, looks like a text link). */
.wp-block-button.is-style-link .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 0;
	padding: 0;
	text-decoration: underline;
	border-radius: 0;
}
.wp-block-button.is-style-link .wp-block-button__link:hover,
.wp-block-button.is-style-link .wp-block-button__link:focus {
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Native <details>/<summary> collapsible content (Accordion, Tabs, Resources
 * blocks in the companion plugin all build on these). Styled here so the marker
 * and spacing are consistent even before the plugin's per-block CSS loads.
 * ------------------------------------------------------------------------- */

details > summary {
	cursor: pointer;
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}