/*
Theme Name: Enterprise Minded
Theme URI: https://enterpriseminded.com
Author: Nathan Franklin
Description: Custom block theme for Enterprise Minded: essays on architecture, AI and design for large organisations, filed by altitude. Pairs with the enterpriseminded-content plugin, which owns the Altitude system.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.3
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: enterpriseminded
*/

/*
 * Only what theme.json can't express: composition, the header/footer, and the
 * page templates' grids. Values come from designs/site/*.html (1440px desktop,
 * 390px mobile). The Altitude components (bands, rows, gauge, sky colours)
 * are styled by the content plugin's content.css.
 *
 * Breakpoints: 781/782px (WordPress's column-stacking point) for layout;
 * 1024px for the header, where the full nav stops fitting on one line.
 */

/* ── Base ── */
body { margin: 0; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }
a:hover { text-decoration-thickness: 2px; }
.wp-site-blocks > header,
.wp-site-blocks > footer,
.wp-site-blocks > main,
.site-main > * { margin-block: 0; }
/* Bands butt up against each other. Core's flow layout puts the global block
   gap between post-content children (`:root :where(.is-layout-flow) > *`),
   which on the home and About pages shows as a stripe of page colour between
   bands. In an essay, the gap stays for ordinary blocks but not around the
   full-bleed altitude sections. */
.site-main > .wp-block-post-content:not(.essay-body) > *,
.essay-body > .em-section,
.essay-body > .em-section + * { margin-block: 0; }

/* Focus: the design's orange ring. Orange alone is only 1.55-2.55:1 against the
   light sky bands (WCAG 2.2 wants 3:1 for a focus indicator), so a night-blue
   halo fills the offset gap. The ring stays orange; on dark bands the orange
   carries the contrast (4.7-5.4:1). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--custom--focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--night);
}

/* Shared horizontal gutter for full-bleed bands (96px desktop, 20px phone). */
.site-header,
.home-hero,
.home-conditions,
.essay-hero,
.essay-coda,
.altitude-top,
.altitude-body,
.topic-top,
.conditions,
.listing,
.lost,
.page-body,
.about-intro,
.about-explainer,
.site-footer__subscribe,
.site-footer__links,
.site-footer__legal {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	box-sizing: border-box;
}

/* ── Header: transparent, sits on the page's sky (see the body class) ── */
.site-header { align-items: center; gap: 32px; padding-top: 28px; padding-bottom: 28px; }
.site-header__title { margin: 0; font-size: 32px; }
.site-header__title a,
.site-footer__title a { color: inherit; text-decoration: none; }
.primary-nav { gap: 32px; font-size: 17px; font-weight: 500; }
.primary-nav .wp-block-navigation-item__content { padding: 10px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.primary-nav .current-menu-item > .wp-block-navigation-item__content,
.primary-nav .wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: currentColor; }
.primary-nav .wp-block-navigation-item__content:hover { border-bottom-color: currentColor; }
.site-header__subscribe { margin: 0; }
.site-header__subscribe a { display: inline-block; padding: 12px 20px; border: 2px solid currentColor; border-radius: 6px; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* The hamburger, drawn as the design's bordered 48px button. */
.site-header .wp-block-navigation__responsive-container-open {
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border: 2px solid currentColor;
	border-radius: 6px;
}
/* Core only collapses to the hamburger below 600px, but five links + the
   wordmark + Subscribe need ~1000px. Extend the hamburger up to 1024px and drop
   the header Subscribe link, as the mobile comp does (the footer form stays). */
@media (max-width: 1024px) {
	.site-header__subscribe { display: none; }
	.site-header .wp-block-navigation__responsive-container-open { display: flex; }
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
}
/* Overlay menu. Never put transform/filter/backdrop-filter on .site-header or
   its ancestors: they become the containing block for the overlay's
   position:fixed and trap the "full-screen" menu inside the header bar. */
.site-header .wp-block-navigation__responsive-container.is-menu-open { padding: 24px var(--wp--style--root--padding-right) 40px var(--wp--style--root--padding-left); }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 48px;
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
}
.site-header .wp-block-navigation__responsive-container-close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }

/* ── Footer (bedrock) ── */
.site-footer { display: flex; flex-direction: column; font-size: 16px; }
.site-footer a { color: inherit; }
.site-footer__muted { margin: 0; color: var(--em-muted); line-height: 1.55; }
.site-footer__subscribe { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding-top: 80px; padding-bottom: 72px; }
.site-footer__pitch { display: flex; flex-direction: column; gap: 12px; }
.site-footer__heading { margin: 0; font-size: clamp(2.75rem, 2.2rem + 2.1vw, 4.5rem); font-weight: 900; line-height: 0.92; }
.site-footer__pitch .site-footer__muted { font-size: 18px; }
.site-footer__links { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--em-rule); }
.site-footer__about { display: flex; flex-direction: column; gap: 10px; }
.site-footer__about .site-footer__muted { max-width: 360px; }
.site-footer__title { margin: 0; font-size: 28px; }
.site-footer__nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer__nav-title { margin: 0; font-weight: 700; }
.site-footer__nav .wp-block-navigation { gap: 10px; }
.site-footer__nav .wp-block-navigation-item__content { color: var(--em-muted); text-decoration: underline; }
.site-footer__legal { margin: 0; padding-top: 20px; padding-bottom: 36px; font-size: 14px; color: var(--em-muted); }

/* ── Home: hero ── */
.home-hero { padding-top: 80px; padding-bottom: 88px; }
.home-hero__intro { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: end; }
.home-hero__intro > * { margin: 0; }
.home-hero__title { line-height: 0.9; }
.home-hero__lede { font-size: 20px; line-height: 1.55; color: var(--em-muted); }
.home-hero .em-altitude-nav { margin-top: 48px; }

/* ── Home: current conditions strip ── */
.home-conditions { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; padding-top: 48px; padding-bottom: 48px; }
.home-conditions__intro { display: flex; flex-direction: column; gap: 8px; }
.home-conditions__intro > * { margin: 0; }
.home-conditions__intro h2 { font-size: 48px; line-height: 0.95; }
.home-conditions__tagline { font-size: 16px; line-height: 1.5; font-style: italic; color: var(--em-muted); }
.home-conditions__more { margin-top: 6px; font-size: 16px; font-weight: 700; }
.home-conditions .wp-block-query { align-self: center; }
.home-conditions .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.home-conditions .wp-block-post { position: relative; display: flex; flex-direction: column; gap: 8px; }
.home-conditions .wp-block-post > * { margin: 0; }
.home-conditions .wp-block-post-title { font-family: var(--wp--preset--font-family--body); font-size: 20px; font-weight: 700; line-height: 1.25; }
.home-conditions .wp-block-post-title a { text-decoration: none; }
.home-conditions .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.home-conditions .wp-block-post:hover .wp-block-post-title a { text-decoration: underline; }
.home-conditions .wp-block-post-excerpt__excerpt { margin: 0; font-size: 16px; line-height: 1.5; color: var(--em-muted); }

/* ── Home: the skyline between the delivery team and the code ── */
.skyline { height: 140px; margin-block: 0; background: var(--wp--preset--color--delivery) url(assets/img/skyline.svg) repeat-x left bottom / auto 140px; }

/* ── Essay ── */
.essay-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 96px; align-items: end; padding-top: 72px; padding-bottom: 88px; }
.essay-hero__text { display: flex; flex-direction: column; gap: 28px; }
.essay-hero__text > * { margin: 0; }
.essay-hero__title { line-height: 0.9; }
.essay-hero__standfirst p { margin: 0; max-width: 820px; font-size: 24px; line-height: 1.5; color: var(--em-muted); }
.essay-body { margin-block: 0; }
.essay-body > :not(.alignfull) { max-width: var(--wp--style--global--content-size); }
.essay-coda { padding-bottom: 88px; }
.author-box { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 36px 0; border-top: 1px solid var(--em-rule); border-bottom: 1px solid var(--em-rule); }
.author-box > * { margin: 0; }
.author-box__avatar img { display: block; width: 120px; height: 120px; border-radius: 50%; }
.author-box__text { display: flex; flex-direction: column; gap: 6px; }
.author-box__text > * { margin: 0; }
.author-box__name { font-size: 20px; font-weight: 700; }
.author-box__bio { max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--em-muted); }
.author-box__more { font-size: 16px; font-weight: 700; }
.essay-coda .em-where-next { padding-top: 56px; }

/* ── Altitude archive ── */
.altitude-top { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 96px; align-items: end; padding-top: 64px; padding-bottom: 72px; }
.altitude-body { padding-top: 24px; padding-bottom: 104px; }

/* ── Topic archive ── */
.topic-top { padding-top: 64px; padding-bottom: 64px; }
.topic-top__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; }
.topic-top__heading { display: flex; flex-direction: column; gap: 14px; }
.topic-top__heading > * { margin: 0; }
.topic-top__kicker { font-size: 17px; font-weight: 700; }
.topic-top .wp-block-query-title { line-height: 0.85; }
.topic-top__description p { margin: 0; font-size: 21px; line-height: 1.6; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 44px 0 0; list-style: none; }
.topic-chips li { margin: 0; }
.topic-chips a { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--wp--preset--color--night); border-radius: 999px; font-size: 16px; font-weight: 700; text-decoration: none; }
.topic-chips a:hover { text-decoration: underline; }
.topic-chips .current-cat a { background-color: var(--wp--preset--color--night); color: var(--wp--preset--color--frost); }

/* ── Conditions archive (night) ── */
.conditions { padding-top: 72px; padding-bottom: 88px; }
.conditions__top { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; padding-bottom: 56px; }
.conditions__top > * { margin: 0; }
.conditions__top h1 { line-height: 0.85; }
.conditions__intro { font-size: 21px; line-height: 1.6; }
.conditions__list .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.em-condition { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 48px; padding: 40px 0; border-top: 1px solid var(--em-rule); scroll-margin-top: 24px; }
.em-condition > *, .em-condition__body > * { margin: 0; }
.em-condition__date { padding-top: 6px; font-size: 16px; color: var(--em-muted); }
.em-condition__body { display: flex; flex-direction: column; gap: 14px; }
.em-condition__title { font-family: var(--wp--preset--font-family--body); font-size: 32px; font-weight: 700; line-height: 1.2; }
.em-condition__text p { margin: 0; font-size: 19px; line-height: 1.65; }
.em-condition__text p + p { margin-top: 1em; }
.em-condition__outlook { padding-top: 6px; font-size: 17px; line-height: 1.5; font-style: italic; color: var(--wp--preset--color--window-light); }
.em-condition__outlook:empty { display: none; }
.conditions .wp-block-query-pagination { margin-top: 40px; font-weight: 700; }

/* ── Essay lists (index, search, author and date archives) ── */
.listing { padding-top: 64px; padding-bottom: 88px; }
.listing__top { display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; }
.listing__top > * { margin: 0; }
.listing__list .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.listing__list .wp-block-post { padding: 32px 0; border-top: 1.5px solid currentColor; }
.listing .wp-block-query-pagination { margin-top: 40px; font-weight: 700; }

/* ── Search form (404 + search results) ── */
.em-search { max-width: 640px; }
.em-search .wp-block-search__label { margin-bottom: 10px; font-size: 16px; font-weight: 700; }
.em-search .wp-block-search__inside-wrapper { gap: 12px; }
.em-search .wp-block-search__input { height: 58px; box-sizing: border-box; padding: 0 18px; border: 2px solid var(--wp--preset--color--night); border-radius: 6px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--night); font-family: var(--wp--preset--font-family--body); font-size: 17px; }
.em-search .wp-block-search__button { height: 58px; margin: 0; padding: 0 28px; border: 0; border-radius: 6px; background: var(--wp--preset--color--night); color: var(--wp--preset--color--frost); font-family: var(--wp--preset--font-family--body); font-size: 17px; font-weight: 700; }

/* ── 404 ── */
.lost { display: flex; flex-direction: column; gap: 28px; max-width: 1000px; padding-top: 96px; padding-bottom: 96px; }
.lost > * { margin: 0; }
.lost h1 { line-height: 0.86; }
.lost__lede { max-width: 760px; font-size: 24px; line-height: 1.5; }
.lost__pick { margin-top: 20px; font-size: 17px; font-weight: 700; }

/* ── Plain pages ── */
.page-body { padding-top: 72px; padding-bottom: 88px; }
.page-body .wp-block-post-title { margin-bottom: 40px; line-height: 0.9; }
.page-body .wp-block-post-content { font-size: var(--wp--preset--font-size--large); line-height: 1.7; }

/* ── About ── */
.about-intro { display: flex; flex-direction: column; gap: 26px; padding-top: 72px; padding-bottom: 96px; }
.about-intro > * { margin: 0; max-width: 1000px; }
.about-intro h1 { line-height: 0.88; }
.about-intro__lede { font-size: 24px; line-height: 1.5; }
.about-intro__body { font-size: 20px; line-height: 1.7; color: var(--em-muted); }
.about-intro__note { font-size: 17px; line-height: 1.6; font-style: italic; color: var(--em-muted); }
.about-explainer { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; padding-top: 88px; padding-bottom: 96px; --em-muted: var(--wp--custom--muted--stratosphere); }
.about-explainer__column { display: flex; flex-direction: column; gap: 20px; }
.about-explainer__column > * { margin: 0; }
.about-explainer h2 { font-size: var(--wp--preset--font-size--display-s); line-height: 0.95; }
.about-explainer p { font-size: 19px; line-height: 1.65; }
.about-altitudes { display: flex; flex-direction: column; gap: 4px; }
.about-altitudes > * { margin: 0; }
.about-altitude { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 32px; }
.about-altitude > *, .about-altitude__text > * { margin: 0; }
.about-explainer .about-altitude__label { font-family: var(--wp--preset--font-family--display); font-size: 44px; font-weight: 800; line-height: 0.95; white-space: nowrap; }
.about-altitude__text { display: flex; flex-direction: column; gap: 4px; }
.about-explainer .about-altitude__title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.about-explainer .about-altitude__audience { font-size: 17px; line-height: 1.5; color: var(--em-muted); }
.about-gauges { display: flex; flex-direction: column; gap: 26px; padding: 28px; border-radius: 8px; }
.about-gauges > * { margin: 0; }
.about-gauge { display: flex; gap: 16px; align-items: flex-start; }
.about-gauge > * { margin: 0; }
.about-gauge .em-gauge { margin-top: 0; }
.about-gauge__text { display: flex; flex-direction: column; gap: 4px; }
.about-gauge__text > * { margin: 0; }
.about-explainer .about-gauge__title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.about-explainer .about-gauge__desc { font-size: 16px; line-height: 1.5; color: var(--em-muted); }

/* ── Phones and small tablets (the 390px comps) ── */
@media (max-width: 781px) {
	.site-header { padding-top: 16px; padding-bottom: 16px; }
	.site-header__title { font-size: 26px; }

	.site-footer__subscribe { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 48px; }
	.site-footer__links { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
	.site-footer__about { grid-column: 1 / -1; }

	.home-hero { padding-top: 12px; padding-bottom: 40px; }
	.home-hero__intro { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
	.home-hero__lede { font-size: 17px; }
	.home-hero .em-altitude-nav { margin-top: 22px; }

	.home-conditions { display: flex; flex-direction: column; gap: 6px; padding-top: 32px; padding-bottom: 24px; }
	.home-conditions__intro { margin-bottom: 8px; }
	.home-conditions__intro h2 { font-size: 36px; }
	.home-conditions .wp-block-post-template { display: flex; flex-direction: column; gap: 0; }
	.home-conditions .wp-block-post { gap: 4px; padding: 14px 0; border-top: 1px solid var(--em-rule); }
	.home-conditions .wp-block-post-title { font-size: 17px; }
	.home-conditions .wp-block-post-excerpt__excerpt { font-size: 15px; }

	.skyline { height: 90px; background-image: url(assets/img/skyline-mobile.svg); background-size: auto 90px; }

	.essay-hero { display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding-top: 12px; padding-bottom: 36px; }
	.essay-hero__text { gap: 18px; }
	.essay-hero__standfirst p { font-size: 19px; }
	.essay-coda { padding-bottom: 56px; }
	.author-box { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; }
	.author-box__avatar img { width: 72px; height: 72px; }
	.author-box__more { grid-column: 1 / -1; }
	.essay-coda .em-where-next { padding-top: 40px; }

	.altitude-top { display: flex; flex-direction: column; align-items: stretch; gap: 36px; padding-top: 24px; padding-bottom: 40px; }
	.altitude-body { padding-bottom: 64px; }

	.topic-top { padding-top: 24px; padding-bottom: 40px; }
	.topic-top__intro { display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
	.topic-top__description p { font-size: 18px; }
	.topic-chips { padding-top: 28px; gap: 8px; }

	.conditions { padding-top: 24px; padding-bottom: 56px; }
	.conditions__top { display: flex; flex-direction: column; gap: 20px; padding-bottom: 32px; }
	.conditions__intro { font-size: 18px; }
	.em-condition { display: flex; flex-direction: column; gap: 12px; padding: 28px 0; }
	.em-condition__date, .em-condition__outlook { padding-top: 0; }
	.em-condition__title { font-size: 24px; }
	.em-condition__text p { font-size: 17px; }

	.listing { padding-top: 24px; padding-bottom: 56px; }
	.em-search .wp-block-search__button { padding: 0 20px; }

	.lost { padding-top: 32px; padding-bottom: 56px; gap: 22px; }
	.lost__lede { font-size: 19px; }

	.page-body { padding-top: 24px; padding-bottom: 56px; }

	.about-intro { padding-top: 24px; padding-bottom: 56px; gap: 20px; }
	.about-intro__lede { font-size: 20px; }
	.about-intro__body { font-size: 18px; }
	.about-explainer { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 48px; padding-bottom: 56px; }
	.about-explainer p { font-size: 17px; }
	.about-altitude { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; }
	.about-explainer .about-altitude__label { font-size: 36px; }
}

/* ── Wide screens: the home page is full-browser (no max width). Interior
   pages cap their content at the theme's wide size so lines stay readable. ── */
@media (min-width: 1600px) {
	.essay-hero,
	.altitude-top,
	.altitude-body,
	.topic-top,
	.conditions,
	.listing {
		padding-left: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
		padding-right: max(var(--wp--style--root--padding-right), calc((100% - var(--wp--style--global--wide-size)) / 2));
	}
}