/* ====== Base / Typography ====== */
:root{
  --blue:#2563eb; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-100:#c7d2fe;
  --ink:#0f172a; --text:#334155; --muted:#64748b;
  --soft-bg:#f8fafc; --panel:#ffffff; --border:#e5e7eb;

  --cat-general:#facc15; --cat-air:#3b82f6; --cat-water:#14b8a6;
  --cat-comfort:#22c55e; --cat-emf:#a78bfa; --cat-mold:#f43f5e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--soft-bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.5;
}

/* ====== Layout ====== */
.container{ max-width:1060px; margin:0 auto; padding:0 10px; }

/* Full-bleed sections (edge-to-edge) */
.bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* ====== Header ====== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.3) blur(6px);
  border: .25px solid var(--border); border-bottom-width:1px;
  padding: 24px 26px; margin: 20px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  box-sizing:border-box; min-height:60px;
}

/* Header Top: brand (left) + utilities (right) */
.header-top{
  display:flex; align-items:center; justify-content:space-between; width:100%;
}

/* Brand (MySafeSpace + subtitle) */
.brand-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.mysafespace {
  display: block;
  font-weight: 800;
  font-size: 2rem;      /* ~32px, bigger title */
  line-height: 1.2;     /* give subtitle a little breathing room */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
.mysafespace .my { color: #2ecc71; }       /* Mint Green */
.mysafespace .safe { color: var(--blue); } /* Blue */
.building-health {
  display: block;
  margin-top: 4px;      /* slightly more space from main title */
  font-size: 14px;
  color: #000;
  white-space: nowrap;
}


/* Utilities (search + buttons) */
.util{ display:flex; gap:12px; align-items:center; justify-content:flex-end; width:100%; }
.search{
  display:flex; align-items:center; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:6px 12px; font-size:16px; height:36px;
}
.search-input{
  border:none; outline:none; padding:6px 12px; font-size:16px; width:180px;
  box-sizing:border-box; border-radius:12px;
}
.search-btn{ background:transparent; border:none; font-size:18px; cursor:pointer; margin-left:6px; border-radius:12px; }

.btn{
  text-decoration:none; color:#fff; background:var(--blue);
  border-radius:10px; padding:8px 16px; font-weight:500; font-size:14px;
  border:1px solid var(--blue-700); margin-left:12px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{ filter:brightness(.96); }
.admin-btn{
  background:#fff; color:#000; border:1px solid #d1d5db; border-radius:5px;
  font-weight:500; font-size:14px; padding:8px 16px; display:inline-flex; align-items:center; gap:6px;
}
.register-btn{ background:var(--blue); color:#fff; display:inline-flex; align-items:center; gap:6px; }
.register-btn i{ margin-right:6px; }

/* ====== Category Navigation (left) + AQ pill (right) ====== */
.catnav{
  display:flex; flex-wrap:wrap; width:100%; gap:3px;
  margin-top:20px; margin-bottom:5px; justify-content:flex-start; align-items:center;
}
.catnav a{
  text-decoration:none; color:#333; font-weight:500; font-family: Arial, sans-serif;
  font-size:14px; letter-spacing:.5px; padding:8px 16px; border-radius:10px;
  transition:none; margin-top:6px;
}
.catnav a:hover{ background-color:transparent; color:var(--blue); font-weight:800; }
.catnav a.active{
  background:var(--blue-100); color:#fff; border-color:var(--blue);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* Spacer to push AQ card to the far right */
.catnav .flex-spacer{ flex:1 1 auto; }

/* AirGradient pill */
.aq-card{
  margin-left:12px; padding:4px 10px; background:#fff; border:1px solid #e6e6e1;
  border-radius:999px; font-size:14px; color:#334155; line-height:1;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.aq-card strong{ font-weight:600; color:#111827; }
.aq-dot{ width:8px; height:8px; border-radius:50%; background:#94a3b8; display:inline-block; }

@media (max-width:720px){
  .mysafespace{ font-size:20px; }
  .aq-card{ font-size:13px; padding:4px 8px; }
}

/* ====== Hero Section ====== */
.bleed.hero{
  position:relative; overflow:hidden; height:420px; margin-bottom:18px;
  display:flex; justify-content:flex-start; align-items:center; padding-left:5%;
}
.bleed.hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; z-index:0; }
.bleed.hero .hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(37,99,235,.4), rgba(37,99,235,.2) 42%, rgba(37,99,235,0) 82%); }
.bleed.hero .text{
  position:absolute; z-index:2; top:35%; color:#fff; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-start; gap:10px; left:5%;
}
.bleed.hero .brandrow{ display:flex; align-items:center; gap:15px; }
.bleed.hero .logo-background{ background-color:var(--blue); width:60px; height:60px; border-radius:50%; display:flex; justify-content:center; align-items:center; z-index:3; }
.bleed.hero .logo-text{ color:#fff; font-size:1.6rem; font-weight:bold; }
.bleed.hero .bigline{ font-size:1.5rem; font-weight:700; color:#fff; margin-top:5px; line-height:1.3; }
.bleed.hero .emojis{ font-size:1.2rem; margin-top:10px; display:flex; gap:10px; justify-content:flex-start; }
.bleed.hero .emojis span{ font-size:1.8rem; }
.bleed.hero .title-encore{ font-size:2.75rem; font-weight:800; color:#fff; margin-left:15px; }
.bleed.hero .tagline{ font-size:1.2rem; color:#fff; margin-top:15px; }

/* ====== Posts ====== */
.posts-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px;
  transition:box-shadow .18s, transform .18s; box-shadow:0 2px 14px rgba(0,0,0,.04);
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.10); }
.card .meta-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.card .title{ font-weight:800; color:var(--ink); margin:4px 0 8px; font-size:18px; }
.card .excerpt{ color:var(--muted); margin:0 0 10px; }
.card .meta-bottom{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }

/* Category badges */
.badge{
  display:inline-flex; align-items:center; gap:6px; color:#0b1220; font-weight:800; font-size:12px;
  padding:4px 10px; border-radius:999px; background:#e2e8f0;
}
.badge[data-cat="general"]{ background:var(--cat-general); }
.badge[data-cat="air-quality"]{ background:var(--cat-air); color:#fff; }
.badge[data-cat="water-quality"]{ background:var(--cat-water); color:#052e2b; }
.badge[data-cat="comfort"]{ background:var(--cat-comfort); color:#05220e; }
.badge[data-cat="emf"]{ background:var(--cat-emf); color:#1e0b3a; }
.badge[data-cat="mold"]{ background:var(--cat-mold); color:#fff; }

/* ====== Footer ====== */
.site-footer{ margin-top:38px; border-top:1px solid var(--border); color:var(--muted); padding:20px 0; }

/* ====== Tabs (Latest Posts / Feedback) ====== */
.wide-tabs .inner{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 6px;
}
.wide-tabs a{
  display:block; text-align:center; text-decoration:none; font-weight:400; font-size:.75rem;
  padding:8px 0; border-radius:12px; transition:background .2s, color .2s;
}
.wide-tabs .inner a:first-child{
  background:#fff; color:var(--blue); border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.wide-tabs .inner a:last-child{
  background:#f1f5f9; color:var(--muted); border:1px solid var(--border);
}
.wide-tabs .inner a:last-child:hover{ background:var(--blue); color:#fff; }
.wide-tabs .inner a:first-child:hover{ background:#f0f4ff; color:var(--blue); }
.wide-tabs a.active{
  background:var(--blue-100); color:#fff; border-color:var(--blue);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* ====== Cards/Links ====== */
.card-link{ text-decoration:none; }
.card-link:hover{ text-decoration:none; color:inherit; }

/* ====== Comments ====== */
.comments-container{ background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.1); padding:20px; margin-top:20px; }
.comments-title{ font-size:24px; font-weight:700; margin-bottom:20px; color:#333; }
.comment-list{ list-style:none; padding-left:0; }
.comment{ margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid #e5e7eb; }
.comment-box{ background:#f9fafb; padding:16px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.comment-meta{ font-size:14px; color:#6b7280; margin-bottom:8px; }
.comment-meta .author{ font-weight:600; }
.comment-body{ font-size:16px; color:#333; }
.comment-form{ display:flex; flex-direction:column; gap:12px; }
.comment-form label{ font-size:16px; font-weight:600; color:#333; }
.comment-form textarea{
  padding:12px; font-size:16px; border:1px solid #e5e7eb; border-radius:8px; resize:vertical;
  width:100%; box-sizing:border-box; background:#fafafa; min-height:120px; transition:border-color .3s;
}
.comment-form textarea:focus{ outline:none; border-color:var(--blue); }
.comment-form button{
  background:var(--blue); color:#fff; padding:12px 16px; border:none; border-radius:8px;
  font-weight:700; font-size:16px; cursor:pointer; transition:background-color .3s;
}
.comment-form button:hover{ background:#1d4ed8; }
.muted{ color:#64748b; font-style:italic; }

/* Greeting (hidden by default when logged out) */
.greeting{
  color:#64748b; font-weight:600; font-size:16px; margin-left:20px; align-self:center; display:inline-block;
}