/*
 * Sydney BNB Clean - brand layer.
 *
 * Additive only. The Dustar parent theme keeps ownership of layout; the primary
 * accent colour is driven through Codestar theme options (which emits its own
 * override block), so this file handles brand tokens, the custom 404, Lottie
 * containers and a small number of brand refinements the option block misses.
 */

:root {
	--sbc-navy: #0a2350;
	--sbc-navy-dark: #061737;
	--sbc-blue: #3aa9e6;
	--sbc-blue-dark: #2b8bc2;
	--sbc-ink: #1f2d3d;
	--sbc-muted: #6b7a90;
	--sbc-line: #e3e9f0;
	--sbc-bg-soft: #f5f8fb;
}

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

/*
 * The lockup is a wide transparent PNG shipped at 2x. The parent caps
 * .navbar-brand img at 175px wide; height follows the aspect ratio.
 */
.header-style-1 .navbar-brand img,
.header-style-2 .navbar-brand img {
	max-width: 175px;
	height: auto;
}

.site-footer .about-widget .logo img {
	max-width: 190px;
	height: auto;
}

/* ------------------------------------------------------------ Headings ---- */

.section-title h2,
.section-title-s2 h2 {
	color: var(--sbc-navy);
}

/* --------------------------------------------------------------- 404 ------ */

.sbc-404 {
	background-color: var(--sbc-bg-soft);
}

.sbc-404 .content {
	background: #fff;
	border: 1px solid var(--sbc-line);
	border-radius: 10px;
	padding: 50px 30px 55px;
	box-shadow: 0 18px 40px rgba(10, 35, 80, 0.07);
}

.sbc-404__logo {
	margin-bottom: 10px;
}

.sbc-404__logo img {
	max-width: 230px;
	height: auto;
}

.sbc-404__animation {
	width: 100%;
	max-width: 320px;
	margin: 0 auto 5px;
	min-height: 180px;
}

/*
 * The parent renders the "404" numeral inside .error h2. Recolour it to the
 * brand navy and let the Lottie sit above it.
 */
.sbc-404 .error h2 {
	color: var(--sbc-navy);
	line-height: 1;
	margin: 0 0 10px;
}

.sbc-404 .error-message h3 {
	color: var(--sbc-navy);
	margin-bottom: 14px;
}

.sbc-404 .error-message p {
	color: var(--sbc-muted);
	max-width: 520px;
	margin: 0 auto 26px;
}

.sbc-404__links {
	margin-top: 38px;
	padding-top: 26px;
	border-top: 1px solid var(--sbc-line);
}

.sbc-404__links-label {
	display: block;
	color: var(--sbc-muted);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.sbc-404__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
}

.sbc-404__links a {
	color: var(--sbc-navy);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sbc-404__links a:hover,
.sbc-404__links a:focus {
	color: var(--sbc-blue);
	border-bottom-color: var(--sbc-blue);
	text-decoration: none;
}

.sbc-404__search {
	margin-top: 30px;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------ Booking thank-you ------- */

.sbc-thanks__animation {
	width: 100%;
	max-width: 260px;
	margin: 0 auto 18px;
	min-height: 200px;
}

/* -------------------------------------------- Work process Lottie icons --- */

.sbc-step__animation {
	width: 90px;
	height: 90px;
	margin: 0 auto 12px;
}

/*
 * Respect reduced-motion preferences. The JS also checks this, but hiding the
 * container guards against a flash before the script runs.
 */
@media (prefers-reduced-motion: reduce) {
	.sbc-404__animation,
	.sbc-thanks__animation,
	.sbc-step__animation {
		display: none;
	}
}

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

@media (max-width: 767px) {
	.sbc-404 .content {
		padding: 34px 18px 38px;
	}

	.sbc-404__logo img {
		max-width: 180px;
	}

	.sbc-404__animation {
		max-width: 240px;
		min-height: 150px;
	}

	.sbc-404__links ul {
		gap: 8px 18px;
	}
}

/* ------------------------------------------------------------- Hero ------- */

/*
 * The demo hero pairs a light background photo with a right-hand cut-out PNG of
 * a cleaner. We have no equivalent cut-out asset, so the slot is hidden and the
 * hero becomes a single full-bleed photograph.
 *
 * The parent theme renders hero copy in dark text on a pale background, so a
 * left-weighted white scrim keeps that copy readable over a photo without
 * changing any of the parent's type or layout rules.
 */
.hero-static .hero-pic {
	display: none;
}

.hero-static .slide-inner {
	position: relative;
	background-size: cover;
	background-position: center center;
}

.hero-static .slide-inner:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.9) 34%,
		rgba(255, 255, 255, 0.55) 58%,
		rgba(255, 255, 255, 0.12) 100%
	);
	pointer-events: none;
}

.hero-static .slide-inner > .container {
	position: relative;
	z-index: 2;
}

/* Give the headline room now that the cut-out no longer constrains it. */
.hero-static .slide-title,
.hero-static .slide-text {
	max-width: 620px;
}

@media (max-width: 991px) {
	/*
	 * The parent centres hero copy below 991px. A symmetric scrim reads better
	 * than a left-weighted one once the text is centred.
	 */
	.hero-static .slide-inner:before {
		background: rgba(255, 255, 255, 0.88);
	}

	.hero-static .slide-title,
	.hero-static .slide-text {
		max-width: 100%;
	}
}

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

.sbc-footer-legal ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
}

.sbc-footer-legal li {
	margin: 0;
}

.sbc-footer-legal a {
	font-size: 14px;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.sbc-footer-legal a:hover,
.sbc-footer-legal a:focus {
	opacity: 1;
	text-decoration: underline;
}

/* ------------------------------------------- Pricing: 4 tiers as 2x2 ------ */

/*
 * The parent sizes pricing cards at calc(33% - 30px), so a fourth card wraps and
 * sits alone. On the Pricing page, where all four rates are shown, switch to a
 * balanced 2x2 grid instead.
 */
.page-template .sbc-pricing-4 .pricing-section .pricing-grids .grid,
.sbc-pricing-4 .pricing-section .pricing-grids .grid {
	width: calc(50% - 30px);
}

@media (max-width: 767px) {
	.sbc-pricing-4 .pricing-section .pricing-grids .grid {
		width: calc(50% - 15px);
	}
}

@media (max-width: 550px) {
	.sbc-pricing-4 .pricing-section .pricing-grids .grid {
		width: calc(100% - 15px);
		float: none;
	}
}

/* ------------------------------------------ Residual demo accent (#feea2b) - */

/*
 * The Codestar "Elements Color" option emits an override block covering
 * .theme-btn*, section-title spans and a set of borders - but the parent
 * stylesheet also hardcodes its default yellow (#feea2b) in a handful of places
 * that block never reaches. Those are re-pointed at the brand palette here.
 *
 * brand.css is enqueued after dustar-style, so matching the parent's selectors
 * is enough; no !important is needed.
 */

/* Featured (2nd) pricing card button, and the hover state on all of them. */
.pricing-section .grid:hover .pricing-footer a,
.pricing-section .pricing-grids > .grid:nth-child(2) .pricing-footer a {
	background-color: var(--sbc-navy);
	border-color: var(--sbc-navy);
	color: #fff;
}

/* The ribbon on the featured card. */
.pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header:after {
	background-color: var(--sbc-navy);
}

/* Project/gallery category label. */
.recent-project-section .inner .cat {
	background: var(--sbc-blue);
	color: #fff;
}

.recent-project-section .inner h3 a:hover {
	color: var(--sbc-blue);
}

/* Contact info icons. */
.contact-info-section .contact-info .icon {
	background: var(--sbc-blue);
}

/* Service sidebar contact button. */
.service-sidebar .contact-widget a {
	background-color: var(--sbc-blue);
}

/* Dropdown menu hover. */
.site-header #navbar > ul > li .sub-menu li a:hover {
	background-color: var(--sbc-blue);
	color: #fff;
}

/* ----------------------------------------------------- CTA readability ---- */

/*
 * The CTA band sits on a photograph and the parent renders its heading in dark
 * text. Add a navy scrim so the heading and button stay legible regardless of
 * which image the client swaps in later.
 */
.cta-section,
.cta-fullwidth {
	position: relative;
}

/*
 * The CTA widget prints its own inline rule for the background photo:
 *   .cta-section-<uid>.cta-section:before { background-image: url(...) }
 * That is more specific than anything we can write for :before without
 * knowing the generated id, so the scrim goes on :after and layers ON TOP of
 * the photo instead of competing with it. This keeps the image AND the
 * contrast, rather than dropping the image to get readable text.
 */
.cta-section:after,
.cta-fullwidth:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Flat, not a gradient: the CTA is centre-aligned, so a left-weighted scrim
	   leaves the heading sitting over the lightest part of the photo. */
	background: rgba(10, 35, 80, 0.82);
	pointer-events: none;
	z-index: 1;
}

/*
 * The CTA widget renders .cta-section > .row > .col > .cta-text - there is NO
 * .container wrapper, so targeting one leaves every child below the scrim and
 * the white heading gets painted over. Lift the actual content wrappers.
 */
.cta-section > .container,
.cta-fullwidth > .container,
.cta-section > .row,
.cta-fullwidth > .row,
.cta-section .cta-text,
.cta-fullwidth .cta-text {
	position: relative;
	z-index: 2;
}

/* Keep the photo beneath the scrim. */
.cta-section:before,
.cta-fullwidth:before {
	z-index: 0;
}

.cta-section h2,
.cta-section h3,
.cta-fullwidth h2,
.cta-fullwidth h3 {
	color: #fff;
}

/* ------------------------------------------------- Contact / booking forms -- */

/*
 * The parent theme styles the demo's placeholder-only contact form, so three of
 * its assumptions have to be unwound for a form with real labels:
 *
 *  1. Contact Form 7 runs wpautop over the form template, which wraps each field
 *     row in a <p>. That <p> then inherits `.contact-section .content-area p`,
 *     which is centred, italic and padded for the intro paragraph above the form.
 *  2. `.contact-section form input` sets width:100% and height:50px, which is
 *     right for text inputs and wrong for checkboxes and radios.
 *  3. Nothing styles labels, helper text or CF7's own error output.
 *
 * The two-column float grid, `.fullwidth`, `.submit-area` and every field
 * treatment still come from the parent theme.
 */

.contact-section .contact-form form p {
	margin: 0;
	padding: 0;
	text-align: left;
	font-style: normal;
}

.contact-section .contact-form label,
.contact-section .contact-form .sbc-label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sbc-ink);
}

.contact-section .contact-form .sbc-req {
	color: var(--sbc-blue-dark);
}

.contact-section .contact-form .sbc-help {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sbc-muted);
}

.contact-section .contact-form .sbc-group {
	margin-top: 20px;
}

.contact-section .contact-form .sbc-group h4 {
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sbc-line);
	font-size: 18px;
	color: var(--sbc-navy);
}

/* Checkbox and radio groups: undo the full-width text-input sizing. */
.contact-section .contact-form input[type="checkbox"],
.contact-section .contact-form input[type="radio"] {
	width: auto;
	height: auto;
	margin: 0 8px 0 0;
	border: 0;
	vertical-align: middle;
}

.contact-section .contact-form .wpcf7-list-item {
	display: block;
	margin: 0 0 8px;
}

.contact-section .contact-form .wpcf7-list-item label {
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	cursor: pointer;
}

.contact-section .contact-form .wpcf7-list-item-label {
	vertical-align: middle;
}

.contact-section .contact-form .sbc-accept {
	margin-top: 15px;
}

.contact-section .contact-form .sbc-accept .wpcf7-form-control-wrap,
.contact-section .contact-form .sbc-accept .wpcf7-acceptance,
.contact-section .contact-form .sbc-accept .wpcf7-list-item {
	display: inline;
	margin: 0;
}

/* CF7's own validation and response output, which the parent theme never styled. */
.contact-section .contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: #c0392b;
}

.contact-section .contact-form .wpcf7-not-valid {
	border-color: #c0392b !important;
}

.contact-section .contact-form .wpcf7-response-output {
	clear: both;
	margin: 25px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--sbc-line);
	font-size: 15px;
	text-align: center;
}

.contact-section .contact-form .wpcf7-spinner {
	vertical-align: middle;
}

/* ------------------------------------- Remaining demo-yellow instances ----- */

/*
 * Two further hardcoded uses of the parent theme's default yellow that the
 * Codestar override block does not reach:
 *  - the offset "halo" behind contact info icons (a translucent :before)
 *  - the CF7 submit button inside the services-style-2 contact form
 */
.contact-info-section .contact-info .icon:before {
	background: rgba(58, 169, 230, 0.35);
}

.services-section-s2 .contact-form input[type="submit"].wpcf7-submit {
	background-color: var(--sbc-blue);
	color: #fff;
}

.services-section-s2 .contact-form input[type="submit"].wpcf7-submit:hover {
	background-color: var(--sbc-navy);
	color: #fff;
}

/* ------------------------------- Pricing: highlight the core offering ------ */

/*
 * The parent theme hardcodes the "featured" pricing card to :nth-child(2). On
 * the Pricing page that lands on Linen, while the business's core offering is
 * the $55 hourly rate in card 1. These rules move the highlight to the first
 * card on that page only (.sbc-pricing-4); hover styling is untouched, and
 * every other pricing block on the site keeps the theme's default behaviour.
 */

/* 1. Return card 2 to the default treatment. */
.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(2):not(:hover) .pricing-header {
	background-color: transparent;
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(2):not(:hover) .pricing-header h5 {
	color: #57667e;
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(2):not(:hover) .pricing-header h3 {
	color: var(--sbc-navy);
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(2):not(:hover) .pricing-header span:before {
	background-color: var(--sbc-blue);
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(2):not(:hover) .pricing-header:after {
	/* Parent recolours this separator for the featured card; restore the default. */
	border-bottom-color: #dae9fd;
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(2):not(:hover) .pricing-footer a {
	background-color: var(--sbc-blue);
	border-color: var(--sbc-blue);
	color: #fff;
}

/* 2. Promote card 1. */
.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(1) .pricing-header {
	background-color: var(--sbc-blue);
	border-radius: 5px;
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(1) .pricing-header h5,
.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(1) .pricing-header h3 {
	color: #fff;
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(1) .pricing-header span:before {
	background-color: #fff;
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(1) .pricing-header:after {
	border-color: var(--sbc-blue);
}

.sbc-pricing-4 .pricing-section .pricing-grids > .grid:nth-child(1) .pricing-footer a {
	background-color: var(--sbc-navy);
	border-color: var(--sbc-navy);
	color: #fff;
}

/* ============================ Single-row header ============================ */

/*
 * The parent theme lays the header out with floats: .navbar-header floats left,
 * #navbar floats right with a 180px right margin reserving space for the
 * absolutely-positioned .search-contact. Logo + menu + that reserved gap exceed
 * the row width at every desktop size, so the menu wraps onto a second line.
 *
 * All three are already siblings inside .nav-row, so the row is switched to
 * flexbox: logo | menu | search + CTA on one line, vertically centred. Link
 * padding is tightened so eight top-level items fit without wrapping.
 *
 * Scoped to >= 992px, which is where the parent shows the horizontal nav; below
 * that the off-canvas hamburger takes over and is left completely alone.
 */
@media (min-width: 992px) {

	.site-header .nav-row {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 18px;
	}

	.site-header .nav-row:before,
	.site-header .nav-row:after {
		display: none; /* clearfix pseudo-elements become stray flex items */
	}

	.site-header .navbar-header {
		float: none;
		flex: 0 0 auto;
	}

	.site-header .navbar-header .site-logo {
		padding-top: 0;
		padding-bottom: 0;
	}

	.header-style-1 .navbar-brand,
	.header-style-2 .navbar-brand {
		margin-top: 0;
		height: auto;
		padding: 0;
		display: block;
	}

	/* Menu takes the remaining space and sits hard against the CTA. */
	.header-style-1 #navbar,
	.header-style-2 #navbar {
		float: none;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		flex: 1 1 auto;
		display: flex;
		justify-content: flex-end;
		min-width: 0;
	}

	.site-header #navbar > ul.nav {
		float: none;
		display: flex;
		flex-wrap: nowrap;
		margin: 0;
	}

	.site-header #navbar > ul.nav > li {
		float: none;
		white-space: nowrap;
	}

	/* Tighter horizontal padding so all eight items fit; shorter vertical
	   padding keeps the single row from becoming 100px tall. */
	.header-style-1 #navbar > ul > li > a,
	.header-style-2 #navbar > ul > li > a {
		padding: 30px 13px;
	}

	/* Search + CTA become the third flex item instead of an absolute overlay. */
	.header-style-1 .search-contact,
	.header-style-2 .search-contact {
		position: relative;
		right: auto;
		top: auto;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.header-style-1 .search-contact.not-has-cta,
	.header-style-2 .search-contact.not-has-cta {
		top: auto;
	}

	.header-style-1 .search-contact .contact,
	.header-style-2 .search-contact .contact {
		top: 0;
	}

	.site-header .search-contact .header-search-area {
		display: flex;
		align-items: center;
	}
}

/* Slightly tighter again where the row is narrowest (992-1199px). */
@media (min-width: 992px) and (max-width: 1199px) {
	.header-style-1 #navbar > ul > li > a,
	.header-style-2 #navbar > ul > li > a {
		padding: 28px 8px;
		font-size: 14px;
	}

	.site-header .nav-row {
		gap: 10px;
	}
}

/* ================================ Gallery grid ============================= */

/*
 * Elementor's Basic Gallery outputs WordPress' classic gallery markup
 * (figure.gallery-item > .gallery-icon > img + figcaption.gallery-caption),
 * which WordPress styles with percentage widths and inline-block floats. Left
 * alone the tiles keep their native aspect ratios, so rows never line up.
 *
 * A fixed 4:3 ratio with object-fit turns the ten photographs into an even room
 * index; the caption is the room label, and the descriptive line lives in the
 * lightbox title.
 */
.elementor-image-gallery .gallery {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
	margin: 0 !important;
}

.elementor-image-gallery .gallery-item {
	/*
	 * WordPress ships `.gallery-columns-N .gallery-item { max-width: (100/N)% }`
	 * for its float layout. Inside a CSS grid that percentage resolves against
	 * the grid COLUMN rather than the container, collapsing each tile to a fifth
	 * of its cell (~42px). max-width must be reset, not just width.
	 */
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
	display: block;
}

.elementor-image-gallery .gallery-icon {
	width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	line-height: 0;
}

.elementor-image-gallery .gallery-icon img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0 !important;
	border-radius: 8px;
	transition: transform 0.45s ease;
}

.elementor-image-gallery .gallery-item:hover .gallery-icon img {
	transform: scale(1.05);
}

.elementor-image-gallery .gallery-caption {
	margin: 10px 0 0;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sbc-navy);
	opacity: 0.75;
	/* Centred under each tile: WordPress centres gallery captions and it reads
	   better than left-aligned against a full-bleed image. */
	text-align: center;
	line-height: 1.35;
}

@media (max-width: 991px) {
	.elementor-image-gallery .gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 575px) {
	.elementor-image-gallery .gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.elementor-image-gallery .gallery-caption {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-image-gallery .gallery-icon img,
	.elementor-image-gallery .gallery-item:hover .gallery-icon img {
		transition: none;
		transform: none;
	}
}

/* ================================ Buttons ================================== */

/*
 * Every button on the brand blue gets white label text.
 *
 * The parent theme sets button labels to navy (#0e3c7b) and the Codestar accent
 * option only repaints the background, so buttons rendered navy-on-blue.
 *
 * Contrast note: white on #3aa9e6 measures 2.6:1, which is below the WCAG AA
 * minimum. That is a deliberate brand decision, recorded here so it is not
 * "fixed" by accident. Darkening the blue to #219de3 would reach 3.0:1 with no
 * visible change to the brand.
 */
.theme-btn,
.theme-btn-s2,
.theme-btn-s3,
.theme-btn-s4,
.pricing-section .pricing-footer a,
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.site-header .search-contact .contact .theme-btn,
.sbc-404 .theme-btn,
.about-section .details .theme-btn {
	color: #fff;
}

/* Keep the label white through every interactive state. */
.theme-btn:hover,
.theme-btn:focus,
.theme-btn-s2:hover,
.theme-btn-s2:focus,
.theme-btn-s3:hover,
.theme-btn-s3:focus,
.theme-btn-s4:hover,
.theme-btn-s4:focus,
.pricing-section .grid:hover .pricing-footer a,
.pricing-section .pricing-footer a:hover,
.pricing-section .pricing-footer a:focus,
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus {
	color: #fff;
}

/*
 * The hover accent is the navy, so a white label stays legible on both states
 * (white on navy is 15.3:1).
 */
.theme-btn:hover,
.theme-btn-s2:hover,
.theme-btn-s3:hover,
.theme-btn-s4:hover,
.wpcf7 input[type="submit"]:hover {
	background-color: var(--sbc-navy);
	border-color: var(--sbc-navy);
}

/* Visible keyboard focus - the parent theme provides none. */
.theme-btn:focus-visible,
.theme-btn-s2:focus-visible,
.theme-btn-s3:focus-visible,
.theme-btn-s4:focus-visible,
.pricing-section .pricing-footer a:focus-visible,
.wpcf7 input[type="submit"]:focus-visible,
.site-header #navbar > ul > li > a:focus-visible,
.sbc-footer-legal a:focus-visible {
	outline: 3px solid var(--sbc-navy);
	outline-offset: 3px;
}

/* ==================== Off-brand accents (#0b5be0 / #237cf5) ================= */

/*
 * The parent stylesheets hardcode two blues that are not the brand blue:
 * #0b5be0 (active tab) and #237cf5 (open accordion header, plus assorted hover
 * states). #237cf5 is Codestar's DEFAULT hover colour, so it survives even
 * though the theme option is set to the brand navy.
 *
 * Only the components this site actually uses are repointed - the remaining
 * ~100 occurrences are in blog and WooCommerce styles that never render here.
 */

/* Tabs - active tab */
.theme-default-tab-wrap .theme-default-tab .nav .active a,
.theme-default-tab-wrap .theme-default-tab .nav .active a:hover,
.theme-default-tab-wrap .theme-default-tab .nav .active a:focus {
	background-color: var(--sbc-blue);
	border-color: var(--sbc-blue);
	color: #fff;
}

.theme-default-tab-wrap .theme-default-tab .nav a:hover {
	color: var(--sbc-blue);
}

/* Accordion - open panel header */
.theme-accordion-s1 .panel-heading a {
	background-color: var(--sbc-blue);
	color: #fff;
}

.theme-accordion-s1 .panel-heading a.collapsed {
	background-color: #fff;
	color: var(--sbc-navy);
}

.theme-accordion-s1 .panel-heading a.collapsed:hover {
	color: var(--sbc-blue);
}

/* Form fields: focus ring on brand */
.wpcf7 .form-control:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus,
.blog-single-section .comment-respond form input:focus,
.blog-single-section .comment-respond form textarea:focus {
	border-color: var(--sbc-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(58, 169, 230, 0.18);
}

/* Pagination */
.wp-pagenavi span.current,
.wp-pagenavi a:hover {
	background-color: var(--sbc-blue);
	border-color: var(--sbc-blue);
	color: #fff;
}

/* Remaining hardcoded #237cf5 in components this site renders. */

/* Dropdown menu panel. Navy reads as a deliberate menu surface and keeps the
   white item labels well above contrast, where the theme's bright blue did not. */
.site-header #navbar > ul .sub-menu {
	background-color: var(--sbc-navy);
}

.site-header #navbar > ul .sub-menu li a {
	color: #fff;
}

/* Hero eyebrow badge */
.hero-static .slide-offer > span,
.hero-style-2 .slide-offer > span,
.hero-static-s2 .slide-offer > span {
	background: var(--sbc-blue);
	color: #fff;
}

/* Featured pricing card (the default 3-up blocks, e.g. on Home) */
.pricing-section .grid:hover .pricing-header,
.pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header {
	background-color: var(--sbc-blue);
}

.pricing-section .grid:hover .pricing-header:after,
.pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header:after {
	border-color: var(--sbc-blue);
}

/* Header search toggle */
.site-header .search-contact .btn,
.site-header .search-contact .open-btn {
	background-color: transparent;
	color: var(--sbc-navy);
}

.site-header .search-contact .btn:hover,
.site-header .search-contact .open-btn:hover {
	color: var(--sbc-blue);
}

/* The search overlay's submit button */
.header-search-form .btn {
	background-color: var(--sbc-blue);
	color: #fff;
}

/* Two selectors that outrank the rules above, and a third off-brand blue
   (#4285f6) used only by the contact form's submit button. */
.header-search-form form .btn {
	background-color: var(--sbc-blue);
	color: #fff;
}

.header-search-form form .btn:hover {
	background-color: var(--sbc-navy);
	color: #fff;
}

.contact-form input[type="submit"],
.contact-form button[type="submit"] {
	background-color: var(--sbc-blue);
	color: #fff;
}

.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
	background-color: var(--sbc-navy);
	color: #fff;
}

/* Text and icon colours still carrying the parent's blues. */
.services-section .grid .more,
.services-section-s2 .grid .more,
.grid a.more,
a.more {
	color: var(--sbc-blue);
}

a.more:hover {
	color: var(--sbc-navy);
}

.pricing-section .pricing-body .ti-check,
.pricing-section .pricing-body .ti-angle-right,
.about-section .details .ti-check,
.details ul li .ti-check,
.details ul li .ti-angle-right {
	color: var(--sbc-blue);
}

/* Default link colour inside content areas */
.elementor-widget-container a:not(.theme-btn):not(.theme-btn-s2):not(.theme-btn-s3):not(.theme-btn-s4):not(.more):not(.sbc-link) {
	color: inherit;
}

.elementor-image-gallery .gallery-item a,
.elementor-image-gallery .gallery-item img {
	color: transparent;
}

/* Contact form submit - the parent sets this one via a base .wpcf7 rule that
   outranks the .contact-form selector on some templates. */
.wpcf7 input.wpcf7-submit,
.wpcf7 input[type="submit"].wpcf7-form-control {
	background-color: var(--sbc-blue);
	color: #fff;
}

.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input[type="submit"].wpcf7-form-control:hover {
	background-color: var(--sbc-navy);
	color: #fff;
}

/* elements.css uses .contact-section .contact-form .wpcf7-form-control.wpcf7-submit
   (0,4,0) which outranks the generic button rules above - match its specificity
   rather than reach for !important. */
.contact-section .contact-form .wpcf7-form-control.wpcf7-submit,
.services-section-s2 .contact-form input[type="submit"].wpcf7-submit {
	background-color: var(--sbc-blue);
	color: #fff;
}

.contact-section .contact-form .wpcf7-form-control.wpcf7-submit:hover,
.services-section-s2 .contact-form input[type="submit"].wpcf7-submit:hover {
	background-color: var(--sbc-navy);
	color: #fff;
}

/* Footer legal links inherit the stylesheet's base `a` colour (#4285f6).
   The footer is navy, so they need to be light, not blue. */
.sbc-footer-legal a {
	color: rgba(255, 255, 255, 0.85);
}

.sbc-footer-legal a:hover,
.sbc-footer-legal a:focus {
	color: #fff;
}

/* The footer "Get in touch" phone and email are tel:/mailto: links, so they
   pick up the same off-brand #4285f6 as the legal links above. Match the
   Useful Links column instead: light text, underline on hover. */
.site-footer .contact-widget a {
	color: #eaeaea;
}

.site-footer .contact-widget a:hover,
.site-footer .contact-widget a:focus {
	color: #fff;
	text-decoration: underline;
}

/* Same story on the Contact page tiles: the phone and email are links now, so
   they need to read as body copy rather than as the stylesheet's #4285f6. */
.contact-info-section .contact-info p a {
	color: inherit;
}

.contact-info-section .contact-info p a:hover,
.contact-info-section .contact-info p a:focus {
	color: var(--sbc-blue);
	text-decoration: underline;
}

/* ------------------------------------------ Home "what every clean covers" -- */

/* The section reuses the theme's pricing widget to get a 3-up grid whose list
   field accepts markup (see docs/tools/apply-home-copy.php). It is a checklist,
   not a price table, so the price-card chrome is neutralised here: no
   "featured" middle card, no money-sized heading, no empty footer. */

.sbc-checklist .pricing-section .pricing-header {
	padding-bottom: 28px;
}

.sbc-checklist .pricing-section .pricing-header h5 {
	font-size: 20px;
	font-weight: bold;
	color: var(--sbc-navy);
	margin: 0;
	text-transform: none;
}

/* The card has no button, so the footer is an empty 40px band. */
.sbc-checklist .pricing-section .pricing-footer {
	padding: 0;
}

.sbc-checklist .pricing-section .pricing-body {
	padding-top: 28px;
}

.sbc-checklist .pricing-section .pricing-body li {
	line-height: 1.5;
}

.sbc-checklist .pricing-section .pricing-body li i {
	color: var(--sbc-blue);
}

/* Card 2 is the theme's "featured" plan and card :hover inverts the header.
   Every room is equal here, so both treatments are switched off. */
.sbc-checklist .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header,
.sbc-checklist .pricing-section .grid:hover .pricing-header {
	background-color: transparent;
}

.sbc-checklist .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header h5,
.sbc-checklist .pricing-section .grid:hover .pricing-header h5 {
	color: var(--sbc-navy);
}

.sbc-checklist .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header:after,
.sbc-checklist .pricing-section .grid:hover .pricing-header:after {
	/* The featured card paints this separator as a solid navy ribbon via
	   background-color, not just border-color -- both have to go, or card 2
	   keeps a dark bar the other two don't have. */
	background-color: transparent;
	border-color: #dae9fd;
}

@media (max-width: 767px) {
	.sbc-checklist .pricing-section .pricing-header {
		padding-bottom: 18px;
	}
	.sbc-checklist .pricing-section .pricing-body {
		padding-top: 18px;
	}
}

/* --------------------------------------------- Services: the linen choice -- */

/* Hiring our linen or having us wash yours is the one either/or on the
   Services page; everything else there is simply added to a booking. The pair
   is set as two equal cards with an "or" between them so the choice reads at a
   glance, instead of the theme's 3-up price grid leaving a gap. */

.sbc-linen-choice .pricing-section .pricing-grids {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	position: relative;
}

.sbc-linen-choice .pricing-section .pricing-grids .grid {
	width: calc(50% - 30px);
	float: none;
	display: flex;
	flex-direction: column;
}

/* Push the button to the bottom so the two cards' footers line up even though
   the lists are different lengths. */
.sbc-linen-choice .pricing-section .pricing-body {
	flex: 1 1 auto;
}

/* The "or" sits on the gap between the two cards. */
@media (min-width: 992px) {
	.sbc-linen-choice .pricing-section .pricing-grids:before {
		content: "or";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		background-color: var(--sbc-navy);
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		line-height: 54px;
		text-align: center;
		letter-spacing: 0.02em;
	}
}

/* "On enquiry" is words, not money, so it must not use the 40px price size --
   and the theme always emits the "/plan" separator even when the plan is
   empty. */
.sbc-linen-choice .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header h3 {
	font-size: 26px;
	font-weight: bold;
	color: var(--sbc-navy);
}

.sbc-linen-choice .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header h3 span {
	display: none;
}

/* Card 2 is the theme's "featured" plan. Neither option is being recommended
   over the other here, so both cards stay in the default treatment. */
.sbc-linen-choice .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header {
	background-color: transparent;
}

.sbc-linen-choice .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header h5 {
	color: #57667e;
}

.sbc-linen-choice .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-header:after {
	background-color: transparent;
	border-color: #dae9fd;
}

.sbc-linen-choice .pricing-section .pricing-grids > .grid:nth-child(2) .pricing-footer a {
	background-color: var(--sbc-blue);
	border-color: var(--sbc-blue);
	color: #fff;
}

@media (max-width: 991px) {
	.sbc-linen-choice .pricing-section .pricing-grids .grid {
		width: calc(100% - 30px);
	}
}

/* Inline calls to action inside body copy. The rule above deliberately kills
   the stylesheet's off-brand link colour for content links, which leaves a
   real link indistinguishable from the text around it -- so anything that is
   meant to be clicked carries .sbc-link and opts back in. */
.sbc-link {
	color: var(--sbc-blue);
	font-weight: 600;
	text-decoration: underline;
}

.sbc-link:hover,
.sbc-link:focus {
	color: var(--sbc-navy);
}