/*
 * Jimmy Lloyd Elementor Kit — Main Stylesheet
 * No build step. Plain CSS, loaded globally via WordPress enqueue.
 *
 * Targets:
 *  - CSS custom properties (variables)
 *  - Global base (body, headings)
 *  - Elementor widget overrides
 *  - Custom section classes (added via Elementor "CSS Classes" field)
 *  - Gallery shortcode [jimmy_gallery]
 *  - Lightbox
 *  - Responsive
 *  - RTL
 */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

:root {
    /* ── Brand colours — exact match to Base44 tailwind.config.js ── */
    --jl-gold:            #B89456;
    --jl-obsidian:        #0A0806;
    --jl-charcoal:        #1A1816;
    --jl-parchment:       #E8E2D6;

    /* ── Semantic aliases (requested in brief) ── */
    --jl-bg:              #0A0806;
    --jl-text:            #E8E2D6;
    --jl-text-muted:      rgba(232, 226, 214, 0.60);  /* parchment/60 */
    --jl-text-dim:        rgba(232, 226, 214, 0.40);  /* parchment/40 */
    --jl-accent:          #B89456;
    --jl-border-subtle:   rgba(184, 148, 86, 0.10);   /* gold/10  — header border on scroll */
    --jl-border-light:    rgba(184, 148, 86, 0.25);   /* gold/25  — card borders */

    /* ── Legacy shorthands kept for back-compat ── */
    --jl-mid:             rgba(232, 226, 214, 0.65);
    --jl-dim:             rgba(232, 226, 214, 0.40);

    /* ── Typography ── */
    --jl-font-heading:    'Playfair Display', Georgia, serif;
    --jl-font-display:    'Playfair Display', Georgia, serif;
    --jl-font-body:       'Inter', system-ui, sans-serif;

    /* ── Layout ── */
    --jl-container-max:   1280px;   /* max-w-7xl */
    --jl-section-pad-v:   80px;
    --jl-section-pad-h:   40px;
    --jl-header-h:        64px;     /* h-16 */
    --jl-header-h-md:     80px;     /* h-20 */

    --jl-radius:          0px;
    --jl-transition:      0.35s ease;
}

/* ============================================================
   2. GLOBAL BASE
   ============================================================ */

html,
body {
    background-color: var(--jl-obsidian);
    color: var(--jl-parchment);
    font-family: var(--jl-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove default padding that some themes apply */
.elementor-page .site-content,
.elementor-page #content,
.elementor-page .entry-content {
    padding: 0;
    margin: 0;
}

/* ============================================================
   3. ELEMENTOR GLOBAL OVERRIDES
   ============================================================ */

/* Force dark background on all Elementor pages */
body.elementor-page {
    background-color: var(--jl-obsidian);
}

/* Headings: use display font, parchment color by default */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--jl-font-display);
    color: var(--jl-parchment);
    line-height: 1.2;
}

/* Text editor: body font */
.elementor-widget-text-editor .elementor-widget-container {
    font-family: var(--jl-font-body);
    color: var(--jl-mid);
    line-height: 1.85;
}

/* Image: remove default margin */
.elementor-widget-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image box: dark theme styling */
.elementor-widget-image-box.jl-image-box .elementor-image-box-wrapper {
    text-align: left;
    border-bottom: 1px solid rgba(184, 148, 86, 0.25);
    padding-bottom: 24px;
}

.elementor-widget-image-box.jl-image-box .elementor-image-box-img {
    margin-bottom: 20px;
    overflow: hidden;
}

.elementor-widget-image-box.jl-image-box .elementor-image-box-img img {
    transition: transform 0.8s ease;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.elementor-widget-image-box.jl-image-box:hover .elementor-image-box-img img {
    transform: scale(1.04);
}

.elementor-widget-image-box.jl-image-box .elementor-image-box-title {
    font-family: var(--jl-font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--jl-parchment);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.elementor-widget-image-box.jl-image-box .elementor-image-box-description {
    font-family: var(--jl-font-body);
    font-size: 0.875rem;
    color: var(--jl-mid);
    line-height: 1.8;
}

/* Divider: gold accent line */
.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--jl-gold);
}

/* ============================================================
   4. BUTTON STYLES
   ============================================================ */

/* Base — override Elementor button defaults */
.elementor-widget-button .elementor-button {
    font-family: var(--jl-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--jl-radius);
    padding: 14px 28px;
    transition: background-color var(--jl-transition), color var(--jl-transition), border-color var(--jl-transition);
    cursor: pointer;
}

/* Primary (hero CTA) — Base44 uses border-gold/50 + hover:bg-gold/10 */
.jl-btn-primary .elementor-button {
    background-color: transparent !important;
    color: var(--jl-gold) !important;
    border: 1px solid rgba(184, 148, 86, 0.50) !important;
}

.jl-btn-primary .elementor-button:hover {
    background-color: rgba(184, 148, 86, 0.10) !important;
    color: var(--jl-gold) !important;
    border-color: var(--jl-gold) !important;
}

/* Outline (inner page CTAs) — full gold border, fills on hover */
.jl-btn-outline .elementor-button {
    background-color: transparent !important;
    color: var(--jl-gold) !important;
    border: 1px solid var(--jl-gold) !important;
}

.jl-btn-outline .elementor-button:hover {
    background-color: var(--jl-gold) !important;
    color: var(--jl-obsidian) !important;
}

/* Spotify: dark with green accent */
.jl-btn-spotify .elementor-button {
    background-color: #1DB954 !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 36px;
    font-size: 0.75rem;
}

.jl-btn-spotify .elementor-button:hover {
    background-color: #1aad4d !important;
    color: #fff !important;
}

/* ============================================================
   5. HERO SECTION
   ============================================================ */

.jl-hero-section {
    position: relative;
    overflow: hidden;
}

/* Match Base44: background-position 50% 40% keeps subject upper-centre */
.jl-hero-section.elementor-section {
    background-position: 50% 40% !important;
}

/* Ken Burns keyframe (applied further below) */
@keyframes jl-ken-burns {
    0%   { transform: scale(1.0); }
    100% { transform: scale(1.08); }
}

/* Replace Elementor's flat solid overlay with Base44's directional gradient:
   bg-gradient-to-t from-obsidian via-obsidian/30 to-transparent */
.jl-hero-section > .elementor-background-overlay {
    background: linear-gradient(
        to top,
        #0A0806         0%,
        rgba(10,8,6,.55) 30%,
        rgba(10,8,6,.15) 65%,
        transparent     100%
    ) !important;
    animation: none !important;
}

/* Gold accent divider */
.jl-hero-section .elementor-widget-divider {
    margin-bottom: 16px;
}

/* Hero title — Base44 is NOT italic, normal weight, tracking-wide
   Sizes: text-3xl (1.875rem) → md:text-4xl → lg:text-5xl (3rem) */
.jl-hero-section .elementor-heading-title {
    font-size: clamp(1.875rem, 4.5vw, 3.125rem);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    color: var(--jl-parchment);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

/* Hero subtitle — parchment/60, font-light (300), max-w-md, tracking-wide */
.jl-hero-section .elementor-widget-text-editor p {
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    color: var(--jl-text-muted);
    font-weight: 300;
    max-width: 28rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* ============================================================
   6. TRIBUTE SECTION
   ============================================================ */

.jl-tribute-section .jl-tribute-image img {
    object-fit: cover;
    height: 100%;
    min-height: 500px;
}

.jl-tribute-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 60px 60px 80px !important;
}

.jl-tribute-section .jl-quote-heading .elementor-heading-title {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--jl-parchment);
}

/* ============================================================
   7. PARALLAX STRIP
   ============================================================ */

.jl-parallax-section {
    position: relative;
    /* Elementor handles background-attachment: fixed via inline styles */
}

/* Mobile: disable fixed attachment (causes issues on iOS) */
@media (max-width: 767px) {
    .jl-parallax-section .elementor-section-background,
    .jl-parallax-section > .elementor-background-overlay {
        background-attachment: scroll !important;
    }
}

/* ============================================================
   8. LEGACY HIGHLIGHTS
   ============================================================ */

.jl-highlights-section .elementor-column {
    padding: 0 16px;
}

.jl-highlights-section .elementor-widget-image-box.jl-image-box {
    padding: 32px 0;
}

/* Gold accent on hover */
.jl-highlights-section .elementor-widget-image-box.jl-image-box:hover .elementor-image-box-title {
    color: var(--jl-gold);
    transition: color var(--jl-transition);
}

/* ============================================================
   9. VIDEO SECTIONS
   ============================================================ */

.jl-video-preview-section .elementor-column,
.jl-video-row .elementor-column {
    padding: 0;
}

.elementor-widget-video .elementor-custom-embed-image-overlay {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.elementor-widget-video .elementor-custom-embed-image-overlay img {
    transition: transform 0.6s ease;
    display: block;
    width: 100%;
}

.elementor-widget-video .elementor-custom-embed-image-overlay:hover img {
    transform: scale(1.04);
}

/* Play button overlay */
.elementor-widget-video .elementor-custom-embed-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,8,6,0.35);
    transition: background var(--jl-transition);
}

.elementor-widget-video .elementor-custom-embed-play:hover {
    background: rgba(10,8,6,0.55);
}

.elementor-widget-video .elementor-custom-embed-play i,
.elementor-widget-video .elementor-custom-embed-play svg {
    color: var(--jl-gold);
    font-size: 3rem;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}

.jl-video-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 60px !important;
}

/* ============================================================
   10. MUSIC CTA SECTION
   ============================================================ */

.jl-music-cta-section {
    text-align: center;
}

.jl-music-cta-section .elementor-heading-title {
    font-size: 2.5rem;
    color: var(--jl-parchment);
}

.jl-spotify-embed {
    max-width: 640px;
    margin: 32px auto 0;
}

.jl-spotify-embed iframe {
    width: 100%;
    border-radius: 0;
    border: 1px solid rgba(184, 148, 86, 0.2);
}

/* ============================================================
   11. PAGE HEADER (inner pages)
   ============================================================ */

.jl-page-header {
    position: relative;
}

.jl-page-header .elementor-heading-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    color: var(--jl-parchment);
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

/* ============================================================
   12. STORY SECTIONS (About page)
   ============================================================ */

.jl-story-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: block;
}

.jl-story-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 60px !important;
}

.jl-story-text-col .elementor-heading-title {
    font-size: 2rem;
}

/* ============================================================
   13. PULL QUOTE SECTION
   ============================================================ */

.jl-pull-quote-section .elementor-heading-title {
    font-style: italic;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: var(--jl-parchment);
    max-width: 760px;
    margin-inline: auto;
    line-height: 1.6;
}

/* ============================================================
   14. DISCOGRAPHY
   ============================================================ */

.jl-discography-header .elementor-heading-title {
    font-size: 2.5rem;
    color: var(--jl-parchment);
}

.jl-discography-grid .jl-image-box .elementor-image-box-title {
    font-size: 1rem;
}

/* ============================================================
   15. CONTACT SECTION
   ============================================================ */

.jl-contact-section {
    min-height: 60vh;
}

.jl-contact-sidebar {
    border-inline-start: 1px solid rgba(184, 148, 86, 0.2);
    padding-inline-start: 40px !important;
}

.jl-social-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jl-social-list li {
    margin-bottom: 16px;
}

.jl-social-link {
    display: inline-block;
    font-family: var(--jl-font-body);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jl-mid);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 148, 86, 0.3);
    padding-bottom: 2px;
    transition: color var(--jl-transition), border-color var(--jl-transition);
}

.jl-social-link:hover {
    color: var(--jl-gold);
    border-color: var(--jl-gold);
}

/* ============================================================
   16. GALLERY SHORTCODE [jimmy_gallery]
   ============================================================ */

.jl-gallery {
    width: 100%;
}

/* Filter buttons */
.jl-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    align-items: center;
}

.jl-gallery__filter-btn {
    background: transparent;
    border: 1px solid rgba(184, 148, 86, 0.35);
    color: var(--jl-mid);
    font-family: var(--jl-font-body);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 20px;
    cursor: pointer;
    transition: all var(--jl-transition);
}

.jl-gallery__filter-btn:hover,
.jl-gallery__filter-btn--active {
    background-color: var(--jl-gold);
    border-color: var(--jl-gold);
    color: var(--jl-obsidian);
}

/* Grid */
.jl-gallery__grid {
    display: grid;
    gap: 16px;
}

.jl-gallery__grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.jl-gallery__grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.jl-gallery__item {
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.jl-gallery__item.is-hidden {
    display: none;
}

.jl-gallery__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.jl-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.jl-gallery__item:hover .jl-gallery__thumb img {
    transform: scale(1.05);
}

.jl-gallery__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 6, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--jl-transition);
}

.jl-gallery__item:hover .jl-gallery__overlay {
    background: rgba(10, 8, 6, 0.5);
}

.jl-gallery__zoom {
    color: var(--jl-gold);
    font-size: 2.5rem;
    font-weight: 200;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity var(--jl-transition), transform var(--jl-transition);
}

.jl-gallery__item:hover .jl-gallery__zoom {
    opacity: 1;
    transform: scale(1);
}

.jl-gallery__caption {
    font-family: var(--jl-font-body);
    font-size: 0.75rem;
    color: var(--jl-dim);
    letter-spacing: 0.06em;
    margin-top: 8px;
    padding-inline: 4px;
}

.jl-gallery__empty {
    color: var(--jl-dim);
    font-style: italic;
    text-align: center;
    padding: 40px;
}

/* ============================================================
   17. LIGHTBOX
   ============================================================ */

.jl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jl-lightbox.is-open {
    pointer-events: auto;
    opacity: 1;
}

.jl-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 6, 0.95);
    cursor: pointer;
}

.jl-lightbox__content {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jl-lightbox__content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.jl-lightbox__caption {
    color: var(--jl-dim);
    font-size: 0.8rem;
    margin-top: 12px;
    letter-spacing: 0.06em;
}

.jl-lightbox__close,
.jl-lightbox__nav {
    position: fixed;
    background: transparent;
    border: 1px solid rgba(184, 148, 86, 0.4);
    color: var(--jl-gold);
    cursor: pointer;
    z-index: 3;
    transition: all var(--jl-transition);
    font-size: 1.25rem;
    line-height: 1;
}

.jl-lightbox__close {
    top: 24px;
    inset-inline-end: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jl-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jl-lightbox__nav--prev { inset-inline-start: 16px; }
.jl-lightbox__nav--next { inset-inline-end: 16px; }

.jl-lightbox__close:hover,
.jl-lightbox__nav:hover {
    background: var(--jl-gold);
    color: var(--jl-obsidian);
    border-color: var(--jl-gold);
}

/* ============================================================
   18. FADE-IN ANIMATION UTILITY
   ============================================================ */

.jl-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.jl-fade-in.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   19. RESPONSIVE
   ============================================================ */

@media (max-width: 1023px) {
    .jl-tribute-text-col {
        padding: 40px !important;
    }
    .jl-story-text-col {
        padding: 40px !important;
    }
    .jl-video-text-col {
        padding: 40px !important;
    }
}

@media (max-width: 767px) {
    /* Stack 2-column sections */
    .jl-tribute-section .elementor-column,
    .jl-story-section .elementor-column,
    .jl-video-row .elementor-column {
        width: 100% !important;
    }

    .jl-tribute-text-col,
    .jl-story-text-col,
    .jl-video-text-col {
        padding: 32px 24px !important;
    }

    .jl-tribute-section .jl-tribute-image img,
    .jl-story-image img {
        min-height: 260px;
    }

    /* Gallery: 2 columns on mobile */
    .jl-gallery__grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero text — matches Base44 text-3xl on mobile */
    .jl-hero-section .elementor-heading-title {
        font-size: 1.875rem;
    }

    /* Page header */
    .jl-page-header .elementor-heading-title {
        font-size: 2rem;
    }

    /* Highlights: single column */
    .jl-highlights-section .elementor-column {
        width: 100% !important;
    }

    /* Discography: single column */
    .jl-discography-grid .elementor-column {
        width: 100% !important;
    }

    /* Contact sidebar */
    .jl-contact-sidebar {
        border-inline-start: none !important;
        border-top: 1px solid rgba(184, 148, 86, 0.2);
        padding-inline-start: 0 !important;
        padding-top: 40px !important;
        margin-top: 20px;
        width: 100% !important;
    }

    .jl-contact-section .elementor-column {
        width: 100% !important;
    }

    /* Lightbox nav */
    .jl-lightbox__nav--prev { inset-inline-start: 4px; }
    .jl-lightbox__nav--next { inset-inline-end: 4px; }
}

@media (max-width: 480px) {
    .jl-gallery__grid--cols-3,
    .jl-gallery__grid--cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   20. RTL SUPPORT
   ============================================================ */

[dir="rtl"] .jl-tribute-text-col,
body.rtl .jl-tribute-text-col {
    padding: 60px 80px 60px 60px !important;
}

[dir="rtl"] .jl-gallery__filter-btn,
body.rtl .jl-gallery__filter-btn {
    letter-spacing: 0;
}

[dir="rtl"] .jl-social-link,
body.rtl .jl-social-link {
    letter-spacing: 0;
}

/* ============================================================
   21. ACCESSIBILITY
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--jl-gold);
    outline-offset: 3px;
}

.jl-gallery__item:focus-visible {
    outline: 2px solid var(--jl-gold);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    inset-inline-start: 0;
    z-index: 9999;
    background: var(--jl-gold);
    color: var(--jl-obsidian);
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* ============================================================
   22. HELLO ELEMENTOR THEME COMPATIBILITY
   ============================================================ */

/* Remove Hello Elementor's default borders */
.hello-elementor .entry-header,
.hello-elementor .site-header {
    border: none;
}

/* Ensure full-width layout for Elementor pages */
.elementor-page .elementor {
    max-width: none;
}

/* Override white body background */
.hello-elementor body,
.hello-elementor .site {
    background-color: var(--jl-obsidian);
}

/* Hide WordPress post/page title rendered above Elementor content */
.elementor-page .entry-header,
.elementor-page .post-title,
.elementor-page .entry-title,
.hello-elementor .elementor-page .entry-header {
    display: none !important;
}

/* Remove default top padding/margin that creates gap above hero */
.hello-elementor .site-main,
.hello-elementor #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   23. SITE HEADER
   Fixed, transparent on load → dark + blur after 60 px of scroll.
   Matches Base44 header behaviour exactly.
   JS adds .jl-scrolled class on the element.
   ============================================================ */

.site-header,
.hello-elementor .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: var(--jl-header-h);
    background-color: transparent !important;
    border-bottom: 1px solid transparent !important;
    -webkit-transition: background-color 0.5s ease, border-color 0.5s ease;
    transition: background-color 0.5s ease, border-color 0.5s ease;
    padding: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    .site-header,
    .hello-elementor .site-header {
        height: var(--jl-header-h-md);
    }
}

/* Scrolled state — JS adds .jl-scrolled */
.site-header.jl-scrolled {
    background-color: rgba(10, 8, 6, 0.90) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--jl-border-subtle) !important;
}

/* WordPress admin bar compensation */
.admin-bar .site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px !important;
    }
}

/* Header inner container — max-w-7xl, px-6 md:px-10 */
.site-header .header-inner,
.site-header .header-inner.section-inner {
    max-width: var(--jl-container-max) !important;
    margin: 0 auto;
    padding: 0 24px !important;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .site-header .header-inner,
    .site-header .header-inner.section-inner {
        padding: 0 40px !important;
    }
}

/* ============================================================
   24. SITE NAVIGATION
   ============================================================ */

/* Logo / site title */
.site-header .site-title a,
.site-header .site-branding .site-title a {
    font-family: var(--jl-font-heading) !important;
    color: var(--jl-parchment) !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .site-header .site-title a {
        font-size: 1.25rem !important;
    }
}

/* Desktop nav links — font-body, text-xs, tracking-widest, uppercase, parchment/70 */
.main-nav a,
.site-navigation a,
.header-nav a,
#site-navigation a {
    font-family: var(--jl-font-body) !important;
    font-size: 0.6875rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(232, 226, 214, 0.70) !important;
    text-decoration: none !important;
    display: inline-block;
    -webkit-transition: color 0.3s ease, -webkit-transform 0.3s ease;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    padding: 4px 0;
}

.main-nav a:hover,
.site-navigation a:hover,
.header-nav a:hover,
#site-navigation a:hover {
    color: var(--jl-parchment) !important;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* Active page: gold dot above link, parchment text — like Base44 */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.site-navigation .current-menu-item > a {
    color: var(--jl-parchment) !important;
}

.main-nav .current-menu-item > a::before,
.main-nav .current_page_item > a::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--jl-gold);
}

/* Nav list layout — gap-8 = 2rem */
.main-nav .menu,
.main-nav ul,
.header-nav .menu,
.header-nav ul {
    display: -webkit-box;
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-box-align: center;
    align-items: center;
}

/* Mobile hamburger button */
.site-header .menu-toggle,
.site-header .nav-toggle,
.site-header .site-header__toggle button {
    background: transparent !important;
    border: none !important;
    color: var(--jl-parchment) !important;
    cursor: pointer;
    padding: 8px;
}

/* ============================================================
   25. SITE FOOTER
   Matches Base44: dark bg, border-gold/10 top border, centered layout.
   ============================================================ */

.site-footer,
.hello-elementor .site-footer {
    background-color: var(--jl-obsidian) !important;
    border-top: 1px solid rgba(184, 148, 86, 0.10) !important;
    padding: 64px 24px !important;
    color: var(--jl-parchment);
}

@media (min-width: 768px) {
    .site-footer,
    .hello-elementor .site-footer {
        padding: 80px 40px !important;
    }
}

.site-footer .footer-inner,
.site-footer .site-info {
    max-width: var(--jl-container-max);
    margin: 0 auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.site-footer a {
    font-family: var(--jl-font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(232, 226, 214, 0.40) !important;
    text-decoration: none;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--jl-parchment) !important;
}

.site-footer p,
.site-footer .site-info > p {
    font-size: 0.6875rem;
    color: rgba(232, 226, 214, 0.30);
    letter-spacing: 0.05em;
    margin: 0;
}