/* ============================================================
   Off Grid Kitchen — style.css
   Theme: Stone · Timber · Ember · Forest
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lato:wght@300;400;600;700&display=swap');

:root {
  --timber:    #4A2E1A;
  --timber-d:  #2E1A0A;
  --ember:     #C4622D;
  --ember-l:   #D97B4A;
  --forest:    #2D4A2D;
  --forest-l:  #3D6B3D;
  --stone:     #C8C2B4;
  --stone-l:   #E8E4DC;
  --ash:       #F5F2EE;
  --char:      #1C1410;
  --white:     #FFFFFF;
  --muted:     #7A7268;
  --border:    #DDD8CF;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;
  --radius:    6px;
  --shadow:    0 2px 12px rgba(28,20,16,0.08);
  --shadow-md: 0 4px 24px rgba(28,20,16,0.12);
  --container: 1140px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--char); background:var(--ash); }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

/* Signature ember rule */
.ember-rule { width:100%; height:2px; background:linear-gradient(90deg, transparent, var(--ember), transparent); border:none; margin:0; }

.container { max-width:var(--container); margin:0 auto; padding:0 1.5rem; }

h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; color:var(--timber); }
h1 { font-size:clamp(2rem,5vw,3.5rem); }
h2 { font-size:clamp(1.5rem,3.5vw,2.25rem); }
h3 { font-size:1.35rem; }
p  { margin-bottom:1rem; }

.eyebrow { font-family:var(--font-body); font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ember); display:block; margin-bottom:0.6rem; }

/* Header */
.site-header { background:var(--timber); border-bottom:2px solid var(--ember); position:sticky; top:0; z-index:100; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1.5rem; max-width:var(--container); margin:0 auto; }
.site-logo { text-decoration:none; display:flex; flex-direction:column; align-items:flex-start; }
.site-logo-name { font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:var(--stone-l); line-height:1.1; }
.site-logo-tag  { font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ember); margin-top:1px; }
.site-nav { display:flex; align-items:center; gap:0.25rem; }
.nav-link { font-size:0.88rem; font-weight:600; color:var(--stone-l); text-decoration:none; padding:0.45rem 0.85rem; border-radius:var(--radius); transition:background 0.15s,color 0.15s; }
.nav-link:hover, .nav-link.active { background:rgba(196,98,45,0.18); color:var(--ember-l); }
.nav-cta { background:var(--ember) !important; color:var(--white) !important; font-weight:700 !important; }
.nav-cta:hover { background:var(--ember-l) !important; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; color:var(--stone-l); font-size:1.5rem; }
@media(max-width:768px) {
  .nav-toggle { display:block; }
  .site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--timber-d); flex-direction:column; padding:1rem; gap:0.25rem; }
  .site-nav.open { display:flex; }
  .nav-link { width:100%; }
}

/* Footer */
.site-footer { background:var(--timber); color:var(--stone-l); padding:3rem 0 1.5rem; margin-top:4rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.footer-brand p { color:var(--stone); font-size:0.9rem; line-height:1.6; margin-top:0.75rem; }
.footer-col h4 { font-family:var(--font-body); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ember); margin-bottom:0.85rem; }
.footer-col a { display:block; color:var(--stone); text-decoration:none; font-size:0.88rem; margin-bottom:0.45rem; transition:color 0.15s; }
.footer-col a:hover { color:var(--stone-l); }
.footer-bottom { border-top:1px solid rgba(200,194,180,0.15); padding-top:1.25rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; }
.footer-bottom p { font-size:0.8rem; color:var(--stone); margin:0; }
@media(max-width:640px) { .footer-grid { grid-template-columns:1fr 1fr; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.65rem 1.35rem; border-radius:var(--radius); font-family:var(--font-body); font-size:0.9rem; font-weight:700; cursor:pointer; border:2px solid transparent; text-decoration:none; transition:all 0.15s; }
.btn-ember   { background:var(--ember);  color:var(--white); border-color:var(--ember); }
.btn-ember:hover { background:var(--ember-l); border-color:var(--ember-l); }
.btn-forest  { background:var(--forest); color:var(--white); border-color:var(--forest); }
.btn-forest:hover { background:var(--forest-l); border-color:var(--forest-l); }
.btn-outline { background:transparent; color:var(--timber); border-color:var(--border); }
.btn-outline:hover { border-color:var(--ember); color:var(--ember); }
.btn-outline-light { background:transparent; color:var(--stone-l); border-color:rgba(200,194,180,0.4); }
.btn-outline-light:hover { border-color:var(--ember-l); color:var(--ember-l); }
.btn-sm { padding:0.35rem 0.75rem; font-size:0.78rem; }
.btn-lg { padding:0.85rem 1.75rem; font-size:1rem; }

/* Cards */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:box-shadow 0.2s,transform 0.2s; }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-img { width:100%; height:220px; object-fit:cover; }
.card-img-placeholder { width:100%; height:220px; background:var(--stone-l); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
.card-body { padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.card-eyebrow { font-size:0.7rem; font-weight:700; color:var(--ember); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.4rem; }
.card-title { font-family:var(--font-display); font-size:1.15rem; color:var(--timber); margin-bottom:0.5rem; line-height:1.25; }
.card-desc { font-size:0.88rem; color:var(--muted); line-height:1.5; }

/* Grids */
.recipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; }
@media(max-width:768px) { .two-col,.three-col { grid-template-columns:1fr; } }
@media(max-width:600px) { .recipe-grid { grid-template-columns:1fr; } }

/* Meta pills */
.meta-pill { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.75rem; font-weight:600; color:var(--muted); background:var(--stone-l); padding:0.25rem 0.65rem; border-radius:99px; }
.meta-pills { display:flex; flex-wrap:wrap; gap:0.4rem; }

/* Forms */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:0.8rem; font-weight:700; color:var(--timber); margin-bottom:0.4rem; text-transform:uppercase; letter-spacing:0.05em; }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:0.65rem 0.9rem; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); font-size:0.95rem; color:var(--char); background:var(--white); transition:border-color 0.15s; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { outline:none; border-color:var(--ember); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-help { font-size:0.78rem; color:var(--muted); margin-top:0.3rem; }

/* Alerts */
.alert { padding:0.85rem 1.1rem; border-radius:var(--radius); font-size:0.88rem; margin-bottom:1.25rem; }
.alert-success { background:#e8f5e9; border:1px solid #a5d6a7; color:#2e7d32; }
.alert-error   { background:#fce8e6; border:1px solid #ef9a9a; color:#c62828; }
.alert-info    { background:#e3f2fd; border:1px solid #90caf9; color:#1565c0; }

/* Badges */
.badge { display:inline-block; padding:0.2rem 0.6rem; border-radius:3px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.badge-ember  { background:rgba(196,98,45,0.12); color:var(--ember); }
.badge-forest { background:rgba(45,74,45,0.12); color:var(--forest); }
.badge-stone  { background:var(--stone-l); color:var(--muted); }
.badge-tier1  { background:#e3f2fd; color:#1565c0; }
.badge-tier2  { background:#e8f5e9; color:#2e7d32; }
.badge-tier3  { background:rgba(196,98,45,0.12); color:var(--ember); }
.badge-success { background:#e8f5e9; color:#2e7d32; }
.badge-muted  { background:var(--stone-l); color:var(--muted); }

/* Blog content */
.blog-content h2 { margin:2rem 0 0.75rem; }
.blog-content h3 { margin:1.5rem 0 0.6rem; }
.blog-content p  { margin-bottom:1.25rem; line-height:1.85; }
.blog-content ul,.blog-content ol { margin:0 0 1.25rem 1.5rem; }
.blog-content li { margin-bottom:0.4rem; line-height:1.7; }
.blog-content a  { color:var(--ember); text-decoration:underline; }
.blog-content strong { color:var(--timber); }
.blog-content blockquote { border-left:3px solid var(--ember); padding:0.75rem 1.25rem; background:var(--stone-l); border-radius:0 var(--radius) var(--radius) 0; margin:1.5rem 0; font-style:italic; color:var(--muted); }

/* Admin */
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar { width:240px; background:var(--timber); padding:1.5rem 0; flex-shrink:0; min-height:100vh; }
.admin-sidebar-logo { padding:0 1.25rem 1.5rem; border-bottom:1px solid rgba(200,194,180,0.15); margin-bottom:0.5rem; }
.admin-sidebar-logo span { font-family:var(--font-display); font-size:1.1rem; color:var(--stone-l); display:block; }
.admin-sidebar-logo small { font-size:0.7rem; color:var(--ember); text-transform:uppercase; letter-spacing:0.1em; }
.admin-nav-section { padding:1rem 1.25rem 0.25rem; font-size:0.65rem; font-weight:700; color:var(--ember); text-transform:uppercase; letter-spacing:0.12em; }
.admin-nav-link { display:block; padding:0.5rem 1.25rem; color:var(--stone); font-size:0.88rem; text-decoration:none; transition:background 0.15s,color 0.15s; }
.admin-nav-link:hover,.admin-nav-link.active { background:rgba(196,98,45,0.15); color:var(--stone-l); }
.admin-main { flex:1; padding:2rem; background:var(--ash); overflow-y:auto; }
.admin-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; gap:0.75rem; }
.admin-header h1 { font-size:1.5rem; }
.admin-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.5rem; }
.admin-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.admin-table th { background:var(--ash); padding:0.65rem 1rem; text-align:left; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); border-bottom:1px solid var(--border); }
.admin-table td { padding:0.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:var(--ash); }

/* Utilities */
.text-ember  { color:var(--ember); }
.text-forest { color:var(--forest); }
.text-muted  { color:var(--muted); }
.text-timber { color:var(--timber); }
.text-center { text-align:center; }
.section     { padding:4rem 0; }
.section-alt { background:var(--white); }
.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:0.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}

/* ── NO PRINT — keeps people coming back to the site ────── */
@media print {
  * { display: none !important; }
  body::after {
    display: block !important;
    content: "Recipes on Off Grid Kitchen are only available online at offgridkitchen.com — join free to access the full community.";
    font-family: Georgia, serif;
    font-size: 18px;
    text-align: center;
    padding: 4rem 2rem;
    color: #333;
  }
}