/* ===========================================================
   vibeDallas / Washington Paws — style.css (clean + fun)
   - One sticky header (no duplicate menu on desktop)
   - Mobile menu toggles with .is-open (JS in header.html)
   - Smooth chips carousel, pretty cards, tidy footer
   =========================================================== */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --accent:#2563eb;
  --accent-ink:#ffffff;
  --soft:#f8fafc;

  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --maxw:1100px;

  --focus: 0 0 0 3px rgba(37,99,235,.25);
}

/* ---------- Base reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; border:0}
a{color:var(--accent); text-decoration:none; transition:color .15s ease}
a:hover{text-decoration:underline}
:focus-visible{outline:none; box-shadow:var(--focus)}

/* ---------- Layout utilities ---------- */
.container{max-width:var(--maxw); margin-inline:auto; padding:16px}
.container.narrow{max-width:820px}
.flex{display:flex; gap:12px; align-items:center}
.hidden{display:none !important}
.muted{color:var(--muted)}
.tiny{font-size:.9rem}
.soft{background:var(--soft)}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
}

/* ===========================================================
   Header (single source of truth)
   -----------------------------------------------------------
   Markup expected in /components/header.html:
   - .site-header > .container
   - .brand   (left)
   - .primary-nav (hidden on mobile, toggled via JS by adding .is-open)
   - .btn.cta (desktop only)
   - .nav-toggle (mobile only)
   =========================================================== */

.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative; /* needed for absolute mobile dropdown */
  padding-block:12px;
}
.brand{font-weight:800; letter-spacing:.3px; color:#0f172a; display:flex; align-items:center; gap:8px}
.brand .paw{font-size:1.15em}

/* --- Buttons --- */
.btn{
  display:inline-block; padding:.55rem .85rem; border-radius:12px;
  border:1px solid var(--accent); color:var(--accent); background:#fff;
  line-height:1; transition:transform .12s ease, box-shadow .12s ease, background .12s ease
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn.cta{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

/* --- Mobile-first nav: hidden until toggled --- */
.site-header .nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff; padding:.5rem .75rem;
  border-radius:12px; cursor:pointer;
}
.site-header .primary-nav{
  display:none; /* key: keep hidden on mobile unless .is-open */
  position:absolute; left:16px; right:16px; top:calc(100% + 8px);
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:6px; flex-direction:column; gap:0;
}
.site-header .primary-nav a{
  display:block; padding:.8rem 1rem; color:#0f172a;
  border-radius:10px; border:0;
}
.site-header .primary-nav a:hover{background:var(--soft); text-decoration:none}
.site-header .primary-nav.is-open{display:flex}

/* --- Desktop ≥768px: show row, hide toggle --- */
@media (min-width:768px){
  .site-header .nav-toggle{display:none}
  .site-header .primary-nav{
    position:static; display:flex !important; /* force visible on desktop */
    flex-direction:row; align-items:center; gap:28px; padding:0;
    border:0; border-radius:0; box-shadow:none; background:transparent;
  }
  .site-header .primary-nav a{
    display:inline-block; padding:0; border:0;
  }
}

/* Legacy safety: if any old .mobile-nav exists, hide it */
.mobile-nav{display:none !important}

/* ===========================================================
   Article
   =========================================================== */
main.main{padding-block:18px}
article.article{max-width:780px; margin-inline:auto}
article .meta{color:var(--muted); font-size:.95rem; margin-top:-.2rem; margin-bottom:.8rem}
article h1, article h2, article h3{line-height:1.3; margin:1.3em 0 .6em}
article h1{font-size:1.9rem}
article h2{font-size:1.35rem}
article h3{font-size:1.15rem}
article p{margin:.9em 0}
.badges{display:flex; flex-wrap:wrap; gap:10px}
.badge{
  display:inline-flex; align-items:center; gap:.5ch;
  border:1px solid var(--border); background:#fff; border-radius:999px;
  padding:.4rem .7rem; font-size:.95rem; box-shadow:0 2px 6px rgba(2,6,23,.06)
}

/* ===========================================================
   Chips carousel (marquee style)
   =========================================================== */
.vf-carousel-wrap{
  position:relative; overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--soft);
}
.vf-carousel{
  display:flex; align-items:center; gap:14px;
  padding:8px 12px; will-change:transform; animation:vf-marquee 42s linear infinite;
}
.vf-item{flex:0 0 auto; white-space:nowrap; line-height:1}
.vf-item a{
  display:inline-block; padding:.45rem .8rem; border:1px solid var(--border);
  border-radius:999px; background:#fff; color:#0f172a; box-shadow:0 2px 6px rgba(2,6,23,.06)
}
.vf-item a:hover{text-decoration:none; border-color:#d1d9e6}
@keyframes vf-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===========================================================
   Lists, tables, code
   =========================================================== */
ul{padding-left:1.2rem}
.table{width:100%; border-collapse:collapse; font-size:.98rem}
.table th,.table td{border:1px solid var(--border); padding:.6rem .7rem; text-align:start}
.table th{background:var(--soft)}
code, pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
code{background:var(--soft); padding:.12rem .35rem; border-radius:8px; border:1px solid var(--border)}

/* ===========================================================
   Footer
   =========================================================== */
/* ===========================================================
   Footer  (UPDATED ONLY)
   =========================================================== */
.site-footer{
  margin-top:32px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, #fff 0%, #f9fbff 100%);
  padding:26px 0;
  color:var(--ink);
}

/* columns */
.footer-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
@media (min-width:900px){
  .footer-cols{grid-template-columns:1.1fr .7fr .9fr}
}

.site-footer h4{margin:.2rem 0 .6rem}
.site-footer .muted{color:var(--muted)}
.site-footer .tiny{font-size:.9rem}

/* brand */
.site-footer .brand{
  font-weight:800;
  letter-spacing:.2px;
  color:inherit;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.site-footer .paw{font-size:1.2rem}

/* lists */
.site-footer .list{
  list-style:none;     /* remove bullets */
  margin:0 0 14px;
  padding:0;
}
.site-footer .list li + li{margin-top:.35rem}
.site-footer a{color:inherit; text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* buttons */
.site-footer .btn{
  display:inline-block;
  padding:.6rem .9rem;
  border-radius:12px;
  border:1px solid var(--accent);
  color:var(--accent);
  background:#fff;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.site-footer .btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}
.site-footer .btn.cta{background:var(--accent); color:var(--accent-ink)}

/* socials (PNG icons in /assets/img/) */
.socials{
  list-style:none;              /* no bullets */
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.socials li{margin:0}
.socials a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--border);
  background:#fff;
  color:var(--ink);
  padding:.5rem .75rem;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(2,6,23,.06);
  font-size:.95rem;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.socials a:hover{
  text-decoration:none;
  transform:translateY(-2px);
  border-color:#d1d9e6;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}
.socials img{
  width:22px; height:22px; display:block; object-fit:contain; border-radius:6px;
}

/* optional bottom bar if you add it */
.footer-bottom{
  border-top:1px solid var(--border);
  background:var(--soft);
}
.footer-bottom .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
}
.footer-bottom .to-top{
  color:var(--accent);
  text-decoration:none;
  border:1px solid var(--border);
  background:#fff;
  padding:.4rem .7rem;
  border-radius:12px;
}
.footer-bottom .to-top:hover{
  text-decoration:none;
  border-color:#d1d9e6;
}
@media (max-width:520px){
  .footer-bottom .container{flex-direction:column; align-items:flex-start}
}


/* ===========================================================
   Forms (if needed)
   =========================================================== */
input, select, textarea{
  width:100%; border:1px solid var(--border); background:#fff; color:var(--ink);
  padding:.6rem .8rem; border-radius:12px; transition:box-shadow .12s ease,border-color .12s ease
}
input:focus, select:focus, textarea:focus{border-color:var(--accent); box-shadow:var(--focus)}
label{display:block; font-weight:600; margin:.6rem 0 .35rem}

/* ===========================================================
   Helpers
   =========================================================== */
.hr{height:1px; background:var(--border); border:0; margin:18px 0}
.center{text-align:center}
.space-y > * + *{margin-top:12px}
@media (prefers-reduced-motion:reduce){
  .vf-carousel{animation:none}
  a, .btn{transition:none}
}
/* === Gradient Header Override (drop-in) =================== */
:root{
  /* you can tweak these later */
  --header-grad: linear-gradient(90deg, #ff6b6b, #f7b733);
  --header-ink: #ffffff;
  --header-ink-muted: rgba(255,255,255,.85);
  --header-chip: rgba(255,255,255,.12);
}

/* Make the sticky header use the gradient instead of glassy white */
.site-header{
  background: var(--header-grad) !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
}

/* Brand + nav links readable on the gradient */
.site-header .brand{ color: var(--header-ink) !important; }
.site-header .brand .paw{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.12)); }

/* Mobile dropdown stays white for readability */
.site-header .primary-nav{
  background:#fff; /* mobile only (absolute dropdown) */
}
.site-header .primary-nav a{
  color:#0f172a; /* mobile dropdown link color */
}

/* Desktop: inline nav over the gradient in white */
@media (min-width:768px){
  .site-header .primary-nav{
    background:transparent; /* inline row */
  }
  .site-header .primary-nav a{
    color: var(--header-ink) !important;
  }
  .site-header .primary-nav a:hover{
    text-decoration: underline;
    background: transparent;
  }
}

/* Buttons in the header: make them pop on the gradient */
.site-header .btn{
  border-color: var(--header-ink-muted);
  color: var(--header-ink);
  background: transparent;
}
.site-header .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  text-decoration: none;
}
.site-header .btn.cta{
  background: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
}

/* Mobile menu toggle button contrast on gradient */
.site-header .nav-toggle{
  border-color: var(--header-ink-muted) !important;
  background: var(--header-chip) !important;
  color: var(--header-ink) !important;
}

/* Optional: make header chips (badges) look good on gradient */
.site-header .badge{
  background: var(--header-chip);
  color: var(--header-ink);
  border-color: var(--header-ink-muted);
}