/* ==========================================================================
   Contactpagina (template-parts/contact-page.php), 03-10
   Zachtoranje band met belkaart, contactformulier met onderwerpkleur,
   locatiekaarten met eigen accentkleur. Oranje alleen voor de belknoppen.
   ========================================================================== */

.swo-contact { padding: 0 0 72px; background-color: #FBF6EF; background-image: var(--swo-motif); background-size: var(--swo-motif-size); background-position: var(--swo-motif-position); }
.swo-contact svg.lucide { display: block; flex: 0 0 auto; }

/* ---------- Band + hero ---------- */
.swo-contact__band { padding: 24px 0 72px; background: radial-gradient(circle at 96% 8%, #F7D2AC 0 140px, transparent 141px), radial-gradient(circle at 62% 128%, #FFF4E8 0 220px, transparent 221px), #FBF4EC; }
.swo-contact__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 40px; align-items: center; }
.swo-contact__header { max-width: 680px; }
.swo-contact__eyebrow { margin: 0 0 8px; color: #A34700; font-size: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.swo-contact__title { margin: 0 0 14px; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.12; }
.swo-contact__intro { margin: 0; color: #394452; font-size: 20px; line-height: 1.6; }

/* Belkaart */
.swo-contact__call { padding: 26px; background: var(--swo-color-card); border-radius: 20px; box-shadow: 0 14px 34px rgba(120, 60, 0, .14); }
.swo-contact__call-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; margin-bottom: 12px; color: #111111; background: #E97C1A; border-radius: 50%; }
.swo-contact__call-icon svg { width: 28px; height: 28px; }
.swo-contact__call-title { margin: 0 0 4px; font-size: 26px; line-height: 1.25; }
.swo-contact__call-hours { margin: 0 0 18px; color: #394452; font-size: 18px; line-height: 1.5; }
.swo-contact__call-button, .swo-contact__call-callback { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-size: 19px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.swo-contact__call-button svg, .swo-contact__call-callback svg { width: 22px; height: 22px; }
.swo-contact__call-button { color: #111111; background: #E97C1A; border: 2px solid #E97C1A; }
.swo-contact__call-button:hover { color: #111111; background: #D86D0D; border-color: #D86D0D; }
.swo-contact__call-callback { margin-top: 10px; color: var(--swo-color-heading); background: var(--swo-color-card); border: 2px solid #A34700; }
.swo-contact__call-callback svg { color: #A34700; }
.swo-contact__call-callback:hover { color: var(--swo-color-heading); background: #FCE8D3; }
.swo-contact__call-button:focus-visible, .swo-contact__call-callback:focus-visible, .swo-contact__route:focus-visible { outline: 3px solid #005FCC; outline-offset: 3px; }

/* ---------- Raster ---------- */
.swo-contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 28px; align-items: start; margin-top: -32px; }
.swo-contact__details { display: grid; gap: 22px; }

/* ---------- Formulierkaart ---------- */
/* Tegels in dezelfde lichte perzik als de krantband en de tegels op een activiteitpagina (21-10-2026). Het belvak in de
   kop blijft licht: dat staat al op een perzikkleurige achtergrond. */
.swo-contact__form { padding: 32px; background: var(--swo-color-tegel); border: 1px solid #EADFD3; border-top: 6px solid var(--form-accent, #E97C1A); border-radius: 20px; box-shadow: 0 10px 28px rgba(60, 40, 20, .07); transition: border-top-color .25s ease; }
.swo-contact__form-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.swo-contact__form-badge { display: inline-flex; width: 56px; height: 56px; flex: 0 0 56px; align-items: center; justify-content: center; color: #A34700; background: #FCE8D3; border-radius: 50%; }
.swo-contact__form-badge svg { width: 28px; height: 28px; }
.swo-contact__form-title { margin: 4px 0 4px; font-size: 28px; line-height: 1.25; }
.swo-contact__form-intro { margin: 0; color: #394452; font-size: 18px; line-height: 1.6; }

/* Onderwerplabel: kleur en icoon van het gekozen onderwerp, altijd met tekst */
.swo-topic__item { display: flex; align-items: center; gap: 14px; margin: 2px 0 22px; padding: 12px 16px; background: #FBF6EF; background: color-mix(in srgb, var(--topic) 9%, #FFFFFF); border: 2px solid color-mix(in srgb, var(--topic) 30%, #FFFFFF); border-left: 6px solid var(--topic); border-radius: 12px; }
.swo-topic__item[hidden] { display: none; }
.swo-topic__icon { display: inline-flex; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; color: #FFFFFF; background: var(--topic); border-radius: 50%; }
.swo-topic__icon svg { width: 22px; height: 22px; }
.swo-topic__text { display: grid; gap: 2px; }
.swo-topic__text strong { color: var(--swo-color-heading); font-size: 19px; line-height: 1.3; }
.swo-topic__text span { color: #394452; font-size: 16px; line-height: 1.4; }

/* Fluent Forms binnen het contactformulier */
.swo-contact__form .ff-t-container { gap: 0 18px; }
.swo-contact__form .ff-el-help-message.ff_ahm { margin: -2px 0 8px; }
.swo-contact__form .ff-el-form-check { margin-bottom: 4px; }
.swo-contact__form .ff-el-form-check-label { min-height: 44px; align-items: center; padding: 4px 0; color: var(--swo-color-heading); font-size: 18px; line-height: 1.4; }
.swo-contact__form .ff-el-form-check-label input { margin-top: 0; }
.swo-contact__form [role="group"] .ff-el-input--content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.swo-contact__form [role="group"] .ff-el-input--content > :not(.ff-el-form-check) { grid-column: 1 / -1; }
.fluentform .swo-ff-note { padding: 14px 18px; color: var(--swo-color-heading); background: #FBF6EF; border-left: 4px solid #394452; border-radius: 8px; font-size: 18px; line-height: 1.55; }
.fluentform .swo-ff-note h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; }
.fluentform .swo-ff-note p { margin: 0; }
.fluentform .swo-ff-note a { color: var(--swo-color-heading); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(163, 71, 0, .6); text-underline-offset: 3px; }
.fluentform .swo-ff-note a:hover { color: #A34700; }

/* ---------- Locatiekaarten ---------- */
.swo-contact__card { padding: 26px 28px 28px; background: var(--swo-color-tegel); border: 1px solid #EADFD3; border-top: 6px solid var(--card-accent); border-radius: 20px; box-shadow: 0 10px 28px rgba(60, 40, 20, .06); }
.swo-contact__card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.swo-contact__card-icon { display: inline-flex; width: 52px; height: 52px; flex: 0 0 52px; align-items: center; justify-content: center; color: #FFFFFF; background: var(--card-accent); border-radius: 50%; }
.swo-contact__card-icon svg { width: 26px; height: 26px; }
.swo-contact__card-title { min-width: 0; margin: 0; font-size: 24px; line-height: 1.3; }
.swo-contact__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.swo-contact__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--swo-color-heading); font-size: 18px; line-height: 1.5; }
.swo-contact__list a { color: var(--swo-color-heading); font-weight: 700; text-decoration: underline; text-decoration-color: var(--card-accent); text-underline-offset: 3px; }
.swo-contact__list a:hover { color: var(--card-accent); }
.swo-contact__icon { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; margin-top: 2px; color: var(--card-accent); }
.swo-contact__icon svg { width: 22px; height: 22px; }
.swo-contact__address { margin: 0; color: var(--swo-color-heading); font-size: 18px; line-height: 1.5; font-style: normal; }
.swo-contact__route { display: inline-flex; min-height: 48px; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 18px; color: var(--card-accent); background: var(--swo-color-card); border: 2px solid var(--card-accent); border-radius: 999px; font-size: 18px; font-weight: 700; text-decoration: none; transition: background-color .2s ease; }
.swo-contact__route svg { width: 20px; height: 20px; }
.swo-contact__route:hover { color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 8%, #FFFFFF); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.swo-contact__band { padding-bottom: 56px; }
	.swo-contact__hero, .swo-contact__grid { grid-template-columns: minmax(0, 1fr); }
	.swo-contact__hero { gap: 24px; }
	.swo-contact__call { max-width: 480px; }
	.swo-contact__grid { margin-top: -24px; }
}
@media (max-width: 600px) {
	.swo-contact__band { padding-top: 16px; }
	.swo-contact__call, .swo-contact__form, .swo-contact__card { padding: 22px 18px; }
	.swo-contact__form-badge { width: 48px; height: 48px; flex-basis: 48px; }
	.swo-contact__form-title { font-size: 25px; }
	.swo-contact__form [role="group"] .ff-el-input--content { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.swo-contact__form, .swo-contact__call-button, .swo-contact__call-callback, .swo-contact__route { transition: none; }
}