@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:#fafaf9;color:#1a1a1a;line-height:1.6;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

/* ── Header ── */
.site-header{background:#fff;border-bottom:1px solid #e5e5e5;position:sticky;top:0;z-index:100;}
.header-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;}
.site-brand{display:flex;align-items:center;gap:10px;}
.brand-logo{height:38px;object-fit:contain;}
.brand-text{font-size:18px;font-weight:700;color:#1a1a1a;}
.brand-sub{font-size:11px;color:#999;letter-spacing:0.04em;}
.header-nav{display:flex;align-items:center;gap:1.5rem;}
.header-nav a{font-size:13px;font-weight:500;color:#555;transition:color .15s;}
.header-nav a:hover{color:#2a7a5a;}

/* ── Hero ── */
.hero{background:linear-gradient(135deg,#1a3d2e 0%,#2a7a5a 100%);color:#fff;padding:4rem 1.5rem;}
.hero-inner{max-width:750px;margin:0 auto;text-align:center;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:4px 14px;font-size:12px;font-weight:500;letter-spacing:0.05em;margin-bottom:1.25rem;}
.hero h1{font-size:2.5rem;font-weight:800;line-height:1.2;margin-bottom:1rem;}
.hero-sub{font-size:16px;color:rgba(255,255,255,0.85);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto;}
.hero-search{display:flex;gap:0;max-width:580px;margin:0 auto 1.5rem;}
.hero-search input{flex:1;padding:13px 18px;font-size:15px;border:none;border-radius:8px 0 0 8px;font-family:'Inter',sans-serif;outline:none;}
.hero-search button{padding:13px 24px;background:#f59e0b;color:#fff;border:none;border-radius:0 8px 8px 0;font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.hero-search button:hover{background:#d97706;}
.hero-stats{display:flex;justify-content:center;gap:2rem;font-size:13px;color:rgba(255,255,255,0.7);}
.hero-stats span::before{content:'• ';color:rgba(255,255,255,0.4);}
.hero-stats span:first-child::before{content:'';}

/* ── Body ── */
.site-body{padding:2rem 1.5rem;}
.content-wrap{max-width:1200px;margin:0 auto;}

/* ── Home Layout ── */
.home-layout{display:grid;grid-template-columns:1fr 280px;gap:2rem;}
.section{margin-bottom:2.5rem;}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;}
.section-head h2{font-size:18px;font-weight:700;}
.see-all{font-size:13px;color:#2a7a5a;font-weight:500;}

/* ── Ingredient Grid ── */
.ingredient-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}
.ing-card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:1.25rem;display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s,transform .15s;cursor:pointer;}
.ing-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08);transform:translateY(-2px);}
.ing-card-top{display:flex;justify-content:space-between;align-items:center;}
.ing-category{font-size:11px;font-weight:600;color:#2a7a5a;text-transform:uppercase;letter-spacing:0.05em;}
.ing-badge-featured{font-size:11px;background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:10px;}
.ing-name{font-size:16px;font-weight:700;color:#1a1a1a;}
.ing-inci{font-size:12px;color:#888;font-style:italic;}
.ing-summary{font-size:13px;color:#555;line-height:1.5;flex:1;}
.ing-tags{display:flex;flex-wrap:wrap;gap:5px;}
.ing-tag{font-size:11px;background:#f0f4f2;color:#2a7a5a;padding:2px 8px;border-radius:10px;font-weight:500;}
.ing-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;}
.ing-views{color:#aaa;}
.ing-read{color:#2a7a5a;font-weight:600;}

/* ── Sidebar ── */
.home-sidebar{display:flex;flex-direction:column;gap:1rem;}
.sidebar-card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:1.25rem;}
.sidebar-card h3{font-size:14px;font-weight:700;margin-bottom:1rem;color:#1a1a1a;}
.cat-list{list-style:none;}
.cat-list li a{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;color:#444;border-bottom:0.5px solid #f0f0f0;transition:color .12s;}
.cat-list li a:hover,.cat-list li a.active{color:#2a7a5a;font-weight:600;}
.cat-list li:last-child a{border-bottom:none;}
.cat-count{background:#f0f4f2;color:#2a7a5a;font-size:11px;padding:1px 7px;border-radius:10px;font-weight:600;}
.sidebar-search{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;font-family:'Inter',sans-serif;margin-bottom:8px;}
.btn-search-sm{width:100%;padding:8px;background:#2a7a5a;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.disclaimer{background:#fffbeb;border-color:#fde68a;}
.disclaimer h3{color:#92400e;}
.disclaimer p{font-size:12px;color:#78350f;line-height:1.5;}

/* ── Results Header ── */
.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.results-header h2{font-size:20px;font-weight:700;}
.count{font-size:15px;font-weight:400;color:#888;margin-left:8px;}
.btn-back{font-size:13px;color:#2a7a5a;font-weight:600;}
.empty-state{text-align:center;padding:4rem 2rem;}
.empty-icon{font-size:3rem;margin-bottom:1rem;}
.empty-state h3{font-size:18px;font-weight:700;margin-bottom:8px;}
.empty-state p{color:#888;}
.empty-state a{color:#2a7a5a;}

/* ── Breadcrumb ── */
.breadcrumb{font-size:13px;color:#888;margin-bottom:1.5rem;}
.breadcrumb a{color:#2a7a5a;}
.breadcrumb a:hover{text-decoration:underline;}

/* ── Detail Layout ── */
.detail-layout{display:grid;grid-template-columns:1fr 280px;gap:2rem;}
.detail-main{min-width:0;}
.detail-sidebar{display:flex;flex-direction:column;gap:1rem;}

/* ── Ingredient Header ── */
.ing-header{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:2rem;margin-bottom:1.5rem;}
.ing-cat-pill{display:inline-block;background:#e8f5ef;color:#2a7a5a;font-size:12px;font-weight:600;padding:3px 12px;border-radius:20px;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em;}
.ing-header h1{font-size:2rem;font-weight:800;margin-bottom:8px;}
.ing-inci-large{font-size:14px;color:#666;margin-bottom:4px;}
.ing-alt{font-size:13px;color:#888;margin-bottom:4px;}
.ing-meta-row{display:flex;gap:1.5rem;margin-top:1rem;font-size:12px;color:#aaa;}

/* ── Quick Facts ── */
.quick-facts-box{background:#f0f9f4;border:1px solid #bbf7d0;border-radius:10px;padding:1.5rem;margin-bottom:1.5rem;}
.quick-facts-box h2{font-size:16px;font-weight:700;margin-bottom:1rem;color:#166534;}
.facts-table{width:100%;border-collapse:collapse;}
.facts-table tr{border-bottom:0.5px solid #d1fae5;}
.facts-table tr:last-child{border-bottom:none;}
.fact-label{padding:8px 12px 8px 0;font-size:13px;font-weight:600;color:#166534;white-space:nowrap;width:35%;}
.fact-value{padding:8px 0;font-size:13px;color:#1a1a1a;}

/* ── Content sections ── */
.ing-summary-box,.ing-content,.docs-section{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:1.5rem 2rem;margin-bottom:1.5rem;}
.ing-summary-box h2,.ing-content h2,.docs-section h2{font-size:17px;font-weight:700;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid #f0f0f0;}
.ing-summary-text p,.ing-content p{margin-bottom:1rem;font-size:15px;line-height:1.7;color:#333;}
.ing-content h1{font-size:20px;font-weight:700;margin:1.5rem 0 0.75rem;}
.ing-content h2{font-size:17px;font-weight:700;margin:1.5rem 0 0.75rem;border-bottom:none;padding-bottom:0;}
.ing-content h3{font-size:15px;font-weight:700;margin:1.25rem 0 0.5rem;color:#2a7a5a;}
.ing-content ul,.ing-content ol{margin:0.75rem 0 1rem 1.5rem;}
.ing-content li{margin-bottom:5px;font-size:15px;line-height:1.6;}
.ing-content table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:13px;}
.ing-content th{background:#2a7a5a;color:#fff;padding:9px 12px;text-align:left;font-weight:600;}
.ing-content td{padding:8px 12px;border-bottom:0.5px solid #eee;}
.ing-content tr:hover td{background:#f9fafb;}
.ing-content blockquote{border-left:3px solid #2a7a5a;background:#f0f9f4;padding:12px 16px;margin:1rem 0;border-radius:0 6px 6px 0;font-style:italic;color:#166534;}
.ing-content strong{font-weight:600;}

/* ── Documents ── */
.doc-list{display:flex;flex-direction:column;gap:10px;}
.doc-item{display:flex;align-items:center;gap:12px;border:1px solid #e5e5e5;border-radius:8px;padding:12px 16px;transition:background .12s;}
.doc-item:hover{background:#f9fafb;}
.doc-icon{font-size:24px;}
.doc-info{flex:1;}
.doc-name{display:block;font-size:14px;font-weight:600;}
.doc-meta{display:block;font-size:12px;color:#888;margin-top:2px;}
.doc-dl{font-size:13px;color:#2a7a5a;font-weight:600;}

/* ── Disclaimer box ── */
.disclaimer-box{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:1.25rem 1.5rem;font-size:13px;color:#78350f;line-height:1.6;}
.disclaimer-box strong{display:block;margin-bottom:6px;font-size:14px;}

/* ── Footer ── */
.site-footer{background:#1a1a1a;color:#aaa;padding:2.5rem 1.5rem;margin-top:3rem;}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.footer-brand p{font-size:12px;margin-top:6px;color:#666;}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a{font-size:13px;color:#888;}
.footer-links a:hover{color:#fff;}
.footer-copy{font-size:12px;color:#555;}

/* ── Tables (TinyMCE generated) ── */
.ing-content table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:13px; }
.ing-content table th { background:#2a7a5a; color:#fff; padding:9px 12px; text-align:left; font-weight:600; }
.ing-content table td { padding:8px 12px; border-bottom:0.5px solid #eee; }
.ing-content table tr:nth-child(even) td { background:#f9fafb; }
.ing-content table tr:hover td { background:#f0f4f2; }

/* ── Word-imported tables ── */
.word-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:13px;}
.word-table th{background:#2a7a5a;color:#fff;padding:9px 12px;text-align:left;font-weight:600;}
.word-table td{padding:8px 12px;border-bottom:0.5px solid #eee;}
.word-table tr:hover td{background:#f9fafb;}

/* ── Responsive ── */
@media(max-width:900px){
  .home-layout,.detail-layout{grid-template-columns:1fr;}
  .home-sidebar,.detail-sidebar{order:-1;}
  .hero h1{font-size:1.8rem;}
  .hero-search{flex-direction:column;}
  .hero-search input,.hero-search button{border-radius:8px;}
  .header-nav{display:none;}
}