/* =====================================================================
   JJ Textile — Header (July 2026 redesign)
   Was previously a semi-transparent, textured, inset "floating banner"
   over the hero. The new mockup calls for something much simpler: a
   clean, flush, near-solid white bar sitting directly above the hero
   image with no gap — so most of the old floating/texture treatment is
   removed below. The header still uses Flatsome's "transparent" overlay
   positioning (so it sits on top of the hero instead of pushing it down,
   keeping the hero flush with the very top of the browser), just with a
   plain, almost fully opaque tint instead of the old glass/knit effect.

   The "transparent has-transparent" classes this relies on (Flatsome's
   own hook for taking #header out of normal flow and zeroing its
   background) used to require selecting a "Transparent Header" page
   template under Page Attributes. That's forced in PHP instead — see
   jjt_force_transparent_header_on_home() in functions.php, hooked to
   the flatsome_header_class filter — so it applies on the front page
   automatically.
   ===================================================================== */

:root {
    --jjt-header-tint: rgba(255, 255, 255, 0.97);   /* near-solid white, matching the new mockup */
    --jjt-header-tint-scrolled: rgba(255, 255, 255, 0.99);
    --jjt-top-strip: #887342; /* sampled from the client's latest mockup */
}

/* ---- Hero Ribbon ----
   Slim announcement bar above the header, with looping ticker text —
   printed by jjt_hero_ribbon_render() in functions.php via wp_body_open,
   text editable at Appearance -> Homepage Sections. Height (28px) is
   deliberately half of the 56px reference bar on socosy.co.uk that this
   was benchmarked against.

   It's "position: sticky; top: 0" (not "fixed") specifically so it slots
   into its normal spot in the very first paint without any manual
   padding-top math — a fixed-position bar would need extra CSS just to
   stop it sitting on top of (rather than pushing down) the page underneath
   it, plus separate handling for the ~32px admin toolbar WordPress adds
   for logged-in staff. Sticky does all of that automatically since it
   starts in normal document flow and only pins once you scroll past it.

   The one thing sticky doesn't handle for free: Flatsome's own sticky
   header also pins itself to "top: 0" once you scroll (its ".stuck"
   class), which would otherwise land it right on top of this ribbon,
   covering it — that's the behaviour the client saw as the top banner
   "disappearing" while scrolled + hovering a menu. Fixed below by nudging
   the stuck header down by exactly the ribbon's own height. */
:root {
    --jjt-ribbon-height: 28px;
}

.jjt-hero-ribbon {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999999; /* above the header, the mega-menu flyouts, and everything else */
    width: 100%;
    height: var(--jjt-ribbon-height);
    overflow: hidden;
    background: var(--jjt-top-strip);
    color: #fff;
    display: flex;
    align-items: center;
}

/* WordPress's own admin toolbar (staff only, never shown to customers) is
   fixed at the very top of the viewport too — nudge the ribbon down so it
   doesn't stick underneath it while scrolled. 32px desktop / 46px on the
   toolbar's own mobile breakpoint match WordPress core's own values. */
body.admin-bar .jjt-hero-ribbon {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .jjt-hero-ribbon {
        top: 46px;
    }
}

.jjt-hero-ribbon__track {
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    animation: jjt-hero-ribbon-scroll 22s linear infinite;
}

/* The track's content is the ribbon text repeated 6 times in a row (see
   functions.php) — animating exactly -50% of the track's own width moves
   the first half fully off-screen at the same moment the second half
   (an identical copy) reaches the start position, so the loop repeats
   with no visible seam or jump. */
@keyframes jjt-hero-ribbon-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.jjt-hero-ribbon__text {
    flex: none;
    padding: 0 2.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Nudge Flatsome's own stuck/sticky header down below the ribbon instead
   of letting it pin to the very top of the viewport and cover the ribbon —
   only when the ribbon is actually enabled (body class printed alongside
   the ribbon markup itself, see functions.php), so nothing shifts when a
   client disables it. */
body.jjt-has-ribbon .header-wrapper.stuck {
    top: var(--jjt-ribbon-height) !important;
}
body.jjt-has-ribbon.admin-bar .header-wrapper.stuck {
    top: calc(var(--jjt-ribbon-height) + 32px) !important;
}
@media (max-width: 782px) {
    body.jjt-has-ribbon.admin-bar .header-wrapper.stuck {
        top: calc(var(--jjt-ribbon-height) + 46px) !important;
    }
}

/* Flatsome prints its own topbar background colour as inline CSS
   (.header-top{background-color:<colour>!important}) whenever a "Top
   Bar Background Colour" is set in the Customizer. Neutralise it so the
   whole header reads as one seamless bar. */
#header .header-top {
    background-color: transparent !important;
}

/* Flush, full-width bar — no inset margins, no rounded corners. A soft
   shadow is enough to separate it from the hero image below. */
.header-wrapper {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* Flatsome renders this div with its own "fill" class (position:absolute
   + inset:0 + height:100%) so it stretches to cover the whole header
   (logo row and nav row together). Don't override position here —
   "relative" cancels that out and collapses the box down to just the
   logo's height, leaving the nav row with no background behind it. */
#header .header-bg-color {
    background-color: var(--jjt-header-tint);
    transition: background-color 0.3s ease;
}

.header-wrapper.stuck .header-bg-color {
    background-color: var(--jjt-header-tint-scrolled);
}

/* Let the hero show through where the header has no bg image of its own */
#header .header-bg-image {
    background: none;
}

/* Header is near-solid white now, so nav/logo text reads as normal dark
   text — no shadow needed against the hero behind it. */
.home .nav > li > a,
.home .logo {
    text-shadow: none;
}

/* ---- Nav typography — clean, spaced-out, uppercase (matches the new
   mockup's SHOP / DISCOVER / TRADE styling). Un-scoped from ".home" so it
   applies to the nav everywhere (Shop, Discover, Trade pages etc.), not
   just the homepage — the header/nav is the same across the whole site.
   Prefixed with #header and !important because Flatsome's own nav CSS
   targets "#header .nav > li > a" — that ID-prefixed selector otherwise
   beats a plain ".nav > li > a" rule on specificity and silently wins,
   which is why the previous size bump didn't visibly take effect. */
#header .nav > li > a {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jjt-ink, #2b2a25);
}

/* Extra breathing room between SHOP / DISCOVER / TRADE. Flatsome's own
   "nav-spacing-xlarge" class (already on this nav in the page markup) is
   its own largest built-in preset — going beyond that needs an explicit
   rule here rather than a bigger utility class. Scoped to
   ".header-nav-main" specifically (not every ".nav" in the theme) so it
   doesn't also widen unrelated menus like the mobile nav or footer nav.
   Bumped again from an initial 0.85rem, which wasn't enough. */
#header .header-nav-main > li {
    margin: 0 2rem;
}
#header .header-nav-main > li:first-child {
    margin-left: 0;
}
#header .header-nav-main > li:last-child {
    margin-right: 0;
}