:root {
    --blue-dark:    #004477;
    --blue-mid:     #005592;
    --blue-light:   #006bb3;
    --brand-amber:        #F5A623;
    --brand-amber-hover:  #E8961A;
    --brand-amber-active: #D48510; /* WCAG AA on white / light backgrounds */
    --brand-amber-subtle: #FDF4E3;
    --brand-navy:         #0A2540;
    --brand-navy-hover:   #071A2E;
    --brand-navy-light:   #15375C;
    --white:        #ffffff;
    --cream:        #f7f9f7;
    --ink:          #0d2035;
    --text-on-dark: #e8f0f7;
    --text-muted:   #8aaec4;
    --text-muted-accessible: #b5ceda; /* WCAG AA on #004477 / #005592 */
    --border-dark:  #1a4060;
    --border-light: #d0e0ec;
}

/* =====================================================================
   ACCESSIBILITY: WCAG AA COLOR CONTRAST OVERRIDES
   Tailwind utility classes with low-contrast colors are remapped here
   so we don't have to edit every PHP template. Overrides target the
   TEXT color only — background/border uses of the same shade stay.
   ===================================================================== */

/* Amber #F5A623 as TEXT on light backgrounds — bump to #D48510 (≥4.5:1) */
.text-\[\#F5A623\] {
    color: #D48510 !important;
}

/* Hover state for amber links on light backgrounds — darker for visible feedback */
.hover\:text-\[\#E8961A\]:hover {
    color: #A8690A !important;
}

/* Muted blue-gray #8aaec4 on dark-blue backgrounds — bump to #b5ceda
   (≥6.8:1 on #004477). Applies to footer links, review captions, etc. */
.text-\[\#8aaec4\],
a.text-\[\#8aaec4\],
p.text-\[\#8aaec4\],
span.text-\[\#8aaec4\],
.block.text-\[\#8aaec4\] {
    color: #b5ceda !important;
}

/* Keep mailto hover readable */
footer a[href^="mailto:"]:hover {
    color: #ffffff !important;
}

/* Amber subtle badge: #E8961A text on #FDF4E3 is AA-readable */
.bg-\[\#FDF4E3\].text-\[\#E8961A\],
.bg-\[\#FDF4E3\] .text-\[\#E8961A\],
span.text-\[\#E8961A\] {
    color: #D48510 !important;
}

/* Ink/0.60 opacity body copy on cream — strengthen to 0.75 */
.text-\[\#0d2035\]\/60 {
    color: rgba(13, 32, 53, 0.78) !important;
}
.text-\[\#0d2035\]\/70 {
    color: rgba(13, 32, 53, 0.85) !important;
}

/* Language switcher "EN/DE/ES" active state in nav */
nav .text-\[\#F5A623\].font-bold {
    color: #F5A623 !important;
}

/* Amber BUTTON backgrounds: text is navy #0A2540 per brand contrast rule
   (navy on amber ≈ 6:1 — AA pass) */
a.bg-\[\#F5A623\],
button.bg-\[\#F5A623\],
.bg-\[\#F5A623\].text-white,
.bg-\[\#F5A623\][class*="text-white"] {
    background-color: #F5A623 !important;
    color: #0A2540 !important;
}
a.bg-\[\#F5A623\]:hover,
button.bg-\[\#F5A623\]:hover,
.hover\:bg-\[\#E8961A\]:hover {
    background-color: #E8961A !important;
}

/* Gradient CTA strip (from-[#F5A623] to-[#E8961A]) */
.from-\[\#F5A623\] {
    --tw-gradient-from: #F5A623 !important;
    --tw-gradient-to: rgba(245, 166, 35, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-\[\#E8961A\] {
    --tw-gradient-to: #E8961A !important;
}

/* =====================================================================
   UNIFIED BUTTON ROUNDING — rounded-lg (8px) for all CTA buttons
   Covers: green bg buttons, outline buttons, border buttons, submit
   Does NOT affect: rounded-full (avatars, badges, pills)
   ===================================================================== */

/* All amber CTA buttons & links */
a.bg-\[\#F5A623\],
button.bg-\[\#F5A623\],
a.bg-\[\#E8961A\],
button.bg-\[\#E8961A\],
.bg-\[\#F5A623\][class*="font-"],
.bg-\[\#E8961A\][class*="font-"] {
    border-radius: 0.5rem !important; /* rounded-lg = 8px */
}

/* Outline / border buttons (reviews, fleet, etc.) */
a[class*="border-2"][class*="border-\[\#F5A623\]"],
a[class*="border-2"][class*="border-white"],
a[class*="border"][class*="text-\[\#e8f0f7\]"][class*="font-\["],
a.border-2 {
    border-radius: 0.5rem !important;
}

/* Form submit buttons */
button[type="submit"] {
    border-radius: 0.5rem !important;
}

/* Nav CTA "Request a Quote" */
nav a[class*="bg-\[\#F5A623\]"] {
    border-radius: 0.5rem !important;
}

/* Fleet CTA buttons */
.fleet-cta {
    border-radius: 0.5rem !important;
}

/* Cookie banner buttons */
#cookie-banner button {
    border-radius: 0.5rem !important;
}

/* Catch-all: any link/button styled as Oswald uppercase CTA = rounded-lg */
a[class*="font-\[\'Oswald\'\]"][class*="uppercase"],
button[class*="font-\[\'Oswald\'\]"][class*="uppercase"] {
    border-radius: 0.5rem !important;
}

/* Links with border-2 that act as outline buttons */
a[class*="inline-block"][class*="border-2"],
a[class*="inline-flex"][class*="border-2"] {
    border-radius: 0.5rem !important;
}

/* Scrollbar thumb — kept aesthetic, not content */

/* Headings — Oswald */
.heading {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Italic accent — DM Serif Display */
.italic-accent {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ===== MODERN TOUCHES ===== */

/* Subtle gradient backgrounds for sections */
section {
    position: relative;
}


/* Cards get subtle hover lift */
a[class*="border"]:hover,
div[class*="fleet-card"]:hover {
    transform: translateY(-2px);
}

/* Line-clamp (Tailwind plugin not loaded, hand-roll) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .md\:line-clamp-none {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
}

/* Gradient text for special headings */
.gradient-text {
    background: linear-gradient(135deg, #F5A623, #0A2540);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow effect on amber buttons */
a[class*="bg-[#F5A623]"]:hover,
button[class*="bg-[#F5A623]"]:hover {
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.4);
}

/* Smooth image loading */
img {
    transition: opacity 0.3s ease;
}

/* ===== FAQ ===== */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.faq-answer.open {
    max-height: 500px;
    opacity: 1;
}

/* Hover open removed — FAQ opens on click only */

.faq-toggle svg {
    transition: transform 0.3s ease;
}

.faq-toggle.open svg {
    transform: rotate(180deg);
    color: #F5A623;
}

.faq-toggle.open {
    border-left: 3px solid #F5A623;
    padding-left: calc(1.25rem - 3px);
}

/* ===== GALLERY ===== */
.gallery-track {
    display: flex;
    transition: transform 0.4s ease;
}

.gallery-track img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== MEGA MENU ===== */
/* Default: closed state — invisible but kept in DOM for transition */
.mega-dropdown {
    opacity: 0;
    transform: translateY(-4px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease-in, transform 120ms ease-in, visibility 0s linear 120ms;
}

/* Open state: hover on parent, keyboard focus inside, or JS-added .mega-open */
.mega-parent:hover .mega-dropdown,
.mega-parent:focus-within .mega-dropdown,
.mega-parent.mega-open .mega-dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 0s;
}

.mega-parent:hover .mega-arrow,
.mega-parent.mega-open .mega-arrow,
.mega-parent:focus-within .mega-arrow {
    transform: rotate(180deg);
}

/* ===== SERVICES DROPDOWN (dark premium redesign) ===== */
.services-dropdown-panel {
    width: 560px;
    max-width: 560px;
    background: #0A1F38;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.services-dropdown-label {
    color: #F5A623;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.services-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.services-dropdown-item {
    display: block;
    padding: 11px 12px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.services-dropdown-title {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.services-dropdown-desc {
    display: block;
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    transition: color 150ms ease;
}

.services-dropdown-item:hover,
.services-dropdown-item.is-active {
    background: rgba(245,166,35,0.08);
    /* inset border-left: 2px amber — no layout shift */
    box-shadow: inset 2px 0 0 0 #F5A623;
}

.services-dropdown-item:hover .services-dropdown-desc,
.services-dropdown-item.is-active .services-dropdown-desc {
    color: rgba(255,255,255,0.7);
}

.services-dropdown-item:focus-visible {
    outline: 2px solid #F5A623;
    outline-offset: 2px;
}

.services-dropdown-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 16px;
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.services-dropdown-footer--no-cta {
    justify-content: flex-start;
}

.services-dropdown-footer-text {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
}

.services-dropdown-footer-link {
    color: #F5A623;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms ease;
}

.services-dropdown-footer-link:hover,
.services-dropdown-footer-link:focus-visible {
    color: #E8961A;
}

/* Network dropdown — two-column layout (Cities + Countries) */
.services-dropdown-network {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Flag variant for Network items */
.services-dropdown-item--flag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.services-dropdown-flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.services-dropdown-item--flag .services-dropdown-title {
    margin-bottom: 0;
    font-size: 13px;
}

.mobile-mega-toggle.open svg {
    transform: rotate(180deg);
}

/* ===== HERO — stronger overlay for text readability ===== */
.hero-overlay {
    background: linear-gradient(to right, rgba(0, 68, 119, 0.95), rgba(0, 68, 119, 0.85)) !important;
}

/* Strengthen ALL hero gradient overlays (inline Tailwind classes) */
section.relative > div.absolute.inset-0[class*="bg-gradient"] {
    opacity: 1 !important;
    background: linear-gradient(to right, rgba(13, 32, 53, 0.95), rgba(0, 68, 119, 0.88), rgba(0, 68, 119, 0.80)) !important;
}

/* ===== LOGO MARQUEE ===== */
.logo-marquee {
    overflow: hidden !important;
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.logo-marquee-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3.5rem !important;
    width: max-content !important;
    animation: marquee 30s linear infinite;
}

.logo-marquee-track img,
img.logo-item {
    display: block !important;
    flex-shrink: 0 !important;
    width: 180px !important;
    height: 60px !important;
    max-width: none !important;
    object-fit: contain !important;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.logo-marquee-track img:hover,
img.logo-item:hover {
    opacity: 1;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.logo-marquee:hover .logo-marquee-track {
    animation-play-state: paused;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.fade-up-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up-stagger.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(7) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.fade-up-stagger.visible > *:nth-child(8) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }

/* Nav shadow on scroll */
nav.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Form field validation */
input:invalid:not(:placeholder-shown) {
    border-color: #ef4444 !important;
}

input:valid:not(:placeholder-shown) {
    border-color: #0A2540 !important;
}

/* ===== SCROLLBAR HIDE (for swipe carousels) ===== */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ===== MOBILE IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Smaller headings on mobile */
    h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.5rem !important; }

    /* Prevent horizontal overflow */
    body { overflow-x: hidden; }
    .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }

    /* Break long words (especially German compound words) */
    p, span, h1, h2, h3, h4, li, a { overflow-wrap: break-word; word-break: break-word; }

    /* Hero form stacks below text on mobile */
    .grid.md\:grid-cols-2 { gap: 1.5rem; }

    /* Make fleet cards full width */
    .fleet-card { min-width: 0; }
    .fleet-gallery { height: 180px !important; }

    /* Logo marquee - smaller on mobile */
    .logo-marquee-track {
        gap: 2rem !important;
        animation-duration: 20s !important;
    }

    .logo-marquee-track img,
    img.logo-item {
        width: 100px !important;
        height: 35px !important;
    }

    /* Footer columns */
    footer .grid { gap: 2rem; }

    /* Reduce section padding on mobile (hero excluded) */
    section:not(.hero) { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    section.hero { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    /* Less gap between elements */
    .mb-16 { margin-bottom: 2rem !important; }
    .mb-14 { margin-bottom: 1.5rem !important; }
    .mb-10 { margin-bottom: 1.25rem !important; }
    .gap-16 { gap: 1.5rem !important; }
    .gap-12 { gap: 1.5rem !important; }
    .gap-10 { gap: 1.25rem !important; }
    .gap-8 { gap: 1rem !important; }
    .space-y-16 > * + * { margin-top: 2rem !important; }
    .space-y-12 > * + * { margin-top: 1.5rem !important; }

    /* Country cards: 2 columns grid on mobile */
    .country-card { height: 7rem !important; }
    .grid.sm\:grid-cols-2.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Country/city photo cards smaller */
    .h-56 { height: 10rem !important; }
    .h-52 { height: 9rem !important; }
    .h-36 { height: 7rem !important; }

    /* Trust badges scroll horizontally if needed */
    .flex-wrap { gap: 0.5rem; }

    /* Breadcrumbs smaller */
    nav + nav { padding: 0.5rem 0; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem !important; }
    .min-h-\[350px\] { min-height: 250px !important; }
    .min-h-\[600px\] { min-height: 350px !important; }
    .py-20 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-14 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* ===== MAP DOTS ===== */
@keyframes mapPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(245, 166, 35, 0); }
}

.map-dot {
    animation: mapPulse 2.5s ease-in-out infinite;
    cursor: pointer;
}

.map-dot:hover {
    transform: scale(2);
    box-shadow: 0 0 15px rgba(245, 166, 35, 0.6);
}

/* ===== SELECTION COLOR ===== */
::selection {
    background: #F5A623;
    color: #0A2540;
}

/* ===== SCROLLBAR (webkit) ===== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f7f9f7;
}
::-webkit-scrollbar-thumb {
    background: #8aaec4;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #004477;
}

/* FIX #9: Process cards — clamp description to 4 lines on tablet (768-1023px)
   Prevents awkward text overflow on DE (30% longer strings). */
@media (min-width: 768px) and (max-width: 1023px) {
    .process-card p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}