*{ box-sizing: border-box; }
html,body{ margin:0; background: var(--color-bg); color: var(--color-text); }
a{ color: inherit; text-decoration: none; }
.site-main{ width:100%; margin: 0 auto; padding: 32px 48px 80px; }

/* Navbar */
.navbar{ background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top:0; z-index: 50; transition: box-shadow .25s ease; }
.navbar.scrolled{ box-shadow: 0 6px 24px -18px rgba(43,38,33,0.5); }
.navbar-inner{ width:100%; margin:0 auto; display:flex; align-items:center; gap:28px; padding: 16px 48px; flex-wrap: wrap; }
.brand{ font-size:1.4rem; color: var(--color-primary); margin-right:auto; }
.nav-toggle{ display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--color-text); }
.nav-links{ display:flex; gap:22px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-links a{ color: var(--color-text); font-weight:500; }
.nav-links a:hover{ color: var(--color-primary); }
.nav-search{ display:flex; border:1px solid var(--color-border); border-radius:999px; overflow:hidden; background:var(--color-bg-alt); }
.nav-search input{ border:none; background:none; padding:9px 14px; font-family:var(--font-body); outline:none; width:170px; }
.nav-search button{ border:none; background:none; padding:0 14px; cursor:pointer; color:var(--color-primary); }

/* Ad slot */
.ad-slot{ width:100%; margin: 16px auto; padding: 0 48px; }

/* Grid layout */
.content-grid{ display:grid; grid-template-columns: 220px 1fr; gap: 40px; align-items:start; }
.sidebar{ background: var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:20px; }
.category-list{ list-style:none; margin: 12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.category-list a{ display:block; padding:8px 10px; border-radius:8px; color:var(--color-text-muted); }
.category-list a.active, .category-list a:hover{ background: var(--color-bg-alt); color: var(--color-primary); }
.recipe-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 26px; }

/* Footer */
.site-footer{ border-top:1px solid var(--color-border); margin-top:60px; padding: 30px 0; }
.footer-inner{ width:100%; margin:0 auto; padding:0 48px; text-align:center; color: var(--color-text-muted); font-size:0.9rem; }
.footer-links a{ color: var(--color-primary); }

/* Admin layout */
.admin-layout{ display:grid; grid-template-columns: 220px 1fr; gap:32px; }
.admin-sidebar{ background: var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:20px; height:fit-content; }
.admin-sidebar ul{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:6px; }
.admin-sidebar a{ display:block; padding:9px 10px; border-radius:8px; color:var(--color-text-muted); }
.admin-sidebar a:hover{ background: var(--color-bg-alt); color: var(--color-primary); }

/* Featured recipe band (home page) */
.featured-recipe{ position:relative; min-height:56vh; border-radius:18px; background-size:cover; background-position:center; display:flex; align-items:flex-end; margin-bottom:40px; overflow:hidden; }
.featured-recipe::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,24,28,0) 0%, rgba(20,24,28,0.55) 55%, rgba(20,24,28,0.94) 100%); }
.featured-recipe-overlay{ position:relative; z-index:1; padding: 40px 48px; max-width:720px; }
.featured-tag{ display:inline-flex; align-items:center; gap:6px; background: var(--color-primary); color:#fff; padding:6px 14px; border-radius:999px; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; }
.featured-recipe-overlay h1{ font-size: clamp(2rem,4.2vw,3.6rem); margin:0 0 12px; color:#fff; }
.featured-desc{ color:#E7ECF0; margin:0 0 18px; font-size:1.05rem; max-width:600px; }
.featured-meta{ display:flex; gap:20px; color:#CBD6DE; font-size:0.9rem; margin-bottom:22px; flex-wrap:wrap; align-items:center; }

/* Weekly menu widget (home page) */
.weekly-menu-block{ margin-bottom:48px; }
.weekly-menu-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.weekly-menu-head h2{ margin:0; font-size:1.4rem; display:flex; align-items:center; gap:10px; }
.weekly-menu-grid{ display:flex; flex-direction:column; border:1px solid var(--color-border); border-radius:14px; overflow:hidden; background: var(--color-surface); }
.wm-row{ display:grid; grid-template-columns: 120px repeat(7,1fr); }
.wm-head-row{ background: var(--color-bg-alt); }
.wm-cell{ padding:12px 10px; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border); font-size:0.85rem; display:flex; align-items:center; }
.wm-row:last-child .wm-cell{ border-bottom:none; }
.wm-row .wm-cell:last-child{ border-right:none; }
.wm-day-label, .wm-slot-label{ font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; color: var(--color-text-muted); font-weight:600; }
.wm-item a{ color: var(--color-primary); font-weight:500; }
.wm-item{ color: var(--color-text-muted); }
.wm-wanted{ color: var(--color-accent); font-style:italic; }
.wm-empty{ opacity:0.35; }
.wm-week-total{ color: var(--color-accent); font-size:0.85rem; font-family: var(--font-mono); }
.wm-total-row{ background: var(--color-bg-alt); }
.wm-day-total{ font-family: var(--font-mono); color: var(--color-primary); font-weight:600; }

/* Weekly menu editor (menu.php / admin/menu.php) */
.menu-page-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:12px; }
.menu-hint{ color: var(--color-text-muted); margin-bottom:20px; }
.menu-edit-grid{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:14px; margin-bottom:26px; max-width:100%; }
.menu-day-col{ background: var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.menu-day-col h3{ margin:0; font-size:0.95rem; text-align:center; }
.menu-slot-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.menu-slot-field label{ font-size:0.72rem; text-transform:uppercase; color: var(--color-text-muted); font-family: var(--font-mono); }
.menu-slot-field select, .menu-slot-field input{ width:100%; min-width:0; padding:8px 10px; border:1px solid var(--color-border); border-radius:8px; font-size:0.82rem; background: var(--color-bg-alt); color: var(--color-text); font-family: var(--font-body); }
.menu-day-total-badge{ text-align:center; font-family: var(--font-mono); font-size:0.75rem; color: var(--color-primary); border-top:1px dashed var(--color-border); padding-top:10px; margin-top:auto; }

/* Menu templates */
.template-panel{ background: var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:20px 22px; margin-bottom:26px; }
.template-panel h3{ margin:0 0 12px; font-size:1rem; }
.save-template-form{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.save-template-form input{ flex:1; min-width:200px; padding:9px 14px; border:1px solid var(--color-border); border-radius:8px; background: var(--color-bg-alt); color: var(--color-text); font-family: var(--font-body); }
.template-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.template-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; background: var(--color-bg-alt); border:1px solid var(--color-border); border-radius:10px; padding:10px 14px; flex-wrap:wrap; }
.template-list .template-name{ font-weight:500; }
.template-list .template-date{ color: var(--color-text-muted); font-size:0.75rem; margin-left:8px; }
.template-actions{ display:flex; gap:8px; }
.template-actions button{ padding:7px 14px; font-size:0.78rem; }

/* Suggest a Recipe (public) */
.suggest-recipe-block{ background: var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:24px 28px; margin-bottom:40px; }
.suggest-recipe-block h2{ margin:0 0 6px; font-size:1.3rem; display:flex; align-items:center; gap:10px; }
.suggest-recipe-form{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.suggest-recipe-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.82rem; color: var(--color-text-muted); font-family: var(--font-mono); text-transform:uppercase; }
.suggest-recipe-form input, .suggest-recipe-form textarea{ padding:10px 14px; border:1px solid var(--color-border); border-radius:8px; background: var(--color-bg-alt); color: var(--color-text); font-family: var(--font-body); text-transform:none; }

@media (max-width: 860px){
  .content-grid, .admin-layout{ grid-template-columns: 1fr; }
  .nav-toggle{ display:block; }
  .nav-links{ display:none; flex-direction:column; align-items:flex-start; width:100%; }
  .nav-links.open{ display:flex; }
  .navbar-inner{ flex-direction:column; align-items:flex-start; padding: 16px 20px; }
  .site-main{ padding: 24px 20px 60px; }
  .ad-slot, .footer-inner{ padding: 0 20px; }
  .featured-recipe{ min-height:auto; }
  .featured-recipe-overlay{ padding: 28px 24px; max-width:none; }
  .weekly-menu-grid{ overflow-x:auto; }
  .wm-row{ min-width:760px; }
  .menu-edit-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .menu-edit-grid{ grid-template-columns: 1fr; }
}