/*
Theme Name: Ember
Theme URI: https://example.com/ember
Author: Your Name
Description: A warm, dark recipe theme. Full recipe cards with prep and cook times, a servings scaler that recalculates ingredients, tick-off ingredients and steps, recipe-only printing, "jump to recipe" and schema.org recipe markup for search. Tall featured recipes, quick-dinner and meal sections. Dark by default with a light mode, self-hosted fonts and one-click demo content with original artwork.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ember
Tags: food-and-drink, blog, three-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
  color-scheme: dark;
  --bg: #16110e;
  --surface: #1f1814;
  --surface-2: #2a211b;
  --text: #f4ece2;
  --text-2: #d8ccbe;
  --muted: #a69788;
  --line: #3a2e26;
  --accent: #f3a53a;
  --accent-ink: #1b140f;
  --beet: #c43d66;
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-display: 400;
  --track-display: -0.01em;
  --lh-display: 1.12;
  --radius: 18px;
  --radius-ui: 999px;
  --footer-bg: #0f0b09;
  --footer-text: #f4ece2;
  --footer-muted: #a69788;
  --footer-line: rgba(255,255,255,.1);
  --overlay: linear-gradient(180deg, rgba(14,10,8,0) 32%, rgba(14,10,8,.94) 100%);
  --accent-hover: #f4ece2;
  --accent-hover-ink: #16110e;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5efe8;
  --text: #221914;
  --text-2: #4a3c32;
  --muted: #7a6a5d;
  --line: #e7dccf;
  --accent: #a3284f;
  --accent-ink: #ffffff;
  --footer-bg: #221914;
  --accent-hover: #221914;
  --accent-hover-ink: #ffffff;
}

body { font-size: 17.5px; }
.site-header { background: var(--bg); border-bottom-color: var(--line); }
.brand__name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; }
.brand__mark { width: 36px; height: 36px; color: var(--text); }
.primary-menu > li > a { font-weight: 600; }
.header-cta { background: var(--accent); color: var(--accent-ink); }
.cat, .entry-cat { display: inline-block; align-self: flex-start; padding: .14rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: hsl(var(--cat-hue, 30) 58% 40%); color: #fff; }
.cat:hover, .entry-cat:hover { text-decoration: none; filter: brightness(1.12); }
.card__title { font-size: 1.35rem; line-height: 1.18; }
.mini__title { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; }
.section-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.widget-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.meta__time { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); font-weight: 600; }
.meta__time .icon { width: 15px; height: 15px; color: var(--accent); }
.meta__level { color: var(--muted); }

/* ---------- Tall featured recipes ---------- */
.em-top { padding-block: clamp(24px, 3vw, 40px) 0; }
.em-top__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.em-tall.card-overlay { min-height: clamp(420px, 38vw, 520px); border-radius: 22px; }
.em-tall .card__title { font-size: 1.55rem; line-height: 1.15; }
.em-tall .meta, .em-tall .meta__time { color: #f4ece2; }

/* ---------- Featured, quick, meals ---------- */
.em-featured__grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .em-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .em-featured__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.em-featured .card-row { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.em-featured .card-row .media { border-radius: 14px; }
.em-featured .card__title { font-size: 1.18rem; }
.em-quick { background: var(--surface); }
.em-quick .card .media { aspect-ratio: 1; border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px; }
.em-meals__grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.em-meal { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.em-meal__img { display: block; width: min(100%, 170px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--surface-2); }
.em-meal__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.em-meal:hover .em-meal__img img { transform: scale(1.06); }
.em-meal__name { font-family: var(--font-display); font-size: 1.25rem; }
.em-meal__count { font-size: .85rem; color: var(--muted); }
.signup--band { display: grid; gap: 1.4rem; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--accent); color: var(--accent-ink); }
@media (min-width: 900px) { .signup--band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.signup--band .signup__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); }
.signup--band .signup__button { background: #16110e; color: #f4ece2; }
.signup--band input[type="email"] { background: #fff7ec; border-color: transparent; color: #1b140f; }
.signup--sidebar { background: var(--surface-2); color: var(--text); }
.signup--sidebar .signup__button { background: var(--accent); color: var(--accent-ink); }

/* ---------- Recipe on posts ---------- */
.em-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 2rem; }
.em-jump span { color: var(--muted); font-weight: 600; }
.entry-content .em-jump a.btn { text-decoration: none; }
.em-recipe { margin-top: 2.8rem; padding: clamp(20px, 3vw, 32px); border-radius: 26px; background: var(--surface); border: 1px solid var(--line); font-size: 1rem; }
.em-recipe__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.entry-content .em-recipe__title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.em-recipe__print { background: var(--surface-2); color: var(--text); }
.em-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.6rem; }
.em-facts div { padding: .55rem .95rem; border-radius: 14px; background: var(--surface-2); }
.em-facts dt { font-size: .75rem; font-weight: 700; color: var(--muted); }
.em-facts dd { margin: 0; font-family: var(--font-display); font-size: 1.1rem; }
.em-recipe__cols { display: grid; gap: 28px; }
@media (min-width: 760px) { .em-recipe__cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.em-ingredients__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.entry-content .em-recipe h3 { margin: 0; font-size: 1.35rem; }
.em-scale { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: .92rem; }
.em-scale button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; }
.em-scale button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.em-recipe ul, .em-recipe ol { list-style: none; margin: 0; padding: 0 !important; }
.em-method ol { counter-reset: step; }
.entry-content .em-recipe li { margin: 0 !important; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.em-method li { counter-increment: step; }
.em-recipe label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.em-recipe input[type="checkbox"] { flex: 0 0 auto; width: 19px; height: 19px; margin-top: .22rem; accent-color: var(--accent); }
.em-method label::before { content: counter(step); flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: .85rem; }
.em-method input[type="checkbox"] { order: 3; margin-left: auto; }
.em-recipe input:checked + span { color: var(--muted); text-decoration: line-through; }
.em-qty { font-weight: 700; color: var(--accent); }
.entry-title { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.entry-content blockquote { border-left-color: var(--accent); font-family: var(--font-display); font-size: 1.5rem; }
.site-footer .brand__mark { color: var(--footer-text); }
.site-footer .signup { background: rgba(255,255,255,.05); color: var(--footer-text); padding: 1.4rem; }
.site-footer .signup__title { font-family: var(--font-display); font-weight: 400; }
.site-footer .signup__button { background: var(--accent); color: #1b140f; }

@media print {
  html.em-printing body * { visibility: hidden; }
  html.em-printing .em-recipe, html.em-printing .em-recipe * { visibility: visible; }
  html.em-printing .em-recipe { position: absolute; left: 0; top: 0; width: 100%; border: 0; background: #fff; color: #000; }
  html.em-printing .em-recipe__print, html.em-printing .em-scale button, html.em-printing .em-recipe input { display: none; }
}