/*
Theme Name:  Brazen Digital
Theme URI:   https://brazendigital.co.uk/
Description: Brazen Digital - lean, Lighthouse-ready build
Version:     5.4.0
Author:      Brazen Digital
Author URI:  https://www.brazen-digital.nl
Tags:        brazen-digital, bootstrap, basic theme
Text Domain: brazen_digital
*/

/* Increase base font size slightly for readability */
:root {
  --llj-black:        	#000000;
  --llj-charcoal:       #0F0F10;
  --llj-text:       	#0F0F10;
  --llj-grey:        	#ECECEC;
  --llj-white:        	#FFFFFF;
  --llj-red:     		#C61E24;
	
  --llj-focus-shadow:   0 0 0 3px rgba(233, 30, 140, 0.4);

}

/* Generous focus ring - critical for SEN keyboard and switch users */
:focus-visible {
	outline: 1px solid var(--llj-red) !important;
	outline-offset: 1px !important;
	box-shadow: var(--llj-focus-shadow) !important;
}

html { overflow-x: hidden; }

/* Baseline responsive-image reset - Bootstrap only makes images fluid
   via the opt-in .img-fluid class, so any plain <img> (like the one in
   the text-image block) has no fallback and renders at native pixel
   size unless every instance remembers to constrain it individually. */
img,
svg {
	max-width: 100%;
	height: auto;
}

body {
    color: var(--llj-text);
    display: flex;
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    flex-direction: column;
    line-height: 1.4;
	min-height: 100dvh;
}

.fw-1 { font-weight: 100 !important; }
.fw-2 { font-weight: 200 !important; }
.fw-3 { font-weight: 300 !important; }
.fw-4 { font-weight: 400 !important; }
.fw-5 { font-weight: 500 !important; }
.fw-6 { font-weight: 600 !important; }
.fw-7 { font-weight: 700 !important; }
.fw-8 { font-weight: 800 !important; }
.fw-9 { font-weight: 900 !important; }

.small, small {
    font-size: .875rem;
}

/* === Layout === */
.site-header .navbar-light {
	background-color: #ECECEC !important;
}

.site-footer-main {
	background-color: var(--llj-grey);
	border-top: 4px solid var(--llj-red);
	padding: 3rem 0;
}

.footer-logo {
	max-width: 184px;
	height: auto;
}

.footer-link {
	color: var(--llj-text);
	text-decoration: none;
}

.footer-link:hover,
.footer-link:focus {
	color: var(--llj-red);
	text-decoration: underline;
}

.footer-heading {
	color: var(--llj-red);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.footer-nav {
	margin: 0;
	padding: 0;
}

.footer-nav li {
	list-style: none;
	margin-bottom: 0.5rem;
}

.footer-nav a {
	color: var(--llj-text);
	text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus {
	color: var(--llj-red);
}

.footer-address {
	font-style: normal;
	line-height: 1.6;
}

.site-footer-bottom {
	background-color: var(--llj-white);
	padding: 1.25rem 0;
}

.site-footer-bottom p {
	color: var(--llj-text);
}

.site-main {
	padding: 2rem 0 0;
}

/* === Navigation === */
.navbar-brand {
	font-weight: 600;
}

#menu-main-menu li.menu-item { font-weight: 400; line-height: 1.5; padding: .25rem .75rem; }
#menu-main-menu li.menu-item a { color: var(--llj-text);}
#menu-main-menu li.menu-item.current_page_item a { color: var(--llj-red);}
#menu-main-menu li.menu-item.btn-quote { background-color: var(--llj-red); border-radius: 8px; color: var(--llj-white); min-width: 140px; }
#menu-main-menu li.menu-item.btn-quote a { color: var(--llj-white); }

/* === Content === */
.entry-title {
	margin-bottom: 0.25rem;
}

.entry-meta {
	color: #6c757d;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.entry-content {
	margin-top: 1rem;
}

/* === Search form - desktop only; offcanvas has its own === */
.search-form {
	display: none;
}

@media (min-width: 992px) {
	.search-form {
		display: flex;
		gap: 0.5rem;
	}
}

/* === Offcanvas nav links === */
.offcanvas .nav-link {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

/* === 404 / no-results === */
.error-page {
	padding: 4rem 0;
	text-align: center;
}

/* === Homepage: hero (ACF block "acf/llj-hero", template /blocks/hero/hero.php) === */
.hero-block {
	min-height: 460px;
	background-color: var(--llj-charcoal);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-block .hero-overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.50) 100%);
	pointer-events: none;
}

.hero-block h1 {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-block .lead {
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

@media (min-width: 992px) {
	.hero-block {
		min-height: 620px;
	}
}

.btn-llj-outline {
	border: 2px solid var(--llj-white);
	color: var(--llj-white);
	background-color: transparent;
}

.btn-llj-outline:hover,
.btn-llj-outline:focus {
	background-color: var(--llj-white);
	color: var(--llj-charcoal);
}

.btn-llj-red {
	border: 2px solid var(--llj-red);
	background-color: var(--llj-red);
	color: var(--llj-white);
}

.btn-llj-red:hover,
.btn-llj-red:focus {
	background-color: #a8181d;
	border-color: #a8181d;
	color: var(--llj-white);
}

/* === Shared: red uppercase section heading, used by several ACF blocks === */
.section-heading {
	color: var(--llj-red);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

/* === Full-bleed breakout - escapes the page .container so the block's
   background spans the viewport while its own .container keeps the
   content boxed at the normal width. === */
.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* === Homepage: services (ACF block "acf/llj-services") === */
.services-block {
	background-color: var(--llj-grey);
}

.services-intro {
	max-width: 800px;
	font-size: 1.1rem;
	color: var(--llj-text);
	margin-top: 0.5rem;
	margin-bottom: 2rem !important;
}

.service-card-title {
	color: var(--llj-red);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

/* === Homepage: about (ACF block "acf/llj-about") === */
.btn-llj-grey {
	border: 2px solid var(--llj-grey);
	background-color: var(--llj-grey);
	color: var(--llj-text);
}

.btn-llj-grey:hover,
.btn-llj-grey:focus {
	background-color: #dcdcdc;
	border-color: #dcdcdc;
	color: var(--llj-text);
}

.about-body p:last-child {
	margin-bottom: 0;
}

/* Image column matches the height of the text column at lg+; on smaller
   screens (where columns stack) it falls back to a fixed min-height. */
.about-image-wrap {
	min-height: 320px;
	border-radius: 1rem;
	overflow: hidden;
}

.about-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (min-width: 992px) {
	.about-image-wrap {
		height: 100%;
	}
}

/* === Homepage: testimonials (ACF block "acf/llj-testimonials") === */
.testimonials-block {
	background-color: var(--llj-grey);
	border-bottom: 4px solid var(--llj-red);
}

.testimonial-card {
	background-color: var(--llj-white);
}

.testimonial-quote {
	font-size: 1.25rem;
	color: var(--llj-text);
	margin-bottom: 0;
}

.testimonial-avatar {
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
}

.testimonial-name {
	font-weight: 600;
	color: var(--llj-text);
}

.testimonial-description {
	color: #6c757d;
	font-size: 0.9rem;
}

/* === Homepage: areas we cover (ACF block "acf/llj-areas-we-cover") === */
.cta-banner {
	background-color: var(--llj-red);
}

.cta-banner-heading {
	color: var(--llj-white);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 2rem;
}

.cta-banner-subheading {
	color: var(--llj-white);
	font-size: 1.1rem;
	opacity: 0.9;
}

.btn-llj-black {
	border: 2px solid var(--llj-black);
	background-color: var(--llj-black);
	color: var(--llj-white);
}

.btn-llj-black:hover,
.btn-llj-black:focus {
	background-color: #262626;
	border-color: #262626;
	color: var(--llj-white);
}

/* === Text and Image (ACF block "acf/llj-text-image") === */
.text-image-subheading {
	color: var(--llj-text);
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: 1.25rem;
}

.text-image-body p:last-child {
	margin-bottom: 0;
}

.text-image-photo {
	width: 100%;
	height: auto;
	display: block;
}

/* === Services page: detail list (ACF block "acf/llj-services-detail") === */
.services-detail-block .section-heading {
	margin-bottom: 2.5rem;
}

.services-detail-title {
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--llj-text);
	margin-bottom: 0.5rem;
}

.services-detail-text {
	color: var(--llj-text);
}

/* === Contact (ACF block "acf/llj-contact") === */
.contact-block .contact-intro {
	color: var(--llj-text);
	margin-bottom: 2rem;
}

.contact-intro p:last-child {
	margin-bottom: 0;
}

.contact-address,
.contact-phone,
.contact-email {
	font-size: 1.1rem;
}

.contact-link {
	color: var(--llj-text);
	font-weight: 700;
	text-decoration: none;
}

.contact-link:hover,
.contact-link:focus {
	color: var(--llj-red);
}

.contact-arrow {
	display: inline-block;
	transition: transform 0.15s ease;
}

.contact-link:hover .contact-arrow,
.contact-link:focus .contact-arrow {
	transform: translateX(4px);
}

.contact-form-wrap {
	background-color: var(--llj-grey);
	border: 1px solid #dee2e6;
	height: 100%;
}
form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--llj-red) !important;
    color: var(--llj-text);
}

/* === Find Us (ACF block "acf/llj-find-us") === */
.find-us-map-wrap iframe {
	width: 100%;
	height: 100%;
}

.find-us-map-btn {
	left: 1.5rem;
	bottom: 1.5rem;
}

/* === Request a Quote (ACF block "acf/llj-quote") === */
.quote-info-col {
	background-color: var(--llj-white);
}

.quote-info-label {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--llj-text);
	margin-bottom: 0.25rem;
}

.quote-info-description {
	color: var(--llj-text);
}

.quote-info-detail {
	font-weight: 700;
	color: var(--llj-text);
}

.quote-panel {
	background-color: var(--llj-red);
}

.quote-panel-heading {
	color: var(--llj-white);
	font-weight: 800;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.quote-panel-subtext {
	color: var(--llj-white);
	opacity: 0.9;
}

/* A Fluent Forms form embedded on the red panel needs light labels and
   inputs to stay readable, and a button that isn't the same red as the
   panel itself (which would otherwise disappear). Fluent Forms' own
   class names may vary slightly by version, so double-check against
   the live form once it's embedded. */
.quote-panel-form label,
.quote-panel-form .ff-el-form-check-label {
	color: var(--llj-white);
}

.quote-panel-form .ff-el-form-control {
	background-color: var(--llj-white);
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--llj-white);
}

.quote-panel-form .ff-el-form-control::placeholder {
	color: var(--llj-text);
}

.quote-panel-form .ff-btn-submit {
	background-color: var(--llj-black) !important;
	border-color: var(--llj-black) !important;
	color: var(--llj-white) !important;
}

/* === Properties We Value (ACF block "acf/llj-properties-we-value") ===
   Black version of the Areas We Cover CTA banner - reuses .btn-llj-red
   and .btn-llj-outline (already defined above), just on a black bg. */
.properties-banner {
	background-color: var(--llj-text);
}

.properties-banner-heading {
	color: var(--llj-white);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 2rem;
}

.properties-banner-subheading {
	color: var(--llj-white);
	font-size: 1.1rem;
	max-width: 640px;
}

/* FORMS */
.ff-message-success { color: var(--llj-white) !important; background: rgba(0, 0, 0, .2) !important; border: 1px solid rgba(0, 0, 0, .25)!important; }