/*
Theme Name: GeneratePress Child Flagship flightstatus24.com
Description: Flagship-design UI-overhaul 2026 (design-spec 02-08). Marineblauw met
             gouden accentlijn, Source Serif 4 voor koppen, Libre Franklin als
             broodtekst, radius 4px. Bevat de vier paginasjablonen die de 69.244
             luchthaven-, aankomst-, vertrek- en maatschappijpagina's nodig hebben.
Template: generatepress
Version: 1.0.0
*/

:root {
    --brand:#b98a2f;
    --brand-ink:#1f1400;
    --brand-soft:#f6ecd6;
    --bg:#ffffff;
    --surface:#f8f7f4;
    --ink:#1a2436;
    --muted:#5c6a80;
    --line:#e4e7ec;
    --radar-bg:#13233d;
    --radar-ink:#e9d6a6;
    --radar-grid:rgba(185,138,47,.2);
    --radar-sweep:rgba(185,138,47,.45);
    --hd-bg:#13233d;
    --hd-ink:#f0ead9;
    --ft-bg:#13233d;
    --ft-ink:#c8d1e0;
    --radius:4px;
    --btn-radius:4px;
}

/* Basis */
body { background: var(--bg); color: var(--ink); font-family: "Libre Franklin", system-ui, sans-serif; }
a { color: var(--brand); }
h1, h2, h3, h4, .entry-title, .page-title, .section-title {
    font-family: "Source Serif 4", Georgia, serif; font-weight: 700; color: var(--ink);
}

/* Marineblauwe kop met gouden accentlijn */
.site-header, .main-navigation { background-color: var(--hd-bg); color: var(--hd-ink); }
.site-header { border-bottom: 3px solid var(--brand); }
.main-title a, .site-description, .main-navigation .main-nav ul li a, .main-navigation .menu-toggle { color: var(--hd-ink); }
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.current-menu-item > a { color: var(--brand); }
.main-navigation ul ul, .main-navigation .main-nav ul ul li a { background-color: var(--hd-bg); color: var(--hd-ink); }
/* GeneratePress zet standaard een eigen achtergrond op actieve menu-items. */
.main-navigation .main-nav ul li > a,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a { background-color: transparent; }

/* Sectiekoppen met korte gouden onderstreping (Flagship) */
.section-title, .single-page h2 { position: relative; padding-bottom: .35em; }
.section-title::after, .single-page h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: var(--brand);
}

/* Footer */
.site-footer, .footer-widgets, .site-info { background-color: var(--ft-bg); color: var(--ft-ink); }
.site-info a, .footer-widgets a { color: var(--ft-ink); }

/* Rechthoekige knoppen */
button, .button, input[type="submit"], .wp-block-button__link {
    background-color: var(--brand); color: var(--brand-ink); border-radius: var(--btn-radius);
    border: 0; font-weight: 600; padding: .55em 1.3em;
}
button:hover, .button:hover, input[type="submit"]:hover { background-color: var(--brand-ink); color: var(--brand-soft); }

/* Tabellen: de sjablonen gebruiken .table en .table-striped uit het oude thema. */
.table { border-collapse: collapse; width: 100%; }
.table th, .table td { padding: .55em .7em; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--muted); font-weight: 600; width: 42%; }
.table-striped tr:nth-child(odd) { background: var(--surface); }
.table_content, .countries_table { overflow-x: auto; max-width: 100%; }

/* Blokken uit de oude sjablonen, opnieuw gezet in de Flagship-stijl. */
.single-page .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.page-header { margin: 1.2em 0 1em; }
.about-item-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.about-title {
    display: flex; align-items: center; gap: .6em; text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand);
    border-radius: var(--radius); padding: 12px 16px; color: var(--ink); font-weight: 600;
}
.about-title:hover { background: var(--brand-soft); }
.about-title .arrow.right { margin-left: auto; border: solid var(--brand); border-width: 0 2px 2px 0; padding: 3px; transform: rotate(-45deg); }
.mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 2.5rem; } .mt-4 { margin-top: 1.5rem; }
.map iframe { border-radius: var(--radius); }

/* Radar: opmaak komt volledig uit de radarplugin. Geen padding, rand of
   achtergrond vanuit het theme op deze containers -- de kaart staat full-bleed
   op 100vw zonder box-sizing en zou anders buiten beeld vallen. */
.radar-wrapper, .glb-radar, .main_widget { background: transparent; }

/* Kop van de aankomst- en vertrekpagina's. Stond in het oude thema als inline
   <style> in het sjabloon; hier in de stylesheet, in de Flagship-kleuren. */
.arrivals_departures .title { display: flex; align-items: center; flex-wrap: wrap; margin-top: 24px; gap: 0; }
.arrivals_departures .title img.icon { padding: 14px 12px; background: var(--hd-bg); border-radius: var(--radius); margin: 0 15px 0 0; }
.arrivals_departures .title h1 { margin: 0; padding: 0; font-size: 30px; line-height: 1.15; color: var(--ink); }
.arrivals_departures .title a { color: var(--hd-ink); background: var(--hd-bg); border-radius: var(--radius); padding: 12px; text-decoration: none; font-weight: 600; }
.arrivals_departures .title a:hover { background: var(--brand); color: var(--brand-ink); }
.arrivals_departures .delimeter { height: 24px; width: 2px; background: var(--line); margin: 4px 25px 0; }
.avionio-bron { font-size: 12px; width: 100%; text-align: center; padding-top: 6px; }
.avionio-bron a { text-decoration: none; color: var(--muted); }
.avionio-bron span { color: #FD6150; }
@media screen and (max-width: 760px) {
    .arrivals_departures .title a { width: 100%; margin-top: 10px; }
    .arrivals_departures .delimeter { display: none; }
}

/* Kruimelpad. dimox_breadcrumbs levert een kale <ul class="breadcrumb"> met
   <li>-items; zonder opmaak werd dat een opsomming met bolletjes onder elkaar.
   Hier horizontaal gezet met een gouden scheidingsteken, in de Flagship-maat. */
.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1em .55em;
    margin: 1.1em 0 .4em;
    padding: 0;
    font-size: 13.5px;
    color: var(--muted);
}
.breadcrumb li { display: flex; align-items: center; margin: 0; }
.breadcrumb li + li::before {
    content: "";
    width: 5px; height: 5px;
    margin-right: .6em;
    border-top: 1.5px solid var(--brand);
    border-right: 1.5px solid var(--brand);
    transform: rotate(45deg);
    opacity: .75;
}
.breadcrumb a, .breadcrumb .breadcrumbs__link { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb li:last-child { color: var(--ink); font-weight: 600; }