/* ══════════════════════════════════════════════════════════════
   TD HOCKEY — atletisch, hoekig, krachtig

   Condensed hoofdletters, diagonalen en fel oranje op donkerblauw.
   Bewust hard en sportief: dit is een trainingsmerk, geen winkel.
   ══════════════════════════════════════════════════════════════ */

:root {
    --nacht: #0A1628;
    --diep:  #050D18;
    --vuur:  #FF5A1F;
    --ijs:   #F4F6F8;
    --staal: #8A99AD;
}

[x-cloak] { display: none !important; }

/* ── Inhoud uit de editor ──────────────────────────────────── */

.inhoud {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #26374d;
}

.inhoud h1,
.inhoud h2,
.inhoud h3,
.inhoud h4 {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--nacht);
    margin: 2em 0 .6em;
}
.inhoud h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.inhoud h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.inhoud h3 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
.inhoud h4 { font-size: 1.25rem; }
.inhoud h1:first-child,
.inhoud h2:first-child { margin-top: 0; }

/* Oranje streep onder de grote koppen */
.inhoud h2::after {
    content: '';
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: .55rem;
    background: var(--vuur);
}

.inhoud p { margin-bottom: 1.15em; }

.inhoud a {
    color: var(--vuur);
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 rgba(255, 90, 31, .35);
    transition: box-shadow .2s;
}
.inhoud a:hover { box-shadow: inset 0 -1.1em 0 rgba(255, 90, 31, .18); }

.inhoud ul,
.inhoud ol { margin: 0 0 1.15em 0; padding-left: 1.5rem; }
.inhoud ul { list-style: none; padding-left: 0; }
.inhoud ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .5em;
}
.inhoud ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: .55rem;
    height: .55rem;
    background: var(--vuur);
    transform: skewX(-12deg);
}
.inhoud ol { list-style: decimal; }
.inhoud ol li { margin-bottom: .5em; padding-left: .3rem; }
.inhoud ol li::marker { font-weight: 700; color: var(--vuur); }

.inhoud img {
    margin: 2em 0;
    max-width: 100%;
    height: auto;
    /* Hoekig, niet afgerond: past bij de rest */
    border-radius: 0;
}

.inhoud blockquote {
    position: relative;
    margin: 2em 0;
    padding: 1.4rem 1.6rem;
    background: var(--nacht);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.35;
}
.inhoud blockquote::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--vuur);
}
.inhoud blockquote p:last-child { margin-bottom: 0; }

.inhoud table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: .95rem;
}
.inhoud th {
    background: var(--nacht);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .7rem .85rem;
    text-align: left;
}
.inhoud td {
    border-bottom: 1px solid #dfe4ea;
    padding: .7rem .85rem;
}
.inhoud tr:hover td { background: #fff; }

/* ── Knoppen uit de overgezette inhoud ──────────────────────
   De oude site markeerde knoppen met .button-outline. Die klasse
   blijft bij de import bewaard; hier krijgt ze de vorm van deze site.
   De klasse staat soms op de link zelf, soms op een omhullende div. */

.inhoud a.button-outline,
.inhoud .button-outline > a {
    display: inline-block;
    margin: .5rem 0;
    padding: .8rem 1.9rem;
    background: var(--vuur);
    color: #fff !important;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
    box-shadow: none;
    transition: background .2s;
}

/* Staat de klasse op een div, dan is die enkel de omhulling */
.inhoud div.button-outline { margin: 1.25rem 0; }

.inhoud a.button-outline:hover,
.inhoud .button-outline > a:hover { background: var(--nacht); }

/* Volgt de knop meteen op tekst in dezelfde alinea, dan is er lucht nodig */
.inhoud p > a.button-outline { margin-left: .35rem; }

/* ── Tegels ─────────────────────────────────────────────────
   Blokken die op de oude site in kolommen stonden en bij de import
   weer gegroepeerd zijn. Hier krijgen ze de vorm van deze site. */

.inhoud .tegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0;
}

.inhoud .tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.25rem;
    background: #fff;
    border-top: 4px solid var(--vuur);
    box-shadow: 0 1px 3px rgba(10, 22, 40, .06);
    transition: transform .25s, box-shadow .25s;
}
.inhoud .tegel:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(10, 22, 40, .12);
}

/* Binnen een tegel staat alles gecentreerd en compacter */
.inhoud .tegel > :first-child { margin-top: 0; }
.inhoud .tegel h2,
.inhoud .tegel h3 {
    font-size: 1.4rem;
    margin: 0 0 1rem;
    color: var(--nacht);
}
.inhoud .tegel h2::after { display: none; }
.inhoud .tegel p { margin: 0; }
.inhoud .tegel img {
    max-height: 5.5rem;
    width: auto;
    margin: 0 auto 1.25rem;
}
.inhoud .tegel a.button-outline { margin-top: auto; }

/* ── Details ───────────────────────────────────────────────── */

:focus-visible {
    outline: 3px solid var(--vuur);
    outline-offset: 2px;
}

::selection { background: var(--vuur); color: #fff; }

/* Tailwind kent font-700 niet als utility; hier vastgelegd */
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

@media print {
    header, footer, .niet-printen { display: none !important; }
    .inhoud { color: #000; }
}