/*
Theme Name: The Hippodrome
Theme URI:
Description: A child theme for Ollie.
Author:
Author URI:
Template: ollie
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-hippodrome
*/

/* ── HEADER OVERLAY ────────────────────────────────────────────────────────── */

/*
 * The Figma design places the header and hero at the same Y position — the
 * header is fully transparent and overlays the cover block below.
 *
 * 1. Sticky header stays at the top, z-index above content.
 * 2. The header group background is transparent (Figma: #000 @ 0% opacity).
 * 3. backdrop-filter blur creates the frosted-glass effect on whatever is
 *    scrolling behind it.
 * 4. The first cover block on the page is pulled up by the header height so
 *    it fills from the very top of the viewport.
 * 5. The cover's inner container gets matching padding-top so content isn't
 *    hidden behind the bar.
 */

:root {
	/* Fallback before header-scroll.js measures the real height.
	   JS overwrites this immediately on DOMContentLoaded (defer). */
	--hippodrome-header-height: 80px;
}

/* Prevent backdrop-filter blur on the nav from sampling the white body
   background — sets the page root to dark so any bleed is dark, not white */
html, body {
	background-color: var(--wp--preset--color--main) !important;
}

header.wp-block-template-part {
	position: sticky;
	/* Sit below the WP admin bar when logged in; 0px on the front end. */
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 100;
}

/*
 * The header has two inner groups:
 *   1. Announcement bar  → .has-background (solid colour, set in editor — never touched)
 *   2. Nav bar           → .is-style-background-blur (transparent over hero, solid when scrolled)
 */

/* Nav bar — blur is always on regardless of scroll position */
header.wp-block-template-part .wp-block-group.is-style-background-blur {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: background-color 0.3s ease;
}

/* Over the hero: nav bar background is transparent — blur shows the image beneath */
header.wp-block-template-part .wp-block-group.is-style-background-blur {
	background-color: transparent !important;
}

/* Scrolled: dark semi-transparent bg — blur still active, now frosting over page content */
header.wp-block-template-part.is-scrolled .wp-block-group.is-style-background-blur {
	background-color: color-mix(in srgb, var(--wp--preset--color--main) 88%, transparent) !important;
}

/* Pull the first cover block (home page) up behind the sticky header */
.wp-block-post-content > .wp-block-cover:first-child,
.entry-content > .wp-block-cover:first-child {
	margin-top: calc(var(--hippodrome-header-height) * -1);
	min-height: 100svh;
}

/* Push the inner content down so it clears the header bar */
.wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
.entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
	padding-top: var(--hippodrome-header-height);
}


/* ── GLASS CARD ────────────────────────────────────────────────────────────── */
/*
 * Figma spec: Content Box bg = #ffffff at 10% opacity, border-radius 24px.
 * Works against dark backgrounds (main, deep-purple, curtain gradient).
 * Backdrop blur adds depth when content scrolls behind the card.
 */
.wp-block-group.is-style-glass {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent) !important;
	border-radius: var(--wp--custom--border-radius--xl) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow: hidden;
}

/* ── BUTTON STYLES ─────────────────────────────────────────────────────────── */
/*
 * Sizes only — resting colour set by the editor via the colour picker.
 * Default (MD) defined in theme.json styles.elements.button.
 * Hover: Flame gradient on ALL buttons — brand signature interaction.
 *   WP has no editor UI for hover states, so this is always CSS-controlled.
 */

/* Universal hover — Flame gradient regardless of resting fill colour */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	background-color: transparent !important;
	background-image: var(--wp--preset--gradient--flame) !important;
	border-color: transparent !important;
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
}

/* XS — tightest: 4px/12px padding, 14px font */
.wp-block-button.is-style-xs .wp-block-button__link {
	padding: 0.25rem 0.75rem !important;
	font-size: 0.875rem !important;
}

/* SM — 8px/16px padding, 15px font (matches new default but slightly larger text) */
.wp-block-button.is-style-sm .wp-block-button__link {
	padding: 0.5rem 1rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
}

/* LG — 12px/24px padding, 16px font */
.wp-block-button.is-style-lg .wp-block-button__link {
	padding: 0.75rem 1.5rem !important;
	font-size: var(--wp--preset--font-size--base) !important;
}

/* Ghost — transparent bg, border = text colour, Flame fills it on hover */
.wp-block-button.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-ghost .wp-block-button__link:visited {
	background-color: transparent !important;
	border-color: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--base) !important;
}