/**
 * Dynasty Luxury Rentals — Header
 */

.dynasty-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--dynasty-black-obsidian);
    color: var(--dynasty-white);
    padding: 12px 18px;
    z-index: 10000;
}
.dynasty-skip-link:focus {
    left: 16px;
    top: 16px;
}

.dynasty-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--dynasty-white, #FFFFFF);
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.dynasty-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 104px;
    padding-block: 10px;
}

/* === Brand / logo === */

.dynasty-header__brand {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
}

/* Logo (img / SVG).
   Tamaño Figma: 279×93 desktop, 190×63 mobile.
   !important en TODO porque Cartsy parent tiene reglas como
   `.custom-logo-link img { max-width:... }`, `header img { width:auto !important }`,
   `.site-logo img { height:auto !important }` que pisan los tamaños fijos del
   child y hacen que el logo crezca / encoja inesperadamente. */
.dynasty-logo,
.custom-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 0 !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.dynasty-logo--img img,
.custom-logo-link img,
.custom-logo {
    display: block !important;
    height: 84px !important;
    width: auto !important;          /* ancho automático: respeta el aspect del logo */
    max-width: 340px !important;     /* tope de seguridad por si el logo es muy ancho */
    max-height: 84px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
@media (min-width: 1024px) {
    .dynasty-logo--img img,
    .custom-logo-link img,
    .custom-logo {
        height: 104px !important;
        max-width: 420px !important;
        max-height: 104px !important;
    }
}

.dynasty-logo-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}
.dynasty-logo-mark {
    font-family: var(--dynasty-font-heading);
    font-weight: var(--dynasty-fw-bold);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--dynasty-brand-gold);
}
.dynasty-logo-sub {
    font-family: var(--dynasty-font-body);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: var(--dynasty-gray-brand);
    margin-top: 4px;
    text-transform: uppercase;
}

/* Bloque SINCE / 2008 stack — alineado a la izquierda, línea divisoria a la izquierda.
   !important porque Cartsy parent tiene reglas en `.header span`, `.site-header *`
   y `span.something` que cambian font-size, color, margin, padding. */
.dynasty-header__since {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-left: 22px !important;
    padding-right: 0 !important;
    border-left: 1px solid rgba(10, 10, 10, 0.25) !important;
    line-height: 1.15 !important;
    font-family: var(--dynasty-font-heading, "Montserrat", system-ui, sans-serif) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    min-height: 60px !important;
    margin: 0 !important;
}
.dynasty-header__since-label,
.dynasty-header__since-year {
    display: block !important;
    font-family: var(--dynasty-font-heading, "Montserrat", system-ui, sans-serif) !important;
    font-size: 16px !important;
    font-weight: var(--dynasty-fw-medium, 500) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (min-width: 1024px) {
    .dynasty-header__since {
        min-height: 96px !important;
        padding-left: 28px !important;
    }
}

/* === Nav === */

.dynasty-header__nav {
    flex: 1;
    display: none;
}

.dynasty-header__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menú = Body/Regular del design system (Raleway 400 / 16). */
.dynasty-header__menu .menu-item > a {
    font-family: var(--dynasty-font-body, "Raleway", system-ui, sans-serif);
    font-size: 16px;
    font-weight: var(--dynasty-fw-regular, 400);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dynasty-black-obsidian, #0A0A0A);
    transition: color 0.2s ease;
    padding-block: 10px;
    position: relative;
}
.dynasty-header__menu .menu-item > a:hover,
.dynasty-header__menu .current-menu-item > a {
    color: var(--dynasty-brand-gold, #D4AF37);
}

/* === Dropdown de marcas bajo "Fleet" (desktop) === */
.dynasty-header__menu .menu-item-has-children {
    position: relative;
}
/* Caret junto al item con dropdown. */
.dynasty-header__menu .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}
.dynasty-header__menu .menu-item-has-children:hover > a::after {
    transform: translateY(0) rotate(225deg);
}
.dynasty-header__menu .sub-menu {
    position: absolute !important;
    top: 100%;
    left: 0;
    margin: 0 !important;
    padding: 12px 0 !important;
    list-style: none !important;
    background: var(--dynasty-white, #FFFFFF) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16) !important;
    border-radius: 8px;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;   /* 2 columnas */
    gap: 0 8px !important;
    width: auto !important;
    min-width: 360px !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 950;
}
.dynasty-header__menu .menu-item-has-children:hover > .sub-menu,
.dynasty-header__menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dynasty-header__menu .sub-menu > li { margin: 0 !important; padding: 0 !important; list-style: none !important; width: auto !important; float: none !important; }
.dynasty-header__menu .sub-menu > li::before,
.dynasty-header__menu .sub-menu > li::marker { content: none !important; display: none !important; }
.dynasty-header__menu .sub-menu a {
    display: block;
    padding: 9px 20px;
    font-family: var(--dynasty-font-body, "Raleway", system-ui, sans-serif);
    font-size: 14px;
    font-weight: var(--dynasty-fw-regular, 400);
    color: var(--dynasty-black-obsidian, #0A0A0A);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease;
}
.dynasty-header__menu .sub-menu a:hover {
    color: var(--dynasty-brand-gold, #D4AF37);
    background: #FAF7EF;
}

/* === CTA + burger === */

.dynasty-header__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto; /* empuja el bloque derecho cuando el nav está oculto (mobile) */
}

/* === Carrito Woo === */
.dynasty-header__cart {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.dynasty-header__cart:hover { color: var(--dynasty-brand-gold, #D4AF37) !important; }
.dynasty-header__cart-icon {
    display: inline-flex;
    line-height: 0;
}
.dynasty-header__cart-count {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--dynasty-brand-gold, #D4AF37) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 11px !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    line-height: 1 !important;
    box-shadow: 0 0 0 2px var(--dynasty-white, #FFFFFF);
}

/* CTA del header = Montserrat Bold 17. */
.dynasty-header__reserve {
    display: none;
    font-family: var(--dynasty-font-heading, "Montserrat", system-ui, sans-serif) !important;
    font-size: 17px !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 13px 24px;
    line-height: 1;
}

/* Hamburguesa del header — SIEMPRE visible (mobile + desktop), a la izquierda.
   Abre el drawer lateral. Estilo minimalista (3 líneas obsidian, sin caja). */
.dynasty-header__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 9px 7px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    flex-shrink: 0;
    order: -1;
}
/* Cartsy parent mete fondo oscuro en button:hover/:focus — neutralizar. */
.dynasty-header__burger:hover,
.dynasty-header__burger:focus,
.dynasty-header__burger:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.dynasty-header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--dynasty-black-obsidian);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.dynasty-header__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.dynasty-header__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.dynasty-header__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* === Drawer lateral (hamburguesa izquierda) ===
   Overlay full-screen con panel que entra deslizándose desde la izquierda.
   Mismo comportamiento en mobile y desktop. */

.dynasty-mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    isolation: isolate;
}
.dynasty-mobile-menu[hidden] { display: none !important; }

/* Backdrop oscuro que cubre lo que no ocupa el panel. Click → cierra. */
.dynasty-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: rgba(10, 10, 10, 0.5) !important;
    box-shadow: none !important;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
/* Cartsy parent oscurece button:hover/:focus — mantener el mismo velo. */
.dynasty-mobile-menu__backdrop:hover,
.dynasty-mobile-menu__backdrop:focus,
.dynasty-mobile-menu__backdrop:active {
    background: rgba(10, 10, 10, 0.5) !important;
    box-shadow: none !important;
    outline: none !important;
}
.dynasty-mobile-menu.is-open .dynasty-mobile-menu__backdrop { opacity: 1; }

/* Panel blanco deslizante desde la izquierda. */
.dynasty-mobile-menu__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 88%;
    max-width: 420px;
    background: var(--dynasty-white, #FFFFFF);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 48px rgba(0, 0, 0, 0.28);
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
}
.dynasty-mobile-menu.is-open .dynasty-mobile-menu__panel { transform: translateX(0); }

/* Barra superior del panel: logo + botón cerrar (X). */
.dynasty-mobile-menu__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    flex-shrink: 0;
}
.dynasty-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--dynasty-black-obsidian, #0A0A0A);
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.dynasty-mobile-menu__close:hover { color: var(--dynasty-brand-gold, #D4AF37); }

/* Background image sutil al fondo del panel (2/3 inferiores, baja opacity). */
.dynasty-mobile-menu__bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 0.30;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 40%, #000 70%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 40%, #000 70%);
}

.dynasty-mobile-menu__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 32px;
}

/* === Lista del drawer === */
.dynasty-mobile-menu__nav { margin-bottom: 28px; }

.dynasty-drawer__list,
.dynasty-drawer__brands {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.dynasty-drawer__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.dynasty-drawer__item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    line-height: 1.2 !important;
}
.dynasty-drawer__item::before,
.dynasty-drawer__item::marker { content: none !important; display: none !important; }

/* Links planos + texto del parent: misma tipografía. */
.dynasty-drawer__link,
.dynasty-drawer__parent {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 13px 0 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    text-align: left !important;
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 20px !important;
    font-weight: var(--dynasty-fw-medium, 500) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.dynasty-drawer__link:hover,
.dynasty-drawer__parent:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}

/* Chevron del acordeón Rent A Car. */
.dynasty-drawer__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.dynasty-drawer__parent[aria-expanded="true"] .dynasty-drawer__chevron {
    transform: rotate(90deg);
}

/* Submenú de marcas — 2 columnas. */
.dynasty-drawer__submenu {
    padding: 4px 0 12px 4px;
}
.dynasty-drawer__submenu[hidden] { display: none; }
.dynasty-drawer__brands {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 18px !important;
}
.dynasty-drawer__brands > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.dynasty-drawer__brands > li::before,
.dynasty-drawer__brands > li::marker { content: none !important; display: none !important; }
.dynasty-drawer__brands a {
    display: block !important;
    padding: 8px 0 !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 15px !important;
    font-weight: var(--dynasty-fw-regular, 400) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.dynasty-drawer__brands a:hover { color: var(--dynasty-brand-gold, #D4AF37) !important; }

.dynasty-drawer__viewall {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 13px !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dynasty-brand-gold, #D4AF37) !important;
    text-decoration: none !important;
}
.dynasty-drawer__viewall:hover { text-decoration: underline !important; }

/* === Contact info (email + phone) — entre el menú y el CTA al fondo === */
.dynasty-mobile-menu__contact {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 24px;
}
.dynasty-mobile-menu__contact-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: var(--dynasty-font-body, "Raleway", sans-serif) !important;
    font-size: 15px !important;
    font-weight: var(--dynasty-fw-regular, 400) !important;
    color: var(--dynasty-black-obsidian, #0A0A0A) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.dynasty-mobile-menu__contact-link:hover {
    color: var(--dynasty-brand-gold, #D4AF37) !important;
}
.dynasty-mobile-menu__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dynasty-black-obsidian, #0A0A0A);
    flex: 0 0 18px;
}

/* === CTA al fondo === */
.dynasty-mobile-menu__cta {
    width: 100% !important;
    margin-top: 24px !important;
    padding: 18px 24px !important;
    font-family: var(--dynasty-font-heading, "Montserrat", sans-serif) !important;
    font-size: 17px !important;
    font-weight: var(--dynasty-fw-bold, 700) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* === Burger del header: cuando el menú está abierto, fondo transparente
   y líneas negras (en lugar de la cajita negra con líneas blancas). === */
.dynasty-header__burger[aria-expanded="true"] {
    background: transparent !important;
}
.dynasty-header__burger[aria-expanded="true"] span {
    background: var(--dynasty-black-obsidian, #0A0A0A) !important;
}

/* === Mobile muy angosto (≤600px): el header no entraba en una fila.
   burger(40) + gap + logo(84px alto ≈ 250px ancho) + "SINCE 2008" + gap +
   carrito pedían ~500px en una pantalla de ~375px — como nada podía
   achicarse (flex-shrink:0 en brand/cta), el header se desbordaba del
   viewport. Antes el navegador compensaba con zoom-out de TODA la página
   (bug reportado 2026-07-21: scroll horizontal). El cliente pidió mantener
   "SINCE 2008" visible, así que en vez de esconderlo se achica todo el
   bloque (logo, since, carrito, burger, gaps) para que entre en el ancho
   real incluso en el mobile más angosto (320px). === */
@media (max-width: 600px) {
    .dynasty-header__inner { gap: 8px; min-height: 76px; }

    .dynasty-header__burger { width: 34px; height: 34px; padding: 8px 6px; }

    .dynasty-header__brand { gap: 8px; }
    .dynasty-logo--img img,
    .custom-logo-link img,
    .custom-logo {
        height: 44px !important;
        max-height: 44px !important;
    }

    .dynasty-header__since {
        padding-left: 8px !important;
        min-height: 38px !important;
    }
    .dynasty-header__since-label,
    .dynasty-header__since-year {
        font-size: 10px !important;
        letter-spacing: 0.01em !important;
    }

    .dynasty-header__cta { gap: 6px; }
    .dynasty-header__cart {
        width: 34px;
        height: 34px;
    }
    .dynasty-header__cart-icon svg { width: 20px; height: 20px; }
}

/* === Desktop overrides === */

@media (min-width: 1024px) {
    .dynasty-header__inner { min-height: 126px; }
    .dynasty-header__nav { display: flex; }
    .dynasty-header__reserve { display: inline-flex; }
    /* La hamburguesa y el drawer son SOLO mobile (en desktop manda el menú horizontal
       con el dropdown de marcas bajo "Fleet"). */
    .dynasty-header__burger { display: none !important; }
    .dynasty-mobile-menu { display: none !important; }
}