/* === Offline base: no Bootstrap required === */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.container { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.row { display: flex; gap: 40px; }
.col-lg-3 { width: 25%; }
.col-lg-9 { width: 75%; }
@media (max-width: 992px){
  .row { flex-direction: column; }
  .col-lg-3, .col-lg-9 { width: 100%; }
}
.btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--accent); background: #fff; color: var(--accent); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent); color: #fff; }
.btn-outline-secondary { border-color: var(--accent); color: var(--accent); }
.rounded-pill { border-radius: 0 !important; } /* keep square per requirements */
.img-fluid { max-width: 100%; height: auto; display: block; }
.text-center { text-align: center; }
.me-2 { margin-right: 8px; }
.mt-2 { margin-top: 8px; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 2rem; padding-bottom: 2rem; }
.mb-4 { margin-bottom: 1.25rem; }
.p-3 { padding: 1rem; }
.p-0 { padding: 0; }
.pb-3 { padding-bottom: 1rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.g-5 { gap: 40px; }
.form-control { width: 100%; padding: 0.5rem 0.75rem; }
.form-control-sm { padding: 0.4rem 0.6rem; }
.w-100 { width: 100%; }
.alert { padding: 1rem; border:1px solid #cce5ff; background:#e9f5ff; }
.alert-success { border-color:#b7e1c1; background:#e9f9ee; }

/* Color scheme tuned to the screenshot:
       - Background: white
       - Accents: soft olive green
       - Highlight: beige/gold
       - Text: near-black with cool gray muted text
    */
    :root{
      --accent:#8BA37E;        /* olive */
      --accent-dark:#6f8a62;   /* deeper olive for hover */
      --highlight:#D6C6A1;     /* beige/gold */
      --text:#222222;          /* near-black text */
      --muted:#7f8281;         /* cool gray for meta */
      --border:#e8e8e8;        /* light border */
      --bg:#ffffff;
    }

    html,body{background:var(--bg);}
    body{
      font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      line-height:1.6;
    }
    a{color:inherit; text-decoration:none;}
    a:hover{color:var(--accent);}

    /* Top strip */
    .topbar{
      font-size:12px; letter-spacing:.08em; text-transform:uppercase;
      color:var(--muted); border-bottom:1px solid var(--border); background:#fff;
    }
    .topbar a{padding:.55rem .75rem; display:inline-block;}
    .topbar a:hover{color:var(--accent);}

    /* Brand */
    .brand{padding:20px 0 10px; text-align:center; border-bottom:1px solid var(--border); background:#fff;}
    .brand-logo{font-family: 'Montserrat', sans-serif; font-weight:300; font-size:34px;}
    .brand-sub{font-size:18px; letter-spacing:.05em; text-transform:none; color:#333;}
    .leaf-dot{display:inline-block; width:46px; height:6px; background:var(--accent); border-radius:6px; margin:10px auto 0;}

    /* Layout spacing */
    .site-wrap{max-width:1100px;}
    .sidebar .card{border:none; border-radius:0; box-shadow:none; border-top:1px solid var(--border); background:#fff;}
    .sidebar .card:first-child{border-top:none;}
    .sidebar .card-title{font-family:"Playfair Display", serif;}

    .badge-leaf{
      width:60px; height:3px; background:var(--accent); margin:.5rem 0 1rem;
    }

    /* Award block with beige accent */
    .award{
      font-family:"Playfair Display",serif; text-align:center; padding:1.75rem 1rem; position:relative;
    }
    .award::before{
      content:""; position:absolute; inset:10px; border:1px solid var(--border);
    }
    .award .small{font-size:13px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase;}
    .award .big{font-size:52px; line-height:1; letter-spacing:.12em; color:#1f1f1f;}
    .award .tag{font-size:22px; letter-spacing:.20em; color:#1f1f1f;}
    .award .ribbon{width:100%; height:8px; background:var(--highlight); margin:14px 0 0;}

    .post-card{border:1px solid var(--border); border-radius: 0; overflow:hidden; background:#fff;}
    .post-card img{width:100%; height:auto; display:block;}
    .post-meta{font-size:12px; color:var(--muted);}
    .post-title{
      font-family:'Montserrat', sans-serif;
      font-weight:300;
      font-size:40px;
      line-height:1.2;
      margin:.35rem 0 .75rem;
      letter-spacing:.01em;
      color:#1e1e1e;
    }
    .btn-read{
      border:1px solid var(--accent); border-radius:40px; padding:.4rem 1rem;
      font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); background:#fff;
    }
    .btn-read:hover{background:var(--accent); color:#fff;}
    .subscribe input[type="email"]{border:1px solid var(--border); border-radius:0;}
    .subscribe .btn { margin-top: 12px !important; margin-bottom: 30px !important; background: var(--accent) !important; color: #fff !important; }
    .subscribe .btn:hover{background:var(--accent); color:#fff;}
    footer{font-size:12px; color:var(--muted); border-top:1px solid var(--border); background:#fff;}

    /* Small helpers */
    .icon-list a{margin-right:.65rem; font-size:14px; color:var(--muted);}
    .icon-list a:hover{color:var(--accent);}
    .cookbook-img{border:1px solid var(--border);}
  
    .post-desc{
      font-family:'Montserrat', sans-serif;
      font-weight:400;
      font-size:18px;
      line-height:1.9;
      color:#383838;
      margin-bottom:.5rem;
    }
    .post-meta{
      display:flex; align-items:center; gap:.6rem;
      font-family:'Montserrat', sans-serif;
      font-weight:400;
      font-size:13px; color:#7f8281;
    }
    .avatar{border-radius:50% !important;
      width:28px; height:28px;
      background:linear-gradient(180deg,#d9d9d9,#bfbfbf);
      flex:0 0 28px;
      display:inline-block;
    }
    .dot{width:4px; height:4px; background:#c5c5c5; border-radius:50%; display:inline-block;}
    @media (max-width: 576px){
      .post-title{font-size:30px;}
      .post-desc{font-size:16px; line-height:1.7;}
    }
    
    /* Sidebar (left column) exact styling */
    .sidebar{font-family:'Montserrat', sans-serif;}
    .sb-title{
      font-family:'Playfair Display', serif;
      font-style:italic;
      font-size:18px;
      color:#222;
      margin:0 0 .25rem 0;
    }
    .sb-text{font-size:13px; color:#555; line-height:1.7;}
    .sb-icons{display:flex; gap:18px; padding:.75rem 0 1.1rem; border-top:1px solid var(--border);}
    .sb-icons a{color:#222; opacity:.8; font-size:15px;}
    .sb-icons a:hover{color:var(--accent); opacity:1;}
    .sb-sep{height:1px; background:var(--border); margin:.85rem 0 0;}
    .award-wrap{padding:1.25rem 0; text-align:center;}
    .award-top{display:flex; align-items:center; gap:10px; color:#c3b48e; justify-content:center; margin:.25rem 0 .75rem;}
    .award-top .line{flex:1; height:1px; background:#eee; max-width:70px;}
    .award-top .label{font-family:'Playfair Display', serif; font-style:italic; font-size:18px; color:#c3b48e;}
    .award-star{width:10px; height:10px; background:#c3b48e; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
    .award-big{font-family:'Playfair Display', serif; font-size:52px; letter-spacing:.05em; line-height:1; color:#1e1e1e;}
    .award-sub{font-family:'Playfair Display', serif; font-size:34px; letter-spacing:.06em; margin-top:.25rem; color:#1e1e1e;}
    .award-year{font-size:16px; color:#c3b48e; letter-spacing:.25em; margin-top:.5rem;}
    .sb-underline { width:26px; height:2px; background:var(--accent); margin:12px 0 1rem !important; }
    .cookbook-btn { margin-top: 12px !important; margin-bottom: 30px !important; background: var(--accent) !important; color: #fff !important; }
    .cookbook-btn:hover{background:var(--accent-dark); color:#fff;}
    .subscribe-title{font-family:'Playfair Display', serif; font-style:italic; font-size:16px; color:#222;}
    .subscribe input[type="email"]{border:1px solid #e1e1e1; height:38px; padding:8px 10px; font-size:13px;}
    .subscribe input::placeholder{color:#b4b4b4;}
    .subscribe .btn { margin-top: 12px !important; margin-bottom: 30px !important; background: var(--accent) !important; color: #fff !important; }
    .subscribe .btn:hover{background:var(--accent-dark);}

    
    .sb-icons a{color:#222; opacity:.85; font-size:18px; line-height:1;}
    .sb-icons a:hover{color:var(--accent); opacity:1;}
    .sb-icons a i{display:inline-block; width:20px; text-align:center;}
    
    .sb-icons{display:flex; gap:28px; padding:18px 0; border-top:1px solid var(--border);}
    .sb-icons a{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;}
    .sb-icons svg{width:26px; height:26px; fill:none; stroke:#222; stroke-width:2;}
    .sb-icons .yt rect{fill:#222; stroke:#222;}
    .sb-icons .yt polygon{fill:#fff; stroke:#fff;}
    .sb-icons .ig{stroke:#222;}
    .sb-icons .ig circle{fill:none;}
    
    * {
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    .post-card, .card, .btn, img, input, textarea, .subscribe input[type="email"] {
      border-radius: 0 !important;
      box-shadow: none !important;
    }


    .avatar{border-radius:50% !important; overflow:hidden;}


/* Spacing adjustments for cookbook and subscribe sections */
.cookbook-img { margin-bottom: 12px !important; }
.cookbook-btn { margin-top: 12px !important; margin-bottom: 30px !important; background: var(--accent) !important; color: #fff !important; }
.subscribe input[type="email"] { margin-top: 12px !important; }
.subscribe .btn { margin-top: 12px !important; margin-bottom: 30px !important; background: var(--accent) !important; color: #fff !important; }

.sidebar-section { margin-bottom: 24px !important; }


.cookbook-btn,
.subscribe .btn {
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 10px 22px !important;
  height: auto !important;
  line-height: 1.3 !important;
  display: inline-block !important;
  text-align: center !important;
}

/* Make top menu stick to top */
.topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

/* Make branding section stick under the top menu */
.brand {
  position: -webkit-sticky;
  position: sticky;
  top: 38px; /* height of the topbar */
  z-index: 9998;
  background: #fff;
}

/* Center social icons on mobile */
@media (max-width: 768px) {
  .sb-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 auto;
  }
}

.save-btn {
  border: 1px solid var(--border);
  background: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  color: #333;
}

/* outline heart before text */
.save-btn::before {
  content: "\2661"; /* ♡ */
  margin-right: 6px;
}

/* filled heart when saved */
.save-btn.saved::before {
  content: "\2665"; /* ♥ */
  color: #e63946;
}

/* Video thumbnails */
.video-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* =========================
   MOBILE HEADER BEHAVIOR
   ========================= */

/* Compact bar is hidden by default */
.topbar-compact {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #ffffff;
  border-bottom: 1px solid #eee;
}

/* Logo inside the compact bar */
.compact-logo {
  height: 40px;
  width: auto;
  display: block;
}

/* Hamburger icon: 3-line icon built with CSS */
.hamburger {
  width: 26px;
  height: 18px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Middle line */
.hamburger span,
.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: #7a8b63; /* olive */
  transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}

/* Center line */
.hamburger span {
  top: 50%;
  transform: translateY(-50%);
}

/* Top and bottom lines */
.hamburger::before {
  top: 3px;
}

.hamburger::after {
  bottom: 3px;
}

/* Optional: slightly darker on hover */
.hamburger:hover span,
.hamburger:hover::before,
.hamburger:hover::after {
  background: #6f8a62;
}

/* Mobile only */
@media (max-width: 768px) {

  /* Make the big brand block scroll with the page, not stick */
  .brand {
    position: static;
  }

  /* Make topbar a positioning context for the dropdown */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  /* Default on mobile: show full text menu at the very top (before scroll) */
  .topbar-primary {
    display: flex;
    justify-content: center;
    gap: 1.7rem;
    background: #ffffff;
  }

  .topbar-primary a {
    padding: 0.6rem 0.2rem;
    display: inline-block;
  }

  /* When scrolled: hide text menu, show compact bar */
  .topbar.is-scrolled .topbar-primary {
    display: none;
  }

  .topbar.is-scrolled .topbar-compact {
    display: flex;
  }

  /* When hamburger is clicked: show dropdown – Style C */
  .topbar.menu-open {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }

  .topbar.menu-open .topbar-primary {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 14px 22px 18px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    gap: 0;
  }

  .topbar.menu-open .topbar-primary a {
    text-align: left;
    padding: 0.7rem 0;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7f8281;
    border-bottom: 1px solid rgba(139, 163, 126, 0.12);
  }

  .topbar.menu-open .topbar-primary a:last-child {
    border-bottom: none;
  }

  .topbar.menu-open .topbar-primary a:hover {
    color: #8BA37E;
    background: rgba(139, 163, 126, 0.06);
  }

  /* Scrolled + menu open: still show the dropdown */
  .topbar.is-scrolled.menu-open .topbar-primary {
    display: flex;
  }
}
	
/* =========================
   ADSENSE CENTERING
   ========================= */

.ad-slot {
  margin: 32px 0;   /* same spacing everywhere */
  text-align: center;
}

.ad-slot .adsbygoogle {
  display: inline-block !important;
  margin: 0 auto !important;
}