/**
 * Abbos.nl — Design System
 *
 * Alle design tokens en sitewide componentstijlen.
 * Wordt geladen op elke pagina via functions.php.
 *
 * Kleuren, typografie, spacing, schaduwen en rondingen
 * zijn hier als custom properties gedefinieerd zodat
 * theme.json, block patterns en plugin-templates
 * dezelfde bron gebruiken.
 */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
    /* Kleuren */
    --clr-primary:      #0B1F3A;
    --clr-secondary:    #5B6B7A;
    --clr-accent:       #FF6A1A;
    --clr-accent-hover: #E85A0A;
    --clr-bg:           #F7F9FB;
    --clr-surface:      #FFFFFF;
    --clr-border:       #E8ECF0;
    --clr-border-light: #F0F2F5;
    --clr-success:      #16A34A;
    --clr-success-bg:   #F0FDF4;

    /* Typografie */
    --font-display: 'Playfair Display', serif;
    --font-body:    'DM Sans', sans-serif;

    /* Spacing — 4px basis */
    --sp-xs:  4px;
    --sp-sm:  8px;
    --sp-md:  16px;
    --sp-lg:  24px;
    --sp-xl:  32px;
    --sp-2xl: 48px;
    --sp-3xl: 64px;

    /* Border-radius */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 100px;

    /* Schaduwen */
    --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06);
    --shadow-md: 0 4px 12px rgba(11, 31, 58, 0.08);
    --shadow-lg: 0 8px 32px rgba(11, 31, 58, 0.10);
}

/* ═══════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ═══════════════════════════════════════════ */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ═══════════════════════════════════════════
   BASE OVERRIDES
   ═══════════════════════════════════════════ */
body {
    background-color: var(--clr-bg);
    color: var(--clr-primary);
}

/* Serif alleen voor H1 en H2 (display headings) */
h1, h2 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* H3+ altijd sans-serif */
h3, h4, h5, h6 {
    font-family: var(--font-body);
}

/* ═══════════════════════════════════════════
   NAVBAR — 2 rijen
   ═══════════════════════════════════════════ */

/* Rij 1: Logo + CTA — via GP header */
.site-header {
    background: var(--clr-surface);
    border-bottom: none;
}

/* Rij 2: Menu — via GP navigatie */
.abbos-nav-row-menu {
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface);
}

.abbos-nav-row-menu .menu > li {
    flex: 1;
    text-align: center;
}

.abbos-nav-row-menu .menu > li > a {
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-secondary);
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.abbos-nav-row-menu .menu > li > a:hover {
    color: var(--clr-primary);
}

.abbos-nav-row-menu .menu > li.current-menu-item > a,
.abbos-nav-row-menu .menu > li.current-menu-ancestor > a {
    color: var(--clr-primary);
    font-weight: 600;
    border-bottom-color: var(--clr-accent);
}

/* GP header CTA knop */
.site-header .header-widget a.button,
.site-header .nav-float-right a.button {
    background: var(--clr-accent);
    color: var(--clr-surface);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    border: none;
    transition: background 0.15s;
}

.site-header .header-widget a.button:hover,
.site-header .nav-float-right a.button:hover {
    background: var(--clr-accent-hover);
}

/* Mobiel: verberg menu rij, toon hamburger */
@media (max-width: 900px) {
    .abbos-nav-row-menu .menu {
        flex-direction: column;
    }

    .abbos-nav-row-menu .menu > li {
        text-align: left;
    }
}

/* ═══════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════ */
.abbos-trust-bar {
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    padding: var(--sp-md) 0;
}

.abbos-trust-bar .grid-container {
    display: flex;
    justify-content: center;
    gap: var(--sp-xl);
    flex-wrap: wrap;
}

.abbos-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--clr-secondary);
    font-weight: 500;
}

.abbos-trust-item svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   BUTTONS — SITEWIDE
   ═══════════════════════════════════════════ */
.wp-block-button__link,
.abbos-btn-primary {
    background: var(--clr-accent);
    color: var(--clr-surface);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 14px 28px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(255, 106, 26, 0.3);
}

.wp-block-button__link:hover,
.abbos-btn-primary:hover {
    background: var(--clr-accent-hover);
    box-shadow: 0 4px 16px rgba(255, 106, 26, 0.4);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   AFFILIATE LABEL — SITEWIDE
   ═══════════════════════════════════════════ */
.abbos-affiliate-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--clr-secondary);
    background: var(--clr-surface);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--clr-border);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   HOMEPAGE — PAGINATITEL VERBERGEN
   ═══════════════════════════════════════════ */
.home .entry-title,
.home .page-title {
    display: none;
}

/* ═══════════════════════════════════════════
   NAVIGATIE — WRAPPING VOORKOMEN
   ═══════════════════════════════════════════ */
.abbos-nav-row-menu .menu > li > a,
.abbos-nav-row-menu .main-nav ul li a,
.main-navigation .main-nav ul li a {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer {
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
}

.site-footer .footer-bar {
    font-size: 12px;
    color: rgba(91, 107, 122, 0.5);
}