:root{
  --gf-text:#111;
  --gf-muted:#6b7280;
  --gf-bg:#fff;
  --gf-surface:#fafbfc;
  --gf-accent:#111;        /* sort som ønsket */
  --gf-accent-contrast:#fff;
  --gf-border:#e5e7eb;
  --gf-border-strong:#d1d5db;
  --gf-radius:14px;
}

.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

.gfF-wrap{ color:var(--gf-text); }
.gfF-title{
  font-family: inherit;
  font-size: clamp(26px, 2.4vw, 36px);
  margin: 0 0 14px 0;
}

.gfF-header{
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--gf-bg), var(--gf-bg));
  padding-top: 10px;
}

/* Toolbar layout */
.gfF-toolbar{
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; padding:8px 0 18px 0; border-bottom:1px solid var(--gf-border);
}

/* Afdelings-faner */
.gfF-tabs{ display:flex; gap:12px; flex-wrap:wrap; }
.gfF-tab{
  appearance:none; border:1.5px solid var(--gf-accent); background:transparent;
  color:var(--gf-accent); border-radius:999px; padding:10px 16px;
  cursor:pointer; font-weight:600; transition: all .15s ease;
}
.gfF-tab:hover{ background:var(--gf-accent); color:var(--gf-accent-contrast); }
.gfF-tab[aria-pressed="true"]{
  background:var(--gf-accent); color:var(--gf-accent-contrast);
}

/* Filters on same row */
.gfF-filters{ display:flex; gap:12px; align-items:center; }
.gfF-filters select,
.gfF-filters input[type="search"]{
  border:1px solid var(--gf-border-strong); background:var(--gf-bg);
  padding:12px 14px; border-radius:12px; font-size:16px; min-width:240px;
}

/* Kategori-sektioner */
.gfF-cat{ padding:22px 0; }
.gfF-cat + .gfF-cat{ border-top:1px solid var(--gf-border); }
.gfF-catTitle{
  font-size: clamp(22px, 2vw, 30px);
  margin: 10px 0 14px;
}

/* Retkort */
.gfF-card{ padding:12px 0; }
.gfF-cardTitle{
  font-size: clamp(18px, 1.7vw, 22px);
  margin: 4px 0 10px;
}

/* To kolonner: ingredienser / steps */
.gfF-cardBody{
  display:grid; gap:18px; grid-template-columns: 1fr;
}
@media (min-width: 880px){
  .gfF-cardBody{ grid-template-columns: 1fr 1.6fr; }
}

/* Bokse */
.gfF-box{
  background: var(--gf-surface);
  border: 1px solid var(--gf-border-strong);
  border-radius: var(--gf-radius);
  padding:16px 18px;
}
.gfF-ingredients h5,
.gfF-steps h5{
  margin: 0 0 8px 0; font-size: 16px; font-weight: 700;
}

/* Lister/metatekst */
.gfF-ul{ margin: 0; padding-left: 1.2rem; }
.gfF-ul li{ margin: 4px 0; }
.gfF-meta{ color:var(--gf-muted); font-size: 15px; }

/* Small polish */
#gfF-content{ padding-top: 10px; }

/* ——— layout: kortets to bokse ——— */
.gfF-cardBody{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  margin-top:10px;
}
@media (max-width: 1000px){
  .gfF-cardBody{ grid-template-columns: 1fr; }
}

/* boks-styling */
.gfF-box{
  background:#fafcfd;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:20px 22px;
}

/* ——— steps som to kolonner ——— */
.gfF-stepsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
@media (max-width: 900px){
  .gfF-stepsGrid{ grid-template-columns: 1fr; }
}

.gfF-stepHdr{
  margin:0 0 6px 0;
}

/* ——— ingrediens-format: “mængde x navn” ——— */
.gfF-ing li{ display:flex; align-items:baseline; gap:6px; }
.gfF-amt{ font-weight:600; white-space:nowrap; }
.gfF-times{ font-style:italic; opacity:.9; }

/* ——— topkontroller: wrap pænt på mobil ——— */
.gfF-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.gfF-toolbar .gfF-filters{ display:flex; flex-wrap:wrap; gap:12px; }
.gfF-toolbar select,
.gfF-toolbar input[type="search"]{
  flex:1 1 260px;
  min-width:220px;
  max-width:100%;
}
@media (max-width:720px){
  .gfF-toolbar select,
  .gfF-toolbar input[type="search"]{ flex-basis:100%; }
}

/* --- Layout: filters on one row (category + search) --- */
[data-gf-opskrifter] .gfF-toolbar{
  display:flex;
  align-items:center;
  gap:16px;
}

/* put the two controls in a responsive 2-col grid that always stays one row */
[data-gf-opskrifter] .gfF-filters{
  display:grid;
  grid-template-columns: 1fr 1fr; /* same row */
  gap:12px;
  width:100%;
  max-width: 720px;          /* keeps them from growing too wide */
  margin-left:auto;          /* pushes filters to the right of the tabs */
}

[data-gf-opskrifter] #gfF-filter-cat,
[data-gf-opskrifter] #gfF-search{
  min-width:0;               /* allow shrinking instead of overflow */
  width:100%;
}

/* slightly tighter on very small devices but still 2 columns */
@media (max-width: 420px){
  [data-gf-opskrifter] .gfF-filters{ gap:8px; }
  [data-gf-opskrifter] #gfF-filter-cat,
  [data-gf-opskrifter] #gfF-search{ font-size:16px; }
}

/* --- Space below WP admin bar (no sticky/z-index tricks) --- */
body.admin-bar [data-gf-opskrifter]{
  padding-top:32px;          /* desktop admin bar height */
}
@media (max-width: 782px){
  body.admin-bar [data-gf-opskrifter]{ padding-top:46px; } /* mobile admin bar */
}