/*
 * Public corrective design system (Butler Brand & Co. Public Corrective
 * Design Handoff). Shared, source-controlled primitives for the public
 * site — header, logo, page heroes, buttons, forms, lists, dividers, and a
 * restrained (not tiled) dot-cluster accent. Loaded on every public page.
 *
 * --bbc-* custom properties alias the existing --wp--preset--color--app-*
 * tokens registered in theme.json (single source of truth for hex values —
 * this file never hardcodes a color) so the component rules below can
 * match the handoff's own reference CSS closely.
 *
 * Scope note: these are Phase 1 "shared system" primitives per the
 * handoff — built once, loaded everywhere, since header/footer/button/
 * form consistency is the whole point of this pass. Which *pages* actually
 * adopt the new hero/layout treatment is a separate, deliberately staged
 * decision — see DECISIONS.md.
 */

:root {
	--bbc-navy: var(--wp--preset--color--app-navy);
	--bbc-navy-secondary: var(--wp--preset--color--app-navy-light);
	--bbc-charcoal: var(--wp--preset--color--app-charcoal);
	--bbc-brass: var(--wp--preset--color--app-brass);
	--bbc-brass-soft: var(--wp--preset--color--app-brass-soft);
	--bbc-cream: var(--wp--preset--color--app-cream);
	--bbc-tan: var(--wp--preset--color--app-tan);
	--bbc-ivory: var(--wp--preset--color--app-ivory);
	--bbc-stone: var(--wp--preset--color--app-stone);
	--bbc-white: #FFFFFF;

	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-float: 12px;
	--content-max: 1240px;
	--reading-max: 740px;
	--space-page-x: clamp(20px, 4vw, 56px);
	--space-section: clamp(52px, 7vw, 104px);
	--border-subtle: 1px solid rgba(36, 54, 74, .14);
	--shadow-subtle: 0 1px 2px rgba(36, 54, 74, .04);
	--shadow-float: 0 10px 28px -4px rgba(31, 37, 42, .16);
}

/* ---- Layout helpers ------------------------------------------------- */

.bbc-container {
	width: min(calc(100% - (var(--space-page-x) * 2)), var(--content-max));
	margin-inline: auto;
}

.bbc-reading {
	max-width: var(--reading-max);
}

/* ---- Logo lockup ------------------------------------------------------ */

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.site-logo__primary {
	font-family: var(--font-display, var(--wp--preset--font-family--display));
	color: var(--bbc-navy);
	font-size: 27px;
	line-height: 1;
}

.site-logo__divider {
	width: 1px;
	height: 28px;
	background: rgba(36, 54, 74, .36);
}

.site-logo__secondary {
	color: var(--bbc-brass);
	font: 700 10px/1.25 var(--font-body, var(--wp--preset--font-family--body));
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Portal link in the header, styled as a small outlined button per the
   handoff ("Portal may be a small outlined button") — targets the <a>
   [bbco_portal_link] renders (inc/portal.php), scoped to this wrapper so
   it doesn't touch outline links elsewhere. */
.site-header-portal-link a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 16px;
	border: 1px solid rgba(36, 54, 74, .55);
	border-radius: var(--radius-md);
	color: var(--bbc-navy);
	font-family: var(--font-body, var(--wp--preset--font-family--body));
	font-size: 0.8125rem;
	font-weight: 650;
	text-decoration: none;
}

.site-header-portal-link a:hover {
	background: rgba(36, 54, 74, .05);
}

/* ---- Mobile nav overlay ------------------------------------------------
   WordPress core Navigation block's small-viewport menu (the hamburger
   toggle) renders with zero theme styling out of the box — plain white
   panel, black text. Everything below is additive on top of core's own
   classes, none of it changes layout/behavior, only the palette. */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	background: var(--bbc-cream);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	color: var(--bbc-navy);
	font-family: var(--font-display, var(--wp--preset--font-family--display));
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--bbc-brass);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--bbc-navy);
}

/* ---- Page hero types --------------------------------------------------- */

.page-hero {
	position: relative;
	overflow: hidden;
}

.page-hero--brand {
	/* 24.6vw matches the Figma reference frame's own ratio (354px tall at
	   1440px wide = 24.58vw) exactly, so the crop stays proportional to
	   Figma at every width instead of drifting. The previous 38vw wasn't
	   derived from that reference and gave a much wider/shorter band on
	   large monitors than Figma's — the resulting steeper crop was
	   clipping the peak tips that Figma shows with clearance above them.
	   Floor keeps mobile/narrow screens from getting uncomfortably short;
	   ceiling only matters on very large monitors, and only ever adds
	   extra sky margin there, never more crop. */
	min-height: clamp(340px, 24.6vw, 700px);
	background-color: var(--bbc-navy);
	background-image: url(../images/page-hero-band.webp);
	background-repeat: no-repeat;
	/* Same navy/gold contour composition as the homepage hero's mountain
	   art, scaled down to a page-header band. Bottom-anchored so the gold
	   ridge line — the only real visual interest in the image, the rest is
	   flat navy sky — stays visible in a band this short instead of
	   scrolling out of frame above it. */
	background-position: center bottom;
	background-size: cover;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.page-hero--brand h1 {
	color: #fff;
}

.page-hero--editorial {
	background: var(--bbc-cream);
	color: var(--bbc-charcoal);
	padding-block: clamp(72px, 9vw, 118px);
}

.page-hero--editorial h1 {
	color: var(--bbc-navy);
}

/* ---- Homepage hero: full-bleed mountain photograph ------------------------
 *
 * Replaces the earlier layered-SVG mountain composition (kept below in git
 * history and as assets/images/mountain-hero.svg for reference) with a
 * single full-bleed photographic mountain range, approved via a Figma
 * exploration pass — see DECISIONS.md. The image's own top and bottom edges
 * already fade toward the site's cream tone, so no separate gradient/mask
 * layer is needed to blend it into the page above or the section below.
 *
 * Content sits directly on top of the image now rather than in a reserved
 * cream band above a bottom-anchored art layer, which is why the old
 * --mountain-h variable and its content-padding calc() are gone — there's
 * no separate "art height" that needs to stay in sync with the content's
 * padding anymore, since the art fills the whole section.
 */
.butler-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--app-tan);
	color: var(--bbc-navy);
	/* vw-based, not vh-based: a vh clamp ties hero height to monitor
	   height, which has nothing to do with how much of a 3:1-aspect image
	   can show without cropping. On a tall 32" display 95vh could reach
	   1500px regardless of width, making the hero far taller than its own
	   width needs — the resulting container aspect ratio drops well below
	   the image's 3:1, forcing background-size to crop the sides even on
	   a wide monitor. Sizing off vw instead ties height to the one
	   dimension that actually determines how much of the image's width
	   fits.
	   Coefficient matched directly to the Figma reference frames rather
	   than derived from the image's raw aspect ratio: Figma's Desktop
	   1440 hero is 760px tall (~53vw), Ultrawide 1920 is 1070px (~56vw) —
	   a first attempt at deriving this from the image math alone (30vw)
	   came out far shorter than the actual approved design and cropped
	   away sky that Figma clearly leaves room for the text in. 54vw lands
	   within ~20px of both reference points; the 560px floor matches
	   Figma's Mobile 390 frame exactly. Comfortably keeps the hero taller
	   than one-third of its width up to very large monitors, which is the
	   point past which cover has to crop into the sky/fade instead of
	   just the sides — so cropping stays confined to the sides (the
	   "shrink the tab" behavior) right up to genuinely huge ultrawide
	   displays, where the 1150px ceiling lets width take over instead so
	   the full range still shows there too. */
	min-height: clamp(560px, 54vw, 1150px);
}

.butler-hero__content {
	position: relative;
	z-index: 5;
	width: min(760px, calc(100% - 48px));
	margin-inline: auto;
	/* Pulled up toward the top of the image on purpose: the mountain's sky
	   band sits at the top of the crop, and that's the one part of the
	   photo light enough for navy text to read clearly without a backing
	   plate. A small top offset instead of the old symmetric padding, with
	   the bottom kept generous so the CTA row still has room to breathe
	   before the section ends. */
	padding-block: clamp(8px, 1.5vw, 24px) clamp(64px, 8vw, 96px);
	text-align: center;
}

.butler-hero__content h1 {
	color: var(--bbc-navy);
}

.butler-hero__art {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* WordPress's core "constrained" layout applies max-width + auto
	   margins to every direct child of a constrained group by default
	   (this div is raw wp:html, not a block core recognizes for
	   alignfull treatment) — without this override the art gets capped
	   at the 1200px content width and centered instead of running edge
	   to edge. inset:0 alone isn't enough; max-width/margin have to be
	   explicitly reset on top of it. */
	max-width: none;
	margin: 0;
	background-image: url(../images/mountain-hero-v3.webp);
	background-repeat: no-repeat;
	/* Anchored to the bottom: the mountain's fade into the tan section
	   background sits at the bottom edge and has to stay visible; any crop
	   cover introduces should come off the top (sky) or sides, never here. */
	background-position: center bottom;
	/* Back to cover, not auto 100%: on a wide monitor auto 100% left a
	   visible tan gap down one side instead of ever cropping — worse than
	   the crop it was trying to avoid, since "always fills the screen" has
	   been the more consistent requirement across every round of feedback
	   here. cover guarantees the section is always fully covered, no gap,
	   ever. The vw-based min-height above already does the real work of
	   keeping ultrawide close to full-range: it keeps the hero's own
	   aspect ratio close to the image's 3:1, so cover only needs to crop
	   a little (usually the sides, sometimes a sliver top/bottom on the
	   very widest monitors) instead of the deep crop a vh-driven height
	   used to force. */
	background-size: cover;
	pointer-events: none;
}

/* The photo's rock texture varies in density across the image, so unlike
   the old flat cream background, an outline-style button's border/text
   alone isn't reliably legible everywhere it might land. A soft ivory
   backing plate behind the CTA pair guarantees contrast at every
   breakpoint without changing the button styles themselves. */
.hero-cta-row {
	background: rgba(250, 248, 243, .85);
	padding: 18px;
	border-radius: var(--wp--custom--radius--sm, 2px);
}

@media (max-width: 767px) {
	/* No mobile-specific min-height override anymore — the base rule's
	   vw-based clamp already lands at its 560px floor well before mobile
	   widths (30vw crosses 560px around 1867px viewport width), so it
	   naturally carries through continuously instead of jumping to a
	   separate vh-based value at this breakpoint. */
	.butler-hero__content {
		width: calc(100% - 40px);
		padding-block: 48px;
	}
}

/* ---- Floating box sections (homepage, below the hero) --------------------
 *
 * Approved via Figma exploration: the page's own background is app-tan
 * (matching the hero photo's sky), and each homepage section below the
 * hero is a distinct ivory (or navy, for the closing CTA) card floating
 * on that tan field with a soft shadow, rather than a full-bleed color
 * band. The outer .section element keeps its existing tan background and
 * padding-block (base.css) — that padding IS the visible tan gap above
 * and below each card, so no separate gap/spacing system was needed, just
 * a card wrapped around what used to be the section's direct content.
 */
.floating-box {
	max-width: var(--content-max);
	margin-inline: auto;
	background: var(--bbc-ivory);
	border-radius: var(--radius-float);
	box-shadow: var(--shadow-float);
	padding: 80px 64px;
}

.floating-box--dark {
	background: var(--bbc-navy);
}

/*
 * theme.json sets every heading to navy, which made the h2 on the navy box
 * invisible. Force light text for everything inside the dark card, and give
 * the button a gold fill so it doesn't blend into the navy either.
 */
.floating-box--dark :is(h1, h2, h3, h4, p, li) {
	color: var(--bbc-cream);
}

.floating-box--dark .wp-block-button__link {
	background: var(--bbc-brass);
	color: var(--bbc-navy);
}

.floating-box--dark .wp-block-button__link:hover {
	background: var(--bbc-cream);
	color: var(--bbc-navy);
}

@media (max-width: 900px) {
	.floating-box {
		padding: 56px 40px;
		border-radius: 10px;
	}
}

@media (max-width: 600px) {
	.floating-box {
		padding: 32px 24px;
	}
}

/* ---- Dividers ----------------------------------------------------------- */

.section-divider {
	width: 80px;
	height: 1px;
	background: var(--bbc-brass);
	margin-block: 24px;
	border: none;
}

/* ---- Callout ------------------------------------------------------------- */

/* A single restrained decorative callout — the handoff's "management-
   philosophy callout" use case. Not a full pattern system, just a quiet
   box: cream fill, a brass left rule, italic quote-style text. */
.callout {
	background: var(--bbc-cream);
	border-left: 3px solid var(--bbc-brass);
	padding: 1.5rem 1.75rem;
	margin-block: var(--space-section);
}

.callout p {
	font-family: var(--font-display, var(--wp--preset--font-family--display));
	font-size: clamp(20px, 2.4vw, 26px);
	font-style: italic;
	color: var(--bbc-navy);
	line-height: 1.4;
	margin: 0;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn-primary,
.btn-secondary {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border-radius: var(--radius-md);
	font-family: var(--font-body, var(--wp--preset--font-family--body));
	font-weight: 650;
	text-decoration: none;
}

.btn-primary {
	background: var(--bbc-navy);
	color: #fff;
	border: 1px solid var(--bbc-navy);
}

.btn-primary:hover {
	background: var(--bbc-navy-secondary);
	border-color: var(--bbc-navy-secondary);
}

.btn-secondary {
	background: transparent;
	color: var(--bbc-navy);
	border: 1px solid rgba(36, 54, 74, .55);
}

.btn-secondary:hover {
	background: rgba(36, 54, 74, .05);
}

.action-link {
	color: var(--bbc-navy);
	text-decoration: none;
	font-weight: 650;
}

.action-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--bbc-brass);
	text-underline-offset: 4px;
}

/* Deliberately NOT overriding the generic .wp-block-button__link/
   .wp-element-button classes here — those are used sitewide, including
   every portal form's Save/Submit button (template-forms/*.php), and this
   stylesheet loads on every page. theme.json's existing core/button style
   (navy background, ivory text) already gives every button a consistent,
   non-default look; the portal is explicitly out of scope this pass. New
   public work should reach for .btn-primary/.btn-secondary explicitly
   rather than this file silently reskinning a class the portal also
   depends on. */

/* ---- Lists --------------------------------------------------------------- */

.list-editorial,
.list-check {
	list-style: none;
	padding-left: 0;
}

.list-editorial li,
.list-check li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 11px;
}

.list-editorial li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--bbc-brass);
	font-weight: 700;
}

.list-check li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--bbc-brass);
	font-weight: 700;
	font-size: .9em;
}

/* ---- Forms ---------------------------------------------------------------- */

/* A new class, deliberately not layered onto the existing .form-field
   input/textarea/select selector from base.css — that selector is shared
   with every portal form (template-forms/*.php), and this stylesheet
   loads on every page. Public forms adopt .form-control by adding the
   class explicitly (Contact/Work With Us, in the Phase 3 rollout), so the
   portal's own form styling is untouched. */
.form-control {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	background: var(--bbc-white);
	color: var(--bbc-charcoal);
	border: 1px solid rgba(36, 54, 74, .22);
	border-radius: var(--radius-md);
	font-family: var(--font-body, var(--wp--preset--font-family--body));
	font-size: 15px;
}

textarea.form-control {
	min-height: 132px;
	resize: vertical;
}

.form-control:focus {
	outline: none;
	border-color: var(--bbc-navy);
	box-shadow: 0 0 0 3px rgba(36, 54, 74, .10);
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.form-group--full {
	grid-column: 1 / -1;
}

/* ---- Public form fields (Contact, Work With Us) ---------------------------
 *
 * .form-control above was written for this but never actually applied in
 * contact-form.php / work-with-us.php — scoping under .public-form (added
 * to the <form> tag itself in both shortcode handlers) instead of relying
 * on a per-input class that has to be remembered on every field. Matches
 * the Figma form-field system: uppercase brass labels over ivory bordered
 * inputs. Scoped so it can't touch the portal's shared .form-field styling
 * in base.css (template-forms/*.php still use the plain version).
 */
.public-form h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--bbc-navy);
	margin-block: 2.5rem 1rem;
}

.public-form h2:first-of-type {
	margin-top: 0;
}

.public-form .form-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--bbc-brass);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.5rem;
}

.public-form .form-field input,
.public-form .form-field select,
.public-form .form-field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	background: var(--bbc-ivory);
	border: 1px solid #ccc0a3;
	border-radius: var(--radius-sm);
	font: inherit;
	color: var(--bbc-charcoal);
}

.public-form .form-field input:focus,
.public-form .form-field select:focus,
.public-form .form-field textarea:focus {
	outline: none;
	border-color: var(--bbc-navy);
	box-shadow: 0 0 0 3px rgba(36, 54, 74, .10);
}

.public-form .form-hint {
	margin-top: -0.5rem;
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
	color: var(--bbc-charcoal);
	opacity: .75;
}

.public-form .form-field-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.public-form .checkbox-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--bbc-brass);
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--bbc-navy);
	cursor: pointer;
}

.public-form .checkbox-option input {
	width: auto;
	margin: 0;
}

.public-form button[type="submit"] {
	margin-top: 1rem;
}

.form-section + .form-section {
	margin-top: var(--space-section);
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
	position: relative;
	overflow: hidden;
	/* Solid navy — same token as the hero, page heroes and the dark CTA card,
	   so the footer matches the rest of the site. (The desert-valley image
	   that used to sit here was removed by request.) */
	background-color: var(--bbc-navy);
}

/* Default buttons are navy, which disappears on the navy footer. */
.site-footer .wp-block-button__link {
	background: var(--bbc-brass);
	color: var(--bbc-navy);
}

.site-footer .wp-block-button__link:hover {
	background: var(--bbc-cream);
	color: var(--bbc-navy);
}

/* The "constrained" layout group wrapping the logo/address/phone was
   centering itself (max-width + margin-inline:auto) inside the space the
   flex row's justify-content:space-between allotted it, instead of
   hugging the row's own start edge — pushing the site title well into
   the footer instead of flush left. */
.footer-brand {
	max-width: none;
	margin-inline: 0;
}

.footer-brand a[rel="home"] {
	color: var(--bbc-brass);
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 767px) {
	.form-grid { grid-template-columns: 1fr; }
	.form-group--full { grid-column: auto; }
	.page-hero--brand { min-height: 340px; }
}