/**
 * Homepage foundation styles.
 *
 * Structural only: container widths and vertical rhythm for the future
 * editorial homepage. No colours, typography, borders or component styling —
 * those arrive with the design phase.
 *
 * Loaded on the homepage only, enqueued by inc/homepage.php.
 *
 * @package GeneratePress_Child
 */

/* --------------------------------------------------------------------------
   Layout tokens. Scoped to the homepage so nothing else on the site inherits
   them. Widths and spacing only.
   -------------------------------------------------------------------------- */

.ha-homepage {
	--ha-container: 1200px;
	--ha-container-wide: 1440px;
	--ha-container-narrow: 760px;
	--ha-gutter: clamp(1rem, 4vw, 2.5rem);
	--ha-section: clamp(2rem, 4.5vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   Release GeneratePress's constrained containers so homepage sections can run
   full-bleed. ID selectors are used deliberately: they outrank the theme's
   .grid-container rule without needing !important.
   -------------------------------------------------------------------------- */

.ha-homepage #page,
.ha-homepage #content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.ha-homepage #content {
	display: block;
}

.ha-homepage .site-main {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Homepage canvas.
   -------------------------------------------------------------------------- */

.ha-home {
	width: 100%;
}

/* Full-width band. Future sections use this as their outer element. */
.ha-home__section {
	width: 100%;
	padding-top: var(--ha-section);
	padding-bottom: var(--ha-section);
}

/* Edge-to-edge variant for large photography. */
.ha-home__section--flush {
	padding-top: 0;
	padding-bottom: 0;
}

/* Centred measure inside a section. */
.ha-container {
	width: 100%;
	max-width: var(--ha-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ha-gutter);
	padding-right: var(--ha-gutter);
}

.ha-container--wide {
	max-width: var(--ha-container-wide);
}

.ha-container--narrow {
	max-width: var(--ha-container-narrow);
}


/* --------------------------------------------------------------------------
   Section tone rhythm

   Every section used to sit on the same ground, which read as one flat field
   from the header to the footer. These bands give the page a rhythm without
   adding any card chrome: ground, white, deep emerald, white, ground. The
   deep band sits in the middle and anchors the page.

   Sections are addressed by the heading id each module already owns, so no
   module markup changes here and the order is not tied to :nth-child.
   -------------------------------------------------------------------------- */

.ha-homepage [aria-labelledby="ha-latest-title"],
.ha-homepage [aria-labelledby="ha-popular-title"] {
	background-color: var(--ha-surface);
}

/* The deep band re-points the colour tokens rather than overriding each
   primitive by hand, so .ha-h2, .ha-body, .ha-small, the place tiles and
   their hover states all invert on their own.

   The background is written as a literal on purpose: --ha-accent-deep is
   re-pointed to white a few lines below, so reading the token back here would
   resolve to that new value instead of the emerald. */
.ha-homepage [aria-labelledby="ha-locations-title"] {
	background-color: #0A3C30;

	--ha-surface: #0A3C30;
	--ha-ink: #FFFFFF;
	--ha-ink-muted: #A9D2C6;
	--ha-ink-soft: #A9D2C6;
	--ha-rule: #2A5A4C;
	--ha-rule-strong: #2F7A67;
	--ha-accent: #73E6CB;
	--ha-accent-mid: #73E6CB;
	--ha-accent-deep: #FFFFFF;
}