/* ==========================================================================
   DLP Starter — main stylesheet
   Generic design tokens + reset + layout primitives + reusable landing-page
   components (hero, CTA, cards, testimonials, FAQ, forms). Nothing here is
   client-specific — override the custom properties per-project instead of
   editing values throughout the file.
   ========================================================================== */

:root {
    /* Colors — swap these per project, nothing else needs to change */
    --dlp-color-primary: #2563eb;
    --dlp-color-primary-dark: #1d4ed8;
    --dlp-color-text: #1f2328;
    --dlp-color-text-muted: #6b7280;
    --dlp-color-bg: #ffffff;
    --dlp-color-bg-alt: #f7f8fa;
    --dlp-color-border: #e5e7eb;
    --dlp-color-success: #0f7a42;
    --dlp-color-error: #d63638;

    /* Type */
    --dlp-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --dlp-font-size-base: 16px;
    --dlp-line-height-base: 1.6;

    /* Layout */
    --dlp-container-width: 1140px;
    --dlp-radius: 10px;
    --dlp-space-1: 8px;
    --dlp-space-2: 16px;
    --dlp-space-3: 24px;
    --dlp-space-4: 40px;
    --dlp-space-5: 64px;
    --dlp-space-6: 96px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--dlp-font-base);
    font-size: var(--dlp-font-size-base);
    line-height: var(--dlp-line-height-base);
    color: var(--dlp-color-text);
    background: var(--dlp-color-bg);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--dlp-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.25em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 10px 16px; z-index: 10000; }
.skip-link:focus { left: 10px; top: 10px; }

/* ── Layout primitives ───────────────────────────────────────────────── */
.container { max-width: var(--dlp-container-width); margin: 0 auto; padding: 0 var(--dlp-space-2); }
.section { padding: var(--dlp-space-5) 0; }
.section-sm { padding: var(--dlp-space-4) 0; }
.section-alt { background: var(--dlp-color-bg-alt); }
.text-center { text-align: center; }

.grid { display: grid; gap: var(--dlp-space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.hide-mobile { display: block; }
.hide-desktop { display: none; }
@media (max-width: 782px) {
    .hide-mobile { display: none; }
    .hide-desktop { display: block; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px;
    border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { text-decoration: none; opacity: .92; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--dlp-color-primary); color: #fff; }
.btn-primary:hover { background: var(--dlp-color-primary-dark); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--dlp-color-primary); }
.btn-lg { padding: 18px 36px; font-size: 17px; }

/* ── Header / nav ─────────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--dlp-color-border); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--dlp-space-2) 0; }
.site-branding { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.site-branding img { max-height: 40px; width: auto; }
.primary-nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.primary-nav a { color: var(--dlp-color-text); font-weight: 500; }
.nav-toggle {
    display: none; background: none; border: 1px solid var(--dlp-color-border); border-radius: 6px;
    padding: 8px 10px; cursor: pointer;
}
@media (max-width: 782px) {
    .nav-toggle { display: inline-flex; }
    .primary-nav { display: none; width: 100%; }
    .primary-nav.is-open { display: block; }
    .primary-nav ul { flex-direction: column; gap: 14px; padding: var(--dlp-space-2) 0; }
    .site-header-inner { flex-wrap: wrap; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding: var(--dlp-space-6) 0; text-align: left; }
.hero-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dlp-color-primary); margin-bottom: var(--dlp-space-1); }
.hero-title { font-size: clamp(28px, 4vw, 48px); max-width: 820px; margin-left: auto; margin-right: auto; }
.hero-subtitle { font-size: 18px; color: var(--dlp-color-text-muted); max-width: 640px; margin: 0 auto var(--dlp-space-3); }
.hero-actions { display: flex; gap: var(--dlp-space-2); justify-content: center; flex-wrap: wrap; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta-band { background: var(--dlp-color-primary); color: #fff; text-align: center; padding: var(--dlp-space-5) 0; }
.cta-band .btn-primary { background: #fff; color: var(--dlp-color-primary); }
.cta-band h2 { color: #fff; }

/* ── Cards / services ─────────────────────────────────────────────────── */
.card { background: var(--dlp-color-bg); border: 1px solid var(--dlp-color-border); border-radius: var(--dlp-radius); padding: var(--dlp-space-3); }
.card h3 { font-size: 18px; }

/* ── Testimonials ─────────────────────────────────────────────────────── */
.testimonial { background: var(--dlp-color-bg-alt); border-radius: var(--dlp-radius); padding: var(--dlp-space-3); }
.testimonial-quote { font-size: 16px; margin-bottom: var(--dlp-space-2); }
.testimonial-author { font-weight: 600; font-size: 14px; }
.testimonial-role { color: var(--dlp-color-text-muted); font-size: 13px; }

/* ── FAQ (native <details>/<summary>, no JS required) ────────────────── */
.faq-item { border-bottom: 1px solid var(--dlp-color-border); padding: var(--dlp-space-2) 0; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--dlp-color-text-muted); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: var(--dlp-space-1); color: var(--dlp-color-text-muted); }

/* ── Forms — also styles fields built by the OOm DLP plugin's Form
   Connector tool, so generated forms look reasonable out of the box. ──── */
.form-field, .oom-field { margin-bottom: var(--dlp-space-2); text-align: left; }
.form-field label, .oom-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea,
.oom-field input, .oom-field select, .oom-field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--dlp-color-border); border-radius: 8px; font-size: 15px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.oom-field input:focus, .oom-field select:focus, .oom-field textarea:focus {
    outline: none; border-color: var(--dlp-color-primary); box-shadow: 0 0 0 1px var(--dlp-color-primary);
}
.oom-input-error { border-color: var(--dlp-color-error) !important; }
.oom-error-msg { color: var(--dlp-color-error); font-size: 12px; margin-top: 4px; }
.oom-recaptcha-notice { font-size: 11px; color: var(--dlp-color-text-muted); margin: var(--dlp-space-1) 0; }
.oom-success { text-align: center; padding: var(--dlp-space-3); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--dlp-color-border); padding: var(--dlp-space-4) 0; color: var(--dlp-color-text-muted); font-size: 14px; }
.footer-widgets { display: grid; gap: var(--dlp-space-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--dlp-space-3); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--dlp-space-1); padding-top: var(--dlp-space-2); border-top: 1px solid var(--dlp-color-border); }

/* ── Blank landing-page template ─────────────────────────────────────── */
.dlp-landing-page { max-width: none; }

a {
    text-decoration: none !important;

}