/* Styles Tailwind utilities don't cover cleanly: the visitor pass, form controls, focus, motion, print.
   Colors: ATLAS Indigo #342B7C, ATLAS Teal #3CA7B6, and the brand-kit neutrals
   (White, Paper #FAFAFA, Silver #DFDFDF, Graphite #5F5F5F). Tints are brand colors at reduced opacity. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }
[x-cloak], [hidden] { display: none !important; }

/* Keyboard focus: Indigo ring on light surfaces (11.8:1), Teal on Indigo */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid #342B7C;
  outline-offset: 3px;
  border-radius: 6px;
}
/* Headings focused by script (after a step change) shouldn't show a ring */
[tabindex="-1"]:focus-visible { outline: none; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: #3CA7B6; } /* Teal on Indigo: 4.1:1 */

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  background: #342B7C; color: #fff; padding: .75rem 1rem; border-radius: .5rem;
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Form controls ---------- */
/* Error messages carry an icon so errors never rely on color alone */
[data-error-for]:not([hidden]) { display: flex; align-items: flex-start; gap: .4rem; font-weight: 600; }
[data-error-for]:not([hidden])::before {
  content: "!"; flex: none; display: grid; place-items: center;
  width: 1.1rem; height: 1.1rem; margin-top: .1rem; border-radius: 999px;
  background: #342B7C; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1;
}

.field-input {
  display: block; width: 100%;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  font-size: 1rem; /* 16px stops iOS zoom on focus */
  color: #342B7C;
  background: #fff;
  border: 1.5px solid rgba(52, 43, 124, .28);
  border-radius: .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.field-input::placeholder { color: rgba(95, 95, 95, .8); }
.field-input:hover { border-color: rgba(52, 43, 124, .5); }
.field-input:focus { border-color: #342B7C; box-shadow: 0 0 0 4px rgba(60, 167, 182, .3); outline: none; }
.field-input:disabled { background: #FAFAFA; color: rgba(95, 95, 95, .8); border-color: #DFDFDF; cursor: not-allowed; }
/* Invalid: heavier Indigo border on an Indigo tint, plus an icon on the message (never color alone) */
.field-input[aria-invalid="true"] { border-color: #342B7C; border-width: 2px; background-color: #F3F2F7; }

select.field-input {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23342B7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.field-prefix-wrap { position: relative; }
.field-prefix {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: #5F5F5F; font-weight: 500; pointer-events: none;
}
.field-prefix-wrap .field-input { padding-left: 3.5rem; }

/* Segmented choice (radio pills) */
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .75rem .75rem; text-align: center;
  border: 1.5px solid rgba(52, 43, 124, .28); border-radius: .75rem;
  font-weight: 500; color: #5F5F5F; background: #fff; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.choice > span:hover { border-color: rgba(52, 43, 124, .5); }
.choice input:checked + span { border-color: #342B7C; background: #F3F2F7; color: #342B7C; box-shadow: inset 0 0 0 1px #342B7C; }
.choice input:focus-visible + span { outline: 3px solid #342B7C; outline-offset: 3px; }
.choice-group[aria-invalid="true"] .choice > span { border-color: #342B7C; border-width: 2px; background: #F3F2F7; }

/* ---------- Calendar ---------- */
.cal-day {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; min-height: 2.75rem;
  border-radius: .75rem; font-weight: 600; color: #342B7C;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cal-day:not(:disabled):hover { background: #D8EDF0; }
.cal-day:disabled { color: rgba(95, 95, 95, .45); cursor: not-allowed; font-weight: 400; }
.cal-day.is-selected { background: #342B7C; color: #fff; box-shadow: 0 8px 20px -8px rgba(52, 43, 124, .6); }
.cal-day.is-today::after {
  content: ""; position: absolute; bottom: .35rem; width: .3rem; height: .3rem; border-radius: 999px; background: currentColor;
}
.cal-day.is-limited:not(.is-selected)::before {
  content: ""; position: absolute; top: .4rem; right: .4rem; width: .4rem; height: .4rem; border-radius: 999px; background: #3CA7B6;
}

.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot > span {
  display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem;
  border: 1.5px solid rgba(52, 43, 124, .28); border-radius: .9rem; background: #fff; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.slot > span:hover { border-color: rgba(52, 43, 124, .5); }
.slot input:checked + span { border-color: #342B7C; background: #F3F2F7; box-shadow: inset 0 0 0 1px #342B7C; }
.slot input:focus-visible + span { outline: 3px solid #342B7C; outline-offset: 3px; }
.slot input:disabled + span { cursor: not-allowed; background: #FAFAFA; color: #5F5F5F; border-color: #DFDFDF; border-style: dashed; }

/* ---------- The visitor pass ---------- */
.pass {
  --notch: 1.1rem;
  position: relative;
  border-radius: 1.5rem;
  background: #fff;
  color: #342B7C;
  box-shadow: 0 1px 0 rgba(52, 43, 124, .05), 0 30px 60px -30px rgba(52, 43, 124, .45), 0 12px 24px -16px rgba(52, 43, 124, .25);
  overflow: hidden;
}
.pass-head { background: #342B7C; color: #fff; }
.pass-tear {
  position: relative; height: 0; border-top: 2px dashed #DFDFDF; margin: 0 1.5rem;
}
.pass-tear::before, .pass-tear::after {
  content: ""; position: absolute; top: calc(var(--notch) * -1); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2);
  border-radius: 999px; background: var(--pass-bg, #FAFAFA);
}
.pass-tear::before { left: calc(-1.25rem - var(--notch)); }
.pass-tear::after { right: calc(-1.25rem - var(--notch)); }
.pass-pin { font-variant-numeric: tabular-nums; letter-spacing: .1em; }
@media (min-width: 640px) { .pass-pin { letter-spacing: .18em; } }
.pass-value-empty { color: rgba(95, 95, 95, .6); }

/* Value change flash on the live preview */
.pass [data-pass-field].just-changed { animation: pass-flash .6s ease; }
@keyframes pass-flash { 0% { opacity: .35; } 100% { opacity: 1; } }

/* Hero entrance: the only non-triggered motion on the site.
   No rotation: the pass carries the logo, and the brand kit says never tilt it. */
.hero-pass { animation: pass-in .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
@keyframes pass-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Confirmation stamp */
.stamp-in { animation: stamp .55s cubic-bezier(.2, 1.4, .4, 1) .35s both; }
@keyframes stamp { from { opacity: 0; transform: scale(1.6) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }

/* Loading */
.spinner {
  width: 1.1rem; height: 1.1rem; border-radius: 999px;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #F3F2F7 25%, #FAFAFA 50%, #F3F2F7 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: .75rem; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* FAQ */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease; }

/* Mobile menu */
.menu-panel { transition: opacity .2s ease, transform .2s ease; }
.menu-panel[data-open="false"] { opacity: 0; transform: translateY(-8px); pointer-events: none; }


/* ---------- Campus videos (home) ---------- */
/* Six videos live in the sections they belong to rather than in one gallery.
   Every frame reserves its box up front (a 16:9 block, or the full size of its section for
   backgrounds), so nothing shifts when a player arrives. */

/* Media block: a 16:9 player inside a section's copy column */
.media-frame { position: relative; overflow: hidden; background: #F3F2F7; } /* Indigo 6% while the video loads */
.media-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Background video: fills its section, sits under the content, never takes pointer input */
.bg-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The veil keeps each section's own color and text contrast; the footage reads as texture */
.bg-video::after { content: ""; position: absolute; inset: 0; }
/* Hero: text spans the full width on small screens, so the veil stays even there. On desktop it
   holds behind the copy column and opens up behind and around the pass. Checked against real
   frames: body text keeps 4.5:1 or better on the darkest parts of the footage. */
.bg-video--hero::after { background: rgba(255, 255, 255, .85); }
@media (min-width: 1024px) {
  .bg-video--hero::after { background: linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .86) 44%, rgba(255, 255, 255, .62) 56%, rgba(255, 255, 255, .4) 72%, rgba(255, 255, 255, .3) 100%); }
}
.bg-video--ink::after { background: rgba(52, 43, 124, .84); }   /* ATLAS Indigo */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Print only the pass on the confirmation page */
@media print {
  body { background: #fff !important; }
  .no-print { display: none !important; }
  .pass { box-shadow: none; border: 1px solid #DFDFDF; }
  .pass-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}