/*
Theme Name:  Eastern District Masons
Theme URI:   https://easternmasons.ca/
Author:      Truespeed Internet Services
Description: Lightweight block theme for Eastern District Masons. Replaces the Elementor + addon stack with core blocks. No page builder, no third-party widget libraries.
Version:     1.2.3
Requires at least: 6.5
Tested up to:      7.0
Requires PHP:      7.4
License:     GPL-2.0-or-later
Text Domain: easterndistrict
*/

/* theme.json carries the design tokens. Only what blocks can't express lives here. */

/* =========================================================== masthead
   Sticky, and it compacts once you scroll: the utility strip collapses and
   the crest shrinks, so the band goes from ~96px at rest to ~58px in use.
   =================================================================== */

/* Sticky must live on the template-part WRAPPER, not on .masthead. A sticky
   element only travels within its parent's box, and that wrapper is exactly as
   tall as the masthead — so sticking it to itself scrolls straight off screen. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 500;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

.masthead {
	border-bottom: 3px solid var(--wp--preset--color--gold);
	transition: box-shadow .22s ease;
	display: flow-root;
}
/* The group's default block gap was adding 64px of dead height between the
   utility strip and the bar. The two rows must sit flush. */
.masthead > .wp-block-group { margin-block-start: 0; }
.masthead > * + * { margin-block-start: 0 !important; }

.masthead.is-stuck { box-shadow: 0 8px 28px rgba(0, 0, 0, .32); }

.masthead a { color: #fff; text-decoration: none; }
.masthead a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* Utility strip collapses away on scroll rather than being sticky dead weight. */
.masthead__utility {
	font-size: 0.8125rem;
	overflow: hidden;
	max-height: 44px;
	transition: max-height .24s ease, opacity .18s ease;
}
.masthead.is-stuck .masthead__utility { max-height: 0; opacity: 0; }
.masthead__utility a { opacity: .82; }
.masthead__utility a:hover { opacity: 1; }

.masthead__bar { transition: padding .24s ease; padding-top: 11px !important; padding-bottom: 11px !important; }
.masthead.is-stuck .masthead__bar { padding-top: 6px !important; padding-bottom: 6px !important; }

.masthead__brand { gap: 13px; }
.masthead .wp-block-site-logo img { transition: width .24s ease; width: 54px !important; }
.masthead.is-stuck .wp-block-site-logo img { width: 40px !important; }

.masthead__wordmark { gap: 0; }
.masthead__wordmark .wp-block-site-title { line-height: 1.15; }

/* The site title is a link and picks up aria-current on the front page — it must
   NOT take the "current nav item" colour. Scope that rule to the menus only. */
.masthead__wordmark .wp-block-site-title a { color: #fff; }

.masthead__kicker {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	opacity: .92;
	transition: max-height .24s ease, opacity .18s ease;
	max-height: 20px;
	overflow: hidden;
}
.masthead.is-stuck .masthead__kicker { max-height: 0; opacity: 0; }

.masthead__primary a { font-size: 0.9375rem; letter-spacing: .005em; }
.masthead__primary .current-menu-item > a,
.masthead__primary a[aria-current="page"] { color: var(--wp--preset--color--gold); }

.masthead .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--navy-mid);
	border: 1px solid rgba(255, 255, 255, .14);
	padding: 6px 0;
	border-radius: 4px;
}
.masthead .wp-block-navigation__submenu-container a { padding: 9px 20px; font-size: 0.9rem; }
.masthead .wp-block-navigation__submenu-container a:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }

/* Mobile overlay menu — full-bleed navy so it reads as part of the brand. */
.masthead .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy);
	padding: 28px 24px;
}
.masthead .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.05rem; }

/* ============================================================== heroes
   Inherited Elementor pages open with a 750–900px banner that pushes every
   piece of real content below the fold. Cap the first section to a band that
   still reads as a hero but leaves content visible on a laptop.
   =================================================================== */

.entry-content > .elementor > .elementor-section:first-of-type { min-height: 0 !important; }
.entry-content > .elementor > .elementor-section:first-of-type > .elementor-container {
	min-height: clamp(240px, 38vh, 400px) !important;
}
.entry-content > .elementor > .elementor-section:first-of-type .elementor-widget-heading h1,
.entry-content > .elementor > .elementor-section:first-of-type .elementor-widget-heading h2 {
	font-size: clamp(2rem, 5vw, 3.25rem) !important;
	line-height: 1.08 !important;
}

/* Interior banded sections were also oversized. Explicitly NOT the first one —
   adding padding there fought the hero cap and put 160px back on. */
.entry-content > .elementor > .elementor-section:not(:first-of-type) {
	padding-top: min(72px, 6vw);
	padding-bottom: min(72px, 6vw);
}

@media (max-width: 781px) {
	.entry-content > .elementor > .elementor-section:first-of-type > .elementor-container {
		min-height: clamp(200px, 32vh, 300px) !important;
	}
}

/* ============================================================== footer */

.sitefoot a { color: #fff; text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; text-underline-offset: 4px; }

.sitefoot__brand { gap: 14px; }
.sitefoot__name { margin: 0; }
.sitefoot__blurb { margin: 14px 0 0; opacity: .7; max-width: 34ch; }

/* The Ontario Masons mark has a near-black wordmark and no reverse version,
   so it sits on its own light panel rather than being recoloured. */
.sitefoot__gl {
	margin-top: 22px;
	background: #fff;
	border-radius: 6px;
	padding: 12px 16px;
	width: fit-content;
}
.sitefoot__gl img { display: block; width: 100%; height: auto; }

.sitefoot__head {
	margin: 0 0 14px;
	font-size: 0.75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}
.sitefoot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sitefoot__list a { opacity: .86; }
.sitefoot__list a:hover { opacity: 1; }

.sitefoot__rule { border-color: rgba(255, 255, 255, .14); }
.sitefoot__legal { font-size: 0.8125rem; opacity: .68; gap: 12px; }
.sitefoot__legal p { margin: 0; }

/* ========================================================= foundations */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Anchor links must clear the sticky band. */
:target { scroll-margin-top: 120px; }
html { scroll-behavior: smooth; }

img, video { max-width: 100%; height: auto; }

@media (max-width: 781px) {
	.masthead__utility { display: none; }   /* those three live in the overlay menu */
	.sitefoot__cols { gap: 32px; }

	/* The band was eating 20% of an 812px screen: the long site title wrapped to
	   two lines beside a 54px crest. Shrink both and drop the kicker. */
	.masthead__bar { padding-top: 8px !important; padding-bottom: 8px !important; }
	.masthead .wp-block-site-logo img { width: 40px !important; }
	.masthead.is-stuck .wp-block-site-logo img { width: 34px !important; }
	.masthead__kicker { display: none; }
	.masthead__wordmark .wp-block-site-title {
		font-size: 1rem !important;
		line-height: 1.2;
		max-width: 11ch;
	}
	.masthead__brand { gap: 10px; }
}

/* Very narrow phones: the wordmark gives way to the crest alone. */
@media (max-width: 380px) {
	.masthead__wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}