/* ===============================
MindHaven – Layout (polished 1200)
=============================== */

/* ===== Shared container width (single source of truth) ===== */
:root{ --mh-container: 1200px; }

/* Logo sizing */
:root { --mh-logo: 80px; }
.mh-logo { width: var(--mh-logo); height: auto; display:block; }
@media (max-width: 480px){
  :root { --mh-logo: 56px; } /* smaller on tiny screens */
}

/* ===== Header (same width as everything) ===== */
.mh-topbar{
  position:sticky; top:10px; z-index:50;
  max-width:var(--mh-container); margin:12px auto 8px; padding:8px 12px; /* slightly tighter */
  background:var(--nav-rail-bg); border:1px solid var(--nav-rail-border); border-radius:14px;
  box-shadow:var(--nav-rail-shadow); display:flex; align-items:center; gap:12px;
}
.mh-left{ display:flex; align-items:center; gap:16px; }
.mh-brand{ display:flex; align-items:center; gap:10px; color:var(--navbar-text); text-decoration:none; }
.mh-brand .site-title{ font-weight:900; margin:0; }
.mh-nav{ display:flex; align-items:center; gap:6px; }
.mh-nav a{ padding:8px 12px; border-radius:10px; color:var(--navbar-text); text-decoration:none; }
.mh-nav a[aria-current="page"], .mh-nav a:hover{ background:var(--navbar-hover); }
.mh-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.mh-search{
  width:320px; /* was 360px; better balance with 1200 container */
  display:flex; align-items:center; gap:8px;
  background:var(--input-bg); border:1px solid var(--input-border); border-radius:999px; padding:6px 12px;
}
.mh-search input{ width:100%; background:transparent; border:none; outline:none; color:var(--input-text); }
.mh-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:700;
}
.mh-toggle .mh-toggle-icon{ width:1.1rem; display:inline-block; line-height:1; }
.mh-menu-btn{
  display:none; background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:6px 8px; cursor:pointer;
}

/* Mobile header behavior */
@media (max-width: 980px){
  .mh-search{ display:none; }
  .mh-nav{ display:none; }
  .mh-menu-btn{ display:inline-flex; }
}

/* ===== Mobile menu ===== */
.mh-mobile[hidden]{ display:none !important; }
.mh-mobile{
  position:fixed; inset:0; background:rgba(2,6,23,.55); backdrop-filter:saturate(1.2) blur(6px); z-index:40;
}
.mh-mobile-inner{
  max-width:520px; margin:70px auto 0; background:var(--panel); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:12px;
}
.mh-nav-mobile{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.mh-nav-mobile a{ padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none; }
.mh-nav-mobile a:hover{ background:var(--soft); }
.mh-search-mobile{ width:100%; }

/* ===== Promo strip (seamless marquee) ===== */
.mh-promo-strip{
  overflow:hidden; margin:6px auto 10px; max-width:var(--mh-container); padding:8px;
  border:1px dashed var(--border); border-radius:12px; background:var(--soft); position:relative;
}
.mh-promo-track{
  display:flex; gap:10px; width:max-content; will-change:transform;
  animation: mh-marquee 28s linear infinite;
}
.mh-promo-strip:hover .mh-promo-track{ animation-play-state: paused; }
.mh-promo-pill{
  white-space:nowrap; padding:6px 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); box-shadow:var(--shadow);
}
.mh-promo-strip::before,
.mh-promo-strip::after{
  content:""; position:absolute; top:0; bottom:0; width:40px; pointer-events:none;
  background: linear-gradient(to right, var(--soft), transparent);
}
.mh-promo-strip::after{ right:0; transform: scaleX(-1); }
.mh-promo-strip::before{ left:0; }

@keyframes mh-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Hero (simplified, professional, truthful) ===== */
.mh-hero{
  max-width:var(--mh-container); margin:14px auto; padding:18px 20px;
  background:var(--hero-grad); border-radius:16px; box-shadow:var(--shadow); color:#fff;
  display:block; /* single column; stats panel removed */
}
.mh-hero h1{
  margin:0 0 4px; font-weight:800; /* slightly lighter than 900 reads more premium */
  font-size:clamp(22px, 2.2vw, 30px); /* smaller, more professional */
}
.mh-hero p{ margin:0 0 6px; opacity:.95; font-size:clamp(14px,1.4vw,16px); }
.mh-hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.mh-btn{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700;
  background:var(--cta-bg); color:var(--cta-fg); border:0; transition: transform .18s ease, box-shadow .18s ease;
}
.mh-btn.alt{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); }
.mh-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.20); }

/* Trust chips for early-stage honesty */
.mh-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; padding:0; list-style:none; }
.mh-chip{
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.22);
  font-weight:700; font-size:.9rem; line-height:1;
}

/* Fallback if old markup still rendered */
.mh-hero-card{ display:none !important; }

@media (max-width: 860px){
  .mh-hero{ text-align:center; padding:16px; }
  .mh-hero-cta, .mh-hero-chips{ justify-content:center; }
}

/* ===== Optional banners ===== */
.mh-banners{ max-width:var(--mh-container); margin:0 auto 14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mh-banner{ height:100px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
@media (max-width: 900px){ .mh-banners{ grid-template-columns:1fr; } }

/* ===== Shell (content container) ===== */
.mh-shell{ max-width:var(--mh-container); margin:0 auto; display:grid; grid-template-columns: 1fr; gap:16px; }
.mh-shell.has-aside{ grid-template-columns: minmax(0,1fr) 320px; } /* opt-in sidebar */

/* ===== Sidebar / Widgets (theme supports widgets) ===== */
.mh-aside{ display:block; }
.mh-aside-inner{
  position:sticky; top:84px; /* sits under topbar */
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:12px;
}
.mh-widget{ margin-bottom:12px; }
.mh-widget-inner{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:10px;
}
.mh-widget-title{ margin:0 0 8px; font-weight:800; }
.mh-aside .mh-card{ background:var(--panel); color:var(--text); border:1px solid var(--border); }

/* ===== Sections / shared bits ===== */
.mh-section{ margin-top:30px; margin-bottom:24px; }
.mh-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.mh-sec-head h2{ margin:0; font-weight:800; }
.mh-view-all{ font-weight:700; padding:6px 10px; border-radius:10px; background:var(--soft); border:1px solid var(--border); color:var(--text); text-decoration:none; }
.mh-row{ display:grid; gap:16px; }
.mh-row img{ width:100% !important; height:160px !important; object-fit:cover !important; border-radius:10px; display:block; }
.mh-title{ font-weight:800; margin:.55rem 0 .2rem; }
.mh-meta{ font-size:.9rem; color:var(--muted); display:flex; gap:8px; align-items:center; }
.mh-snippet{ font-size:.94rem; min-height:40px; color:var(--muted); }
.mh-cta{ margin-top:.6rem; background:var(--accent); color:#fff; text-align:center; padding:.55rem; border-radius:10px; font-weight:700; }

/* =========================
Footer (refined & lean)
========================= */

/* Breathing space before footer + soft fade */
.mh-footer{ margin-top:60px; background:var(--nav-rail-bg); border-top:1px solid var(--nav-rail-border); }
.mh-footer::before{
  content:""; display:block; height:40px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.05));
}

/* 1) CTA strip */
.mh-foot-cta{
  background: linear-gradient(90deg, rgba(16,185,129,.15), rgba(96,165,250,.12));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.mh-foot-cta-inner{
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: center;
}
.mh-foot-cta h4{ margin:0 0 6px; font-weight:900; font-size:1.15rem; }
.mh-foot-cta p{ margin:0; color:var(--muted); font-size:.95rem; }
.mh-foot-subscribe{
  display:flex; gap:8px;
  background: rgba(255,255,255,.06);
  padding:6px; border-radius:14px; border:1px solid var(--border);
  backdrop-filter: blur(4px);
}
.mh-foot-subscribe input{
  flex:1; padding:10px 12px; border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--input-text);
}
.mh-foot-subscribe button{
  padding:10px 14px; border-radius:10px; border:0; font-weight:700;
  background:var(--accent); color:#fff; cursor:pointer;
}
@media (max-width:820px){ .mh-foot-cta-inner{ grid-template-columns:1fr; } }

/* 2) Main info grid */
.mh-foot-wrap{
  max-width:var(--mh-container);
  margin:0 auto; padding:22px 16px 10px;
  display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr 1fr;
}
@media (max-width:900px){ .mh-foot-wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .mh-foot-wrap{ grid-template-columns:1fr; } }

.mh-foot-brand{ display:grid; grid-template-columns:88px 1fr; gap:10px; align-items:center; }
.mh-foot-logo{ width:88px; height:auto; display:block; opacity:.95; }
.mh-foot-brand p{ margin:0; color:var(--muted); }

.mh-foot-col h5{ margin:0 0 10px; }
.mh-foot-col a{ display:block; margin:4px 0; color:var(--text); text-decoration:none; }
.mh-foot-col a:hover{ color:var(--accent); }

/* 3) Supporters (centered, tight spacing) */
.mh-foot-supporters{
  background:var(--nav-rail-bg);
  border-top:1px dashed var(--border);
  border-bottom:1px dashed var(--border);
}
.mh-supporters-inner{
  max-width:var(--mh-container);
  margin:0 auto; padding:8px 16px 10px;
  text-align:center;
}
.mh-supporters-inner > span{
  display:inline-block; margin-bottom:8px; color:var(--muted); font-size:.95rem;
}
.mh-supporter-logos{
  display:flex; justify-content:center; align-items:center;
  gap:18px; flex-wrap:wrap;
}
.mh-supporter-logos .mh-supporter{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:12px; text-decoration:none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all .25s ease;
}
.mh-supporter-logos img{
  max-height:34px; width:auto; opacity:.9;
  /* Slightly desaturated, but mostly true color; tweak or remove if you want full color */
  filter: grayscale(8%) contrast(1.03) saturate(1.05);
  transition:opacity .2s, filter .2s, transform .2s;
}
.mh-supporter-logos .mh-supporter:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
}
.mh-supporter-logos .mh-supporter:hover img{ opacity:1; filter:none; }
@media (max-width:560px){
  .mh-supporter-logos{ gap:12px; }
  .mh-supporter-logos img{ max-height:30px; }
}

/* 4) Bottom bar + social */
.mh-foot-bottom{
  background: linear-gradient(to right, rgba(16,185,129,.05), rgba(96,165,250,.05));
  border-top:1px solid rgba(255,255,255,0.08);
}
.mh-foot-bottom-inner{
  max-width:var(--mh-container); margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; color:var(--muted);
}
.mh-foot-legal a{ color:var(--muted); margin-left:12px; text-decoration:none; }
.mh-foot-legal a:hover{ color:var(--accent); }

.mh-foot-social{ display:flex; gap:10px; margin-top:8px; }
.mh-foot-social a{
  display:inline-flex; padding:8px; border-radius:10px;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
}
.mh-foot-social a:hover{ color:#fff; background:var(--accent); border-color:transparent; }

/* Theme blending for footer */
html.is-dark .mh-footer{
  background: linear-gradient(to bottom, #0b1020, #0a0e1a);
}
html:not(.is-dark) .mh-footer{
  background: linear-gradient(to bottom, #f7f9fc, #eef2f7);
}

/* ===== Bridge card polishing ===== */
.mh-bridge .mh-card{
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:10px; transition:.2s transform,.2s box-shadow;
  display:flex; flex-direction:column; min-height:100%;
}
.mh-bridge .mh-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.mh-bridge .mh-cta{ margin-top:auto; }

/* ===== UI polish & a11y ===== */
.mh-nav a{ position:relative; transition: color .18s ease; }
.mh-nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px;
  height:2px; border-radius:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.mh-nav a:hover{ color:var(--accent); background:none; }
.mh-nav a:hover::after{ transform:scaleX(1); }

.mh-logo{ transition: opacity .2s ease; }
:where(a, button, .mh-btn, .mh-cta, input, select, textarea):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:8px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}