/* SEO / semantic-markup helpers. Loaded after the Nicepage page CSS. */

/* Former <h1> elements that are decorative (numbers, slogans): now <div class="u-h1x">.
   Rules mirror the old h1 tag styling from nicepage.css so the design is unchanged. */
:where(div.u-h1x) { font-family: Roboto, sans-serif; padding: 0; }
div:where(.u-h1x):not(.u-title) {
  font-size: 2.25rem; line-height: 1.2; margin-top: 20px; margin-bottom: 20px;
  letter-spacing: 1px; font-weight: 700; color: #111111;
}
div.u-title:where(.u-h1x) {
  font-weight: 400; font-size: 4.5rem; line-height: 1.1; margin-top: 20px; margin-bottom: 20px;
}
.u-image:not(.u-shading) > .u-container-layout > div:where(.u-h1x):not(.u-title) { color: #111111; }

/* Real headings inside long text blocks (were bold spans). Visually close to the old bold lines. */
.u-body h2.seo-h, .u-body h3.seo-h {
  font-family: inherit; font-size: inherit; font-weight: 700; line-height: inherit; letter-spacing: inherit;
  text-transform: none; color: inherit; padding: 0; margin: 1.6em 0 .5em;
}
.u-body h2.seo-h.seo-h-lg { font-size: 1.5rem; line-height: 1.25; margin-top: 1.4em; }
.seo-prose > :first-child, .seo-flow > :first-child { margin-top: 0; }
.seo-prose p { margin: 0 0 1em; }
.seo-prose ul.seo-ticks { list-style: none; margin: 0 0 1em; padding: 0; }
.seo-prose ul.seo-ticks li { margin: 0; }
.seo-prose ul.seo-ticks li::before { content: "\2714\00a0"; }
.seo-prose a, .seo-faq a, .seo-related a, .seo-breadcrumb a { color: inherit; text-decoration: underline; }
.seo-prose a:hover, .seo-faq a:hover, .seo-related a:hover, .seo-breadcrumb a:hover { text-decoration: none; }

/* Breadcrumb */
.seo-breadcrumb { background: #f4f4f4; color: #444; font: 400 .8125rem/1.4 'Open Sans', sans-serif; padding: 8px 20px; }
.seo-breadcrumb ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1140px; display: flex; flex-wrap: wrap; }
.seo-breadcrumb li + li::before { content: "\203A"; margin: 0 .6em; color: #888; }

/* FAQ + related links */
.seo-faq, .seo-related { background: #fff; color: #222; font-family: 'Open Sans', sans-serif; }
.seo-faq { padding: 40px 20px 8px; }
.seo-related { background: #f4f4f4; padding: 32px 20px 36px; }
.seo-wrap { max-width: 900px; margin: 0 auto; }
.seo-faq h2, .seo-related h2 { font: 700 1.5rem/1.25 Roboto, sans-serif; margin: 0 0 16px; color: #111; letter-spacing: 0; }
.seo-faq h3 { font: 700 1.0625rem/1.35 Roboto, sans-serif; margin: 22px 0 6px; color: #111; letter-spacing: 0; }
.seo-faq p { font-size: 1rem; line-height: 1.6; margin: 0; }
.seo-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 28px; }
.seo-related li { font-size: .9375rem; line-height: 1.5; }
.seo-related li span { color: #555; }
.seo-nap { margin: 22px 0 0; font-size: .875rem; color: #444; }
@media (max-width: 575px) { .seo-faq h2, .seo-related h2 { font-size: 1.25rem; } }

/* Home hero: the H1 now starts with the main keyword; keep it on screen on phones */
.u-body h1.u-text-1 > span[style*="3rem"] { font-size: clamp(1.75rem, 8.2vw, 3rem) !important; overflow-wrap: normal; word-break: normal; }
.seo-prose p, .seo-prose ul, .seo-prose li { font-size: inherit; line-height: inherit; }

/* Menu thumbnails in dropdown items */
.menu-thumb { display: inline-block; vertical-align: middle; width: 56px; height: 42px; object-fit: cover; margin-right: 12px; }
.u-nav-container .u-nav-popup .u-nav-link { white-space: nowrap; }
/* mobile menu: thumbnail above the label so long labels fit the panel */
.u-sidenav .menu-thumb { display: block; margin: 0 auto 6px; }
.u-sidenav .u-nav-popup .u-nav-link { white-space: normal; }

/* Snel-aanvraag paneel (popup.js) */
#aanvraag-paneel {
  position: fixed; top: 50%; right: 0; z-index: 90; width: 240px; box-sizing: border-box;
  padding: 22px 20px 18px; background: #2a2a2a; color: #fff; text-align: center;
  font-family: 'Open Sans', sans-serif; box-shadow: -4px 4px 18px rgba(0,0,0,.35);
  border-radius: 4px 0 0 4px; transform: translate(100%, -50%); transition: transform .45s ease;
}
#aanvraag-paneel.ap-open { transform: translate(0, -50%); }
@media (min-width: 768px) { #aanvraag-paneel:not(.ap-open) { visibility: hidden; } }
#aanvraag-paneel p { margin: 0; }
#aanvraag-paneel .ap-title { font: 700 1.1875rem/1.25 Roboto, sans-serif; margin-bottom: 8px; color: #fff; }
#aanvraag-paneel .ap-text { font-size: .875rem; line-height: 1.45; margin-bottom: 14px; color: #e6e6e6; }
#aanvraag-paneel .ap-btn { display: block; background: #fff; color: #111; padding: 11px 10px; font: 700 .8125rem/1.2 Roboto, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; }
#aanvraag-paneel .ap-btn:hover { background: #e9e9e9; }
#aanvraag-paneel .ap-tel { display: block; margin-top: 10px; font-size: .8125rem; color: #ddd; text-decoration: underline; }
#aanvraag-paneel .ap-close { position: absolute; top: 2px; right: 8px; background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px; }
@media (max-width: 767px) {
  #aanvraag-paneel { top: auto; bottom: 0; left: 0; right: 0; width: auto; padding: 10px 44px 10px 14px; border-radius: 0; text-align: left;
    display: flex; align-items: center; gap: 12px; box-shadow: 0 -3px 14px rgba(0,0,0,.3); transform: translateY(100%); visibility: hidden; transition: transform .45s ease, visibility 0s .45s; }
  #aanvraag-paneel.ap-open { transform: translateY(0); visibility: visible; transition: transform .45s ease; }
  #aanvraag-paneel .ap-title { margin: 0; flex: 1 1 auto; font-size: 1rem; }
  #aanvraag-paneel .ap-text, #aanvraag-paneel .ap-tel, #aanvraag-paneel .ap-uren { display: none; }
  #aanvraag-paneel .ap-btn { flex: 0 0 auto; padding: 10px 14px; font-size: .75rem; letter-spacing: .8px; }
  #aanvraag-paneel .ap-close { top: 50%; right: 6px; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { #aanvraag-paneel { transition: none; } }

/* voorkom horizontaal scrollen op mobiel */
html, body { overflow-x: clip; max-width: 100%; }

/* mobiel: footerlogo en knop mogen niet buiten het scherm vallen */
@media (max-width: 767px) {
  footer .u-logo, footer .u-logo-image { max-width: 100% !important; box-sizing: border-box; }
  footer .u-logo-image { width: auto; height: auto; }
  footer a.contact { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; box-sizing: border-box; letter-spacing: 1.5px !important; padding-left: 12px !important; padding-right: 12px !important; text-align: center; }
  .u-section-1 *, footer * { overflow-wrap: anywhere; }
}
#aanvraag-paneel .ap-uren { display: block; margin-top: 2px; font-size: .8rem; opacity: .75; text-align: center; }