/* ================================================================
 * Bondgenoot — outgame.css (cluster B B1 F033, re-thema C2 F056 v2)
 * /assets/css/layouts/outgame.css
 *
 * VERSIE 2 (na user-feedback):
 *   - Header/footer SOLID warm-zwart, niet meer rgba-overlay (anders te licht)
 *   - Goud-beslag aan hoeken (top-corners van header, bottom-corners van footer)
 *   - Dubbele goudrand (binnen + buiten) voor middeleeuws gevoel
 *   - Sterkere drop-shadow zodat band écht boven body zweeft
 *   - Brand met dubbele text-stroke voor relief
 * ================================================================ */

.layout-outgame {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* GEEN background hier — body uit global.css moet doorkomen.
       v2 fix: voorheen stond hier 'background: transparent', maar dat
       overschreef body-bg via class-specificity (class > tag-selector).
       Resultaat: body-bg viel weg en html-default-wit werd zichtbaar. */
    color: var(--text-on-dark);
}

/* ============================================================
   Header — donkere houtbalk met goud beslag
   ============================================================ */

.og-header {
    position: relative;
    background:
        /* lichte highlight bovenaan voor reliëf */
        linear-gradient(180deg,
            rgba(212, 166, 86, 0.06) 0%,
            transparent 8%,
            transparent 92%,
            rgba(0, 0, 0, 0.30) 100%),
        /* kleine wood-grain herhaling */
        repeating-linear-gradient(91deg,
            rgba(40, 22, 8, 0.30) 0,
            rgba(40, 22, 8, 0.30) 1px,
            transparent 1px, transparent 9px),
        /* solid base */
        var(--bg-header);
    color: var(--text-on-dark);
    padding: var(--space-4) var(--space-5);
    border-bottom: none;
    z-index: var(--z-dropdown);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(212, 166, 86, 0.18);
}

/* Dubbele goudrand onder header */
.og-header::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold-deep) 8%,
        var(--gold-bright) 50%,
        var(--gold-deep) 92%,
        transparent 100%);
}
.og-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        var(--gold-deep) 25%,
        var(--gold-deep) 75%,
        transparent 95%);
    opacity: 0.55;
}

.og-header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

/* Brand */
.og-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--gold-bright);
    text-decoration: none;
    font-family: var(--font-display);
    transition: filter var(--t-fast) var(--ease-out);
}
.og-brand:hover { filter: brightness(1.10); }

.og-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            var(--gold-pale) 0%, var(--gold) 60%, var(--gold-deep) 100%);
    color: var(--bg-deepest);
    font-weight: 700;
    font-size: 19px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.55),
        inset 0 2px 0 rgba(255, 255, 255, 0.45),
        inset 0 -2px 0 rgba(80, 50, 10, 0.55),
        0 0 0 2px rgba(140, 103, 34, 0.40);
    flex-shrink: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
}

.og-brand-name {
    font-size: 1.40rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold-bright);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.65),
        0 2px 6px rgba(0, 0, 0, 0.65),
        0 -1px 0 rgba(212, 166, 86, 0.18);
    text-transform: uppercase;
}

.og-brand-tagline {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid rgba(212, 166, 86, 0.45);
    font-family: var(--font-content);
    font-size: 0.92rem;
    font-style: italic;
    font-weight: 400;
    color: rgba(244, 229, 194, 0.78);
    letter-spacing: 0.02em;
    text-transform: none;
}
@media (max-width: 720px) { .og-brand-tagline { display: none; } }

/* Nav */
.og-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.og-nav a {
    color: var(--text-on-dark);
    text-decoration: none;
    padding: 9px var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.og-nav a:hover,
.og-nav a:focus-visible {
    background: rgba(212, 166, 86, 0.13);
    color: var(--gold-bright);
    outline: none;
    text-shadow: none;
}
.og-nav a[aria-current="page"] {
    background: rgba(184, 134, 11, 0.20);
    color: var(--gold-bright);
}

/* CTA — primary: gold gradient + inset shine */
.og-nav-cta {
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
    color: var(--bg-deepest) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.20);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -2px 0 rgba(140, 103, 34, 0.30);
    border: 1px solid rgba(0, 0, 0, 0.25);
}
.og-nav-cta:hover,
.og-nav-cta:focus-visible {
    background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 100%) !important;
    color: var(--bg-deepest) !important;
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 0 rgba(140, 103, 34, 0.30);
}

/* ============================================================
   Flash bar  —  FIX-016 C: thematisch perkament/goud-paneel
   ============================================================ */

.og-flash-bar {
    max-width: 800px;
    margin: var(--space-4) auto 0;
    padding: 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.og-flash {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--space-3) 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--gold-deep, var(--gold-deep));
    border-left: 4px solid var(--gold, var(--gold));
    background:
        linear-gradient(180deg,
            rgba(48, 30, 16, 0.94) 0%,
            rgba(36, 22, 12, 0.96) 100%);
    color: var(--gold-pale, var(--gold-pale));
    font-family: var(--font-display);
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(212, 166, 86, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}

.og-flash-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%,
            rgba(255, 230, 180, 0.85) 0%,
            var(--gold-bright, var(--gold-bright)) 45%,
            var(--gold, var(--gold)) 100%);
    color: var(--bg-deepest, var(--bg-deep));
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.45);
}

.og-flash-text {
    flex: 1 1 auto;
    line-height: 1.4;
}

.og-flash-success {
    border-left-color: var(--status-success, #5C8C45);
}
.og-flash-success .og-flash-icon {
    background:
        radial-gradient(circle at 35% 30%,
            rgba(220, 240, 200, 0.85) 0%,
            #7CAA60 45%,
            var(--status-success, #5C8C45) 100%);
}

.og-flash-error {
    border-left-color: var(--status-error, #B84A3A);
}
.og-flash-error .og-flash-icon {
    background:
        radial-gradient(circle at 35% 30%,
            rgba(255, 220, 200, 0.85) 0%,
            #D67566 45%,
            var(--status-error, #B84A3A) 100%);
    color: var(--color-white);
}

.og-flash-warning {
    border-left-color: var(--status-warning, #C99230);
}
.og-flash-warning .og-flash-icon {
    background:
        radial-gradient(circle at 35% 30%,
            rgba(255, 235, 180, 0.85) 0%,
            #E0AC55 45%,
            var(--status-warning, #C99230) 100%);
}

.og-flash-info {
    border-left-color: var(--gold-bright, var(--gold-bright));
}

/* ============================================================
   Main
   ============================================================ */

.og-main {
    flex: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

/* ============================================================
   Footer — donkere balk, mirror van header
   ============================================================ */

.og-footer {
    position: relative;
    margin-top: var(--space-7);
    padding: 26px var(--space-5) 22px;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.25) 0%,
            transparent 8%,
            transparent 100%),
        repeating-linear-gradient(91deg,
            rgba(40, 22, 8, 0.30) 0,
            rgba(40, 22, 8, 0.30) 1px,
            transparent 1px, transparent 9px),
        var(--bg-footer);
    box-shadow:
        0 -4px 12px rgba(0, 0, 0, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.50);
    color: var(--text-on-dark);
}

/* Goudrand bovenaan footer (mirror van header-onderkant) */
.og-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold-deep) 8%,
        var(--gold-bright) 50%,
        var(--gold-deep) 92%,
        transparent 100%);
}
.og-footer::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 3px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 5%,
        var(--gold-deep) 25%,
        var(--gold-deep) 75%,
        transparent 95%);
    opacity: 0.55;
}

.og-footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    text-align: center;
}

.og-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
    text-transform: uppercase;
}

.og-footer-brand .og-crest {
    width: 28px; height: 28px;
    font-size: 14px;
}

.og-footer-brand em {
    color: var(--text-on-dark-muted);
    font-style: italic;
    font-size: 0.85rem;
    margin-left: var(--space-2);
    font-family: var(--font-content);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
}

.og-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-4);
}

.og-footer-nav a {
    color: var(--gold-bright);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--t-fast) var(--ease-out);
}
.og-footer-nav a:hover,
.og-footer-nav a:focus-visible {
    color: var(--gold-pale);
    text-shadow: 0 0 6px rgba(212, 166, 86, 0.40);
    outline: none;
}

.og-footer-copy {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-on-dark-muted);
}

.og-footer-sep {
    color: var(--text-on-dark-faint);
    margin: 0 var(--space-1);
    user-select: none;
}
@media (max-width: 600px) { .og-footer-sep { display: none; } }

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 600px) {
    .og-header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .og-nav {
        justify-content: center;
        flex-wrap: wrap;
    }
    .og-main {
        padding: var(--space-4) var(--space-3);
    }
    .og-footer-inner { gap: var(--space-2); }
}