/* Shared visual contract. Loaded last by static pages and the booking app.
   Component files own layout; this file owns the common palette, rails,
   surfaces and control geometry. Typography roles live in typography.css. */
:root {
  --brand: #075b46;
  --brand-dark: #064735;
  --brand-deep: #102f25;
  --brand-soft: #edf4ee;
  --brand-bright: #d6f76a;
  --brand-lift: var(--brand-bright);
  --forest: var(--brand-deep);
  --ink: #172f27;
  --text: var(--ink);
  --text-soft: #52635b;
  --text-mute: var(--text-soft);
  --canvas: #f7f8f4;
  --sage: #eef3e8;
  --mint: var(--brand-soft);
  --cool: var(--canvas);
  --surface: #fff;
  --line: #d9e1d8;
  --line-soft: #e8ede6;
  --control-line: #8d9e94;
  --on-dark: #fff;
  --on-dark-soft: #d5e0d8;
  --on-dark-line: #49665a;
  --price: var(--ink);
  --price-dark: var(--brand-bright);
  --r-btn: 8px;
  --r-dense: 8px;
  --r-card: 12px;
  --r-media: 12px;
  --r-feature: 16px;
  --r-frame: 16px;
  --container: 1248px;
  --container-wide: var(--container);
  --maxw: var(--container);
  --hero-maxw: var(--container);
  --container-read: 720px;
  --container-form: 720px;
  --gutter: 24px;
  --rhythm: clamp(40px, 5vw, 64px);
  --rhythm-lg: clamp(48px, 6vw, 80px);
  --section-gap: clamp(24px, 3vw, 40px);
  --card-padding: 24px;
  --header-h: 72px;
}
@media (max-width: 599px) {
  :root { --gutter: 16px; --card-padding: 20px; }
}
body { background: var(--canvas); color: var(--ink); }
body.page-home { --opening-lime: var(--brand-bright); --opening-ink: var(--ink); }

/* Every full-width section meets the same content edges. Reading and form
   measures are intentionally narrower, inside this shared outer grid. */
body .container, body .footer__inner, body .wp-container,
body.page-home :is(.header__inner, .opening__inner, .assurances__inner, .how-it-works__inner) {
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
}
body .container--narrow { max-width: 880px; }
body .hero__inner {
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--container) - var(--gutter) * 2);
  margin-inline: auto; padding-inline: 0;
}
body .repair-opening .finder-wrap > .container { width: 100%; max-width: none; padding-inline: 0; }
body.page-home .brands--home .container { max-width: var(--container); }
body :is(.section, .home-stores, .reviews-section, .faq-section, .brand-seo, .help-band) { padding-block: var(--rhythm); }
body :is(.section--tight, .hero--compact, .hero--editorial, .document-hero, .branch-opening) { padding-block: var(--section-gap); }
body .section--lg { padding-block: var(--rhythm-lg); }
body .opener { margin-bottom: 32px; }
body :is(.hero__lede, .document-lede, .subhead, .opener__sub, .opener__lede) { max-width: 65ch; }
body .page :is(.prose, .document-paper) { line-height: 1.7; }
body .page :is(.prose, .document-paper) :is(p, li) { line-height: 1.7; }
body .page p + p { margin-top: 12px; }
body .page :is(.prose, .document-paper) h2 { margin-top: 32px; margin-bottom: 16px; }
body :is(.card, .panel, .warranty-panel) > :is(h2, h3) + p { margin-top: 12px; }
body :is(.grid, .split, .form__row) { gap: 24px; }
body .split { column-gap: 40px; }

/* Clear navigation, comfortable targets and one header at all widths. */
body .header, body .footer { background: var(--brand-deep); }
body .header { height: var(--header-h); }
body .header__inner { min-height: var(--header-h); gap: 24px; }
body .header__actions { gap: 16px; }
body .header .nav__list { gap: 24px; }
body .header :is(.nav__link, summary, button, .btn, .header__phone) { font-size: var(--type-header); font-weight: 400; }
body .header :is(.nav__link, .menu-btn, summary) { min-height: 44px; }
body .header .nav__link { display: inline-flex; align-items: center; }
body .header .nav__link[aria-current="page"] { color: var(--brand-bright); }
body .header .menu-btn { min-width: 44px; justify-content: center; }
body .help-menu > div { background: var(--surface); border-color: var(--line); border-radius: var(--r-card); box-shadow: 0 8px 24px #102f2514; }
body .help-menu > div a { color: var(--ink); border-radius: var(--r-btn); }
body .help-menu > div a:hover { background: var(--sage); }
body .lang__code { color: var(--text-soft); }
body .menu a { font-size: 16px; font-weight: 500; line-height: 1.5; min-height: 48px; }
body .menu { background: var(--canvas); isolation: isolate; }
body .menu:not([hidden]) { animation: none; }
body .menu :is(.menu__cta, .menu__call, .menu__devices a, .menu__list) { border-radius: var(--r-card); }
body .menu__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; }
body .crumbs { color: var(--text-soft); font-size: 14px; line-height: 1.5; }
body .crumbs a { display: inline-flex; min-height: 40px; align-items: center; }
@media (max-width: 1279px) { body .header .header__phone { display: none; } }
@media (min-width: 1100px) { body .header .nav { display: flex; } body .header .menu-btn { display: none; } }
@media (max-width: 1099px) { body .header .nav { display: none; } body .header .menu-btn { display: inline-flex; } }
@media (max-width: 599px) { body .header__inner, body .header__actions { gap: 8px; } }

/* Solid forest on light surfaces; lime on forest. Secondary actions always
   have a visible outline. Inline links remain visually distinct. */
body :is(.btn, .booking-primary, .booking-secondary, .wp-button, .storecard__cta, .repair-searchbox__go, .rating__btn) {
  min-height: 48px; padding: 12px 20px; border-radius: var(--r-btn);
  font-size: var(--type-control); font-weight: 600; line-height: 1.4;
  gap: 8px; text-align: center; text-decoration: none;
}
body :is(.btn--primary, .booking-primary, .storecard__cta, .repair-searchbox__go, .rating__btn) {
  background: var(--brand); border-color: var(--brand); color: var(--on-dark);
}
body :is(.btn--primary, .booking-primary, .storecard__cta, .repair-searchbox__go, .rating__btn):hover:not(:disabled) {
  background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-dark);
}
body :is(.btn--secondary, .booking-secondary) { background: var(--surface); border-color: var(--control-line); color: var(--brand); }
body :is(.btn--secondary, .booking-secondary):hover:not(:disabled) { background: var(--sage); border-color: var(--brand); color: var(--brand-dark); }
body :is(.header, .footer, .on-dark, .flood) .btn--primary,
body .opening__search .repair-searchbox__go, body .how-it-works__action .btn {
  background: var(--brand-bright); border-color: var(--brand-bright); color: var(--brand-deep);
}
body :is(.header, .footer, .on-dark, .flood) .btn--primary:hover,
body .opening__search .repair-searchbox__go:hover, body .how-it-works__action .btn:hover {
  background: #e3ff94; border-color: #e3ff94; color: var(--brand-deep);
}
body :is(.footer, .on-dark, .flood) .btn--secondary { background: transparent; border-color: var(--on-dark-line); color: var(--on-dark); }
body :is(.footer, .on-dark, .flood) .btn--secondary:hover { background: #23483a; color: var(--on-dark); }
body .header .header__actions .btn { min-height: 44px; padding: 10px 16px; font-size: var(--type-header); }
body :is(.pill, .pill-nav a, .filter, .pfilter, .tab) { border-radius: var(--r-btn); }
body :is(.pill, .pill-nav a, .tab) { min-height: 44px; font-size: 15px; line-height: 1.4; font-weight: 500; }
body .pill-nav a span { color: var(--text-soft); }
body .pill-nav a.is-current span { color: var(--brand-bright); }
body :is(.booking-text-button, .booking-text-link, .storecard__directions, .storecard__links a) { min-height: 44px; color: var(--brand); font-weight: 500; }
body :is(.prose, .document-paper, .field__hint, .enquiry-form) a { text-underline-offset: 3px; }
body :is(button, input, select, textarea, a, summary):focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
body :is(.header, .footer, .opening, .on-dark, .flood) :focus-visible { outline-color: var(--brand-bright); }
body :is(button, input, select, textarea):disabled { cursor: not-allowed; }

/* Form fields share geometry across enquiry, search, tracking and booking.
   Checkboxes/radios keep native sizing and validation keeps its own colour. */
body :is(.field, .form, .enquiry-form, .search, .locator, .booking-shell, .bk-manage) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--control-line);
  border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font-family: var(--type-family); font-size: 16px; font-weight: 400; line-height: 1.5;
}
body .search input { padding-left: 44px; }
body :is(.locator__field, .booking-shell .booking-search) { min-height: 48px; height: auto; border: 1px solid var(--control-line); border-radius: var(--r-btn); box-shadow: none; }
body :is(.locator__field, .booking-shell .booking-search) input { min-height: 46px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; }
body :is(.locator__field, .booking-shell .booking-search):focus-within { outline: 3px solid var(--brand); outline-offset: 3px; box-shadow: none; }
/* The provider search has one focus boundary, rather than nested boxes. */
body .locator .locator__field:focus-within { outline: none; border-color: var(--brand); box-shadow: none; }
body .locator .locator__field:has(input:focus-visible) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
body .locator__field input:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
body .booking-shell .booking-details-form :is(input:not([type="checkbox"]), textarea) { min-height: 48px; padding: 12px 14px; border-radius: var(--r-btn); border-color: var(--control-line); }
body .booking-shell .booking-details-form :is(input, textarea)[aria-invalid="true"] { border-color: var(--error); }
body :is(input, textarea)::placeholder { color: var(--text-soft); opacity: 1; }
body :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--error); }
body :is(.field, .booking-details-form) textarea { min-height: 128px; }
body :is(.form__row, .enquiry-form, [data-enquiry], .booking-details-form) { row-gap: 20px; }
body .page form[data-enquiry] .field { margin: 0; }
body :is(.field, .booking-details-form label) { gap: 8px; }
body :is(.field__label, .booking-details-form label > span) { display: block; margin-bottom: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
body .booking-details-form .booking-check > span { margin: 0; font-weight: 400; }
body :is(.field__hint, .field__error, .booking-field-error) { font-size: 14px; line-height: 1.5; }

/* Quiet, consistent surfaces replace the unrelated coloured card fills. */
body :is(.hero--white, .hero--canvas, .hero--sage, .repair-hub, .store-locator-page, .document-hero) { background: var(--canvas); }
body :is(.card, .panel, .storecard, .artcard, .faultcard, .warranty-panel, .quote, .document-paper) {
  border-color: var(--line); border-radius: var(--r-card); box-shadow: none;
}
body :is(.card, .panel, .storecard, .quote, .document-paper) { background: var(--surface); }
body .repair-hub .finder__device { border-radius: var(--r-card); border-color: var(--line); }
body .repair-hub .finder__device-body { background: var(--surface); padding: 20px; }
body .finder__device-name { font-size: var(--type-card); font-weight: 600; line-height: 1.4; }
body .finder__device-go { color: var(--brand); font-size: 15px; }
body .storecard { padding: 20px; }
body .storecard__name { margin-top: 16px; }
body .storecard__addr { margin-block: 12px; }
body .storecard__photo { border-radius: var(--r-btn); }
body .storecard__cta { width: 100%; }
body .storecard__status { color: var(--text-soft); }
body .store-locator-layout { gap: 48px; }
body .store-locator-trust { margin-top: 24px; padding-top: 20px; }
body .store-locator-intro .locator { margin-top: 32px; }
body .store-locator-intro h1 { font-size: var(--type-page); line-height: 1.15; }
body .store-locator-results__head h2 { font-size: var(--type-subsection); font-weight: 600; }
body .footer :is(p, .footer__blurb, .footer__note, .footer__legal, .footer__copy) { color: var(--on-dark-soft); }
body .footer :is(.footer__links a, .footer__contacts a, .footer__legal a, .footer__legal button) { min-height: 44px; line-height: 1.5; }
body .footer__inner { padding-top: 40px; padding-bottom: 24px; }
body .footer__cols { gap: 32px; }
body .cta { padding-inline: 0; background: var(--sage); color: var(--ink); }
body .cta::before { content: none; }
body .cta :is(.cta__title, .phone-link) { color: var(--ink); }
body .cta .cta__sub { color: var(--text-soft); }
body .cta.flood .btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
body .cta.flood .btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
body .cta.flood .btn--secondary { background: var(--surface); color: var(--brand); border-color: var(--control-line); }

/* Keep the approved homepage composition while sharing its grid and type. */
body.page-home .opening__title { line-height: 1.08; letter-spacing: -.04em; }
body.page-home .opening__title .opening__accent { line-height: 1.08; letter-spacing: -.04em; }
body.page-home .opening__lede { font-size: var(--type-lead); line-height: 1.6; }
body.page-home :is(.opening__disclosure, .opening__hint) { font-size: 14px; line-height: 1.5; }
body.page-home .opening__eyebrow { font-size: 12px; line-height: 1.5; }
body.page-home .opening__card { border-color: var(--line); border-radius: var(--r-card); box-shadow: none; }
body.page-home .opening__card-name { font-size: var(--type-card); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
body.page-home .opening__card-description { font-size: 14px; line-height: 1.5; }
body.page-home .opening__search .search input { font-size: 16px; border: 0; padding-left: 44px; }
body.page-home .opening__search .repair-searchbox__go { font-size: 16px; }
body.page-home .assurances__text strong { font-size: 14px; font-weight: 600; line-height: 1.5; }
body.page-home .assurances__text small { font-size: 14px; line-height: 1.5; }
body.page-home .how-it-works { background: var(--canvas); padding-block: var(--rhythm); }
body.page-home .how-it-works__head h2 { font-size: var(--type-section); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
body.page-home .how-it-works__step { border: 1px solid var(--line-soft); border-radius: var(--r-card); }
body.page-home .how-it-works__step h3 { font-size: var(--type-card); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
body.page-home .how-it-works__step p { font-size: 16px; color: var(--text-soft); line-height: 1.6; }
body.page-home .how-it-works__intro { font-size: var(--type-lead); color: var(--text-soft); line-height: 1.6; }
body.page-home .how-it-works__eyebrow { color: var(--brand); }

/* Tracking is a form within the shared shell, not a separate visual theme. */
body.tracking-page-shell :is(.crumbs, .footer) > .container { max-width: var(--container); padding-inline: var(--gutter); }
body .tracking-page .bk-manage__head h1 { font-size: var(--type-page); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
body .tracking-page :is(.field input, .bk-manage__lookup > .btn) { height: auto; min-height: 48px; border-radius: var(--r-btn); }
body .tracking-page .field label { font-size: 14px; font-weight: 600; line-height: 1.5; }
body .tracking-page .field small, body .tracking-page__field-error { font-size: 14px; line-height: 1.5; }
body .tracking-page__lookup { border-radius: var(--r-card); box-shadow: none; }
body .tracking-page :is(input, button, a):focus-visible { outline-color: var(--brand); }
body .tracking-page__help :is(a, button):focus-visible { outline-color: var(--brand-bright); }

/* Booking uses the same controls and palette, with a focused form rail. */
body.unified-booking .booking-shell {
  --bk-bg: var(--canvas); --bk-brand: var(--brand); --bk-green: var(--brand);
  --bk-brand-hover: var(--brand-dark); --bk-brand-soft: var(--brand-soft);
  --bk-ink: var(--ink); --bk-text: var(--ink); --bk-muted: var(--text-soft);
  --bk-sage: var(--sage); --bk-plate: var(--canvas);
  --bk-border: var(--line); --bk-line: var(--line); --bk-line-strong: var(--control-line);
  background: var(--canvas); color: var(--ink);
}
body .booking-shell .booking-layout { width: calc(100% - var(--gutter) * 2); max-width: 1200px; padding: 32px 0 48px; }
body .booking-shell .booking-progress-wrap { background: var(--sage); border-color: var(--line); }
body .booking-shell.quote-screen .booking-progress-wrap { background: transparent; border: 0; }
body .booking-shell .booking-layout.without-summary { width: calc(100% - var(--gutter) * 2); max-width: calc(var(--container) - var(--gutter) * 2); }
body .booking-shell:not(.quote-screen) .booking-progress {
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--container) - var(--gutter) * 2);
}
body .booking-shell .booking-layout.without-summary :is(.booking-step-heading, .booking-fast-search, .smart-results) { width: 100%; max-width: none; }
body .booking-shell .booking-layout.without-summary .booking-search { width: 100%; }
body .booking-shell.quote-screen .booking-layout.without-summary { max-width: 720px; }
body .booking-shell .booking-step-heading h1 { font-size: var(--type-page); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
body .booking-shell .booking-step-heading > div { color: var(--text-soft); font-size: 16px; line-height: 1.6; }
body .booking-shell :is(.issue-panel, .appointment-summary, .booking-details-form, .review-booking, .quote-card, .appointment-store-card, .brand-card, .device-choice) { border-color: var(--line); border-radius: var(--r-card); box-shadow: none; }
body .booking-shell :is(.fault-row, .repair-option, .model-row) { border-radius: var(--r-btn); }
body .booking-shell :is(.issue-panel h2, .appointment-visit h2, .contact-form-heading h2) { font-size: var(--type-subsection); font-weight: 600; line-height: 1.35; }
body .booking-shell :is(.appointment-summary h2, .review-booking h2, .booking-section__head h2) { font-size: var(--type-card); font-weight: 600; line-height: 1.4; }
body .booking-shell :is(.issue-intro, .issue-help p, .quote-card > p, .quote-next) { color: var(--text-soft); line-height: 1.6; }
body .booking-shell .quote-card > p { font-size: 16px; }
body .booking-shell .quote-card > small { font-size: 14px; color: var(--text-soft); }
body .booking-shell .booking-primary { background: var(--brand); border-color: var(--brand); color: white; }
body .booking-shell .booking-secondary { background: var(--surface); border-color: var(--control-line); color: var(--brand); }
body .booking-shell .quote-card__icon { background: var(--brand-soft); color: var(--brand); }
@media (max-width: 767px) {
  body .split { column-gap: 24px; }
  body .store-locator-layout { gap: 32px; }
  body .store-locator-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding-top: 16px; }
  body .store-locator-trust li { font-size: 14px; line-height: 1.5; }
  body .store-locator-intro .locator { margin-top: 24px; }
  body .booking-shell .booking-layout { padding-block: 24px 40px; }
  body .booking-shell .booking-step-heading h1 { font-size: 32px; }
  body .footer__cols { gap: 24px 16px; }
  body .opening__faults a { min-height: 44px; }
}