/* ==========================================================================
   Bolts Contract Flooring — Components

   Note on specificity: GP's own button/colour rules use element+class
   compound selectors (e.g. .button.gp-element-button). To avoid the
   button-colour cancellation issue from the earlier build, every override
   here matches or exceeds that compound pattern rather than relying on
   !important. Keep that approach for any future additions.
   ========================================================================== */

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

.button.bcf-button,
a.button.bcf-button,
.wp-block-button .wp-block-button__link.bcf-button {
	background-color: var( --bcf-clay );
	border-color: var( --bcf-clay );
	color: var( --bcf-white );
	font-family: var( --bcf-font-display );
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var( --bcf-radius-sm );
	padding: 0.85em 1.6em;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button.bcf-button:hover,
.button.bcf-button:focus,
a.button.bcf-button:hover,
a.button.bcf-button:focus,
.wp-block-button .wp-block-button__link.bcf-button:hover {
	background-color: var( --bcf-clay-dark );
	border-color: var( --bcf-clay-dark );
	color: var( --bcf-white );
}

.button.bcf-button-outline,
a.button.bcf-button-outline {
	background-color: transparent;
	border: 1px solid var( --bcf-forest );
	color: var( --bcf-forest );
	font-family: var( --bcf-font-display );
	font-weight: 600;
	border-radius: var( --bcf-radius-sm );
	padding: 0.85em 1.6em;
}

.button.bcf-button-outline:hover {
	background-color: var( --bcf-forest );
	color: var( --bcf-white );
}

/* --------------------------------------------------------------------
   Seam divider — the recurring structural device.
   A flooring seam: two staggered hairlines, not a single centred rule.
   Used between sections sitewide, and standalone via template-part.
   -------------------------------------------------------------------- */

.bcf-seam {
	position: relative;
	width: 100%;
	height: 2px;
	margin: var( --bcf-space-lg ) 0;
}

.bcf-seam::before,
.bcf-seam::after {
	content: "";
	position: absolute;
	top: 0;
	height: var( --bcf-seam-weight );
	background-color: var( --bcf-line );
}

.bcf-seam::before {
	left: 0;
	width: calc( 50% + var( --bcf-seam-stagger ) / 2 );
}

.bcf-seam::after {
	right: 0;
	top: 6px;
	width: calc( 50% - var( --bcf-seam-stagger ) / 2 );
}

.bcf-seam-divider {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 var( --bcf-space-md );
}

/* --------------------------------------------------------------------
   Hero — flooring build-up cross-section, front page only.
   -------------------------------------------------------------------- */

.bcf-hero {
	background-color: var( --bcf-forest );
	color: var( --bcf-stone );
	padding: var( --bcf-space-xl ) var( --bcf-space-md );
}

.bcf-hero-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var( --bcf-space-lg );
	align-items: center;
}

.bcf-hero-eyebrow {
	font-family: var( --bcf-font-mono );
	font-size: var( --bcf-fs-sm );
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --bcf-clay );
	margin-bottom: var( --bcf-space-sm );
}

.bcf-hero h1 {
	color: var( --bcf-white );
	margin-bottom: var( --bcf-space-sm );
}

.bcf-hero p.bcf-hero-sub {
	font-size: 1.25rem;
	color: var( --bcf-stone );
	max-width: 46ch;
	margin-bottom: var( --bcf-space-md );
}

.bcf-hero-ctas {
	display: flex;
	gap: var( --bcf-space-sm );
	flex-wrap: wrap;
}

/* Build-up diagram: layered bars representing substrate -> screed ->
   adhesive -> finish floor, labelled. Pure CSS, no imagery required. */

.bcf-buildup {
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
	font-family: var( --bcf-font-mono );
	font-size: var( --bcf-fs-sm );
}

.bcf-buildup-layer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.65rem 1rem;
	border-radius: var( --bcf-radius-sm );
	color: var( --bcf-charcoal );
}

.bcf-buildup-layer span.bcf-layer-depth {
	opacity: 0.6;
}

.bcf-buildup-layer--substrate { background-color: #C9C2AE; height: 64px; }
.bcf-buildup-layer--screed    { background-color: #D8D2C4; height: 48px; }
.bcf-buildup-layer--adhesive  { background-color: var( --bcf-stone ); height: 24px; }
.bcf-buildup-layer--finish    { background-color: var( --bcf-clay ); color: var( --bcf-white ); height: 40px; }

@media ( max-width: 782px ) {
	.bcf-hero-inner {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
   Service / Location cards — used on archive grids and home page.
   -------------------------------------------------------------------- */

.bcf-card-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: var( --bcf-space-md );
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var( --bcf-space-md );
}

.bcf-card {
	background-color: var( --bcf-white );
	border: 1px solid var( --bcf-line );
	border-radius: var( --bcf-radius-md );
	padding: var( --bcf-space-md );
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.bcf-card:hover {
	border-color: var( --bcf-moss );
	transform: translateY( -2px );
}

.bcf-card-eyebrow {
	font-family: var( --bcf-font-mono );
	font-size: var( --bcf-fs-sm );
	color: var( --bcf-moss );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var( --bcf-space-xs );
}

.bcf-card h3 {
	margin-bottom: var( --bcf-space-xs );
}

.bcf-card p {
	margin-bottom: var( --bcf-space-sm );
}

/* --------------------------------------------------------------------
   CTA band — sitewide, above footer.
   -------------------------------------------------------------------- */

.bcf-cta-band {
	background-color: var( --bcf-charcoal );
	color: var( --bcf-stone );
	padding: var( --bcf-space-lg ) var( --bcf-space-md );
	text-align: center;
}

.bcf-cta-band h2 {
	color: var( --bcf-white );
	margin-bottom: var( --bcf-space-sm );
}

.bcf-cta-band p {
	max-width: 56ch;
	margin: 0 auto var( --bcf-space-md );
	opacity: 0.85;
}

/* --------------------------------------------------------------------
   Trust strip — accreditation badges, used above the fold on sector
   pages and the quote form. Text-based until logo assets exist.
   -------------------------------------------------------------------- */

.bcf-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bcf-space-sm ) var( --bcf-space-md );
	list-style: none;
	margin: var( --bcf-space-sm ) 0 0;
	padding: 0;
}

.bcf-trust-strip li {
	padding: 0.4rem 0.85rem;
	border: 1px solid var( --bcf-line );
	border-radius: var( --bcf-radius-sm );
	background-color: var( --bcf-white );
}

.bcf-trust-strip li span {
	color: var( --bcf-forest );
}

.bcf-hero .bcf-trust-strip li,
.bcf-sector-header .bcf-trust-strip li {
	background-color: transparent;
	border-color: rgba( 237, 234, 226, 0.35 );
}

.bcf-hero .bcf-trust-strip li span,
.bcf-sector-header .bcf-trust-strip li span {
	color: var( --bcf-stone );
}

/* --------------------------------------------------------------------
   Quote / contact form
   -------------------------------------------------------------------- */

.bcf-quote-form {
	max-width: 640px;
	margin: 0 auto;
	background-color: var( --bcf-white );
	border: 1px solid var( --bcf-line );
	border-radius: var( --bcf-radius-md );
	padding: var( --bcf-space-md );
}

.bcf-quote-form label {
	display: block;
	font-family: var( --bcf-font-mono );
	font-size: var( --bcf-fs-sm );
	color: var( --bcf-forest );
	margin-bottom: 0.3rem;
}

.bcf-quote-form input,
.bcf-quote-form select,
.bcf-quote-form textarea {
	width: 100%;
	border: 1px solid var( --bcf-line );
	border-radius: var( --bcf-radius-sm );
	padding: 0.7rem 0.85rem;
	font-family: var( --bcf-font-body );
	font-size: var( --bcf-fs-base );
	background-color: var( --bcf-stone );
	margin-bottom: var( --bcf-space-sm );
}

.bcf-quote-form input:focus,
.bcf-quote-form select:focus,
.bcf-quote-form textarea:focus {
	background-color: var( --bcf-white );
}

.bcf-quote-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --bcf-space-sm );
}

@media ( max-width: 600px ) {
	.bcf-quote-form-row {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
   Full-width content override.
   GP has two separate width settings: Container Width (full site width)
   and Content Width (narrower, applies even with no sidebar). Removing
   the sidebar alone doesn't widen this — force it here so content always
   spans the full container on the page types this theme controls.
   -------------------------------------------------------------------- */

body.no-sidebar .site-content,
body.no-sidebar #primary,
body.no-sidebar .content-area,
body.no-sidebar .inside-article {
	max-width: none !important;
	width: 100% !important;
}

/* --------------------------------------------------------------------
   Header / footer tweaks
   -------------------------------------------------------------------- */

#site-navigation,
.main-navigation {
	background-color: var( --bcf-forest );
}

.main-navigation .main-nav ul li a {
	color: var( --bcf-stone );
	font-family: var( --bcf-font-display );
	font-weight: 500;
}

.site-footer,
.site-footer.footer-widgets {
	background-color: var( --bcf-charcoal );
	color: var( --bcf-stone );
}

.site-footer a {
	color: var( --bcf-stone );
}