/* === Opskrift-Drikke — Green Modern Theme v3 (clean, centered, robust) === */

/* -------- Color System -------- */
:root{
  --bg:#f6fbf8;
  --surface:#ffffff;
  --ink:#0f1712;
  --muted:#66746b;
  --brand:#18a56d;
  --brand-2:#0f7f55;
  --line:#e3ebe6;
  --ring:rgba(24,165,109,.32);
  --shadow:0 12px 24px rgba(8,24,20,.08), 0 2px 8px rgba(8,24,20,.06);
  --shadow-sm:0 6px 14px rgba(8,24,20,.06), 0 1px 4px rgba(8,24,20,.05);
}

/* Dark theme via [data-theme="dark"] and prefers-color-scheme as fallback */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1410;
    --surface:#0f1914;
    --ink:#e7f4ed;
    --muted:#a6b5ad;
    --brand:#27c184;
    --brand-2:#1ca070;
    --line:#213328;
    --ring:rgba(39,193,132,.38);
    --shadow:0 12px 24px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.32);
    --shadow-sm:0 6px 14px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.28);
  }
}
[data-theme="dark"]{
  --bg:#0d1410;
  --surface:#0f1914;
  --ink:#e7f4ed;
  --muted:#a6b5ad;
  --brand:#27c184;
  --brand-2:#1ca070;
  --line:#213328;
  --ring:rgba(39,193,132,.38);
  --shadow:0 12px 24px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.32);
  --shadow-sm:0 6px 14px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.28);
}

/* -------- Base & Typography -------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 10px; letter-spacing:.1px}
h1{font-size:40px; line-height:1.15}
h2{font-size:24px}
h3{font-size:19px}
p{margin:0 0 12px}
kbd{font:12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; padding:3px 6px; border:1px solid var(--line); border-radius:8px; background:#fff}
[data-theme="dark"] kbd{background:#0a120e; color:var(--ink)}

/* -------- Layout Helpers -------- */
.container{max-width:1120px; margin:0 auto; padding:0 20px}
.center{margin-left:auto; margin-right:auto}
.spacer{height:16px}

/* -------- Header -------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
[data-theme="dark"] .site-header{background:rgba(15,25,20,.7)}
.site-header .inner{display:flex; align-items:center; gap:14px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800}
.logo-ico{width:24px; height:24px; color:var(--brand)}
nav{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
nav a{padding:8px 10px; border-radius:10px}
nav a:hover{background:rgba(24,165,109,.10)}
.header-actions{display:flex; gap:8px; margin-left:8px}
.icon-btn{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface); cursor:pointer; box-shadow:var(--shadow-sm)}
.icon-btn:hover{background:rgba(24,165,109,.10)}
.ico{width:20px; height:20px}

/* -------- Main -------- */
main{padding:20px 0 28px}

/* -------- Hero -------- */
.hero{
  padding:30px 0 16px;
  background:
    radial-gradient(900px 300px at 20% -10%, rgba(24,165,109,.12), transparent 60%),
    radial-gradient(600px 240px at 100% 0%, rgba(24,165,109,.10), transparent 60%);
}
.hero .hero-body{display:flex; flex-direction:column; gap:14px}
.hero h1{font-size:44px}
.hero-sub{color:var(--muted); font-size:18px; max-width:760px}
.hero-actions{display:flex; flex-direction:column; gap:10px}
.hero-search{
  display:flex; align-items:center; gap:10px; width:100%; max-width:720px;
  padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); cursor:pointer;
}
.hero-search span{flex:1; text-align:left}
.hero-chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-block; padding:8px 12px; border:1px solid var(--line); background:var(--surface); border-radius:999px}
.chip:hover{background:rgba(24,165,109,.08)}

/* -------- Hero Gallery -------- */
.hero-gallery{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.hero-card{display:block; border:1px solid var(--line); background:var(--surface); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .16s ease}
.hero-card:hover{transform:translateY(-3px)}
.hero-card img{width:100%; height:230px; object-fit:cover}
.hero-card figcaption{padding:10px 12px; font-weight:700}

/* -------- Sections -------- */
.section{padding:18px 0 6px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:8px}
.section-head .hint{color:var(--muted)}
.link{color:var(--brand)}

/* -------- Quick Links -------- */
.quick-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px}
.quick{display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); background:var(--surface); border-radius:14px; box-shadow:var(--shadow-sm); transition:transform .16s ease}
.quick:hover{transform:translateY(-3px)}

/* -------- Cards Grid (recipes) -------- */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(240px,1fr))}
.card{display:flex; gap:12px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .16s ease}
.card:hover{transform:translateY(-3px)}
.thumb-sq{width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background:rgba(24,165,109,.10)}
.card h3{font-size:17px; margin:2px 0 6px}
.meta{color:var(--muted); font-size:13.5px}

/* -------- Season Strip -------- */
.season{margin-top:8px}
.season-body{display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(24,165,109,.10), rgba(24,165,109,0)); box-shadow:var(--shadow-sm)}
.season-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(24,165,109,.12); font-size:12px; font-weight:800}
.season-actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent}

/* -------- CTA -------- */
.cta{margin-top:12px}
.cta-box{padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow)}

/* -------- Recipe Page Helpers -------- */
.badge{display:inline-block; padding:5px 10px; border-radius:999px; background:rgba(24,165,109,.12); color:#0a6c48; font-size:12px; font-weight:700}
.recipe-meta{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px}
hr.sep{border:0; border-top:1px dashed var(--line); margin:18px 0}
.section h2{font-size:22px}
.figure{width:100%; aspect-ratio:1/1; border-radius:18px; overflow:hidden; background:rgba(24,165,109,.10); border:1px solid var(--line)}
.figure img{width:100%; height:100%; object-fit:cover}

/* -------- Search Overlay -------- */
.search-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); display:grid; place-items:start center; padding-top:10vh}
.search-panel{width:min(900px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:14px}
.search-head{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:6px 0 10px; margin:0 6px 10px}
.search-input{flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:#111}
[data-theme="dark"] .search-input{background:#0a120e; color:var(--ink)}

/* -------- Footer -------- */
.site-footer{margin-top:24px; padding:22px 0; border-top:1px solid var(--line); color:var(--muted)}

/* -------- Focus & Motion -------- */
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* -------- Responsive -------- */
@media (max-width:860px){
  h1{font-size:36px}
  .hero-card img{height:200px}
}
@media (max-width:640px){
  h1{font-size:30px}
  .hero-card img{height:170px}
}
/* --- Fine-tuning til forsiden (bevarer din eksisterende stil) --- */

/* Lidt mere luft og maxbredde til store skærme */
.container{max-width:1160px}

/* Hero: stærkere kontrast i dark mode og pænere spacing */
[data-theme="dark"] .hero{
  background:
    radial-gradient(900px 300px at 20% -10%, rgba(39,193,132,.14), transparent 60%),
    radial-gradient(600px 240px at 100% 0%, rgba(39,193,132,.12), transparent 60%);
}
.hero .hero-body{gap:16px}
.hero-sub{font-size:19px}

/* Søg i hero: bedre indtastningsfølelse og placeholder-farve */
.hero-search input{
  font-size:16px; line-height:1.5; color:inherit;
}
.hero-search input::placeholder{color:var(--muted)}

/* Chips & knapper: tydeligere hover/fokus */
.chip:hover{transform:translateY(-2px); transition:transform .12s ease}
.chip:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* Kort: mere “løft” og plads til tekst */
.card{align-items:center}
.card .card-body{flex:1}
.card:hover{box-shadow:var(--shadow)}

/* Grid: lidt større luft på mobile */
@media (max-width:640px){
  .grid{gap:18px}
  .quick-grid{gap:14px}
}

/* Sticky header over billeder: let baggrund i scrolled tilstand */
.site-header{transition:background-color .18s ease, border-color .18s ease}
@supports (backdrop-filter: blur(8px)){
  .site-header{backdrop-filter:saturate(1.2) blur(8px)}
}

/* Sæson-kort: strammere hierarchy */
.season-body h3{margin-top:4px; font-size:22px}

/* CTA: mere spacing i knap-række */
.cta-actions{gap:10px}

/* --- Skelet-placeholders (til “kommer snart”/loading) --- */
.skeleton{position:relative; overflow:hidden; background:var(--line)}
.skeleton::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:skeleton-shimmer 1.2s infinite;
}
.skeleton-text{height:0.9em; border-radius:6px}
.skeleton-thumb{height:180px; border-radius:14px}

@keyframes skeleton-shimmer{
  100%{transform:translateX(100%)}
}

/* Eksempel-utility til skelet-kort (brug i HTML ved behov):
   <div class="card">
     <figure class="thumb-sq skeleton skeleton-thumb"></figure>
     <div class="card-body" style="width:100%">
       <div class="skeleton skeleton-text" style="width:60%; margin:6px 0 10px"></div>
       <div class="skeleton skeleton-text" style="width:40%"></div>
     </div>
   </div>
*/

/* Helt neutral inputstil på tværs af browsere */
input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}

/* Fjern alle Safari-specifikke søgefeltsrester */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none !important;
}

/* pricerunner kort tweeks (valgfri) */
#pr-home-slot .card { border-color: rgba(0,0,0,.06); }