/* GradSmiles — custom styles layered on top of Tailwind
   ---------------------------------------------------------
   Only the things Tailwind utility classes don't do neatly live here:
   buttons, hero backgrounds, scroll animations, form states, and a few
   accessibility niceties. Plain-English comments throughout so you can
   follow along. */

:root {
  --brand: #1fa885;
  --brand-700: #136b57;
  --ink: #0A1B2A;
  --honey: #f59e0b;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Respect people who prefer reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; line-height: 1;
  padding: .9rem 1.4rem; border-radius: 9999px; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  border: 1.5px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 12px 26px -12px rgba(31,168,133,.75); }
.btn-primary:hover { background: var(--brand-700); box-shadow: 0 18px 34px -14px rgba(31,168,133,.85); transform: translateY(-1px); }
.btn-honey { background: var(--honey); color: #3a2400; }
.btn-honey:hover { background: #e68f08; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(10,27,42,.16); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-700); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 12px 30px -14px rgba(0,0,0,.45); }
.btn-white:hover { transform: translateY(-1px); }

/* ---------------- Keyboard focus outlines (accessibility) ---------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid #78d4b8; outline-offset: 2px; border-radius: 6px;
}

/* ---------------- Backgrounds ---------------- */
/* Soft mint mesh for light hero sections */
.hero-mesh {
  background:
    radial-gradient(55% 55% at 10% 6%, rgba(31,168,133,.16), transparent 60%),
    radial-gradient(48% 48% at 94% 0%, rgba(245,158,11,.15), transparent 55%),
    radial-gradient(60% 80% at 82% 100%, rgba(31,168,133,.10), transparent 60%),
    #f6faf8;
}
/* Deep navy for dark "trust" sections */
.section-ink {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(31,168,133,.20), transparent 55%),
    radial-gradient(60% 100% at 0% 100%, rgba(245,158,11,.12), transparent 55%),
    #0A1B2A;
}
/* Subtle dot texture */
.dot-grid { background-image: radial-gradient(rgba(10,27,42,.06) 1px, transparent 1px); background-size: 22px 22px; }

/* ---------------- Cards ---------------- */
.card { background: #fff; border: 1px solid rgba(10,27,42,.06); border-radius: 1.25rem; box-shadow: 0 10px 40px -18px rgba(10,27,42,.20); }

/* ---------------- Reveal-on-scroll animation ---------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------- Forms ---------------- */
.field-label { font-weight: 600; font-size: .85rem; color: #12314a; margin-bottom: .35rem; display: block; }
.field-input {
  width: 100%; padding: .8rem 1rem; border-radius: .8rem; border: 1.5px solid rgba(10,27,42,.14);
  background: #fff; font-size: 1rem; color: #0A1B2A; transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input::placeholder { color: #9aa6ad; }
.field-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(31,168,133,.15); outline: none; }
.field-input.invalid { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.12); }
.field-error { color: #c62a2f; font-size: .8rem; margin-top: .3rem; display: none; }
.field-error.show { display: block; }

/* Honeypot: invisible to people, tempting to spam bots. Do not remove. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------------- University marquee ---------------- */
.marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee { display: flex; gap: 3rem; width: max-content; animation: scroll-x 32s linear infinite; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* ---------------- FAQ accordion ---------------- */
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
[data-acc-icon] { transition: transform .25s ease; }

/* Small helper */
.link-underline { position: relative; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--brand); transition: width .2s ease; }
.link-underline:hover::after { width: 100%; }