/*
Theme Name: GeneratePress Child Cockpit vluchtvolgen.nl
Description: Cockpit-design UI-overhaul 2026 (design-spec 02-08). Kleurvariabelen per site.
Template: generatepress
Version: 1.0.0
*/

:root {
    --brand:#14b8a6;
    --brand-ink:#03201c;
    --brand-soft:#dcf3f0;
    --bg:#ffffff;
    --surface:#f2f9f8;
    --ink:#10221f;
    --muted:#566b67;
    --line:#d9e6e3;
    --radar-bg:#06201d;
    --radar-ink:#c2ece6;
    --radar-grid:rgba(20,184,166,.2);
    --radar-sweep:rgba(20,184,166,.5);
    --hd-bg:#06201d;
    --hd-ink:#e0f2ef;
    --ft-bg:#06201d;
    --ft-ink:#b8d5d0;
    --radius:6px;
    --btn-radius:8px;
}

/* Basis */
body { background: var(--bg); color: var(--ink); font-family: Inter, system-ui, -apple-system, sans-serif; }
a { color: var(--brand); }
a:hover { color: var(--ink); }

/* Koppen: condensed kapitalen */
h1, h2, h3, h4, .entry-title, .main-title {
    font-family: "Barlow Condensed", Inter, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ink);
}
h1, .entry-title { font-weight: 800; }

/* Sectiekoppen met accentbalk links */
.inside-article h2, .entry-content h2 {
    border-left: 5px solid var(--brand);
    padding-left: .55em;
    margin-top: 1.6em;
}

/* Donkere headerband */
.site-header, .main-navigation, .menu-toggle, .main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items, .mobile-menu-control-wrapper {
    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, .main-navigation button.menu-toggle:hover,
.main-navigation .mobile-bar-items a { color: var(--hd-ink); }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li a:hover { color: var(--brand); background-color: var(--hd-bg); }
.main-navigation ul ul, .main-navigation .main-nav ul ul li a { background-color: var(--hd-bg); color: var(--hd-ink); }

/* Donkere footerband */
.site-footer, .footer-widgets, .site-info {
    background-color: var(--ft-bg);
    color: var(--ft-ink);
}
.site-footer { border-top: 3px solid var(--brand); }
.site-info a, .footer-widgets a, .site-footer a { color: var(--ft-ink); text-decoration-color: var(--brand); }
.site-footer .widget-title { color: var(--brand); }

/* 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;
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
    background-color: var(--brand-ink);
    color: var(--brand-soft);
}
.main-navigation button.menu-toggle { background-color: var(--hd-bg); }

/* Vlakken en kaarten */
.inside-article, .widget-area .widget, .comments-area {
    background: var(--bg);
    border-radius: var(--radius);
}
blockquote { background: var(--surface); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: .8em 1em; }

/* Radar: de plugin (glb-radar-portfolio) regelt de opmaak van de kaart zelf,
   inclusief de full-bleed breedte van 100vw. Geen padding, rand of achtergrond
   vanuit het theme op .main_widget of .radar-wrapper: dat maakt de container
   breder dan het venster (markers vallen dan buiten beeld) en geeft de
   advertentieruimte een donkere vlak. Alleen de losse radarkaders die niet
   van de plugin komen krijgen hier stijl. */
.glb-radar-box {
    background: var(--radar-bg);
    color: var(--radar-ink);
    border-radius: var(--radius);
}
.radar-wrapper, .main_widget { background: transparent; }

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

/* Statuschips vluchtdata */
.glb-fw-status, .status-chip { border-radius: var(--btn-radius); padding: .12em .6em; font-weight: 600; display: inline-block; }
.glb-fw-status.st-ontime, .glb-fw-status.st-landed, .status-op-tijd, .status-geland { background: #d9f2e4; color: #0a5c33; }
.glb-fw-status.st-delayed, .status-vertraagd { background: #fdeeda; color: #8a5300; }
.glb-fw-status.st-expected, .status-verwacht { background: var(--brand-soft); color: var(--brand-ink); }

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

/* Breadcrumbs */
.breadcrumbs, #breadcrumbs { color: var(--muted); font-size: .9em; }
.breadcrumbs a, #breadcrumbs a { color: var(--muted); }

/* Diversen */
::selection { background: var(--brand-soft); color: var(--brand-ink); }
.generate-back-to-top { background-color: var(--brand); color: var(--brand-ink); border-radius: var(--btn-radius); }


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