/*
Theme Name: medwaybincleaning
Theme URI: https://example.com/
Author: Medway Bin Cleaning
Description: A lightweight one-page theme for a wheelie bin cleaning business in Medway. Photo-led design: full-width photo hero, photo how-it-works, bin gallery and photo call-to-action. The homepage is built entirely from free Elementor widgets, so every photo can be swapped and every heading, price, list and FAQ edited in Elementor (free). Colours and fonts are linked to Elementor's Site Settings, and phone, email and quote-form prices are set in Appearance > Customize > Business details.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medwaybincleaning
Tags: one-column, custom-logo, custom-menu, full-width-template, block-styles, translation-ready
*/

/* ------------------------------------------------------------------
   Tokens. Declared on body (not :root) so they can read Elementor's
   global colour and font variables, which live on the body's kit class.
   Change colours in Elementor > Site Settings > Global Colors.
------------------------------------------------------------------- */
body {
	--sbc-brand: var(--e-global-color-primary, #1d5c45);
	--sbc-muted: var(--e-global-color-secondary, #4c6159);
	--sbc-ink: var(--e-global-color-text, #12261f);
	--sbc-fresh: var(--e-global-color-accent, #2fa58a);
	--sbc-soft: var(--e-global-color-sbcsoft, #dcf1ea);
	--sbc-bg: var(--e-global-color-sbcbg00, #f3f7f5);
	--sbc-surface: var(--e-global-color-sbcsurf, #ffffff);
	--sbc-line: var(--e-global-color-sbcline, #d3e1db);
	--sbc-mint: var(--e-global-color-sbcmint, #8fe3c7);
	--sbc-deep: var(--e-global-color-sbcdeep, #0b2a20);
	--sbc-on-brand: #ffffff;
	--sbc-display: var(--e-global-typography-primary-font-family, "Bricolage Grotesque"), "Arial Rounded MT Bold", system-ui, sans-serif;
	--sbc-body: var(--e-global-typography-text-font-family, "Figtree"), system-ui, -apple-system, "Segoe UI", sans-serif;
	--sbc-radius: 14px;

	margin: 0;
	background: var(--sbc-bg);
	color: var(--sbc-ink);
	font-family: var(--sbc-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a { color: var(--sbc-brand); }
:focus-visible { outline: 3px solid var(--sbc-fresh); outline-offset: 2px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3, h4 { font-family: var(--sbc-display); line-height: 1.1; text-wrap: balance; color: var(--sbc-ink); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	left: 12px; top: 12px; z-index: 100000; padding: 12px 18px;
	background: var(--sbc-surface); color: var(--sbc-ink);
}

.sbc-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------- */
.sbc-header { padding-block: 18px; background: var(--sbc-bg); }
.sbc-header .sbc-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.sbc-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sbc-ink); font-family: var(--sbc-display); font-weight: 800; font-size: 1.2rem; }
.sbc-logo svg { width: 34px; height: 34px; flex: none; }
.sbc-logo .custom-logo { max-height: 48px; width: auto; }
.sbc-header-right { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.sbc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 20px; flex-wrap: wrap; }
.sbc-nav a { color: var(--sbc-ink); text-decoration: none; font-weight: 500; }
.sbc-nav a:hover { color: var(--sbc-brand); }
.sbc-phone { font-weight: 600; color: var(--sbc-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.sbc-header-cta {
	display: inline-block; padding: 10px 18px; border-radius: 999px;
	background: var(--sbc-brand); color: var(--sbc-on-brand); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.sbc-header-cta:hover { filter: brightness(1.08); }
@media (max-width: 600px) { .sbc-nav { display: none; } .sbc-header-cta { display: none; } }

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------- */
.sbc-footer { padding-block: 32px; color: var(--sbc-muted); font-size: .9rem; border-top: 1px solid var(--sbc-line); background: var(--sbc-bg); }
.sbc-footer .sbc-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.sbc-footer a { color: var(--sbc-muted); }
.sbc-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ------------------------------------------------------------------
   Standard (non-Elementor) pages and posts
------------------------------------------------------------------- */
.sbc-content { padding-block: 48px 80px; }
.sbc-content .sbc-wrap { max-width: 760px; }
.sbc-content h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 24px; }
.sbc-entry + .sbc-entry { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--sbc-line); }
.sbc-entry-title a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------
   Elementor page styling. All selectors stay below Elementor's own
   per-widget specificity, so anything you change in the Elementor
   Style tab wins over these defaults.
------------------------------------------------------------------- */

/* Side gutter on phones: 6px + Elementor's 10px column padding = 16px */
@media (max-width: 767px) {
	.elementor-section.elementor-top-section > .elementor-container {
		padding-left: max(6px, env(safe-area-inset-left, 0px));
		padding-right: max(6px, env(safe-area-inset-right, 0px));
	}
}

.elementor-widget-heading .elementor-heading-title { font-family: var(--sbc-display); color: var(--sbc-ink); line-height: 1.1; text-wrap: balance; }
.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.4rem, 6.5vw, 4.4rem); font-weight: 800; letter-spacing: -.02em; }
.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; }
.elementor-widget-heading h3.elementor-heading-title { font-size: 1.2rem; font-weight: 600; }
.elementor-widget-heading .elementor-heading-title em { font-style: normal; color: var(--sbc-fresh); }
.elementor-widget-text-editor { color: var(--sbc-ink); }
.elementor-widget-text-editor p { margin: 0 0 .8em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

.sbc-eyebrow .elementor-heading-title {
	font-family: var(--sbc-body); font-size: .78rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--sbc-fresh); line-height: 1.4;
}
.sbc-lede { color: var(--sbc-muted); font-size: 1.08rem; max-width: 60ch; }
.sbc-lede.elementor-widget-text-editor { color: var(--sbc-muted); }

/* Buttons */
.sbc-btn .elementor-button {
	padding: 14px 22px; border-radius: 999px; border: 2px solid var(--sbc-brand);
	background: var(--sbc-brand); color: var(--sbc-on-brand);
	font-family: var(--sbc-body); font-size: 1rem; font-weight: 600; line-height: 1.2;
}
.sbc-btn-ghost .elementor-button { background: transparent; color: var(--sbc-brand); }
.sbc-btn .elementor-button:hover { filter: brightness(1.08); }
.sbc-btn.elementor-widget__width-auto { margin-right: 12px; margin-bottom: 8px; }

/* Hero ticks */
.sbc-ticks.elementor-widget { margin-top: 16px; }
.sbc-ticks .elementor-icon-list-text { color: var(--sbc-muted); font-size: .95rem; }
.sbc-ticks .elementor-icon-list-icon i { color: var(--sbc-fresh); }
.sbc-ticks .elementor-icon-list-icon svg { fill: var(--sbc-fresh); }

/* Price card: sized to its content, centred against the hero text */
.sbc-hero .sbc-card { align-self: center; }
.sbc-hero .sbc-card > .elementor-widget-wrap { height: auto; }
.sbc-card > .elementor-widget-wrap {
	background: var(--sbc-surface); border: 1px solid var(--sbc-line); border-radius: var(--sbc-radius);
	padding: 28px !important; box-shadow: 0 18px 40px -24px rgba(18, 38, 31, .35);
}
.sbc-small .elementor-heading-title { font-family: var(--sbc-body); font-size: .9rem; font-weight: 400; color: var(--sbc-muted); }
.sbc-bigprice .elementor-heading-title { font-size: 3.6rem; font-weight: 800; line-height: 1; color: var(--sbc-brand); font-variant-numeric: tabular-nums; }
.sbc-bigprice .elementor-heading-title small,
.sbc-cost .elementor-heading-title span { font-family: var(--sbc-body); font-size: 1rem; font-weight: 500; color: var(--sbc-muted); }
.sbc-price-rows p { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.sbc-price-rows p span { color: var(--sbc-muted); }

/* Collection-day strip */
.sbc-strip .elementor-heading-title { color: var(--sbc-on-brand); font-size: 1.2rem; font-weight: 800; }
.sbc-strip .elementor-widget-text-editor { color: var(--sbc-on-brand); font-weight: 500; }

/* Steps: numbered because the order matters */
.sbc-steps-col > .elementor-widget-wrap { counter-reset: sbcstep; }
.sbc-steps .elementor-column > .elementor-widget-wrap::before {
	counter-increment: sbcstep; content: counter(sbcstep);
	display: grid; place-items: center; width: 40px; height: 40px; margin: 0 0 12px;
	border-radius: 50%; background: var(--sbc-soft); color: var(--sbc-brand);
	font-family: var(--sbc-display); font-weight: 800; font-size: 1.1rem;
}
.sbc-steps .elementor-widget-text-editor { color: var(--sbc-muted); font-size: .95rem; }

/* Bands */
.sbc-band { border-top: 1px solid var(--sbc-line); border-bottom: 1px solid var(--sbc-line); }

/* Plans */
.sbc-plan > .elementor-widget-wrap {
	position: relative; background: var(--sbc-bg); border: 1px solid var(--sbc-line);
	border-radius: var(--sbc-radius); padding: 24px !important;
}
.sbc-featured > .elementor-widget-wrap { border: 2px solid var(--sbc-fresh); }
.sbc-badge.elementor-widget { position: absolute; top: -13px; left: 24px; width: auto; margin: 0; }
.sbc-badge .elementor-heading-title {
	display: inline-block; background: var(--sbc-fresh); color: var(--sbc-on-brand);
	font-family: var(--sbc-body); font-size: .75rem; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; padding: 4px 10px; border-radius: 999px; line-height: 1.3;
}
.sbc-cost .elementor-heading-title { font-size: 2.2rem; font-weight: 800; color: var(--sbc-brand); font-variant-numeric: tabular-nums; }
.sbc-plan .elementor-widget-text-editor { color: var(--sbc-muted); font-size: .95rem; }
.sbc-plan .elementor-widget-text-editor ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.sbc-note.elementor-widget-text-editor { color: var(--sbc-muted); font-size: .9rem; }
.sbc-plans + .sbc-note, .sbc-plans ~ .sbc-note { margin-top: 12px; }
@media (max-width: 767px) {
	.sbc-plans .elementor-column { margin-bottom: 24px; }
	.sbc-hero .sbc-card { margin-top: 16px; }
}

/* Towns as pills */
.sbc-towns .elementor-icon-list-items.elementor-inline-items { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.sbc-towns .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--sbc-soft);
}
.sbc-towns .elementor-icon-list-item::after { display: none !important; }
.sbc-towns .elementor-icon-list-text { color: var(--sbc-ink); font-weight: 500; font-size: .95rem; padding: 0; }

/* FAQ (Toggle widget) */
.sbc-faq { max-width: 760px; }
.sbc-faq .elementor-toggle .elementor-toggle-item {
	background: var(--sbc-surface); border: 1px solid var(--sbc-line); border-radius: 10px; margin-bottom: 12px; overflow: hidden;
}
.sbc-faq .elementor-toggle .elementor-tab-title { border: 0; padding: 16px 20px; font-weight: 600; color: var(--sbc-ink); }
.sbc-faq .elementor-toggle .elementor-tab-title a,
.sbc-faq .elementor-toggle .elementor-toggle-title { color: var(--sbc-ink); font-family: var(--sbc-body); font-weight: 600; }
.sbc-faq .elementor-toggle .elementor-toggle-icon i { color: var(--sbc-fresh); }
.sbc-faq .elementor-toggle .elementor-toggle-icon svg { fill: var(--sbc-fresh); }
.sbc-faq .elementor-toggle .elementor-tab-content { border: 0; padding: 0 20px 18px; color: var(--sbc-muted); }

/* Contact lines */
.sbc-contact p { display: grid; gap: 2px; margin: 0 0 14px; }
.sbc-contact p span { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sbc-muted); }
.sbc-contact p strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sbc-contact a { color: var(--sbc-ink); text-decoration: none; }

/* ------------------------------------------------------------------
   Quote form shortcode [sbc_quote_form]
------------------------------------------------------------------- */
.sbc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sbc-field { display: grid; gap: 6px; min-width: 0; }
.sbc-field.sbc-full { grid-column: 1 / -1; }
.sbc-form label { font-weight: 600; font-size: .92rem; color: var(--sbc-ink); }
.sbc-form input, .sbc-form select, .sbc-form textarea {
	font: inherit; color: var(--sbc-ink); background: var(--sbc-bg);
	border: 1px solid var(--sbc-line); border-radius: 10px; padding: 11px 12px; width: 100%;
}
.sbc-form textarea { resize: vertical; min-height: 84px; }
.sbc-form .sbc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sbc-submit {
	padding: 14px 22px; border-radius: 999px; border: 2px solid var(--sbc-brand);
	background: var(--sbc-brand); color: var(--sbc-on-brand); font: 600 1rem var(--sbc-body); cursor: pointer;
}
.sbc-submit:hover { filter: brightness(1.08); }
.sbc-estimate { grid-column: 1 / -1; background: var(--sbc-soft); border-radius: 10px; padding: 14px 18px; font-variant-numeric: tabular-nums; }
.sbc-estimate strong { font-family: var(--sbc-display); font-size: 1.3rem; color: var(--sbc-brand); }
.sbc-notice { grid-column: 1 / -1; border-radius: 10px; padding: 14px 18px; font-weight: 500; }
.sbc-notice-ok { background: var(--sbc-soft); color: var(--sbc-ink); }
.sbc-notice-err { background: #fde8e6; color: #8a1c13; }
.sbc-small-print { grid-column: 1 / -1; font-size: .85rem; color: var(--sbc-muted); margin: 0; }
@media (max-width: 520px) { .sbc-form { grid-template-columns: 1fr; } }


/* ==================================================================
   Version 2: photo sections
================================================================== */

/* Text on photo backgrounds (hero and call-to-action band) */
.sbc-on-photo :where(.elementor-column:not(.sbc-card)) .elementor-heading-title { color: #fff; }
.sbc-on-photo :where(.elementor-column:not(.sbc-card)) .elementor-heading-title em { color: var(--sbc-mint); }
.sbc-on-photo :where(.elementor-column:not(.sbc-card)) .sbc-eyebrow .elementor-heading-title { color: var(--sbc-mint); }
.sbc-on-photo .sbc-lede.elementor-widget-text-editor { color: rgba(255, 255, 255, .88); }
.sbc-on-photo .sbc-ticks .elementor-icon-list-text { color: rgba(255, 255, 255, .9); }
.sbc-on-photo .sbc-ticks .elementor-icon-list-icon i { color: var(--sbc-mint); }
.sbc-on-photo .sbc-ticks .elementor-icon-list-icon svg { fill: var(--sbc-mint); }
.sbc-on-photo :where(.elementor-column:not(.sbc-card)) .sbc-btn .elementor-button { background: #fff; border-color: #fff; color: var(--sbc-brand); }
.sbc-on-photo :where(.elementor-column:not(.sbc-card)) .sbc-btn-ghost .elementor-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.sbc-on-photo .elementor-widget-heading h1.elementor-heading-title { text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }

/* Price card on the photo hero */
.sbc-hero .sbc-card > .elementor-widget-wrap { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); }
.sbc-btn-block.elementor-widget { width: 100%; max-width: 100%; margin-right: 0; margin-top: 6px; }
.sbc-btn-block .elementor-button { display: block; width: 100%; text-align: center; }

/* Trust bar */
.sbc-trust { border-bottom: 1px solid var(--sbc-line); }
.sbc-trust-item .elementor-icon-box-wrapper { gap: 14px; align-items: center; text-align: start; }
.sbc-trust-item .elementor-icon-box-icon { margin: 0 !important; flex: none; }
.sbc-trust-item .elementor-icon {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--sbc-soft); color: var(--sbc-brand); font-size: 20px;
}
.sbc-trust-item .elementor-icon i { color: var(--sbc-brand); }
.sbc-trust-item .elementor-icon svg { fill: var(--sbc-brand); width: 20px; height: 20px; }
.sbc-trust-item .elementor-icon-box-title { margin: 0 0 2px; font-family: var(--sbc-body); font-size: 1rem; font-weight: 600; color: var(--sbc-ink); line-height: 1.3; }
.sbc-trust-item .elementor-icon-box-title a { color: inherit; }
.sbc-trust-item .elementor-icon-box-description { margin: 0; color: var(--sbc-muted); font-size: .88rem; line-height: 1.45; }

/* Photos */
.sbc-photo img { display: block; width: 100%; border-radius: var(--sbc-radius); object-fit: cover; background: var(--sbc-soft); }
.sbc-photo-col .sbc-photo img { box-shadow: 0 24px 50px -30px rgba(11, 42, 32, .55); }
@media (max-width: 1024px) {
	.sbc-photo-col { margin-bottom: 12px; }
}

/* Steps beside the photo: two by two */
.sbc-steps .elementor-column > .elementor-widget-wrap { align-content: flex-start; }
.sbc-steps-col .sbc-steps + .sbc-steps { margin-top: 8px; }

/* Gallery of bins */
.sbc-gallery-item .elementor-widget-text-editor { color: var(--sbc-muted); font-size: .95rem; }
.sbc-gallery-item .sbc-photo { margin-bottom: 4px; }
@media (max-width: 767px) { .sbc-gallery .elementor-column { margin-bottom: 20px; } }

/* Photo call-to-action band */
.sbc-cta .elementor-widget-wrap { justify-content: center; text-align: center; }
.sbc-cta .sbc-lede.elementor-widget { width: 100%; max-width: 100%; margin-bottom: 8px; }
.sbc-cta .sbc-lede p { max-width: 60ch; margin-inline: auto; }
.sbc-cta .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(2rem, 5vw, 3.2rem); }
.sbc-cta .sbc-btn.elementor-widget__width-auto { margin-inline: 6px; }

/* Quote form card */
.sbc-form-card > .elementor-widget-wrap {
	background: var(--sbc-bg); border: 1px solid var(--sbc-line); border-radius: var(--sbc-radius); padding: 28px !important;
}
.sbc-form-card .sbc-form input, .sbc-form-card .sbc-form select, .sbc-form-card .sbc-form textarea { background: var(--sbc-surface); }
@media (max-width: 767px) { .sbc-form-card > .elementor-widget-wrap { padding: 20px !important; } }
@media (max-width: 767px) {
	.elementor-column.sbc-card, .elementor-column.sbc-form-card { padding-inline: 10px; }
}