/*
Theme Name: WokBite
Theme URI: https://wokbite.example
Author: WokBite
Author URI: https://wokbite.example
Description: WokBite — an English-language Chinese recipe site. Sixteen cuisine classes (the eight great regional schools plus course and technique collections), a keyword-tag taxonomy of standard English culinary terms, a homepage with cuisine grid and tag cloud, a filterable archive, and recipe pages with inline step images, printable card and configurable ad slots. Standalone theme, no parent required. Recipes are a custom post type.
Version: 2.7.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wokbite
Tags: recipes, food, one-column, two-columns, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   WokBite — base styles (consolidated from the HTML mockups)
   ============================================================ */

* {margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Arial,sans-serif}
body {background:#fff;color:#2b2b2b}
a {color:#e04f1a;text-decoration:none}
img {max-width:100%;height:auto}
.wrap {max-width:1180px;margin:0 auto;padding:0 20px}

/* Header */
html {scroll-behavior:smooth;scroll-padding-top:88px}
.site-header {position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #eee;z-index:120}
.site-header.is-scrolled {box-shadow:0 6px 22px rgba(40,30,20,.07)}
.topbar {display:flex;align-items:center;gap:26px;height:70px;flex-wrap:nowrap}
.logo {font-size:23px;font-weight:800;color:#e04f1a;letter-spacing:-.5px;flex:0 0 auto}
.logo a {display:inline-flex;align-items:center;gap:9px;color:#e04f1a}
.logo-mark {flex:0 0 30px}
.logo-word span {color:#2b2b2b}
.main-nav {display:flex;align-items:center;gap:20px;margin-left:auto;min-width:0}
.main-nav ul.menu {list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.main-nav ul.menu > li {position:relative}
.main-nav ul.menu > li > a {display:block;color:#333;font-weight:600;font-size:14.5px;padding:9px 12px;border-radius:8px;white-space:nowrap;position:relative}
.main-nav ul.menu > li > a:hover {color:#e04f1a;background:#fdf3ed}
.main-nav ul.menu > li > a:after {content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:#e04f1a;transform:scaleX(0);transform-origin:left;transition:transform .18s ease;border-radius:2px}
.main-nav ul.menu > li > a:hover:after,.main-nav ul.menu .current-menu-item > a:after,.main-nav ul.menu .current-menu-ancestor > a:after {transform:scaleX(1)}
.main-nav .current-menu-item > a,.main-nav .current-menu-ancestor > a {color:#e04f1a}
.searchbox {display:flex;align-items:center;border:1.5px solid #e7e1d9;border-radius:999px;overflow:hidden;background:#faf8f5;height:40px;flex:0 0 auto;transition:border-color .18s ease,box-shadow .18s ease}
.searchbox:focus-within {border-color:#e04f1a;box-shadow:0 0 0 3px rgba(224,79,26,.12);background:#fff}
.searchbox input {border:none;outline:none;padding:0 8px 0 14px;width:150px;background:transparent;font-size:14px;transition:width .2s ease}
.searchbox input:focus {width:190px}
.searchbox button {border:none;background:#e04f1a;color:#fff;height:100%;width:42px;display:grid;place-items:center;cursor:pointer}

/* Hero */
.hero {display:grid;grid-template-columns:1.4fr 1fr;align-items:center}

.hero-tag {position:absolute;top:14px;left:14px;background:#e04f1a;color:#fff;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700}

.stars {color:#f5a623;font-size:15px}

.sec-head {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}

/* Category strip */
.cats {display:grid}

/* Cards / grids */
.grid {display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.card:hover h3 {color:#e04f1a}

.card .stars {font-size:13px}

.made {display:inline-block;background:#f2efe9;color:#8a7f6a;border-radius:12px;padding:2px 8px;font-size:11px;font-weight:600}
.author {color:#888;font-size:12px;margin-top:4px}

/* Ads */
.ad-leader {border:1.5px dashed #ddd;border-radius:12px;text-align:center;color:#bbb;font-size:12px;padding:22px 10px;margin:16px 0}
.ad-card {background:#fafafa;border:1.5px dashed #ddd;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:12px;min-height:210px}
/* Newsletter */
.newsletter {background:#2b2b2b;color:#fff;border-radius:16px;padding:34px;display:flex;justify-content:space-between;align-items:center;margin:20px 0;gap:20px;flex-wrap:wrap}
.newsletter h2 {font-size:22px;margin-bottom:6px}
.newsletter p {color:#bbb;font-size:14px}
.newsletter form {display:flex;gap:8px}
.newsletter input {border:none;border-radius:6px;padding:11px 14px;width:240px;font-size:14px}
.newsletter button {border:none;background:#e04f1a;color:#fff;padding:11px 20px;border-radius:6px;font-weight:700;cursor:pointer}

/* List page */
.crumb {font-size:13px}
.crumb a:hover {color:#e04f1a}
.crumb .current {color:#e04f1a}
.archive-title {font-size:32px;margin:6px 0 6px}

.count {margin-left:auto;color:#999;font-size:13px}
.pagination {display:flex;gap:8px;justify-content:center;padding:30px 0}
.pagination a,.pagination span {display:inline-block;min-width:38px;text-align:center;padding:9px 12px;border:1px solid #ddd;border-radius:8px;color:#555;font-size:14px;background:#fff}
.pagination .current {background:#e04f1a;color:#fff;border-color:#e04f1a;font-weight:700}

.hero-img.large img {width:100%;height:420px;object-fit:cover;border-radius:14px;display:block}

.fact {text-align:center}
h2.sec-title {font-size:21px;margin:26px 0 12px;padding-bottom:8px;border-bottom:2px solid #f0e3da}
.ing-list {list-style:none;background:#fff;border:1px solid #eee;border-radius:12px;padding:8px 16px}

.ing-list li:last-child {border-bottom:none}

.step-n {background:#e04f1a;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}

.step-img figcaption {font-size:12px;color:#999;padding:6px 4px}

/* Layout with sidebar */
.layout {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;padding:6px 0 20px;align-items:start}
main.article {min-width:0}
aside.widget-col {position:sticky}
.widget {background:#fff;border:1px solid #eee;border-radius:12px;padding:16px;margin-bottom:18px}

.jump a {display:flex;justify-content:space-between;align-items:center;color:#333;padding:9px 0;border-bottom:1px solid #f3f3f3;font-size:14px}
.jump a:last-child {border-bottom:none}
.jump a:hover {color:#e04f1a}
.jump a span {color:#e04f1a;font-size:12px}
.author-box {text-align:center}
.author-box .av {width:64px;height:64px;border-radius:50%;background:#f0e3da;color:#e04f1a;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin:0 auto 8px}
.author-box b {display:block;font-size:15px}
.author-box p {font-size:12px;color:#777;margin:4px 0 10px}
.mini {display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #f3f3f3}
.mini:last-child {border-bottom:none}
.mini img {width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 56px}
.mini b {font-size:13px;display:block;line-height:1.35}
.mini span {font-size:11px;color:#999}
.widget form input[type=email] {border:1px solid #ddd;border-radius:8px;padding:10px;font-size:13px;width:100%;margin-bottom:8px}
.widget form button {border:none;background:#e04f1a;color:#fff;padding:10px;border-radius:8px;font-weight:700;cursor:pointer;width:100%}

/* Footer */
.site-footer {background:#f6f6f6;border-top:1px solid #eee;padding:30px 0;color:#666}
.f-grid {display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:20px}

.site-footer a:hover {color:#e04f1a}

/* Mobile sticky bottom ad */
.sticky-ad {display:none}
@media (max-width:920px) {
      .layout {grid-template-columns:1fr}
      aside.widget-col {position:static;margin-top:8px}
  
      .cats {grid-template-columns:repeat(2,1fr)}
      .grid {grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px) {
      .sticky-ad {display:flex;position:fixed;bottom:0;left:0;right:0;height:60px;background:#fff;border-top:1px solid #e4e3dd;box-shadow:0 -2px 8px rgba(0,0,0,.06);z-index:200;align-items:stretch}
      .sticky-ad .ad-ph {flex:1;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:11px;background:#fafafa}
      .sticky-ad .ad-slot-ph {flex:1;margin:0;display:block;text-align:center}
      .sticky-ad .ad-slot-ph .ad-ph {margin:0;height:100%;box-sizing:border-box;border:none;border-radius:0;padding:0 10px;flex-direction:row;gap:8px;width:auto}
      .sticky-ad .ad-ph-tag {font-size:9px}
      .sticky-ad .ad-ph-size {margin-top:0;font-size:10px}
      .sticky-ad .close {flex:0 0 44px;border:none;background:#fff;color:#999;font-size:18px;cursor:pointer}
      .grid {grid-template-columns:1fr}
      .facts {grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   WokBite — editorial polish (site build)
   ============================================================ */

body {font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo {letter-spacing:-.2px}
.hero h1,.archive-title,.recipe-title {font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.5px}

.card {background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);border:1px solid #f0f0f0;color:#333;transition:transform .18s ease,box-shadow .18s ease}
.card:hover {transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09)}

.card:hover img {transform:scale(1.03)}
.main-nav ul li a {position:relative}
.main-nav ul li a:after {content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#e04f1a;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.main-nav ul li a:hover:after,.main-nav .current-menu-item > a:after {transform:scaleX(1)}

.cat:hover img {transform:scale(1.04)}
.ad-slot {margin:18px 0;text-align:center}
.ad-slot img {display:inline-block}
/* Fluid slots: fill the container so a wide screen gets a wide banner instead of
   a fixed 728px strip with dead space either side. Real responsive ad units do
the same, so the guide and the live unit occupy identical geometry. */
.ad-slot-ph {display:flex;justify-content:center}
.ad-slot-ph .ad-ph {margin:0;width:100%}
.ad-ph {box-sizing:border-box;border:1.5px dashed #ddd;border-radius:12px;text-align:center;color:#bbb;font-size:12px;padding:0 10px;margin:16px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%}
.ad-ph-tag {font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#c9c9c9;line-height:1.2}
.ad-ph-size {font-size:11px;color:#b0b0b0;line-height:1.3}
/* In-feed sits inside the card grid but spans a whole row (grid-column:1/-1) so
   it never has to match a card's height or pretend to be a card. */
.grid > .ad-slot-row {grid-column:1/-1;margin:6px 0}
.grid > .ad-slot-row .ad-ph {margin:0}
.grid > .ad-slot-ph {margin:0;align-items:center}
.grid > .ad-slot-ph .ad-ph {margin:0}
.recipe-intro {color:#4a4a4a;font-size:16px;margin:10px 0 4px}
.recipe-intro p {margin-bottom:12px}
.recipe-intro h2 {font-size:19px;margin:18px 0 8px}
.page-content {max-width:820px;font-size:16px;color:#3d3d3d}
.page-content p,.page-content ul,.page-content ol {margin-bottom:14px}
.page-content h2 {font-family:Georgia,serif;font-size:23px;margin:26px 0 10px}
.page-content h3 {font-size:18px;margin:20px 0 8px}
.page-content ul,.page-content ol {padding-left:22px}
.page-content a {text-decoration:underline}

.filterbar {margin-bottom:22px;flex-wrap:wrap}

.filterbar button {border:1px solid #ddd;background:#fff;border-radius:6px;padding:7px 12px;cursor:pointer}
.comments-area {max-width:820px;margin:34px 0 10px}
.comments-area .sec-title {margin-bottom:14px}
.comment-list {list-style:none;margin:16px 0;padding:0}
.comment-list li {background:#fff;border:1px solid #eee;border-radius:10px;padding:14px 16px;margin-bottom:12px}
.comment-list .children {list-style:none;margin:10px 0 0 24px;padding:0}
.comment-author {font-weight:700;color:#2b2b2b;display:flex;align-items:center;gap:8px}
.comment-author .avatar {border-radius:50%;width:32px;height:32px}
.comment-metadata {font-size:12px;color:#999;margin:2px 0 8px}
.comment-metadata a {color:#999;text-decoration:none}
.comment-content {color:#3a3a3a;font-size:14.5px;line-height:1.6}
.comment-content p {margin:0 0 8px}
.wok-cstars {color:#f5a623;letter-spacing:-1px;margin-right:2px}
.comment-respond {margin-top:22px;background:#fbf8f4;border:1px solid #eee;border-radius:12px;padding:18px 20px}
.comment-reply-title {font-family:Georgia,serif;font-size:20px;margin:0 0 6px}
.comment-notes,.wok-modnote,.wok-first-note {color:#7d746c;font-size:13px;margin:0 0 12px}
.wok-modnote {background:#f2efe9;border-left:3px solid #e04f1a;padding:8px 12px;border-radius:4px}
.comment-form label {display:block;font-size:13px;font-weight:600;color:#4a423c;margin-bottom:4px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form select,.comment-form textarea {width:100%;border:1px solid #ddd;border-radius:8px;padding:10px;font-size:14px;margin-bottom:10px;font-family:inherit;background:#fff}
.comment-form select {max-width:220px}
.comment-form .required {color:#e04f1a}
.comment-form .submit {background:#e04f1a;color:#fff;border:none;border-radius:8px;padding:11px 22px;font-weight:700;cursor:pointer}
.comment-form .submit:hover {background:#c8451a}
.comment-form-cookies-consent {display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#7d746c}
.comment-form-cookies-consent input {margin-top:3px}
.comment-form-cookies-consent label {margin:0;font-weight:400}
.comment-awaiting-moderation {color:#b07b00;font-size:13px;background:#fff8e5;border-radius:6px;padding:6px 10px}
/* ---------- cookie consent (EEA/UK only) ---------- */
.wok-consent {position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#1d1a17;color:#f4efe8;box-shadow:0 -8px 30px rgba(0,0,0,.28);font-size:14px;line-height:1.55}
.wok-consent[hidden] {display:none!important}
.wok-consent-inner {max-width:1120px;margin:0 auto;padding:18px 22px;display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wok-consent-copy {flex:1 1 420px;min-width:260px}
.wok-consent-copy h2 {font-family:Georgia,serif;font-size:16px;margin:0 0 4px;color:#fff;font-weight:700}
.wok-consent-copy p {margin:0;color:#efe9e1}
.wok-consent-copy a {color:#ffc4a3;text-decoration:underline}
.wok-consent-actions {display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Accept and Reject are deliberately identical in size, weight and colour
   treatment: EU guidance treats a visually stronger "accept" as a dark
   pattern, so neither option may look like the default. */
.wok-btn {border:0;border-radius:8px;padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.2;min-width:150px;text-align:center}
.wok-btn-primary {background:#e04f1a;color:#fff}
.wok-btn-primary:hover {background:#c8451a}
.wok-btn-ghost {background:#4a423c;color:#fff;border:1px solid #4a423c}
.wok-btn-ghost:hover {background:#5b524a;border-color:#5b524a}
.wok-btn-link {background:transparent;color:#ffc4a3;text-decoration:underline;padding:10px 6px;min-width:0;font-weight:600}
.wok-consent-panel {max-width:1120px;margin:0 auto;padding:0 22px 18px;border-top:1px solid #3a332c}
.wok-consent-panel[hidden] {display:none!important}
.wok-consent-row {display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-bottom:1px solid #2c2723}
.wok-consent-row:last-of-type {border-bottom:0}
.wok-consent-row b {display:block;color:#fff;font-size:14px}
.wok-consent-row span {color:#b8afa3;font-size:13px}
.wok-consent-row label {cursor:pointer;display:block}
.wok-consent-row input[type=checkbox] {width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:#e04f1a;cursor:pointer}
.wok-consent-row input[type=checkbox]:disabled {cursor:not-allowed;opacity:.5}
.wok-consent-fixed {color:#8e857a;font-size:13px;white-space:nowrap}
.wok-consent-panel-actions {padding-top:12px;text-align:right}
@media (max-width:640px) {
      .wok-consent-inner {padding:16px;gap:14px}
      .wok-consent-actions {width:100%}
      .wok-consent-actions .wok-btn {flex:1 1 45%;min-width:0}
      .wok-btn-link {flex:1 1 100%;text-align:left;padding-left:0}
      .wok-consent-panel {padding:0 16px 16px}
}
@media print {    .wok-consent {display:none!important}}

.rate-link {color:#e04f1a;text-decoration:none;font-size:13px;font-weight:600;border-bottom:1px dotted currentColor}
.wok-flash {animation:wokFlash .25s ease}
@keyframes wokFlash{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:920px) {
      .hero {grid-template-columns:1fr;padding-top:18px}
      .hero-img img {height:280px}
      .hero h1 {font-size:30px}
      .main-nav ul {gap:16px}
      .searchbox input {width:130px}
}
@media (max-width:640px) {
    
    
      .main-nav {width:100%;gap:10px}
      .main-nav ul {overflow-x:auto;white-space:nowrap;gap:16px;padding-bottom:4px;width:100%}
      .main-nav ul li a {font-size:14px}
      .searchbox {width:100%}
      .searchbox input {flex:1;width:auto}
    
      .archive-title,.recipe-title {font-size:26px}
    
      .step-img {margin-left:0;max-width:100%}
  
    
    
      .newsletter input {flex:1;width:auto}
    
}
@media print {
      .site-header,.site-footer,.widget-col,.newsletter,.filterbar,.pagination,.sticky-ad,.ad-slot,.comments-area {display:none!important}
    
    
    
      a {color:#000;text-decoration:none}
}

.meta-line {font-size:13px;margin-top:6px;color:#8a8a8a}

.site-footer {font-size:13.5px}
.site-footer a {color:#666;display:block;margin-bottom:6px;font-size:13.5px}

@media (max-width:640px) {
      .cats .cat:last-child {grid-column:1 / -1}
      .cats .cat:last-child img {height:140px}
}

/* ============================================================
   WokBite v1.1 — header rebuild, mobile drawer, listing polish
   ============================================================ */

/* --- accessibility helpers --- */
.screen-reader-text {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link {position:absolute;left:16px;top:-60px;z-index:300;background:#2b2b2b;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;transition:top .15s ease}
.skip-link:focus {top:12px;color:#fff}
:focus-visible {outline:2px solid #e04f1a;outline-offset:2px}

/* --- primary menu dropdown --- */
.menu-item-has-children > a {padding-right:24px}
.menu-item-has-children > a::before {content:"";position:absolute;right:8px;top:50%;width:0;height:0;margin-top:-2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .2s ease}
.main-nav .sub-menu {position:absolute;top:calc(100% + 10px);left:0;min-width:240px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid #efe9e2;border-radius:14px;box-shadow:0 18px 40px rgba(50,35,20,.13);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:140}
.main-nav .sub-menu::before {content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.main-nav .menu-item-has-children:hover > .sub-menu,.main-nav .menu-item-has-children:focus-within > .sub-menu {opacity:1;visibility:visible;transform:none}
.main-nav .sub-menu li {position:static}
.main-nav .sub-menu a {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:#3a3a3a;white-space:nowrap}
.main-nav .sub-menu a:hover {background:#fdf3ed;color:#e04f1a}
.main-nav .sub-menu a::after {display:none}

/* --- hamburger --- */
.nav-toggle {display:none;align-items:center;gap:9px;margin-left:auto;background:#fff;border:1px solid #e8e2da;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:700;color:#2b2b2b;cursor:pointer}
.nav-toggle:hover {border-color:#e04f1a;color:#e04f1a}
.nav-toggle-box {position:relative;display:block;width:18px;height:12px}
.nav-toggle-box span {position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease,top .2s ease}
.nav-toggle-box span:nth-child(1) {top:0}
.nav-toggle-box span:nth-child(2) {top:5px}
.nav-toggle-box span:nth-child(3) {top:10px}
body.nav-open .nav-toggle-box span:nth-child(1) {top:5px;transform:rotate(45deg)}
body.nav-open .nav-toggle-box span:nth-child(2) {opacity:0}
body.nav-open .nav-toggle-box span:nth-child(3) {top:5px;transform:rotate(-45deg)}
.nav-scrim {position:fixed;left:0;right:0;top:62px;bottom:0;background:rgba(24,18,12,.38);z-index:118;backdrop-filter:blur(2px)}
.nav-scrim[hidden] {display:none}

/* --- hero --- */
.hero {padding:34px 0 40px;gap:34px}
.hero-img {border-radius:14px;overflow:hidden;position:relative;display:block}
.hero-img img {width:100%;object-fit:cover;display:block;height:420px}
.hero-img:hover img {transform:scale(1.015);transition:transform .5s ease}
.hero-copy .kicker {font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b06a3c;margin-bottom:6px}
.hero h1 {line-height:1.2;margin:0 0 10px;font-size:clamp(28px,3.1vw,42px)}
.hero h1 a {color:inherit}
.hero h1 a:hover {color:#e04f1a}
.hero p {color:#666;font-size:16px;line-height:1.6;max-width:56ch;margin-bottom:16px}

.hero-facts {display:flex;flex-wrap:wrap;gap:26px;list-style:none;margin:4px 0 22px;padding:0}
.hero-facts li b {display:block;font-size:19px;line-height:1.2;color:#2b2b2b}
.hero-facts li span {font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#968d85}
.hero-actions {display:flex;flex-wrap:wrap;gap:10px}
.cta {display:inline-block;background:#e04f1a;color:#fff;padding:11px 22px;border-radius:8px;font-weight:700;transition:transform .16s ease,box-shadow .16s ease}
.cta:hover {opacity:.92;box-shadow:0 8px 20px rgba(224,79,26,.24)}
.cta.ghost {background:#fff;color:#e04f1a;border:1.5px solid #e04f1a;margin-left:0}
.cta.small {padding:9px 16px;font-size:14px}
.ghost-btn {display:inline-block;background:#fff;border:1.5px solid #e3d9cd;color:#2b2b2b;padding:10px 18px;border-radius:8px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ghost-btn:hover {border-color:#e04f1a;color:#e04f1a}

/* --- section heads --- */
.sec {padding:26px 0}
.sec-head h2 {font-family:Georgia,serif;font-size:23px}
.sec-head a {color:#e04f1a;font-weight:600;font-size:13.5px}

/* --- category tiles --- */
.cats {grid-template-columns:repeat(5,1fr);gap:14px}
.cat {border-radius:12px;overflow:hidden;position:relative;text-align:center;color:#333;display:flex;flex-direction:column;background:#fbf6f0;border:1px solid #f2e9df;transition:transform .18s ease,box-shadow .18s ease}
.cat:hover {transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,40,20,.10)}
.cat img {width:100%;object-fit:cover;display:block;transition:transform .35s ease;height:132px}
.cat div {font-weight:700;font-size:13px;padding:10px 12px 12px;text-align:left}
.cat b {display:block;font-size:13.5px;line-height:1.35;color:#2b2b2b}
.cat span {display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:#9b8f83}

/* --- cards --- */
.card {position:relative;display:flex;flex-direction:column;border-color:#efe9e2}
.card-media {overflow:hidden;background:#f4efe8}
.card img {width:100%;object-fit:cover;display:block;transition:transform .35s ease;height:200px;margin:0}
.card-body {padding:14px;display:flex;flex-direction:column;gap:2px;flex:1}
.card-top {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.card-top .stars {font-size:12.5px;letter-spacing:-1px}
.card-top .made {font-size:10.5px;padding:2px 7px}
.card-body h3 {margin:2px 0 6px;font-size:16.5px;line-height:1.35}
.card-link {color:inherit;font-weight:700}
.card-link::after {content:"";position:absolute;inset:0;z-index:1}
.card:hover .card-link {color:#e04f1a}
.card .meta {font-size:11.5px;margin-top:auto}

/* --- breadcrumb / page head --- */
.crumb {display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:18px 0 4px;color:#a0978e}
.crumb .sep {color:#cfc6bd;margin:0 6px}
.crumb a {color:#8d857d}
.page-head {margin:6px 0 22px}
.page-head .desc {margin-bottom:0}

/* --- filter bar --- */
.filterbar {display:flex;align-items:flex-end;gap:14px;padding:14px 16px;border:1px solid #efe9e2;border-radius:14px;background:#fffdfb;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.filter {display:flex;flex-direction:column;gap:5px}
.filterbar label {font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9b9189}
.filterbar select {border:1px solid #e3dbd2;border-radius:9px;padding:8px 30px 8px 11px;font-size:13.5px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a716a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;appearance:none;cursor:pointer}
.filterbar select:hover {border-color:#e0b79e}
.filterbar .count {margin-left:auto;color:#9b9189;font-size:12.5px;padding-bottom:10px}
.active-filters {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 18px}
.af-label {font-size:12px;color:#9b9189;text-transform:uppercase;letter-spacing:.06em}
.chip {display:inline-flex;align-items:center;gap:6px;background:#fdf0e8;color:#b64a1b;border:1px solid #f6d9c8;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600}
.chip:hover {background:#fbe3d5}
.af-clear {font-size:12.5px;color:#8d857d;text-decoration:underline;text-underline-offset:2px}
.empty-state {grid-column:1/-1;text-align:center;padding:40px 20px;border:1px dashed #e6ddd4;border-radius:16px;color:#7b736c}
.empty-state p {margin-bottom:16px}
.empty-state .searchbox {margin:0 auto 18px}

/* --- recipe page --- */
.recipe-head {margin-top:6px}
.recipe-title {font-size:clamp(27px,3vw,38px);margin:2px 0 8px}

.recipe-sub b {color:#4a423c}
.recipe-sub .dot {color:#cfc6bd}
.facts {display:grid;grid-template-columns:repeat(5,1fr);border-radius:12px;margin:6px 0;background:#fdf9f5;border:1px solid #f2e7db;gap:6px;padding:16px 12px}
.fact b {display:block;color:#e04f1a;font-size:20px}

.recipe-actions {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 2px}
.sec-title-row {display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-title-row .sec-title {margin-bottom:12px}
.sec-hint {font-size:11.5px;color:#a89f96}
.ing-list li {border-bottom:1px solid #f3f3f3;display:flex;align-items:center;gap:12px;padding:10px 0}
.ing-list li input {appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 20px;border:2px solid #d9d0c7;border-radius:6px;background:#fff;cursor:pointer;position:relative;transition:background .15s ease,border-color .15s ease}
.ing-list li input:hover {border-color:#e0a37f}
.ing-list li input:checked {background:#e04f1a;border-color:#e04f1a}
.ing-list li input:checked::after {content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ing-list li input:checked + span {color:#a89f96;text-decoration:line-through}
.step {display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-bottom:24px}
.step-text {font-size:15.5px;line-height:1.65}
.step-img {border-radius:10px;overflow:hidden;margin:12px 0 0;max-width:460px}
.step-img img {width:100%;display:block;height:auto;max-height:300px;object-fit:cover}
.tip {background:#fdf6ec;border-left:4px solid #e8a33d;border-radius:8px;padding:16px;margin:14px 0;display:flex;flex-wrap:wrap;gap:8px;font-size:15px;line-height:1.6}
.tip b {color:#b2761a;flex:0 0 auto}

.grid.related {gap:16px}
.grid.related .card img {height:140px}
.grid.related .card-body {padding:12px}
.grid.related .card-body h3 {font-size:14.5px}
.grid.related .card .meta {font-size:11px}
.grid.related .card .author {display:none}

/* --- sidebar / footer --- */
aside.widget-col {top:88px}
.widget h3 {margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #f0e3da;font-size:14px;letter-spacing:.01em}
.widget-note {font-size:12.5px;color:#8d857d;margin-bottom:10px}
.mini b a:hover {color:#e04f1a}
.site-footer .f-brand-title {font-size:20px;color:#e04f1a;margin-bottom:8px;font-weight:800;letter-spacing:-.3px}
.site-footer .f-brand-title span {color:#2b2b2b}
.site-footer h4 {font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#7b736c;margin-bottom:10px}
.site-footer .f-grid {gap:34px}
.to-top {margin-top:4px;text-decoration:underline;text-underline-offset:2px}
.copy {border-top:1px solid #e4e4e4;padding-top:16px;font-size:12.5px;color:#8f8f8f;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.copy .to-top {margin:0;color:#8f8f8f}

/* --- readable small text (AA contrast on white) --- */
.card .meta {color:#756b62}
.card .author {font-size:11.5px;color:#837a71}
.card .made {color:#6d6257}
.cats .cat span {color:#83786d}
.stars-note {font-size:13px;margin-left:8px;color:#756b62}
.recipe-sub {display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;margin-bottom:16px;color:#756b62}
.fact span {font-size:10.5px;letter-spacing:.03em;color:#756b62}
.crumb,.crumb a {color:#7d746c}
.desc {font-size:15px;max-width:760px;margin-bottom:20px;color:#5f5851}
.f-small {font-size:12px;margin-top:8px;color:#837a71}

/* --- search / 404 --- */
.searchbox.big {height:48px;border-radius:12px;max-width:520px;margin:6px 0 18px}
.searchbox.big input {width:100%;flex:1;font-size:15px}
.searchbox.big button {width:auto;padding:0 20px;font-size:14px;font-weight:700}
.notfound {padding:18px 0 8px;max-width:760px}
.notfound .kicker {font-size:13px;font-weight:800;letter-spacing:.2em;color:#e04f1a}
.notfound-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.page-article {max-width:860px;margin:0 auto;padding-bottom:20px}
.page-hero {margin:10px 0 22px;border-radius:14px;overflow:hidden}
.page-hero img {width:100%;height:auto;display:block}

/* --- print --- */
@media print {@page{margin:14mm}
  body{font-size:11pt;color:#111}
  .site-header,.site-footer,.widget-col,.newsletter,.filterbar,.pagination,.sticky-ad,.ad-slot,
  [data-wok-print],.recipe-actions,.crumb,.sec-hint,.related-block,#comments,
  .grid,.to-top,.nav-toggle,.searchbox{display:none!important}
  .layout{display:block}
  .article{width:100%}
  .hero-img.large img{height:auto;max-height:90mm;object-fit:cover}
  .recipe-title{font-size:22pt;margin-top:0}
  .recipe-sub{color:#333;font-size:9.5pt}
  .facts{border:1px solid #bbb;background:#fff;page-break-inside:avoid}
  .fact b{color:#111}
  .ing-list{page-break-inside:avoid;border:1px solid #ddd;list-style:disc;padding-left:1.4em}
  .ing-list li{display:list-item;padding:3px 0;border:0}
  .ing-list li input{display:none}
  .ing-list li span{color:#111!important;text-decoration:none!important}
  .step{page-break-inside:avoid;margin-bottom:14px}
  .step-n{background:#fff;color:#111;border:1px solid #999}
  .step-img{max-width:50%;margin-top:6px}
  .step-img img{max-height:55mm;object-fit:cover}
  .tip{border:1px solid #bbb;background:#fff}
  a[href]::after{content:""}}

/* --- responsive: tablet --- */
@media (max-width:1100px) {.topbar{gap:16px}
  .main-nav{gap:14px}
  .main-nav ul.menu > li > a{padding:9px 9px;font-size:14px}
  .searchbox input{width:120px}
  .searchbox input:focus{width:150px}
  .hero-img img{height:380px}}

/* --- responsive: mobile drawer --- */
@media (max-width:900px) {body{padding-bottom:0}
  body.has-sticky-ad{padding-bottom:70px}
  .topbar{height:62px;gap:12px}
  .nav-toggle{display:inline-flex}
  .main-nav{position:fixed;left:0;right:0;top:62px;z-index:125;display:block;margin:0;padding:10px 20px 24px;max-height:calc(100dvh - 62px);overflow-y:auto;background:#fff;border-bottom:1px solid #efe9e2;box-shadow:0 22px 44px rgba(40,28,16,.14);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
  body.nav-open .main-nav{opacity:1;visibility:visible;transform:none}
  body.nav-open{overflow:hidden}
  .main-nav ul.menu{display:block;width:100%}
  .main-nav ul.menu > li{display:block}
  .main-nav ul.menu > li > a{padding:12px 4px;border-bottom:1px solid #f4efe9;border-radius:0;font-size:16px}
  .main-nav ul.menu > li > a:after{display:none}
  .menu-item-has-children > a::before{float:none;right:4px;margin-top:-2px}
  .menu-item-has-children.sub-open > a::before{transform:rotate(180deg)}
  .main-nav .sub-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:2px 0 8px 12px;min-width:0;background:transparent}
  .main-nav .sub-menu::before{display:none}
  .menu-item-has-children.sub-open > .sub-menu{display:block}
  .main-nav .sub-menu a{padding:11px 10px;border-bottom:1px solid #f6f2ed;font-size:15px}
  .searchbox{width:100%;margin-top:16px;height:44px}
  .searchbox input{width:100%;flex:1;padding-left:16px}
  .searchbox input:focus{width:100%}
  .hero{padding-top:20px;gap:22px}
  .cats{grid-template-columns:repeat(3,1fr)}
  .hero-img img{height:300px}
  .hero h1{font-size:30px}
  .hero-facts{gap:20px}
  .sec{padding:22px 0}
  .facts{grid-template-columns:repeat(3,1fr)}
  .grid.related{grid-template-columns:repeat(2,1fr)}
  aside.widget-col{top:auto}
  .filterbar{flex-wrap:wrap}
  .filterbar .count{margin-left:0;padding-bottom:0;width:100%}}

/* --- responsive: phone --- */
@media (max-width:640px) {.topbar{padding:0}
  .logo{font-size:21px}
  .nav-toggle-txt{display:none}
  .nav-toggle{padding:8px 11px}
  .wrap{padding:0 16px}
  .hero-img img{height:240px}
  .hero h1{font-size:25px}
  .hero-facts{gap:16px;margin-bottom:18px}
  .hero-facts li b{font-size:17px}
  .hero-actions .cta{flex:1 1 auto;text-align:center}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cats .cat:last-child:nth-child(odd){grid-column:1/-1}
  .cats .cat:last-child:nth-child(odd) img{height:150px}
  .cat img{height:110px}
  .grid{grid-template-columns:1fr}
  .grid.related{grid-template-columns:1fr}
  .card img{height:190px}
  .facts{grid-template-columns:repeat(3,1fr);padding:12px 8px}
  .fact b{font-size:17px}
  .fact span{font-size:9.5px}
  .recipe-actions .cta,.recipe-actions .ghost-btn{flex:1 1 auto;text-align:center}
  .step{gap:10px}
  .step-n{width:26px;height:26px;font-size:13px}
  .sec-title-row{gap:4px}
  .filterbar{gap:10px;padding:12px}
  .filter{flex:1 1 40%}
  .filterbar select{width:100%}
  .f-grid{grid-template-columns:1fr 1fr;gap:20px}
  .f-brand{grid-column:1/-1}
  .searchbox.big{max-width:100%}
  .newsletter{padding:22px}
  .newsletter form{width:100%}}

/* =====================================================================
 * 16 cuisine classes + keyword tags  (v2.0)
 * ===================================================================== */

/* --- cuisine grid: 4 across on desktop, 2 on tablet, 2 on phone --- */
.cats-16 {grid-template-columns:repeat(4,1fr)}
.cats-16 .cat img {height:104px}
.cats-16 .cat div {padding:8px 6px;line-height:1.25}
.cats-16 .cat div b {display:block;font-size:12.5px}
.cats-16 .cat div span {display:block;font-size:10.5px;color:#8a7f6a;font-weight:600;margin-top:2px}
.cat-empty {background:#f4efe7}
.cat-empty div {padding:26px 6px}

/* --- keyword tag cloud on the homepage --- */
.sec-tags .sec-note {color:#8a7f6a;font-size:13px}
.tag-cloud {display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.tag {display:inline-flex;align-items:baseline;gap:6px;border:1.5px solid #e7e1d9;border-radius:999px;background:#fff;color:#3a3a3a;font-weight:600;text-decoration:none;transition:.15s}
.tag span {color:#a89a83;font-weight:600;font-size:.78em}
.tag:hover {border-color:#e04f1a;color:#e04f1a;background:#fdf3ed}
.tag:hover span {color:#e04f1a}
.tag-sm {padding:5px 12px;font-size:12.5px}
.tag-md {padding:6px 14px;font-size:13.5px}
.tag-lg {padding:7px 16px;font-size:15px}
.tag-xl {padding:9px 19px;font-size:16.5px;border-color:#f0d6c6;background:#fdf6f1}

/* --- tag / cuisine chip strip on archive pages --- */
.tag-strip {display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 20px}
.tag-strip-label {font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#a89a83;font-weight:700;margin-right:4px}
.tag-chip {display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px;background:#f7f3ed;color:#4a4a4a;font-size:13px;font-weight:600;text-decoration:none;border:1.5px solid transparent}
.tag-chip span {font-size:11px;color:#a89a83}
.tag-chip:hover {background:#fdf3ed;color:#e04f1a;border-color:#f0d6c6}
.tag-chip.ghost {background:transparent;border:1.5px dashed #ddd6cb;color:#8a7f6a}
.tag-chip.ghost:hover {border-color:#e04f1a;color:#e04f1a;background:#fdf3ed}

/* --- recipe page tag list --- */
.recipe-tags {display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px;padding-top:18px;border-top:1px solid #efe9e1}
.recipe-tags .rt-label {font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#a89a83;font-weight:700;align-self:center;margin-right:2px}

@media (max-width:900px) {
      .cats-16 {grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px) {
      .cats-16 {grid-template-columns:repeat(2,1fr)}
      .cats-16 .cat img {height:96px}
      .cats-16 .cat-empty div {padding:20px 6px}
      .tag-xl {font-size:15px;padding:8px 16px}
      .tag-lg {font-size:14px}
}
.card-cat {display:inline-block;margin-top:7px;font-size:11.5px;font-weight:700;color:#e04f1a;background:#fdf3ed;border-radius:6px;padding:2px 8px}

/* --- homepage: six featured classes (replaces the 16-card grid) --- */
.cats-6 {grid-template-columns:repeat(3,1fr);gap:16px}
.cats-6 .cat img {height:150px}
.cats-6 .cat div {padding:10px 8px}
.cats-6 .cat div b {font-size:14px}
.cats-6 .cat div span {font-size:11.5px;color:#8a7f6a;font-weight:600;margin-top:2px}
.cats-6 .cat-empty {background:#f4efe7}
.cats-6 .cat-empty div {padding:34px 8px}

/* --- Browse index: quiet text-led lists, no province wall --- */
.browse-block {padding:26px 0;border-top:1px solid #efe9e1}
.browse-block:first-of-type {border-top:none;padding-top:6px}
.browse-block h2 {font-size:19px;margin-bottom:4px}
.browse-block .bb-note {color:#8a7f6a;font-size:13.5px;margin-bottom:16px}
.browse-list {display:grid;grid-template-columns:repeat(4,1fr);gap:10px 22px;margin:0;padding:0;list-style:none}
.browse-list a {display:block;padding:9px 2px;border-bottom:1px solid #f2ece4;color:#333;font-weight:600;font-size:14px;text-decoration:none}
.browse-list a:hover {color:#e04f1a;border-bottom-color:#f0d6c6}
.browse-list a span {color:#a89a83;font-weight:600;font-size:12px}
.browse-tags {display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:900px) {
      .cats-6 {grid-template-columns:repeat(2,1fr)}
      .browse-list {grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px) {
      .cats-6 {grid-template-columns:repeat(2,1fr)}
      .cats-6 .cat img {height:112px}
      .browse-list {grid-template-columns:1fr}
}

/* --- footer keyword index: plain links, no counts, no size ladder --- */
.sec-tags-foot {margin-top:8px;padding-top:26px;border-top:1px solid #efe9e1}
.sec-tags-foot .sec-note {color:#8a7f6a;font-size:13px;margin:-8px 0 14px}
.tag-cloud-foot {gap:0 18px}
.tag-cloud-foot .tag {border:none;background:none;border-radius:0;padding:5px 0;color:#6b6259;font-weight:500;font-size:13.5px;border-bottom:1px solid transparent}
.tag-cloud-foot .tag:hover {color:#e04f1a;border-bottom-color:#f0d6c6;background:none}