/*
 * Meer.Weit Premium Design Update 2026 – Phase 1 Quick Wins
 * Loaded last; safely overrides CSS variables and component styles.
 */

/* ─── 1. ADELIA DISPLAY FONT ──────────────────────────────────────── */

@font-face {
    font-family: 'Adelia';
    src: url('../fonts/adelia.woff2') format('woff2'),
         url('../fonts/adelia.otf')   format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Jost (Primärschrift, Redesign 2026) ──────────────────────────
   Auch hier definiert, damit die Schrift unabhängig vom PHP-/OPcache-
   Status sofort verfügbar ist (latin-Subset, deckt Deutsch ab). Die volle
   Variante (inkl. latin-ext) liegt zusätzlich in meerweit-fonts.css. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/jost-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jost-600.woff2') format('woff2'); }

/* ─── 2. CORE CSS VARIABLE UPDATES ───────────────────────────────── */

:root {
    /* Display script font (Adelia) for decorative headlines & labels */
    --mw-display: 'Adelia', cursive;

    /* Redesign 2026: Jost als Primärschrift (Headlines + Body) */
    --mw-serif: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mw-sans: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Gold accent – slightly warmer, less brassy */
    --mw-gold: #9B8B6C;
    --mw-gold-light: rgba(155, 139, 108, 0.12);

    /* Section spacing – one step up for more breathing room */
    --mw-section-space: 96px;
    --mw-space-xl: 96px;

    /* Card corner radius – slightly tighter for a luxury feel */
    --mw-card-radius: 20px;
}

/* ─── 3. TYPOGRAPHY – HEADLINES & EYEBROW REFINEMENT ─────────────── */

/* Redesign 2026 – Jost Type-Scale: großzügig, leicht, editorial.
   Jost (geometrischer Sans) wirkt in großen Größen mit Weight 300 am edelsten. */
/* Schrift kommt sauber aus dem Token-System (--mw-serif/--mw-sans = Jost).
   Body-Größe via Token --mw-body-size (19px); hier nur Premium-Zeilenhöhe 1.8. */
body.mw-site { line-height: 1.8; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { font-family: var(--mw-serif); }

h1, .h1 { font-size: clamp(2.75rem, 6vw, 6rem); font-weight: 300; letter-spacing: -0.01em; line-height: 1.05; }
h2, .h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -0.005em; line-height: 1.1; }
h3, .h3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); font-weight: 400; line-height: 1.2; }

/*
 * EYEBROW LABELS (.mw-eyebrow)
 * Computed weight was 800 — far too heavy for premium feel.
 * Reduce to 400 + add generous letter-spacing = sophisticated, editorial.
 */
.mw-eyebrow {
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    font-size: 0.72rem !important;
    opacity: 0.65;
}

/*
 * CARD FACT LABELS (DATUM / DAUER / PREIS P.P. AB: / GÄSTE / KABINEN / DECKS / LÄNGE)
 * Computed weight was 800 — reduce to 500 for readability without heaviness.
 */
.mw-card-facts dt {
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    font-size: 0.68rem !important;
}

/*
 * NAVIGATION LINKS
 * Computed weight was 700 — reduce to 400 for a more refined, quiet navigation.
 * Premium travel sites use lighter nav weight to let content breathe.
 * Selectors confirmed via live DOM inspection: .mw-nav__list a / .mw-mega a
 */
.mw-nav__list > li > a,
.mw-nav__list > .menu-item > a {
    font-weight: 400 !important;
    letter-spacing: 0.01em;
}

/* Mega menu links also too heavy */
.mw-mega a {
    font-weight: 400 !important;
}

/* "Alle Reiseziele ansehen" intro link */
.mw-mega__intro {
    font-weight: 400 !important;
}

/* Cormorant Garamond for footer headline in dark bg */
.mw-footer__headline {
    font-family: var(--mw-serif);
    font-weight: 300;
}

/* ─── 4. PRICE ELEMENTS – GOLD ACCENT ────────────────────────────── */

/* Prices in trip cards and detail pages */
.mw-card-facts dd.mw-price,
.mw-trip-card .mw-price,
.mw-ship-card .mw-price,
[class*="price"] dd,
.mw-trip-detail__price,
.mw-price-highlight,
.mw-price {
    color: var(--mw-gold);
    font-weight: 600;
}

/* Price dt labels keep muted style but gain slight gold tint */
.mw-card-facts dt:last-of-type {
    color: color-mix(in srgb, var(--mw-gold) 60%, var(--mw-muted));
}

/* ─── 5. ADELIA FOR DESTINATION LABELS ───────────────────────────── */

/* Destination list names displayed in the elegant script */
.mw-destination-list strong,
.mw-region-label,
.mw-section-eyebrow {
    font-family: var(--mw-display);
    font-size: 1.4em;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* ─── 6. CARD HOVER – SLOWER, MORE PREMIUM ───────────────────────── */

/* Override the existing 0.35s with a more deliberate 0.55s */
.mw-trip-card img,
.mw-ship-card img {
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.mw-trip-card:hover img,
.mw-ship-card:hover img {
    transform: scale(1.04);
}

/* ─── 7. SHIP CARD BUTTON HIERARCHY FIX ─────────────────────────── */

/*
 * In card-schiff.php, "Zum Schiff" uses mw-button--secondary (outline)
 * and "Schiff anfragen" uses mw-button--ghost (white/transparent).
 * On a light card background, ghost looks broken. Fix both:
 * - First button → primary filled style
 * - Second button → secondary outline (appropriate on light bg)
 */

.mw-ship-card__actions .mw-button--secondary:first-child,
.mw-ship-card .mw-ship-card__actions > a:first-child {
    background-color: var(--mw-accent);
    color: #fff;
    border-color: var(--mw-accent);
}

.mw-ship-card__actions .mw-button--secondary:first-child:hover,
.mw-ship-card .mw-ship-card__actions > a:first-child:hover {
    background-color: color-mix(in srgb, var(--mw-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--mw-accent) 85%, #000);
}

/* Ghost button → secondary style on light backgrounds */
.mw-ship-card__actions .mw-button--ghost {
    background-color: transparent;
    color: var(--mw-ink);
    border: 1.5px solid var(--mw-line);
}

.mw-ship-card__actions .mw-button--ghost:hover {
    border-color: var(--mw-accent);
    color: var(--mw-accent);
    background-color: var(--mw-gold-light);
}

/* ─── 8. FOOTER ACCORDIONS ON DESKTOP ────────────────────────────── */

/*
 * Footer accordions are opened on desktop via JS (mw_upgrade_footer_accordion_js).
 * Once JS sets the [open] attribute, hide the chevron and remove pointer cursor.
 */
@media (min-width: 900px) {
    /* When forced open by JS: hide the chevron indicator */
    .mw-footer-group[open] summary::after {
        display: none !important;
    }

    /* When forced open by JS: default cursor (not a toggle control on desktop) */
    .mw-footer-group[open] summary {
        cursor: default;
    }
}

/* ─── 9. SUBTLE CARD REFINEMENTS ─────────────────────────────────── */

/* Slightly more shadow depth for premium feel */
.mw-trip-card,
.mw-ship-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.mw-trip-card:hover,
.mw-ship-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* ─── 10. GLOBAL SECTION SPACING APPLICATION ─────────────────────── */

/* Ensure section space variable propagates to the main spacing utilities */
.mw-section {
    padding-block: var(--mw-section-space);
}

/* Finder and trust strip — give slightly more air */
.mw-finder,
.mw-trust-strip {
    padding-block: calc(var(--mw-section-space) * 0.75);
}

/* Trip card overlay: remove the fact grid from the image,
 * keep only title + ghost CTA button.
 * (Konsolidiert aus dem früheren Inline-Patch in inc/setup.php, Prio 32.) */
.mw-trip-card__overlay .mw-card-facts {
    display: none !important;
}

/* h3 had min-height: 3.15em (space for 3 lines) — no longer needed */
.mw-trip-card__overlay h3 {
    min-height: 0 !important;
    padding-bottom: 12px;
}

/* Give the overlay a bit more bottom padding now that facts are gone */
.mw-trip-card__overlay {
    padding-bottom: 24px;
}

/* Route / ship meta label — "JAPAN, SÜDKOREA  SH MINERVA" */
.mw-trip-card__overlay .mw-trip-card__meta,
.mw-trip-card__meta {
    font-weight: 400 !important;
    letter-spacing: 0.10em !important;
    font-size: 0.68rem !important;
    opacity: 0.78;
}

/*
 * "Entdecken" button — currently opaque white (font-weight: 850).
 * Switch to ghost style: transparent bg + white border.
 * Sits on dark overlay → ghost reads as clean and premium.
 */
.mw-trip-card__overlay .mw-card-cta {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    color: #fff !important;
    font-weight: 500 !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.mw-trip-card__overlay .mw-card-cta:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* ─── 11. GLOBAL SECTION SPACING APPLICATION ─────────────────────── */

/* Ensure section space variable propagates to the main spacing utilities */
.mw-section {
    padding-block: var(--mw-section-space);
}

/* Finder and trust strip — give slightly more air */
.mw-finder,
.mw-trust-strip {
    padding-block: calc(var(--mw-section-space) * 0.75);
}

/*
 * TRIP CARD BODY FACTS (Desktop ≥681px)
 * _body-facts ← FACTS we want to show
 *     p                             ← description (always visible)
 *     a.mw-trip-card__body-cta      ← display:none on desktop
 *
 * Fix: show the parent (.body-summary) → hide duplicates (title, route) → style facts.
 * All desktop overrides are wrapped in min-width: 681px to avoid
 * touching the mobile layout (which already works correctly).
 */
@media (min-width: 681px) {
    /* 1. Show the wrapper (parent — otherwise child facts stay hidden) */
    .mw-trip-card__body-summary {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* 2. Hide items that are already in the image overlay on desktop */
    .mw-trip-card__body-summary .mw-trip-card__body-title,
    .mw-trip-card__body-summary .mw-trip-card__route--body {
        display: none !important;
    }

    /* 3. Activate the fact row in desktop 3-column layout */
    .mw-trip-card__body-facts {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0 !important;
        margin: 18px 0 2px !important;
        border: 1px solid var(--mw-line) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: var(--mw-line) !important; /* shows as 1px separator between cells */
    }

    .mw-trip-card__body-facts > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px;
        padding: 11px 14px !important;
        background: var(--mw-surface, #faf9f7) !important;
        border: 0 !important;
    }

    /* Fact labels: TERMINE / DAUER / PREIS P.P. AB: */
    .mw-trip-card__body-facts dt {
        color: var(--mw-muted) !important;
        font-size: 0.65rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.11em !important;
        text-transform: uppercase !important;
        margin: 0 !important;
    }

    /* Fact values */
    .mw-trip-card__body-facts dd {
        color: var(--mw-ink) !important;
        font-size: 0.86rem !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    /* Price cell (always last div) → gold */
    .mw-trip-card__body-facts > div:last-child dd {
        color: var(--mw-gold) !important;
        font-weight: 600 !important;
        font-size: 0.92rem !important;
    }
}

/* ─── 11. GLOBAL SECTION SPACING APPLICATION ─────────────────────── */

/* Ensure section space variable propagates to the main spacing utilities */
.mw-section {
    padding-block: var(--mw-section-space);
}

/* Finder and trust strip — give slightly more air */
.mw-finder,
.mw-trust-strip {
    padding-block: calc(var(--mw-section-space) * 0.75);
}

/* ─── 12. CARD MEDIA SCRIM – KONTRAST (A11y, Phase 1.5) ──────────── */

/*
 * Reise-/Schiff-Cards: weißer Titel, Meta und Ghost-CTA sitzen unten auf dem
 * Bild. Der Basis-Scrim (meerweit.css) endete bei nur ~46 % Petrol – über
 * hellen Motiven (Himmel, Schnee, Wasser, Sand) zu schwach für sicher lesbaren
 * weißen Text. Dieser Override verstärkt gezielt NUR den unteren Bereich; der
 * obere Bildausschnitt bleibt klar. Premium und ruhig, Lesbarkeit zuerst.
 * Overlay-Text-Ziel: >= 4.5:1 auch über hellen Bildern.
 */
.mw-trip-card__media::after,
.mw-ship-card__media::after {
    background: linear-gradient(
        180deg,
        rgba(18, 62, 66, 0) 0%,
        rgba(18, 62, 66, 0.10) 45%,
        rgba(18, 62, 66, 0.58) 76%,
        rgba(18, 62, 66, 0.72) 100%
    );
}

/* ─── 13. PHASE 2 – HERO & HEADER (Redesign 2026) ──────────────────
   Bild dominiert, Header ruhig & leicht, Navigation mit Gold-Hover.
   Der Hero-Scrim selbst kommt aus dem Token --mw-hero-gradient (setup.php). */

/* Header: über dem Hero transparent (Basis-CSS), beim Scrollen ruhiges Weiß. */
.mw-header { background: rgba(255, 255, 255, 0.85); }
.mw-header.is-scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 30px rgba(8, 59, 66, 0.06);
}

/* Navigation: ruhigeres Gewicht + Gold-Hover + dezente Gold-Unterstreichung. */
.mw-nav a {
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    transition: color var(--mw-dur-micro, 200ms) var(--mw-ease, cubic-bezier(.22,1,.36,1));
}
.mw-nav a:hover,
.mw-nav a:focus-visible,
.mw-nav summary:hover,
.mw-nav summary:focus-visible { color: var(--mw-gold); }

.mw-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 1px;
    background: var(--mw-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--mw-dur, 300ms) var(--mw-ease, cubic-bezier(.22,1,.36,1));
}
.mw-nav__list > li > a:hover::after,
.mw-nav__list > li > a:focus-visible::after { transform: scaleX(1); }

/* Hero: zusätzliche Lesbarkeits-Versicherung über sehr hellen Bildern
   (farb-neutral – ändert keine Hero-Variante, nur Textschärfe). */
.mw-hero__content,
.mw-home-hero__content { text-shadow: 0 1px 26px rgba(8, 59, 66, 0.22); }

@media (prefers-reduced-motion: reduce) {
    .mw-nav a,
    .mw-nav__list > li > a::after { transition: none; }
}

/* ─── 14. PHASE 3 – KARTEN: BILD ZUERST (Redesign 2026) ────────────
   Strikte Hierarchie: Bild → Titel → Route → Dauer → Preis → CTA.
   Lange Beschreibungstexte unter den Karten entfallen – die Detailseite
   übernimmt die ausführlichen Infos. Texte bleiben für SEO/Fallback im
   DOM, werden nur visuell ausgeblendet (keine Inhalte gelöscht). */
.mw-trip-card__body > p,
.mw-ship-card__subtitle {
    display: none;
}

/* Body ruhiger & kompakter ohne Fließtext – das Bild bleibt der Held. */
.mw-trip-card__body,
.mw-ship-card__body { min-height: 0; }

/* Einheitliche, ruhige Karten: dezente Rundung aus dem Token (6px). */
.mw-trip-card,
.mw-ship-card { border-radius: var(--mw-card-radius, 6px); overflow: hidden; }

/* ─── 15. PHASE 4 – REISEFINDER: PREMIUM-REISEBERATER (Redesign 2026) ──
   Filterfelder wirken wie hochwertige UI-Elemente statt Formularfelder:
   ruhige Flächen, Gold-Akzent bei Hover/geöffnet, leise, klare Typografie.
   Bewusst additiv – die bestehende Pill-Box bleibt unangetastet. */
.mw-finder__field summary {
    border: 1px solid transparent;
    transition: border-color var(--mw-dur, 350ms) var(--mw-ease, cubic-bezier(.22,1,.36,1)),
                box-shadow var(--mw-dur, 350ms) var(--mw-ease, cubic-bezier(.22,1,.36,1));
}
.mw-finder__field summary:hover,
.mw-finder__field summary:focus-visible,
.mw-finder__field[open] summary {
    border-color: var(--mw-gold);
    box-shadow: 0 10px 30px rgba(8, 59, 66, 0.08);
}

/* Label leise in Versalien, Wert in Jost/Deep Ocean */
.mw-finder__field summary em {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    color: var(--mw-muted);
}
.mw-finder__field summary strong {
    font-weight: 500;
    color: var(--mw-heading, #083B42);
}

@media (prefers-reduced-motion: reduce) {
    .mw-finder__field summary { transition: none; }
}

/* ─── 16. PHASE 5 – DETAILSEITEN: EDITORIAL (Redesign 2026) ─────────
   "Warum besonders"-Highlights ruhiger & editorialer: weniger Box-Wirkung,
   kein schwerer Schatten, feiner Gold-Akzent statt Türkis-Balken,
   Überschriften in Deep Ocean, dezente Rundung aus dem Token. */
.mw-highlight-grid--compact article {
    box-shadow: none;
    border-color: var(--mw-line);
    border-radius: var(--mw-card-radius, 6px);
}
.mw-highlight-grid--compact article::before {
    width: 3px;
    background: var(--mw-gold);
}
.mw-highlight-grid span:not(:empty),
.mw-highlight-grid--compact article > span:not(:empty) {
    border-color: var(--mw-gold);
    color: var(--mw-gold);
}
.mw-highlight-grid article h3,
.mw-highlight-grid--compact article h3 { color: var(--mw-heading, #083B42); }