/*
Theme Name: GeneratePress Child Atlas flight-tracking.org
Description: Atlas-design UI-overhaul 2026 (design-spec 02-08). Meertalig, taalbalk onder navigatie. Kleuren per design-spec sectie 3.
Template: generatepress
Version: 1.0.0
*/

:root {
    --brand:#ef5da8;
    --brand-ink:#2c0418;
    --brand-soft:#fbe2ef;
    --bg:#ffffff;
    --surface:#f8f5f7;
    --ink:#271b26;
    --muted:#6e6070;
    --line:#e8e1e7;
    --radar-bg:#20101f;
    --radar-ink:#f7c7de;
    --radar-grid:rgba(239,93,168,.16);
    --radar-sweep:rgba(239,93,168,.45);
    --hd-bg:#1a0c19;
    --hd-ink:#f4e6ef;
    --ft-bg:#1a0c19;
    --ft-ink:#d7c5d3;
    --radius:14px;
    --btn-radius:999px;
    --hero-bg:#1a0c19;
}

/* Basis */
body { background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
a { color: var(--brand); }
h1, h2, h3, h4, .entry-title, .main-title { font-family: "Inter Tight", Inter, sans-serif; font-weight: 800; color: var(--ink); }

/* Donkere header + hero die doorloopt */
.site-header, .main-navigation { background-color: var(--hd-bg); color: var(--hd-ink); }
.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); }
.page-hero, .entry-header.atlas-hero { background: var(--hero-bg); color: var(--hd-ink); }

/* Taalbalk direct onder de navigatie */
.atlas-taalbalk { background: var(--hero-bg); border-bottom: 1px solid var(--line); padding: .45em 1em .65em; }
.atlas-taalbalk ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: flex; flex-wrap: wrap; gap: .35em; }
.atlas-taalbalk li a { display: inline-block; padding: .15em .8em; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--hd-ink); font-size: .82em; text-decoration: none; }
.atlas-taalbalk li a:hover { background: var(--brand); color: var(--brand-ink); }
.atlas-taalbalk li.current-lang a { background: var(--brand); color: var(--brand-ink); font-weight: 600; }

/* 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); }

/* Pill-knoppen en vlakken */
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.4em; }
button:hover, .button:hover, input[type="submit"]:hover { background-color: var(--brand-ink); color: var(--brand-soft); }
.inside-article, blockquote { border-radius: var(--radius); }
blockquote { background: var(--surface); border-left: 4px solid var(--brand); padding: .8em 1em; }

/* Radar: opmaak komt van de plugin (full-bleed 100vw); geen theme-achtergrond
   of radius op de container, anders valt de kaart buiten het venster. */
.radar-wrapper, .glb-radar, .main_widget { background: transparent; }

/* Tabellen */
.tablewrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
table th { background: var(--surface); border-bottom: 2px solid var(--brand); text-align: left; }
table td, table th { padding: .5em .7em; border-bottom: 1px solid var(--line); }

/* Formulieren */
input[type="text"], input[type="email"], input[type="search"], textarea, select { border: 1px solid var(--line); border-radius: var(--radius); }
::selection { background: var(--brand-soft); color: var(--brand-ink); }


/* Kop compact en overal gelijk: de standaardpadding van GeneratePress maakte de
   donkere balk onnodig hoog nu er een woordmerk in staat in plaats van een logo. */
.site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }
.main-navigation .inside-navigation { padding-top: 0; padding-bottom: 0; }
.main-navigation .main-nav > ul > li > a { padding-top: 12px; padding-bottom: 12px; font-size: .95em; }
.glb-merk .glb-merk-naam { font-size: clamp(19px, 2vw, 26px); }

/* GeneratePress zet standaard een eigen achtergrond op het actieve en gehoverde
   menu-item (#3f3f3f). Dat gaf een grijs blok in de donkere kopbalk. De kop
   krijgt zijn kleur volledig uit de themavariabelen; alleen de tekst verkleurt. */
.main-navigation .main-nav ul li > a,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
    background-color: transparent;
}

/* Overgenomen uit de eigen CSS van customify-child (post 1282). De teksten
   gebruiken <strong> als tussenkop -- 23 per taalpagina -- met een gekleurde
   onderlijn eronder. Zonder deze regel valt de visuele geleding van de
   pagina's weg. Declaraties ongewijzigd overgenomen; alleen het oude
   huisstijlblauw #09a7ea is vervangen door de merkkleur van deze site.
   De regels voor .titlebar-title en .page-header--item zijn vervallen:
   dat waren Customify-klassen die in GeneratePress niet bestaan. */
/* De teksten zetten hun tussenkoppen als <h2><strong>..</strong></h2> en
   <h3><strong>..</strong></h3>; de gekleurde onderlijn hoort daar dus op.
   Het oude thema gebruikte hiervoor `#main strong`, wat alle vette tekst raakte.
   Sinds de eigen radar in de DOM staat (en niet meer in een iframe) kreeg ook de
   tekst in de vliegtuigpopup die onderlijn -- zichtbaar als een roze streep dwars
   door de regel. Door op de koppen te selecteren kan dat niet meer gebeuren. */
#main h2 > strong,
#main h3 > strong {
    border-bottom: solid 4px var(--brand);
    padding: 40px 20px 10px 20px;
    margin-bottom: 20px;
}
@media screen and (max-width: 568px) {
    #main h2 > strong,
    #main h3 > strong { font-size: 12px; padding: 40px 0 10px 0; }
}