/* ============================================================
 * hero-image section
 * Rendered from resources/views/components/sections/hero-image.blade.php
 * ============================================================ */

body:has(.hero-photo-zone) > header {
            position: absolute;
            inset-inline: 0;
            z-index: 40;
            background: transparent !important;
            border-bottom-color: transparent !important;
            backdrop-filter: none !important;
        }
        body:has(.hero-photo-zone) > main { margin-top: -1px; }
        .hero-photo-zone { padding-top: clamp(6rem, 10vw, 8rem); }

        /* Nav text over hero photo needs a dark scrim + brighter fill so it
           stays legible against the brass / wood tones in the image. Applies
           only to top-level nav / logo — NOT to dropdown panels, which have
           their own light backgrounds and dark text. */
        body:has(.hero-photo-zone) > header > div > nav > ul > li > a,
        body:has(.hero-photo-zone) > header > div > a .font-display,
        body:has(.hero-photo-zone) > header button.more-nav__trigger {
            color: var(--nav-text-color, #FFFDFC) !important;
            font-size: var(--nav-text-size, 0.95rem) !important;
            text-shadow: var(--nav-text-shadow, 0 1px 3px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.45));
        }
        body:has(.hero-photo-zone) > header > div > nav > ul > li > a:hover,
        body:has(.hero-photo-zone) > header > div > nav > ul > li > a:focus-visible,
        body:has(.hero-photo-zone) > header button.more-nav__trigger:hover {
            color: var(--nav-text-color-hover, #E8B96A) !important;
        }
        /* Child-item dropdown (nav items with children) — force solid dark bg so
           its own parchment text stays readable. */
        body:has(.hero-photo-zone) > header nav [x-show="dropOpen"] {
            background: #161616 !important;
            border-color: rgba(255,255,255,0.12) !important;
        }
        body:has(.hero-photo-zone) > header nav [x-show="dropOpen"] a {
            color: #F5EEDD !important;
            text-shadow: none !important;
        }
        body:has(.hero-photo-zone) > header nav [x-show="dropOpen"] a:hover {
            color: #E8B96A !important;
            background: rgba(255,255,255,0.06) !important;
        }
        /* ENQUIRE button — solid brass primary against the hero photo, matching
           the "VIEW COURSES" CTA in the hero panel so the primary action reads
           the same anywhere on the page. */
        body:has(.hero-photo-zone) > header a.border-brass-400 {
            color: #161616 !important;
            background: #E8B96A !important;
            border-color: #E8B96A !important;
            text-shadow: none !important;
            box-shadow: 0 6px 18px -8px rgba(0,0,0,0.45);
        }
        body:has(.hero-photo-zone) > header a.border-brass-400:hover,
        body:has(.hero-photo-zone) > header a.border-brass-400:focus-visible {
            color: #161616 !important;
            background: #D4A85B !important;
            border-color: #D4A85B !important;
        }