/* =====================================================================
   JJ Textile — Homepage Hero Slider
   Full-viewport slider with per-slide headline, inspiration text, CTA.
   Pattern mirrors BTE hero build. Swap the CSS variables below once
   brand colours/logo are confirmed.
   ===================================================================== */

:root {
    --jjt-hero-overlay: transparent;   /* darkening removed per client request — text legibility now relies on the text-shadows on .jjt-hero__headline/__subtext below instead */
    --jjt-hero-accent: #c9a15a;                    /* placeholder brand accent — replace */
    --jjt-hero-text: #ffffff;
    --jjt-hero-dot: rgba(255, 255, 255, 0.5);
    --jjt-hero-dot-active: var(--jjt-hero-accent);
}

.jjt-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: #111;
}

/* Prefer dynamic viewport height on supporting mobile browsers so the
   hero (and dot nav inside it) accounts for the address bar instead of
   being taller than what's actually visible on load. */
@supports (height: 100dvh) {
    @media (max-width: 767px) {
        .jjt-hero {
            height: 100dvh;
            min-height: 100dvh;
        }
    }
}

/* Account for WP admin bar so it still reads as "full viewport" while logged in */
.admin-bar .jjt-hero {
    height: calc(100vh - 32px);
    min-height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .jjt-hero {
        height: calc(100vh - 46px);
        min-height: calc(100vh - 46px);
    }
}

.jjt-hero__slide {
    position: absolute;
    inset: 0;
    overflow: hidden; /* clips the zoomed/parallax-shifted image so it never overflows the slide */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    z-index: 1;
}

.jjt-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.jjt-hero__bg {
    position: absolute;
    inset: -2px; /* slight overshoot so zoom/rounding never reveals an edge */
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    object-position: center; /* overridden per-slide by an inline style from the admin's 9-point picker */
    transform: scale(var(--jjt-hero-zoom, 1));
    transform-origin: center;
    will-change: transform;
}

/* Slides with "Parallax on scroll" enabled need a much bigger overscan —
   the JS shifts the image up to 60px via translateY as you scroll (see
   MAX_OFFSET in jjt-hero-slider.js), and without extra room around the
   frame that shift exposes the hero's dark background as a solid line
   along the trailing edge. Scoped to parallax slides only so normal
   (non-parallax) slides keep their exact chosen crop/position untouched. */
.jjt-hero__slide[data-parallax="1"] .jjt-hero__bg {
    inset: -80px;
    width: calc(100% + 160px);
    height: calc(100% + 160px);
}

.jjt-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--jjt-hero-overlay);
    z-index: 1;
}

.jjt-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    color: var(--jjt-hero-text);
    text-align: left;
}

.jjt-hero__headline {
    /* Sized down from the original clamp(2.4rem, 6vw, 5rem) per client
       request. The admin field is now a textarea (see functions.php) so a
       manual line break can be typed in to control exactly where the
       headline splits over two lines, rendered via nl2br(); it still
       wraps naturally on its own (max-width below) if left as one line. */
    font-size: clamp(1.9rem, 4.6vw, 3.6rem);
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 1.25rem;
    max-width: 20ch;
    color: var(--jjt-hero-text) !important;
    /* Stronger shadow now that the dark image overlay is gone, so text
       stays legible over bright/busy parts of the photo. */
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.jjt-hero__subtext {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    line-height: 1.5;
    max-width: 42ch;
    margin: 0 0 2rem;
    opacity: 0.92;
    color: var(--jjt-hero-text) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.jjt-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    background: var(--jjt-hero-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: none;
    border-radius: 6px;
    outline: none;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jjt-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    color: #fff;
}

/* ---- Dot navigation ----
   Small circles, cycling through the JJ Textile colour palette (gold /
   sage / mauve / navy — the same 4 colours used for the Value Props
   circles on the homepage). Each dot fills with its colour on hover and
   while active; otherwise it's a translucent outline so it still reads
   against any hero photo. */
:root {
    --jjt-hero-dot-1: #c9a15a; /* gold */
    --jjt-hero-dot-2: #7c8a6b; /* sage */
    --jjt-hero-dot-3: #b9718c; /* mauve */
    --jjt-hero-dot-4: #5c6b7a; /* navy */
}

.jjt-hero__dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 10rem;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.jjt-hero__dot {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: block;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.85);
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    outline: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.jjt-hero__dot:nth-child(4n + 1) { --jjt-hero-dot-color: var(--jjt-hero-dot-1); }
.jjt-hero__dot:nth-child(4n + 2) { --jjt-hero-dot-color: var(--jjt-hero-dot-2); }
.jjt-hero__dot:nth-child(4n + 3) { --jjt-hero-dot-color: var(--jjt-hero-dot-3); }
.jjt-hero__dot:nth-child(4n + 4) { --jjt-hero-dot-color: var(--jjt-hero-dot-4); }

.jjt-hero__dot:hover {
    background-color: var(--jjt-hero-dot-color, var(--jjt-hero-accent, #c9a15a));
    border-color: var(--jjt-hero-dot-color, var(--jjt-hero-accent, #c9a15a));
    transform: scale(1.2);
}

.jjt-hero__dot.is-active {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    background-color: var(--jjt-hero-dot-color, var(--jjt-hero-accent, #c9a15a));
    border-color: var(--jjt-hero-dot-color, var(--jjt-hero-accent, #c9a15a));
}

/* ---- Prev/next arrows ---- */
.jjt-hero__arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
}
.jjt-hero__arrow:hover { background: rgba(255, 255, 255, 0.3); }
.jjt-hero__arrow--prev { left: 2rem; }
.jjt-hero__arrow--next { right: 2rem; }

@media (max-width: 767px) {
    .jjt-hero__content { padding: 0 6%; align-items: flex-start; }
    .jjt-hero__arrow { display: none; }
    .jjt-hero__dots { bottom: 7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .jjt-hero__slide { transition: none; }
}