/* styles.css — Charleston Town Center Mall Chick-fil-A */
:root{
  --bg: #0b0c10;
  --bg-soft: #121418;
  --text: #e8edf2;
  --text-dim: #b8c1cc;
  --brand: #d21f3c; /* warm red */
  --brand-ink: #fff;
  --accent: #ffd166; /* warm gold */
  --card: #161a21;
  --stroke: #242a33;
  --ring: rgba(210,31,60,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  color:var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  min-height:100dvh;
}

/* Top hiring banner */
.hiring-banner{
  width:100%;
  background:linear-gradient(90deg, var(--brand) 0%, #ff4d6d 100%);
  color:var(--brand-ink);
  text-align:center;
  padding:.6rem 1rem;
  font-weight:700;
  letter-spacing:.3px;
  position:sticky;
  top:0;
  z-index:50;
}
.hiring-banner a{
  color:var(--brand-ink);
  text-decoration:underline;
}

/* Site header */
.header{
  position:sticky;
  top:2.2rem; /* sits just under hiring banner */
  z-index:40;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(11,12,16,.6);
  border-bottom:1px solid var(--stroke);
}
.container{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:1rem;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .8rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  letter-spacing:.2px;
}
.brand svg{width:28px;height:28px;flex:0 0 28px;filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));}

.nav{
  display:flex;
  gap:.6rem;
  align-items:center;
}
.nav a{
  color:var(--text);
  text-decoration:none;
  padding:.5rem .75rem;
  border-radius:.75rem;
  border:1px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"]{
  background:var(--card);
  border-color:var(--stroke);
}

/* Mobile nav */
.nav-toggle{
  display:none;
  background:transparent;border:1px solid var(--stroke);
  color:var(--text); padding:.5rem .7rem; border-radius:.6rem;
}
@media (max-width: 820px){
  .nav{display:none}
  .nav.is-open{display:flex; flex-direction:column; align-items:flex-start; padding:.5rem}
  .nav-toggle{display:inline-flex}
}

/* Hero */
.hero{
  padding: clamp(3rem, 4vw, 4rem) 0;
  border-bottom:1px solid var(--stroke);
  background:
    radial-gradient(1200px 400px at 70% -50%, rgba(210,31,60,.25), transparent 60%),
    radial-gradient(1400px 600px at -10% -40%, rgba(255,209,102,.15), transparent 60%);
}
.hero h1{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height:1.2;
  margin:.2rem 0 .6rem;
}
.hero p{color:var(--text-dim);margin:0}
.kpis{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem;
}
.kpi{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:1rem;
  padding:1rem;
  box-shadow:var(--shadow);
}
.kpi b{font-size:1.25rem}

/* Sections */
.section{padding: clamp(2rem, 4vw, 3rem) 0;}
.section h2{font-size:1.6rem;margin:0 0 .4rem}
.section p.lead{color:var(--text-dim);margin:.2rem 0 1.2rem}

.grid{
  display:grid;
  gap:1rem;
}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid-3, .grid-2{grid-template-columns:1fr} }

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:1rem;
  padding:1rem;
  box-shadow:var(--shadow);
}
.card h3{margin:.2rem 0 .4rem}
.card .meta{color:var(--text-dim); font-size:.95rem}

/* Staff */
.staff{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
}
@media (max-width: 820px){ .staff{grid-template-columns:1fr} }
.person{
  display:flex; gap:1rem; align-items:center;
  background:var(--card); border:1px solid var(--stroke);
  border-radius:1rem; padding:1rem; box-shadow:var(--shadow);
}
.badge{display:inline-block; font-size:.8rem; padding:.2rem .5rem; border-radius:.5rem; border:1px solid var(--stroke); background:#0f141a}

/* Footer */
.footer{
  border-top:1px solid var(--stroke);
  color:var(--text-dim);
  padding:1.5rem 0 3rem;
  font-size:.95rem;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; text-decoration:none; cursor:pointer;
  padding:.6rem .9rem; border-radius:.8rem;
  border:1px solid var(--stroke); background:var(--card); color:var(--text);
}
.btn-primary{ background:var(--brand); border-color:transparent; color:var(--brand-ink); box-shadow:0 10px 24px var(--ring)}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

/* Links row */
.links-row{display:flex; flex-wrap:wrap; gap:.6rem}

/* Utilities */
.m0{margin:0}
.mt1{margin-top:.6rem}
.mt2{margin-top:1rem}
.mt3{margin-top:1.6rem}
.center{text-align:center}
.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}