/*
 * Joy Concept — Navigation
 * Sticky header, primary nav, mobile menu, and logo styles.
 */


/* ─── Site Header ────────────────────────────────────────────────────────── */

.jc-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          9990;
    isolation:        isolate;
    height:           var(--jc-nav-h);
    background-color: rgba(249, 245, 238, 0.95);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:    1px solid var(--jc-border-light);
    transition:       box-shadow var(--jc-transition),
                      background-color var(--jc-transition);
}

.jc-header.is-scrolled {
    box-shadow:       var(--jc-shadow-sm);
    background-color: rgba(249, 245, 238, 0.98);
}


/* Keep the fixed site header below the WordPress admin bar while testing logged-in. */
.admin-bar .jc-header { top: 32px; }

@media (max-width: 782px) {
    .admin-bar .jc-header { top: 46px; }
}

.jc-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    padding-inline:  var(--jc-gutter);
    max-width:       var(--jc-container);
    margin-inline:   auto;
    gap:             var(--jc-sp-6);
}


/* ─── Logo ───────────────────────────────────────────────────────────────── */

.jc-logo {
    display:         flex;
    align-items:     center;
    gap:             var(--jc-sp-3);
    text-decoration: none;
    flex-shrink:     0;
}

.jc-logo__img  { height: 42px; width: auto; }

.jc-logo__text {
    display:        flex;
    flex-direction: column;
    line-height:    1;
}

.jc-logo__name {
    font-family:    var(--jc-serif);
    font-size:      1.35rem;
    font-weight:    500;
    color:          var(--jc-green);
    letter-spacing: -0.01em;
}

.jc-logo__tagline {
    font-family:    var(--jc-sans);
    font-size:      var(--jc-text-xs);
    font-weight:    300;
    color:          var(--jc-muted);
    letter-spacing: var(--jc-ls-wider);
    text-transform: uppercase;
    margin-top:     3px;
}


/* ─── Primary Navigation ─────────────────────────────────────────────────── */

.jc-nav {
    display:         flex;
    align-items:     center;
    flex:            1;
    justify-content: flex-end;
}

.jc-nav__list {
    display:     flex;
    align-items: center;
    gap:         var(--jc-sp-1);
    list-style:  none;
}

.jc-nav__item  { position: relative; }

.jc-nav__link {
    display:         block;
    font-family:     var(--jc-sans);
    font-size:       var(--jc-text-sm);
    font-weight:     400;
    color:           var(--jc-muted);
    text-decoration: none;
    padding:         var(--jc-sp-2) var(--jc-sp-3);
    border-radius:   var(--jc-radius-sm);
    letter-spacing:  var(--jc-ls-wide);
    transition:      color var(--jc-transition),
                     background-color var(--jc-transition);
    white-space:     nowrap;
}

.jc-nav__link:hover,
.jc-nav__item--active > .jc-nav__link {
    color:            var(--jc-green);
    background-color: var(--jc-green-pale);
}

.jc-nav__item--active > .jc-nav__link { font-weight: 500; }

.jc-nav__arrow {
    display:        inline-block;
    margin-left:    var(--jc-sp-1);
    width:          8px;
    height:         8px;
    border-right:   1.5px solid currentColor;
    border-bottom:  1.5px solid currentColor;
    transform:      rotate(45deg) translateY(-2px);
    transition:     transform var(--jc-transition);
    vertical-align: middle;
}

.jc-nav__item--has-children:hover .jc-nav__arrow { transform: rotate(-135deg) translateY(2px); }


/* ─── Dropdown ───────────────────────────────────────────────────────────── */

.jc-nav__dropdown {
    position:   absolute;
    top:        calc(100% + var(--jc-sp-2));
    left:       0;
    min-width:  200px;
    background: var(--jc-white);
    border:     1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    box-shadow: var(--jc-shadow-md);
    list-style: none;
    padding:    var(--jc-sp-2) 0;
    opacity:    0;
    visibility: hidden;
    transform:  translateY(-6px);
    transition: opacity var(--jc-transition),
                visibility var(--jc-transition),
                transform var(--jc-transition);
    z-index:    var(--jc-z-dropdown);
}

.jc-nav__item--has-children:hover .jc-nav__dropdown,
.jc-nav__item--has-children:focus-within .jc-nav__dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.jc-nav__dropdown .jc-nav__link { border-radius: 0; padding: var(--jc-sp-2) var(--jc-sp-4); }


/* ─── Nav CTA ────────────────────────────────────────────────────────────── */

.jc-nav__cta { margin-left: var(--jc-sp-4); flex-shrink: 0; }


/* ─── Mobile Toggle ──────────────────────────────────────────────────────── */

.jc-nav-toggle {
    display:      none;
    align-items:  center;
    justify-content: center;
    width:        40px;
    height:       40px;
    border:       none;
    background:   none;
    cursor:       pointer;
    color:        var(--jc-green);
    border-radius: var(--jc-radius-sm);
    transition:   background-color var(--jc-transition);
    flex-shrink:  0;
}

.jc-nav-toggle:hover { background-color: var(--jc-green-pale); }
.jc-nav-toggle .icon-close { display: none;  }
.jc-nav-toggle .icon-menu  { display: block; }
.jc-nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.jc-nav-toggle[aria-expanded="true"] .icon-menu  { display: none;  }


/* ─── Mobile Menu ────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .jc-nav-toggle { display: flex; }

    .jc-nav {
        position:   fixed;
        top:        var(--jc-nav-h);
        left:       0;
        right:      0;
        bottom:     0;
        background: var(--jc-cream);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding:    var(--jc-sp-6) var(--jc-gutter) var(--jc-sp-8);
        overflow-y: auto;
        transform:  translateX(100%);
        transition: transform var(--jc-dur-slow) var(--jc-ease);
        z-index:    9991;
    }

    .jc-nav.is-open { transform: translateX(0); }

    .jc-nav__list {
        flex-direction: column;
        align-items:    stretch;
        gap:    0;
        width:  100%;
    }

    .jc-nav__item { border-bottom: 1px solid var(--jc-border-light); }

    .jc-nav__link {
        font-size:     var(--jc-text-md);
        padding:       var(--jc-sp-4) var(--jc-sp-2);
        border-radius: 0;
    }

    .jc-nav__dropdown {
        position:   static;
        box-shadow: none;
        border:     none;
        padding:    0 0 0 var(--jc-sp-4);
        opacity:    1;
        visibility: visible;
        transform:  none;
        display:    none;
        background: transparent;
    }

    .jc-nav__item--has-children.is-open .jc-nav__dropdown { display: block; }

    .jc-nav__cta { margin-left: 0; margin-top: var(--jc-sp-6); }
    .jc-nav__cta .jc-btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) { .jc-logo__tagline { display: none; } }


@media (max-width: 960px) {
    .admin-bar .jc-nav { top: calc(var(--jc-nav-h) + 32px); }
}

@media (max-width: 782px) {
    .admin-bar .jc-nav { top: calc(var(--jc-nav-h) + 46px); }
}

/* ─── Mobile Menu Overlay Hardening (v1.4.6) ───────────────────────────────
   The mobile drawer is rendered inside the fixed header. Expanding the header
   itself while the drawer is open prevents page hero/content sections from
   painting over the menu on mobile browsers. */

@media (max-width: 960px) {
    html.jc-nav-lock,
    body.jc-nav-lock {
        overflow: hidden !important;
        overscroll-behavior: contain;
    }

    .jc-header.is-menu-open {
        height: 100dvh;
        max-height: 100dvh;
        z-index: 2147483000;
        background-color: var(--jc-cream);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        box-shadow: var(--jc-shadow-md);
    }

    .admin-bar .jc-header.is-menu-open {
        height: calc(100dvh - 32px);
        max-height: calc(100dvh - 32px);
    }

    .jc-header.is-menu-open .jc-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        align-content: start;
        height: auto;
        min-height: var(--jc-nav-h);
        max-width: none;
        padding-top: 0;
        padding-bottom: var(--jc-sp-8);
        gap: 0 var(--jc-sp-4);
    }

    .jc-header.is-menu-open .jc-logo {
        grid-column: 1;
        align-self: center;
    }

    .jc-header.is-menu-open .jc-nav-toggle {
        grid-column: 2;
        justify-self: end;
        align-self: center;
    }

    .jc-header.is-menu-open .jc-nav {
        grid-column: 1 / -1;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100%;
        min-height: auto;
        max-height: none;
        background: transparent;
        transform: none !important;
        transition: none;
        overflow: visible;
        z-index: auto;
        padding: var(--jc-sp-5) 0 var(--jc-sp-8);
        border-top: 1px solid var(--jc-border-light);
    }

    .jc-header.is-menu-open .jc-nav__link {
        color: var(--jc-green);
    }
}

@media (max-width: 782px) {
    .admin-bar .jc-header.is-menu-open {
        height: calc(100dvh - 46px);
        max-height: calc(100dvh - 46px);
    }
}