/* Lonestar Hub — Steel-Blue HUD */

:root{
  --bg: #070b12;
  --panel: rgba(12, 16, 24, 0.78);
  --panel2: rgba(10, 14, 22, 0.62);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --line: rgba(255,255,255,0.12);

  --blue: #3aa0ff;
  --blue2: #1f7fe6;

  --radius: 10px;
  --radius-lg: 14px;

  --shadow: 0 18px 45px rgba(0,0,0,0.55);
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);

  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(58,160,255,0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 15%, rgba(58,160,255,0.10), transparent 55%),
    linear-gradient(180deg, #05070d 0%, #070b12 40%, #05070d 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.45;
  overflow-x:hidden;
}

/* HUD noise */
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,0.04), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 6px);
  mix-blend-mode: overlay;
  opacity:0.06;
}

a{color:inherit}
.container{width:min(var(--max), calc(100% - 36px)); margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:.9rem; color:var(--muted)}
.spacer{height:16px}

.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:18px; top:18px; width:auto; height:auto;
  padding:10px 12px; border-radius:10px;
  background:rgba(10,14,22,0.95); border:1px solid var(--line);
  z-index:1000;
}

/* Shell frame */
.shell{
  position:relative;
  margin: 16px auto;
  width:min(1280px, calc(100% - 24px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(20,24,34,0.55), rgba(8,10,16,0.35));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.shell:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(58,160,255,0.15),
    inset 0 0 40px rgba(58,160,255,0.10);
}
.shell:after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(58,160,255,0.75), transparent);
  opacity:0.6;
  pointer-events:none;
}

/* Header */
.site-header{
  position:sticky; top:0;
  z-index:50;
  background: rgba(6,8,12,0.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
}
.brand img{
  width:44px; height:44px;
  object-fit:contain;
  filter: drop-shadow(0 0 12px rgba(58,160,255,0.22));
}
.brand-text strong{display:block; font-size:18px; letter-spacing:0.6px}
.brand-text small{display:block; font-size:12px; letter-spacing:2px; color:var(--muted); margin-top:2px}

.nav{display:flex; gap:22px; align-items:center}
.nav-link{
  color:rgba(255,255,255,0.72);
  text-decoration:none;
  font-weight:800;
  letter-spacing:0.3px;
  padding:10px 10px;
  border-radius:10px;
  position:relative;
}
.nav-link:hover{color:rgba(255,255,255,0.92)}
.nav-link.active{color:rgba(255,255,255,0.94)}
.nav-link.active:after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:2px;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

/* --- Click / scroll safety ---
   Prevent decorative layers (backgrounds, gradients) from stealing pointer events.
   NOTE: Do NOT disable pointer events on layout containers like .hero (that breaks links + the X/Twitter scroll).
*/
.hero-bg,
.hero-bg::after,
.shell::before,
.shell::after,
body::before{
  pointer-events:none;
}

/* Typo */
.eyebrow{
  margin:0 0 8px;
  color:rgba(255,255,255,0.65);
  text-transform:uppercase;
  letter-spacing:2.6px;
  font-weight:900;
  font-size:12px;
}
h1{
  margin:0 0 12px;
  font-size: 52px;
  line-height:1.02;
  letter-spacing:-0.6px;
  text-shadow: 0 10px 40px rgba(0,0,0,0.65);
}
.lead{
  margin:0 0 12px;
  max-width: 560px;
  color:rgba(255,255,255,0.86);
  font-size:16px;
}
.divider{
  height:1px;
  width:min(560px,100%);
  background: linear-gradient(90deg, rgba(58,160,255,0.65), rgba(255,255,255,0.10), transparent);
  margin: 14px 0;
  opacity:0.9;
}
.divider-tight{margin:12px 0}
.section{padding: 16px 0 18px}
.section.alt{padding: 0 0 18px}
.section-bar{
  margin-top: 10px;
  border-top: 1px solid rgba(58,160,255,0.22);
  background: linear-gradient(90deg, rgba(58,160,255,0.18), rgba(255,255,255,0.03));
  padding: 12px 18px;
}
.section-bar h2{margin:0 0 8px; font-size: 26px}
.section-bar p{margin:0; color:var(--muted)}
.bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.82);
}
.bullets li{margin: 8px 0}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration:none;
  font-weight:900;
  letter-spacing:0.2px;
  user-select:none;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn-primary{
  color: rgba(255,255,255,0.95);
  border-color: rgba(58,160,255,0.45);
  background: linear-gradient(180deg, rgba(58,160,255,0.33), rgba(58,160,255,0.12));
  box-shadow: 0 0 0 4px rgba(58,160,255,0.10), 0 12px 30px rgba(0,0,0,0.40);
}
.btn-primary:hover{
  border-color: rgba(58,160,255,0.70);
  box-shadow: 0 0 0 4px rgba(58,160,255,0.14), 0 16px 40px rgba(0,0,0,0.48);
}
.btn-ghost{
  color: rgba(255,255,255,0.90);
  background: rgba(10,12,18,0.35);
  border-color: rgba(255,255,255,0.18);
}
.btn-full{width:100%}

/* Cards */
.card, .panel{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.14);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card-header{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}
.card-title{
  margin:0;
  font-size: 20px;
  font-weight: 950;
  letter-spacing:0.2px;
}
.card-subtitle{
  margin:6px 0 0;
  color:rgba(255,255,255,0.62);
  font-weight:800;
}
.card-body{padding: 12px 14px 14px}

/* Hero */
.hero{position:relative; padding: 26px 0 12px}
.hero-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(900px 480px at 30% 35%, rgba(58,160,255,0.35), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.20) 60%, rgba(0,0,0,0.65) 100%),
    url("assets/hero.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  opacity:0.95;
}
.hero-bg:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.60));
  pointer-events:none;
}
.hero-inner{position:relative; padding: 18px 18px 10px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:18px;
  align-items:start;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 8px;
}

/* Gallery page */
.page-hero{padding: 18px 0 6px}
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.page-title{
  margin:0 0 8px;
  font-size: 44px;
  line-height:1.05;
  letter-spacing:-0.4px;
  text-shadow: 0 10px 40px rgba(0,0,0,0.65);
}

/* Filter chips */
.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0 0}
.chip{
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(10,12,18,0.35);
  color: var(--text);
  padding:8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:900;
  font-size:.85rem;
}
.chip:hover{border-color: rgba(58,160,255,0.35)}
.chip.active{
  border-color: rgba(58,160,255,0.55);
  background: rgba(58,160,255,0.14);
  box-shadow: 0 0 0 4px rgba(58,160,255,0.08);
}

/* Gallery grid + hover interaction */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 980px){ .gallery-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .gallery-grid{grid-template-columns: 1fr} }

.tile{
  position:relative;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,12,18,0.35);
  overflow:hidden;
  padding:0;
  cursor:pointer;
  text-align:left;
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tile img{
  display:block;
  width:100%;
  height:240px;
  object-fit:cover;
  filter: contrast(1.05) saturate(1.02);
  transition: transform .16s ease;
}
.tile-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:12px 12px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.tile-title{font-weight:950; letter-spacing:.2px}
.tile-meta{color:rgba(255,255,255,0.68); font-weight:900; font-size:.85rem}

.tile:hover{
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(58,160,255,0.55);
  box-shadow: 0 0 0 4px rgba(58,160,255,0.10), 0 18px 45px rgba(0,0,0,0.60);
}
.tile:hover img{transform: scale(1.04)}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  z-index:2000;
}
.lightbox-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
}
.lightbox-panel{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin: 28px auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(12, 16, 24, 0.92);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.icon-btn{
  position:absolute;
  right:10px; top:10px;
  width:38px; height:38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(10,12,18,0.35);
  color: var(--text);
  cursor:pointer;
  font-weight:950;
}
.icon-btn:hover{border-color: rgba(58,160,255,0.45)}
.lightbox-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.lightbox-title{font-weight:950; font-size: 18px}
.lightbox-sub{color: var(--muted); font-weight:800; margin-top:4px; font-size:.9rem}
.lightbox-body{padding: 12px 14px 14px}
.lightbox-body img{
  width:100%;
  height:auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
}

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(6,8,12,0.55);
}
.footer-inner{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding: 12px 18px;
}

/* Responsive */
@media (max-width: 980px){
  h1{font-size: 42px}
  .hero-grid{grid-template-columns: 1fr}
  .lead{max-width: 100%}
  .divider{width:100%}
  .page-title{font-size: 38px}
}
@media (max-width: 520px){
  h1{font-size: 36px}
  .nav{gap:10px}
  .nav-link{padding:10px 8px}
  .page-title{font-size: 34px}
  .tile img{height:220px}
}

/* Freedom Radio */
.radio-toggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10, 18, 35, .86);
  color: rgba(255,255,255,0.94);
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .12s ease, opacity .12s ease, border-color .12s ease;
}
.radio-toggle:hover{ transform: translateY(-1px); border-color: rgba(94, 176, 255, .35); }
.radio-toggle:active{ transform: translateY(0px); }
.radio-toggle.off{ opacity: .78; }


/* Safety: ensure hidden elements never intercept clicks */
[hidden]{ display:none !important; }

/* Safety: lightbox should not intercept clicks unless shown */
.lightbox{ pointer-events:none; }
.lightbox:not([hidden]){ pointer-events:auto; }

/* Safety: decorative overlays should never block interaction */
.page-hero::before,
.page-hero::after{
  pointer-events:none;
}
#galleryFilter{ position:relative; z-index:5; }