/* ===== Canelobre — navigatiebalk =====
   Twee rijen die vast bovenaan staan. Boven een sfeerfoto zweeft de balk
   doorzichtig mee; zodra er gescrold wordt gaat hij dicht. Blocksy heeft
   daar in de gratis versie geen instelling voor, dus het staat hier.

   Aanhaakpunten zijn Blocksy's eigen rijen: [data-row="top"] en
   [data-row="middle"]. */

/* Blocksy zet zelf position:sticky met een id-selector. Sticky houdt de balk
   in de tekstflow, waardoor de sfeerfoto eronder begint in plaats van erachter
   — en het doorzichtige donker over de pagina valt in plaats van over de foto. */
.ct-header#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

/* --- Bovenste rij: telefoon en plaats links, links rechts --- */
.cnl-toprij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}
.cnl-toprij-links,
.cnl-toprij-rechts { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cnl-toprij-rechts { flex: none; }
.cnl-toprij-ruit {
  width: 5px; height: 5px; flex: none;
  background: #A8935C; transform: rotate(45deg); opacity: .75;
}
.cnl-toprij-tel {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: .12em; color: #A8935C; text-decoration: none; white-space: nowrap;
  transition: color .25s;
}
.cnl-toprij-tel:hover { color: #B96A4B; }
.cnl-toprij-plaats,
.cnl-toprij-link {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .26em; color: inherit;
  white-space: nowrap; text-decoration: none;
}
.cnl-toprij-plaats { opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.cnl-toprij-link { transition: color .25s; }
.cnl-toprij-link:hover { color: #A8935C; }

/* --- Dichte stand: effen achtergrond, donkere letters --- */
.ct-header#header [data-row="top"] {
  color: #5A463E;
  background: #FBF6EA;
  border-bottom: 1px solid rgba(90, 70, 62, .14);
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}
.ct-header#header [data-row="middle"] {
  background: #FBF6EA;
  border-bottom: 1px solid rgba(90, 70, 62, .18);
  transition: background 300ms ease, border-color 300ms ease;
}

/* --- Zwevende stand: boven een sfeerfoto, nog niet gescrold --- */
body.cnl-nav-zwevend .ct-header#header [data-row="top"] {
  color: rgba(244, 236, 216, .85);
  background: rgba(31, 22, 19, .52);
  border-bottom-color: rgba(244, 236, 216, .14);
}
body.cnl-nav-zwevend .ct-header#header [data-row="middle"] {
  background: linear-gradient(180deg, rgba(31, 22, 19, .42) 0%, rgba(31, 22, 19, .12) 100%);
  border-bottom-color: rgba(244, 236, 216, .16);
  backdrop-filter: blur(2px);
}
body.cnl-nav-zwevend .ct-header .ct-menu-link {
  color: #F4ECD8;
}
body.cnl-nav-zwevend .ct-header .ct-menu-link:hover,
body.cnl-nav-zwevend .ct-header .current-menu-item > .ct-menu-link {
  color: #C6B785;
}

/* --- Logo wisselt mee: donker op licht, licht op de foto.
   Het lichte bestand komt als achtergrond via een inline regel uit helpers.php,
   omdat het adres uit de mediabibliotheek komt. --- */
.ct-header .site-logo-container { transition: background 300ms ease; }

/* --- Pagina's zonder sfeerfoto beginnen onder de balk --- */
body.cnl-nav-kopruimte .site-main { padding-top: 112px; }

@media (max-width: 860px) {
  .cnl-toprij-plaats { display: none; }
  body.cnl-nav-kopruimte .site-main { padding-top: 73px; }   /* precies de hoogte van de mobiele balk */
}

/* --- Rijhoogtes: Blocksy zet die in eigen gegenereerde CSS, die niet meebeweegt
   met de themainstelling. De randlijn van 1px telt bij de totale hoogte op:
   38 + 1 = 39 boven, 72 + 1 = 73 onder, samen 112 zoals in het ontwerp. --- */
/* Blocksy zet --height met een id-selector; deze weegt net zwaarder. */
.ct-header#header [data-row="top"] { --height: 38px; }
.ct-header#header [data-row="middle"] { --height: 72px; }
/* Blocksy tekent zelf ook een lijn onder de middelste rij; die zou bij de onze
   optellen. De rij houdt de lijn, de binnencontainer niet. */
.ct-header#header [data-row] .ct-container-fluid { border-bottom: 0; }

/* Blocksy wikkelt de tekst in de bovenste rij in .entry-content en zet daar de
   gewone tekstkleur op. Daardoor erven de items niet de kleur van de rij, en
   blijven ze donker boven de foto. */
.ct-header#header [data-row="top"] .ct-header-text,
.ct-header#header [data-row="top"] .entry-content { color: inherit; }

/* ===== Taalkiezer rechtsboven =====
   Alleen vormgeving: de site heeft één taal, dus kiezen verandert het
   vlaggetje en de code maar vertaalt niets. */
.cnl-taal { position: relative; }
.cnl-taal-knop {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: none; padding: 2px 0; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .26em; color: inherit;
  transition: color .25s;
}
.cnl-taal-knop:hover { color: #A8935C; }
.cnl-taal-vlag {
  width: 19px; height: 13px; flex: none;
  border: 1px solid rgba(120, 100, 90, .35);
}
.cnl-taal-pijl { font-size: 9px; color: #A8935C; }

.cnl-taal-lijst {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  margin: 0; padding: 6px 0; list-style: none; min-width: 168px;
  background: #FBF6EA; border: 1px solid rgba(90, 70, 62, .22);
  border-radius: 4px; box-shadow: 0 16px 36px rgba(31, 22, 19, .22);
  display: flex; flex-direction: column;
}
.cnl-taal-lijst[hidden] { display: none; }
.cnl-taal-optie {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: transparent; border: none; cursor: pointer;
  padding: 10px 16px; text-align: left;
  font-family: 'Lora', Georgia, serif; font-size: 14.5px; color: #5A463E;
  transition: background .2s;
}
.cnl-taal-optie:hover { background: #F4ECD8; }
.cnl-taal-optie.is-actief { color: #392722; }
.cnl-taal-optie .cnl-taal-vlag { border-color: rgba(90, 70, 62, .28); }
.cnl-taal-naam { display: flex; align-items: center; gap: 10px; }
.cnl-taal-code {
  font-family: 'Oswald', sans-serif; font-size: 10px;
  letter-spacing: .18em; color: #A8935C;
}

/* ===== Mobiele navigatiebalk =====
   Het tekstonderdeel van Blocksy staat zowel in de brede bovenrij als in de
   mobiele middenrij, met dezelfde HTML erin. Blocksy wikkelt elke rij in een
   [data-device], dus daarmee tonen we per apparaat de juiste balk. */
[data-device="desktop"] .cnl-mobbar { display: none; }
[data-device="mobile"] .cnl-toprij { display: none; }

[data-device="mobile"] .ct-header-text { width: auto; }
[data-device="mobile"] .ct-header-text .entry-content { display: flex; }

.cnl-mobbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* De boekknop: dezelfde kleur als op de brede versie, maar korter van tekst. */
.cnl-mobbar-boek {
  display: inline-flex; align-items: center; height: 36px; padding: 0 13px;
  background: #B96A4B; color: #FBF6EA; border-radius: 3px; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  transition: background .25s;
}
.cnl-mobbar-boek:hover,
.cnl-mobbar-boek:focus-visible { background: #A15A3E; color: #FBF6EA; }

/* Telefoon: alleen het hoorntje, groot genoeg om met een duim te raken. */
.cnl-mobbar-tel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid rgba(168, 147, 92, .55); border-radius: 3px;
  color: #A8935C; text-decoration: none;
  transition: color .25s, border-color .25s, background .25s;
}
.cnl-mobbar-tel:hover,
.cnl-mobbar-tel:focus-visible { color: #FBF6EA; background: #A8935C; border-color: #A8935C; }

/* Boven een sfeerfoto staan de knoppen op donker; dan lichter randje. */
body.cnl-nav-zwevend .cnl-mobbar-tel { color: #E7D9B8; border-color: rgba(231, 217, 184, .5); }

/* De taalkiezer in de mobiele balk: alleen vlag en pijltje, de code eraf. */
.cnl-taal--mobiel .cnl-taal-knop { gap: 5px; padding: 0 4px; height: 36px; }
.cnl-taal--mobiel .cnl-taal-code-knop { display: none; }
.cnl-taal--mobiel .cnl-taal-vlag { width: 22px; height: 15px; }
body.cnl-nav-zwevend .cnl-taal--mobiel .cnl-taal-knop { color: #F4ECD8; }
/* De lijst zou anders buiten het scherm vallen. */
.cnl-taal--mobiel .cnl-taal-lijst { right: -8px; top: calc(100% + 10px); }

/* ===== Het menu-icoon: met het woord MENU erbij en beter zichtbaar ===== */
.ct-header [data-device="mobile"] .ct-header-trigger,
[data-device="mobile"] .ct-header-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 4px 0 8px;
  color: #392722;
}
[data-device="mobile"] .ct-header-trigger::after {
  content: "MENU";
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .12em; color: inherit;
}
/* Blocksy tekent de streepjes met currentColor en een eigen dikte. */
[data-device="mobile"] .ct-header-trigger .ct-icon,
[data-device="mobile"] .ct-header-trigger svg { color: inherit; fill: currentColor; }
[data-device="mobile"] .ct-header-trigger { --icon-size: 20px; --theme-icon-size: 20px; }

/* Boven een sfeerfoto: crème, met een zachte schaduw zodat het altijd leesbaar
   blijft — ook boven een lichte lucht. */
body.cnl-nav-zwevend [data-device="mobile"] .ct-header-trigger {
  color: #F4ECD8;
  filter: drop-shadow(0 1px 2px rgba(31, 22, 19, .45));
}

/* --- Ruimte maken op smalle schermen ---
   Vijf onderdelen naast elkaar passen alleen als het logo kleiner wordt en de
   knoppen strak staan. Het logo is een woordmerk en dus breed; hoogte terug
   van 48 naar 30 scheelt ruim vijftig pixels breedte. */
[data-device="mobile"] .site-logo-container img { max-height: 30px; width: auto; }
[data-device="mobile"] [data-row="middle"] .ct-container-fluid { padding-left: 16px; padding-right: 16px; }
[data-device="mobile"] [data-column="end"] > [data-items] { gap: 6px; }

.cnl-mobbar { gap: 6px; }
.cnl-mobbar-boek { padding: 0 11px; font-size: 11px; letter-spacing: .08em; }
.cnl-taal--mobiel .cnl-taal-pijl { display: none; }
.cnl-taal--mobiel .cnl-taal-knop { padding: 0 2px; }
[data-device="mobile"] .ct-header-trigger::after { letter-spacing: .08em; }
[data-device="mobile"] .ct-header-trigger { padding: 0 0 0 6px; gap: 6px; }

/* Blocksy verdeelt de drie kolommen in gelijke delen; het logo past dan niet
   in zijn kolom en schuift over de knoppen heen. Logo en menu krijgen hun
   eigen breedte, de knoppen vullen de rest en gaan tegen het menu aan staan. */
[data-device="mobile"] [data-row="middle"] .ct-container-fluid {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
[data-device="mobile"] [data-column="middle"] { justify-content: flex-end; }
[data-device="mobile"] [data-column="middle"] > [data-items] { justify-content: flex-end; }
.cnl-mobbar { justify-content: flex-end; margin-right: 8px; }

/* Blocksy zet de kolombreedtes met een id-selector; deze weegt zwaarder.
   En op 360 pixels moet alles nog net passen, dus logo en knoppen een maatje
   kleiner. */
.ct-header#header [data-device="mobile"] [data-row="middle"] .ct-container-fluid {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.ct-header#header [data-device="mobile"] [data-row="middle"] .ct-container-fluid {
  padding-left: 14px; padding-right: 14px;
}
[data-device="mobile"] .site-logo-container img { max-height: 26px; }
.cnl-mobbar { margin-right: 6px; gap: 5px; }
.cnl-mobbar-boek { padding: 0 9px; font-size: 10.5px; letter-spacing: .06em; }
.cnl-mobbar-tel { width: 34px; height: 34px; }
.cnl-taal--mobiel .cnl-taal-vlag { width: 21px; height: 14px; }
[data-device="mobile"] .ct-header-trigger::after { font-size: 11px; letter-spacing: .06em; }
[data-device="mobile"] .ct-header-trigger { --icon-size: 18px; --theme-icon-size: 18px; gap: 5px; }
/* Op 360 pixels raakt het logo net de boekknop; een kleine tussenruimte. */
.cnl-mobbar { margin-left: 10px; }

/* Beide balken staan in hetzelfde tekstonderdeel. WordPress zet daar zijn
   blokafstand tussen, ook al is er maar één zichtbaar — dat maakte de brede
   bovenbalk 3 pixels te hoog. */
.ct-header .ct-header-text .entry-content > .cnl-toprij,
.ct-header .ct-header-text .entry-content > .cnl-mobbar { margin-block: 0; }

/* =========================================================================
   Mobiele balk, tweede indeling
   links de taalkiezer — midden het logo — rechts boeken en het menu-icoon.
   Alles hieronder overschrijft bewust wat er hierboven voor de vorige
   indeling stond.
   ========================================================================= */

/* Drie gelijke buitenkolommen houden het logo werkelijk in het midden. */
.ct-header#header [data-device="mobile"] [data-row="middle"] .ct-container-fluid {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-left: 14px; padding-right: 14px;
}
[data-device="mobile"] [data-column="start"],
[data-device="mobile"] [data-column="start"] > [data-items] { justify-content: flex-start; }
[data-device="mobile"] [data-column="middle"],
[data-device="mobile"] [data-column="middle"] > [data-items] { justify-content: center; }
[data-device="mobile"] [data-column="end"],
[data-device="mobile"] [data-column="end"] > [data-items] { justify-content: flex-end; gap: 8px; }

[data-device="mobile"] .site-logo-container img { max-height: 34px; }
.cnl-mobbar { margin: 0; gap: 0; }

/* Het menu-icoon: alleen de drie streepjes, zonder woord. */
[data-device="mobile"] .ct-header-trigger::after { content: none; }
[data-device="mobile"] .ct-header-trigger {
  padding: 0; gap: 0; width: 34px; height: 34px;
  justify-content: center;
  --icon-size: 21px; --theme-icon-size: 21px;
}

/* De boekknop van het thema. Op mobiel is de tekst korter: de echte tekst
   blijft in de HTML staan voor schermlezers, maar wordt visueel vervangen.
   Blocksy zet zijn knopmaten met eigen selectors, dus dit weegt zwaarder. */
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button {
  height: 34px; padding: 0 12px; border-radius: 3px;
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0; line-height: 34px;
}
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button::after {
  content: "Boek kamer";
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em;
}
/* =========================================================================
   Het uitklapmenu
   ========================================================================= */
#offcanvas.ct-panel { --panel-bg: #1F1613; }
#offcanvas .ct-panel-inner {
  background: linear-gradient(180deg, #241A16 0%, #1B1310 100%);
  color: #F4ECD8;
}
#offcanvas .ct-panel-actions { padding: 18px 20px 0; justify-content: flex-end; }
#offcanvas .ct-toggle-close { color: #E7D9B8; opacity: .9; }
#offcanvas .ct-toggle-close:hover { color: #C6B785; }
#offcanvas .ct-toggle-close .ct-icon { width: 15px; height: 15px; fill: currentColor; }

#offcanvas .ct-panel-content-inner { padding: 8px 30px 40px; }

#offcanvas .mobile-menu ul { margin: 0; padding: 0; list-style: none; }
#offcanvas .mobile-menu li { border-bottom: 1px solid rgba(168, 147, 92, .22); }
#offcanvas .mobile-menu li:last-child { border-bottom: 0; }
#offcanvas .mobile-menu .ct-menu-link {
  display: block; padding: 19px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400; font-size: 27px; line-height: 1.2;
  color: #F4ECD8; text-decoration: none; text-transform: none; letter-spacing: 0;
  transition: color .25s;
}
#offcanvas .mobile-menu .ct-menu-link:hover,
#offcanvas .mobile-menu .current-menu-item > .ct-menu-link { color: #C6B785; }
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile { color: #A8935C; }

/* De onderkant: bellen, mailen en de twee losse pagina's die op mobiel
   anders nergens meer te vinden zijn. */
.cnl-paneelvoet { margin-top: 34px; }
.cnl-paneelvoet-lijn {
  height: 1px; margin-bottom: 26px;
  background: linear-gradient(90deg, rgba(168,147,92,.5) 0%, rgba(168,147,92,0) 100%);
}
.cnl-paneelvoet-tel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 15px;
  letter-spacing: .1em; color: #C6B785; text-decoration: none;
}
.cnl-paneelvoet-plaats {
  margin: 10px 0 0;
  font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 14px;
  color: rgba(244, 236, 216, .6);
}
.cnl-paneelvoet-links { display: flex; gap: 22px; margin-top: 24px; }
.cnl-paneelvoet-links a {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .22em;
  color: rgba(244, 236, 216, .75); text-decoration: none;
  transition: color .25s;
}
.cnl-paneelvoet-links a:hover { color: #C6B785; }

/* Blocksy houdt op mobiel 23 pixels aan weerszijden vrij bovenop de padding.
   Op een telefoon is dat ruimte die de knoppen nodig hebben. */
.ct-header#header [data-device="mobile"] [data-row="middle"] .ct-container-fluid {
  width: 100%; max-width: none; margin: 0;
}
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button { padding: 0 10px; }
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button::after { font-size: 10px; }
/* Nog een paar pixels: logo iets kleiner en de knop strakker, zodat het ook
   op een scherm van 360 pixels past. */
[data-device="mobile"] .site-logo-container img { max-height: 30px; }
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button { padding: 0 9px; }
[data-device="mobile"] [data-column="end"] > [data-items] { gap: 7px; }
/* Op 360 pixels raakte de knop nog net het logo; iets compacter houdt het
   logo precies in het midden en de knop toch leesbaar. */
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button { padding: 0 8px; }
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button::after { font-size: 9.5px; letter-spacing: .06em; }
/* Blocksy zet de kolommen zelf op grid; dan werkt uitlijnen anders en schuiven
   de knoppen naar links buiten hun kolom. Flexbox houdt ze netjes rechts. */
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column],
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column] > [data-items] {
  display: flex; align-items: center; gap: 7px;
}
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="start"],
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="start"] > [data-items] { justify-content: flex-start; }
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="middle"],
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="middle"] > [data-items] { justify-content: center; }
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="end"],
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="end"] > [data-items] { justify-content: flex-end; }
/* Blocksy geeft de knop en het menu-icoon elk 10 pixels eigen marge; samen met
   de tussenruimte werd dat te veel voor een scherm van 360 pixels. */
.ct-header#header [data-device="mobile"] .ct-header-cta,
.ct-header#header [data-device="mobile"] .ct-header-trigger { margin: 0; }
/* "Boeken" in plaats van "Boek kamer": dat past wel op elke telefoon zonder
   dat de letters onleesbaar klein worden. De echte knoptekst blijft
   "Boek uw verblijf" voor schermlezers en zoekmachines. */
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button { padding: 0 11px; }
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button::after {
  content: "Boeken"; font-size: 10.5px; letter-spacing: .08em;
}
/* Op een telefoon is een half zichtbare pagina naast het menu onrustig;
   het paneel vult het hele scherm. */
#offcanvas.ct-panel { --side-panel-width: 100%; }
#offcanvas .ct-panel-inner { width: 100%; max-width: none; }

/* =========================================================================
   Mobiele balk, indeling zoals Hotel Marktstad
   links het logo met de boekknop ernaast, rechts de taalkiezer en het menu.
   ========================================================================= */
.ct-header#header [data-device="mobile"] [data-row="middle"] .ct-container-fluid {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="start"],
.ct-header#header [data-device="mobile"] [data-row="middle"] [data-column="start"] > [data-items] {
  justify-content: flex-start; gap: 10px;
}
/* Nu er ruimte links is, past de volledige knoptekst er weer op. */
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button { padding: 0 12px; }
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button::after {
  content: "Boek uw verblijf"; font-size: 10.5px; letter-spacing: .07em;
}
/* Het tekstonderdeel staat op "volle breedte" voor de brede bovenbalk; in de
   mobiele balk moet het juist net zo breed zijn als het vlaggetje zelf. */
.ct-header#header [data-device="mobile"] .ct-header-text { width: auto; flex: none; }
.ct-header#header [data-device="mobile"] .ct-header-text .entry-content { display: flex; justify-content: flex-end; }

/* --- Het logo bleef niet op zijn plek ---
   In de zwevende stand komt het lichte logo als achtergrond op de container,
   verticaal gecentreerd. De donkere versie is een img die bovenin die 48 pixels
   hoge container hangt. Daardoor sprong het logo bij het scrollen omhoog.
   De container even hoog maken als het logo zelf haalt het verschil weg. */
[data-device="mobile"] .site-logo-container {
  height: 30px; display: flex; align-items: center;
}

/* --- De knop was te breed ---
   De echte knoptekst staat op font-size 0, maar de letterafstand van het thema
   telde per letter nog wel mee: zestien letters maal 1,56 pixel is 25 pixels
   lege ruimte links. De afstand hoort alleen bij de zichtbare tekst. */
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button {
  letter-spacing: 0;
  border-radius: 0;
}
.ct-header#header [data-device="mobile"] .ct-header-cta a.ct-button::after {
  letter-spacing: .07em;
}

/* --- Onderkant van het uitklapmenu ---
   Contact en Huisregels staan nu als gewone menu-items in de lijst, dus de
   losse linkjes hier zijn vervallen. Ervoor in de plaats: Facebook en
   Instagram als knoppen. */
.cnl-paneelvoet-links { display: none; }

.cnl-paneelvoet-sociaal { display: flex; gap: 12px; margin-top: 26px; }
.cnl-sociaal-knop {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 16px;
  border: 1px solid rgba(168, 147, 92, .45); border-radius: 3px;
  color: #E7D9B8; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .16em;
  transition: color .25s, border-color .25s, background .25s;
}
.cnl-sociaal-knop svg { flex: none; }
.cnl-sociaal-knop:hover,
.cnl-sociaal-knop:focus-visible {
  color: #1F1613; background: #C6B785; border-color: #C6B785;
}

/* Zeven menu-items in plaats van vijf: iets krapper zodat alles zonder
   scrollen op een telefoonscherm past. */
#offcanvas .mobile-menu .ct-menu-link { padding: 15px 0; font-size: 25px; }

/* =========================================================================
   Voettekst op telefoon en tablet
   Blocksy houdt de vijf kolommen ook op een telefoon naast elkaar staan.
   Die worden dan 26 pixels breed en de tekst valt per letter af. Hieronder
   klapt hij om: logo bovenaan, de twee menu's naast elkaar, en de blokken
   met tijden en contactgegevens over de volle breedte.
   ========================================================================= */
@media (max-width: 900px) {
  #footer [data-row="middle"] .ct-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px 22px;
    padding-left: 24px; padding-right: 24px;
  }
  #footer [data-column="widget-area-1"],
  #footer [data-column="widget-area-4"],
  #footer [data-column="widget-area-5"] { grid-column: 1 / -1; }

  #footer .ct-widget { margin: 0; }
  #footer .widget-title {
    font-size: 12px; letter-spacing: .22em; margin-bottom: 16px;
  }
  #footer .widget-menu li { line-height: 1.5; }
  #footer .widget-menu li + li { margin-top: 11px; }

  /* De sociale links stonden in een kolom van 26 pixels en staken daardoor
     buiten het scherm; met ruimte eromheen valt alles weer binnen. */
  #footer [data-column="widget-area-5"] .textwidget > div { gap: 12px; }
  #footer [data-column="widget-area-5"] a { word-break: break-word; }

  #footer [data-row="bottom"] .ct-container { padding-left: 24px; padding-right: 24px; }
  #footer .ct-footer-copyright p { font-size: 12px; line-height: 1.7; text-align: center; }
}

/* Op de smalste telefoons past ook een menu van twee kolommen niet meer
   fatsoenlijk; dan staat alles onder elkaar. */
@media (max-width: 380px) {
  #footer [data-row="middle"] .ct-container { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Voettekst: de kopjes boven de kolommen ---
   Elf pixels is voor een kop te klein om nog als kop te lezen, op elk scherm. */
#footer .widget-title { font-size: 12.5px; letter-spacing: .2em; }

/* --- Logo bovenaan het uitklapmenu --- */
#offcanvas .ct-panel-actions { justify-content: space-between; align-items: center; }
.cnl-paneellogo { display: inline-flex; align-items: center; text-decoration: none; }
.cnl-paneellogo img { height: 30px; width: auto; display: block; }
a.cnl-paneellogo { transition: opacity .25s; }
a.cnl-paneellogo:hover, a.cnl-paneellogo:focus-visible { opacity: .75; }