/* =========================================================
   Desert Bridge Music™ — Global Styles (GovTech standard)
   ========================================================= */

/* --- Theme tokens --- */
:root{
  --bg:#071a14;
  --card:#0e2a20;
  --ink:#e9f7e8;
  --muted:#b8d5c6;
  --gold:#f2c75b;
  --gold-ink:#22352a;
  --line:rgba(255,255,255,.08);
  --shadow:0 10px 28px rgba(0,0,0,.28);
}

/* --- Base --- */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
a{ color:var(--gold); text-decoration:none }
a:hover{ text-decoration:underline }
.wrap{ max-width:980px; margin:0 auto; padding:18px 16px 80px }

/* Headings */
h1,h2,h3{ margin:0 0 12px }
h1{ font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:.2px }
h2{ font-size:clamp(22px,3vw,28px); font-weight:800 }
.muted{ color:var(--muted) }
.note{ color:var(--muted); font-size:.95rem }
.tight{ margin:0; padding-left:18px }
.tight li{ margin:.25rem 0 }

/* --- Cards & Buttons --- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}
.btn{
  display:inline-block;
  background:var(--gold); color:var(--gold-ink);
  border-radius:16px; padding:10px 16px;
  font-weight:800; border:none; cursor:pointer;
}
.btn:hover{ text-decoration:none; filter:brightness(1.03) }
.btn.hollow{
  background:transparent; color:var(--ink);
  border:1px solid var(--line)
}
.btn.sm{ padding:7px 10px; border-radius:12px; font-weight:700; font-size:14px }
.btn.wide{ display:block; text-align:center; width:100% }

/* --- Hero / Mast --- */
.mast{ position:relative }
.mast-img{ width:100%; height:auto; display:block }

/* --- Section grid helpers --- */
.section{ margin:18px 0 }
audio{ width:100% }

/* =========================================================
   FAB — Top-right launcher (all pages)
   ========================================================= */
.fab{
  position:fixed; top:18px; right:18px; bottom:auto;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gold); color:var(--gold-ink);
  font-size:24px; font-weight:800;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index:1000; border:none; cursor:pointer;
}
@media (max-width:600px){
  .fab{ top:14px; right:14px; width:58px; height:58px }
}

/* =========================================================
   FAB Sheet — Right drawer with overlay (no HTML change)
   Structure in HTML:
     <div class="fab-sheet" id="fabSheet">
       <button class="sheet-close">×</button>
       <div class="sheet-head">...</div>
       <nav class="sheet-links">...</nav>
       <a class="btn gold wide">...</a>
       <div class="sheet-foot">...</div>
     </div>
   ========================================================= */

/* Overlay */
.fab-sheet{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.45);
  z-index:999;
  /* This padding pushes content into the drawer area on the right */
  padding:22px 22px 22px calc(100% - min(520px,92vw));
}
.fab-sheet.active{ display:block }

/* Drawer background slab (appears under content) */
.fab-sheet::before{
  content:"";
  position:absolute; right:0; top:0; height:100%; width:min(520px,92vw);
  background:var(--card);
  border-left:1px solid var(--line);
  box-shadow:-12px 0 40px rgba(0,0,0,.45);
  z-index:0;
}

/* Ensure all children render above the slab */
.fab-sheet > *{ position:relative; z-index:1 }

/* Header + links inside drawer */
.sheet-head{
  font-weight:800; letter-spacing:.4px;
  color:var(--gold);
  margin:4px 0 14px 4px;
}

.sheet-links{
  display:flex; flex-direction:column; gap:10px;
  padding:8px 2px 16px;
}
.sheet-links a{
  display:block; padding:14px 16px;
  border-radius:14px; background:#0c231a; color:#d6ead8;
  text-decoration:none; font-weight:800; border:1px solid var(--line)
}
.sheet-links a:hover{ background:#103425; text-decoration:none }
.sheet-links a.active{ outline:2px solid rgba(242,199,91,.45) }

/* Close button in drawer */
.sheet-close{
  position:absolute; top:14px; right:16px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:transparent; border:2px solid rgba(242,199,91,.6);
  color:var(--gold); font-size:20px; cursor:pointer;
}

/* Drawer footer */
.sheet-foot{ margin-top:12px; color:var(--muted); font-size:.95rem }

/* =========================================================
   “Fast Links” list/tile styles (used across pages)
   ========================================================= */
.list.grid{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:700px){
  .list.grid{ grid-template-columns:1fr 1fr }
}
.rowcard{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:14px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.26);
  text-decoration:none;
}
.rowcard:hover{ text-decoration:none; filter:brightness(1.02) }
.rowcard img{
  width:64px; height:64px; border-radius:12px; object-fit:cover; flex:0 0 auto;
}
.rowcard .grow{ flex:1; min-width:0 }
.rowcard .ttl{ font-weight:800; margin-bottom:2px }
.rowcard .muted{ color:var(--muted); font-size:14px }

/* =========================================================
   Forms / iframes
   ========================================================= */
.form{ border-radius:16px; overflow:hidden; display:block }

/* =========================================================
   Footer
   ========================================================= */
footer{ margin:36px 0 8px; text-align:center; color:var(--muted) }

/* Utility */
.hide{ display:none !important }
.center{ text-align:center }