/*
Theme Name: Watersportnieuws
Theme URI: https://watersportnieuws.nl/
Template: twentytwentyfive
Author: Arimpex
Author URI: https://arimpex.nl/
Description: Huisstijl-child bovenop Twenty Twenty-Five. Concept "scheepsjournaal/logboek" uit huisstijl v1 (Kompasnavy + Signaalkoraal op Zeeschuim, Fraunces + Inter). Palet en typografie via theme.json; extra fijnregeling in dit bestand.
Version: 0.6.1
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: watersportnieuws
Tags: news, editorial, blog, clean
*/

/* ============================================================
   Huisstijl-tokens (1:1 met HUISSTIJL.md). theme.json levert
   het palet + fonts aan de blokken; dit vult de details.
   ============================================================ */
:root{
  --wn-navy:#0C2740; --wn-koraal:#E8552D; --wn-schuim:#F5F1E8; --wn-dek:#FBFAF6;
  --wn-mist:#5B6B76; --wn-touw:#D9D2C4; --wn-teal:#1C6E7E; --wn-amber:#C7902E; --wn-inkt:#0A1620;
}

/* Leeslijn: contentSize/wideSize staan in theme.json (46rem/68rem), zodat
   paginatitel, tekst, artikelgrid en footer op dezelfde rooilijn vallen.
   Die maten MOETEN in rem: `ch` rekent per element in zijn eigen font, dus
   Fraunces-koppen kregen een ~2x bredere kolom dan de Inter-tekst. */

/* Links: koraal accent, net als de styleguide */
a{ color:var(--wn-koraal); }
a:hover{ text-decoration:underline; }
a:where(:not(.wp-element-button)){ text-underline-offset:.18em; text-decoration-thickness:1px; }

/* Toetsenbordfocus zichtbaar houden (was nergens geregeld) */
:focus-visible{ outline:3px solid var(--wn-koraal); outline-offset:2px; border-radius:2px; }

::selection{ background:var(--wn-navy); color:var(--wn-schuim); }

/* Koppen: Fraunces-gezag, strak kerning */
h1,h2,h3,h4,.wp-block-heading{
  font-family:"Fraunces","Playfair Display",Georgia,serif;
  letter-spacing:-.01em;
  color:var(--wn-navy);
  text-wrap:balance;
}

/* Paginatitel = krantenkop: vloeiend, koraal waterlijn eronder */
.wp-block-post-title{
  font-size:clamp(2.1rem,1.35rem + 2.4vw,3.4rem);
  line-height:1.08;
}
.entry-content > p:first-of-type{
  font-size:1.2rem; line-height:1.55; color:var(--wn-inkt);
}

/* Sectiekoppen krijgen een koraal streepje: rubriek-gevoel */
.entry-content > h2{
  margin-top:3.25rem; padding-top:1rem;
  border-top:1px solid var(--wn-touw);
}
.entry-content > h2::before{
  content:""; display:block; width:44px; height:3px;
  background:var(--wn-koraal); margin-bottom:.75rem;
}

/* Nieuwslabel-hulpklasse (koraal vlakje, witte kapitalen) */
.wn-label{
  display:inline-block;background:var(--wn-koraal);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;font-family:"Inter","Segoe UI",system-ui,sans-serif;
}

/* Rubriektag (getijteal) */
.wn-tag{
  display:inline-block;background:rgba(28,110,126,.12);color:var(--wn-teal);
  font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;
}

/* Citaat met koraal-streep */
blockquote,.wp-block-quote{
  border-left:3px solid var(--wn-koraal);
  font-family:"Fraunces","Playfair Display",Georgia,serif;
}

/* ============================================================
   Knoppen
   ============================================================ */
.wp-block-button__link{
  padding:.85em 1.6em; border-radius:8px; font-weight:600;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wp-block-button__link:hover{
  background:var(--wn-koraal)!important;border-color:var(--wn-koraal)!important;
  transform:translateY(-1px); box-shadow:0 6px 16px rgba(12,39,64,.18);
}
.wp-block-button__link:active{ transform:translateY(0); box-shadow:none; }

/* ============================================================
   Artikelkaarten (query loop)
   ============================================================ */
.wp-block-post-template{ gap:1.5rem; }

.wp-block-post-template li{
  background:var(--wn-dek);border:1px solid var(--wn-touw);border-radius:12px;
  overflow:hidden;
  display:flex;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wp-block-post-template li:hover{
  transform:translateY(-3px);
  border-color:var(--wn-koraal);
  box-shadow:0 10px 24px rgba(12,39,64,.12);
}
/* Kaartinhoud vult de kaart, zodat "Lees verder" onderaan uitlijnt */
.wp-block-post-template li > .wp-block-group{
  display:flex; flex-direction:column; flex:1;
  padding:1.5rem;
}
/* WP zet margin-left/right:auto (!important) op de blokken in een constrained
   groep. In een blok-layout doet dat niets, maar in deze flex-kolom centreert
   het korte blokken: de datum zweefde daardoor midden boven de titel. */
.wp-block-post-template li > .wp-block-group > *{
  margin-left:0!important; margin-right:0!important;
  max-width:100%; align-self:stretch;
}
.wp-block-post-template li .wp-block-post-excerpt{
  display:flex; flex-direction:column; flex:1;
}
.wp-block-post-template li .wp-block-post-excerpt__excerpt{ flex:1; }

/* Kaarttitel = navy, niet koraal: koraal is accent, geen kopkleur */
.wp-block-post-template li .wp-block-post-title{ margin:0 0 .5rem; line-height:1.25; }
.wp-block-post-template li .wp-block-post-title a{
  color:var(--wn-navy); text-decoration:none;
}
.wp-block-post-template li:hover .wp-block-post-title a{ color:var(--wn-koraal); }

/* Datum + rubriek boven de titel */
.wp-block-post-template li .wp-block-post-date{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wn-mist); margin:0 0 .35rem;
}

/* "Lees verder" als affordance, niet als kale link */
.wp-block-post-excerpt__more-text{ margin:1rem 0 0; }
.wp-block-post-excerpt__more-link{
  font-size:14px; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4em;
}
.wp-block-post-excerpt__more-link::after{
  content:"\2192"; transition:transform .15s ease;
}
.wp-block-post-excerpt__more-link:hover::after{ transform:translateX(3px); }

/* --- Logo in navy header (v0.3) --- */
.wn-header { border-bottom: 3px solid var(--wp--preset--color--accent, #E8552D); }
.wn-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.wn-logo__svg { height: 46px; width: auto; display: block; }
@media (max-width: 600px) { .wn-logo__svg { height: 38px; } }
.wn-header .wp-block-navigation { --wp--preset--color--contrast: #FBFAF6; }

/* --- Eigen footer (v0.4) --- */
.wn-footer{ border-top:3px solid var(--wn-koraal); }
.wn-footer a{ color:var(--wn-schuim); text-decoration:none; }
.wn-footer a:hover{ color:var(--wn-koraal); text-decoration:underline; }
.wn-footer .wn-footer__brand{ font-family:"Fraunces",Georgia,serif; font-size:1.35rem; color:var(--wn-schuim); }
.wn-footer .wn-footer__tagline{ color:var(--wn-touw); font-size:.95rem; margin:.25rem 0 0; }
.wn-footer .wn-footer__meta{ color:var(--wn-touw); font-size:.85rem; margin:0; }
/* Footer-navigatie is een linklijst, geen opsomming */
.wn-footer .wn-footer__list{ list-style:none; padding-left:0; margin:.5rem 0 0; }
.wn-footer .wn-footer__list li{ margin:0; }

/* De consent-plugin hangt zijn knop achter het footer-element, dus buiten de
   navy groep. Footer zelf navy maken zodat hij niet los op het schuim zweeft. */
footer.wp-block-template-part{ background:var(--wn-navy); }
button.wsn-cookie-prefs{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:.85rem; color:var(--wn-touw);
  text-decoration:underline; text-underline-offset:.18em;
}
button.wsn-cookie-prefs:hover{ color:var(--wn-koraal); }

/* ============================================================
   Mobiel
   ============================================================ */
@media (max-width:781px){
  .wp-block-post-template{ gap:1rem; }
  .wp-block-post-template li > .wp-block-group{ padding:1.25rem; }
  .entry-content > h2{ margin-top:2.5rem; }
  .entry-content > p:first-of-type{ font-size:1.1rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; }
  .wp-block-post-template li:hover{ transform:none; }
  .wp-block-button__link:hover{ transform:none; }
}

/* ============================================================
   v0.5 - artikelpagina, datatabellen en navigatie
   ============================================================ */

/* --- Skip-link: was onzichtbaar gestyled bij focus --- */
.skip-link:focus{
  background:var(--wn-navy)!important; color:var(--wn-schuim)!important;
  padding:.75rem 1.25rem!important; border-radius:0 0 8px 0;
}

/* --- Kop blijft meevaren; nieuwssite = snel terug naar de rubrieken.
   Sticky hoort op het <header>-element: .wn-header is een kind daarvan en
   zou binnen zijn eigen (even hoge) ouder blijven plakken, dus nergens. --- */
header.wp-block-template-part{
  position:sticky; top:0; z-index:100;
  background:var(--wn-navy);
  box-shadow:0 2px 12px rgba(10,22,32,.18);
}
/* De WP-adminbalk duwt de pagina 32px omlaag; sticky moet daaronder blijven. */
.admin-bar header.wp-block-template-part{ top:32px; }
@media (max-width:782px){ .admin-bar header.wp-block-template-part{ top:46px; } }
/* De navigatie-overlay (mobiel menu) mag niet onder de sticky kop vallen */
.wp-block-navigation__responsive-container.is-menu-open{ z-index:200; }

/* Navigatie: huidige pagina herkenbaar, hover met koraal waterlijn */
.wn-header .wp-block-navigation-item__content{
  position:relative; padding-block:.35rem; text-decoration:none;
}
.wn-header .wp-block-navigation-item__content::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--wn-koraal); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.wn-header .wp-block-navigation-item__content:hover::after,
.wn-header .current-menu-item .wp-block-navigation-item__content::after{
  transform:scaleX(1);
}
.wn-header .current-menu-item .wp-block-navigation-item__content{ font-weight:600; }

/* ============================================================
   Artikelkop: rubriek-label, krantenkop, byline met datum
   ============================================================ */
.wn-article-head{ border-bottom:1px solid var(--wn-touw); }

/* Rubriek-label boven de kop (post-terms rendert <a>'s in een div) */
.wn-eyebrow{ margin:0 0 .9rem; line-height:1; }
.wn-eyebrow a{
  display:inline-block; background:var(--wn-koraal); color:#fff!important;
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:4px; text-decoration:none;
}
.wn-eyebrow a:hover{ background:var(--wn-navy); }

.wn-single .wp-block-post-title{ margin:0 0 1rem; }

/* Byline: datum + auteur in mistgrijs, niet in koraal-linkkleur */
.wn-byline{ gap:.5rem; align-items:baseline; margin:0; }
.wn-byline p,.wn-byline div,.wn-byline time{
  margin:0; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wn-mist); font-variant-numeric:tabular-nums;
}
.wn-byline a{ color:var(--wn-mist); text-decoration:none; }
.wn-byline a:hover{ color:var(--wn-koraal); }
.wn-byline__sep{ color:var(--wn-touw); }

/* ============================================================
   Datatabellen. De prijstabellen zijn de kern van deze site:
   cijfers rechts + tabular-nums zodat euro's onder elkaar staan.
   ============================================================ */
.wp-block-table{ margin-block:2rem; }
.wp-block-table table{
  border-collapse:collapse; width:100%; font-size:15px;
  border:1px solid var(--wn-touw); border-radius:10px; overflow:hidden;
}
.wp-block-table thead{ background:var(--wn-navy); }
.wp-block-table thead th{
  color:var(--wn-schuim); text-align:left; font-weight:600;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:.7rem .9rem; border:0;
}
.wp-block-table td{
  padding:.65rem .9rem; border:0; border-top:1px solid var(--wn-touw);
  font-variant-numeric:tabular-nums;
}
.wp-block-table tbody tr:nth-child(even){ background:rgba(12,39,64,.035); }
.wp-block-table tbody tr:hover{ background:rgba(232,85,45,.06); }
/* Eerste kolom = het label (boottype), de rest zijn cijfers */
.wp-block-table td:first-child{ font-weight:600; color:var(--wn-navy); }
.wp-block-table td:not(:first-child),
.wp-block-table th:not(:first-child){ text-align:right; }
/* Bedragen en bereiken ("€ 125.000 - € 339.900") niet halverwege afbreken:
   dat gaf scheve rijen en las als twee losse getallen. */
.wp-block-table td:not(:first-child){ white-space:nowrap; }
.wp-block-table figcaption{
  font-size:13px; color:var(--wn-mist); margin-top:.6rem;
}
/* Mobiel: tabel mag schuiven i.p.v. de layout oprekken */
@media (max-width:781px){
  .wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wp-block-table table{ min-width:34rem; }
}

/* ============================================================
   Opsommingen in de tekst: koraal marker i.p.v. grijze bullet
   ============================================================ */
.entry-content ul:not(.wp-block-navigation__container):not(.wp-block-post-template){
  list-style:none; padding-left:1.35rem;
}
.entry-content ul:not(.wp-block-navigation__container):not(.wp-block-post-template) > li{
  position:relative; margin-bottom:.5rem;
}
.entry-content ul:not(.wp-block-navigation__container):not(.wp-block-post-template) > li::before{
  content:""; position:absolute; left:-1.1rem; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--wn-koraal);
}
.entry-content ol{ padding-left:1.35rem; }
.entry-content ol > li{ margin-bottom:.5rem; }
.entry-content ol > li::marker{ color:var(--wn-koraal); font-weight:700; }

/* ============================================================
   Slotalinea = uitnodiging, geen bijzin: kaartje eromheen.
   Anker = de scheidingslijn waar de CTA in deze rubriek achter staat.
   NIET op `p:has(> em:only-child)` selecteren: :only-child telt alleen
   element-kinderen, dus dat pakte ook elke alinea met een cursief woord.
   ============================================================ */
.entry-content > hr + p:last-child{
  background:var(--wn-dek); border:1px solid var(--wn-touw);
  border-left:3px solid var(--wn-koraal); border-radius:0 10px 10px 0;
  padding:1.1rem 1.25rem; font-size:1.02rem; color:var(--wn-navy);
}
.entry-content > hr + p:last-child em{ font-style:normal; }
/* De lijn zelf is dan dubbelop: de kaart is al de scheiding. Alleen die
   ene lijn, zodat een scheiding midden in een artikel gewoon blijft staan. */
.entry-content > hr:has(+ p:last-child){ display:none; }

/* ============================================================
   Onderaan het artikel: tags + "Meer uit deze rubriek"
   ============================================================ */
.wn-article-foot .wp-block-post-terms a{
  display:inline-block; background:rgba(28,110,126,.12); color:var(--wn-teal);
  font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px;
  text-decoration:none; margin:0 .3rem .3rem 0;
}
.wn-article-foot .wp-block-post-terms a:hover{ background:rgba(28,110,126,.22); }

.wn-related{ border-top:1px solid var(--wn-touw); }
.wn-related__title{
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wn-mist); margin:0 0 1.25rem;
}
.wn-related .wp-block-post-template{ gap:1.25rem; }
.wn-related .wp-block-post-date{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--wn-mist);
  margin:0 0 .35rem;
}
.wn-related .wp-block-post-title{ margin:0; line-height:1.3; }
.wn-related .wp-block-post-title a{ color:var(--wn-navy); text-decoration:none; }
.wn-related .wp-block-post-title a:hover{ color:var(--wn-koraal); }

/* ============================================================
   Cookiebalk zweeft vast onderin; laat 'm niets bedekken
   ============================================================ */
body:has(#wsn-consent:not([hidden])){ padding-bottom:9rem; }
@media (max-width:600px){ body:has(#wsn-consent:not([hidden])){ padding-bottom:14rem; } }

/* ============================================================
   Print: de prijstabellen worden uitgeprint/meegenomen
   ============================================================ */
@media print{
  .wn-header,.wn-footer,footer.wp-block-template-part,#wsn-consent,.wn-related{ display:none!important; }
  body{ background:#fff; color:#000; padding-bottom:0; }
  .wp-block-table thead{ background:#fff; }
  .wp-block-table thead th{ color:#000; border-bottom:2px solid #000; }
  .wp-block-table table{ border:1px solid #666; }
  a{ color:#000; text-decoration:underline; }
  .entry-content > p:has(> em:only-child){ border:1px solid #666; }
}

/* ============================================================
   v0.6 - home: één rooilijn en een kopstuk
   ============================================================ */

/* De home mengde twee rooilijnen: titel, intro, rubrieksectie en knop
   vielen op de leeskolom (46rem), het artikelgrid op de wide-lijn
   (68rem), dus de linkerranden liepen niet door. Nu staat alles op de
   68rem-lijn en houdt de leestekst zijn regellengte via een rechter-
   marge. Een smallere max-width kan hier niet: WP centreert elk blok
   in de constrained layout zelf, dus die kolom zou opnieuw wegdrijven
   van de rooilijn. Het kader rekent met WP's eigen padding-vars, zodat
   het op elke breedte exact met het grid meeloopt. */
body.home{
  --wn-kader: min(68rem, 100vw - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
  --wn-leesmarge: max(0rem, var(--wn-kader) - 46rem);
}
/* box-sizing is hier het hele eieren eten: de leesmarge moet BINNEN de
   68rem vallen. Bij content-box telt WP de padding erbovenop, wordt het
   blok breder dan het kader, houden de auto-marges geen ruimte over om
   mee te centreren en zakt de linkerrand terug naar de root-padding
   (50px i.p.v. 176px) - precies de tweede rooilijn die we wegwerken.
   De titel erfde border-box al en stond daardoor als enige wel goed. */
body.home main > .wp-block-group > .wp-block-post-title,
body.home .entry-content > p,
body.home .entry-content > h2{
  box-sizing:border-box;
  max-width:68rem;
  padding-right:var(--wn-leesmarge);
}
/* Knop lijnt links uit; die heeft alleen de rooilijn nodig, geen marge. */
body.home .entry-content > .wp-block-buttons{ max-width:68rem; }

/* Kopstuk: de actuele Botenmarkt-index staat sticky als lead-kaart boven
   het grid. Dat haalt 'm uit de chronologische staart (hij was een seconde
   ouder dan de rest en zakte dus naar onderen) en laat de vier overige
   artikelen als 2x2 uitkomen, zonder wees op de laatste rij. */
.wn-lead{ margin-bottom:1.5rem; }
.wn-lead .wp-block-post-template{ gap:0; }
.wn-lead .wp-block-post-template li{ border-left:3px solid var(--wn-koraal); }
.wn-lead .wp-block-post-template li > .wp-block-group{ padding:2rem 2.25rem; }
.wn-lead .wp-block-post-template li .wp-block-post-title{
  font-size:clamp(1.5rem,1.05rem + 1.5vw,2.15rem);
  line-height:1.15; margin:0 0 .65rem;
}
/* Lead-tekst blijft op leesbreedte, ook al is de kaart 68rem breed. */
.wn-lead .wp-block-post-template li .wp-block-post-excerpt{
  max-width:46rem; font-size:1.08rem; line-height:1.55;
}
.wn-lead .wp-block-post-template li .wn-eyebrow{ margin:0 0 .85rem; }

@media (max-width:781px){
  .wn-lead .wp-block-post-template li > .wp-block-group{ padding:1.5rem; }
  .wn-lead{ margin-bottom:1rem; }
}