/* ============================================================================
   Hollywood Media District / SoHo BID — supplemental front-end CSS.
   Enqueued from functions.php. theme.json owns the design SYSTEM (palette, type,
   spacing, element/button styles). This file holds what theme.json can't express:
     1. Token bridge — design var aliases + Vibemap --vm-* skin variables.
     2. Global tweaks + keyframes.
     3. Button block-style variants + shared component classes (eyebrow,
        section-header, tags) used across patterns.
   Per-section layout CSS lives in assets/css/patterns/*.css (enqueued per file).
   ========================================================================== */

/* ── 1. Token bridge ──────────────────────────────────────────────────────
   Design-source variable names aliased to theme.json presets (single source of
   truth = theme.json). Lets ported component CSS read var(--magenta) etc. */
:root {
	--magenta: var(--wp--preset--color--primary);
	--magenta-deep: var(--wp--preset--color--primary-deep);
	--yellow: var(--wp--preset--color--secondary);
	--pink: var(--wp--preset--color--pink);
	--ink: var(--wp--preset--color--contrast);
	--teal: var(--wp--preset--color--accent);
	--coral: var(--wp--preset--color--coral);
	--purple: var(--wp--preset--color--purple);
	--cream: var(--wp--preset--color--base);
	--cream-2: var(--wp--preset--color--base-2);
	--paper: var(--wp--preset--color--white);
	--paper-low: var(--wp--preset--color--surface);
	--line: rgba(26, 26, 46, 0.08);
	--ink-soft: rgba(26, 26, 46, 0.65);

	/* Fonts (mirror theme.json font families for use in raw CSS). */
	--font-display: "Epilogue", system-ui, sans-serif;
	--font-body: "Plus Jakarta Sans", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	/* ── Vibemap plugin skin bridge ──
	   Every Vibemap block reads var(--vm-*, fallback); defining them here
	   re-skins the plugin's map/grid/cards/chips to the Neon Editorial system. */
	--vm-color-primary: var(--wp--preset--color--primary);
	--vm-color-primary-light: #FCE0EE;
	--vm-color-secondary: var(--wp--preset--color--secondary);
	--vm-color-accent: var(--wp--preset--color--accent);
	--vm-color-accent-contrast: var(--wp--preset--color--white);
	--vm-color-foreground: var(--wp--preset--color--contrast);
	--vm-color-foreground-contrast: var(--wp--preset--color--white);
	--vm-color-background: var(--wp--preset--color--base);
	--vm-color-surface: var(--wp--preset--color--white);
	--vm-color-surface-hover: var(--wp--preset--color--base-2);
	--vm-color-surface-muted: var(--wp--preset--color--surface);
	--vm-color-muted: var(--ink-soft);
	--vm-color-border: var(--line);
	--vm-color-text: var(--wp--preset--color--contrast);
	--vm-color-event-color: var(--wp--preset--color--primary);
	--vm-color-place-color: var(--wp--preset--color--accent);
	--vm-font-body: var(--font-body);
	--vm-font-display: var(--font-display);
	--vm-font-sans: var(--font-body);
	--vm-font-mono: var(--font-mono);
	--vm-r1: 8px;
	--vm-r2: 14px;
	--vm-r3: 999px;
	--vm-s1: 4px;
	--vm-s2: 8px;
	--vm-s3: 12px;
	--vm-s4: 16px;
	--vm-s5: 24px;
	--vm-s6: 32px;
	--vm-s7: 48px;
	--vm-s8: 64px;
}

/* ── 2. Globals + keyframes ───────────────────────────────────────────────*/
body {
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "liga" 1;
}

/* Full-bleed page sections abut edge-to-edge. Without this the constrained
   layout's block-gap leaves a strip of the body background between
   differently-colored full-width sections (the "gap under heros"). Each
   section carries its own vertical padding, so no gap is needed between them. */
main.wp-block-group.is-layout-constrained > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Same at the template root: no block-gap strip between the header part, main,
   and footer part. Header must sit flush on the first section. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
::selection {
	background: var(--yellow);
	color: var(--ink);
}

@keyframes hmd-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes hmd-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
	.hmd-marquee__track { animation: none !important; }
	.hmd-eyebrow__dot   { animation: none !important; }
}

/* ── 3a. Button block-style variants ──────────────────────────────────────
   Default button (magenta pill) is styled in theme.json. Variants recolor. */
.wp-block-button.is-style-ink > .wp-block-button__link {
	background-color: var(--ink);
	color: var(--yellow);
}
.wp-block-button.is-style-ink > .wp-block-button__link:hover,
.wp-block-button.is-style-ink > .wp-block-button__link:focus {
	background-color: var(--magenta);
	color: var(--paper);
}
.wp-block-button.is-style-yellow > .wp-block-button__link {
	background-color: var(--yellow);
	color: var(--ink);
}
.wp-block-button.is-style-yellow > .wp-block-button__link:hover,
.wp-block-button.is-style-yellow > .wp-block-button__link:focus {
	background-color: var(--ink);
	color: var(--yellow);
}
.wp-block-button.is-style-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--magenta);
	box-shadow: inset 0 0 0 2px var(--magenta);
}
.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(--magenta);
	color: var(--paper);
}
.wp-block-button.is-style-ghost-light > .wp-block-button__link {
	background-color: transparent;
	color: var(--paper);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.wp-block-button.is-style-ghost-light > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost-light > .wp-block-button__link:focus {
	background-color: var(--paper);
	color: var(--ink);
}
/* Buttons lift slightly on hover (design motion). */
.wp-block-button__link { transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* ── 3b. White panel group style ──────────────────────────────────────────*/
.wp-block-group.is-style-panel {
	background: var(--paper);
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(26, 26, 46, 0.06);
}

/* ── 3c. Eyebrow (kicker label above headings) ────────────────────────────*/
.hmd-eyebrow {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--magenta);
	margin: 0 0 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
.hmd-eyebrow--yellow { color: var(--yellow); }
.hmd-eyebrow__dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--magenta);
	animation: hmd-pulse 2s infinite;
	flex: 0 0 auto;
}

/* ── 3d. Section header (eyebrow + h2 left, link right) ────────────────────*/
.hmd-section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.hmd-section-header h2 {
	margin: 0;
	line-height: 0.98;
}
.hmd-section-header .hmd-arrow-link {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink);
	border-bottom: 3px solid var(--yellow);
	padding-bottom: 0.25rem;
	white-space: nowrap;
}
.hmd-section-header .hmd-arrow-link:hover { color: var(--magenta); text-decoration: none; }

/* ── 3e. Category tags / chips (pale bg + bold color text) ─────────────────*/
.hmd-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	line-height: 1;
}
.hmd-tag--design    { background: #FCE0EE; color: #C8177A; }
.hmd-tag--safety    { background: #D6F2EE; color: #0A6E63; }
.hmd-tag--events    { background: #FFF1B0; color: #6F5900; }
.hmd-tag--arts      { background: #E5DBF1; color: #5E2D8E; }
.hmd-tag--dining    { background: #FCE0D6; color: #B8421C; }
.hmd-tag--retail    { background: #FBE0E8; color: #9D005D; }
.hmd-tag--news      { background: #E2DFFF; color: #322B6E; }
.hmd-tag--community { background: #FFF1B0; color: #6F5900; }

/* ── 3f. Lucide icon sizing helper ────────────────────────────────────────*/
.hmd-icon {
	width: 1.25em;
	height: 1.25em;
	display: inline-block;
	vertical-align: middle;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

/* ── 3g. Service-request callout (Contact page) ───────────────────────────*/
.hmd-contact-alert {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	background: #FCE0EE;
	border-left: 4px solid var(--magenta);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}
.hmd-contact-alert__ico {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--magenta);
	color: #fff;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.hmd-contact-alert__ico .hmd-icon { width: 22px; height: 22px; }
.hmd-contact-alert__text { flex: 1; min-width: 260px; }
.hmd-contact-alert__text strong {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.0625rem;
	color: var(--ink);
	display: block;
	margin-bottom: 0.25rem;
}
.hmd-contact-alert__text p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; }
.hmd-contact-alert__btn {
	flex: 0 0 auto;
	background: var(--magenta);
	color: #fff !important;
	font-family: var(--font-display);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	padding: 0.875rem 1.5rem;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}
.hmd-contact-alert__btn:hover { background: var(--magenta-deep); }