/* ========== Living In Zen (LIZ) — Canonical Stylesheet ========== */
/* Dark-first palette */
:root{
  --bg:#0b0f0e;           /* site bg (dark) */
  --surface:#0f1413;
  --ink:#e8f2ef;
  --muted:#cfe2dd;
  --line:#2a3b37;
  --accent:#8cc0aa;       /* mint */
  --accent-ink:#0f172a;
  --pill:#1f3a37;         /* pill bg */
  --card:#111715;
  --shadow:0 8px 30px rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------------- Header / Nav ---------------- */
/* Header */
.site-header{
  position:sticky; top:025; z-index:1000;
  background:#0b1220;           /* dark slate */
  color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(120%) blur(4px);
}

/* Nav links/buttons */
.site-nav a,
.site-nav button,
.site-nav .btn{
  color:#16616b !important;
  border-color:rgba(255,255,255,.5);
}
.site-nav a:hover,
.site-nav .btn:hover{ opacity:.85; }

/* If you use a hamburger */
.nav-toggle{ color:#fff; fill:#fff; }

.brand{ display:flex; align-items:center; gap:10px; }
.site-header img{ width:72px; height:auto; display:block; }
.site-title{ font-weight:800; font-size:18px; line-height:1.1; letter-spacing:.2px; color:var(--ink); }

.site-nav{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:18px; padding:8px 10px;
}
.site-nav a{
  color:var(--ink); background:transparent;
  border:1px solid transparent; border-radius:14px;
  padding:10px 12px; font-size:18px; line-height:1.2; white-space:nowrap;
}
.site-nav a:hover{ text-decoration:none; border-color:var(--line); }
.site-nav a.active{ border-color:var(--line); background:rgba(255,255,255,.05); }
.site-nav .pill{
  background:var(--pill); color:var(--accent);
  font-weight:800; padding:10px 14px; border-radius:999px; border:1px solid #2b4844;
}
.site-nav .pill:hover{ background:#1a3130; }
.site-nav .admin-link{
  font-size:13px; padding:6px 10px; border-radius:14px;
  border:1px dashed #2b4844; color:#cfe2dd; opacity:.9;
}
.site-nav .admin-link:hover{ opacity:1; background:rgba(255,255,255,.06); }

/* ---------------- Hero ---------------- */
.hero{
  min-height: 72vh;
  display:grid; place-items:center;
  /* gradient overlay + image from the CSS var above */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35)),
    var(--hero) center/cover no-repeat;
  color:#fff;
}
.hero__inner{ text-align:center; padding:4rem 1rem; }
.hero h1{ font-size: clamp(2rem, 4vw, 3.25rem); margin:0 0 .25em; }
.hero p{ font-size: clamp(1rem, 2vw, 1.25rem); margin:0 0 1rem; opacity:.9; }


/* Buttons */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn{ appearance:none; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  font-weight:800; letter-spacing:.2px; padding:12px 18px; border-radius:999px; box-shadow:var(--shadow);
}
.btn.secondary{ background:transparent; color:var(--accent); border:1px solid #2b4844; }

/* ---------------- Cards ---------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1100px; margin:10px auto 40px; padding:0 16px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.card h3{ margin:6px 0 8px; font-size:18px; }
.card p{ margin:0; color:#cfe2dd; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--line); text-align:center; padding:18px 12px; color:#cfe2dd; }
.site-footer a{ color:#cfe2dd; }

/* ---------------- Light header variant (for light pages) ---------------- */
/* Apply by adding class 'header-contrast' to the <header> on About/Services/Contact */
.header-contrast{ background:#fff; border-bottom:1px solid #e5ece9; }
.header-contrast .site-title{ color:#0f1413; }
.header-contrast .site-nav a{
  color:#0f1413 !important; opacity:1 !important; font-weight:600; text-shadow:none; border-color:transparent;
}
.header-contrast .site-nav a:hover{ background:#eef5f2; border-color:#d9e6e1; }
.header-contrast .site-nav a.active{ background:#eaf3ef; border-color:#bfd6cd; color:#0a1412 !important; }
.header-contrast .site-nav .pill{ background:#1f3a37; color:#e8f2ef; border:1px solid #2b4844; }

/* ---------------- Responsive nav sizing ---------------- */
@media (max-width: 900px){
  .site-header{ padding:14px 12px; }
  .site-header img{ width:64px; }
  .site-title{ font-size:16px; }
  .site-nav{ gap:12px; padding:6px 8px; }
  .site-nav a{ font-size:16px; padding:8px 10px; }
  .site-nav .pill{ font-size:15px; padding:8px 12px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .site-header{ gap:12px; }
  .site-header img{ width:60px; }
  .site-nav{ row-gap:8px; }
  .site-nav a{ font-size:15px; padding:7px 9px; }
  .site-nav .pill{ font-size:14px; padding:8px 12px; }
  .site-nav .pill{ flex:1 1 auto; } /* allow CTAs to sit on their own line if needed */
  .hero{ margin-top:8px; }
}
@media (max-width: 480px){
  .site-header{ padding:10px 8px; }
  .site-header img{ width:56px; }
  .site-nav{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:10px;
  }
  .site-nav a{ flex:0 0 auto; font-size:14px; padding:6px 8px; border-radius:12px; }
  .site-nav .pill{ font-size:13px; padding:6px 10px; border-radius:18px; }
  .cards{ grid-template-columns:1fr; }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }