/**
 * Carzuri Site Header & Footer Stylesheet
 * 
 * Includes Astra theme overrides, design system custom properties,
 * desktop navigation dropdowns, mobile drawer, and defensive styling.
 */

/* ==========================================================================
   1. Astra Theme Overrides (Mandatory)
   ========================================================================== */
#masthead,
#colophon,
.site-header#masthead,
.site-footer#colophon {
    display: none !important;
}

/* ==========================================================================
   2. Design Tokens & CSS Custom Properties
   ========================================================================== */
:root {
    --carzuri-gold-subtle: rgba(212, 175, 55, 0.12);
    --carzuri-white: #ffffff;
    --carzuri-gray-50: #f8fafc;
    --carzuri-gray-100: #f1f5f9;
    --carzuri-gray-200: #e2e8f0;
    --carzuri-gray-400: #94a3b8;
    --carzuri-gray-600: #475569;
    --carzuri-gray-700: #334155;
    --carzuri-header-height: 72px;
    --carzuri-z-header: 9999;
    --carzuri-z-drawer: 10000;
}

/* ==========================================================================
   3. Defensive Rules against Astra Overrides
   ========================================================================== */
.carzuri-site-header svg,
.carzuri-site-footer svg,
.carzuri-mobile-drawer svg,
.carzuri-dropdown-chevron,
.carzuri-social-icon svg,
.carzuri-contact-item svg {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 12px !important;
    min-height: 12px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.carzuri-dropdown-chevron {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    transition: transform 0.2s ease;
}

.carzuri-social-icon svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

.carzuri-contact-item svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
}

.carzuri-site-header input,
.carzuri-site-footer input {
    padding: 10px 14px !important;
}

/* ==========================================================================
   4. Header Layout & Container
   ========================================================================== */
.carzuri-site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--carzuri-navy-dark, #0b192c);
    color: var(--carzuri-white, #ffffff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--carzuri-z-header);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.carzuri-header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: var(--carzuri-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
}

.carzuri-header-logo-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    /* FIX: flex items default to min-width:auto, meaning they refuse to
       shrink below their content's natural (min-content) size. A logo
       image is a "replaced element" whose rendered width — even when
       height-capped via max-height/width:auto below — still counts as
       that natural size for this purpose. A wide/landscape logo could
       therefore force this flex item (and the whole header, since the
       row never wraps) wider than the viewport on narrow screens, which
       drags the ENTIRE PAGE into horizontal scroll (confirmed live on a
       single vehicle page, but this would affect every page since the
       header is site-wide). min-width: 0 removes that floor, letting the
       item actually shrink; max-width below gives it a sane upper bound
       regardless of the source logo file's own dimensions. */
    min-width: 0;
    max-width: 55%;
    overflow: hidden;
}

.carzuri-header-logo-wrapper .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    max-width: 100%;
    overflow: hidden;
}

.carzuri-header-logo-wrapper .custom-logo {
    max-height: 48px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}

.carzuri-fallback-logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.1;
}

.carzuri-logo-brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--carzuri-white, #ffffff);
}

.carzuri-logo-accent {
    color: #d4af37 !important;
}

.carzuri-logo-tagline {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--carzuri-gray-400, #94a3b8);
    margin-top: 2px;
}

/* ==========================================================================
   5. Desktop Navigation
   ========================================================================== */
.carzuri-primary-navigation {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
}

.carzuri-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.carzuri-nav-item {
    position: relative;
    list-style: none;
}

.carzuri-nav-link,
.carzuri-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--carzuri-white, #ffffff);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
    font-family: inherit;
}

.carzuri-nav-link:hover,
.carzuri-dropdown-toggle:hover,
.carzuri-has-dropdown.carzuri-dropdown-open > .carzuri-dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.08);
    color: #d4af37 !important;
}

.carzuri-has-dropdown.carzuri-dropdown-open .carzuri-dropdown-chevron {
    transform: rotate(180deg);
}

.carzuri-nav-link-highlight {
    color: #d4af37 !important;
    font-weight: 600;
}

.carzuri-account-btn {
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.04);
}

.carzuri-account-btn:hover {
    border-color: #d4af37 !important;
}

.carzuri-account-icon {
    width: 16px !important;
    height: 16px !important;
}

/* ==========================================================================
   6. Dropdown Menus (Desktop)
   ========================================================================== */
.carzuri-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--carzuri-white, #ffffff);
    color: var(--carzuri-navy-dark, #0b192c);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    list-style: none;
    margin: 8px 0 0 0;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 100;
    border: 1px solid var(--carzuri-gray-200, #e2e8f0);
}

.carzuri-dropdown-menu-right {
    left: auto;
    right: 0;
    min-width: 220px;
}

@media (min-width: 992px) {
    .carzuri-has-dropdown:hover > .carzuri-dropdown-menu,
    .carzuri-has-dropdown:focus-within > .carzuri-dropdown-menu,
    .carzuri-has-dropdown.carzuri-dropdown-open > .carzuri-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.carzuri-dropdown-link {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 6px;
    color: var(--carzuri-navy-dark, #0b192c);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.carzuri-dropdown-link:hover,
.carzuri-dropdown-link:focus {
    background-color: var(--carzuri-gray-100, #f1f5f9);
    color: var(--carzuri-navy-mid, #1e3e62);
    outline: none;
}

.carzuri-dropdown-title {
    font-size: 13.5px;
    font-weight: 600;
}

.carzuri-dropdown-desc {
    font-size: 11.5px;
    color: var(--carzuri-gray-600, #475569);
    margin-top: 2px;
}

.carzuri-dropdown-divider {
    height: 1px;
    background-color: var(--carzuri-gray-200, #e2e8f0);
    margin: 6px 0;
}

.carzuri-link-register {
    color: var(--carzuri-navy-mid, #1e3e62);
    font-weight: 600;
}

.carzuri-link-login {
    color: #c19b26 !important;
    font-weight: 600;
}

/* ==========================================================================
   7. Header Right Actions & Notification Bell Slot
   ========================================================================== */
.carzuri-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.carzuri-header-notification-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    position: relative;
}

.carzuri-header-notification-slot .carzuri-notifications-container {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    z-index: 101 !important;
}

.carzuri-header-notification-slot .carzuri-bell-btn {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--carzuri-white, #ffffff) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

.carzuri-header-notification-slot .carzuri-bell-btn:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: #d4af37 !important;
    color: #d4af37 !important;
}

.carzuri-header-notification-slot .carzuri-notifications-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    z-index: 102 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   8. Mobile Hamburger Button & Drawer (<992px)
   ========================================================================== */
.carzuri-mobile-toggle-btn {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--carzuri-white, #ffffff);
    align-items: center;
    justify-content: center;
}

.carzuri-hamburger-box {
    width: 22px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.carzuri-hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--carzuri-white, #ffffff);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.carzuri-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--carzuri-z-drawer);
    visibility: hidden;
}

.carzuri-mobile-drawer.carzuri-drawer-active {
    visibility: visible;
}

.carzuri-mobile-drawer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.carzuri-mobile-drawer.carzuri-drawer-active .carzuri-mobile-drawer-backdrop {
    opacity: 1;
}

.carzuri-mobile-drawer-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background-color: var(--carzuri-navy-dark, #0b192c);
    color: var(--carzuri-white, #ffffff);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    box-sizing: border-box;
}

.carzuri-mobile-drawer.carzuri-drawer-active .carzuri-mobile-drawer-inner {
    transform: translateX(0);
}

.carzuri-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.carzuri-mobile-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: #d4af37 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.carzuri-mobile-close-btn {
    background: transparent;
    border: none;
    color: var(--carzuri-white, #ffffff);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.carzuri-mobile-navigation {
    padding: 12px 16px 32px;
}

.carzuri-mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.carzuri-mobile-nav-link,
.carzuri-mobile-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--carzuri-white, #ffffff);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
}

.carzuri-mobile-nav-link:hover,
.carzuri-mobile-accordion-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #d4af37 !important;
}

.carzuri-mobile-highlight {
    color: #d4af37 !important;
    font-weight: 600;
}

.carzuri-mobile-accordion-chevron {
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.2s ease;
}

.carzuri-mobile-accordion.carzuri-accordion-open .carzuri-mobile-accordion-chevron {
    transform: rotate(180deg);
}

.carzuri-mobile-submenu {
    display: none;
    list-style: none;
    margin: 0 0 8px 12px;
    padding: 4px 0 4px 12px;
    border-left: 2px solid rgba(212, 175, 55, 0.3);
}

.carzuri-mobile-accordion.carzuri-accordion-open .carzuri-mobile-submenu {
    display: block;
}

.carzuri-mobile-submenu li a {
    display: block;
    padding: 8px 10px;
    font-size: 13.5px;
    color: var(--carzuri-gray-400, #94a3b8);
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.carzuri-mobile-submenu li a:hover {
    color: var(--carzuri-white, #ffffff);
    background-color: rgba(255, 255, 255, 0.05);
}

@media (max-width: 991.98px) {
    .carzuri-primary-navigation {
        display: none;
    }

    .carzuri-mobile-toggle-btn {
        display: inline-flex;
    }

    .carzuri-mobile-drawer {
        display: block;
    }
}

/* ==========================================================================
   9. Footer Styles
   ========================================================================== */
.carzuri-site-footer {
    background-color: var(--carzuri-navy-dark, #0b192c);
    color: var(--carzuri-gray-400, #94a3b8);
    border-top: 3px solid #d4af37 !important;
    font-size: 14px;
    line-height: 1.6;
}

.carzuri-footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.carzuri-footer-main {
    padding: 56px 0 40px;
}

.carzuri-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.carzuri-footer-col-brand .carzuri-footer-logo-wrapper {
    margin-bottom: 16px;
    max-width: 100%;
    overflow: hidden;
}

.carzuri-footer-col-brand .custom-logo {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    height: auto;
}

.carzuri-footer-tagline {
    color: #d4af37 !important;
    font-size: 14.5px;
    margin: 0 0 10px 0;
}

.carzuri-footer-blurb {
    font-size: 13.5px;
    color: var(--carzuri-gray-400, #94a3b8);
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.carzuri-footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carzuri-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--carzuri-white, #ffffff);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.carzuri-social-icon:hover {
    background-color: #d4af37 !important;
    color: var(--carzuri-navy-dark, #0b192c) !important;
    transform: translateY(-2px);
}

.carzuri-footer-heading {
    color: var(--carzuri-white, #ffffff);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px 0;
    letter-spacing: 0.02em;
    position: relative;
    padding-bottom: 10px;
}

.carzuri-footer-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background-color: #d4af37 !important;
}

.carzuri-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.carzuri-footer-links li a {
    color: var(--carzuri-gray-400, #94a3b8);
    text-decoration: none;
    font-size: 13.5px;
    transition: color 0.15s ease, padding-left 0.15s ease;
    display: inline-block;
}

.carzuri-footer-links li a:hover {
    color: #d4af37 !important;
    padding-left: 4px;
}

.carzuri-footer-contact-details {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.carzuri-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--carzuri-gray-400, #94a3b8);
}

.carzuri-contact-item a {
    color: var(--carzuri-gray-200, #e2e8f0);
    text-decoration: none;
    transition: color 0.15s ease;
}

.carzuri-contact-item a:hover {
    color: #d4af37 !important;
}

.carzuri-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
}

.carzuri-copyright-text {
    margin: 0;
    font-size: 13px;
    color: var(--carzuri-gray-400, #94a3b8);
}

/* ==========================================================================
   10. Responsive Breakpoints for Footer (Mobile Fidelity ~375px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .carzuri-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .carzuri-footer-main {
        padding: 40px 0 28px;
    }

    .carzuri-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .carzuri-header-container {
        padding: 0 16px;
    }

    .carzuri-footer-container {
        padding: 0 16px;
    }

    /* Mobile logo sizing — the base rules in Sections 4 & 9 (48px header,
       44px footer) apply at every viewport width, which reads as oversized
       on narrow phone screens once everything else around it has shrunk.
       Scaled down here for phones only; tablet/desktop are untouched. */
    .carzuri-header-logo-wrapper .custom-logo {
        max-height: 32px !important;
    }

    .carzuri-footer-col-brand .custom-logo {
        max-height: 28px !important;
    }
}

/* ==========================================================================
   11. Site-Wide Page Content Spacing
   ========================================================================== */
/* Real CSS-based spacing between the custom header/footer and page content,
   confirmed via DevTools against the real Astra markup: #content.site-content
   is the outermost wrapper around every page's content, sitting directly
   between the header and footer regardless of which Astra Container Layout
   or Sidebar setting an individual page uses. This was previously relying
   on Elementor's own wrapper CSS as an unintentional side effect — with
   Elementor deactivated (as this project's pages don't use it), that
   spacing disappeared. This rule restores it permanently and consistently,
   independent of Elementor's active/inactive state or any per-page setting. */
#content.site-content {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
}

@media (max-width: 640px) {
    #content.site-content {
        padding-top: 20px !important;
        padding-bottom: 28px !important;
    }
}

/* ==========================================================================
   12. Mobile Notification Panel Fix
   ========================================================================== */
/* The relocated .carzuri-notifications-panel is absolutely positioned relative
   to its small (~38px) bell-button parent, which works fine on wide desktop
   screens but pushes most of the panel off the left edge on narrow viewports
   (confirmed via real DevTools inspection: panel computed width 358px against
   a bell container only ~38-40px wide, anchored right:0 to that tiny box).
   Below 480px, switch it to fixed positioning anchored to the viewport instead
   of the tiny bell container, so it stays fully on-screen regardless of where
   the bell itself sits in the header. */
@media (max-width: 480px) {
    .carzuri-header-notification-slot .carzuri-notifications-panel {
        position: fixed !important;
        top: 64px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ==========================================================================
   13. Site-Wide Horizontal Overflow Guard
   ========================================================================== */
/* Belt-and-braces backstop alongside the logo-specific fix in Section 4:
   whatever the actual cause turns out to be on any given page (a wide
   logo, an oversized test image, or something else entirely), the page
   itself should never be able to scroll sideways. This does not fix the
   underlying cause of any individual overflowing element, but it prevents
   that overflow from dragging the whole page into horizontal scroll mode
   the way it did on the single vehicle page. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}