/* =========================================================
   Stoevelaar Gevelrenovatie – theme.css
   Aanvullend op theme.json. Rood (#c8102e) / zwart (#0e0e0e).
   ========================================================= */

:root {
  --stv-red: var(--wp--preset--color--primary, #c8102e);
  --stv-red-dark: var(--wp--preset--color--primary-dark, #9a0b22);
  --stv-black: var(--wp--preset--color--contrast, #0e0e0e);
  --stv-dark: var(--wp--preset--color--surface-dark, #181818);
  --stv-surface: var(--wp--preset--color--surface, #f4f4f2);
  --stv-border: var(--wp--preset--color--border, #e3e3df);
  --stv-muted: var(--wp--preset--color--muted, #5f5f5f);
  --stv-radius: 4px;
  --stv-shadow: 0 10px 30px -12px rgba(14, 14, 14, 0.35);
  --stv-header-h: 76px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
.wp-site-blocks { overflow-x: clip; } /* pseudo-elementen (kaders, cirkels) mogen de layout niet verbreden */
/* Root-padding van theme.json geldt via body-padding; fixed elementen daar niet aan laten meedoen. */
.stv-mobile-bar { margin: 0; padding: 0; }
img { height: auto; max-width: 100%; }
:focus-visible { outline: 3px solid var(--stv-red); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--stv-red); color: #fff; padding: .75rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Koppen ---------- */
h1, h2, h3, h4 { text-wrap: balance; }
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stv-red) !important;
  margin-bottom: .5rem !important;
  display: flex; align-items: center; gap: .6rem;
}
.is-style-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--stv-red); flex: none; }
.has-text-align-center.is-style-eyebrow { justify-content: center; }
.is-style-underline { padding-bottom: .6rem; position: relative; }
.is-style-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; background: var(--stv-red); }
.has-text-align-center.is-style-underline::after { left: 50%; transform: translateX(-50%); }

/* ---------- Header ---------- */
.site-topbar { font-size: .875rem; }
.site-topbar a { color: #fff; text-decoration: none; }
.site-topbar a:hover { color: #fff; text-decoration: underline; }
.site-topbar .wp-block-group { row-gap: .25rem; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--stv-border);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(0,0,0,.35); }
.site-header .wp-block-site-logo img { max-height: 48px; width: auto; }
.site-header .wp-block-navigation a { color: var(--stv-black); text-decoration: none; padding: .35rem 0; position: relative; }
.site-header .wp-block-navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--stv-red); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.site-header .wp-block-navigation a:hover::after,
.site-header .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }
.site-header .wp-block-navigation__submenu-container a::after { display: none; }
.site-header .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: var(--stv-shadow); border-radius: var(--stv-radius); padding: .5rem 0 !important; min-width: 260px !important; }
.site-header .wp-block-navigation__submenu-container a { padding: .5rem 1rem; text-transform: none; letter-spacing: 0; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: .95rem; }
.site-header .wp-block-navigation__submenu-container a:hover { background: var(--stv-surface); color: var(--stv-red); }
.site-header .wp-block-buttons .wp-block-button__link { padding: .65rem 1.2rem; font-size: 1rem; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--stv-black); color: #fff; padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; font-size: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { font-size: 1.1rem; }
.wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; box-shadow: none; }
@media (max-width: 781px) {
  .stv-hero .is-style-eyebrow { font-size: .8rem !important; letter-spacing: .1em; }
  .site-header .header-cta { display: none; }
  .site-topbar .topbar-right { display: none; }
}

/* ---------- Hero ---------- */
.stv-hero { min-height: min(82vh, 820px); }
.stv-hero .wp-block-cover__inner-container { width: 100%; }
.stv-hero h1 { color: #fff; font-size: var(--wp--preset--font-size--huge); line-height: .98; letter-spacing: -.015em; text-transform: uppercase; max-width: 14ch; }
.stv-hero h1 mark { background: none; color: var(--stv-red); -webkit-text-fill-color: var(--stv-red); }
.stv-hero p { color: rgba(255,255,255,.9); }
.stv-hero .stv-hero-usps { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 0; margin: 0; list-style: none; color: #fff; font-weight: 500; font-size: .95rem; }
.stv-hero .stv-hero-usps li { display: flex; align-items: center; gap: .5rem; }
.stv-hero .stv-hero-usps li::before { content: "✓"; color: var(--stv-red); font-weight: 700; background: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: .75rem; flex: none; }
.stv-page-hero { background: var(--stv-black); color: #fff; position: relative; overflow: hidden; }
.stv-page-hero::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(200,16,46,.35), transparent 70%); pointer-events: none; }
.stv-page-hero h1, .stv-page-hero .wp-block-post-title { color: #fff; text-transform: uppercase; }
.stv-page-hero p { color: rgba(255,255,255,.85); }

/* ---------- Kruimelpad ---------- */
.stv-breadcrumbs { font-size: .85rem; color: var(--stv-muted); }
.stv-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.stv-breadcrumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.stv-breadcrumbs a { color: inherit; text-decoration: none; }
.stv-breadcrumbs a:hover { color: var(--stv-red); }
.stv-page-hero .stv-breadcrumbs { color: rgba(255,255,255,.7); }
.stv-page-hero .stv-breadcrumbs a:hover { color: #fff; }

/* ---------- Kaarten ---------- */
.is-style-card, .is-style-card-dark {
  border-radius: var(--stv-radius);
  padding: 2rem;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.is-style-card { background: #fff; border: 1px solid var(--stv-border); }
.is-style-card-dark { background: var(--stv-dark); color: #fff; }
.is-style-card-dark h2, .is-style-card-dark h3, .is-style-card-dark h4 { color: #fff; }
.is-style-card:hover, .is-style-card-dark:hover { transform: translateY(-3px); box-shadow: var(--stv-shadow); }
.is-style-card::before, .is-style-card-dark::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--stv-red); }
.is-style-card .wp-block-image { margin: -2rem -2rem 1.5rem; }
.is-style-card .wp-block-image img { border-radius: var(--stv-radius) var(--stv-radius) 0 0; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.is-style-card h3 a, .is-style-card-dark h3 a { color: inherit; text-decoration: none; }
.is-style-card h3 a:hover { color: var(--stv-red); }
.stv-card-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.stv-card-link::after { content: "→"; transition: transform .2s; }
.stv-card-link:hover::after { transform: translateX(4px); }
.is-style-accent-left { border-left: 4px solid var(--stv-red); padding-left: 1.5rem; }

/* ---------- Lijsten ---------- */
.is-style-checks { list-style: none; padding-left: 0; }
.is-style-checks li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.is-style-checks li::before { content: "✓"; position: absolute; left: 0; top: .1em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--stv-red); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }

/* ---------- Cijfers / USP's ---------- */
.stv-stat { font-family: var(--wp--preset--font-family--heading); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; line-height: 1; color: var(--stv-red); }
.stv-stat + p { margin-top: .25rem; font-weight: 500; }
.stv-step { counter-increment: stv-step; position: relative; padding-top: 1rem; }
.stv-steps { counter-reset: stv-step; }
.stv-step::before { content: counter(stv-step, decimal-leading-zero); font-family: var(--wp--preset--font-family--heading); font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--stv-red); opacity: .9; display: block; margin-bottom: .5rem; }

/* ---------- Afbeeldingen ---------- */
.is-style-framed img { border-radius: var(--stv-radius); }
.is-style-framed { position: relative; margin-right: 1.25rem; margin-bottom: 1.25rem; }
.is-style-framed::after { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 4px solid var(--stv-red); border-radius: var(--stv-radius); z-index: -1; }
.wp-block-post-featured-image img { border-radius: var(--stv-radius); }

/* ---------- Project-grid (Query loop) ---------- */
.stv-project-grid .wp-block-post { background: #fff; border: 1px solid var(--stv-border); border-radius: var(--stv-radius); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.stv-project-grid .wp-block-post:hover { transform: translateY(-3px); box-shadow: var(--stv-shadow); }
.stv-project-grid .wp-block-post-featured-image { margin: 0; }
.stv-project-grid .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.stv-project-grid .stv-project-body { padding: 1.25rem 1.5rem 1.5rem; }
.stv-project-grid .wp-block-post-title { font-size: 1.4rem; margin: .25rem 0 .5rem; }
.stv-project-grid .wp-block-post-title a { text-decoration: none; color: inherit; }
.stv-project-grid .wp-block-post-title a:hover { color: var(--stv-red); }
.stv-project-grid .wp-block-post-terms { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--stv-red); }
.stv-project-grid .wp-block-post-terms a { color: inherit; text-decoration: none; }
.stv-project-grid .wp-block-post-excerpt { font-size: .95rem; color: var(--stv-muted); }

/* ---------- Blog ---------- */
.stv-post-grid .wp-block-post-title { font-size: 1.5rem; }
.stv-post-grid .wp-block-post-title a { text-decoration: none; color: inherit; }
.stv-post-grid .wp-block-post-title a:hover { color: var(--stv-red); }
.stv-post-grid .wp-block-post-date { font-size: .85rem; color: var(--stv-muted); }

/* ---------- Werkgebied-chips ---------- */
.stv-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.stv-chips a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--stv-border); border-radius: 999px; text-decoration: none; color: var(--stv-black); font-weight: 500; font-size: .95rem; background: #fff; transition: all .15s; }
.stv-chips a:hover { border-color: var(--stv-red); color: var(--stv-red); }
.has-contrast-background-color .stv-chips a, .has-surface-dark-background-color .stv-chips a { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.has-contrast-background-color .stv-chips a:hover, .has-surface-dark-background-color .stv-chips a:hover { background: var(--stv-red); border-color: var(--stv-red); color: #fff; }

/* ---------- FAQ (details) ---------- */
.wp-block-details summary { font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; color: var(--stv-red); font-size: 1.75rem; line-height: 1; font-weight: 400; flex: none; transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: .75rem; color: var(--stv-muted); }
.is-style-card-dark .wp-block-details > :not(summary), .has-contrast-background-color .wp-block-details > :not(summary) { color: rgba(255,255,255,.8); }

/* ---------- Knoppen ---------- */
.wp-block-button__link { transition: background .15s, transform .15s; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.is-style-white .wp-block-button__link { background: #fff !important; color: var(--stv-black) !important; }
.is-style-white .wp-block-button__link:hover { background: var(--stv-surface) !important; }
.is-style-whatsapp .wp-block-button__link { background: #25d366 !important; color: #fff !important; }
.is-style-whatsapp .wp-block-button__link:hover { background: #1ebe5b !important; }
.is-style-whatsapp .wp-block-button__link::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .5em; vertical-align: -.2em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.4zM12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.4zM12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- CTA band ---------- */
.stv-cta { position: relative; overflow: hidden; }
.stv-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, var(--stv-red) 0%, var(--stv-red) 55%, var(--stv-red-dark) 100%); z-index: 0; }
.stv-cta::after { content: ""; position: absolute; right: -8%; top: -40%; width: 45%; aspect-ratio: 1; border: 60px solid rgba(255,255,255,.06); border-radius: 50%; z-index: 0; }
.stv-cta > * { position: relative; z-index: 1; }
.stv-cta h2, .stv-cta h3 { color: #fff; }
.stv-cta p { color: rgba(255,255,255,.92); }

/* ---------- Formulier ---------- */
.stv-form { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.stv-form > * { min-width: 0; }
.stv-form .stv-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.stv-form select { max-width: 100%; }
.stv-form .stv-field--full { grid-column: 1 / -1; }
.stv-form label { font-weight: 600; font-size: .9rem; }
.stv-form label .req { color: var(--stv-red); }
.stv-form input, .stv-form select, .stv-form textarea { box-sizing: border-box; font: inherit; padding: .8rem .9rem; border: 1px solid #cfcfca; border-radius: var(--stv-radius); background: #fff; width: 100%; }
.stv-form input:focus, .stv-form select:focus, .stv-form textarea:focus { border-color: var(--stv-red); outline: none; box-shadow: 0 0 0 3px rgba(200,16,46,.15); }
.stv-form textarea { min-height: 140px; resize: vertical; }
.stv-form .stv-hp { position: absolute; left: -9999px; }
.stv-form button { grid-column: 1 / -1; justify-self: start; cursor: pointer; border: 0; background: var(--stv-red); color: #fff; padding: .95rem 1.8rem; border-radius: var(--stv-radius); font-family: var(--wp--preset--font-family--heading); font-size: 1.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stv-form button:hover { background: var(--stv-red-dark); }
.stv-form .stv-consent { font-size: .85rem; color: var(--stv-muted); }
.stv-form .stv-consent label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.stv-form .stv-consent input { width: auto; margin-top: .3rem; }
.stv-notice { padding: 1rem 1.25rem; border-radius: var(--stv-radius); border-left: 4px solid; margin-bottom: 1.5rem; }
.stv-notice--success { background: #eefaf0; border-color: #1f9d55; }
.stv-notice--error { background: #fdeeee; border-color: var(--stv-red); }
@media (max-width: 640px) { .stv-form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--stv-black); color: rgba(255,255,255,.8); }
.site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .wp-block-navigation { font-family: var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1rem; }
.site-footer .wp-block-navigation a { color: rgba(255,255,255,.85); }
.site-footer .wp-block-site-logo img { filter: invert(1) brightness(2); max-height: 56px; width: auto; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: rgba(255,255,255,.55); }
.site-footer .footer-bottom a { color: rgba(255,255,255,.7); }

/* ---------- Sticky mobiele call-bar ---------- */
.stv-mobile-bar { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 90; display: none; grid-template-columns: 1fr 1fr; background: var(--stv-black); border-top: 1px solid rgba(255,255,255,.1); }
.stv-mobile-bar a { min-width: 0; }
.stv-mobile-bar a { color: #fff; text-decoration: none; text-align: center; padding: .9rem .5rem; font-family: var(--wp--preset--font-family--heading); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; }
.stv-mobile-bar a + a { background: var(--stv-red); }
@media (max-width: 781px) {
  .stv-mobile-bar { display: grid; }
  body { padding-bottom: 56px; }
}

/* ---------- Content-pagina's ---------- */
.stv-prose h2 { margin-top: 2.5rem; }
.stv-prose h3 { margin-top: 2rem; }
.stv-prose p, .stv-prose li { color: #2b2b2b; }
.stv-table-wrap { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--stv-border); padding: .65rem .85rem; }
.wp-block-table th { background: var(--stv-surface); text-align: left; }
.stv-sidebar-cta { position: sticky; top: calc(var(--stv-header-h) + 1.5rem); }

/* ---------- 404 / zoeken ---------- */
.wp-block-search__button { background: var(--stv-red); color: #fff; border: 0; }

/* ---------- Print ---------- */
@media print { .site-header, .site-topbar, .stv-mobile-bar, .stv-cta, .site-footer { display: none !important; } }