/**
 * Destinations mega menu — v3 redesign in the catalog visual language.
 *
 * Scoped under `.dmc-megamenu--v3` so the legacy v1/v2 rules in
 * output.css stay untouched and a one-line revert (drop the modifier
 * in header.php) restores the old look. Reuses the catalog palette
 * (navy/ivory/gold) inline rather than importing newcataloge-italy.css
 * since that sheet is page-scoped and the header runs on every URL.
 */

.dmc-megamenu--v3 {
    /* Local palette — kept independent so a future newcataloge palette
       refactor can't accidentally restyle the header dropdown. */
    --mm-navy:        #1a2540;
    --mm-navy-soft:   #2c3e7d;
    --mm-head:        #2c4875;
    --mm-head-end:    #314b72;
    --mm-gold:        #e9a82a;
    --mm-gold-bg:     #fff8e1;
    --mm-ivory:       #faf7f0;
    --mm-cream:       #f5f1e6;
    --mm-card-bg:     #ffffff;
    --mm-border:      rgba(26, 37, 64, 0.10);
    --mm-border-strong: rgba(26, 37, 64, 0.20);
    --mm-text-muted:  #6b7280;

    background: var(--mm-ivory);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(26, 37, 64, 0.18);
    padding: 0;
    overflow: hidden;
    /* Pull the dropdown closer to the trigger row — the v2 default is
       only -2px, which leaves a visible band of header-bg between the
       Destinations link and the dropdown card. */
    top: calc(100% - 8px) !important;
    /* Match the page container width (.container is 1200px max). The
       v2 base sheet caps at 1100px which leaves the dropdown floating
       narrower than the rest of the site content. */
    max-width: 1200px !important;
    /* Animations originate from the top edge so scale + translate read
       as a clean drop-down rather than a centred zoom. */
    transform-origin: top center;
}
.dmc-header.is-sticky .dmc-megamenu--v3 {
    top: calc(100% - 6px) !important;
}

/* Recolour the v2 white pointer triangle so it visually merges with
   the new navy header instead of floating as a white blob over it.
   `.dmc-megamenu-arrow` lives outside the v3 dropdown (in the trigger
   li) but the rule is global enough that scoping under nav is safe. */
.dmc-nav-item-megamenu .dmc-megamenu-arrow {
    border-bottom-color: #2c4875 !important;
}

/* Smoother enter/leave animation. The v2 base sheet uses 0.3s ease
   transitions and only animates an 8px translateY — the change reads
   as a snap. We override with:
   - longer 380ms duration on enter, 220ms on leave
   - cubic-bezier(0.16, 1, 0.3, 1) — soft "expo-out" curve, fast start
     then graceful settle, no overshoot
   - bigger 14px translateY for a more visible drop-in
   - subtle 0.96 → 1 scale-in, anchored at top-center so the dropdown
     blooms from the trigger row rather than zooming from its centre

   Specificity of `.dmc-megamenu.dmc-megamenu--v3.X` (0,3,0) trumps the
   v2 rules at `.dmc-megamenu.X` (0,2,0) so the new transform values
   win; opacity rules are added because output.css lacks any
   `.opacity-0 / .opacity-100` utility classes. */
.dmc-megamenu.dmc-megamenu--v3 {
    transform-origin: top center;
    transition:
        opacity .38s cubic-bezier(0.16, 1, 0.3, 1),
        transform .38s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dmc-megamenu.dmc-megamenu--v3.opacity-0   { opacity: 0; }
.dmc-megamenu.dmc-megamenu--v3.opacity-100 { opacity: 1; }
.dmc-megamenu.dmc-megamenu--v3.-translate-y-2 {
    transform: translateX(-50%) translateY(-14px) scale(0.96);
}
.dmc-megamenu.dmc-megamenu--v3.translate-y-0 {
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Override the v2 ::before "EXPLORE DESTINATIONS" pill so we can
   rebuild it as a real flex bar with subtitle + gold accent line. */
.dmc-megamenu--v3::before { display: none; }

.dmc-megamenu--v3-head {
    position: relative;
    background: linear-gradient(135deg, #2c4875 0%, #314b72 100%);
    color: #fff;
    padding: 16px 28px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.dmc-megamenu--v3-head::after {
    /* Gold hairline at the bottom of the bar — the catalog's
       signature accent. */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mm-gold) 20%, var(--mm-gold) 80%, transparent);
}
.dmc-megamenu--v3-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--mm-gold);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.dmc-megamenu--v3-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: #ffffff;
}
.dmc-megamenu--v3-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    text-align: right;
    line-height: 1.4;
}
.dmc-megamenu--v3-meta strong {
    color: #fff;
    font-weight: 600;
}

/* Country grid — 4 cols on desktop, 3 / 2 narrower. City list is
   capped to 3 per card in PHP so all cards in a row stay equal
   height; grid's row-stretch handles any minor variance. */
.dmc-megamenu--v3 .dmc-megamenu-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 20px;
    background: var(--mm-ivory);
}
@media (max-width: 1100px) {
    .dmc-megamenu--v3 .dmc-megamenu-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .dmc-megamenu--v3 .dmc-megamenu-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dmc-megamenu--v3 .dmc-megamenu-column {
    background: var(--mm-card-bg);
    border: 1px solid var(--mm-border);
    border-radius: 10px;
    padding: 10px 12px 8px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* No right-border (v2 had vertical divider) — the card carries
       its own boundary now. */
    border-right: 1px solid var(--mm-border) !important;
}
.dmc-megamenu--v3 .dmc-megamenu-column:hover {
    border-color: var(--mm-gold);
    box-shadow: 0 4px 14px rgba(26, 37, 64, 0.06);
    transform: translateY(-1px);
}

/* Country header inside each card — flag plate (24×16, like the
   catalog avatar, just smaller), name navy, count in gold. */
.dmc-megamenu--v3 .dmc-megamenu-country {
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent !important;
    color: var(--mm-navy) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-decoration: none;
    line-height: 1.25;
}
.dmc-megamenu--v3 .dmc-megamenu-country:hover {
    color: var(--mm-navy-soft) !important;
}
.dmc-megamenu--v3 .dmc-megamenu-flag {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.dmc-megamenu--v3 .dmc-megamenu-country-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "View all" CTA at the bottom of each country card — implemented as
   a CSS ::after pseudo-element so it never enters the DOM tree.
   Crawlers see only one anchor per country (the card header link);
   the visual cue here is purely decorative. The card itself is made
   clickable by a delegated JS handler in header.php that reads the
   inner country anchor's href when the user clicks empty card space. */
.dmc-megamenu--v3 .dmc-megamenu-column {
    cursor: pointer;
}
.dmc-megamenu--v3 .dmc-megamenu-column::after {
    content: 'View all →';
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
    padding: 3px 0;
    transition: color .15s ease, padding-left .15s ease;
}
.dmc-megamenu--v3 .dmc-megamenu-column:hover::after {
    color: var(--mm-gold);
    padding-left: 3px;
}

/* City list — reset the legacy ::before triangle indicator,
   simpler "→" on hover via padding shift only. */
.dmc-megamenu--v3 .dmc-megamenu-cities {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed var(--mm-border);
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dmc-megamenu--v3 .dmc-megamenu-cities li {
    margin: 0;
}
.dmc-megamenu--v3 .dmc-megamenu-cities a {
    display: block;
    font-size: 12.5px;
    color: var(--mm-text-muted);
    padding: 2px 0;
    text-decoration: none;
    transition: color .12s ease, padding-left .12s ease;
    position: relative;
    line-height: 1.4;
}
.dmc-megamenu--v3 .dmc-megamenu-cities a::before {
    /* Suppress the inherited v2 triangle */
    display: none !important;
}
.dmc-megamenu--v3 .dmc-megamenu-cities a:hover {
    color: var(--mm-navy);
    padding-left: 6px;
}

/* "Browse by service" strip — sits below the country grid in
   parchment-coloured section. Mirrors the catalog browse-tile look
   but compacted (no icons, no count, no scroll arrows). */
.dmc-megamenu--v3-services {
    background: var(--mm-cream);
    border-top: 1px solid var(--mm-border);
    padding: 14px 22px 16px;
}
.dmc-megamenu--v3-services-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.dmc-megamenu--v3-services-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mm-navy);
    text-transform: uppercase;
    margin: 0;
}
.dmc-megamenu--v3-services-link {
    font-size: 12px;
    color: var(--mm-navy-soft);
    text-decoration: none;
    transition: color .15s ease;
    font-weight: 500;
}
.dmc-megamenu--v3-services-link:hover {
    color: var(--mm-gold);
}
.dmc-megamenu--v3-services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dmc-megamenu--v3-service-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--mm-card-bg);
    border: 1px solid var(--mm-border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mm-navy);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    line-height: 1.2;
    white-space: nowrap;
}
.dmc-megamenu--v3-service-chip:hover {
    background: var(--mm-navy);
    border-color: var(--mm-navy);
    color: #fff;
}
.dmc-megamenu--v3-service-chip:hover .dmc-megamenu--v3-service-chip-arrow {
    transform: translateX(2px);
}
.dmc-megamenu--v3-service-chip-arrow {
    width: 12px;
    height: 12px;
    transition: transform .15s ease;
    opacity: 0.55;
}
.dmc-megamenu--v3-service-chip:hover .dmc-megamenu--v3-service-chip-arrow {
    opacity: 1;
}

/* ─── Mobile menu (v3) ────────────────────────────────────────────
   Left-side drawer reusing the catalog visual language. The wrapper
   is the full-screen scrim + click-outside target; the aside inside
   slides on its own track from translateX(-100%) to 0. Backdrop
   opacity transition is handled by Alpine x-transition on the
   wrapper; drawer slide is a CSS class toggle (.is-open). */
.dmc-mobile-menu.dmc-mobile-menu--v3 {
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* Backdrop is animated via background-color transition (real CSS,
       not Alpine x-transition with non-existent Tailwind classes).
       When closed: transparent + pointer-events:none so the page
       under it remains interactive; when open: navy scrim. */
    background: rgba(26, 37, 64, 0);
    pointer-events: none;
    transition: background-color .42s cubic-bezier(0.22, 1, 0.36, 1);
    /* Override the v1 mobile menu chrome — we use a fixed full-screen
       overlay with our own drawer inside, not a top-anchored panel. */
    padding: 0;
    overflow: hidden;
    max-height: none;
    box-shadow: none;
}
.dmc-mobile-menu.dmc-mobile-menu--v3.is-open {
    background: rgba(26, 37, 64, 0.45);
    pointer-events: auto;
}

.dmc-mobile-menu--v3__drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 380px);
    background: var(--mm-ivory, #faf7f0);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .48s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -6px 0 28px rgba(26, 37, 64, 0.22);
    overflow: hidden;
}
.dmc-mobile-menu--v3__drawer.is-open {
    transform: translateX(0);
}

/* Header bar — same gradient + gold accent line as the desktop
   dropdown for visual continuity. */
.dmc-mobile-menu--v3__head {
    position: relative;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #2c4875 0%, #314b72 100%);
    color: #fff;
    padding: 18px 18px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.dmc-mobile-menu--v3__head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e9a82a 20%, #e9a82a 80%, transparent);
}
.dmc-mobile-menu--v3__eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #e9a82a;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.dmc-mobile-menu--v3__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    color: #ffffff;
}
.dmc-mobile-menu--v3__close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease;
}
.dmc-mobile-menu--v3__close:hover,
.dmc-mobile-menu--v3__close:focus-visible {
    background: rgba(255,255,255,0.18);
}

/* Scrollable body — the only scroll context inside the drawer.
   `overscroll-behavior: contain` so a flick-scroll inside the
   menu can't wake up the page underneath. */
.dmc-mobile-menu--v3__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* All countries laid out as a vertical stack — no accordion. Each
   card mirrors the desktop column markup (flag + name + cities +
   "View all →" hint via ::after). */
.dmc-mobile-menu--v3__countries {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dmc-mobile-menu--v3__country {
    background: #ffffff;
    border: 1px solid rgba(26, 37, 64, 0.10);
    border-radius: 10px;
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}
.dmc-mobile-menu--v3__country::after {
    content: 'View all →';
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 0;
    transition: color .15s ease, padding-left .15s ease;
}
.dmc-mobile-menu--v3__country:active::after {
    color: #e9a82a;
}
.dmc-mobile-menu--v3__country-head {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #1a2540;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}
.dmc-mobile-menu--v3__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.dmc-mobile-menu--v3__flag svg {
    width: 100%;
    height: 100%;
    display: block;
}
.dmc-mobile-menu--v3__country-name {
    flex: 1;
    min-width: 0;
}
.dmc-mobile-menu--v3__cities {
    list-style: none;
    margin: 0;
    padding: 6px 0 0;
    border-top: 1px dashed rgba(26, 37, 64, 0.10);
    display: flex;
    flex-direction: column;
}
.dmc-mobile-menu--v3__cities a {
    display: block;
    font-size: 13px;
    color: #6b7280;
    padding: 4px 0;
    text-decoration: none;
    line-height: 1.4;
}
.dmc-mobile-menu--v3__cities a:active {
    color: #1a2540;
}

/* Browse by service — same chip language as desktop. */
.dmc-mobile-menu--v3__services {
    background: var(--mm-cream, #f5f1e6);
    border: 1px solid rgba(26, 37, 64, 0.08);
    border-radius: 10px;
    padding: 12px 12px 14px;
}
.dmc-mobile-menu--v3__services-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1a2540;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.dmc-mobile-menu--v3__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dmc-mobile-menu--v3__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    background: #ffffff;
    border: 1px solid rgba(26, 37, 64, 0.10);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #1a2540;
    text-decoration: none;
    line-height: 1.2;
}
.dmc-mobile-menu--v3__chip:active {
    background: #1a2540;
    border-color: #1a2540;
    color: #fff;
}

/* Other primary nav items (About, Blog, Contact, …). */
.dmc-mobile-menu--v3__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(26, 37, 64, 0.10);
    border-bottom: 1px solid rgba(26, 37, 64, 0.10);
}
.dmc-mobile-menu--v3__nav li {
    margin: 0;
}
.dmc-mobile-menu--v3__nav a {
    display: block;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #1a2540;
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 37, 64, 0.06);
}
.dmc-mobile-menu--v3__nav li:last-child a {
    border-bottom: 0;
}

.dmc-mobile-menu--v3__cta {
    display: block;
    text-align: center;
    padding: 12px 16px;
    background: #e9a82a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(233, 168, 42, 0.28);
}
.dmc-mobile-menu--v3__cta:active {
    background: #d59925;
}

.dmc-mobile-menu--v3__contacts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}
.dmc-mobile-menu--v3__contacts a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    text-decoration: none;
}
.dmc-mobile-menu--v3__contacts a svg {
    flex-shrink: 0;
}
}