/* CampusScoop — stylesheet

   PALETTE NOTE (read before changing):
   These are ice-cream colors — strawberry, mango, pistachio, grape — chosen to be
   vivid while staying clearly DISTINCT from Tulane's official green and blue.
   The brainstorm (Topic 3, "NEW RISK") requires that the site not use Tulane's
   logo, wordmark, seal, or official colors, because the site is named for the
   campus, gated on Tulane email, and run by Tulane students — which together
   read as an official Tulane publication unless we visibly separate from it.
   TODO: brand palette and typeface have still not been approved by a human. */

:root {
  --ink:        #211d2b;
  --ink-soft:   #514a63;
  --ink-faint:  #5d5769;
  --cream:      #fdeede;   /* tinted, not white */
  --cream-2:    #f7e2f0;
  --card:       #fff6e9;   /* warm card, not white */
  --card-2:     #ffeaf2;
  --rule:       #e6cfe0;

  --strawberry: #e8467c;
  --mango:      #f79824;
  --pistachio:  #6cbf3e;
  --grape:      #8b4fc4;
  --cone:       #d99b4e;

  --accent:     #ae345d;   /* AA-passing text/button color, derived from strawberry */
  --accent-dk:  #932c4f;
  --accent-bright: var(--strawberry); /* decorative use only (gradients, dots) — not for text */
  --accent-vivid: #e94f82; /* vivid pink that passes AA WITH DARK TEXT — for pills/badges that need to stay saturated */
  --score-text: #211d2b;   /* dark text on the pistachio score chip — white failed WCAG (2.29:1) */

  --todo-bg:    #fff6dd;
  --todo-bd:    #e0a92c;
  --todo-ink:   #7a5410;
  --maxw:       42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:       #f6f1fa;
    --ink-soft:  #c4bad2;
    --ink-faint: #8f86a0;
    --cream:     #1a1424;
    --cream-2:   #211829;
    --card:      #271e35;
    --card-2:    #2e2138;
    --rule:      #40334f;
    --strawberry:#ff6b9b;
    --mango:     #ffb04d;
    --pistachio: #8fdc5e;
    --grape:     #b57ce8;
    --accent:    var(--strawberry);
    --accent-dk: #ff8cb2;
    --accent-bright: var(--strawberry);
    --accent-vivid: var(--strawberry);
    --score-text: #16131f;
    --todo-bg:   #2e2616;
    --todo-bd:   #8a6a24;
    --todo-ink:  #f0d493;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.62 "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 8% 4%,  rgba(232,70,124,.20), transparent 34%),
    radial-gradient(circle at 94% 12%, rgba(247,152,36,.22), transparent 36%),
    radial-gradient(circle at 4% 58%, rgba(139,79,196,.16), transparent 34%),
    radial-gradient(circle at 96% 74%, rgba(108,191,62,.18), transparent 34%),
    var(--cream);
  background-attachment: fixed;
}
h1, h2, h3, .brand, .btn, nav a, .empty .big, .todo strong {
  font-family: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header / nav ---------- */
.site-head {
  border-bottom: 3px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(90deg,
    var(--strawberry) 0 25%, var(--mango) 25% 50%,
    var(--pistachio) 50% 75%, var(--grape) 75% 100%) top / 100% 6px no-repeat,
    var(--card);
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  align-items: center; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand span { color: var(--accent-bright); }
.brand svg { width: 26px; height: 26px; flex: none; }

nav { display: flex; gap: 1rem; flex-wrap: wrap; }
nav a {
  font-size: .88rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: .55rem .7rem; border-radius: 999px; display: inline-block;
}
nav a:hover { color: #fff; background: var(--grape); }
nav a[aria-current="page"] { color: var(--ink); background: var(--accent-vivid); }

/* ---------- hero ---------- */
.hero {
  padding: 3.5rem 0 3rem;
  background:
    radial-gradient(circle at 12% 15%, rgba(232,70,124,.16), transparent 42%),
    radial-gradient(circle at 88% 25%, rgba(247,152,36,.18), transparent 45%),
    radial-gradient(circle at 70% 90%, rgba(108,191,62,.15), transparent 45%),
    radial-gradient(circle at 25% 85%, rgba(139,79,196,.14), transparent 45%);
}
.hero .wrap { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.hero-text { flex: 1 1 22rem; min-width: 0; }
.hero-art { flex: 0 0 128px; margin: .5rem auto 0; }
.hero-art svg { width: 128px; height: auto; display: block; }

h1 {
  font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.04;
  letter-spacing: -.02em; margin: 0 0 1.1rem; font-weight: 700;
}
h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--strawberry), var(--mango) 55%, var(--grape));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { font-size: 1.13rem; color: var(--ink-soft); margin: 0 0 2rem; max-width: 34rem; }

.cta-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.btn {
  display: inline-block; background: var(--accent-bright); color: #fff;
  font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em;
  padding: .9rem 1.7rem; border-radius: 999px; text-decoration: none;
  border: none; cursor: pointer; box-shadow: 0 4px 0 var(--accent-dk);
}
.btn:hover { background: var(--accent-dk); box-shadow: 0 2px 0 var(--accent-dk); transform: translateY(2px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.link-2 { font-size: .96rem; font-weight: 600; color: var(--grape); text-underline-offset: 3px; }
.link-2:hover { color: var(--accent-dk); }

.trust {
  font-size: .95rem; color: var(--ink-soft); font-weight: 700;
  background: var(--card); border: 2px solid var(--rule);
  border-left: 6px solid var(--pistachio);
  border-radius: 10px; padding: .8rem 1rem; margin: 0;
}

/* ---------- content ---------- */
main { padding-bottom: 4rem; }
h2, h3, [id] {
  scroll-margin-top: 196px; /* header measured at 178px; +18px buffer */
}
h2 {
  font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em;
  margin: 2.75rem 0 .85rem; padding-top: 2.25rem;
  border-top: 3px dotted var(--rule);
}
h2::before {
  content: ""; display: block; width: 42px; height: 6px; border-radius: 3px;
  background: var(--mango); margin-bottom: .9rem;
}
h2:nth-of-type(2)::before { background: var(--pistachio); }
h2:nth-of-type(3)::before { background: var(--grape); }
h2:nth-of-type(4)::before { background: var(--accent-bright); }
h3 { font-size: 1.1rem; font-weight: 700; margin: 1.75rem 0 .5rem; color: var(--grape); }
p { margin: 0 0 1.1rem; }
a { color: var(--accent); }
ul { padding-left: 1.15rem; margin: 0 0 1.1rem; }
li { margin-bottom: .5rem; }
.lede { font-size: 1.12rem; color: var(--ink-soft); }

/* ---------- TODO marker ---------- */
.todo {
  background: var(--todo-bg); border: 2px dashed var(--todo-bd);
  color: var(--todo-ink); border-radius: 10px; padding: .9rem 1.05rem;
  font-size: .88rem; line-height: 1.5; margin: 0 0 1.25rem;
}
.todo strong { letter-spacing: .07em; font-size: .76rem; display: block; margin-bottom: .35rem; }
.todo :last-child { margin-bottom: 0; }

/* ---------- form ---------- */
.form-card {
  background: var(--card); border: 3px solid var(--rule);
  border-radius: 16px; padding: 1.6rem; margin-bottom: 2rem;
}
label { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .35rem; }
.hint { font-size: .84rem; color: var(--ink-faint); margin: -.15rem 0 .5rem; }
input, select, textarea {
  width: 100%; font: inherit; font-size: .97rem;
  padding: .65rem .75rem; margin-bottom: 1.1rem;
  border: 2px solid var(--rule); border-radius: 9px;
  background: var(--cream); color: var(--ink);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--grape); outline-offset: 1px; }

/* ---------- empty state ---------- */
.empty {
  border: 3px dashed var(--rule); border-radius: 16px;
  padding: 2rem 1.5rem 2.25rem; text-align: center; color: var(--ink-soft);
  background: var(--card);
}
.empty svg { width: 72px; height: auto; margin-bottom: .5rem; }
.empty p:last-child { margin-bottom: 0; }
.empty .big { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin-bottom: .6rem; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 3px solid var(--rule); padding: 2rem 0 3rem;
  font-size: .85rem; color: var(--ink-faint);
  background:
    linear-gradient(90deg,
      var(--strawberry) 0 25%, var(--mango) 25% 50%,
      var(--pistachio) 50% 75%, var(--grape) 75% 100%) top / 100% 6px no-repeat,
    var(--card);
}
.site-foot a { color: var(--grape); font-weight: 600; }
.foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.disclaimer { max-width: 34rem; }


/* ---------- where-to-post category grid ---------- */
.zone {
  background: var(--card); border: 3px solid var(--rule);
  border-radius: 18px; padding: 1.4rem 1.3rem 1.5rem; margin-bottom: 1.5rem;
}
.zone.off { background: var(--card-2); }
.zone-head {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem;
  font-family: "Fredoka", ui-rounded, system-ui, sans-serif;
  font-size: 1.3rem; font-weight: 600;
}
.zone-head .dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.zone.on  .dot { background: var(--pistachio); }
.zone.off .dot { background: var(--grape); }
.zone-note { font-size: .89rem; color: var(--ink-faint); margin: 0 0 1.1rem; }

.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.cat {
  display: flex; align-items: center; gap: .5rem;
  background: var(--cream); border: 2px solid var(--rule); border-radius: 12px;
  padding: .6rem .7rem; font-size: .88rem; font-weight: 700;
  color: var(--ink); text-decoration: none; line-height: 1.25;
}
.cat:hover { border-color: var(--strawberry); transform: translateY(-2px); }
.cat .ico { font-size: 1.2rem; flex: none; }
.zone.on  .cat:nth-child(3n+1) { border-left: 6px solid var(--pistachio); }
.zone.on  .cat:nth-child(3n+2) { border-left: 6px solid var(--mango); }
.zone.on  .cat:nth-child(3n+3) { border-left: 6px solid var(--strawberry); }
.zone.off .cat:nth-child(3n+1) { border-left: 6px solid var(--grape); }
.zone.off .cat:nth-child(3n+2) { border-left: 6px solid var(--strawberry); }
.zone.off .cat:nth-child(3n+3) { border-left: 6px solid var(--mango); }


/* ---------- how-it-works steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.step {
  background: var(--card); border: 3px solid var(--rule); border-radius: 16px;
  padding: 1.1rem 1rem 1.15rem; position: relative;
}
.step:nth-child(1) { border-top: 8px solid var(--strawberry); }
.step:nth-child(2) { border-top: 8px solid var(--mango); }
.step:nth-child(3) { border-top: 8px solid var(--pistachio); }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: var(--ink);
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; font-size: .95rem;
  margin-bottom: .5rem;
}
.step:nth-child(1) .num { background: var(--accent-vivid); }
.step:nth-child(2) .num { background: var(--mango); }
.step:nth-child(3) .num { background: var(--pistachio); }
.step h3 { margin: 0 0 .35rem; color: var(--ink); font-size: 1.02rem; }
.step p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- closing CTA band ---------- */
.closer {
  margin-top: 3rem; text-align: center; border-radius: 20px; padding: 2.25rem 1.4rem 2.4rem;
  color: #fff;
  background: linear-gradient(115deg, var(--grape), var(--strawberry) 55%, var(--mango));
}
.closer h2 { color: #fff; font-size: 1.75rem; }
.closer h2::before { display: none; }
.closer p { color: rgba(255,255,255,.92); margin-bottom: 1.4rem; }
.closer .btn { background: #fff; color: var(--grape); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.closer .btn:hover { background: #fff; color: var(--accent-bright); }
.btn.big { font-size: 1.3rem; padding: 1rem 2.1rem; }

/* ---------- search ---------- */
.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;
}
.searchbox { margin: 0 0 .85rem; max-width: 34rem; }
.searchbox input {
  width: 100%; margin: 0; font-size: 1.05rem; font-weight: 600;
  padding: .95rem 1.1rem; border-radius: 999px;
  border: 3px solid var(--grape); background: var(--card);
  box-shadow: 0 4px 0 rgba(139,79,196,.28);
}
.searchbox input::placeholder { font-weight: 400; color: var(--ink-faint); }
.searchbox input:focus { outline: 3px solid var(--strawberry); outline-offset: 2px; }

.results { max-width: 34rem; margin-bottom: 1.5rem; }
.results:empty { margin-bottom: 0; }
.result {
  display: flex; align-items: center; gap: .75rem; text-decoration: none;
  background: var(--card); border: 2px solid var(--rule); border-left: 6px solid var(--mango);
  border-radius: 12px; padding: .7rem .85rem; margin-bottom: .5rem; color: var(--ink);
}
.result:hover { border-left-color: var(--strawberry); transform: translateY(-2px); }
.r-ico { font-size: 1.4rem; flex: none; }
.r-body { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.r-name { font-family:"Fredoka",system-ui,sans-serif; font-weight: 600; font-size: 1.02rem; }
.r-cat { font-size: .8rem; color: var(--ink-faint); }
.r-score { flex: none; text-align: right; }

.score {
  display:inline-block; font-family:"Fredoka",system-ui,sans-serif; font-weight:700;
  font-size:1.05rem; background: var(--pistachio); color: var(--score-text);
  border-radius: 9px; padding: .15rem .5rem; min-width: 2.4rem; text-align:center;
}
.score.none { background: var(--rule); color: var(--ink-faint); }
.score-n { display:block; font-size:.72rem; color: var(--ink-faint); margin-top:.15rem; }

.no-hits {
  background: var(--card); border: 3px dashed var(--rule); border-radius: 14px;
  padding: 1.5rem 1.2rem; text-align: center; color: var(--ink-soft);
}
.no-hits .big { font-family:"Fredoka",system-ui,sans-serif; font-size:1.08rem; color:var(--ink); margin-bottom:.4rem; }
.no-hits p:last-child { margin-bottom: 0; }

/* ---------- place page ---------- */
.place-head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 2.5rem; margin-bottom: .5rem;
}
.p-ico { font-size: 2.6rem; flex: none; }
.p-name { font-size: clamp(1.7rem, 6vw, 2.4rem); margin: 0; }
.p-cat { margin: .15rem 0 0; color: var(--ink-faint); font-size: .92rem; }
.p-score { margin-left: auto; text-align: right; }
.p-score .score { font-size: 1.6rem; padding: .3rem .7rem; border-radius: 12px; }

.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; }
.tag {
  font-size: .84rem; font-weight: 700; border-radius: 999px;
  padding: .35rem .75rem; background: var(--cream); border: 2px solid var(--rule);
  color: var(--ink-soft);
}
.tag.off { opacity: .75; }
.review {
  background: var(--card); border: 2px solid var(--rule); border-left: 6px solid var(--pistachio);
  border-radius: 12px; padding: .9rem 1rem; margin-bottom: .6rem;
}
.review p { margin: 0; }

/* ---------- add-a-place ---------- */
.form-card.addplace { border-color: var(--grape); }
.form-card.addplace .btn { background: var(--grape); box-shadow: 0 4px 0 #6d3a9c; }
.form-card.addplace .btn:hover { background: #6d3a9c; }
.opt { font-weight: 400; color: var(--ink-faint); font-size: .82rem; }
.no-hits .btn { margin-top: .25rem; }
optgroup { font-family: "Fredoka", system-ui, sans-serif; }

/* ---------- misc spacing helper (replaces a one-off inline style) ---------- */
.findit { max-width: 34rem; margin: -.35rem 0 1.4rem; }