/* ═══════════════════════════════════════════════════════
   CRUMAIRE — Header & Footer
   Hello Elementor customizer overrides
   ═══════════════════════════════════════════════════════ */

/* ── Site Header ───────────────────────────────────────── */
.site-header,
#site-header,
header.site-header {
    background-color: var(--crumaire-primary) !important;
    border-bottom:    1px solid rgba(200,169,81,0.2);
    transition:       background-color 0.35s ease, box-shadow 0.35s ease;
    position:         sticky;
    top:              0;
    z-index:          1000;
}

/* Sticky shadow when scrolled (class toggled by JS) */
.site-header.is-sticky {
    box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* ── Logo area ─────────────────────────────────────────── */
.site-header .site-branding,
.site-header .logo-wrapper,
.site-header .elementor-site-title,
.site-header a.custom-logo-link {
    text-decoration: none;
}

.site-header .custom-logo {
    max-height: 56px;
    width:      auto;
}

.site-header .site-title {
    font-family:    var(--crumaire-font-display);
    font-size:      1.6rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    color:          var(--crumaire-accent);
    text-transform: uppercase;
    text-decoration: none;
    line-height:    1;
}

.site-header .site-title a {
    color:           var(--crumaire-accent);
    text-decoration: none;
}

/* ── Header inner layout ───────────────────────────────── */
.site-header .header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       1280px;
    margin:          0 auto;
    padding:         0 2rem;
    height:          70px;
}

/* ── Primary Navigation ────────────────────────────────── */
.site-header .main-navigation,
.site-header nav.site-navigation,
.site-header nav[role="navigation"],
.site-header .header-menu-wrap {
    display:     flex;
    align-items: center;
}

/* Nav links — targets both dynamic-header (.site-navigation ul li a) and Elementor */
.site-header .main-navigation ul li a,
.site-header .site-navigation ul li a,
.site-header nav ul li a,
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
    font-family:    var(--crumaire-font-display) !important;
    font-size:      0.72rem !important;
    font-weight:    600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color:          var(--crumaire-text-light) !important;
    text-decoration: none;
    padding:        0.4em 0.9em;
    transition:     var(--crumaire-transition);
    position:       relative;
}

/* Remove default list styling from nav */
.site-header .site-navigation ul,
.site-header .main-navigation ul {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    gap:        0.25rem;
}

/* Gold underline on hover */
.site-header .main-navigation ul li a::after,
.site-header .site-navigation ul li a::after,
.elementor-nav-menu a::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0.9em;
    right:            0.9em;
    height:           2px;
    background-color: var(--crumaire-accent);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

.site-header .main-navigation ul li a:hover::after,
.site-header .main-navigation ul li.current-menu-item a::after,
.site-header .site-navigation ul li a:hover::after,
.site-header .site-navigation ul li.current-menu-item a::after,
.elementor-nav-menu a:hover::after,
.elementor-nav-menu .elementor-item-active::after {
    transform: scaleX(1);
}

.site-header .main-navigation ul li a:hover,
.site-header .site-navigation ul li a:hover,
.elementor-nav-menu a:hover {
    color: var(--crumaire-accent) !important;
}

/* Current page */
.site-header .main-navigation ul li.current-menu-item > a,
.site-header .site-navigation ul li.current-menu-item > a,
.elementor-nav-menu .elementor-item-active {
    color: var(--crumaire-accent) !important;
}

/* ── Dropdown Menus ────────────────────────────────────── */
.site-header .main-navigation ul ul {
    background-color: var(--crumaire-primary-dark);
    border:           1px solid rgba(200,169,81,0.25);
    border-top:       2px solid var(--crumaire-accent);
    border-radius:    0 0 var(--crumaire-radius) var(--crumaire-radius);
    box-shadow:       var(--crumaire-shadow);
    min-width:        200px;
    padding:          0.5rem 0;
}

.site-header .main-navigation ul ul li a {
    font-size:   0.7rem !important;
    padding:     0.6em 1.2em;
    display:     block;
    border-left: 3px solid transparent;
}

.site-header .main-navigation ul ul li a:hover {
    border-left-color: var(--crumaire-accent);
    background-color:  rgba(200,169,81,0.08);
}

/* ── Cart Icon ─────────────────────────────────────────── */
.site-header .cart-icon,
.site-header .elementor-menu-cart__toggle,
.site-header a.cart-contents {
    color:      var(--crumaire-text-light);
    font-size:  1.2rem;
    transition: color 0.3s ease;
    padding:    0.4em;
    position:   relative;
}

.site-header .cart-icon:hover,
.site-header .elementor-menu-cart__toggle:hover,
.site-header a.cart-contents:hover {
    color: var(--crumaire-accent);
}

/* Cart count badge */
.site-header .cart-contents-count,
.elementor-menu-cart__toggle_button .elementor-button-text {
    background:    var(--crumaire-accent);
    color:         var(--crumaire-primary);
    font-family:   var(--crumaire-font-body);
    font-size:     0.65rem;
    font-weight:   700;
    min-width:     18px;
    height:        18px;
    border-radius: 50%;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    position:      absolute;
    top:           -4px;
    right:         -4px;
    line-height:   1;
}

/* ── Mobile Menu Toggle (dynamic-header hamburger) ─────── */
.menu-toggle,
.elementor-menu-toggle,
.site-navigation-toggle {
    background:    transparent;
    border:        1px solid rgba(200,169,81,0.5);
    border-radius: var(--crumaire-radius);
    color:         var(--crumaire-accent);
    font-size:     1.1rem;
    padding:       0.5em 0.65em;
    cursor:        pointer;
    transition:    var(--crumaire-transition);
    display:       none; /* shown only on mobile */
}

.menu-toggle:hover,
.elementor-menu-toggle:hover,
.site-navigation-toggle:hover {
    background:   var(--crumaire-accent);
    color:        var(--crumaire-primary);
    border-color: var(--crumaire-accent);
}

/* Hamburger icon lines */
.site-navigation-toggle-icon,
.site-navigation-toggle-icon::before,
.site-navigation-toggle-icon::after {
    display:    block;
    width:      18px;
    height:     2px;
    background: currentColor;
    transition: var(--crumaire-transition);
}
.site-navigation-toggle-icon {
    position: relative;
}
.site-navigation-toggle-icon::before,
.site-navigation-toggle-icon::after {
    content:  '';
    position: absolute;
    left:     0;
}
.site-navigation-toggle-icon::before { top: -5px; }
.site-navigation-toggle-icon::after  { top:  5px; }

/* Mobile nav dropdown (inert until toggled) */
.site-navigation-dropdown {
    display: none;
    background-color: var(--crumaire-primary-dark);
    border-top:       1px solid rgba(200,169,81,0.2);
}

/* Mobile nav panel */
@media (max-width: 767px) {
    .site-header .header-inner {
        padding: 0 1rem;
    }

    .site-header .site-navigation,
    .site-header .site-navigation-toggle-holder {
        /* navigation toggle is shown; main nav is hidden via Hello's logic */
    }

    .site-navigation-toggle {
        display: flex;
        align-items: center;
    }

    .site-header .main-navigation ul,
    .site-header .site-navigation ul {
        flex-direction: column;
        gap:            0;
    }

    .site-header .main-navigation ul li a,
    .site-header .site-navigation ul li a {
        display:     block !important;
        padding:     0.75em 1.5em;
        border-left: 3px solid transparent;
    }

    .site-header .main-navigation ul li a:hover,
    .site-header .site-navigation ul li a:hover {
        border-left-color: var(--crumaire-accent);
        background-color:  rgba(200,169,81,0.06);
    }
}

/* ═══════════════════════════════════════════════════════
   Site Footer
   ═══════════════════════════════════════════════════════ */

.site-footer,
#site-footer,
footer.site-footer {
    background-color: var(--crumaire-primary-dark) !important;
    border-top:       1px solid rgba(200,169,81,0.2);
    color:            var(--crumaire-text-muted);
    padding:          var(--crumaire-space-xl) 0 var(--crumaire-space-md);
}

/* Footer logo / wordmark */
.footer-logo {
    display:         block;
    text-align:      center;
    margin-bottom:   var(--crumaire-space-lg);
}

.footer-logo img {
    max-height: 48px;
    margin:     0 auto;
    opacity:    0.9;
}

.footer-logo-text {
    font-family:    var(--crumaire-font-display);
    font-size:      1.8rem;
    font-weight:    700;
    letter-spacing: 0.25em;
    color:          var(--crumaire-accent);
    text-transform: uppercase;
    text-align:     center;
    display:        block;
}

/* Widget areas row */
.footer-widgets {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--crumaire-space-lg);
    margin-bottom:         var(--crumaire-space-xl);
}

@media (max-width: 768px) {
    .footer-widgets {
        grid-template-columns: 1fr;
        gap:                   var(--crumaire-space-md);
    }
}

/* Widget headings */
.footer-widget .footer-widget__title,
.site-footer .widget-title {
    font-family:    var(--crumaire-font-display);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--crumaire-accent);
    margin-bottom:  var(--crumaire-space-sm);
    padding-bottom: 0.5em;
    border-bottom:  1px solid rgba(200,169,81,0.25);
}

/* Footer nav links */
.site-footer .widget ul,
.site-footer nav ul {
    list-style: none;
    padding:    0;
    margin:     0;
}

.site-footer .widget ul li,
.site-footer nav ul li {
    margin-bottom: 0.5em;
}

.site-footer .widget ul li a,
.site-footer nav ul li a {
    font-family:  var(--crumaire-font-body);
    font-size:    0.9rem;
    color:        var(--crumaire-text-muted);
    transition:   color 0.3s ease;
    text-decoration: none;
}

.site-footer .widget ul li a:hover,
.site-footer nav ul li a:hover {
    color: var(--crumaire-accent);
}

/* Social icons */
.footer-social {
    display:    flex;
    gap:        0.75rem;
    flex-wrap:  wrap;
    margin-top: 0.5rem;
}

.footer-social a {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border:          1px solid rgba(200,169,81,0.35);
    border-radius:   50%;
    color:           var(--crumaire-text-muted);
    font-size:       0.9rem;
    transition:      var(--crumaire-transition);
}

.footer-social a:hover {
    background:  var(--crumaire-accent);
    border-color: var(--crumaire-accent);
    color:       var(--crumaire-primary);
}

/* Footer bottom bar */
.footer-bottom {
    border-top:  1px solid rgba(200,169,81,0.15);
    padding-top: var(--crumaire-space-md);
    text-align:  center;
}

.footer-bottom p,
.footer-copyright {
    font-family: var(--crumaire-font-body);
    font-size:   0.8rem;
    font-weight: 300;
    color:       rgba(243,233,220,0.4);
    margin:      0;
}

.footer-bottom a {
    color:           rgba(243,233,220,0.5);
    text-decoration: none;
    transition:      color 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--crumaire-accent);
}

/* ── Crumaire custom footer (dynamic-footer.php override) ── */
.crumaire-site-footer {
    background-color: #2A1336 !important;
    border-top:       1px solid rgba(200,169,81,0.15);
    padding:          3rem 0;
}

.crumaire-footer-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             1.5rem;
}

.crumaire-footer-logo {
    display:     block;
    line-height: 0;
}

.crumaire-footer-logo-img {
    height:  40px;
    width:   auto;
    opacity: 0.85;
}

.crumaire-footer-copy {
    font-family:    var(--crumaire-font-body);
    font-size:      0.72rem;
    font-weight:    300;
    letter-spacing: 0.08em;
    color:          rgba(243,233,220,0.30);
    margin:         0;
    text-align:     center;
}