/* ════════════════════════════════════════════════════════════════════════
   TransLog — Mobile Polish v2   (round 55)
   ────────────────────────────────────────────────────────────────────────
   Loaded AFTER style.css and sections.css. All rules wrapped in media
   queries — desktop is unaffected.

   Replaces round 54's mobile-polish.css with a SAFER carousel approach:
     • v1 used a CSS grid hack on .module-carousel-viewport — that
       broke slide rendering on some viewports (image disappeared,
       leaving only nav buttons + dots floating in white space).
     • v2 keeps the original `position: absolute` for prev/next and
       just hides them on phones (swipe + dots are enough).

   Also new in v2:
     • Mobile language switcher next to the hamburger button (matches
       the user's screenshot mockup with the red arrow pointing there).
     • Top-bar language pill is hidden on phones — it now lives in
       the header bar itself, where it actually fits.

   Three areas covered:
     1) Carousel — phone + tablet polish (without breaking the track)
     2) Top contact bar — clean wrapping, lang switcher moved
     3) Mobile slide-out menu — animations + dim backdrop
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1) CAROUSEL — phones (≤ 640px) — PRO mobile redesign (round 57)
   ════════════════════════════════════════════════════════════════
   Previous attempt didn't beat the inline `--carousel-visible: 3`
   that Carousel.php writes onto the <section>. Inline custom
   properties beat regular CSS rules, so we need `!important`.

   Design goals (Apple App Store / Instagram-style mobile carousel):
     • ONE main card centered on screen, ~88% of viewport width
     • A small PEEK of the next card on the right (visual hint to swipe)
     • Image keeps its 4:3 ratio, full-width inside the card
     • Caption sits IN the bottom-left of the image, transparent gradient
       background for readability — does NOT overlap the gold arrow
     • Gold "go" arrow in the top-right corner (only when the slide
       has a link), out of caption's way
     • Prev/next nav buttons hidden on phones (swipe + dots are enough)
     • Bigger gold dots with smooth transitions
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    /* ── Force 1 visible slide. !important is REQUIRED because
       Carousel.php writes `style="--carousel-visible: 3"` directly
       on the <section>, and inline custom properties win over
       regular CSS rules. !important on the rule beats inline styles. ── */
    .module-carousel,
    .module-carousel-visible-1,
    .module-carousel-visible-2,
    .module-carousel-visible-3,
    .module-carousel-visible-4 {
        --carousel-visible: 1 !important;
        --car-gap: 14px !important;
    }

    /* Slim down the carousel header for phones */
    .module-carousel-header {
        margin-bottom: 22px;
    }
    .module-carousel-eyebrow {
        font-size: 0.74rem;
        letter-spacing: 0.16em;
    }
    .module-carousel-heading {
        font-size: 1.5rem;
        line-height: 1.2;
        max-width: 100%;
        padding: 0 16px;
    }

    /* ── Track: small left padding, RIGHT padding shows the peek ── */
    .module-carousel-track {
        padding: 4px 36px 12px 16px;   /* 36px right reveals next-card peek */
        gap: 14px;
        scroll-padding-left: 16px;
    }

    /* ── Slide: take ~88% of the viewport so the next card peeks ──
       Override the calc()-based formula entirely with !important.
       100% would fill the whole track; ~88% leaves a 12% peek. */
    .module-carousel-slide {
        width: 88% !important;
        scroll-snap-align: start;
    }

    /* The slide inner box — proper rounding and shadow */
    .module-carousel-slide-image .module-carousel-slide-inner {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16),
                    0 2px 4px rgba(15, 23, 42, 0.08);
    }

    /* ── Caption: bottom-left strip with gradient background.
          NOT a separate white pill — the original design had it as
          a pill that floated above the image, but on a small mobile
          card that fights the gold arrow for the bottom corners.
          A subtle gradient overlay reads better. ── */
    .module-carousel-caption {
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top,
                    rgba(11, 29, 58, 0.92) 0%,
                    rgba(11, 29, 58, 0.78) 60%,
                    rgba(11, 29, 58, 0) 100%);
        padding: 50px 18px 16px;       /* big top padding for the gradient fade */
        border-radius: 0 0 14px 14px;
        box-shadow: none;
        pointer-events: none;
    }
    .module-carousel-caption-label {
        color: #FFC966;                /* lighter gold against navy */
        font-size: 0.72rem;
        font-style: italic;
        font-weight: 600;
        letter-spacing: 0.04em;
        margin-bottom: 4px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    .module-carousel-caption-title {
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.25;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        /* Clamp very long titles to 2 lines */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── Gold arrow in top-right corner (only when slide has a link) ── */
    .module-carousel-arrow {
        top: 14px;
        right: 14px;
        bottom: auto;
        left: auto;
        width: 44px;
        height: 44px;
        background: var(--car-gold, #E8A317);
        color: var(--car-blue, #0B1D3A);
        box-shadow: 0 4px 12px rgba(232, 163, 23, 0.45),
                    0 0 0 3px rgba(255, 255, 255, 0.55);
        z-index: 2;
    }
    .module-carousel-arrow svg {
        width: 20px;
        height: 20px;
    }

    /* ── Hide prev/next nav buttons — swipe handles navigation ── */
    .module-carousel-prev,
    .module-carousel-next {
        display: none !important;
    }

    /* ── Dots: bigger, more elegant ── */
    .module-carousel-dots {
        margin-top: 22px;
        gap: 8px;
    }
    .module-carousel-dot {
        width: 9px;
        height: 9px;
        background: #cbd5e1;
        transition: background 0.18s ease, width 0.22s ease;
    }
    .module-carousel-dot.is-active {
        background: var(--car-gold, #E8A317);
        width: 28px;
        border-radius: 5px;
    }
}

/* Very narrow phones (≤ 380px): keep the same design but tighter */
@media (max-width: 380px) {
    .module-carousel-track {
        padding: 4px 28px 12px 12px;
    }
    .module-carousel-slide {
        width: 90% !important;
    }
    .module-carousel-heading {
        font-size: 1.35rem;
    }
    .module-carousel-caption-title {
        font-size: 0.98rem;
    }
}

/* Tablet (641–900px): keep the desktop layout BUT pull arrows + caption
   inward slightly so they don't overlap the slide images on narrower
   viewports (the screenshot at 820px showed everything working — these
   tweaks just make the medium tablet width even cleaner). */
@media (min-width: 641px) and (max-width: 900px) {
    .module-carousel-prev { left: 6px; }
    .module-carousel-next { right: 6px; }
    .module-carousel-caption {
        left: 14px;
        right: 64px;
        padding: 11px 14px;
    }
    .module-carousel-caption-title {
        font-size: 0.95rem;
    }
    .module-carousel-arrow {
        width: 42px;
        height: 42px;
    }
}


/* ════════════════════════════════════════════════════════════════
   2) MOBILE LANGUAGE SWITCHER — moved into .header-inner
   ════════════════════════════════════════════════════════════════
   The header.php file (round-55 update) now has TWO copies of the
   flag/lang switcher:
     • Inside .top-bar-right.top-bar-right-desktop  → desktop only
     • Inside .header-inner > .lang-switcher-mobile → mobile only
   The CSS below handles which one is visible at each breakpoint.

   Round 56: the mobile copy now uses flagDropdownHTML() which
   renders a single-pill trigger + popup panel. Styled below.
   ════════════════════════════════════════════════════════════════ */

/* Default (desktop): hide the mobile copy entirely */
.lang-switcher-mobile {
    display: none;
}

/* ── Round 56: PRO Lang Dropdown ── */
/* Universal styles (works on any background; specifics for mobile
   header bar overrides are below in the @media block). */

.lang-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lang-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--gray-200, #e2e8f0);
    background: #fff;
    color: var(--gray-700, #334155);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}
.lang-dd-trigger:hover:not(:disabled) {
    background: var(--gray-50, #f8fafc);
    border-color: var(--gray-300, #cbd5e1);
}
.lang-dd-trigger:focus-visible {
    outline: 0;
    border-color: var(--gold, #E8A317);
    box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.18);
}
.lang-dd-trigger:disabled {
    cursor: default;
    opacity: 0.85;
}
.lang-dd-trigger img {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
.lang-dd-code {
    letter-spacing: 0.04em;
}
.lang-dd-caret {
    font-size: 0.7rem;
    line-height: 1;
    margin-left: 2px;
    opacity: 0.6;
    transition: transform 0.18s ease, opacity 0.15s ease;
}
.lang-dropdown.open .lang-dd-caret {
    transform: rotate(180deg);
    opacity: 1;
}
.lang-dropdown.open .lang-dd-trigger {
    border-color: var(--gold, #E8A317);
    background: rgba(232, 163, 23, 0.06);
    color: var(--navy, #0B1D3A);
}

/* The popup panel */
.lang-dd-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 6px;
    z-index: 1100;          /* above sticky header (1000) */
    /* Animation in */
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.lang-dropdown.open .lang-dd-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* When `hidden` attribute is present (initial state), block layout */
.lang-dd-panel[hidden] {
    display: none;
}
.lang-dropdown.open .lang-dd-panel[hidden] {
    /* JS removes the hidden attr on open, but covering edge cases */
    display: block;
}
.lang-dd-panel-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500, #64748b);
    padding: 8px 10px 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid #f1f5f9;
}

.lang-dd-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--gray-700, #334155);
    font-size: 0.86rem;
    transition: background 0.12s ease, color 0.12s ease;
}
.lang-dd-row:hover {
    background: var(--gray-50, #f8fafc);
    color: var(--navy, #0B1D3A);
}
.lang-dd-row.is-active {
    background: rgba(232, 163, 23, 0.10);
    color: var(--gold, #E8A317);
    font-weight: 600;
}
.lang-dd-row img {
    width: 22px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.lang-dd-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lang-dd-row-code {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--gray-400, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lang-dd-row.is-active .lang-dd-row-code {
    color: var(--gold, #E8A317);
}
.lang-dd-row-tick {
    color: var(--gold, #E8A317);
    font-weight: 700;
    margin-left: 4px;
}


@media (max-width: 720px) {
    /* Hide the top-bar copy on phones (it had bad wrapping behavior) */
    .top-bar-right-desktop {
        display: none;
    }

    /* Show the mobile copy in the white header bar, just before the
       hamburger.

       CRITICAL: `margin-left: auto` pushes this all the way to the
       right of the flex row, so it groups with the hamburger.
       Without this, justify-content: space-between on .header-inner
       would distribute logo / DE / ☰ evenly, leaving the DE pill
       stranded in the middle. */
    .lang-switcher-mobile {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        margin-right: 4px;
    }

    /* Mobile-specific tightening of the dropdown trigger */
    .lang-switcher-mobile .lang-dd-trigger {
        padding: 6px 8px;
        font-size: 0.74rem;
        gap: 5px;
    }
    .lang-switcher-mobile .lang-dd-trigger img {
        width: 18px;
        height: 13px;
    }

    /* Panel positioning on mobile — anchor under the trigger,
       align right edge so it doesn't overflow off-screen. */
    .lang-switcher-mobile .lang-dd-panel {
        right: -4px;          /* nudge so the panel hugs the screen edge */
        min-width: 180px;
        max-width: calc(100vw - 24px);
    }
}


/* ════════════════════════════════════════════════════════════════
   3) HEADER + TOP CONTACT BAR — phones (≤ 720px)
   ════════════════════════════════════════════════════════════════
   With the lang switcher now moved out of the top bar, the top bar
   is just phone + email. Keep them centered and tightly spaced.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    .top-bar {
        padding: 6px 0;
        font-size: 0.75rem;
    }
    .top-bar .container {
        padding-left: 14px;
        padding-right: 14px;
        gap: 6px 14px;
        justify-content: center;    /* center phone + email */
    }
    .top-bar-left {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .top-bar-left a {
        font-size: 0.78rem;
    }

    /* Header bar — tighter, but make room for the new mobile lang pill */
    .header-inner {
        padding: 0 12px;
        height: 64px;
        gap: 8px;
    }
    .logo {
        font-size: 1.15rem;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .logo img {
        max-height: 36px;
        width: auto;
    }
    /* Hide logo sub-tagline on phones */
    .logo small,
    .logo .logo-tagline,
    .logo-sub,
    .logo .tagline {
        display: none;
    }

    /* Hamburger: meatier tap target */
    .hamburger {
        padding: 8px;
        margin-left: 0;
    }
    .hamburger span {
        width: 22px;
        transition: transform 0.22s ease, opacity 0.15s ease;
    }
}

/* Very narrow phones (≤ 380px): drop the email entirely. */
@media (max-width: 380px) {
    .top-bar-left a:nth-of-type(2),
    .top-bar-left .top-bar-email {
        display: none;
    }

    /* Even tighter dropdown trigger — keep only the flag image,
       drop the "DE"/"EN" code label so the pill doesn't crowd the
       hamburger. */
    .lang-switcher-mobile .lang-dd-trigger {
        padding: 5px 7px;
    }
    .lang-switcher-mobile .lang-dd-code {
        display: none;
    }
    .header-inner {
        padding: 0 10px;
    }
}


/* ════════════════════════════════════════════════════════════════
   4) MOBILE MENU — slide-down + backdrop + polished items
   ════════════════════════════════════════════════════════════════
   (Same as round 54 — this part wasn't broken, just kept here so
   the patch is self-contained.)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
    /* Animated dropdown panel.
       CRITICAL: must stay `position: absolute` (matching the original
       style.css mobile rule) so the nav DOES NOT take space inside
       .header-inner's flex layout. Otherwise it pushes other items
       (logo, lang pill, hamburger) out of their proper positions.
       The animation comes from max-height + opacity, not from
       changing display. */
    .main-nav {
        position: absolute;
        top: 64px;              /* below the (mobile) sticky header */
        left: 0;
        right: 0;
        background: var(--white);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        pointer-events: none;
        transition: max-height 0.28s ease, opacity 0.18s ease, padding 0.28s ease;
        border-top: 1px solid #f1f5f9;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        z-index: 1000;
    }
    .main-nav.open {
        max-height: 80vh;
        opacity: 1;
        padding: 12px 16px 18px;
        overflow-y: auto;
        pointer-events: auto;
    }

    /* Backdrop — only when body has .nav-open class */
    body.nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        top: 64px;
        background: rgba(11, 29, 58, 0.35);
        z-index: 999;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        animation: tl-nav-backdrop-fade 0.18s ease both;
        pointer-events: auto;
    }
    @keyframes tl-nav-backdrop-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Top-level items */
    .main-nav a,
    .main-nav .nav-parent {
        padding: 13px 14px;
        font-size: 0.95rem;
        font-weight: 500;
        border-radius: 8px;
        border-left: 3px solid transparent;
        transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }
    .main-nav a:hover,
    .main-nav .nav-parent:hover {
        background: #f8fafc;
        color: var(--navy);
        border-left-color: var(--gold);
    }
    .main-nav a.active,
    .main-nav .nav-parent.active {
        background: var(--gold);
        color: #fff;
        border-left-color: var(--gold);
    }
    .main-nav a.active::after,
    .main-nav .nav-parent.active::after {
        display: none;
    }

    /* Submenu */
    .main-nav .nav-item.has-submenu.open > .submenu {
        max-height: 600px;
        padding: 4px 0 8px 14px;
        margin: 2px 0 6px 14px;
        border-left: 2px solid #e2e8f0;
    }
    .submenu a {
        padding: 10px 14px;
        font-size: 0.86rem;
        color: var(--gray-500);
        border-left: 0;
    }
    .submenu a:hover {
        background: #f1f5f9;
        color: var(--navy);
    }
    .submenu a.active {
        background: rgba(232, 163, 23, 0.12);
        color: var(--gold);
    }

    /* Caret */
    .submenu-caret {
        font-size: 0.7rem;
        opacity: 0.6;
        margin-left: auto;
        transition: transform 0.2s ease, opacity 0.15s ease;
    }
    .main-nav .nav-item.has-submenu.open > .nav-parent .submenu-caret {
        transform: rotate(180deg);
        opacity: 1;
    }
}