/*
Theme Name:  Eye Revolution
Template:    twentytwentyfive
Version:     0.5.5
Description: Custom block theme child of Twenty Twenty-Five for Eye Revolution — London's foremost bespoke 360° virtual tour company.
Text Domain: eye-revolution
Author:      Eye Revolution
*/

/*
 * All brand design tokens live in theme.json.
 * CSS custom properties are generated automatically from those tokens
 * and are available as var(--wp--preset--color--*) etc.
 *
 * Local aliases are declared here so block stylesheets can reference
 * shorter names without hard-coding any hex values.
 */

:root {
	/*
	 * ── Spacing preset polyfill ──────────────────────────────────────
	 * WordPress's PHP rejects slugs that start with a digit, so
	 * --wp--preset--spacing--2xl and --wp--preset--spacing--3xl are
	 * never written to the stylesheet by WP.  We declare them here so
	 * every block that references var(--wp--preset--spacing--2xl/3xl)
	 * gets the correct value instead of resolving to 0px / unset.
	 */
	--wp--preset--spacing--2xl: 5rem;    /* matches theme.json 2xl  */
	--wp--preset--spacing--3xl: 7.5rem;  /* matches theme.json 3xl  */

	/* Colour aliases — map to theme.json palette slugs */
	--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);

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

	/* UI tokens */
	--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;
}

/* ── Global base overrides ── */

body {
	background-color: var(--er-warm-white);
	color:            var(--er-text-body);
	font-family:      var(--er-font-body);
	font-weight:      300;
	line-height:      1.7;
}

/* Remove default outline on blocks in editor */
.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 (kept for pattern compatibility) ── */
.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;
}

/* ═══════════════════════════════════════════════════════════
   PHASE 5 — POLISH
════════════════════════════════════════════════════════════ */

/* ── 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;
}

/* ── Navigation hover + active states ──────────────────────── */
.wp-block-navigation a {
	transition: color 0.2s;
}

.wp-block-navigation a:hover {
	color: var(--er-gold-mid) !important;
}

.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a {
	color: var(--er-gold-mid) !important;
}

/* ── 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;
}

/* ── Cover block — ensure text doesn't overflow on mobile ───── */
.wp-block-cover__inner-container {
	width: 100%;
	box-sizing: border-box;
}

/* ── Constrained inner groups — mobile padding fix ──────────── */
@media (max-width: 600px) {
	.wp-block-group.alignfull {
		padding-left:  var(--wp--preset--spacing--md) !important;
		padding-right: var(--wp--preset--spacing--md) !important;
	}

	.wp-block-cover {
		padding-left:  var(--wp--preset--spacing--md) !important;
		padding-right: var(--wp--preset--spacing--md) !important;
	}

	/* Stack columns fully on small mobile */
	.wp-block-columns {
		gap: var(--wp--preset--spacing--xl) !important;
	}
}

/* ── Tablet: 2-col stat grids ───────────────────────────────── */
@media (max-width: 768px) {
	/* Stats 4-col → 2-col on tablet */
	.wp-block-columns.are-vertically-aligned-top {
		flex-wrap: wrap;
	}
}

/* ── Footer link colours ────────────────────────────────────── */
footer a {
	color:           var(--er-gold-mid);
	text-decoration: none;
	transition:      color 0.2s;
}
footer a:hover {
	color: var(--er-gold-light);
}

/* ── Smooth image hover (used in team cards etc) ────────────── */
.wp-block-image img {
	transition: transform 0.4s ease;
}
.wp-block-image:hover img {
	transform: scale(1.02);
}

/* ── Post content typography ────────────────────────────────── */
.wp-block-post-content {
	font-size:   var(--wp--preset--font-size--body);
	line-height: 1.8;
	color:       var(--er-text-body);
}

.wp-block-post-content p + p {
	margin-top: 1.25em;
}

.wp-block-post-content h2,
.wp-block-post-content h3 {
	margin-top: 2em;
}

/* ── Blockquote in post content ─────────────────────────────── */
.wp-block-post-content blockquote,
.wp-block-quote {
	border-left:    3px solid var(--er-gold-mid);
	padding-left:   var(--wp--preset--spacing--lg);
	margin-left:    0;
	font-family:    var(--er-font-display);
	font-size:      clamp(1.125rem, 2vw, 1.375rem);
	font-style:     italic;
	font-weight:    300;
	color:          var(--er-charcoal);
	line-height:    1.6;
}

/* ── Buttons — solid gold, site-wide ───────────────────────── */
/*
 * Override every button variant (outline, fill, ghost, er-btn)
 * to use the solid brand-gold (#7A7040). Applied with !important
 * so inline colour classes from the block editor don't compete.
 */
.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.er-btn {
	background-color: #7A7040 !important;
	border:           none !important;
	color:            #FFFFFF !important;
	padding:          1.05rem 2.75rem !important;
	transition:       background-color 0.25s, opacity 0.25s !important;
}

.wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.er-btn:hover {
	background-color: #8A7E48 !important;
	color:            #FFFFFF !important;
	border:           none !important;
	opacity:          1 !important;
}

/* ── Spacing: extra gap inside service cards (number → heading → body) ── */
/* The inner wp-block-group inside each service column */
.wp-block-columns.alignwide .wp-block-column .wp-block-group.has-warm-white-background-color {
	row-gap: var(--wp--preset--spacing--md) !important;
}

/* ── Stats bar: a little more vertical padding on each stat cell ── */
.wp-block-group.has-charcoal-background-color .wp-block-columns .wp-block-column .wp-block-group {
	padding-top:    var(--wp--preset--spacing--xl) !important;
	padding-bottom: var(--wp--preset--spacing--xl) !important;
}

/* ── "Trusted by" client-name strip ─────────────────────────── */
/* Names are concatenated in one <p>; add visual spacing so they
   read as a list rather than a run-on string.                     */
.wp-block-group .has-text-muted-color[style*="letter-spacing:0.3em"],
.wp-block-group .has-text-muted-color[style*="letter-spacing: 0.3em"] {
	word-spacing: 0.6em;
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
	header, footer, .wp-block-cover { display: none !important; }
	body { background: white; color: black; }
	.wp-block-post-content { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   HEADER — full-width charcoal bar + burger overlay
════════════════════════════════════════════════════════════ */

.er-site-header {
	width:         100%;
	/* Full-width background, content constrained to wide width (1400px) */
	padding-top:    0 !important;
	padding-bottom: 0 !important;
	padding-inline: max(var(--wp--preset--spacing--lg), calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	height:        var(--er-nav-height);
	z-index:       1000;
	border-bottom: 1px solid rgba(184, 169, 106, 0.12);
	/* Override WP flex with CSS grid for true 3-column centering */
	display:               grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items:           center;
}

/* Sticky header — must be on the WP template-part wrapper, not the inner group,
   because sticky only works when the parent is taller than the sticky element. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top:      0;
	z-index:  1000;
}

/* Remove the parent theme's block gap between header and first content block */
.wp-site-blocks > .wp-block-template-part + * {
	margin-top: 0 !important;
}

/* Left spacer column */
.er-site-header .er-header-left {
	min-width: 0;
}

/* Right column: text links + burger, pushed right */
.er-site-header .er-header-right {
	display:         flex !important;
	justify-content: flex-end;
	align-items:     center;
	gap:             1.5rem;
}

/* Always-visible text nav (About + Contact) */
.er-header-text-nav.wp-block-navigation {
	display:     flex !important;
	align-items: center;
}

.er-header-text-nav .wp-block-navigation__container {
	display:     flex !important;
	align-items: center;
	gap:         1.25rem !important;
}

.er-header-text-nav .wp-block-navigation-item__content {
	font-size:       0.7rem !important;
	letter-spacing:  0.14em !important;
	text-transform:  uppercase !important;
	color:           var(--wp--preset--color--gold-dark) !important;
	text-decoration: none !important;
	opacity:         1;
	transition:      opacity 0.2s, color 0.2s;
	white-space:     nowrap;
}

.er-header-text-nav .wp-block-navigation-item__content:hover {
	color:   var(--wp--preset--color--gold-mid) !important;
	opacity: 1;
}

/* Hide any burger the text-nav block might try to render */
.er-header-text-nav .wp-block-navigation__responsive-container-open { display: none !important; }

/* ── Wordmark (text logo) ────────────────────────────────── */
.er-header-wordmark {
	margin:          0 !important;
	line-height:     1 !important;
	font-family:     var(--wp--preset--font-family--alt-riviera) !important;
	font-size:       0.72rem !important;
	font-weight:     500 !important;
	letter-spacing:  0.22em !important;
	text-transform:  uppercase !important;
}

.er-header-wordmark a {
	color:           var(--wp--preset--color--gold-dark) !important;
	text-decoration: none !important;
	transition:      opacity 0.2s;
}

.er-header-wordmark a:hover {
	opacity: 0.75;
}

/* ── Tablet / mobile header reflow (≤ 768px) ────────────────
   - Hide "MENU" label, keep only the two gold bars
   - Move About + Contact to a second row below the wordmark   */
@media (max-width: 768px) {

	/* Hide the MENU text pseudo-element */
	.er-site-header .wp-block-navigation__responsive-container-open::after {
		display: none !important;
	}

	/* Switch header to a 2-row grid.
	   Row 1: burger (left) | EYE REVOLUTION (centre) | [empty right]
	   Row 2: About · Contact centred across all columns            */
	.er-site-header {
		grid-template-rows:    auto auto !important;
		height:                auto !important;
		padding-top:           0.875rem !important;
		padding-bottom:        0.875rem !important;
		row-gap:               0.4rem !important;
	}

	.er-site-header .er-header-left {
		grid-column: 1 !important;
		grid-row:    1 !important;
	}

	.er-site-header .er-header-wordmark {
		grid-column: 2 !important;
		grid-row:    1 !important;
		text-align:  center !important;
	}

	/* Span all 3 columns, centred in row 2 */
	.er-site-header .er-header-right {
		grid-column:     1 / -1 !important;
		grid-row:        2 !important;
		justify-content: center !important;
		padding-bottom:  0.25rem !important;
	}
}

/* ── Small mobile (≤ 480px): hide text nav entirely ─────── */
@media (max-width: 480px) {
	.er-header-text-nav { display: none !important; }
}

/* ── Burger button ───────────────────────────────────────── */
.er-site-header .wp-block-navigation__responsive-container-open,
.er-site-header button.wp-block-navigation__responsive-container-open {
	background:  transparent !important;
	border:      none !important;
	padding:     8px !important;
	cursor:      pointer;
	color:       var(--wp--preset--color--off-white) !important;
	display:     flex !important;
	align-items: center;
	gap:         10px;
}

/* No focus ring on burger, close, or overlay links */
.er-site-header .wp-block-navigation__responsive-container-open:focus,
.er-site-header .wp-block-navigation__responsive-container-open:focus-visible,
.er-site-header .wp-block-navigation__responsive-container-close:focus,
.er-site-header .wp-block-navigation__responsive-container-close:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item__link:focus,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item__link:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Hide default WP burger SVG */
.er-site-header .wp-block-navigation__responsive-container-open svg,
.er-site-header button.wp-block-navigation__responsive-container-open svg {
	display: none !important;
}

/* Two gold bars (equals-sign style) */
.er-site-header .wp-block-navigation__responsive-container-open::before {
	content:       '';
	display:       block;
	width:         22px;
	height:        11px;
	border-top:    2px solid var(--wp--preset--color--gold-mid);
	border-bottom: 2px solid var(--wp--preset--color--gold-mid);
	flex-shrink:   0;
}

/* MENU label */
.er-site-header .wp-block-navigation__responsive-container-open::after {
	content:        'MENU';
	font-family:    var(--wp--preset--font-family--alt-riviera);
	font-size:      0.68rem;
	font-weight:    300;
	letter-spacing: 0.14em;
	color:          var(--wp--preset--color--gold-dark);
	text-transform: uppercase;
}

/* ── Full-screen overlay ─────────────────────────────────── */

/* Hidden by default — WordPress toggles is-menu-open */
.er-site-header .wp-block-navigation__responsive-container {
	display: none;
}

@keyframes er-overlay-in {
	from { transform: translateX(-100%); opacity: 0; }
	to   { transform: translateX(0);     opacity: 1; }
}


.er-site-header .wp-block-navigation__responsive-container.is-menu-open {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	position:        fixed;
	inset:           0;
	z-index:         9999;
	background:      #7A7040 !important;
	padding:         var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--lg);
	animation:       er-overlay-in 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Close button — flatten the inner dialog so the button anchors to the overlay */
.er-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: static !important;
}

.er-site-header .wp-block-navigation__responsive-container-close {
	position:   absolute !important;
	top:        1rem !important;
	right:      1.5rem !important;
	transform:  none !important;
	background: transparent !important;
	border:     none !important;
	color:      #F5F3EE !important;
	cursor:     pointer;
	padding:    8px !important;
}

.er-site-header .wp-block-navigation__responsive-container-close svg {
	width:  24px;
	height: 24px;
	stroke: #F5F3EE;
	fill:   none;
}

/* ── Overlay nav links ───────────────────────────────────── */

/* Inner nav container — left-aligned */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display:         flex !important;
	flex-direction:  column !important;
	align-items:     flex-start !important;
	justify-content: center !important;
	gap:             0 !important;
	width:           100%;
}

/* The nav items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	text-align: left;
	width:      100%;
}

/* The links themselves */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item__link {
	font-family:     var(--wp--preset--font-family--alt-riviera) !important;
	font-size:       1rem !important;
	font-weight:     400 !important;
	letter-spacing:  0.12em !important;
	text-transform:  uppercase !important;
	color:           #F5F3EE !important;
	text-decoration: none !important;
	line-height:     1 !important;
	padding:         0.65rem 0 !important;
	display:         block;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item__link:hover {
	color: #FFFFFF !important;
}

/* Active / current page link */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-pages-list__item__link,
.wp-block-navigation__responsive-container.is-menu-open .current_page_item .wp-block-pages-list__item__link {
	color:           #D4C48A !important;
	text-decoration: none !important;
	font-style:      normal !important;
}