/* ====== Base ====== */
:root{
  --blue:#0f4d7f;
  --blue2:#13639f;
  --green:#2e7d32;
  --green-ghost:#e1f3e2;
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#1d2b36;
  --muted:#5b7083;
  --shadow:0 6px 18px rgba(16,38,66,.08);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--blue2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:24px}

/* ====== Header ====== */
.hero{background:linear-gradient(0deg, var(--blue2), var(--blue)); color:#fff; padding:36px 0 28px 0; box-shadow:var(--shadow)}
.hero .title{font-size:36px;font-weight:800;margin:0 0 6px 0}
.hero .subtitle{opacity:.9;font-size:18px;margin:0}

/* ====== UI Bits ====== */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin:16px 0}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){ .grid{grid-template-columns:1fr 1fr} }
h1,h2,h3{margin:0 0 12px 0}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--green-ghost);color:var(--green);font-size:12px;font-weight:700;letter-spacing:.2px}
.btn{display:inline-block;border:none;border-radius:10px;padding:10px 14px;font-weight:700;background:var(--green);color:#fff;cursor:pointer;box-shadow:var(--shadow)}
.btn.ghost{background:#e8f0f7;color:var(--blue2)}
.btn:active{transform:translateY(1px)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 12px 0}
.input{padding:10px 12px;border:1px solid #d5dce3;border-radius:10px;min-width:220px;background:#fff}

/* ====== Recipe Card ====== */
.recipe{display:flex;gap:14px;align-items:flex-start}
.recipe img{width:120px;height:90px;border-radius:10px;object-fit:cover;box-shadow:var(--shadow)}
.recipe .meta{flex:1}
.recipe h3{margin:0 0 6px 0}
.kicker{font-size:12px;color:var(--muted);margin-bottom:8px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.like{margin-left:auto;font-size:13px;color:var(--muted)}
.footer{margin-top:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ===== Detail ===== */
.steps ol{padding-left:18px;margin:8px 0}
.note{background:#fff9e6;border:1px dashed #e7c87a;padding:10px;border-radius:10px;margin-top:10px}
.back{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0 0}
.small{font-size:12px;color:var(--muted)}
.header-links{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.header-links a{color:#fff;background:rgba(255,255,255,.14);padding:8px 10px;border-radius:8px;text-decoration:none}
.header-links a:hover{background:rgba(255,255,255,.22)}
/* Print friendly recipe page */
@media print{
  .hero,.toolbar,.back,.footer{display:none}
  .card{box-shadow:none}
}


/* === v2025-09-26b: Category buttons — more contrast & spacing === */
.toolbar{ gap:12px; }
.toolbar .btn.ghost{
  background:#eff6ff;              /* світліше тло */
  color:#0a4a86;                    /* темніший текст */
  border:2px solid #9ec3ff;         /* виразніший контур */
  padding:12px 20px;                /* більше відступів */
  font-size:17px;                   /* трохи більший текст */
  letter-spacing:.2px;              /* читабельність */
  box-shadow:
    inset 0 8px 24px rgba(11,99,159,.08),
    0 3px 10px rgba(11,99,159,.16);
}
.toolbar .btn.ghost:hover{
  background:#e2efff;
  box-shadow: 0 6px 18px rgba(11,99,159,.22);
  transform: translateY(-1px);
}
.toolbar .btn.ghost.is-active{
  background:#0b5ca7;
  color:#fff;
  border-color:#0b5ca7;
  box-shadow:
    0 8px 22px rgba(11,92,167,.34),
    0 0 0 3px rgba(11,92,167,.18);   /* легке «кільце» довкола */
}
.toolbar .btn.ghost:focus-visible{
  outline:3px solid #93c5fd;
  outline-offset:2px;
}