/*
Theme Name: Julianakerk Baksteen Blauw
Theme URI: https://julianakerkdordrecht.nl/
Author: Julianakerk Dordrecht
Description: Kleurvariant van "Baksteen": identieke vormgeving en templates, met de kleurstelling van huisstijlvariant 03 "Gevel" (#12293D, #1F6FA8, #85B3D1, #E6F1F7). Kopletter Bitter, broodletter Public Sans. Zelfstandig thema; de content laadt identiek aan Juliana_Kerk (zelfde templatebestandsnamen en ACF-velden; custom post types via de mu-plugin julianakerk-core).
Requires at least: 4.9.6
Version: 1.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: julianakerk-baksteen-blauw
Tags: one-column, flexible-header
*/
/* =====================================================================
   Huisstijl 02b - Baksteen Blauw (Baksteen-vormgeving, kleurstelling 03 "Gevel"; Bitter / Public Sans)
   ===================================================================== */
body { font-family: "Public Sans", "Inter", sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Bitter", Georgia, serif; }
.menu-outer .menu-footer .footer-inner h3 span { font-family: "Bitter", Georgia, serif !important; }
.mob-header .logo-sec a { font-family: "Bitter", Georgia, serif; font-weight: 600; }

/* Kenmerkende rand bovenaan (Baksteen-vormgeving) */
header#top { border-top: 6px solid #1f6fa8; }
.mob-menu-bar { border-top: 4px solid #1f6fa8; }

/* Logo */
.jk-logo { display: inline-flex; align-items: center; gap: 12px; }
.jk-logo svg { display: block; flex: none; }
.jk-logo .jk-logo-text { display: flex; flex-direction: column; gap: 5px; }
.jk-logo .jk-logo-name { font: 600 25px/1 "Bitter", Georgia, serif; color: #12293d; letter-spacing: -.01em; }
.jk-logo .jk-logo-sub { font: 500 9px/1 "Public Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #85b3d1; }

/* ---------------------------------------------------------------------
   Homepage volgens het Baksteen-ontwerp
   --------------------------------------------------------------------- */
.hs-home { background: #fff; }
.hs-home section { display: block; }
.hs-shell { max-width: 1240px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.hs-home ul { list-style: none; margin: 0; padding: 0; }
.hs-label { font: 500 12px/1 "Public Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #85b3d1; }

/* Livebalk: plakt bij scrollen onder de fixed header (top wordt in footer.php op de headerhoogte gezet) */
.hs-livebar { background: #12293d; padding: 18px 0 14px; position: sticky; top: 0; z-index: 90; }
.hs-livebar .hs-shell { display: flex; align-items: center; gap: 12px; }
.hs-livebar-dot { width: 8px; height: 8px; border-radius: 50%; background: #85b3d1; flex: none; }
.hs-livebar-text { font: 500 13px/1.3 "Public Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e6f1f7; }
.hs-livebar-text a { color: #e6f1f7; border-bottom: 1px solid #85b3d1; font-weight: 600; }
.hs-livebar-text a:hover { color: #d3e4ee; }
/* Alleen in de brede weergave; het smalle ontwerp heeft deze links niet. */
.hs-livebar-links { display: none; }
.hs-livebar-links a { font: 500 11px/1.3 "Public Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #b9d6e6; }
.hs-livebar-links a:hover { color: #e6f1f7; }

/* Welkomtekst en knoppen; staan onder de quote, naast de videoband */
.hs-welkom { margin-top: 26px; padding-top: 22px; border-top: 1px solid #d3e4ee; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hs-welkom-desc { font: 400 16px/1.7 "Public Sans", sans-serif; color: #32363b; max-width: 460px; }
.hs-welkom-desc p { margin: 0 0 8px; }
.hs-welkom-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.hs-welkom-buttons li a { display: inline-flex; align-items: center; background: #1f6fa8; color: #e6f1f7; font: 600 12px/1 "Public Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 15px 26px; }
.hs-welkom-buttons li a:hover { background: #12293d; color: #e6f1f7; }
.hs-btn-play { width: 0; height: 0; flex: none; margin-right: 10px; border: 6px solid transparent; border-left: 10px solid #e6f1f7; border-right: 0; }
.hs-welkom-buttons li + li a { background: none; border: 1px solid #d3e4ee; color: #1f6fa8; }
.hs-welkom-buttons li + li a:hover { background: #1f6fa8; color: #e6f1f7; border-color: #1f6fa8; }

/* Introductievideo over de videoband */
.hs-introvideo { display: inline-flex; align-items: center; gap: 18px; text-align: left; }
.hs-introvideo-play { width: 46px; height: 46px; border-radius: 50%; background: #e6f1f7; flex: none; position: relative; }
.hs-introvideo-play::after { content: ""; position: absolute; left: 18px; top: 15px; border: 8px solid transparent; border-left: 13px solid #1f6fa8; border-right: 0; }
.hs-introvideo-text { display: flex; flex-direction: column; gap: 4px; }
.hs-introvideo-title { font: 600 18px/1.3 "Bitter", Georgia, serif; color: #e6f1f7; }
.hs-introvideo-sub { font: 400 12px/1.5 "Public Sans", sans-serif; letter-spacing: .06em; color: #b9d6e6; }
.hs-introvideo:hover .hs-introvideo-play { background: #d3e4ee; }

/* Dagelijks woord als quote-hero; het bijbelgedeelte staat in het label (zie content-home.php) */
.hs-woord { padding: 64px 0 56px; background: #fff; }
.hs-woord .hs-label { margin-bottom: 26px; }
.hs-woord #dagelijkswoordbox { display: block; overflow: visible !important; float: none !important; height: auto !important; }
.hs-woord .dagelijkswoordtekst { font: 600 13px/1.45 "Bitter", Georgia, serif !important; color: #12293d !important; background: none !important; padding: 0 !important; margin: 0 !important; max-width: 900px; text-wrap: pretty; }
.hs-woord .dagelijkswoordtitel { display: none !important; }
.hs-woord #dagelijkswoordinschrijven { display: none !important; }
.hs-woord .hs-woord-feed .clearfix { clear: both; }

/* Videoband met welkom */
.hs-media { position: relative; border-top: 8px solid #1f6fa8; background: #12293d; overflow: hidden; min-height: 420px; display: flex; }
.hs-media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-media-overlay { position: relative; width: 100%; background: rgba(18, 41, 61, .55); display: flex; align-items: center; padding: 70px 0; }
.hs-media-overlay .hs-shell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.hs-media-title { font: 600 40px/1.2 "Bitter", Georgia, serif; color: #e6f1f7; margin: 0; max-width: 760px; }
.hs-media-desc { font: 400 17px/1.7 "Public Sans", sans-serif; color: #b9d6e6; max-width: 620px; }
.hs-media-desc p { margin: 0 0 8px; color: #b9d6e6; }
.hs-media-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px !important; }
.hs-media-buttons li a { display: inline-block; background: #e6f1f7; color: #12293d; font: 600 14px/1 "Public Sans", sans-serif; padding: 14px 24px; }
.hs-media-buttons li a:hover { background: #d3e4ee; color: #12293d; }

/* Kerkdiensten (volle breedte) */
.hs-diensten { padding: 56px 0 48px; background: #fff; }
.hs-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.hs-col-head h2 { font: 600 26px/1.2 "Bitter", Georgia, serif; color: #12293d; margin: 0; }
.hs-col-link { font: 600 12px/1.4 "Public Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #1f6fa8; border-bottom: 1px solid #1f6fa8; white-space: nowrap; }
.hs-col-link:hover { color: #12293d; border-color: #12293d; }
/* Het widget zet zelf vaste kolombreedtes (85/50/150px) op de spans; hier
   overschreven naar een grid dat met de volle breedte meeschaalt. */
.hs-kerktijden .ktn-gatherings { padding: 0 !important; }
.hs-kerktijden .ktn-gatherings li { display: grid !important; grid-template-columns: 110px 64px 1.2fr 1fr; gap: 2px 28px; align-items: baseline; border-top: 1px solid #e6f1f7; padding: 12px 0; margin: 0 !important; white-space: normal !important; line-height: 1.5 !important; }
.hs-kerktijden .ktn-gatherings li:last-child { border-bottom: 1px solid #e6f1f7; }
.hs-kerktijden .ktn-gatherings li > span { font: 400 16px/1.5 "Public Sans", sans-serif !important; color: #12293d !important; display: block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; }
.hs-kerktijden .ktn-gatherings li span span { display: inline !important; width: auto !important; margin: 0 !important; }
/* "Video-uitzending" en "Audio-uitzending" zijn eigen spans van het widget
   (type 170 en 175) en staan al in de livebalk; hier weglaten. */
.hs-kerktijden .ktn-gatherings .ktn-type-170,
.hs-kerktijden .ktn-gatherings .ktn-type-175 { display: none !important; }
.hs-kerktijden .ktn-gatherings span.ktn-date { font-weight: 600 !important; color: #1f6fa8 !important; }
.hs-kerktijden .ktn-gatherings a { color: #1f6fa8 !important; text-decoration: underline; }
.hs-kerktijden .ktn-more { margin-top: 16px !important; }
.hs-kerktijden .ktn-more a { color: #5e8ca6 !important; font: 400 13px/1.5 "Public Sans", sans-serif !important; }
.hs-kerktijden .emg-kerktijden-widget .brand { display: none !important; }

/* Quick links */
.hs-quick { padding: 8px 0 48px; background: #fff; }
.hs-quick .audiences-sec ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hs-quick .audiences-sec li { display: block; }
.hs-quick .audiences-sec .icon-sec { display: none; }
.hs-quick .audiences-sec .sub-head { font: 600 20px/1.3 "Bitter", Georgia, serif; color: #12293d; padding-bottom: 12px; border-bottom: 2px solid #1f6fa8; margin-bottom: 4px; }
.hs-quick .audiences-sec p { margin: 0; padding: 10px 0; border-bottom: 1px solid #e6f1f7; }
.hs-quick .audiences-sec p a { font: 400 15px/1.5 "Public Sans", sans-serif; color: #12293d; }
.hs-quick .audiences-sec p a:hover { color: #1f6fa8; }
.hs-quick .audiences-sec .col-hier form input.submit-prekenoverzicht { background: none; border: none; color: #1f6fa8; font: 400 15px/1.5 "Public Sans", sans-serif; cursor: pointer; padding: 10px 0; text-decoration: underline; }

/* Nieuws */
.hs-nieuws { background: #e6f1f7; padding: 56px 0 64px; border-top: 8px solid #1f6fa8; }
.hs-nieuws .hs-col-head h2 { color: #12293d; }
.hs-nieuws-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 10px !important; }
.hs-nieuws-grid li { background: #fff; border: 1px solid #d3e4ee; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.hs-nieuws-img img { width: 100%; height: 220px; object-fit: cover; display: block; }
.hs-nieuws-title { font: 600 20px/1.35 "Bitter", Georgia, serif; margin: 0; }
.hs-nieuws-title a { color: #12293d; }
.hs-nieuws-title a:hover { color: #1f6fa8; }
.hs-nieuws-cont { font: 400 15px/1.7 "Public Sans", sans-serif; color: #32363b; }
.hs-nieuws-cont p { margin: 0; }
.hs-nieuws-more { margin-top: auto; align-self: flex-start; }

/* Nieuwsbericht-detail */
.hs-nieuws-artikel { padding: 56px 0 72px; background: #fff; }
.hs-nieuws-artikel .hs-shell { max-width: 860px; }
.hs-nieuws-artikel h1 { font: 600 34px/1.25 "Bitter", Georgia, serif; color: #12293d; margin: 12px 0 26px; }
.hs-nieuws-artikel-img img { width: 100%; max-height: 420px; object-fit: cover; display: block; margin-bottom: 26px; }
.hs-nieuws-artikel-cont { font: 400 17px/1.8 "Public Sans", sans-serif; color: #32363b; }
.hs-nieuws-artikel-cont h1, .hs-nieuws-artikel-cont h2, .hs-nieuws-artikel-cont h3, .hs-nieuws-artikel-cont h4 { font: 600 22px/1.35 "Bitter", Georgia, serif; color: #12293d; margin: 20px 0 10px; }
.hs-nieuws-artikel-cont p { margin: 0 0 14px; }
.hs-nieuws-artikel-cont a { color: #1f6fa8; text-decoration: underline; }
.hs-nieuws-artikel-cont img { max-width: 100%; height: auto; }
.hs-nieuws-artikel .hs-col-link { display: inline-block; margin-top: 28px; }

/* Responsief */
@media (max-width: 991px) {
  .hs-shell { padding-left: 24px; padding-right: 24px; }
  .hs-woord .dagelijkswoordtekst { font-size: 11px !important; }
  .hs-media-title { font-size: 30px; }
  .hs-nieuws-artikel h1 { font-size: 27px; }
  .hs-quick .audiences-sec ul { grid-template-columns: 1fr; gap: 24px; }
  .hs-nieuws-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hs-shell { padding-left: 16px; padding-right: 16px; }
  .hs-livebar .hs-shell { flex-wrap: wrap; }
  .hs-kerktijden .ktn-gatherings li { grid-template-columns: 80px 52px 1fr; gap: 2px 16px; }
  .hs-kerktijden .ktn-gatherings li .ktn-voorganger { grid-column: 3; }
  .hs-woord { padding: 40px 0 36px; }
  .hs-woord .dagelijkswoordtekst { font-size: 9px !important; }
  .hs-media { min-height: 320px; }
  .hs-media-overlay { padding: 48px 0; }
  .hs-media-title { font-size: 24px; }
}

/* ---------------------------------------------------------------------
   Brede weergave - artboard "Breedbeeld 02 Baksteen" (kleurstelling 03 "Gevel")
   De inhoud volgt het raster van 1440px breed: --hs-edge is de zijmarge die
   nodig is om binnen dat raster 56px lucht te houden. Die marge is afgetopt op
   160px, anders zou de inhoud op een breed scherm (2560px en meer) in een smalle
   kolom in het midden blijven staan terwijl de header wel tot de schermrand
   doorloopt; dezelfde variabele lijnt beide banden op elkaar uit.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  :root { --hs-edge: clamp(56px, calc((100vw - 1440px) / 2 + 56px), 160px); }
  .hs-breed .hs-shell,
  .hs-livebar .hs-shell { max-width: none; padding-left: var(--hs-edge); padding-right: var(--hs-edge); }

  /* Livebalk: de melding links, de overige links rechts. Het artboard centreert
     de melding; hier is bewust voor links uitlijnen gekozen. */
  .hs-livebar { padding: 13px 0; }
  .hs-livebar-links { display: flex; gap: 26px; margin-left: auto; }

  /* Band 1: dagelijks woord naast de videoband, half/half */
  .hs-band-intro { display: grid; grid-template-columns: 1fr 1fr; }
  .hs-band-intro .hs-woord { display: flex; padding: 0; background: #e6f1f7; border-right: 8px solid #1f6fa8; }
  .hs-band-intro .hs-woord .hs-shell { flex: 1; padding: 64px 56px 64px var(--hs-edge); display: flex; flex-direction: column; justify-content: center; }
  .hs-band-intro .hs-woord .hs-label { margin-bottom: 18px; }
  .hs-band-intro .hs-woord .dagelijkswoordtekst { font-size: 18px !important; line-height: 1.35 !important; max-width: none; }
  /* display expliciet, want ".hs-home section { display: block }" is specifieker
     dan ".hs-media { display: flex }" en zou de kolom anders platleggen. */
  .hs-band-intro .hs-media { display: flex; border-top: none; min-height: 560px; }
  /* De kop en de introductievideo linksonder in het beeld, zoals in het ontwerp.
     margin: 0 op de shell, anders centreert de "margin: 0 auto" uit de basis hem
     als flexitem in plaats van hem de volle breedte te geven. */
  .hs-band-intro .hs-media-overlay { background: rgba(18, 41, 61, .42); flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 0 0 44px; }
  .hs-band-intro .hs-media-overlay .hs-shell { margin: 0; align-items: flex-start; text-align: left; gap: 20px; padding: 0 44px; }
  .hs-band-intro .hs-media-title { max-width: 460px; font-size: 34px; }

  /* Band 2: de kerkdiensten (1.35fr) naast het nieuws (1fr). De index staat
     daaronder, over de volle breedte. */
  .hs-band-onder { display: grid; grid-template-columns: 1.35fr 1fr; border-top: 1px solid #d3e4ee; }
  .hs-band-onder .hs-diensten { padding: 44px 0 48px; border-right: 1px solid #d3e4ee; }
  .hs-band-onder .hs-diensten .hs-shell { padding: 0 56px 0 var(--hs-edge); }
  .hs-band-onder .hs-diensten .hs-col-head h2 { font-size: 22px; }
  /* Smallere kolom: voorganger onder de dienst in plaats van ernaast */
  .hs-band-onder .hs-kerktijden .ktn-gatherings li { grid-template-columns: 96px 58px 1fr; gap: 2px 18px; padding: 11px 0; }
  .hs-band-onder .hs-kerktijden .ktn-gatherings li > span { font-size: 15px !important; }
  .hs-band-onder .hs-kerktijden .ktn-gatherings li .ktn-voorganger { grid-column: 3; }

  /* Nieuws als kolom "Uit de gemeente": een lijst zonder kaders en beeld */
  .hs-band-onder .hs-nieuws { padding: 44px 0 48px; border-top: none; }
  .hs-band-onder .hs-nieuws .hs-shell { padding: 0 var(--hs-edge) 0 48px; }
  .hs-band-onder .hs-nieuws .hs-col-head h2 { font-size: 22px; }
  .hs-band-onder .hs-nieuws-grid { grid-template-columns: 1fr; gap: 0; }
  .hs-band-onder .hs-nieuws-grid li { background: none; border: none; border-bottom: 1px solid #d3e4ee; padding: 0 0 20px; margin-top: 20px; gap: 8px; }
  .hs-band-onder .hs-nieuws-grid li:last-child { border-bottom: none; }
  .hs-band-onder .hs-nieuws-img { display: none; }
  .hs-band-onder .hs-nieuws-title { font-size: 18px; }
  .hs-band-onder .hs-nieuws-cont { font-size: 13px; line-height: 1.6; }
  .hs-band-onder .hs-nieuws-more { margin-top: 4px; font-size: 11px; }

  /* De index over de volle breedte onder de band */
  .hs-quick { padding: 48px 0 56px; border-top: 1px solid #d3e4ee; }
  .hs-quick .audiences-sec .sub-head { font-size: 22px; }
}

/* ---------------------------------------------------------------------
   Binnenpagina met een lijst: preekvoorbereiding / liturgie en
   terugluisteren. Volgt het artboard "Binnenpagina (Baksteen)": getinte
   kop met kruimelpad, de lijst met een contextkolom van 300px ernaast.
   --------------------------------------------------------------------- */
.hs-page { background: #fff; }
.hs-page .hs-page-head { background: #e6f1f7; padding: 40px 0 52px; }
.hs-page h1 { font: 600 44px/1.15 "Bitter", Georgia, serif; color: #12293d; margin: 0; max-width: 16ch; text-wrap: balance; }
.hs-page .hs-page-head .hs-label { margin-bottom: 18px; }
.hs-page-intro { font: 400 17px/1.65 "Public Sans", sans-serif; color: #32363b; margin: 22px 0 0; max-width: 60ch; text-wrap: pretty; }

/* Kruimelpad; de sectie ertussen komt uit het menu-item "Kerkdiensten" en is
   geen pagina, dus geen link. */
.hs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font: 400 13px/1.5 "Public Sans", sans-serif; }
.hs-crumbs a, .hs-crumbs-sep, .hs-crumbs-sectie { color: #5e8ca6; }
.hs-crumbs a:hover { color: #1f6fa8; }
.hs-crumbs-nu { color: #12293d; }

.hs-page-body { padding: 64px 0 72px; }
.hs-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.hs-page-h2 { font: 600 26px/1.2 "Bitter", Georgia, serif; color: #12293d; margin: 0 0 26px; }
.hs-page-onder { font: 400 15px/1.7 "Public Sans", sans-serif; color: #32363b; margin: 24px 0 0; }
.hs-page-onder a { color: #1f6fa8; border-bottom: 1px solid #1f6fa8; }
.hs-page-onder a:hover { color: #12293d; border-color: #12293d; }

/* De lijst met liturgieen. Kolomverdeling in een variabele, zodat de kop en de
   rijen niet uit elkaar kunnen lopen. */
.hs-liturgie { --hs-lit-cols: 180px minmax(0, 1fr) 120px; }
.hs-liturgie-twee { --hs-lit-cols: 180px minmax(0, 1fr) 150px; }
.hs-liturgie-kop { display: grid; grid-template-columns: var(--hs-lit-cols); gap: 0 24px; padding-bottom: 12px; border-bottom: 2px solid #12293d; }
.hs-liturgie-kop span { font: 600 12px/1.4 "Public Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #12293d; }
.hs-liturgie-kop-actie { text-align: right; }
.hs-liturgie ul { list-style: none; margin: 0; padding: 0; }
.hs-liturgie li { display: grid; grid-template-columns: var(--hs-lit-cols); gap: 0 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid #d3e4ee; }
.hs-liturgie-datum { font: 500 15px/1.5 "Public Sans", sans-serif; color: #32363b; }
.hs-liturgie-type { display: block; font: 500 12px/1.4 "Public Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #85b3d1; margin-bottom: 6px; }
.hs-liturgie-titel { display: block; font: 600 19px/1.4 "Bitter", Georgia, serif; color: #12293d; }
.hs-liturgie-voorganger { display: block; font: 400 15px/1.6 "Public Sans", sans-serif; color: #32363b; margin-top: 4px; }

/* Actiekolom: rechts uitgelijnd, en op de beluisterpagina twee links onder
   elkaar (pdf en mp3). */
.hs-liturgie-actie { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hs-liturgie-actie a { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 "Public Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #1f6fa8; border-bottom: 1px solid #1f6fa8; padding-bottom: 4px; }
.hs-liturgie-actie a:hover { color: #12293d; border-bottom-color: #12293d; }
.hs-liturgie-actie svg { display: block; flex: none; }
.hs-liturgie-geen { font: 400 15px/1 "Public Sans", sans-serif; color: #5e8ca6; }

/* Paginering; 15 rijen per pagina, dus in de praktijk zelden zichtbaar. */
.hs-paginatie { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.hs-paginatie .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 11px 12px; border: 1px solid #d3e4ee; font: 600 12px/1 "Public Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #1f6fa8; }
.hs-paginatie .page-numbers:hover { border-color: #1f6fa8; color: #12293d; }
.hs-paginatie .page-numbers.current { background: #1f6fa8; border-color: #1f6fa8; color: #e6f1f7; }

/* Het preekarchief op jkerk.nl bereik je alleen met een SSO-POST, dus staat er
   een knop in de tekst waar een link logischer zou zijn. */
.hs-archief { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-archief form { display: inline; margin: 0; }
.hs-archief-btn { background: none; border: 0; border-bottom: 1px solid #1f6fa8; padding: 0; font: 600 15px/1.7 "Public Sans", sans-serif; color: #1f6fa8; cursor: pointer; }
.hs-archief-btn:hover { color: #12293d; border-bottom-color: #12293d; }

/* Contextkolom */
.hs-page-aside { display: flex; flex-direction: column; gap: 34px; }
.hs-aside-kaart { background: #e6f1f7; padding: 28px; }
.hs-aside-kaart .hs-label { margin-bottom: 14px; }
.hs-aside-kaart p { font: 400 15px/1.65 "Public Sans", sans-serif; color: #32363b; margin: 0 0 18px; }
.hs-aside-btn { display: inline-flex; align-items: center; background: #1f6fa8; color: #e6f1f7; font: 600 12px/1 "Public Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 15px 26px; }
.hs-aside-btn:hover { background: #12293d; color: #e6f1f7; }
.hs-aside-lijst .hs-label { display: block; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #d3e4ee; }
.hs-aside-lijst ul { list-style: none; margin: 0; padding: 0; }
.hs-aside-lijst li a { display: block; font: 400 16px/1.5 "Public Sans", sans-serif; color: #12293d; padding: 12px 0; border-bottom: 1px solid #d3e4ee; }
.hs-aside-lijst li a:hover { color: #1f6fa8; }

@media (max-width: 991px) {
  .hs-page .hs-page-head { padding: 32px 0 40px; }
  .hs-page h1 { font-size: 32px; }
  .hs-page-intro { font-size: 16px; }
  .hs-page-body { padding: 44px 0 56px; }
  .hs-page-grid { grid-template-columns: 1fr; gap: 40px; }
  .hs-page-h2 { font-size: 22px; }
  /* Twee kolommen: datum boven de dienst, de download ernaast. Een kopregel
     hoort dan niet meer bij de rijen, dus die vervalt en de lijst neemt de
     dikke bovenlijn over. */
  .hs-liturgie, .hs-liturgie-twee { --hs-lit-cols: minmax(0, 1fr) auto; }
  .hs-liturgie-kop { display: none; }
  .hs-liturgie ul { border-top: 2px solid #12293d; }
  .hs-liturgie-datum { grid-column: 1; grid-row: 1; margin-bottom: 6px; }
  .hs-liturgie-dienst { grid-column: 1; grid-row: 2; }
  .hs-liturgie-actie { grid-column: 2; grid-row: 1 / span 2; }
  .hs-page-aside { max-width: 460px; }
}

@media (max-width: 640px) {
  .hs-page h1 { font-size: 26px; max-width: none; }
  .hs-liturgie-titel { font-size: 17px; }
  .hs-liturgie li { padding: 16px 0; gap: 0 16px; }
  .hs-crumbs { gap: 6px; font-size: 12px; }
  .hs-aside-kaart { padding: 22px; }
}