/* ===========================================================
   Mams at Work - Recepten
   Stijl afgestemd op de slowcooker e-books:
   crème achtergrond, oud-roze serif-titels, taupe accenten,
   warme gouddetails en zachte afgeronde vlakken.
   =========================================================== */

:root{
  /* Achtergronden */
  --cream:#FBF6EF;        /* paginakleur */
  --cream-2:#F7EFE3;      /* zachte variant */
  --panel:#F1E7D7;        /* beige vlak (badges, info) */
  --card:#FFFFFF;         /* witte kaarten */

  /* Accenten */
  --rose:#BE8576;         /* oud-roze: titels, sectiekoppen */
  --rose-deep:#A96E5E;    /* sterker, voor hover */
  --rose-soft:#EAD4CC;    /* blush: chips en tip-cirkel */
  --taupe:#7E7167;        /* hoofdstukkoppen, secundair */
  --goud:#BFA14A;         /* merkgoud, spaarzaam */

  /* Tekst en lijnen */
  --tekst:#4A413B;        /* warme donkere tekst */
  --muted:#9A8C80;        /* gedempt */
  --rand:#E6D9C8;         /* haarlijnen */

  /* Status */
  --fout-bg:#F6E4DF; --fout:#A6503E;
  --ok-bg:#E8F0E5;   --ok:#5C7A52;

  --radius:14px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--tekst);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
}

/* ---- Header ---- */
.site-header{
  background:var(--cream-2);
  border-bottom:1px solid var(--rand);
  padding:0;
}
.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 26px;
}
.brand{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  color:var(--rose);
  letter-spacing:.04em;
}
.site-nav{
  display:flex;align-items:center;gap:20px;
  padding:0 26px;
}
.user-email{font-size:.8rem;color:var(--muted);}
.inline-form{display:inline;margin:0;}
.nav-link{
  color:var(--taupe);text-decoration:none;
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
}
.nav-link:hover{color:var(--rose);}
.btn-link{
  background:none;border:none;color:var(--taupe);
  font-family:inherit;font-size:.82rem;font-weight:500;
  cursor:pointer;padding:0;letter-spacing:.02em;
}
.btn-link:hover{color:var(--rose);text-decoration:underline;}

/* ---- Layout ---- */
.site-main{width:100%;margin:0;padding:28px 28px 44px;box-sizing:border-box;}

.card{
  background:var(--card);
  border:1px solid var(--rand);
  border-radius:var(--radius);
  padding:34px 38px;
  box-shadow:0 6px 22px rgba(126,113,103,.07);
}
.auth-card{max-width:400px;margin:7vh auto 0;}

/* ---- Koppen ---- */
h1{
  font-family:var(--serif);
  font-size:2.1rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--rose);
  margin:0 0 18px;
  line-height:1.15;
}
h2{font-family:var(--serif);font-weight:600;color:var(--rose);}

label{display:block;font-size:.82rem;font-weight:500;margin:16px 0 6px;color:var(--taupe);}

/* ---- Formuliervelden ---- */
input[type=email],input[type=password],input[type=number],input[type=text],
textarea,select{
  width:100%;padding:11px 13px;
  border:1px solid var(--rand);border-radius:9px;
  font-family:inherit;font-size:.95rem;color:var(--tekst);
  background:var(--card);
}
textarea{resize:vertical;}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(190,133,118,.18);
}

/* ---- Knoppen ---- */
.btn{
  margin-top:22px;width:100%;
  background:var(--rose);color:#fff;
  border:none;padding:12px 16px;border-radius:9px;
  font-family:inherit;font-size:.92rem;font-weight:600;
  letter-spacing:.03em;cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--rose-deep);}
.btn-small{
  display:inline-block;background:var(--rose);color:#fff;text-decoration:none;
  padding:8px 14px;border-radius:8px;font-size:.82rem;font-weight:600;letter-spacing:.02em;
  transition:background .15s;
}
.btn-small:hover{background:var(--rose-deep);}
.btn-link-dark{color:var(--rose);font-weight:600;text-decoration:none;margin-left:14px;}
.btn-link-dark:hover{color:var(--rose-deep);}
.btn-add{
  margin-top:10px;background:none;border:1px dashed var(--rose);color:var(--rose);
  padding:9px 14px;border-radius:9px;font-family:inherit;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.btn-add:hover{background:var(--cream-2);border-color:var(--rose-deep);}
.btn-remove{
  margin-top:8px;background:none;border:none;color:var(--fout);font-family:inherit;
  font-size:.82rem;cursor:pointer;padding:0;
}
.btn-remove:hover{text-decoration:underline;}
.btn-danger{
  background:var(--fout);color:#fff;border:none;padding:10px 16px;border-radius:9px;
  font-family:inherit;font-weight:600;cursor:pointer;
}
.danger-form{max-width:820px;margin:14px auto 0;}

/* ---- Tekst en links ---- */
.muted{color:var(--muted);font-size:.88rem;}
.muted a{color:var(--rose);font-weight:600;text-decoration:none;}
.muted a:hover{text-decoration:underline;}

/* ---- Flashberichten ---- */
.flashes{max-width:400px;margin:0 auto 18px;}
.flash{padding:11px 15px;border-radius:9px;font-size:.88rem;margin-bottom:10px;}
.flash-error{background:var(--fout-bg);color:var(--fout);}
.flash-success{background:var(--ok-bg);color:var(--ok);}

/* ---- Receptenlijst ---- */
.list-header{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;flex-wrap:wrap;}
.list-header h1{margin:0;}
.recipe-grid{
  display:grid;gap:18px;margin-top:22px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.recipe-card{
  display:block;background:var(--card);border:1px solid var(--rand);
  border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:inherit;
  box-shadow:0 4px 16px rgba(126,113,103,.06);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.recipe-card:hover{
  border-color:var(--rose);
  box-shadow:0 8px 22px rgba(126,113,103,.12);
  transform:translateY(-2px);
}
.recipe-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.recipe-card h2{font-size:1.45rem;font-weight:600;margin:0 0 6px;line-height:1.2;}
.recipe-card h2 a{color:var(--rose);text-decoration:none;}
.recipe-card h2 a:hover{color:var(--rose-deep);}
.recipe-card .muted{margin:0 0 10px;}
.card-meta{
  font-size:.72rem;color:var(--goud);font-weight:600;margin:0;
  text-transform:uppercase;letter-spacing:.12em;
}
.card-actions{margin:10px 0 0;}
.card-actions a{font-size:.82rem;color:var(--rose);font-weight:600;text-decoration:none;}
.card-actions a:hover{text-decoration:underline;}

/* ---- Badges ---- */
.badge{font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.04em;}
.badge-concept{background:var(--panel);color:#9a7b2e;}

/* ===========================================================
   Receptdetail
   =========================================================== */
.recipe-detail{max-width:820px;margin-left:auto;margin-right:auto;}
.detail-top-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}

.detail-photos{margin:0 0 26px;}
.hero-photo{width:100%;max-height:440px;object-fit:cover;border-radius:var(--radius);}
.photo-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px;}
.photo-thumbs img{width:100%;height:104px;object-fit:cover;border-radius:10px;}

.detail-head{display:flex;align-items:center;gap:12px;justify-content:center;text-align:center;}
.detail-head h1{
  margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:1.9rem;
}
.lead{
  font-family:var(--serif);font-size:1.3rem;line-height:1.4;
  color:var(--taupe);text-align:center;margin:8px auto 22px;max-width:46ch;
}

/* Iconenrij: voorbereiding / bereiding / porties (zoals in het e-book) */
.stat-row{
  display:flex;justify-content:center;flex-wrap:wrap;gap:34px;
  padding:18px 0 22px;margin:0 0 26px;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);
}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;min-width:74px;}
.stat svg{width:30px;height:30px;color:var(--rose);}
.stat .stat-label{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--rose);font-weight:600;
}
.stat .stat-value{font-size:.9rem;color:var(--tekst);font-weight:500;}

.publications{
  font-size:.9rem;background:var(--panel);border-radius:10px;padding:12px 16px;margin:0 0 8px;
}
.publications span{font-weight:600;color:var(--rose);}
.media-note{font-style:italic;margin-top:0;}

.detail-section{margin-top:30px;}
.detail-section h2{
  font-size:1.5rem;font-weight:600;color:var(--rose);
  text-transform:uppercase;letter-spacing:.07em;
  margin:0 0 4px;
}
.detail-section h2::after{
  content:"";display:block;width:48px;height:2px;background:var(--rose-soft);
  margin-top:8px;margin-bottom:14px;
}
.detail-section h3{font-family:var(--serif);font-size:1.15rem;color:var(--taupe);margin:18px 0 6px;}

.ingredient-list{list-style:none;padding:0;margin:0;}
.ingredient-list li{padding:7px 0;border-bottom:1px solid var(--cream-2);}
.ingredient-list .qty{display:inline-block;min-width:88px;font-weight:600;color:var(--rose);white-space:nowrap;}

.step-list{padding-left:22px;margin:0;}
.step-list li{padding:7px 0 7px 4px;}
.step-list li::marker{color:var(--rose);font-weight:600;}
.step-meta{font-size:.8rem;color:var(--muted);margin-top:4px;}

.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;}
.tag{background:var(--rose-soft);color:var(--rose-deep);font-size:.76rem;padding:5px 12px;border-radius:999px;letter-spacing:.02em;}

/* ===========================================================
   Formulieren (nieuw / bewerken / rechten)
   =========================================================== */
.check{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--tekst);}
.check input{width:auto;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.form-card{max-width:820px;margin-left:auto;margin-right:auto;}
.section-title{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--rose);
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--rand);
  padding-bottom:8px;margin:30px 0 14px;
}
.rows{display:flex;flex-direction:column;gap:12px;}
.row-item{
  border:1px solid var(--rand);border-radius:10px;padding:14px;background:var(--cream);
  display:flex;flex-direction:column;gap:8px;
}
.form-actions{margin-top:26px;display:flex;align-items:center;}
.form-actions .btn{width:auto;margin-top:0;padding:12px 28px;}

/* Foto's in formulier */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:12px;}
.photo-item{border:1px solid var(--rand);border-radius:10px;padding:8px;text-align:center;background:var(--card);}
.photo-item img{width:100%;height:90px;object-fit:cover;border-radius:7px;}
.photo-item .check{justify-content:center;font-size:.8rem;margin-top:6px;}

/* ---- Tabel (rechtenbeheer e.d.) ---- */
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.data-table th,.data-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rand);}
.data-table th{
  color:var(--rose);font-weight:600;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;
}

/* ---- Receptkaart: foto ---- */
.card-photo-link { display:block; }
.card-photo {
  width:100%; height:160px; object-fit:cover;
  border-radius:var(--radius) var(--radius) 0 0;
  display:block;
}
.recipe-card-body { padding:18px 22px 18px; }
/* kaart zonder foto behoudt de oude padding */
.recipe-card:not(:has(.card-photo)) .recipe-card-body { padding:22px 24px; }

/* ---- Ingrediëntrij: onderste balk ---- */
.ing-bottom-row {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.ing-optional-check { margin:0; white-space:nowrap; }
.ing-notes { flex:1; min-width:140px; }

/* ---- Tag chip-invoer ---- */
.tag-chips-list {
  display:flex; flex-wrap:wrap; gap:7px;
  margin-bottom:10px; min-height:0;
}
.tag-add-row {
  display:flex; gap:8px; align-items:center;
}
.tag-add-row .tag-text-input {
  flex:1; min-width:0;
}
.btn-add-tag {
  white-space:nowrap;
  background:none; border:1px solid var(--rose); color:var(--rose);
  padding:10px 16px; border-radius:9px;
  font-family:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:background .15s, color .15s;
}
.btn-add-tag:hover { background:var(--rose); color:#fff; }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--rose-soft); color:var(--rose-deep);
  font-size:.78rem; font-weight:600;
  padding:5px 10px 5px 13px; border-radius:999px;
  white-space:nowrap;
}
.chip-remove {
  background:none; border:none; cursor:pointer;
  color:var(--rose-deep); font-size:1rem; line-height:1;
  padding:0; display:flex; align-items:center;
}
.chip-remove:hover { color:var(--rose); }

/* ---- Overflow voorkomen op smal scherm ---- */
html, body { overflow-x:hidden; max-width:100%; }
img, input, select, textarea { max-width:100%; }

/* ---- Hamburger-knop (verborgen op desktop) ---- */
.nav-toggle {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
  width:36px; height:36px;
}
.nav-toggle span {
  display:block; height:2px; width:22px;
  background:var(--taupe); border-radius:2px;
  transition:background .15s;
}
.nav-toggle:hover span { background:var(--rose); }

/* ---- Mobiel (tot 640px) ---- */
@media(max-width:640px){
  .header-top { padding:12px 16px; }

  /* Hamburger zichtbaar */
  .nav-toggle { display:flex; }

  /* Nav standaard ingeklapt */
  .site-nav {
    display:none;
    flex-direction:column; align-items:flex-start;
    gap:0; padding:0;
    border-top:1px solid var(--rand);
  }
  /* Nav uitgeklapt */
  .site-nav.nav-open { display:flex; }

  .site-nav .nav-link,
  .site-nav .btn-link,
  .site-nav .user-email {
    display:block; width:100%;
    padding:13px 18px;
    border-bottom:1px solid var(--rand);
    font-size:.95rem;
  }
  .site-nav .inline-form { width:100%; margin:0; }
  .site-nav .inline-form .btn-link { text-align:left; }
  .site-nav .user-email { color:var(--muted); font-size:.82rem; }

  /* Receptengrid: 2 kolommen */
  .site-main { padding:14px 10px 36px; }
  .recipe-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }

  /* Compactere kaart op telefoon */
  .card-photo { height:120px; }
  .recipe-card-body { padding:10px 12px 12px; }
  .recipe-card h2 { font-size:1.05rem; margin-bottom:4px; }
  .recipe-card .muted { display:none; }  /* summary verbergen, alleen foto+titel */
  .recipe-card .card-meta { font-size:.65rem; }
  .recipe-card .card-actions { margin-top:6px; }
}

/* ---- Tablet (641-900px) ---- */
@media(min-width:641px) and (max-width:900px){
  .recipe-grid { grid-template-columns:repeat(2,1fr); }
  .site-main { padding:20px 18px 40px; }
}