/*
Theme Name:  Bayswater Storage
Template:    kadence
Description: Kadence child theme for Bayswater Storage — 5/899 Mountain Highway, Bayswater VIC 3153. Brand system per 10-analysis/branding/BRAND-PLAN.md: charcoal #24384A, amber #F0A500, paper #F4F3EF, Archivo Black display. Tokens in theme.json; block patterns in patterns/.
Version:     0.3.7
Author:      Reforged
Requires PHP: 7.4
Text Domain: bayswater
*/

/* Tokens come from theme.json (editor) and the Kadence global palette (set by
   scripts/seed.sh). Only rules the token systems cannot express live here. */

/* Display face — self-hosted, OFL. The brand's SMALL register runs on this;
   support type deliberately stays the light system stack (colour shouts, type doesn't). */
@font-face {
	font-family: 'Archivo Black';
	src: url('assets/fonts/archivo-black.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

h1, h2, h3,
.site-branding .site-title {
	font-family: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* Logo carries the brand — suppress the duplicate text title beside it.
   Scoped to .has-logo-image so a logo-less install still shows the name. */
.site-branding .brand.has-logo-image .site-title-wrap {
	display: none;
}

.site-branding img.custom-logo {
	max-height: 56px;
	width: auto;
}

body {
	background-color: var(--global-palette8, #F4F3EF);
}

/* The white seam above and below every full-bleed band (20 Aug review, P0).
   Kadence's boxed page style paints the <article> as a white #FFFFFF card on
   the paper #F4F3EF body and pads the content wrap 24px top and bottom. The
   hero, trust strip, security band and closing CTA are all alignfull, so each
   one sat between two white stripes and read as a rendering fault.

   Fix the two properties that cause it and nothing else. Switching Kadence to
   page_content_style=unboxed was tried first and is the WRONG lever: unboxed
   also frees Kadence's 100vw alignwide maths, which blew the 1160px grid out
   to 1433px on desktop, pushed the hero enquiry form off-screen, and needed
   three compounding overrides that each broke another breakpoint. Boxed mode's
   width arithmetic is correct at every viewport — it was only ever the colour
   and the vertical padding that were wrong. */
article.entry.content-bg {
	background: transparent;
}

.entry-content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

/* Kadence also puts a 32px vertical margin on .content-area. Behind a white
   card that was invisible; with the card gone it leaves a paper gap between
   the header and a full-bleed hero, which still reads as a seam. Close it
   ONLY where the page actually opens or closes with a full-bleed band —
   inner pages that start with a paragraph keep their breathing room. */
.content-area:has(> * > * > * .entry-content > .alignfull:first-child) {
	margin-top: 0;
}

.content-area:has(> * > * > * .entry-content > .alignfull:last-child) {
	margin-bottom: 0;
}

/* Palette utility classes for the theme.json slugs. Kadence replaces the
   theme.json palette with its own theme-palette-N slugs at render, so WP never
   emits CSS for has-accent-*, has-charcoal-* etc. — patterns using them showed
   transparent backgrounds and inherited text colour (the invisible final-CTA
   band, 16 Aug review). Emitted here instead, mapped onto the Kadence global
   palette vars seeded by scripts/seed.sh. Fallback hexes MUST match theme.json
   — verify.sh checks the pairing. !important mirrors core's own preset rules. */
.has-accent-color { color: var(--global-palette1, #F0A500) !important; }
.has-accent-background-color { background-color: var(--global-palette1, #F0A500) !important; }
.has-accent-dark-color { color: var(--global-palette2, #C68A00) !important; }
.has-accent-dark-background-color { background-color: var(--global-palette2, #C68A00) !important; }
.has-charcoal-color { color: var(--global-palette3, #24384A) !important; }
.has-charcoal-background-color { background-color: var(--global-palette3, #24384A) !important; }
.has-ink-color { color: var(--global-palette4, #1D2125) !important; }
.has-ink-background-color { background-color: var(--global-palette4, #1D2125) !important; }
.has-muted-color { color: var(--global-palette5, #5C6B7A) !important; }
.has-muted-background-color { background-color: var(--global-palette5, #5C6B7A) !important; }
.has-border-color { color: var(--global-palette6, #E0DED6) !important; }
.has-border-background-color { background-color: var(--global-palette6, #E0DED6) !important; }
.has-surface-color { color: var(--global-palette7, #EBEAE3) !important; }
.has-surface-background-color { background-color: var(--global-palette7, #EBEAE3) !important; }
.has-surface-light-color { color: var(--global-palette8, #F4F3EF) !important; }
.has-surface-light-background-color { background-color: var(--global-palette8, #F4F3EF) !important; }
.has-white-color { color: var(--global-palette9, #FFFFFF) !important; }
.has-white-background-color { background-color: var(--global-palette9, #FFFFFF) !important; }

/* Amber is the only accent. Buttons on amber always carry charcoal text —
   white on amber is 1.9:1 and banned (see CONTEXT.md / recut pack). */
.wp-block-button__link.has-accent-background-color {
	color: var(--global-palette3, #24384A) !important;
}

.wp-block-button__link.has-accent-background-color:hover {
	background-color: var(--global-palette2, #C68A00) !important;
	color: var(--global-palette3, #24384A) !important;
}

.wp-block-button__link:focus-visible,
.bsw-sticky-cta a:focus-visible,
.bsw-enquiry__submit:focus-visible {
	outline: 2px solid var(--global-palette3, #24384A);
	outline-offset: 2px;
}

/* Link colour — amber is a BACKGROUND signal, never body text. Kadence's
   link_color default is palette1 (Signal Amber), which put every inline link,
   the skip link and the reviews link at 1.87-2.08:1 on paper against a 4.5:1
   requirement (20 Aug contrast sweep). seed.sh now points link_color at
   palette3; the amber survives as the underline, which carries no contrast
   obligation of its own. Hover thickens the rule rather than changing the
   colour — a hover state has to pass contrast too. */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link),
.bsw-faq a {
	text-decoration-color: var(--global-palette1, #F0A500);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover,
.bsw-faq a:hover {
	text-decoration-thickness: 3px;
}

/* Star glyphs in the review cards. Amber-family gold on paper cannot reach
   4.5:1 at 14px in any palette token, so the rating is carried in real text
   ("5-star Google review") and the stars are aria-hidden decoration beside it.
   accent-dark rather than accent: 2.69:1 vs 1.87:1 — still decorative, but
   legible for the older end of the audience. No new hue. */
.bsw-stars {
	color: var(--global-palette2, #C68A00);
	letter-spacing: 0.05em;
}

/* Header CTA — "Get a price" menu item (class set in scripts/seed.sh) rendered
   as the amber button the spec always called for. Charcoal text, per the rule. */
li.bsw-nav-cta > a {
	background: var(--global-palette1, #F0A500);
	color: var(--global-palette3, #24384A) !important;
	border-radius: 6px;
	padding: 10px 16px !important;
	font-weight: 700;
}

li.bsw-nav-cta > a:hover {
	background: var(--global-palette2, #C68A00);
	color: var(--global-palette3, #24384A) !important;
}

/* Tagline — SAFE. SECURE. SIMPLE. (kept from V1, Karl 16 Aug 2026) */
.bsw-tagline {
	letter-spacing: 0.32em;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	color: var(--global-palette5, #5C6B7A);
}

/* Branded footer band — bayswater_footer_band() in functions.php */
.bsw-footer {
	background: var(--global-palette3, #24384A);
	color: var(--global-palette8, #F4F3EF);
	padding: 48px 24px 24px;
}

.bsw-footer__inner {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
}

@media (max-width: 767px) {
	.bsw-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
	.bsw-footer__brand {
		grid-column: 1 / -1;
	}
}

.bsw-footer__brand img {
	max-width: 262px;
	height: auto;
}

.bsw-footer__tagline {
	/* paper, not amber — amber is reserved for actions (Karl, 17 Aug) */
	color: var(--global-palette8, #F4F3EF);
	margin-top: 12px;
}

.bsw-footer a {
	color: var(--global-palette8, #F4F3EF);
	text-decoration: none;
}

.bsw-footer a:hover {
	color: var(--global-palette1, #F0A500);
}

.bsw-footer__col p {
	margin: 0 0 10px;
	line-height: 1.7;
}

.bsw-footer__col strong {
	/* paper, not amber — amber is reserved for actions (Karl, 17 Aug) */
	color: var(--global-palette8, #F4F3EF);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.bsw-footer__legal {
	max-width: 1160px;
	margin: 36px auto 0;
	padding-top: 16px;
	border-top: 1px solid rgba(240, 240, 232, 0.18);
	font-size: 0.82rem;
	/* was muted #5C6B7A on charcoal = 2.21:1 (20 Aug contrast sweep). Muted is
	   a paper-substrate token and passes there; on the charcoal footer it does
	   not. Paper held back to 0.75 reads as secondary at 6.87:1. */
	color: var(--global-palette8, #F4F3EF);
	opacity: 0.75;
}

/* Enquiry form — [bsw_enquiry_form] in bayswater-core */
.bsw-enquiry {
	max-width: 560px;
	background: var(--global-palette9, #fff);
	border: 1px solid var(--global-palette6, #E0DED6);
	border-radius: 8px;
	padding: 24px;
}

.bsw-enquiry label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--global-palette3, #24384A);
}

.bsw-enquiry input[type="text"],
.bsw-enquiry input[type="tel"],
.bsw-enquiry input[type="email"],
.bsw-enquiry select,
.bsw-enquiry textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--global-palette6, #E0DED6);
	border-radius: 6px;
	background: var(--global-palette8, #F4F3EF);
	font: inherit;
}

.bsw-enquiry .bsw-hp {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.bsw-enquiry__submit {
	background: var(--global-palette1, #F0A500);
	color: var(--global-palette3, #24384A);
	font-weight: 700;
	border: 0;
	border-radius: 6px;
	padding: 12px 26px;
	cursor: pointer;
}

.bsw-enquiry__submit:hover {
	background: var(--global-palette2, #C68A00);
}

.bsw-enquiry__hint {
	display: block;
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--global-palette5, #5C6B7A);
}

/* Hero form context — the same mini form grafted into the hero cover
   (Variant C, 17 Aug 2026). Fields stack vertically in a compact card. */
.bsw-hero-form .bsw-enquiry--mini {
	max-width: 420px;
	text-align: left;
}

.bsw-hero-form .bsw-enquiry--mini .bsw-enquiry__row {
	flex-direction: column;
	gap: 10px;
}

.bsw-hero-form .bsw-enquiry--mini .bsw-enquiry__row p {
	flex: 1 1 auto;
	width: 100%;
}

.bsw-hero-form .bsw-enquiry--mini .bsw-enquiry__submit {
	margin-top: 2px;
}

@media (max-width: 781px) {
	.bsw-hero-form .bsw-enquiry--mini {
		max-width: 100%;
	}
}

/* Mini enquiry form — the 3-field lead capture inside the charcoal closing
   band ([bsw_enquiry_form mini=1]). The page ends in a form, not a link. */
.bsw-enquiry--mini {
	max-width: 720px;
	margin: 0 auto;
	background: transparent;
	border: 0;
	padding: 8px 0 0;
	text-align: center;
}

.bsw-enquiry--mini .bsw-enquiry__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.bsw-enquiry--mini .bsw-enquiry__row p {
	margin: 0;
	flex: 1 1 180px;
}

.bsw-enquiry--mini .bsw-enquiry__row p:last-child {
	flex: 0 0 auto;
}

/* Visible labels — placeholders vanish on focus and read at low contrast;
   the older-user persona loses track mid-typing (17 Aug clarity review). */
.bsw-enquiry--mini .bsw-enquiry__mini-label {
	display: block;
	text-align: left;
	font-size: 0.8rem;
	font-weight: 600;
	/* higher specificity than `.bsw-enquiry label` — that rule painted these
	   slate-on-slate (invisible on the band, 17 Aug contrast review) */
	color: var(--global-palette8, #F4F3EF);
	margin-bottom: 3px;
}

.bsw-enquiry--mini input[type="text"] {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--global-palette6, #E0DED6);
	border-radius: 6px;
	background: var(--global-palette9, #fff);
	font: inherit;
}

.bsw-enquiry--mini .bsw-enquiry__submit {
	width: 100%;
	padding: 12px 22px;
}

.bsw-enquiry__hint--mini {
	color: var(--global-palette8, #F4F3EF);
	opacity: 0.85;
}

.bsw-form-notice {
	max-width: 560px;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 16px;
	border: 1px solid var(--global-palette6, #E0DED6);
}

.bsw-form-notice--ok {
	background: #eef6ee;
	border-color: #bcd9bc;
}

.bsw-form-notice--err {
	background: #fbeeec;
	border-color: #e4beb8;
}

/* Sticky mobile CTA bar — output by bayswater_sticky_cta() in functions.php */
.bsw-sticky-cta {
	display: none;
}

/* 767 -> 1024 (20 Aug 2026). Kadence collapses the desktop header — and with
   it the phone number and the Get-a-price button — at max-width:1024px, but
   this bar only appeared at 767. Everything between 768 and 1024 therefore
   had NO persistent call to action at all: no visible number, no enquiry
   button, just a hamburger. That band is iPad portrait (768/810/820/834),
   most Android tablets and any half-screen laptop window. The two systems
   now meet exactly at 1024 with no gap. The body padding-bottom rule lives
   inside this block, so it follows the bar automatically. */
@media (max-width: 1024px) {
	.bsw-sticky-cta {
		display: flex;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 999;
		gap: 1px;
		background: var(--global-palette6, #E0DED6);
		box-shadow: 0 -2px 12px rgba(28, 25, 23, 0.15);
	}

	.bsw-sticky-cta a {
		flex: 1;
		padding: 14px 8px;
		text-align: center;
		font-weight: 600;
		text-decoration: none;
		color: var(--global-palette9, #fff);
		background: var(--global-palette3, #24384A);
	}

	.bsw-sticky-cta a.bsw-sticky-cta__primary {
		background: var(--global-palette1, #F0A500);
		color: var(--global-palette3, #24384A);
	}

	/* keep page bottom content clear of the fixed bar */
	body.bsw-has-sticky-cta {
		padding-bottom: 52px;
	}
}

/* FAQ accordion (core details block) — affordance and spacing */
.bsw-faq details {
	border: 1px solid var(--global-palette6, #E0DED6);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-bottom: 0.75rem;
	background: var(--global-palette9, #fff);
}

.bsw-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--global-palette3, #24384A);
}

/* Security detail panel — icon-family stand-in for photography until the
   post-upgrade shoot (17 Aug review: the CCTV photo was pulled). One icon
   family: 24px grid, rounded line ends, a single amber angled detail each. */
.bsw-security-panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	background: var(--global-palette3, #24384A);
	color: var(--global-palette8, #F4F3EF);
	border-radius: 8px;
	padding: 40px 32px;
	margin: 24px 0;
}

.bsw-security-panel__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	font-weight: 600;
}

/* Trust strip — icon family items. Centered columns on desktop; compact
   left-aligned rows on mobile so four items don't stack a screen tall. */
.bsw-trust-items {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 0 16px;
}

.bsw-trust-items__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	color: var(--global-palette3, #24384A);
}

@media (max-width: 781px) {
	.bsw-trust-items {
		grid-template-columns: 1fr 1fr;
		row-gap: 20px;
	}
}

@media (max-width: 479px) {
	.bsw-trust-items {
		grid-template-columns: 1fr;
	}

	.bsw-trust-items__item {
		flex-direction: row;
		text-align: left;
		justify-content: flex-start;
	}
}

/* Pricing table on small screens: the price column must never scroll off-screen
   (16 Aug review — at 390px the payoff column was invisible). Area and
   typical-use columns yield; Size / Price / CTA survive. */
@media (max-width: 639px) {
	/* four columns since the per-row CTA was cut (Karl, 17 Aug) — only
	   "Typical use" yields on phones; Size, Area and Price always show */
	.bsw-pricing-table th:nth-child(3),
	.bsw-pricing-table td:nth-child(3) {
		display: none;
	}

	.bsw-pricing-table table {
		width: 100%;
	}
}

/* Price-match promise + market-check stamp under the pricing table */
.bsw-price-match {
	font-weight: 600;
	color: var(--global-palette3, #24384A);
}

.bsw-market-stamp {
	font-size: 0.85rem;
	color: var(--global-palette5, #5C6B7A);
}