/* ================================================================
   VindMijnPaard — Brand Design System
   /app/static/css/brand.css

   Caregiver × Explorer merk-identiteit:
   Mosgroen als basis (vertrouwen, natuur, rust)
   Zandgoud als accent (warmte, premium, zon op wei)
   Warm wit als achtergrond (niet steriel)
   Lora als display-font (premium, editorial)
   ================================================================ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
    /* Brand Core */
    --color-primary:         #2D4A3E;
    --color-primary-light:   #4A7C68;
    --color-accent:          #C8A96E;
    --color-accent-soft:     #E8D5AA;

    /* Neutrals */
    --color-bg:              #FAF8F4;
    --color-surface:         #F0EDE6;
    --color-border:          #DDD8CE;
    --color-text-primary:    #1C1C1A;
    --color-text-secondary:  #6B6860;
    --color-text-muted:      #A09D96;

    /* Semantic / Functional */
    --color-success:         #3A7D5B;
    --color-success-bg:      #EBF5EF;
    --color-warning:         #D4943A;
    --color-warning-bg:      #FDF3E3;
    --color-error:           #C0392B;
    --color-error-bg:        #FAEAE8;
    --color-info:            #2D6A8E;

    /* Typography */
    --font-display: 'Lora', Georgia, serif;
    --font-body:    'Inter', 'DM Sans', system-ui, sans-serif;

    /* Spacing scale (8pt grid) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* Shadows — warm tint (28,28,26 base) */
    --shadow-sm: 0 1px 3px rgba(28,28,26,0.06);
    --shadow-md: 0 4px 16px rgba(28,28,26,0.09);
    --shadow-lg: 0 12px 40px rgba(28,28,26,0.13);

    /* ── Legacy aliases — voor bestaande var() verwijzingen in templates ── */
    --primary:        #2D4A3E;
    --primary-hover:  #4A7C68;
    --primary-light:  #E8D5AA;
    --accent:         #C8A96E;
    --accent-hover:   #B8965A;
    --accent-light:   #F5EDD8;
    --dark:           #2D4A3E;
    --dark-medium:    #1C1C1A;
    --gray-100:       #FAF8F4;
    --gray-200:       #F0EDE6;
    --gray-300:       #DDD8CE;
    --gray-400:       #A09D96;
    --gray-500:       #6B6860;
    --white:          #FFFFFF;
    --success:        #3A7D5B;
    --success-bg:     #EBF5EF;
    --warning:        #D4943A;
    --warning-bg:     #FDF3E3;
    --error:          #C0392B;
    --error-bg:       #FAEAE8;
    --radius-xl:      20px;
}

/* ── Base Styles ───────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Typography ────────────────────────────────────────────────── */
h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Display: hero headline */
.text-display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--dark);
    font-size: 3.75rem;
}
@media (min-width: 480px) { .text-display { font-size: 4.25rem; } }
@media (min-width: 640px) { .text-display { font-size: 4.75rem; } }
@media (min-width: 768px) { .text-display { font-size: 5.25rem; } }

/* Italic accent — voor citaten, testimonials, subheadlines */
.text-italic-accent {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-accent);
}

/* Gradient tekst — goud naar groen */
.text-gradient {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-lg { padding: 1rem 2rem;   font-size: 1.125rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Primary: mosgroen */
.btn-primary {
    background: var(--color-primary);
    color: #FFFFFF;
    border-color: var(--color-primary);
}
.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45,74,62,0.30);
    color: #FFFFFF;
    text-decoration: none;
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

/* Outline */
.btn-outline {
    background: #FFFFFF;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.btn-outline:hover {
    background: var(--color-surface);
    border-color: var(--color-accent);
    color: var(--color-primary);
    text-decoration: none;
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent-soft);
}

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}
.badge-primary  { background: var(--color-accent-soft); color: var(--color-primary); }
.badge-success  { background: var(--color-success-bg);  color: var(--color-success); }
.badge-warning  { background: var(--color-warning-bg);  color: var(--color-warning); }
.badge-new      { background: var(--color-warning);     color: #FFFFFF; }
.badge-solid-primary { background: var(--color-primary); color: #FFFFFF; }
.badge-solid-accent  { background: var(--color-accent);  color: #FFFFFF; }

/* ── Form inputs ───────────────────────────────────────────────── */
.form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
}
.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45,74,62,0.12);
}
.form-input::placeholder { color: var(--color-text-muted); }

/* ── Paard kaart (horse card hover — dashboard + landing slider) ─ */
.paard-kaart {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.paard-kaart:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ── Utility: line-clamp ───────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Section helpers ───────────────────────────────────────────── */
.section { padding-top: 5rem; padding-bottom: 5rem; }
.hero    { padding-top: 8rem; padding-bottom: 8rem; }

/* ── Container ─────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) {
    .container { padding-left: 2rem; padding-right: 2rem; }
}

/* ── Live pulse dot ────────────────────────────────────────────── */
@keyframes pulse-soft { 0%,100%{opacity:1} 50%{opacity:.45} }
.live-dot { animation: pulse-soft 2s ease-in-out infinite; }

/* ── FAQ chevron ───────────────────────────────────────────────── */
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.2s ease; }

/* ── Pricing featured card ─────────────────────────────────────── */
.pricing-featured {
    background: #FFFFFF;
    border: 2px solid var(--color-primary) !important;
}

/* ── Slider scrollbar hide ─────────────────────────────────────── */
#paarden-slider::-webkit-scrollbar { display: none; }