/**
 * Base styles - reset, typography primitives, global utilities
 *
 * Design tokens (colors, spacing, fonts) live in theme.json and are
 * available as var(--wp--preset--*). This file only handles things
 * that theme.json cannot express.
 *
 * @package eye-revolution
 */

/* --Spacing preset polyfill ---------------------------------------
 * WordPress may not generate CSS custom properties for slugs that
 * start with a digit (2xl, 3xl). We declare them here as a safety
 * net so any block referencing these values still works.
 * ---------------------------------------------------------------- */
:root {
	--wp--preset--spacing--2xl: 5rem;
	--wp--preset--spacing--3xl: 7.5rem;
}

/* --Colour / typography aliases -----------------------------------
 * Shorter names for use in block stylesheets - no hardcoded hex.
 * ---------------------------------------------------------------- */
:root {
	--er-gold-dark:    var(--wp--preset--color--gold-dark);
	--er-gold-mid:     var(--wp--preset--color--gold-mid);
	--er-gold-light:   var(--wp--preset--color--gold-light);
	--er-charcoal:     var(--wp--preset--color--charcoal);
	--er-charcoal-mid: var(--wp--preset--color--charcoal-mid);
	--er-off-white:    var(--wp--preset--color--off-white);
	--er-warm-white:   var(--wp--preset--color--warm-white);
	--er-text-body:    var(--wp--preset--color--text-body);
	--er-text-muted:   var(--wp--preset--color--text-muted);

	--er-font-display: var(--wp--preset--font-family--cormorant-garamond);
	--er-font-body:    var(--wp--preset--font-family--alt-riviera);

	--er-gold-hover:        #8A7E48;
	--er-white:             #FFFFFF;
	--er-overlay-bg:        var(--wp--preset--color--gold-dark);

	--er-border-gold:       1px solid rgba(184, 169, 106, 0.2);
	--er-border-gold-mid:   1px solid rgba(184, 169, 106, 0.35);
	--er-border-white-soft: 1px solid rgba(255, 255, 255, 0.07);
	--er-radius-pill:       100px;
	--er-content-width:     1100px;
	--er-nav-height:        64px;
}

/* --Smooth scroll --------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

/* --Text selection -------------------------------------------------*/
::selection {
	background: var(--er-gold-mid);
	color:      var(--er-charcoal);
}

/* --Focus rings - accessible + on-brand ----------------------------*/
:focus-visible {
	outline:        2px solid var(--er-gold-mid);
	outline-offset: 3px;
}

/* --Image safety ---------------------------------------------------*/
img {
	max-width:  100%;
	height:     auto;
	display:    block;
}

/* --WP block width reset -------------------------------------------*/
.wp-block {
	max-width: none;
}

/* --Thin decorative rule -------------------------------------------*/
.er-rule {
	display:    block;
	width:      48px;
	height:     1px;
	background: var(--er-gold-mid);
	margin:     0 0 var(--wp--preset--spacing--lg);
}

/* --Section label (eyebrow text) -----------------------------------*/
.er-label {
	font-family:     var(--er-font-body);
	font-size:       var(--wp--preset--font-size--section-label);
	font-weight:     300;
	letter-spacing:  0.4em;
	text-transform:  uppercase;
	color:           var(--er-gold-mid);
	margin-bottom:   var(--wp--preset--spacing--sm);
}

/* --Legacy .er-btn utility class -----------------------------------*/
.er-btn {
	display:         inline-block;
	text-decoration: none;
	border-radius:   var(--er-radius-pill);
}

/* --Thin vertical gradient divider ---------------------------------*/
.er-divider {
	display:    block;
	width:      1px;
	height:     80px;
	background: linear-gradient(to bottom, transparent, var(--er-gold-mid), transparent);
	margin:     0 auto;
}

/* --Skip-to-content link (accessibility) ---------------------------*/
.skip-link {
	position:   absolute;
	top:        -100%;
	left:       1rem;
	z-index:    9999;
	padding:    0.5rem 1.5rem;
	background: var(--er-charcoal);
	color:      var(--er-gold-mid);
	font-size:  0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	transition: top 0.2s;
}

.skip-link:focus {
	top: 1rem;
}

/* --Print ----------------------------------------------------------*/
@media print {
	header,
	footer,
	.wp-block-cover {
		display: none !important;
	}

	body {
		background: white;
		color: black;
	}

	.wp-block-post-content {
		max-width: 100%;
	}
}