/* Sky & Stay: one shared public color layer.
   ALL values are from Admin > Vormgeving > Kleuren & thema (theme_css_vars).
   Pink (or any other selected accent) is never replaced with a fixed color.
   No admin styling belongs here; public site modules only. */
:root {
  --public-primary:var(--theme-primary,var(--brand,#114a69));
  --public-accent:var(--theme-accent,var(--site-accent,#d9598a));
  --public-button:var(--theme-button-bg,var(--public-primary));
  --public-button-ink:var(--theme-readable-button,#fff);
  --public-background:var(--theme-body-bg,#f7fafc);
  --public-surface:var(--theme-card-bg,#fff);
  --public-section:var(--theme-section-bg,#f3f7f9);
  --public-border:var(--theme-border,#dce5e9);
  --public-ink:var(--theme-readable-card,var(--theme-text,#173347));
  --public-muted:var(--theme-readable-muted-card,var(--theme-muted,#5e7380));
  --public-heading:var(--theme-readable-card-heading,var(--theme-heading,#153547));
  --public-link:var(--theme-primary,#114a69);
  --public-focus:var(--theme-accent,#d9598a);
  --public-radius:14px;
}

/* Page backgrounds, common cards and secondary surfaces */
body.public-site, body.experience, body.school-exp, body.ski-site,
body:has(.portal-wrap), body:has(.inferno-booking), body:has(.calendar-wrap), body:has(.shop-wrap) {
 background:var(--public-background);
}
.public-site .site-features,.public-site .site-gallery,.public-site .site-contact,
.public-site .aside-card {border-color:var(--public-border)}
:is(.shop-panel,.shop-product,.shop-form,.book-panel,.calendar-card,.inferno-panel,.inferno-card,.inferno-person) {
 background:var(--public-surface);border-color:var(--public-border);
}
:is(.shop-panel,.book-panel,.calendar-card,.inferno-panel,.inferno-card,.inferno-person) :is(h1,h2,h3,h4) {color:var(--public-heading)}
:is(.shop-panel,.book-panel,.calendar-card,.inferno-panel) p {color:var(--public-ink)}
:is(.shop-muted,.book-small,.calendar-intro,.inferno-note) {color:var(--public-muted)}

/* Shared header/menu + dedicated Mijn Inferno action.
   Preserve the user's selected pink on active links and underlines. */
.site-header,.public-site .site-header {background:var(--theme-nav-bg)!important;border-bottom-color:var(--public-border)!important}
.site-header .site-menu>a:hover,.site-header .site-menu>a.chosen,
.site-header .site-menu>details[open]>summary,.site-header .public-nav-dropdown a:hover,
.site-header .site-languages a.chosen {color:var(--theme-readable-nav-active,var(--theme-menu-hover))!important}
.site-header .site-menu>a:after,.site-header .site-menu>a.chosen:after {
 background:var(--theme-menu-hover,var(--public-accent))!important;
}
.site-header .site-head-cta,.site-header .inferno-account-link {
 background:var(--public-button)!important;color:var(--public-button-ink)!important;
 border-color:var(--public-button)!important;
}
.site-header .site-head-cta:hover,.site-header .inferno-account-link:hover {filter:brightness(1.06)}
.site-header .site-menu.is-open,.site-header .public-nav-dropdown {background:var(--theme-nav-bg)!important}
.site-header .public-nav-dropdown {border-color:var(--public-border)!important}
.mini-top {background:var(--theme-footer-bg,var(--public-primary))!important;color:var(--theme-readable-footer,#fff)!important}
.mini-top a {color:inherit!important}

/* Central button styling across independent PHP modules.
   Using the admin-defined BUTTON color, not forcing pink when a different button color was selected. */
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap)
:is(.shop-button,.book-btn,.calendar-btn,.inferno-button):not(.secondary):not(.shop-outline):not(.outline) {
 background:var(--public-button)!important;
 color:var(--public-button-ink)!important;
 border-color:var(--public-button)!important;
}
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap)
:is(.shop-button,.book-btn,.calendar-btn,.inferno-button):not(.secondary):hover {filter:brightness(1.055)}
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap)
:is(.shop-outline,.inferno-button.secondary,.calendar-btn.secondary) {
 background:var(--public-section)!important;color:var(--public-heading)!important;
 border-color:var(--public-border)!important;
}
.public-site :is(.site-head-cta,.pill-button.primary,.pill-button.filled),
.public-site button.pill-button {background:var(--public-button)!important;color:var(--public-button-ink)!important}

/* Preserve pink as the detail/highlight color, taken from Accentkleur in admin. */
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap)
:is(.shop-category,.book-category,.calendar-tag,.book-tag,.portal-mini) {accent-color:var(--public-accent)}
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap) a:not(.shop-button):not(.book-btn):not(.calendar-btn):not(.inferno-button):hover {color:var(--public-primary)}
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap)
:is(input,select,textarea):focus-visible {
 outline:2px solid var(--public-focus)!important;outline-offset:1px!important;
 border-color:var(--public-focus)!important;
}
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap) :is(input[type=checkbox],input[type=radio]) {
 accent-color:var(--public-accent);
}
:is(.shop-wrap,.inferno-booking,.calendar-wrap,.portal-wrap)
:is(input,select,textarea) {color:var(--public-ink);background:var(--public-surface);border-color:var(--public-border)}
:is(.shop-price,.shop-total,.booking-price-total,.portal-stat strong) {color:var(--public-primary)}
:is(.shop-added-notice,.shop-delivery-fixed,.book-tag,.calendar-tag) {border-color:var(--public-accent)}

/* The portal previously overrode the theme with fixed blue/grey values. */
.portal-wrap {
 --portal-brand:var(--theme-primary,var(--brand,#114a69));
 --portal-accent:var(--theme-accent,var(--gold,#d9598a));
 --portal-surface:var(--theme-card-bg,#fff);
 --portal-muted:var(--theme-section-bg,#f4f7f8);
 --portal-line:var(--theme-border,#d8e4ea);
 --portal-text:var(--theme-readable-card,var(--theme-text,#153547));
 --portal-soft:var(--theme-readable-muted-card,var(--theme-muted,#6d7d88));
}
.portal-wrap .portal-hero {background:linear-gradient(125deg,var(--theme-primary,#114a69),color-mix(in srgb,var(--theme-primary,#114a69) 78%,var(--theme-accent,#d9598a)))!important}
.portal-wrap .portal-kicker:before {background:var(--public-accent)!important}
.portal-wrap .portal-auth-switch .inferno-button.secondary {border-color:var(--public-border)!important}
.portal-wrap .inferno-button:not(.secondary) {background:var(--public-button)!important;color:var(--public-button-ink)!important}
.portal-wrap .inferno-button.secondary {background:var(--public-section)!important;color:var(--public-heading)!important}
.portal-wrap :is(input,select,textarea):focus {border-color:var(--public-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--public-accent) 20%,transparent)!important}
.portal-wrap :is(input,select,textarea):-webkit-autofill { -webkit-box-shadow:0 0 0 1000px var(--public-surface) inset!important }

/* SkiService remains on its OWN palette, including its own accent setting. */
.ski-site .ski-header {background:var(--theme-nav-bg)!important;color:var(--theme-readable-nav)!important}
.ski-site .ski-button:not(.secondary),.ski-site .ski-contact button.ski-button {
 background:var(--public-button)!important;color:var(--public-button-ink)!important;
 border-color:var(--public-button)!important;
}
.ski-site .ski-kicker,.ski-site .ski-card-copy strong {color:var(--public-accent)}
.ski-site .ski-contact input:focus,.ski-site .ski-contact textarea:focus {outline:2px solid var(--public-accent);outline-offset:2px}

@media (prefers-reduced-motion: reduce) {
 .site-header .site-head-cta,.portal-wrap .inferno-button {transition:none!important}
}

/* Inferno palette correction v3.3.9
   The customer-selected accent for Paraglidingschool Inferno is #e23586.
   Scoped to Inferno only; ParaLodge and SkiService are unaffected. */
body.school-site,
body.school-exp,
body:has(.portal-wrap),
body:has(.inferno-booking),
body:has(.calendar-wrap),
body:has(.shop-wrap) {
  --brand:#143c64;
  --gold:#e23586;
  --site-accent:#e23586;
  --public-primary:#143c64;
  --public-accent:#e23586;
  --public-button:#e23586;
  --public-button-ink:#ffffff;
  --public-focus:#e23586;
  --public-link:#e23586;
  --portal-brand:#143c64;
  --portal-accent:#e23586;
  --theme-accent:#e23586;
  --theme-button-bg:#e23586;
  --theme-menu-hover:#e23586;
  --theme-readable-nav-active:#e23586;
}

/* Header calls-to-action, active links and toggles all share the pink accent. */
body.school-site .site-header .site-head-cta,
body.school-exp .site-header .site-head-cta,
body:has(.portal-wrap) .site-header .site-head-cta,
body:has(.inferno-booking) .site-header .site-head-cta,
body:has(.calendar-wrap) .site-header .site-head-cta,
body:has(.shop-wrap) .site-header .site-head-cta {
  background:#e23586!important;
  border-color:#e23586!important;
  color:#ffffff!important;
}
body.school-site .site-header .site-menu>a.chosen,
body.school-site .site-header .site-menu>a:hover,
body.school-site .site-header .site-languages a.chosen,
body.school-exp .site-header .site-menu>a.chosen,
body.school-exp .site-header .site-menu>a:hover,
body:has(.portal-wrap) .site-header .site-menu>a:hover,
body:has(.portal-wrap) .site-header .site-languages a.chosen {
  color:#e23586!important;
}
body.school-site .site-header .site-menu>a.chosen:after,
body.school-site .site-header .site-menu>a:hover:after,
body.school-exp .site-header .site-menu>a.chosen:after,
body:has(.portal-wrap) .site-header .site-menu>a.chosen:after {
  background:#e23586!important;
}

/* Main site buttons and secondary module actions. */
body.school-site :is(.pill-button.primary,.pill-button.filled,.site-hero-buttons .primary,button.pill-button),
body.school-exp :is(.inferno-button,.book-btn,.calendar-btn,.shop-button):not(.secondary):not(.outline),
body:has(.portal-wrap) .inferno-button:not(.secondary),
body:has(.inferno-booking) :is(.book-btn,.inferno-button):not(.secondary),
body:has(.calendar-wrap) :is(.calendar-btn,.inferno-button):not(.secondary),
body:has(.shop-wrap) :is(.shop-button,.inferno-button):not(.secondary):not(.shop-outline) {
  background:#e23586!important;
  border-color:#e23586!important;
  color:#ffffff!important;
}
body.school-site :is(input[type="checkbox"],input[type="radio"]),
body.school-exp :is(input[type="checkbox"],input[type="radio"]),
body:has(.portal-wrap) :is(input[type="checkbox"],input[type="radio"]),
body:has(.inferno-booking) :is(input[type="checkbox"],input[type="radio"]),
body:has(.calendar-wrap) :is(input[type="checkbox"],input[type="radio"]),
body:has(.shop-wrap) :is(input[type="checkbox"],input[type="radio"]) {
  accent-color:#e23586!important;
}
body:has(.portal-wrap) .portal-kicker:before {background:#e23586!important}
body:has(.portal-wrap) .portal-stat strong {color:#e23586!important}

/* Consistent form focus and pink interactive links on Inferno modules. */
body.school-site :is(input,select,textarea):focus-visible,
body.school-exp :is(input,select,textarea):focus-visible,
body:has(.portal-wrap) :is(input,select,textarea):focus-visible,
body:has(.inferno-booking) :is(input,select,textarea):focus-visible,
body:has(.calendar-wrap) :is(input,select,textarea):focus-visible,
body:has(.shop-wrap) :is(input,select,textarea):focus-visible {
  outline-color:#e23586!important;
  border-color:#e23586!important;
}

/* ParaLodge colour consistency v3.3.11.
   Scoped ONLY to ParaLodge. All palette values are supplied by
   Admin > Vormgeving > Kleuren & thema through theme_css_vars('lodge').
   Inferno's pink #e23586 is intentionally not touched. */
body.lodge-site,
body.lodge-exp {
  --public-primary:var(--theme-primary,#264e33);
  --public-accent:var(--theme-accent,#dbc08b);
  --public-button:var(--theme-button-bg,#315c35);
  --public-button-ink:var(--theme-readable-button,#fff);
  --public-background:var(--theme-body-bg,#faf8f2);
  --public-section:var(--theme-section-bg,#f6f3eb);
  --public-surface:var(--theme-card-bg,#fff);
  --public-heading:var(--theme-readable-body-heading,#183831);
  --public-ink:var(--theme-readable-body,#293e38);
  --public-muted:var(--theme-readable-muted-body,#6d7c75);
  --public-border:var(--theme-border,#e3e7df);
  --public-focus:var(--theme-menu-hover,var(--public-accent));
  accent-color:var(--public-accent);
  color:var(--public-ink);
  background:var(--public-background);
}

/* Header and navigational states: use the same palette in every lodge view. */
body.lodge-site .site-header,
body.lodge-exp .site-header {
  background:var(--theme-nav-bg,#fff)!important;
  color:var(--theme-readable-nav,#314940)!important;
  border-bottom-color:var(--public-border)!important;
}
body.lodge-site .site-header :is(.site-menu>a,.public-nav-group>summary,.site-languages a),
body.lodge-exp .site-header :is(.site-menu>a,.public-nav-group>summary,.site-languages a) {
  color:var(--theme-readable-nav,#314940);
}
body.lodge-site .site-header :is(.site-menu>a:hover,.site-menu>a.chosen,.public-nav-group>summary:hover,.site-languages a.chosen),
body.lodge-exp .site-header :is(.site-menu>a:hover,.site-menu>a.chosen,.public-nav-group>summary:hover,.site-languages a.chosen) {
  color:var(--theme-readable-nav-active,var(--theme-menu-hover,#c4a46b))!important;
}
body.lodge-site .site-header .site-menu>a::after,
body.lodge-exp .site-header .site-menu>a::after {
  background:var(--theme-menu-hover,var(--public-accent))!important;
}
body.lodge-site .site-header :is(.site-menu.is-open,.public-nav-dropdown),
body.lodge-exp .site-header :is(.site-menu.is-open,.public-nav-dropdown) {
  background:var(--theme-nav-bg,#fff)!important;
  border-color:var(--public-border)!important;
}

/* Primary actions on home, lodging, booking/availability and contact pages. */
body.lodge-site :is(.site-head-cta,.pill-button.primary,.pill-button.filled,.lodge-search button,.lodge-search-form button,.site-contact-form button),
body.lodge-exp :is(.site-head-cta,.pill-button.primary,.pill-button.filled,.lodge-search button,.lodge-search-form button) {
  background:var(--public-button)!important;
  border-color:var(--public-button)!important;
  color:var(--public-button-ink)!important;
}
body.lodge-site :is(.pill-button.outline,.outline-btn),
body.lodge-exp :is(.pill-button.outline,.outline-btn) {
  border-color:var(--theme-button-outline,var(--public-accent))!important;
}
body.lodge-site :is(.pill-button,.site-head-cta,.site-feature-card),
body.lodge-exp :is(.pill-button,.site-head-cta) {transition:filter .15s ease,transform .15s ease}
body.lodge-site :is(.pill-button.primary,.pill-button.filled,.site-head-cta):hover,
body.lodge-exp :is(.pill-button.primary,.pill-button.filled,.site-head-cta):hover {filter:brightness(1.08)}

/* Editorial, card, booking and contact elements. */
body.lodge-site :is(.site-features,.site-gallery,.site-contact,.interior-main,.lodge-booking-highlight),
body.lodge-exp :is(.lodge-availability,.apartments-wrap) {color:var(--public-ink)}
body.lodge-site :is(.site-feature-card,.aside-card,.lodge-booking-panel,.site-contact-form),
body.lodge-exp :is(.availability-card,.apartment-card,.guest-panel) {
  border-color:var(--public-border);
}
body.lodge-site :is(.site-feature-card,.aside-card,.site-contact-form) {
  background:var(--public-surface);
}
body.lodge-site :is(.feature-info h3,.interior-main h2,.site-contact h2,.lodge-booking-panel h2),
body.lodge-exp :is(.availability-card h2,.apartment-card h2) {color:var(--public-heading)}
body.lodge-site :is(.micro-label,.feature-number,.kicker-line,.text-arrow span,.round-arrow),
body.lodge-exp :is(.micro-label,.calendar-tag) {accent-color:var(--public-accent)}
body.lodge-site :is(.site-contact-form input,.site-contact-form textarea,.lodge-search input,.lodge-search select),
body.lodge-exp :is(input,select,textarea) {
  color:var(--public-ink);
  border-color:var(--public-border);
  background:var(--public-surface);
}
body.lodge-site :is(input,select,textarea):focus-visible,
body.lodge-exp :is(input,select,textarea):focus-visible {
  outline:2px solid var(--public-focus)!important;
  outline-offset:2px;
  border-color:var(--public-focus)!important;
}
body.lodge-site :is(input[type=checkbox],input[type=radio]),
body.lodge-exp :is(input[type=checkbox],input[type=radio]) {accent-color:var(--public-accent)}

/* Unified bottom bar and footer, including independent PHP pages. */
body.lodge-site .mini-top,
body.lodge-exp .mini-top {
  background:var(--theme-footer-bg,#102f2b)!important;
  color:var(--theme-readable-footer,#fff)!important;
}
body.lodge-site .new-footer,
body.lodge-exp .new-footer {
  background:var(--theme-footer-bg,#102f2b)!important;
  color:var(--theme-readable-footer,#fff)!important;
}
body.lodge-site .new-footer a,
body.lodge-exp .new-footer a {color:inherit}

@media (prefers-reduced-motion:reduce) {
  body.lodge-site :is(.pill-button,.site-head-cta,.site-feature-card),
  body.lodge-exp :is(.pill-button,.site-head-cta) {transition:none}
}