@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Work+Sans:wght@400;500;600&display=swap');

:root {
    --char: #221b17;
    --ember: #c1502e;
    --smoke: #f6f1ea;
    --herb: #5b6b4f;
    --ash: #8a8078;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Work Sans', sans-serif;
    background: var(--smoke);
    color: var(--char);
    line-height: 1.5;
}

h1, h2, h3, .font-display {
    font-family: 'Zilla Slab', serif;
    line-height: 1.15;
    margin: 0;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: 1152px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ember);
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--char); color: var(--smoke); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.logo { font-family: 'Zilla Slab', serif; font-size: 1.5rem; font-weight: 700; }
.logo span { color: var(--ember); }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 0.88rem; font-weight: 500; }
.main-nav a:hover { color: var(--ember); }
.main-nav a { white-space: nowrap; }
.nav-muted { color: rgba(246,241,234,0.7); }
.nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.nav-item.has-dropdown > a::after { content: "▾"; margin-left: 5px; font-size: 0.7em; opacity: 0.7; }
.dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0; padding-top: 14px;
    z-index: 50; flex-direction: column;
}
.dropdown-menu-inner {
    background: var(--char); border-radius: 10px; padding: 8px 0; min-width: 190px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}
.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu { display: flex; }
.dropdown-menu a {
    padding: 9px 18px; white-space: nowrap; color: rgba(246,241,234,0.85); font-weight: 500;
    display: block;
}
.dropdown-menu a:hover { background: rgba(246,241,234,0.08); color: var(--ember); }

.nav-toggle {
    display: none; background: none; border: none; color: var(--smoke); font-size: 1.5rem;
    cursor: pointer; line-height: 1; padding: 4px;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-outline-header {
    border: 1px solid var(--ember); border-radius: 999px; padding: 6px 16px; font-size: 0.85rem; font-weight: 500;
}
.btn-outline-header:hover { background: var(--ember); }
.admin-link { font-size: 0.75rem; color: rgba(246,241,234,0.5); }
.admin-link:hover { color: var(--smoke); }

/* Compacte, bij het donkere thema passende Google-vertaalwidget (i.p.v. de
   standaard grote witte doos die Google er zelf inzet). */
#google_translate_element { display: flex; align-items: center; }
#google_translate_element .goog-te-gadget { font-family: inherit !important; font-size: 0 !important; }
#google_translate_element .goog-te-gadget-simple {
    background: transparent !important; border: 1px solid rgba(246,241,234,0.3) !important;
    border-radius: 999px !important; padding: 5px 10px !important; display: inline-flex !important;
    align-items: center !important; line-height: 1 !important;
}
#google_translate_element .goog-te-gadget-simple img { display: none !important; }
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value,
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span {
    color: var(--smoke) !important; font-size: 0.78rem !important; font-family: inherit !important;
}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before { content: "🌐 "; }
@media (max-width: 800px) {
    .nav-toggle { display: block; }
    .main-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--char); padding: 8px 24px 20px; max-height: 80vh; overflow-y: auto;
    }
    .main-nav.nav-open { display: flex; }
    .nav-item { position: static; width: 100%; flex-direction: column; align-items: flex-start; height: auto; }
    .nav-item > a { padding: 12px 0; width: 100%; }
    .dropdown-menu {
        display: flex; position: static; padding-top: 0; margin-left: 12px;
    }
    .dropdown-menu-inner { background: none; box-shadow: none; padding: 0 0 8px; min-width: 0; }
    .dropdown-menu a { padding: 8px 0; color: rgba(246,241,234,0.65); }
    .nav-item.has-dropdown > a::after { display: none; }
}

/* Hero */
.hero { background: var(--char); color: var(--smoke); }
.hero .wrap { display: grid; gap: 40px; padding-top: 80px; padding-bottom: 80px; }
@media (min-width: 800px) { .hero .wrap { grid-template-columns: 1fr 1fr; align-items: center; } }
.hero h1 { font-size: 2.5rem; font-weight: 700; margin-top: 12px; }
@media (min-width: 800px) { .hero h1 { font-size: 3rem; } }
.hero p { max-width: 420px; margin-top: 20px; color: rgba(246,241,234,0.7); }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.btn-ember {
    background: var(--ember); color: var(--smoke); border-radius: 999px; padding: 12px 24px;
    font-weight: 600; font-size: 0.9rem; display: inline-block; border: none; cursor: pointer;
}
.btn-outline {
    border: 1px solid rgba(246,241,234,0.3); border-radius: 999px; padding: 12px 24px;
    font-weight: 600; font-size: 0.9rem; display: inline-block;
}
.btn-outline:hover { border-color: var(--smoke); }
.hero-visual {
    aspect-ratio: 4/3; border-radius: 24px; overflow: hidden;
    background: linear-gradient(135deg, rgba(193,80,46,0.3), rgba(91,107,79,0.2));
}

/* Sections */
.section { padding: 64px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; }

/* Category grid */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .category-grid { grid-template-columns: repeat(6, 1fr); } }
.category-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.category-tile:hover .category-circle { box-shadow: 0 0 0 2px var(--ember); }
.category-circle {
    width: 100px; height: 100px; border-radius: 50%; background: rgba(138,128,120,0.2);
    overflow: hidden;
}
.category-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-tile span { font-size: 0.85rem; font-weight: 500; }
.category-tile:hover span { color: var(--ember); }

/* Recipe grid */
.recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 24px; margin-top: 32px; }
@media (min-width: 900px) { .recipe-grid { grid-template-columns: repeat(4, 1fr); } }
.article-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0; display: block; }
.article-content p { margin-top: 12px; }
.article-content h2, .article-content h3 { margin-top: 28px; }

.recipe-card-image {
    position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden;
    background: rgba(138,128,120,0.2);
}
.recipe-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-time {
    position: absolute; bottom: 8px; right: 8px; background: rgba(34,27,23,0.8); color: var(--smoke);
    border-radius: 999px; padding: 4px 10px; font-size: 0.72rem; font-weight: 500;
}
.recipe-card h3 { margin-top: 8px; font-size: 1.1rem; font-weight: 600; }
.recipe-card:hover h3 { color: var(--ember); }

/* Featured band */
.featured-band { background: rgba(91,107,79,0.1); }
.featured-band .wrap { display: grid; gap: 40px; padding: 64px 24px; }
@media (min-width: 800px) { .featured-band .wrap { grid-template-columns: 1fr 1fr; align-items: center; } }
.featured-image { aspect-ratio: 4/3; border-radius: 24px; background: rgba(138,128,120,0.2); overflow: hidden; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-band p.intro { color: var(--ash); margin-top: 16px; }
.btn-char {
    background: var(--char); color: var(--smoke); border-radius: 999px; padding: 12px 24px;
    font-weight: 600; font-size: 0.9rem; display: inline-block; margin-top: 24px; border: none; cursor: pointer;
}

/* Newsletter */
.newsletter-section { max-width: 640px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.newsletter-section p.lead { max-width: 400px; margin: 16px auto 0; color: var(--ash); }
.newsletter-form { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; max-width: 460px; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .newsletter-form { flex-direction: row; } }
.newsletter-form input {
    border: 1px solid rgba(138,128,120,0.4); border-radius: 999px; padding: 10px 16px; font-size: 0.9rem;
    outline: none; font-family: inherit;
}
.newsletter-form input:focus { border-color: var(--ember); }
.newsletter-form input[type=email] { flex: 1; }
.newsletter-message { font-weight: 500; color: var(--herb); }
.newsletter-error { font-size: 0.85rem; color: var(--ember); }

/* Footer */
.site-footer { margin-top: 96px; background: var(--char); color: var(--smoke); }
.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 56px 24px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid .logo-note { margin-top: 12px; font-size: 0.9rem; color: rgba(246,241,234,0.6); max-width: 260px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; color: rgba(246,241,234,0.8); }
.footer-grid a:hover { color: var(--ember); }
.footer-eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246,241,234,0.5); margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid rgba(246,241,234,0.1); text-align: center; padding: 16px; font-size: 0.75rem; color: rgba(246,241,234,0.4); }

/* Recipe detail page */
.recipe-detail { max-width: 768px; margin: 0 auto; padding: 64px 24px; }
.recipe-detail h1 { font-size: 2.2rem; margin-top: 8px; }
.recipe-detail .meta { display: flex; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: var(--ash); }
.recipe-hero-image { margin-top: 32px; aspect-ratio: 16/9; border-radius: 24px; overflow: hidden; background-color: rgba(138,128,120,0.2); }
.recipe-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-body { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 800px) { .recipe-body { grid-template-columns: 1fr 2fr; } }
.recipe-body ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: 0.9rem; }
.recipe-body li { border-bottom: 1px solid rgba(138,128,120,0.2); padding-bottom: 8px; margin-bottom: 8px; }
.recipe-steps { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 24px; }
.recipe-steps p.step-title { font-weight: 600; margin: 0; }
.recipe-steps p.step-content { margin: 4px 0 0; font-size: 0.9rem; color: var(--ash); }

/* Admin */
.admin-wrap { max-width: 1152px; margin: 0 auto; padding: 40px 24px; display: flex; gap: 40px; }
.admin-sidebar { width: 190px; flex-shrink: 0; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; font-weight: 500; margin-top: 16px; }
.admin-sidebar nav a:hover { color: var(--ember); }
.admin-nav-group-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ash); margin-top: 18px; }
.admin-nav-group-label:first-child { margin-top: 0; }
.admin-main { flex: 1; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.admin-stat { border: 1px solid rgba(138,128,120,0.2); border-radius: 12px; padding: 20px; }
.admin-stat strong { font-size: 1.8rem; display: block; }
.admin-stat span { font-size: 0.85rem; color: var(--ash); }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 0.9rem; }
.admin-table th { text-align: left; color: var(--ash); font-weight: 500; padding-bottom: 8px; }
.admin-table td { padding: 12px 0; border-top: 1px solid rgba(138,128,120,0.15); }
.status-published { color: var(--herb); }
.status-draft { color: var(--ash); }
.admin-form { display: flex; flex-direction: column; gap: 20px; max-width: 640px; margin-top: 24px; }
.admin-form label { font-size: 0.9rem; font-weight: 500; display: block; margin-bottom: 6px; }
.admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=email],
.admin-form input[type=password], .admin-form textarea {
    width: 100%; border: 1px solid rgba(138,128,120,0.3); border-radius: 8px; padding: 8px 12px;
    font-size: 0.9rem; font-family: inherit; outline: none;
}
.admin-form input:focus, .admin-form textarea:focus { border-color: var(--ember); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
    border: 1px solid rgba(138,128,120,0.3); border-radius: 999px; padding: 6px 14px; font-size: 0.8rem;
    font-weight: 500; color: var(--ash); background: none; cursor: pointer;
}
.chip.active { border-color: var(--ember); background: var(--ember); color: var(--smoke); }
.repeatable-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.repeatable-row input { flex: 1; }
.remove-row { background: none; border: none; color: var(--ash); cursor: pointer; font-size: 1rem; }
.remove-row:hover { color: var(--ember); }
.add-row-btn { align-self: flex-start; background: none; border: none; color: var(--ember); font-weight: 500; font-size: 0.9rem; cursor: pointer; padding: 0; }
.step-box { border: 1px solid rgba(138,128,120,0.3); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.step-box input { border: none; border-bottom: 1px solid rgba(138,128,120,0.2); padding: 4px 0; font-weight: 600; margin-bottom: 8px; }
.step-box textarea { border: none; padding: 4px 0; font-size: 0.9rem; }
.checkbox-row { display: flex; gap: 24px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.login-wrap { max-width: 360px; margin: 80px auto; padding: 0 24px; }
.error-msg { color: var(--ember); font-size: 0.9rem; }
.thumb-preview { margin-top: 8px; width: 120px; height: 120px; border-radius: 8px; object-fit: cover; }
.empty-state { color: var(--ash); font-size: 0.9rem; margin-top: 24px; }

/* Printen */
@media print {
    .site-header, .site-footer, .no-print, #cooking-mode-overlay { display: none !important; }
    body { background: white; color: black; }
    .recipe-detail { max-width: 100%; padding: 0; }
    .recipe-hero-image { max-height: 280px; }
    a { color: black; text-decoration: none; }
}