@import url("/static/css/brand.css");

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  color: var(--brand-ink);
  background: var(--brand-paper);
  font-family: var(--font-sans);
}
a { color: var(--brand-blue); }
h1, h2, h3 { font-family: var(--font-display); }
.public-shell { min-height: 100vh; display: flex; flex-direction: column; }
.public-header {
  background: var(--brand-navy);
  color: #fff;
  padding: 0.85rem 1.25rem;
}
.public-header a { color: inherit; text-decoration: none; }
.public-hero {
  background:
    linear-gradient(180deg, rgba(24, 36, 58, 0.55), rgba(24, 36, 58, 0.72)),
    url("/static/brand/images/hero-header.jpg") center/cover no-repeat;
  color: #fff;
  padding: 2.5rem 1.25rem 2.2rem;
}
.public-hero h1 { margin: 0 0 0.4rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.public-hero p { max-width: 40rem; }
.public-main {
  width: min(960px, calc(100% - 2rem));
  margin: -1.5rem auto 2rem;
}
.public-footer {
  margin-top: auto;
  padding: 1.2rem;
  text-align: center;
  color: var(--brand-muted);
  font-size: 0.85rem;
}
.step-nav {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.step-nav button {
  border: 1px solid var(--brand-line);
  background: #fff;
  color: var(--brand-navy);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}
.step-nav button[aria-current="step"] {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.apply-card, .festival-card {
  background: var(--brand-card);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow);
  padding: 1.2rem 1.3rem 1.4rem;
}
.festival-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
}
.festival-card {
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.festival-card[aria-pressed="true"], .festival-card:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(30, 74, 168, 0.25);
}
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
label { display: block; }
input, select, textarea, button {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--brand-line);
}
input, select, textarea { width: 100%; margin-top: 0.25rem; background: #fff; }
button.primary, .button.primary {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
  cursor: pointer;
}
button.secondary { background: #fff; color: var(--brand-navy); cursor: pointer; }
.flash { padding: 0.7rem 0.8rem; border-radius: 8px; }
.flash.danger { background: #f3d6d6; color: var(--brand-danger); }
.flash.warn { background: #f7ead0; color: var(--brand-warn); }
.flash.ok { background: #d7ecdf; color: var(--brand-ok); }
.group-block { border-top: 1px solid var(--brand-line); padding-top: 0.8rem; }
.step-actions { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; }
.muted { color: var(--brand-muted); }
.confirm-ref {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0.4rem 0;
}
.js .apply-step { display: none; }
.js .apply-step.is-active { display: block; }
.checkbox-row { display: flex; align-items: center; gap: 0.45rem; }
.checkbox-row input { width: auto; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .public-hero { padding: 1.6rem 1rem; }
  .confirm-ref { font-size: 1.4rem; }
  .public-header .brand-lockup img { height: 40px; }
}