/* =====================================================================
   Vé's Receptenboek v2 — gedeelde stijl
   Identiteit: de vertrouwde zwarte header en fotografie-gedreven witte
   kaarten van het origineel, aangescherpt. Fraunces (display serif met
   culinair karakter) draagt de titels, Raleway blijft de bodystem.
   ===================================================================== */

:root {
  --rb-ink: #1b1b1b;            /* header, koppen, primaire knoppen */
  --rb-paper: #faf9f7;          /* warme achtergrond i.p.v. hard wit */
  --rb-card: #ffffff;
  --rb-butter: #f5b301;         /* sterren & accenten — de goudgele ster van het origineel */
  --rb-herb: #4a6b4f;           /* secundair accent: keukenkruid-groen */
  --rb-line: #e7e3dd;
  --rb-font-display: 'Fraunces', Georgia, serif;
  --rb-font-body: 'Raleway', system-ui, sans-serif;
}

body {
  font-family: var(--rb-font-body);
  background: var(--rb-paper);
  color: var(--rb-ink);
}

h1, h2, h3, .recipe-card-title, .random-row-title, .login-title {
  font-family: var(--rb-font-display);
  font-weight: 700;
}

h2 { font-size: 1.6rem; }

.noselect { user-select: none; }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.app-header {
  background: var(--rb-ink);
  padding-top: .65rem;
  padding-bottom: .65rem;
  /* Boven andere sticky balken (zoals .editor-toolbar) uitstijgen: anders
     wint die balk de stacking-tie bij gelijke z-index (1020 via .sticky-top)
     omdat ze later in de DOM staat, en verdwijnen de navbar-dropdowns eronder. */
  z-index: 1030;
}

.app-header .brand-icon { 
  height: 34px; 
  width: 34px; 
  filter: invert(1);
  opacity: 0.8;
}

.app-header .brand-text {
  font-family: var(--rb-font-body);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 1.05rem;
}

.app-header .nav-link {
  font-weight: 600;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .05em;
}

.app-header .nav-link.active { color: var(--rb-butter); }

/* ---------------------------------------------------------------------
   Categorieën-megamenu
   Uitgangspunt: het paneel volgt de breedte van de paginacontainer (net
   als de rest van de site) i.p.v. de breedte van de "Categorieën"-link
   zelf. Zo blijft het altijd binnen het scherm — geen overflow meer op
   smallere desktopvensters — én staat het in lijn met de content eronder.
   Popper wordt uitgeschakeld via data-bs-display="static" op de toggle,
   zodat onderstaande CSS de positionering volledig bepaalt.
   --------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .app-header .container { position: relative; }

  .nav-item-categories { position: static; }

  .megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    margin-top: .75rem;
    max-height: min(70vh, 30rem);
    overflow-y: auto;
  }
}

@media (max-width: 1199.98px) {
  /* In het offcanvas-paneel vouwt het menu gewoon open in de lijst,
     als een gewoon paneelonderdeel — geen los zwevend kader nodig. */
  .megamenu {
    position: static;
    width: 100%;
    min-width: 0;
    max-height: none;
    margin-top: .5rem;
    border: 0;
    box-shadow: none;
    background-color: transparent !important;
  }
}

.megamenu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem .6rem .7rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.megamenu-head-title {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

.megamenu-head-link {
  font-size: .8rem;
  font-weight: 600;
  color: inherit;
  opacity: .75;
  text-decoration: none;
  white-space: nowrap;
}

.megamenu-head-link:hover { opacity: 1; color: var(--rb-butter); }

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .15rem .5rem;
  padding: 0 .6rem .3rem;
}

.megamenu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .5rem;
  border-radius: .5rem;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  min-width: 0;
}

.megamenu-item:hover,
.megamenu-item:focus-visible { background: rgba(255, 255, 255, .08); }

.megamenu-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.megamenu-count {
  margin-left: auto;
  font-size: .75rem;
  opacity: .55;
  flex-shrink: 0;
}

.cat-icon { height: 20px; width: 20px; }
.cat-icon-lg { height: 28px; width: 28px; }

/* In de donkere header de zwarte category-SVG's inverteren */
.app-header .cat-icon, [data-bs-theme="dark"] .megamenu .cat-icon { filter: invert(1); }

/* ---------------------------------------------------------------------
   Sectiekoppen & knoppen
   --------------------------------------------------------------------- */
.section-divider { border-color: var(--rb-line); opacity: 1; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rb-line);
  background: var(--rb-card);
  color: var(--rb-ink);
  font-size: 1.15rem;
  padding: 0;
}

.btn-icon:hover:not(:disabled) { background: var(--rb-ink); color: #fff; }
.btn-icon:disabled { opacity: .35; }
.btn-icon.btn-sm { width: 28px; height: 28px; font-size: .9rem; }

.section-nav { display: inline-flex; align-items: center; gap: .5rem; }
.section-nav-page { font-weight: 600; opacity: .5; }

/* ---------------------------------------------------------------------
   Recept-kaarten (gedeeld: home, zoeken, categorieën, favorieten)
   --------------------------------------------------------------------- */
.recipe-card {
  border: none;
  border-radius: .9rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--rb-card);
  box-shadow: 0 1px 3px rgba(27, 27, 27, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}

.recipe-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(27, 27, 27, .13);
  color: inherit;
}

.recipe-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: var(--rb-ink);
}

.recipe-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Recepten zonder foto: het categorie-icoon heel flou op zwart.
   De cat-SVG's zijn zwarte lijntekeningen; invert(1) maakt ze wit,
   lage opacity + blur maken er een subtiele textuur van. */
.recipe-placeholder {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #232323 0%, #161616 70%, #101010 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.recipe-placeholder img {
  width: 52% !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: .13;
  filter: invert(1) blur(0.2px);
  transform: rotate(-5deg) scale(1.1);
}

.recipe-card-cat {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(27, 27, 27, .82);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .6rem;
  border-radius: 2rem;
}

.recipe-card-cat .cat-icon { height: 15px; width: 15px; filter: invert(1); }

.recipe-card-fav {
  position: absolute;
  right: .75rem;
  top: .75rem;
  color: #fff;
  background: rgba(27, 27, 27, .55);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recipe-card-fav iconify-icon { color: #e2555d; }

.recipe-card-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: #8a857d;
  margin-bottom: .35rem;
}

.recipe-card-owner {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #b3ada3;
  border: 1px solid var(--rb-line);
  border-radius: 2rem;
  padding: .1rem .45rem;
}

.recipe-card-title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: .4rem;
}

/* Sterren */
.stars { color: var(--rb-butter); display: inline-flex; }
.stars iconify-icon { font-size: 1.05rem; }

.recipe-card-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}

.rating-meta { color: #8a857d; }

.rating-mine {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  color: var(--rb-herb);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   Zoek-overlay
   --------------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  /* Onder de navbar starten (--app-header-h, zie common_header.js) zodat
     die zichtbaar en bruikbaar blijft terwijl de overlay open staat. */
  top: var(--app-header-h, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  /* Moet boven de offcanvas (1045) en zijn backdrop (1040) liggen. Op 1040
     ving de backdrop alle taps op en kon je op mobiel niets intypen. */
  z-index: 1060;
  background: var(--rb-paper);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.search-open { overflow: hidden; }

.search-input-group { flex: 1; }
.search-input-group .input-group-text { background: var(--rb-card); }

/* Onder 16px zoomt iOS Safari bij focus in op het veld en raak je de rest
   van de overlay kwijt. */
.search-overlay .form-control,
.search-overlay .form-select {
  font-size: 16px;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.app-footer {
  background: #f1eee9;
  border-top: 1px solid var(--rb-line);
}

.footer-brand {
  font-weight: 800;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------------
   Invoerpil (aantal personen, bereidingstijd, ...)
   Staat hier en niet in editor.css: de collectiepagina gebruikt dezelfde
   pil maar laadt editor.css niet, waardoor het invoerveld daar terugviel
   op de standaardstijl van de browser.
   --------------------------------------------------------------------- */
.editor-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--rb-line);
  border-radius: .5rem;
  background: var(--rb-card);
  padding: .35rem .7rem;
  font-size: .9rem;
}

.editor-pill input {
  width: 3.2rem;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 600;
}

.editor-pill input:focus { outline: none; }