/* ===================== Mozaic — Onze diensten ===================== */
.container:not(.navbar-inner):not(.sv-hero-inner):not(.sv-body) { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* ---------- Jump strip: form-like tab index to the four services ---------- */
.services-nav-strip { background: var(--bg-card); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 40; }
.services-nav-inner { display: flex; gap: 0; overflow-x: auto; }
.services-nav-inner a {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 14px 18px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
    text-decoration: none; border-bottom: 2px solid transparent;
}
.services-nav-inner a span { font-family: var(--font-mono); color: var(--accent); font-size: 0.8rem; }
.services-nav-inner a:hover { color: var(--text-primary); border-bottom-color: var(--accent); }

/* ---------- Service blocks ---------- */
.service-block { padding: 64px 0; border-bottom: 1px solid var(--border-color); scroll-margin-top: 66px; }
.service-block-inner { display: flex; gap: 30px; }
.service-num { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; color: var(--accent); flex-shrink: 0; width: 52px; }
.service-content h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.service-subtitle { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--text-secondary); margin: 0 0 22px; }
.service-content p { color: var(--text-secondary); line-height: 1.9; font-size: 1rem; margin: 0 0 16px; max-width: 680px; }
.service-list ul { margin: 0 0 16px; padding-inline-start: 20px; color: var(--text-secondary); line-height: 1.9; }
.service-list li { margin-bottom: 4px; }

/* ---------- Callout: bordered "notice box" — never a colored border-left accent ---------- */
.service-callout {
    border: 1.5px solid var(--gunmetal); border-radius: 4px;
    padding: 26px 26px 22px; margin: 30px 0 36px; position: relative; max-width: 640px;
    background: var(--bg-card);
}
.service-callout-tag {
    position: absolute; top: -11px; inset-inline-start: 20px;
    background: var(--accent); color: #161616; font-family: var(--font-mono);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 3px; border: 1.5px solid #161616;
}
.service-callout p:first-of-type { font-weight: 700; color: var(--text-primary); margin-top: 6px; }
.service-callout p:last-of-type { margin-bottom: 0; }

.service-subhead { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 40px 0 14px; }

/* ---------- Sub-service detail list (ruled, no cards) ---------- */
.service-detail-list { border-top: 1px solid var(--border-color); margin-top: 10px; }
.detail-row { padding: 18px 0; border-bottom: 1px solid var(--border-color); }
.detail-row h4 { font-size: 0.98rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.detail-row p { margin: 0; font-size: 0.92rem; }

/* ---------- Initiative suggestion form ---------- */
/* 🆕 الفورم صار يستخدم .card-custom (نفس بطاقة فورم "اقترح مبادرتك" بالهوم بيج تمامًا)
   + كلاسات Bootstrap القياسية (form-control/row g-3/alert) بدل الكلاسات المخصّصة القديمة
   يلي كانت هون (initiative-form-wrap/form-field/form-alert) — انحذفوا، ما عاد فيهم استخدام. */

/* 🐛 .card-custom عندها height:100% (لأجل شبكات الكروت المتساوية بصفحات تانية) — هون
   الأب `.service-block-inner` عبارة عن flex container بمحاذاة "stretch" الافتراضية،
   فكانت عم تمطّط الكرت لارتفاع فاضي زائد وتتجاوز حدود القسم لحد الفوتر. عالهوم بيج
   نفس الكلاس بلا مشكلة لأنه جوا صف بمحاذاة "center" (بلا stretch) — هون فقط بنلغيها. */
#initiatieven .card-custom { height: auto; }

/* 🆕 خلفية الحقول تصير زجاجية متل خلفية الكرت نفسه (نفس فورم الهوم بيج بالحرف) بدل
   الأبيض الافتراضي من Bootstrap — نفس القاعدة الموجودة أصلاً بـ#initiatives بـindex.css. */
#initiatieven .form-control {
    background-color: var(--card-glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 14px 18px;
    border-radius: 10px;
    transition: all 0.3s;
}
#initiatieven .form-control::placeholder { color: var(--text-secondary); }
#initiatieven .form-control:focus {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(243, 154, 53, 0.2);
}

@media (max-width: 640px) {
    .service-block-inner { flex-direction: column; gap: 10px; }
}