/* =============================================================================
   mocreates-sfl — SFL Steelworks skin over mocreates-base
   -----------------------------------------------------------------------------
   Scope: SFL-specific treatments only — black header, gradient nav underline,
   gradient CTA buttons, and the stacked-chevron signature element.

   Palette source of truth for the FIVE base semantic tokens
   (--color-primary/secondary/accent/text/background) is ACF Brand & Colours —
   see README.md for the exact values to enter. This file only adds SFL-only
   tokens (--sfl-*) and the treatments that use them, so the ACF-driven palette
   stays authoritative.
   ============================================================================= */


/* ── SFL design tokens ─────────────────────────────────────────────────────── */

:root {
    --sfl-black:    #0B0B0B;   /* header, dark sections, footer                 */
    --sfl-charcoal: #1A1816;   /* secondary dark surface (panels on black)      */
    --sfl-orange:   #F7941D;   /* gradient start / accent / links               */
    --sfl-gold:     #FFD200;   /* gradient mid-point                            */
    --sfl-yellow:   #FFF200;   /* gradient end / highlight                      */
    --sfl-white:    #F5F5F3;   /* off-white body background                     */

    /* The ONE signature gradient — the exact chevron-mark gradient. Reuse it
       everywhere a gradient is wanted (CTAs, nav underline, dividers); do not
       invent a second gradient. */
    --sfl-gradient: linear-gradient(90deg, #F7941D 0%, #FFD200 50%, #FFF200 100%);

    /* Header height per brief §2 (88px → 64px on scroll). Base default is 80px;
       --header-primary-h-sm (64px) is inherited from the base unchanged. */
    --header-primary-h: 88px;
}


/* =============================================================================
   HEADER  (brief §2)
   Black, full-bleed, light text, wide container, gradient nav underline.
   ============================================================================= */

.site-header {
    background-color: var(--sfl-black);
    /* Force light text regardless of the base's ACF-driven contrast classes,
       so the header reads correctly even before Brand options are set. */
    --color-text:  var(--color-text-on-dark, #ffffff);
    --color-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.55));
    color: var(--color-text);
    border-bottom: 1px solid rgba(245, 245, 243, 0.08);
}

.site-header.is-scrolled {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

/* Secondary (phone/email) bar — lifted just off pure black for separation. */
.site-header__secondary {
    background-color: var(--sfl-charcoal);
}

/* Header inner sits in the WIDE container — nav shouldn't feel boxed into the
   body measure on large screens (brief §2). Both bars use .container. */
.site-header .container {
    max-width: var(--container-wide);
}


/* ── Primary nav: gradient underline on hover / current ────────────────────── */

.site-header__menu > li > a {
    position: relative;
}

/* Neutralise the base's dark hover bg + black hover text (both invisible on a
   black header). The gradient underline below is the state signal instead. */
.site-header__menu > li:hover > a,
.site-header__menu > li > a:hover,
.site-header__menu > li.current-menu-item > a,
.site-header__menu > li.current_page_item > a,
.site-header__menu > li.current-menu-parent > a,
.site-header__menu > li.current-menu-ancestor > a,
.site-header__menu > li.current_page_ancestor > a {
    color: var(--sfl-white);
    background-color: transparent;
}

/* 2px brand-gradient underline — grows from the left on hover / active. */
.site-header__menu > li > a::after {
    content: "";
    position: absolute;
    left: 0.875rem;    /* aligns to the link's own horizontal padding */
    right: 0.875rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--sfl-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base, 250ms ease);
}

.site-header__menu > li > a:hover::after,
.site-header__menu > li.current-menu-item > a::after,
.site-header__menu > li.current-menu-parent > a::after,
.site-header__menu > li.current-menu-ancestor > a::after,
.site-header__menu > li.current_page_item > a::after,
.site-header__menu > li.current_page_ancestor > a::after {
    transform: scaleX(1);
}

/* Dropdown panels stay on their own light surface (base default) — the burger
   toggle bars already read --color-text, now white. Nothing more needed here. */


/* =============================================================================
   CTA BUTTONS  (brief §3)
   Signature gradient fill + trailing chevron on the primary button.
   ============================================================================= */

/* Gradient "wave": an oversized gradient whose position slides on hover, so the
   colour appears to flow/reverse rather than swapping (Round 2 §1). */
.btn--primary {
    background-image: linear-gradient(
        90deg,
        var(--sfl-orange), var(--sfl-gold), var(--sfl-yellow),
        var(--sfl-gold), var(--sfl-orange)
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: var(--sfl-black);       /* dark text reads on the light gradient */
    border-color: transparent;
    /* Replace the base .btn transition, keeping active/press feedback intact. */
    transition:
        background-position 0.5s ease,
        transform           var(--transition-fast, 150ms ease),
        box-shadow          var(--transition-base, 250ms ease);
}

@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover {
        background-position: 100% 0%;
        /* Drop the base theme's dark hover border — keep only the gradient wave. */
        border-color: transparent;
    }
}

/* Reduced motion: no slide — hold the resting gradient. */
@media (prefers-reduced-motion: reduce) {
    .btn--primary {
        transition: none;
    }
    .btn--primary:hover {
        background-position: 0% 0%;
    }
}

/* Trailing chevron — echoes the mark instead of a generic arrow glyph.
   Uses mask so it inherits the button's text colour. */
.btn--primary::after {
    content: "";
    width: 0.7em;
    height: 0.9em;
    margin-left: 0.1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url(../img/chevron-right.svg) no-repeat center / contain;
            mask: url(../img/chevron-right.svg) no-repeat center / contain;
}

/* Opt-out for primary buttons where a chevron doesn't belong (e.g. a form
   submit): add class "btn--no-chevron". */
.btn--primary.btn--no-chevron::after {
    content: none;
}


/* =============================================================================
   CHEVRON SIGNATURE  (brief §3)
   One strong placement (hero watermark) + a small supporting use (divider).
   Both are OPT-IN via a section's ACF "Extra CSS Class(es)" field, so nothing
   is imposed on sections that shouldn't carry the mark.
   ============================================================================= */

/* Hero watermark — add "sfl-chevron" to the (dark) hero section. Large,
   low-opacity brand mark bleeding off the right edge behind the headline.
   Placeholder texture until a real workshop photo is set via the base
   background-image field (brief §4). */
.section.sfl-chevron::before {
    content: "";
    position: absolute;
    z-index: 0;                     /* behind content (lifted to z-index:1 below) */
    top: 50%;
    right: -4%;
    transform: translateY(-50%);
    width: min(55vw, 620px);
    aspect-ratio: 849 / 898;        /* the mark's native ratio */
    background-color: var(--sfl-white);
    opacity: 0.05;
    -webkit-mask: url(../img/chevron.svg) no-repeat center / contain;
            mask: url(../img/chevron.svg) no-repeat center / contain;
    pointer-events: none;
}

/* Keep the watermark BEHIND the section's real content regardless of whether a
   given section template wraps its content in a positioned .section__inner. */
.section.sfl-chevron > * {
    position: relative;
    z-index: 1;
}

/* On a light-background section, flip the watermark to dark so it stays visible. */
.section.sfl-chevron.section--light-bg::before {
    background-color: var(--sfl-black);
    opacity: 0.04;
}

/* Section divider — add "sfl-divide-top". A small centred gradient chevron sits
   just inside the section's top edge in place of a plain horizontal rule.
   (Kept inside the top edge because .section uses overflow:hidden.) */
.section.sfl-divide-top::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 42px;
    background: var(--sfl-gradient);
    -webkit-mask: url(../img/chevron.svg) no-repeat center / contain;
            mask: url(../img/chevron.svg) no-repeat center / contain;
    pointer-events: none;
}


/* =============================================================================
   PARALLAX CTA — card  (Brief 07 §2, Direction 1: docked)
   Docked to the section's bottom-right, aligned to the 1280px container edge
   (.parallax-cta__inner is the container, so the right column already ends on the
   grid edge — align-self drops it to the bottom). Transparent centre with a white
   border so the photo reads through; no hard shadow.
   ============================================================================= */

.parallax-cta__card {
    background: transparent;
    border: 2px solid var(--sfl-white);
    border-radius: var(--radius-lg);
    box-shadow: none;
    align-self: end; /* dock to the bottom of the container row */
}

/* Heading was dark for the solid-orange fill; it now sits on the photo. */
.parallax-cta__card-heading {
    color: var(--sfl-white);
}

/* CONTRAST SAFETY VALVE — the section's legibility overlay is lightest exactly
   where this card sits (it fades 88% → 25% left-to-right), so white text may need
   help over a busy photo. If legibility suffers, enable this: it backs only the
   card's contents, not the full card fill.
.parallax-cta__card-heading {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
*/


/* =============================================================================
   PARALLAX CTA — button  (Brief 05 §2)
   The base layout styles this button as a one-off dark pill (full radius, 52px
   min-height, its own hover lift). Reset it to the site's primary button
   treatment so radius, padding, weight and the gradient-wave hover match every
   other CTA (header, hero, cards).
   ============================================================================= */

.parallax-cta__cta.btn--primary {
    background-color: transparent;
    background-image: linear-gradient(
        90deg,
        var(--sfl-orange), var(--sfl-gold), var(--sfl-yellow),
        var(--sfl-gold), var(--sfl-orange)
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: var(--sfl-black);
    border-color: transparent;
    border-radius: var(--radius-md);
    min-height: 0;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    transition:
        background-position 0.5s ease,
        transform           var(--transition-fast, 150ms ease),
        box-shadow          var(--transition-base, 250ms ease);
}

@media (hover: hover) and (pointer: fine) {
    .parallax-cta__cta.btn--primary:hover {
        background-position: 100% 0%;
        border-color: transparent;
        transform: none; /* drop the base one-off lift — wave is the hover state */
    }
}

@media (prefers-reduced-motion: reduce) {
    .parallax-cta__cta.btn--primary {
        transition: none;
    }
    .parallax-cta__cta.btn--primary:hover {
        background-position: 0% 0%;
    }
}


/* =============================================================================
   MASKED IMAGE SHUFFLE — chevron shape  (Round 4)
   Match the module's aspect ratio to the chevron mark's viewBox (849.46 × 898.07)
   so the masked images fill the shape tightly. The mask URL itself is supplied by
   the mcs_shuffle_mask_url filter (functions.php).
   ============================================================================= */

.shuffle-module {
    --shuffle-ratio: 849 / 898;
}


/* =============================================================================
   CARD HOVER  (Round 2 §2)
   Services grid cards + Team card: flat orange border highlight + slight zoom.
   (Flat orange chosen over a gradient border per the brief — keeps the gradient
   "spent" mainly on CTAs/dividers.) Real base classes are .service-item and
   .team-member (not .service-card/.team-card).
   ============================================================================= */

.service-item,
.team-member {
    transition:
        transform    0.25s ease,
        border-color 0.25s ease,
        box-shadow   0.25s ease;
}

/* .team-member is a bare flex column in the base — give it a card surface so the
   border/zoom read as a hover on a card (the SFL "Zac" bio card). */
.team-member {
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

@media (hover: hover) and (pointer: fine) {
    /* .service-item[href] included so this wins over the base card-link hover. */
    .service-item:hover,
    .service-item[href]:hover,
    .team-member:hover {
        transform: scale(1.02);
        border-color: var(--sfl-orange);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-item,
    .team-member {
        transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .service-item:hover,
    .service-item[href]:hover,
    .team-member:hover {
        transform: none;
    }
}


/* =============================================================================
   WHY IT WORKS — mobile heading scale  (Round 3 §3)
   The inherited base section renders its heading smaller than the Hero on mobile.
   Match the Hero (hero_split) heading scale here — SFL-only, so the base section's
   default sizing is untouched for other sites. Kept as a single token so the two
   stay in sync; if the Hero heading clamp is ever changed, update this value too.
   (Assumes the SFL hero is the hero_split layout — if it's the simple `hero`
   layout instead, change the value to clamp(2.25rem, 6vw, 5rem).)
   ============================================================================= */

:root {
    --sfl-hero-heading-mobile: clamp(2.9rem, 13vw, 4.4rem); /* mirrors .hero-split__heading @ <576px */
}

@media (max-width: 767px) {
    .section--why_it_works .why-it-works__heading {
        font-size: var(--sfl-hero-heading-mobile);
        line-height: 0.95;
    }
}


/* =============================================================================
   GRAVITY FORMS — submit button  (Round 3 §5)
   The base GF styles are token-driven and already inherit SFL's palette. Only the
   submit button needs the site's signature treatment: give it the same gradient
   "wave" as .btn--primary (Round 2 §1). GF renders its own <input>/<button>, so we
   target its selectors directly rather than the theme button component.
   (No trailing chevron here — an <input type="submit"> can't render ::after.)
   ============================================================================= */

.gform_footer input[type="submit"],
.gform_footer button[type="submit"],
.gform_page_footer input[type="submit"],
.gform_page_footer button[type="submit"] {
    background-image: linear-gradient(
        90deg,
        var(--sfl-orange), var(--sfl-gold), var(--sfl-yellow),
        var(--sfl-gold), var(--sfl-orange)
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: var(--sfl-black);
    border-color: transparent;
    transition:
        background-position 0.5s ease,
        transform           var(--transition-fast, 150ms ease),
        box-shadow          var(--transition-base, 250ms ease);
}

@media (hover: hover) and (pointer: fine) {
    .gform_footer input[type="submit"]:hover,
    .gform_footer button[type="submit"]:hover,
    .gform_page_footer input[type="submit"]:hover,
    .gform_page_footer button[type="submit"]:hover {
        background-position: 100% 0%;
        border-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gform_footer input[type="submit"],
    .gform_footer button[type="submit"],
    .gform_page_footer input[type="submit"],
    .gform_page_footer button[type="submit"] {
        transition: none;
    }
    .gform_footer input[type="submit"]:hover,
    .gform_footer button[type="submit"]:hover,
    .gform_page_footer input[type="submit"]:hover,
    .gform_page_footer button[type="submit"]:hover {
        background-position: 0% 0%;
    }
}