/* PetHydrationCalc — polished base theme */
:root{
  --bg:#f6fbfb;
  --bg-soft:#eef6f6;
  --ink:#132628;
  --muted:#567b7f;
  --brand:#0b6b6b;
  --brand-ink:#eaffff;
  --line:#d8e6e6;
  --card:#ffffff;
  --shadow:0 6px 14px rgba(0,0,0,.07);
  --radius:16px;
  --space:clamp(14px,2.2vw,22px);
  --space-lg:clamp(18px,3vw,32px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg),var(--bg-soft));
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin-inline:auto;padding:var(--space)}

.site-header{
  position:sticky;top:0;z-index:20;
  background:#ffffffcc; backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800; letter-spacing:.2px; color:var(--ink)}
.nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nav a{
  display:inline-block; padding:8px 10px; border-radius:10px;
  color:var(--ink); font-weight:600; border:1px solid transparent;
}
.nav a[aria-current="page"], .nav a:hover{
  background:var(--bg-soft); border-color:var(--line);
}

main{padding-block:var(--space-lg)}
h1{font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1.2; margin:0 0 .6rem}
h2{font-size:clamp(1.2rem, 2.1vw, 1.4rem); line-height:1.25; margin:1rem 0 .4rem}
.muted{color:var(--muted)}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space);
}

.grid{display:grid; gap:var(--space)}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}

label{display:grid;gap:8px}
input, select, button, textarea{
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font:inherit;
}
input:focus, select:focus, textarea:focus, button:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,107,107,.15);
}

.btn{cursor:pointer; font-weight:700}
.btn-primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.btn-primary:hover{filter:brightness(.98)}

table{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left}
thead th{background:var(--bg-soft); font-weight:700}

footer{padding:26px 0; color:var(--muted); text-align:center; border-top:1px solid var(--line)}

/* Tracker bars */
.bars{display:flex;gap:8px; align-items:flex-end; height:170px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff}
.bar{flex:1; min-width:20px; background:linear-gradient(180deg,#09a3a3,#0b6b6b); border-radius:10px 10px 0 0; position:relative}
.bar::after{content:attr(data-label); position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--muted)}
.bar span{position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--ink)}

/* Risk colors */
.risk-low{color:#0b6b6b} .risk-mod{color:#b07900} .risk-high{color:#b00020}


/* Mobile-only tweaks (desktop unchanged) */
@media (max-width: 640px){
  .hero{min-height:auto !important; padding-block:24px !important}
  .hero h1{font-size:1.6rem !important; margin-bottom:.4rem !important}
  .hero p{font-size:.95rem !important}
  .container{padding:14px}
  .nav{gap:8px}
}


/* ===== Mobile navigation (desktop unchanged) ===== */
.menu-toggle{display:none; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:700}
.menu-toggle svg{width:20px; height:20px}

@media (max-width: 640px){
  .menu-toggle{display:inline-flex}
  .site-header .container{position:relative}
  .site-header .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line);
    padding:10px var(--space); box-shadow:var(--shadow);
    z-index:15; flex-direction:column; gap:8px;
  }
  .site-header.open .nav{display:flex}
  .nav a{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff}
}

/* ===== Guides hero spacing (mobile only) ===== */
@media (max-width:640px){
  main .card:first-of-type{padding:18px}
  main .card:first-of-type h1{font-size:1.6rem; margin-bottom:.4rem}
  main .card:first-of-type p{font-size:.95rem}
}


/* Guides hero (mobile only) */
@media (max-width:640px){
  .hero-wrap{min-height:auto !important; padding:28px 0 !important}
  .hero-title{font-size:1.6rem !important; margin-bottom:.35rem !important}
  .hero-sub{font-size:.95rem !important}
}


/* ===== NAV RESET & HARDENED OVERRIDES (keep last in file) ===== */
.site-header .nav{display:flex; position:static; background:transparent; box-shadow:none; padding:0; flex-wrap:wrap; gap:12px}
.menu-toggle{display:none !important}

@media (max-width:640px){
  .menu-toggle{display:inline-flex !important}
  .site-header .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line);
    padding:10px var(--space); box-shadow:var(--shadow);
    flex-direction:column; gap:8px;
  }
  .site-header.open .nav{display:flex}
}

/* Guides hero sizing (desktop + mobile) */
.hero-wrap{min-height:auto; padding:56px 0}
.hero-title{margin:0 0 .4rem}
.hero-sub{color:var(--muted)}
@media (max-width:640px){
  .hero-wrap{padding:28px 0}
  .hero-title{font-size:1.6rem}
  .hero-sub{font-size:.95rem}
}

/* Compact guides hero */
.hero-wrap{padding:24px 0}
@media (max-width:640px){ .hero-wrap{padding:16px 0} }


/* ===== FINAL HEADER & MOBILE MENU OVERRIDES (keep last) ===== */
@media (min-width: 769px){
  .menu-toggle{display:none !important;}
  header.site-header .nav{
    display:flex !important; position:static !important; background:transparent !important;
    padding:0 !important; box-shadow:none !important; flex-direction:row !important; gap:12px;
  }
}
@media (max-width: 768px){
  .menu-toggle{display:inline-flex !important; align-items:center; gap:8px;}
  header.site-header{position:sticky; top:0; z-index:30;}
  header.site-header .nav{
    display:none !important; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--line); padding:10px var(--space);
    box-shadow:var(--shadow); flex-direction:column; gap:8px;
  }
  header.site-header[data-open="true"] .nav{ display:flex !important; }
}
/* Guides hero tightened everywhere */
.hero-wrap{padding:32px 0 !important;}
@media (max-width:768px){ .hero-wrap{padding:18px 0 !important;} }