/* Shared styling for the three legal pages (privacy, terms, refund).

   Deliberately its own file rather than inlined three times: these documents
   get edited by a person, not a script, and nobody should have to make the
   same style change in three places. It is ~4KB and cached across all three.

   Palette and type match the landing page's fl2- tokens exactly, so these
   read as part of Festora rather than as a legal appendix bolted on.

   NOTE FOR DEPLOYS: this file has to be in the folder dropped on Vercel.
   Without it the pages still render and stay perfectly readable -- plain
   black text on white, correct heading order -- they just lose the brand.
   That was the point of keeping the markup semantic. */

:root{
  --maroon:#8B1538; --coral:#D85D44; --gold:#E8A33D;
  --cream:#FBF6EC;  --sand:#E8DDC8;  --ink:#1A1410; --warm:#5A4F47;
  --disp:'Amiri',Georgia,'Times New Roman',serif;
  --ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--ui); font-size:16.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* ── masthead ── */
.lg-top{
  background:linear-gradient(152deg,var(--maroon) 0%,#6E0F2C 46%,#2D1B3D 100%);
  color:#fff; padding:22px 0 54px;
}
.lg-wrap{max-width:760px; margin:0 auto; padding:0 20px}
.lg-brand{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:#fff; font-weight:800; letter-spacing:.14em; font-size:13px;
}
.lg-brand img{width:26px; height:31px; object-fit:contain}
.lg-top h1{
  font-family:var(--disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(34px,6.4vw,58px); line-height:1.04; margin:34px 0 10px;
}
.lg-date{font-size:13px; color:rgba(255,255,255,.62); margin:0}

/* ── body ── */
main{max-width:760px; margin:0 auto; padding:0 20px 20px}

/* The summary box. Every one of these documents opens with a plain-language
   précis, because a policy nobody reads protects nobody. */
.lg-tldr{
  background:#fff; border:2px solid var(--ink); border-radius:18px;
  box-shadow:6px 6px 0 var(--ink);
  padding:24px 26px; margin:-34px 0 44px;
}
.lg-tldr h2{
  font-family:var(--ui); font-size:11.5px; font-weight:800; letter-spacing:.19em;
  text-transform:uppercase; color:var(--coral); margin:0 0 12px;
}
.lg-tldr ul{margin:0; padding-left:20px}
.lg-tldr li{margin:7px 0}
.lg-tldr li::marker{color:var(--coral)}

h2{
  font-family:var(--disp); font-weight:700; font-size:clamp(25px,3.6vw,34px);
  line-height:1.16; letter-spacing:-.015em; margin:46px 0 6px;
  padding-top:22px; border-top:1px solid var(--sand);
}
h2:first-of-type{border-top:0; padding-top:0}
h3{font-size:17px; font-weight:700; margin:30px 0 4px}
p{margin:14px 0}
ul,ol{margin:14px 0; padding-left:22px}
li{margin:8px 0}
a{color:var(--maroon); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--coral)}
strong{font-weight:700}

/* Data tables — the "what we collect" grids. They scroll rather than
   squash on a phone; a table that reflows into porridge is unreadable. */
.lg-tblwrap{overflow-x:auto; margin:20px 0; border:1px solid var(--sand); border-radius:12px; background:#fff}
table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:480px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--sand); vertical-align:top}
th{background:#fff; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--warm)}
tr:last-child td{border-bottom:0}

/* A callout for the things a reader genuinely must not miss. */
.lg-note{
  background:#fff; border-left:4px solid var(--gold); border-radius:0 12px 12px 0;
  padding:16px 20px; margin:24px 0;
}
.lg-note p:first-child{margin-top:0}
.lg-note p:last-child{margin-bottom:0}

/* Unfilled details. Loud on purpose: these must never reach a live page
   unnoticed, so they are styled to be impossible to scroll past. */
.lg-todo{
  background:#FFE9A8; color:#5A3A00; border:2px dashed #B8860B;
  border-radius:6px; padding:1px 7px; font-weight:800; font-size:.88em;
  font-family:var(--ui);
  /* Must wrap. These strings are long, and holding one on a single line
     pushed the whole page sideways on a 375px phone. Measured, not guessed. */
  overflow-wrap:anywhere;
}

.lg-contact{
  background:var(--ink); color:#fff; border-radius:18px;
  padding:28px 30px; margin:48px 0 0;
}
.lg-contact h2{border:0; padding:0; margin:0 0 10px; color:#fff; font-size:26px}
.lg-contact p{color:rgba(255,255,255,.80); margin:8px 0}
.lg-contact a{color:var(--gold)}

footer{max-width:760px; margin:0 auto; padding:34px 20px 60px; font-size:14px; color:var(--warm)}
footer nav{display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:14px}
footer nav a{color:var(--warm)}
footer .lg-cr{font-size:12.5px; color:#8A8078}

@media (max-width:560px){
  body{font-size:16px}
  .lg-tldr{padding:20px; margin-top:-28px}
  .lg-contact{padding:22px}
}

/* Printing matters here: colleges do print these for their files. */
@media print{
  body{background:#fff; font-size:11pt}
  .lg-top{background:#fff; color:#000; padding:0}
  .lg-top h1{color:#000}
  .lg-date{color:#444}
  .lg-tldr{box-shadow:none; margin-top:20px}
  .lg-contact{background:#fff; color:#000; border:1px solid #000}
  .lg-contact h2,.lg-contact p{color:#000}
  .lg-contact a,footer nav{display:none}
}