:root{
  --bg:#F5F0E6; --surface:#FFFFFF; --ink:#2A2620; --ink-soft:#6B6459;
  --line:#E1D9C7; --green:#2F5D50; --green-dark:#16302B; --green-soft:#DCE9E2;
  --gold:#C9962F; --gold-dark:#8F6A1F; --gold-soft:#F3E4C4;
  --terracotta:#C1602E; --terracotta-dark:#A3501F;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);font-family:'Karla',system-ui,sans-serif;color:var(--ink);}
h1,h2,h3{font-family:'Bitter',Georgia,serif;margin:0;font-weight:600;}
a{color:var(--green);text-decoration:none;}
a:hover{color:var(--terracotta);}

.navlink{color:var(--ink-soft);font-size:14px;font-weight:500;}
.navlink:hover{color:var(--green);}
.navlink.active{color:var(--green-dark);border-bottom:2px solid var(--terracotta);padding-bottom:4px;}

.btn-primary{background:var(--terracotta);color:#FFFCF5;border:none;padding:14px 30px;border-radius:999px;font-family:'Karla',sans-serif;font-weight:600;font-size:14px;cursor:pointer;}
.btn-primary:hover{background:var(--terracotta-dark);}
.btn-outline{background:transparent;color:#FFFCF5;border:1.5px solid rgba(255,252,245,.6);padding:12px 28px;border-radius:999px;font-family:'Karla',sans-serif;font-weight:600;font-size:14px;cursor:pointer;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;}
.region-card{transition:transform .15s ease;}
.region-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,48,43,.12);}
.winery-card{border-radius:18px;}
.winery-card:hover{box-shadow:0 14px 30px rgba(22,48,43,.14);}
.row-card{border-radius:16px;transition:transform .15s ease;}
.row-card:hover{border-color:var(--green);transform:translateY(-1px);}
.pin:hover circle{fill:var(--terracotta);}

.footlink{color:#CFE0D6;font-size:14px;}
.footlink:hover{color:var(--gold);}

.cal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.btn-cal{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);padding:10px 18px;border-radius:999px;font-family:'Karla',sans-serif;font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;transition:all .15s ease;}
.btn-cal:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px);box-shadow:0 4px 10px rgba(22,48,43,.12);}
.btn-cal[data-cal="ics"]{background:#1d1d1f;color:#F5F5F7;border-color:#1d1d1f;box-shadow:0 1px 2px rgba(0,0,0,.15);}
.btn-cal[data-cal="ics"]:hover{background:#000;border-color:#000;color:#fff;transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.25);}
.btn-cal[data-cal="ics"]:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.2);}

.chk{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);padding:6px 0;}
.pagebtn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink-soft);}
.pagebtn.active{background:var(--green);color:#FFFCF5;border-color:var(--green);}

/* ============================
   RESPONSIVE / MOBILE NAVIGATION
   ============================ */

.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 64px;background:var(--bg);position:relative;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.navlinks{display:flex;align-items:center;gap:34px;}

.nav-toggle{
  display:none;
  background:none;border:none;cursor:pointer;
  padding:6px;color:var(--green-dark);
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-burger{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

.mobile-menu{display:none;}

/* Tablet: tighten up the 3- and 4-column grids to 2 columns */
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Phone: hamburger nav, single-column layout, tighter spacing */
@media (max-width:680px){
  .site-header{padding:16px 20px;}
  section, footer, header{padding-left:20px!important;padding-right:20px!important;}

  .navlinks, .explore-btn{display:none!important;}
  .nav-toggle{display:inline-flex;}

  .mobile-menu{
    display:flex;flex-direction:column;
    max-height:0;overflow:hidden;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    transition:max-height .28s ease;
    padding:0 20px;
  }
  .mobile-menu.open{max-height:420px;padding:14px 20px 26px;}
  .mobile-menu .navlink{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;}
  .mobile-menu .btn-primary{margin-top:16px;text-align:center;width:100%;}

  h1{font-size:30px!important;line-height:1.2!important;}
  h2{font-size:24px!important;}

  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr!important;}
  .hero-decor{display:none!important;}

  .wineries-layout{flex-direction:column!important;}
  .filter-aside{width:100%!important;}
}