/* ==========================================================================
   SuSumBa custom home-page hero — v3
   Loaded only on the site's Home page (see home.php). Every other page
   keeps the standard Cassiopeia header/layout untouched.

   Identical to the original cassiopeia_extended hero except the diagonal
   panel now shows the coastal photo (hero-coastal.jpg, set inline via
   home.php) instead of a flat black fill. Everything else — the
   food-in-skillet cutout, nav, headline, tagline, info line, CTA, and
   mobile fallback — is unchanged.
   ========================================================================== */

.susumba-hero {
    position: relative;
    width: 100%;
    background: #ffffff;
    overflow: hidden;
    min-height: 700px;
}

/* The diagonal photo panel behind the nav / hero image / CTA. Solid
   #161616 stays as the background-color fallback (shows briefly while
   the photo loads, and is what home.php's mobile media query below
   still relies on); the photo itself is layered on top via inline
   background-image (set in home.php) sized/positioned here. */
.susumba-hero-diagonal {
    position: absolute;
    inset: 0;
    background-color: #161616;
    background-size: cover;
    background-position: center 42%;
    clip-path: polygon(42% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 68%);
    z-index: 1;
}

/* Very light dark scrim so white nav/headline text keeps some guaranteed
   contrast against bright cloud/sky areas in the photo — subtle enough
   not to dull the photo, unlike the old flat black fill it replaces. */
.susumba-hero-diagonal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(8, 15, 20, 0.25) 0%, rgba(8, 15, 20, 0.08) 45%, rgba(8, 15, 20, 0.22) 100%);
}

.susumba-hero-logo {
    position: absolute;
    top: 28px;
    left: 36px;
    z-index: 3;
    max-width: 260px;
}

.susumba-hero-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.susumba-hero-nav {
    position: absolute;
    top: 30px;
    right: 44px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Burger button — hidden on desktop; the mobile media query below turns
   it on and hides the plain list instead. */
.susumba-hero-nav-toggle {
    display: none;
}

/* On desktop this wrapper must not disturb the existing flex nav — its
   children (the menu links/module output + language switcher) act as if
   they were direct children of .susumba-hero-nav, exactly as before. */
.susumba-hero-nav-list {
    display: contents;
}

.susumba-hero-nav a,
.susumba-hero-nav .nav-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding-bottom: 6px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.susumba-hero-nav a.active,
.susumba-hero-nav a:hover,
.susumba-hero-nav .nav-link:hover {
    border-bottom-color: #cba135;
}

/* Be forgiving of whatever markup the real Joomla menu module renders */
.susumba-hero-nav ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.susumba-hero-lang {
    color: #ffffff;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 4px 10px;
    background: transparent;
}

.susumba-hero-image {
    position: absolute;
    top: 96px;
    right: 4%;
    width: 52%;
    max-width: 760px;
    z-index: 2;
}

.susumba-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.susumba-hero-content {
    position: absolute;
    left: 31%;
    top: 230px;
    z-index: 3;
    max-width: 460px;
}

.susumba-hero-headline {
    color: #ffffff;
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 0.85rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.susumba-hero-tagline {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 1.15rem;
    max-width: 380px;
}

/* Now a standalone sibling of .susumba-hero-content (not nested inside it)
   so mobile can independently reorder it against .susumba-hero-image — see
   the mobile media query. On desktop it's pinned back to the exact spot it
   always occupied when it was still inside .susumba-hero-content (measured:
   left 31%, ~375px from the hero's top edge). */
.susumba-hero-info {
    position: absolute;
    z-index: 3;
    left: 31%;
    top: 375px;
    max-width: 460px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: #ffffff;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    margin: 0;
}

.susumba-hero-info-sep {
    color: #cba135;
}

.susumba-hero-cta {
    position: absolute;
    left: 8%;
    bottom: 14%;
    z-index: 3;
    display: inline-block;
    padding: 16px 34px;
    border: 2px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}

.susumba-hero-cta:hover {
    background: #ffffff;
    color: #161616;
}

/* ---- Mobile / tablet fallback: stack instead of diagonal split ----
   Selectors are scoped under body.susumba-home and several structural
   properties carry !important — this section replaces the diagonal
   hero with a simple vertical layout and must win outright regardless
   of any specificity/order quirks from Joomla's own menu-module CSS. */
@media (max-width: 991px) {
    body.susumba-home .susumba-hero {
        position: relative !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: #161616 !important;
        background-image: var(--hero-bg-url) !important;
        background-size: cover !important;
        background-position: center 42% !important;
    }

    /* Same light scrim as desktop, so the stacked white-text content
       (nav, headline, tagline, info line) stays legible over the photo.
       Negative z-index keeps it behind the in-flow static content below
       without needing to touch each child's stacking. */
    body.susumba-home .susumba-hero::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: -1 !important;
        background: linear-gradient(180deg, rgba(8, 15, 20, 0.18) 0%, rgba(8, 15, 20, 0.4) 100%) !important;
    }

    body.susumba-home .susumba-hero-diagonal {
        display: none !important;
    }

    /* Explicit visual order: logo card, then nav, then hero image, then CTA */
    body.susumba-home .susumba-hero-logo {
        order: 1 !important;
        position: static !important;
        z-index: auto !important;
        max-width: none !important;
        width: max-content !important;
        background: #ffffff !important;
        padding: 14px 22px !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
        margin: 1.75rem auto 0 !important;
    }

    body.susumba-home .susumba-hero-logo img {
        max-width: 170px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    body.susumba-home .susumba-hero-nav {
        order: 2 !important;
        position: static !important;
        z-index: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 1.75rem 0 0 !important;
        padding: 0 !important;
    }

    /* Burger button — hidden on desktop (see base rule); this is the only
       thing visible in the nav slot until tapped. */
    body.susumba-home .susumba-hero-nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.55) !important;
        border-radius: 8px !important;
        background: rgba(0, 0, 0, 0.28) !important;
        cursor: pointer !important;
    }

    body.susumba-home .susumba-hero-nav-toggle-bar {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 2px !important;
    }

    /* Collapsed dropdown panel — display:contents (the desktop rule) is
       overridden back to a real block so it can show/hide as a unit. */
    body.susumba-home .susumba-hero-nav-list {
        display: none !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0.75rem auto 0 !important;
        padding: 0.5rem 0 !important;
        background: rgba(10, 15, 20, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        border-radius: 12px !important;
    }

    body.susumba-home .susumba-hero-nav.is-open .susumba-hero-nav-list {
        display: flex !important;
    }

    body.susumba-home .susumba-hero-nav-list ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.susumba-home .susumba-hero-nav-list a,
    body.susumba-home .susumba-hero-nav-list .nav-link {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    body.susumba-home .susumba-hero-nav-list a.active,
    body.susumba-home .susumba-hero-nav-list a:hover,
    body.susumba-home .susumba-hero-nav-list .nav-link:hover {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #cba135 !important;
    }

    body.susumba-home .susumba-hero-lang {
        display: block !important;
        margin: 0.5rem auto 0.25rem !important;
    }

    /* Swapped per request: the info line now sits where the food photo
       used to be (right after the nav), and the food photo moved down to
       where the info line used to be (right after the tagline). */
    body.susumba-home .susumba-hero-info {
        order: 3 !important;
        position: static !important;
        z-index: auto !important;
        max-width: none !important;
        width: 88% !important;
        margin: 2rem auto 0 !important;
        justify-content: center !important;
    }

    body.susumba-home .susumba-hero-content {
        order: 4 !important;
        position: static !important;
        z-index: auto !important;
        max-width: none !important;
        width: 88% !important;
        margin: 2.5rem auto 0 !important;
        text-align: center !important;
    }

    body.susumba-home .susumba-hero-headline {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    body.susumba-home .susumba-hero-tagline {
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.susumba-home .susumba-hero-image {
        order: 5 !important;
        position: static !important;
        z-index: auto !important;
        width: 88% !important;
        max-width: 420px !important;
        margin: 2.5rem auto 0 !important;
    }

    body.susumba-home .susumba-hero-image img {
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    body.susumba-home .susumba-hero-cta {
        order: 6 !important;
        position: static !important;
        z-index: auto !important;
        display: block !important;
        width: max-content !important;
        margin: 0 auto 2.5rem !important;
        padding: 15px 36px !important;
        border-radius: 999px !important;
        border: 2px solid #cba135 !important;
        color: #ffffff !important;
        background: rgba(203, 161, 53, 0.08) !important;
    }

    body.susumba-home .susumba-hero-cta:hover {
        background: #cba135 !important;
        color: #161616 !important;
    }
}