/* ══════════════════════════════════════════════════════════════
   SUPPORT HOCKEY — webshop

   De huisstijl volgt het logo: één fel rood op wit, met warm zwart
   voor de tekst. Licht en ruim, zachte hoeken, grote beelden.

   Rood is er om te wijzen — een knop, een prijs, een korting — en
   verliest die kracht zodra het overal staat. Het wordt dus spaarzaam
   gebruikt; de rust komt van wit en zwart.
   ══════════════════════════════════════════════════════════════ */

:root {
    --rood:  #E41D34;   /* uit het logo */
    --bloed: #B01327;   /* dieper rood, voor hover en nadruk */
    --inkt:  #141010;   /* warm zwart; puur zwart oogt hard naast rood */
    --roet:  #0A0707;
    --zand:  #F7F4F2;   /* warme witruimte, geen koud grijs */
    --as:    #7A6F6C;
}

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

/* Wie beweging liever beperkt houdt, krijgt ze niet. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

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

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

/* ── Breedte ────────────────────────────────────────────────

   Alles deelt de breedte van de dienstenkaarten: kopbalk, koppen,
   tekst, tegels en voettekst staan op dezelfde linkerrand. De tekst
   loopt mee tot de rechterrand — geen smallere kolom binnen een brede
   sectie, want dat leest als een fout in de uitlijning. */


.inhoud h1,
.inhoud h2,
.inhoud h3,
.inhoud h4,
.inhoud h5,
.inhoud h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--inkt);
    margin: 1.9em 0 .55em;
}
.inhoud h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); }
.inhoud h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.inhoud h3 { font-size: 1.3rem; }
.inhoud h4 { font-size: 1.1rem; }

/* h5 en h6 werden in het oude thema als tussenkopje gebruikt; zonder
   opmaak vallen ze terug op de browserstandaard en verdwijnen ze. */
.inhoud h5 { font-size: 1.05rem; }
.inhoud h6 { font-size: 1rem; color: var(--rood); }
.inhoud h1:first-child,
.inhoud h2:first-child { margin-top: 0; }

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

.inhoud a {
    color: var(--rood);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.inhoud a:hover { color: var(--bloed); }

.inhoud ul,
.inhoud ol { margin: 0 0 1.1em 0; padding-left: 1.35rem; }
.inhoud ul { list-style: none; padding-left: 0; }
.inhoud ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .45em;
}
.inhoud ul li::before {
    content: '';
    position: absolute;
    left: .25rem;
    top: .68em;
    width: .4rem;
    height: .4rem;
    border-radius: 9999px;
    background: var(--rood);
}
.inhoud ol { list-style: decimal; }
.inhoud ol li { margin-bottom: .45em; }
.inhoud ol li::marker { font-weight: 600; color: var(--rood); }

.inhoud img {
    margin: 1.8em 0;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
}

.inhoud blockquote {
    margin: 1.8em 0;
    padding: 1.2rem 1.5rem;
    background: #fff;
    border-radius: 1rem;
    border-left: 3px solid var(--rood);
    color: var(--bloed);
}
.inhoud blockquote p:last-child { margin-bottom: 0; }

.inhoud table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.8em 0;
    font-size: .95rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(20, 16, 16, .06);
}
.inhoud th {
    background: var(--zand);
    font-weight: 600;
    text-align: left;
    padding: .75rem .9rem;
    border-bottom: 1px solid rgba(20, 16, 16, .06);
}
.inhoud td {
    padding: .75rem .9rem;
    border-bottom: 1px solid rgba(20, 16, 16, .04);
}
.inhoud tr:last-child td { border-bottom: 0; }

/* ── Knoppen uit de overgezette inhoud ──────────────────────
   .button-outline komt uit de oude site en blijft bij de import
   bewaard; hier krijgt ze de ronde vorm van deze site. */

.inhoud a[class*="button-outline"],
.inhoud [class*="button-outline"] > a {
    display: inline-block;
    margin: .5rem 0;
    padding: .75rem 1.7rem;
    background: var(--inkt);
    color: #fff !important;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    transition: background .2s;
}

.inhoud div[class*="button-outline"] { margin: 1.25rem 0; }

.inhoud a[class*="button-outline"]:hover,
.inhoud [class*="button-outline"] > a:hover { background: var(--rood); }

.inhoud p > a[class*="button-outline"] { margin-left: .35rem; }

/* ── Artikelen ─────────────────────────────────────────────── */

/* Vaste verhouding, zodat het raster niet verspringt bij het laden */
.artikel-foto {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* Kleurstalen in de filterbalk */
.kleurstaal {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(20, 16, 16, .12);
    transition: box-shadow .15s;
}
.kleurstaal:hover { box-shadow: 0 0 0 2px var(--as); }

/* De zoekbalk mag het kruisje van de browser missen */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Tegels ─────────────────────────────────────────────────
   Blokken die op de oude site in kolommen stonden en bij de import
   weer gegroepeerd zijn. */

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

.inhoud .tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.25rem;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 0 0 1px rgba(20, 16, 16, .06);
    transition: transform .25s, box-shadow .25s;
}
.inhoud .tegel:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(20, 16, 16, .1);
}

.inhoud .tegel > :first-child { margin-top: 0; }
.inhoud .tegel h2,
.inhoud .tegel h3 { font-size: 1.25rem; margin: 0 0 .9rem; }
.inhoud .tegel p  { margin: 0; }
.inhoud .tegel img { max-height: 5rem; width: auto; margin: 0 auto 1rem; }
.inhoud .tegel a[class*="button-outline"] { margin-top: auto; }

/* ── Twee kolommen en contactbanner ─────────────────────────
   Zelfde blokken als bij TD, maar in de ronde vormentaal van de shop. */

.inhoud .duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    margin: 3rem 0;
}
@media (min-width: 820px) {
    .inhoud .duo { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}
.inhoud .duo-tekst > :first-child { margin-top: 0; }
.inhoud .duo-tekst > :last-child  { margin-bottom: 0; }
.inhoud .duo-beeld img {
    display: block;
    width: 100%;
    max-height: 26rem;
    object-fit: cover;
    /* Staande foto's zijn meestal portretten; een uitsnede die in het
       midden ankert, snijdt dan door het gezicht. Iets hoger dus. */
    object-position: center 28%;
    margin: 0;
    border-radius: 1.25rem;
}

.inhoud .contactbanner {
    display: grid;
    grid-template-columns: 1fr;

    /* Over de volle breedte, dus buiten de tekstkolom. De marge trekt
       het blok terug tot de rand van het scherm; 100vw telt de
       schuifbalk mee, vandaar de begrenzing op 100%. */
    width: 100vw;
    max-width: 100vw;
    margin: 3.5rem calc(50% - 50vw) 0;
    background: var(--inkt);
    color: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
}
@media (min-width: 820px) {
    .inhoud .contactbanner { grid-template-columns: 1fr 1fr; }
}
.inhoud .contactbanner-beeld { position: relative; min-height: 16rem; }
.inhoud .contactbanner-beeld img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; margin: 0; border-radius: 0;
}
.inhoud .contactbanner-tekst { padding: 2.5rem 2rem; }
.inhoud .contactbanner-tekst > :first-child { margin-top: 0; }
.inhoud .contactbanner-tekst h3 { color: #fff; font-size: 1.1rem; margin: 1.4rem 0 .2rem; }
.inhoud .contactbanner-tekst h3:first-of-type { font-size: 1.9rem; margin-bottom: 1.5rem; }
.inhoud .contactbanner-tekst p { margin: 0; color: rgba(255, 255, 255, .7); }
.inhoud .contactbanner-tekst a { color: #fff; }
.inhoud .contactbanner-tekst img { max-width: 2.25rem; margin: 1.25rem 0 0; }

/* ── Clubs: tekst boven, logokaarten eronder ──────────────── */

.inhoud .clubs { margin: 3.5rem 0; }
.inhoud .clubs-tekst > :first-child { margin-top: 0; }

/* Klein opschrift met streepje ervoor, in de stijl van de sectiekoppen */
.inhoud .opschrift,
.inhoud .clubs-opschrift {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--rood);
}
.inhoud .opschrift::before,
.inhoud .clubs-opschrift::before {
    content: '';
    width: 2.5rem;
    height: 2px;
    background: var(--rood);
}

/* Als sectiescheiding heeft het opschrift lucht nodig boven zich;
   binnen een blok met eigen binnenmarge niet. */
.inhoud .opschrift { margin-top: 3rem; }
.inhoud .opschrift:first-child { margin-top: 0; }

/* Het opschrift hoort bij wat eronder komt, of dat nu een kop of
   meteen een reeks kolommen is. */
.inhoud .opschrift + .kolommen { margin-top: .75rem; }
.inhoud .opschrift + h2,
.inhoud .opschrift + h3 { margin-top: 0; }

/* ── Twee kolommen tekst ─────────────────────────────────── */

.inhoud .kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.75rem 2.5rem;
    margin: 2rem 0 3rem;
}

.inhoud .knopregel { margin: 2rem 0 3rem; }
.inhoud .kolom {
    background: #fff;
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 0 0 1px rgba(20, 16, 16, .06);
}
.inhoud .kolom > :first-child { margin-top: 0; }
.inhoud .kolom > :last-child  { margin-bottom: 0; }
.inhoud .kolom h3 { font-size: 1.35rem; margin-bottom: .6rem; }

.inhoud .clubs-tekst h3 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}

.inhoud .clubs-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .85rem;
    margin-top: 2.25rem;
}

.inhoud .clubkaart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem .75rem;
    background: #fff;
    border-top: 3px solid transparent;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(20, 16, 16, .06);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

/* Enkel een kaart met website reageert op hover */
a.clubkaart:hover {
    transform: translateY(-3px);
    border-top-color: var(--rood);
    box-shadow: 0 10px 22px rgba(20, 16, 16, .12);
}

.inhoud .clubkaart-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.75rem;
    width: 100%;
}
.inhoud .clubkaart-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    margin: 0;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .2s, opacity .2s;
}
.inhoud .clubkaart:hover .clubkaart-logo img { filter: none; opacity: 1; }

.inhoud .clubkaart-naam {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--inkt);
}


/* ── Melding ────────────────────────────────────────────────
   De oude site markeerde een uitspraak met een bannerblok. Die klasse
   komt mee met de import; hier krijgt ze de vorm van deze site. Geen
   pictogram ervoor: de tekst zegt het zelf. */

/* Een vaststelling, geen aankondiging — zie de toelichting in de
   stylesheet van TD. Hier zonder streepje maar met een zachte
   achtergrond, want de shop werkt met ronde vormen en witruimte. */

.inhoud .banner--roze,
.inhoud [class*="banner--"] {
    margin: 2.75rem 0;
    padding: 1.1rem 1.4rem;
    background: rgba(228, 29, 52, .07);   /* rood, sterk verdund */
    border-radius: 1rem;
    color: var(--inkt);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}


.inhoud [class*="banner--"] a { color: inherit; }


/* ── Blokken uit het beheer ─────────────────────────────────
   Dezelfde koppen als in de rest van de site, zodat een blok niet te
   herkennen is aan zijn opmaak maar gewoon meeloopt. */

.blok-kop {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800;
    
    letter-spacing: -0.01em;
    line-height: 1.02;
    color: var(--inkt);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    margin: 0 0 1.25rem;
}
h3.blok-kop { font-size: clamp(1.75rem, 4vw, 2.5rem); }

.blok-opschrift {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .75rem;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .35em;
    color: var(--rood);
}
.blok-opschrift::before {
    content: '';
    width: 2.5rem;
    height: 2px;
    background: var(--rood);
}

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

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

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

/* Verbergt het getalspinnetje bij aantallen */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

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