/* ======================================================================
   ARCO — Flat (Apple-style) Theme — Mobile-first
   Variant: Premium Soft-Black page (keep HERO gradient only)
   ====================================================================== */

/* --------------------- Design tokens --------------------- */
:root{
  /* Palette */
  --bg: #0a0a0b;        /* premium soft black (page background) */
  --panel: #0f0f12;     /* cards/panels (rarely used; we mostly use rgba layer) */
  --txt-0:#ffffff;
  --txt-1:#c7c7ce;
  --txt-2:#9a9aa3;
  --bd-0:#24242a;

  /* Brand */
  --brand:#7BAFD4;      /* UNC Carolina Blue */
  --brand-2:#A5D8F7;

  /* Radii & shadows */
  --radius-xl:20px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow-1:0 1px 2px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.35);
  --shadow-2:0 1px 2px rgba(0,0,0,.25), 0 18px 40px rgba(0,0,0,.45);

  /* Layout */
  --container:1200px;
  --nav-h:64px;         /* sticky header height */

  /* Spacing */
  --gutter: 28px;
  --section-top: 96px;
  --section-top-lg: 112px;
  --section-bottom: 80px;
}

/* --------------------- Base --------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);                  /* single flat background */
  background-image:none !important;       /* prevent inherited gradients */
  color:var(--txt-0);
  line-height:1.6;
}

/* Smooth scroll + account for sticky header so anchors aren’t covered */
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
}

.section{
  background:transparent;                 /* keep page as one flat color */
  padding: var(--section-top) 0 var(--section-bottom);
}
.section,
#pillars,#events,#showcase,#gallery,#join{
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.headline{font-weight:800; line-height:1.1}
.h2{font-size: clamp(28px, 5vw, 40px)}
.h3{font-size: clamp(22px, 4.2vw, 28px)}
.subtle{color:var(--txt-2)}
.muted{color:var(--txt-1)}

.card{
  background-color: rgba(255,255,255,.03);  /* subtle lift without banding */
  border:1px solid var(--bd-0);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px; font-weight:700;
  background: var(--brand);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; box-shadow:var(--shadow-2);
  transition:transform .15s ease, filter .2s ease, background .2s ease;
  font-size:14px;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.btn-ghost{background:transparent; border:1px solid var(--bd-0); color:var(--txt-0)}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  font-size:12px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); border-radius:999px; color:#dbe8f3
}

/* --------------------- Navigation --------------------- */
.nav{
  position:sticky; top:0; left:0; right:0; z-index:100;
  background: var(--bg);                   /* solid, not translucent */
  backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between}
.nav-brand{display:flex; align-items:center; gap:10px; font-weight:800}
.logo-dot{height:28px; width:28px; display:grid; place-items:center; border-radius:12px; background:rgba(123,175,212,.18)}
.nav-links{display:none; gap:24px; color:var(--txt-1); font-size:14px}
.nav-actions{display:flex; align-items:center; gap:10px}
.hamburger{display:inline-flex; gap:6px; flex-direction:column}
.hamburger span{width:22px; height:2px; background:#ddd; border-radius:2px}

/* Mobile drawer */
.drawer{
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:90;
  background: var(--bg);                   /* solid black drawer */
  backdrop-filter:none;
}
.drawer-nav{display:flex; flex-direction:column; gap:20px; padding:20px; color:var(--txt-1)}

/* --------------------- Hero --------------------- */
/* Keep ONLY the hero gradient/glow; everything else is flat */
.hero{position:relative; overflow:visible; isolation:isolate; padding-bottom: 8px;}
/* if you use .hero-glow::before/after for gradient blobs, KEEP them active */
/* remove the next two lines if they exist elsewhere disabling them */
/* .hero-glow::before, .hero-glow::after{ content:""; } */
.hero-grid{display:grid; gap:28px; grid-template-columns:1fr}
.kicker{margin-bottom:10px}
.hero h1{font-size: clamp(32px, 8vw, 64px)}
.hero-lede{max-width:640px; color:var(--txt-1)}
.hero-ctas{display:flex; gap:12px; margin:18px 0; flex-wrap:wrap}
.hero-stats{display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; font-size:14px}

/* --------------------- Tiles & Showcase --------------------- */
.tile{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--bd-0);
  background-color: rgba(255,255,255,.03);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.tile img{height:180px; width:100%; object-fit:cover; opacity:.95; transition:transform .5s ease}
.tile:hover img{transform:scale(1.03)}
.tile-label{position:absolute; left:12px; bottom:12px; font-weight:700; text-shadow:0 1px 10px rgba(0,0,0,.45)}

.section-head{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:8px 22px; margin-bottom:18px;
}
.section-head .headline{margin:0}
.section-head p{margin:0; color:var(--txt-1)}

.feature-tiles{display:grid; grid-template-columns:1fr; gap:14px}
.feature-tiles .tile img{height:220px}

/* --------------------- Pillars --------------------- */
.grid-3{display:grid; gap:14px}
.pillar{padding:18px}
.pillar h3{margin:0 0 6px; font-size:18px}
.icondot{display:inline-grid; place-items:center; height:34px; width:34px; border-radius:12px; background:rgba(123,175,212,.18); margin-right:10px}

/* --------------------- Events --------------------- */
.events{display:grid; gap:14px}
.event{padding:16px}
.row{display:flex; align-items:center; gap:8px}
.event-title{margin:0 0 8px; font-size:18px; font-weight:700}

/* --------------------- Gallery --------------------- */
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gallery-item{position:relative; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.03)}
.gallery-item img{height:170px; width:100%; object-fit:cover; transition:transform .5s ease}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item.wide{grid-column:span 2}

/* --------------------- Join --------------------- */
.join{text-align:center}
.form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.input{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:var(--txt-0); padding:12px 14px; border-radius:999px; min-width:240px;
}
.small{font-size:12px; color:var(--txt-2); margin-top:4px}

/* --------------------- FAQ --------------------- */
.faq-wrap{border:1px solid var(--bd-0); border-radius:24px; padding:20px; background:rgba(255,255,255,.03)}
.faq{display:grid; gap:12px; margin-top:12px}
.faq-item{border:1px solid var(--bd-0); border-radius:18px; padding:14px; background:rgba(0,0,0,.35)}

/* --------------------- Footer --------------------- */
footer{
  border-top:1px solid rgba(255,255,255,.08);
  background: var(--bg);                  /* solid */
}
.footer-pad{padding:28px 0}
.footer-line{display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:space-between}
.footer-links{display:flex; gap:16px; flex-wrap:wrap}

/* --------------------- A11y + animations --------------------- */
.fade{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.fade.show{opacity:1; transform:translateY(0)}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.btn:focus, .input:focus{outline:2px solid var(--brand); outline-offset:2px}
.input::placeholder{color:var(--txt-2)}

/* ======================================================================
   BREAKPOINTS
   ====================================================================== */
@media (min-width:768px){
  .container{padding-left:20px; padding-right:20px}
  .section{padding:72px 0}
  .nav-links{display:flex}
  .hamburger{display:none}

  .feature-tiles{grid-template-columns:1fr 1fr; gap:16px}
  .feature-tiles .tile img{height:240px}

  .grid-3{grid-template-columns:1fr 1fr}
  .events{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3, 1fr)}
}

@media (min-width:1024px){
  .container{padding-left:var(--gutter); padding-right:var(--gutter)}
  .section{padding: var(--section-top-lg) 0 var(--section-bottom)}

  /* keep hero single column for clarity */
  .hero-grid{grid-template-columns:1fr}

  .section-head{
    flex-direction:row; justify-content:space-between;
    align-items:baseline; gap:18px 28px; margin-bottom:24px;
  }

  .feature-tiles{grid-template-columns:1fr 1fr; gap:20px}
  .feature-tiles .tile img{height:260px}

  .grid-3{grid-template-columns:1fr 1fr 1fr}
  .events{grid-template-columns:1fr 1fr 1fr}
}

@media (min-width:1280px){
  .feature-tiles .tile img{height:280px}
}

/* ======================================================================
   HARD ENFORCERS (safety net to guarantee flat background)
   ====================================================================== */

/* 1) One true background everywhere */
html, body {
  background-color: var(--bg) !important;
  background-image: none !important;
}

/* 2) Sections transparent so the single page color shows through */
.section { background: transparent !important; }

/* 3) Force nav/footer/drawer solid — no translucency or blur */
.nav, footer, .drawer {
  background: var(--bg) !important;
  backdrop-filter: none !important;
}

/* 4) Panels/tiles are subtle, not opaque bands */
.card, .tile, .faq-wrap, .gallery-item {
  background: rgba(255,255,255,.03) !important;
  backdrop-filter: none !important;
}

/* 5) Do NOT kill hero gradient — ensure no global rules remove it */
/* If some earlier CSS disables .hero-glow pseudo elements, undo it: */
.hero-glow::before, .hero-glow::after {
  /* your project’s gradient styles should live elsewhere */
  /* this block just prevents unwanted `content:none` from earlier CSS */
  content: "";
}

/* 6) Prevent odd GPU seams on dark backgrounds */
* { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* ======================================================================
   Accent borders + subtle blue glow (Apple-subtle)
   Append-only: safe to paste at end of file
   ====================================================================== */

/* Tokens for the glow */
:root{
  --blue-border: rgba(165,216,247,0.22);     /* idle border */
  --blue-border-hover: rgba(165,216,247,0.60);/* hover/focus border */
  --blue-glow-1: 0 0 0 1px rgba(165,216,247,0.45);
  --blue-glow-2: 0 0 22px rgba(165,216,247,0.25);
  --blue-glow-3: 0 2px 30px rgba(123,175,212,0.12);
}

/* Targets: cards, tiles, FAQ, gallery tiles, event blocks, pillars, ghost buttons, inputs */
.card,
.tile,
.faq-wrap,
.faq-item,
.gallery-item,
.event,
.pillar,
.btn-ghost,
.input {
  border-color: var(--blue-border) !important;
  transition:
    border-color .25s ease,
    box-shadow .35s ease,
    filter .25s ease,
    transform .25s ease;
  /* keep existing elevation, then let hover add glow layers */
  box-shadow: var(--shadow-1);
}

/* Hover glow (desktop/hover-capable only) */
@media (hover:hover) {
  .card:hover,
  .tile:hover,
  .faq-wrap:hover,
  .faq-item:hover,
  .gallery-item:hover,
  .event:hover,
  .pillar:hover,
  .btn-ghost:hover,
  .input:hover {
    border-color: var(--blue-border-hover) !important;
    box-shadow:
      var(--shadow-1),
      var(--blue-glow-1),
      var(--blue-glow-2),
      var(--blue-glow-3);
  }
}

/* Focus states (keyboard + a11y) — a touch stronger than hover */
.card:focus-within,
.tile:focus-within,
.faq-item:focus-within,
.gallery-item:focus-within,
.event:focus-within,
.pillar:focus-within,
.btn-ghost:focus,
.input:focus {
  border-color: var(--blue-border-hover) !important;
  outline: 2px solid rgba(165,216,247,0.70);
  outline-offset: 2px;
  box-shadow:
    var(--shadow-1),
    0 0 0 1px rgba(165,216,247,0.55),
    0 0 28px rgba(165,216,247,0.28),
    0 4px 36px rgba(123,175,212,0.16);
}

/* Touch devices (no hover): make the border a hair more visible on tap */
@media (hover:none) {
  .card:active,
  .tile:active,
  .faq-item:active,
  .gallery-item:active,
  .event:active,
  .pillar:active,
  .btn-ghost:active,
  .input:active {
    border-color: var(--blue-border-hover) !important;
    box-shadow:
      var(--shadow-1),
      var(--blue-glow-1);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card,
  .tile,
  .faq-wrap,
  .faq-item,
  .gallery-item,
  .event,
  .pillar,
  .btn-ghost,
  .input {
    transition: border-color .15s linear, box-shadow .15s linear;
  }
}