/*
 * Fresh Start Crew — brand.css
 *
 * Loaded after the parent's main.css. Colour tokens come from two places:
 *   --bs-primary / --bs-secondary / --wpb-accent  (parent, Customizer-driven)
 *   --fsc-*                                        (child, inc/enqueue.php)
 * Prefer the --fsc-* tokens for brand-specific surfaces so a Customizer colour
 * change never breaks the sand/cream chrome.
 */

/* ============================================================
   BASE
   ============================================================ */

/* The parent uses a fixed 72px header and smooth scrolling. Without matching
   scroll padding, every in-page anchor lands underneath the header. */
html {
    scroll-padding-top: calc(var(--wpb-header-height, 72px) + 12px);
}

body.fsc-theme {
    background-color: var(--fsc-cream, #FBF7EF);
    color: var(--fsc-ink, #14312C);
    /* Belt and braces against a stray wide element forcing sideways scroll. */
    overflow-x: hidden;
}

.fsc-theme h1,
.fsc-theme h2,
.fsc-theme h3,
.fsc-theme .h1,
.fsc-theme .h2 {
    color: var(--fsc-green, #1C4F46);
    letter-spacing: -0.01em;
}

.fsc-theme a:hover,
.fsc-theme a:focus {
    color: var(--fsc-orange, #D4581C);
}

.fsc-theme ::selection {
    background: var(--fsc-sand-light, #EBE0CC);
    color: var(--fsc-ink, #14312C);
}

/* ============================================================
   TOP BAR
   ============================================================ */

.fsc-theme .wpb-topbar {
    background-color: var(--fsc-green, #1C4F46) !important;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-block: 0.4rem !important;
}

.fsc-theme .wpb-topbar a {
    color: var(--fsc-gold, #F2B231);
    text-decoration: none;
    font-weight: 700;
}

.fsc-theme .wpb-topbar a:hover,
.fsc-theme .wpb-topbar a:focus {
    color: #fff;
    text-decoration: underline;
}

/* ============================================================
   HEADER
   ============================================================ */

/* The parent pins the header with position:fixed and compensates with a fixed
   72px padding-top on the body. That maths assumes nothing sits above the
   header — but the top bar does, so it rendered *underneath* the header and
   threw every subsequent offset out by its own height.

   Sticky solves it without any measuring: the top bar scrolls away normally,
   the header pins itself once it reaches the top, and no padding is needed. */
/* Selectors here deliberately carry an element + three classes. The parent
   pins the header with `body.sticky-header .site-header` (0,2,1) and offsets
   again for the admin bar at (0,3,1), so a plain `.fsc-theme .site-header`
   (0,2,0) loses on specificity no matter how late it loads. */
body.fsc-theme.sticky-header .site-header,
body.fsc-theme .site-header {
    position: sticky;
    top: 0;
}

body.fsc-theme.admin-bar.sticky-header .site-header,
body.fsc-theme.admin-bar .site-header {
    top: 32px;
}

body.fsc-theme.sticky-header,
body.fsc-theme.admin-bar.sticky-header,
body.fsc-theme {
    padding-top: 0;
}

.fsc-theme .site-header {
    border-bottom: 3px solid var(--fsc-sand-light, #EBE0CC);
    box-shadow: 0 1px 12px rgba(20, 49, 44, 0.06);
}

.fsc-theme .fsc-logo img,
.fsc-theme .custom-logo {
    max-height: 56px;
    width: auto;
}

.fsc-theme .site-description {
    color: var(--fsc-sand, #C6A277);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.fsc-theme .navbar-light .nav-link {
    color: var(--fsc-green, #1C4F46);
    font-weight: 600;
}

/* ============================================================
   HERO
   ============================================================ */

.fsc-theme .wpb-hero {
    position: relative;
    color: #fff;
    padding-block: clamp(3rem, 8vw, 6rem);
    text-align: left;
}

.fsc-theme .wpb-hero > .container {
    max-width: 1240px;
}

.fsc-theme .wpb-hero h1 {
    color: #fff;
    max-width: 18ch;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.05;
}

/* Third line of the tagline picks up the ember accent, as on the flyer. */
.fsc-theme .wpb-hero h1 .fsc-accent {
    color: var(--fsc-gold, #F2B231);
}

.fsc-theme .wpb-hero .lead {
    color: rgba(255, 255, 255, 0.92);
    max-width: 56ch;
}

.fsc-theme .wpb-hero .btn-light {
    background: var(--fsc-orange, #D4581C);
    border-color: var(--fsc-orange, #D4581C);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fsc-theme .wpb-hero .btn-light:hover,
.fsc-theme .wpb-hero .btn-light:focus {
    background: var(--fsc-orange-dark, #AE4514);
    border-color: var(--fsc-orange-dark, #AE4514);
    color: #fff;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.fsc-theme .btn {
    border-radius: 0.3rem;
    font-weight: 600;
}

.fsc-theme .btn-primary {
    color: #fff;
}

.fsc-theme .btn-accent {
    background: var(--fsc-orange, #D4581C);
    border-color: var(--fsc-orange, #D4581C);
    color: #fff;
}

.fsc-theme .btn-accent:hover,
.fsc-theme .btn-accent:focus {
    background: var(--fsc-orange-dark, #AE4514);
    border-color: var(--fsc-orange-dark, #AE4514);
    color: #fff;
}

.fsc-theme .btn-outline-primary {
    border-color: var(--fsc-green, #1C4F46);
    color: var(--fsc-green, #1C4F46);
}

/* ============================================================
   SECTION CHROME
   ============================================================ */

/* Plain sections only need vertical rhythm — they already sit inside the
   theme's container, so adding inline padding would double-indent them. */
.fsc-section {
    padding-block: clamp(1.5rem, 4vw, 2.75rem);
}

.fsc-section > :first-child {
    margin-top: 0;
}

.fsc-section > :last-child {
    margin-bottom: 0;
}

/* Tinted bands are full-bleed panels, so these do need inline padding or the
   text sits flush against the colour. */
.fsc-section--sand,
.fsc-section--green {
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 0.5rem;
    margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

.fsc-section--sand {
    background: var(--fsc-sand-light, #EBE0CC);
}

.fsc-section--green {
    background: var(--fsc-green, #1C4F46);
    color: #fff;
}

.fsc-section--green h2,
.fsc-section--green h3 {
    color: #fff;
}

/* Muted greys are unreadable on the deep green, so anything secondary inside a
   green band switches to a translucent white instead. */
.fsc-section--green p,
.fsc-section--green li,
.fsc-section--green .fsc-trust__note,
.fsc-section--green .fsc-service-card__desc {
    color: rgba(255, 255, 255, 0.88);
}

.fsc-section--green a:not(.phx-button) {
    color: var(--fsc-gold, #F2B231);
}

/* Rule with a small cactus glyph, echoing the logo lockup. */
.fsc-rule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.75rem;
}

.fsc-rule::before,
.fsc-rule::after {
    content: "";
    height: 2px;
    background: var(--fsc-orange, #D4581C);
    flex: 1 1 auto;
    max-width: 5rem;
}

.fsc-eyebrow {
    color: var(--fsc-green, #1C4F46);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ============================================================
   SPLIT HERO — pitch beside the quote builder
   ============================================================ */

.fsc-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
    padding-block: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 900px) {
    .fsc-hero--split { grid-template-columns: 1fr; }
}

.fsc-hero__title {
    font-family: var(--phx-display, 'Arial Narrow', 'Segoe UI', system-ui, sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(2.1rem, 1.5rem + 3.4vw, 4rem);
    line-height: .94;
    letter-spacing: -.01em;
    color: var(--fsc-green, #1C4F46) !important;
    margin: .5rem 0 .9rem;
    max-width: 14ch;
}

.fsc-hero__title .fsc-accent {
    color: var(--fsc-orange, #D4581C);
}

.fsc-hero__lead {
    font-size: 1.0625rem;
    color: #5a6b66;
    max-width: 46ch;
    margin-bottom: 1.5rem;
}

.fsc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.fsc-hero__booker { min-width: 0; }

/* ── How it works ───────────────────────────────────────────── */

.fsc-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.75rem;
    counter-reset: fscstep;
    margin-top: 1.5rem;
}

/* Numbered because this genuinely is a sequence, not decoration. */
.fsc-step {
    counter-increment: fscstep;
}

.fsc-step::before {
    content: counter(fscstep);
    display: block;
    font-family: var(--phx-mono, ui-monospace, Consolas, monospace);
    font-size: .95rem;
    font-weight: 700;
    color: var(--fsc-orange, #D4581C);
    border-bottom: 2px solid currentColor;
    width: 1.6rem;
    padding-bottom: .35rem;
    margin-bottom: .8rem;
}

.fsc-step h3 {
    font-family: var(--phx-display, 'Arial Narrow', 'Segoe UI', system-ui, sans-serif);
    text-transform: uppercase;
    font-size: 1.15rem;
    margin-bottom: .35rem;
}

.fsc-step p { margin: 0; color: #5a6b66; }

.fsc-section--sand .fsc-step p { color: #4a5b56; }

/* ============================================================
   FRONT PAGE BANDS
   ============================================================ */

.fsc-hero-band {
    background: linear-gradient(135deg, var(--fsc-green, #1C4F46) 0%, var(--fsc-orange, #D4581C) 100%);
    color: #fff;
    padding: clamp(2.25rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: 0.5rem;
    margin-block: 0 clamp(1.5rem, 4vw, 2.5rem);
}

.fsc-hero-band > :first-child {
    margin-top: 0;
}

.fsc-hero-band > :last-child {
    margin-bottom: 0;
}

/* The page title duplicates the hero headline on the front page. */
.fsc-theme.home .entry-header,
.fsc-theme.home .page-title,
.fsc-theme.home .entry-title {
    display: none;
}

.fsc-hero-band .fsc-eyebrow {
    color: var(--fsc-gold, #F2B231);
}

.fsc-hero-band__title {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(2rem, 6vw, 3.5rem);
    max-width: 16ch;
    margin: 0.5rem 0 1rem;
}

.fsc-hero-band__title .fsc-accent {
    color: var(--fsc-gold, #F2B231);
}

.fsc-hero-band__lead {
    color: rgba(255, 255, 255, 0.92);
    max-width: 54ch;
    font-size: 1.0625rem;
}

.fsc-hero-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.fsc-section--green .fsc-hero-band__actions .phx-button--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.fsc-hero-band .phx-button--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
}

.fsc-hero-band .phx-button--ghost:hover,
.fsc-hero-band .phx-button--ghost:focus {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ── Service area list ──────────────────────────────────────── */

.fsc-area-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem 1rem;
    list-style: none;
    padding: 0;
}

.fsc-area-list li {
    padding: 0.5rem 0.75rem;
    background: var(--fsc-sand-light, #EBE0CC);
    border-radius: 0.25rem;
    font-weight: 600;
    color: var(--fsc-green, #1C4F46);
}

/* ── FAQ ────────────────────────────────────────────────────── */

.fsc-faq {
    border-bottom: 1px solid var(--fsc-sand, #C6A277);
    padding: 0.9rem 0;
}

.fsc-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--fsc-green, #1C4F46);
    font-size: 1.0625rem;
    list-style-position: outside;
}

.fsc-faq summary::marker {
    color: var(--fsc-orange, #D4581C);
}

.fsc-faq p {
    margin: 0.6rem 0 0;
    color: #5a6b66;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */

.fsc-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
}

.fsc-service-card {
    background: #fff;
    border: 1px solid var(--fsc-sand-light, #EBE0CC);
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fsc-service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20, 49, 44, 0.1);
}

.fsc-service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--fsc-sand-light, #EBE0CC);
    color: var(--fsc-green, #1C4F46);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.fsc-service-card__title {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fsc-green, #1C4F46);
    margin-bottom: 0.35rem;
}

.fsc-service-card__desc {
    color: #5a6b66;
    font-size: 0.9375rem;
    margin: 0;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */

.fsc-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.25rem;
}

.fsc-trust__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.fsc-trust__label {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fsc-green, #1C4F46);
    font-size: 0.875rem;
}

.fsc-trust__note {
    color: #5a6b66;
    font-size: 0.875rem;
    margin: 0;
}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */

.fsc-sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    box-shadow: 0 -2px 16px rgba(20, 49, 44, 0.22);
}

.fsc-sticky-cta a {
    flex: 1 1 50%;
    padding: 0.9rem 0.5rem;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-decoration: none;
    font-size: 0.9375rem;
}

.fsc-sticky-cta__call {
    background: var(--fsc-green, #1C4F46);
    color: #fff;
}

.fsc-sticky-cta__book {
    background: var(--fsc-orange, #D4581C);
    color: #fff;
}

.fsc-sticky-cta a:hover,
.fsc-sticky-cta a:focus {
    color: #fff;
    filter: brightness(1.08);
}

/* Only show the fixed call bar where a thumb actually needs it. At the lg
   breakpoint it was covering content on tablets and small laptops, which is
   where the "stuck scroll" at the bottom of the page came from. */
.fsc-sticky-cta {
    display: none;
}

@media (max-width: 700px) {
    .fsc-sticky-cta {
        display: flex;
    }

    body.fsc-theme {
        padding-bottom: 3.4rem;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */

/* The footer background is deep green, so every descendant has to be pulled
   off the dark body colour it would otherwise inherit. */
.fsc-theme .site-footer,
.fsc-theme .site-footer p,
.fsc-theme .site-footer li,
.fsc-theme .site-footer td,
.fsc-theme .site-footer .widget,
.fsc-theme .site-footer .textwidget,
.fsc-theme .site-footer .custom-html-widget {
    color: rgba(255, 255, 255, 0.85);
}

.fsc-theme .site-footer .widget-title,
.fsc-theme .site-footer h1,
.fsc-theme .site-footer h2,
.fsc-theme .site-footer h3,
.fsc-theme .site-footer h4 {
    color: #fff;
}

.fsc-theme .site-footer a {
    color: var(--fsc-sand, #C6A277);
}

.fsc-theme .site-footer a:hover,
.fsc-theme .site-footer a:focus {
    color: var(--fsc-gold, #F2B231);
}

.fsc-footer-contact {
    background: var(--fsc-green-dark, #143A33);
    color: #fff;
    text-align: center;
    padding-block: 2rem;
    border-top: 3px solid var(--fsc-orange, #D4581C);
}

.fsc-footer-contact__lead {
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.fsc-footer-contact__phone {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.fsc-footer-contact__phone a {
    color: var(--fsc-gold, #F2B231);
    text-decoration: none;
}

.fsc-footer-contact__area {
    color: var(--fsc-sand, #C6A277);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

/* ============================================================
   WOOCOMMERCE
   ============================================================ */

.fsc-theme .woocommerce ul.products li.product .price,
.fsc-theme .woocommerce div.product p.price,
.fsc-theme .woocommerce div.product span.price {
    color: var(--fsc-green, #1C4F46);
    font-weight: 800;
}

.fsc-theme .woocommerce #respond input#submit,
.fsc-theme .woocommerce a.button,
.fsc-theme .woocommerce button.button,
.fsc-theme .woocommerce input.button,
.fsc-theme .woocommerce a.button.alt,
.fsc-theme .woocommerce button.button.alt {
    background: var(--fsc-orange, #D4581C);
    color: #fff;
    font-weight: 700;
    border-radius: 0.3rem;
}

.fsc-theme .woocommerce #respond input#submit:hover,
.fsc-theme .woocommerce a.button:hover,
.fsc-theme .woocommerce button.button:hover,
.fsc-theme .woocommerce input.button:hover,
.fsc-theme .woocommerce a.button.alt:hover,
.fsc-theme .woocommerce button.button.alt:hover {
    background: var(--fsc-orange-dark, #AE4514);
    color: #fff;
}

.fsc-theme .woocommerce-message,
.fsc-theme .woocommerce-info {
    border-top-color: var(--fsc-green, #1C4F46);
}

.fsc-theme .woocommerce-message::before,
.fsc-theme .woocommerce-info::before {
    color: var(--fsc-green, #1C4F46);
}

.fsc-theme .woocommerce-error {
    border-top-color: var(--fsc-orange, #D4581C);
}

/* Booking plugin surfaces inherit the same chrome. */
.fsc-theme .phx-notice--scope {
    background: var(--fsc-sand-light, #EBE0CC);
    border-left: 4px solid var(--fsc-orange, #D4581C);
    color: var(--fsc-ink, #14312C);
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    font-size: 0.9375rem;
}

.fsc-theme .phx-badge--specialist {
    background: var(--fsc-orange, #D4581C);
    color: #fff;
}

.fsc-theme .phx-badge--direct {
    background: var(--fsc-green, #1C4F46);
    color: #fff;
}

.fsc-theme .phx-badge--marketplace {
    background: var(--fsc-sand, #C6A277);
    color: var(--fsc-ink, #14312C);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.fsc-theme a:focus-visible,
.fsc-theme button:focus-visible,
.fsc-theme .btn:focus-visible {
    outline: 3px solid var(--fsc-gold, #F2B231);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fsc-service-card {
        transition: none;
    }

    .fsc-service-card:hover {
        transform: none;
    }
}