/* ===== Taste DC — huisstijl afgeleid van het logo =====
   Antraciet (glas) + kersenrood (wijn) + wit, met warme neutrale tinten. */

/* Wijndetail: chips + feitenrooster */
.chip-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 0; }
.chip {
    display: inline-flex; align-items: center; padding: .25rem .8rem; border-radius: 999px;
    font-size: .82rem; font-weight: 700; background: #fff; border: 1px solid var(--line); color: var(--charcoal);
}
.chip-white { border-color: #d9c979; background: #fbf7e4; }
.chip-red { border-color: #d59aa2; background: #f9e9eb; }
.chip-rose { border-color: #efb9c4; background: #fdeef2; }
.chip-sparkling { border-color: #bcd3e3; background: #ecf4fa; }
.chip-orange { border-color: #e4b98a; background: #faf0e3; }
.chip-fortified { border-color: #c4a68e; background: #f4ebe3; }
.chip-promo { background: var(--red); border-color: var(--red); color: #fff; }
.pairing-box {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red);
    border-radius: var(--radius); padding: 1.3rem 1.6rem; margin-bottom: 2rem; max-width: 46rem;
    box-shadow: 0 1px 2px rgba(43,43,45,.05);
}
.pairing-box h2 { margin-top: 0; font-size: 1.3rem; }
.pairing-box p { margin: .4rem 0 0; }
.pairing-box .serving { color: var(--muted); font-weight: 600; margin-top: .8rem; }
.story { max-width: 46rem; }
.fact-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem 1.4rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.2rem 1.4rem; margin: 1.5rem 0 1rem;
}
.fact-grid div { margin: 0; }
.fact-grid dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fact-grid dd { margin: .1rem 0 0; font-weight: 600; }

/* Webshop / winkelmandje */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cart-link { position: relative; text-decoration: none; font-size: 1.25rem; }
.cart-count {
    position: absolute; top: -8px; right: -12px; background: var(--red); color: #fff;
    border-radius: 999px; font-size: .7rem; font-weight: 800; min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
.card-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.card-actions form { margin: 0; }
.add-to-cart { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.qty-select { padding: .7rem .8rem; border: 1px solid #d5cfc7; border-radius: 10px; font: inherit; background: #fff; }
.cart-container { max-width: 46rem; }
.cart-lines { display: flex; flex-direction: column; gap: .8rem; }
.cart-line {
    display: grid; grid-template-columns: 56px 1fr auto auto auto; gap: .9rem; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
}
.cart-thumb { width: 56px; height: 72px; object-fit: contain; }
.cart-line-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cart-name { font-weight: 700; text-decoration: none; color: var(--charcoal); }
.cart-name:hover { color: var(--red); }
.cart-qty { display: flex; align-items: center; gap: .4rem; }
.cart-qty form { margin: 0; }
.qty-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
    font-size: 1.1rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.qty-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.qty { min-width: 1.6rem; text-align: center; font-weight: 700; }
.cart-line-total { font-weight: 800; color: var(--red); white-space: nowrap; }
.remove-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: .3rem; }
.remove-btn:hover { color: var(--red); }
.cart-summary { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-top: 1.2rem; }
.summary-row { display: flex; justify-content: space-between; padding: .3rem 0; }
.summary-row.discount { color: #1d6b36; font-weight: 700; }
.summary-row.total { border-top: 2px solid var(--charcoal); margin-top: .5rem; padding-top: .7rem; font-weight: 800; font-size: 1.15rem; }
.form-field-split { display: grid; grid-template-columns: 1fr 2fr; gap: .8rem; }
.checkbox-field { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1.2rem; cursor: pointer; }
.checkbox-field input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--red); }
.alert-success a { color: inherit; }
@media (max-width: 560px) {
    .cart-line { grid-template-columns: 1fr auto; }
    .cart-thumb, .cart-line-total { display: none; }
}

/* SEO-dashboard + FAQ */
.score-good { color: #1d6b36; }
.score-mid { color: #8a6207; }
.score-bad { color: #a71822; }
.seo-checks li.check-ok::before { content: "✔"; color: #2e9e4f; }
.seo-checks li.check-open::before { content: "✘"; color: #a71822; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; padding: .7rem 1rem; margin-bottom: .6rem; background: #fff; }
.faq-item summary { font-weight: 700; cursor: pointer; }
.faq-item p { margin: .6rem 0 .2rem; }
:root {
    --red: #cd1f2c;          /* logo-rood */
    --red-dark: #a71822;
    --charcoal: #3b3b3d;     /* logo-antraciet */
    --ink: #2b2b2d;
    --paper: #f7f5f2;        /* warm gebroken wit */
    --line: #e6e1da;
    --muted: #75706b;
    --radius: 12px;
    font-size: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.65;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.15; color: var(--charcoal); }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0 0 .75rem; }
h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0 0 1rem; }
h1:focus { outline: none; }

a { color: var(--red); }
img { max-width: 100%; display: block; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }

/* Toegankelijkheid */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--charcoal); color: #fff; padding: .5rem 1rem; }
.skip-link:focus { left: 0; z-index: 100; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: .6rem; padding-bottom: .6rem; flex-wrap: wrap; gap: .5rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 52px; width: auto; }
.main-nav { display: flex; gap: 1.4rem; align-items: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a { text-decoration: none; font-weight: 600; color: var(--charcoal); }
.main-nav a:hover { color: var(--red); }

/* Gsm-menu (zonder JavaScript, via <details>) */
.mobile-nav { display: none; }
@media (max-width: 760px) {
    .header-inner { flex-wrap: nowrap; position: relative; }
    .brand img { height: 44px; }
    .site-header nav[aria-label="Hoofdnavigatie"] { display: none; }
    .mobile-nav { display: block; }
    .mobile-nav summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; border-radius: 10px; }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .mobile-nav summary span { display: block; width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
    .mobile-nav[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-nav[open] summary span:nth-child(2) { opacity: 0; }
    .mobile-nav[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mobile-nav nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(0,0,0,.08); padding: .4rem 1.25rem 1.25rem; display: grid; }
    .mobile-nav nav a:not(.btn) { padding: .9rem 0; text-decoration: none; font-weight: 600; color: var(--charcoal); border-bottom: 1px solid var(--line); }
    .mobile-nav nav .btn { margin-top: 1rem; text-align: center; }
}

/* Knoppen / CTA's */
.btn {
    display: inline-block; padding: .85rem 1.7rem; border-radius: 999px;
    text-decoration: none; font-weight: 700; border: 2px solid transparent; cursor: pointer; font-size: 1rem;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-secondary { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-secondary:hover { background: var(--charcoal); color: #fff; }
.btn-sm { padding: .5rem 1.1rem; font-size: .9rem; }
.main-nav .btn-primary { color: #fff; }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 1rem; }
.volume-choice { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.volume-choice .btn { padding: .4rem .9rem; font-size: .95rem; }

/* Hero met foto */
.hero {
    position: relative; color: #fff; padding: 7rem 0 5.5rem;
    background:
        linear-gradient(100deg, rgba(24,24,26,.82) 0%, rgba(24,24,26,.55) 55%, rgba(24,24,26,.25) 100%),
        url('/images/hero-tafel-wijngaard.jpg') center 60% / cover no-repeat;
}
.hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: #ffb3ba; font-weight: 700; margin: 0 0 .6rem; }
.lead { font-size: 1.15rem; max-width: 44rem; }
.hero .lead { color: #f1ece6; }
.hero .btn-secondary { color: #fff; border-color: #fff; }
.hero .btn-secondary:hover { background: rgba(255,255,255,.15); }
.social-proof { color: #f1ece6; font-size: .95rem; }

/* Page header */
.page-header { background: var(--paper); padding: 3rem 0 2rem; border-bottom: 1px solid var(--line); }
.page-header.with-photo {
    color: #fff; border: 0; padding: 4.5rem 0 3rem;
    background-size: cover; background-position: center;
}
.page-header.with-photo h1 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.page-header.with-photo .lead { color: #f1ece6; }

/* Secties */
.section { padding: 3.5rem 0; }
.section-alt { background: var(--paper); }

/* Kaarten */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin: 1.75rem 0; }
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem; position: relative;
    box-shadow: 0 1px 2px rgba(43,43,45,.05);
    transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: 0 10px 28px rgba(43,43,45,.12); transform: translateY(-2px); }
.card h3, .card h2 { margin-top: 0; }
.card-link { font-weight: 700; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* Fotokaarten */
.photo-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.photo-card img { width: 100%; height: 200px; object-fit: cover; }
.photo-card .card-body { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.photo-card .card-body > :last-child { margin-top: auto; }

/* Beeld + tekst naast elkaar */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin: 1.5rem 0; }
.split img { border-radius: var(--radius); box-shadow: 0 14px 40px rgba(43,43,45,.18); width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* Wijnen */
.wine-card h2, .wine-card h3 { font-size: 1.1rem; }
.wine-card a { text-decoration: none; color: var(--charcoal); }
.wine-card a:hover { color: var(--red); }
.wine-origin { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .25rem; }
.wine-price { font-weight: 800; color: var(--red); font-size: 1.15rem; }
.wine-price-lg { font-size: 1.7rem; }
.badge { position: absolute; top: 1rem; right: 1rem; background: var(--red); color: #fff; padding: .18rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.promo-note { background: #fdf0f1; border: 1px solid #f2c2c6; border-radius: var(--radius); padding: .8rem 1.1rem; }

/* Filterbalk */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.filter-field { display: flex; flex-direction: column; gap: .3rem; min-width: 170px; flex: 1; }
.filter-field label { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.filter-field select { padding: .55rem .7rem; border: 1px solid #d5cfc7; border-radius: 10px; font: inherit; background: #fff; }
.filter-field select:focus { outline: 2px solid var(--red); border-color: var(--red); }
.filter-actions { display: flex; gap: .6rem; }

/* Beschikbaarheidskalender */
.month-nav { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.month-pill {
    padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: #fff;
    text-decoration: none; font-weight: 600; font-size: .88rem; color: var(--charcoal); text-transform: capitalize;
}
.month-pill:hover { border-color: var(--red); color: var(--red); }
.month-pill.on { background: var(--red); border-color: var(--red); color: #fff; }
.legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.legend-item { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot-vrij { background: #2e9e4f; }
.dot-optie { background: #e3a008; }
.dot-bezet { background: var(--red); }
.cal-month { margin-top: 2rem; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: .2rem; text-align: center; }
.cal-cell { border-radius: 10px; padding: .45rem .3rem; text-align: center; min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: .15rem; }
.cal-empty { background: transparent; }
.cal-day { font-weight: 800; }
.cal-status { font-size: .68rem; }
.cal-vrij { background: #e7f6ec; color: #1d6b36; border: 1px solid #bfe6cc; }
.cal-optie { background: #fdf3dd; color: #8a6207; border: 1px solid #f1dCA6; }
.cal-bezet { background: #fdeaec; color: var(--red-dark); border: 1px solid #f2c2c6; }

/* Dag in drie dagdelen: voormiddag / namiddag / avond */
.cal-split { background: #fff; border: 1px solid var(--line); gap: 3px; padding: .4rem .3rem .35rem; min-height: 0; }
.cal-split .daypart { flex: 1; }   /* samengevoegde blokken vullen de vrijgekomen hoogte */
.cal-split .cal-day { font-size: .85rem; }
.daypart {
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    border-radius: 6px; font-size: .62rem; font-weight: 700; padding: .14rem .2rem; line-height: 1.1;
}
.daypart em { font-style: normal; font-weight: 800; font-size: .56rem; opacity: .65; letter-spacing: .04em; }
.part-vrij { background: #e7f6ec; color: #1d6b36; }
.part-optie { background: #fdf3dd; color: #8a6207; }
.part-bezet { background: #fdeaec; color: var(--red-dark); }
@media (max-width: 640px) {
    .cal-status { display: none; }
    .cal-cell { min-height: 44px; }
    .daypart { font-size: 0; gap: 0; }           /* enkel het kleurblokje met VM/NM/AV */
    .daypart em { font-size: .56rem; }
    .cal-split { padding: .3rem .15rem; }
}

/* Prijstabel */
.table-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(43,43,45,.06); }
.price-table th, .price-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.price-table thead th { background: var(--charcoal); color: #fff; font-weight: 700; }
.price-table tbody tr:nth-child(even) { background: var(--paper); }
.price-table td:nth-child(2), .price-table td:nth-child(3) { font-weight: 700; color: var(--red); white-space: nowrap; }

/* Wijnfoto's */
.wine-photo { height: 220px; object-fit: contain; padding: 1rem 1rem 0; background: #fff; }
.wine-detail-photo { max-height: 420px; width: auto; margin: 0 auto; }

/* Checklist */
.checklist { list-style: none; padding: 0; max-width: 46rem; }
.checklist li { padding: .38rem 0 .38rem 1.9rem; position: relative; }
.checklist li::before { content: "✔"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* Testimonials */
.testimonial { margin: 0; font-style: italic; }
.testimonial footer { font-style: normal; margin-top: .75rem; }
.muted { color: var(--muted); }

/* CTA-banner */
.cta-banner {
    background: var(--charcoal); color: #fff; border-radius: var(--radius);
    padding: 2.5rem 2rem; margin-top: 2.5rem; text-align: center;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #d9d5d0; max-width: 40rem; margin-left: auto; margin-right: auto; }
.cta-banner .btn-primary { background: var(--red); }
.cta-banner .btn-primary:hover { background: var(--red-dark); }

/* Formulier */
.form-container { max-width: 40rem; }
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: .7rem .85rem; border: 1px solid #d5cfc7; border-radius: 10px; font: inherit; background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: 2px solid var(--red); border-color: var(--red);
}
.alert-success { background: #eef7ee; border: 1px solid #9fce9f; border-radius: var(--radius); padding: 1.5rem; }
.unavailable-note { background: #f4f1ec; border: 1px solid #d8d2c8; border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.unavailable-note a { color: inherit; }
.validation-message { color: var(--red-dark); font-size: .9rem; }
.validation-errors { color: var(--red-dark); }
.invalid { border-color: var(--red-dark); }
.valid.modified:not([type=checkbox]) { border-color: #26890d; }

/* Footer */
.site-footer { background: var(--charcoal); color: #d9d5d0; margin-top: 3rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #ffb3ba; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; padding: 2.75rem 1.25rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: .22rem 0; }
.footer-title { font-size: 1rem; color: #fff; font-family: inherit; }
.footer-logo { height: 46px; width: auto; margin-bottom: .6rem; }
.footer-bottom { border-top: 1px solid #4c4c4f; padding-top: 1rem; padding-bottom: 1rem; font-size: .85rem; }

/* Blazor error UI */
#blazor-error-ui {
    color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }