/* ═══════════════════════════════════════════════════════════════════════════
   SELA — Shared Inquiry Modal + Form styles
   Extracted verbatim from apply.html's #sela-inquire <style> block so the
   bespoke inquiry form + native <dialog> modal can be reused on every page.
   Linked in <head> on every page (paired with assets/js/inquiry-modal.js) so
   apply.html's on-page inline #inquire form never flashes unstyled, and the
   modal injected on all other pages renders on-brand.

   Depends only on the global design tokens already defined on every page
   (--sela-red, --cream, --line, --white, --ink, --body, --muted, --ease-out,
   --t-base, --t-fast, --shadow-lg/md/sm, --font, 'Lora').
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   BESPOKE INQUIRY FORM — hand-built, on-brand, animated. One reusable markup
   (.sela-inquiry-form) rendered twice: inline in #inquire and inside the modal.
   Fields laid out in a calm 2-column grid (single column ≤620px) with a
   staggered entrance and an elegant burgundy focus state. Replaces the two
   cross-origin HubSpot iframes we could not style.
   ═══════════════════════════════════════════════════════════════════════ */
.sela-inquiry-form{position:relative;}

/* 2-column field grid — collapses to a single column on narrow viewports */
.inq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
}
.inq-field{display:flex;flex-direction:column;min-width:0;}
.inq-field.is-full{grid-column:1 / -1;}

/* label above each field — small, wide-tracked, shifts burgundy on focus */
.inq-field label{
  font-family:var(--font);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
  transition:color var(--t-base);
}
.inq-field .req{color:var(--sela-red-light);margin-left:2px;}

/* the field shell — a cream/white input with a hairline that animates to
   burgundy on focus, plus a soft low-alpha burgundy focus ring */
.inq-input{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--white);
  font-family:var(--font);
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
  box-sizing:border-box;
  transition:border-color var(--t-base),box-shadow var(--t-base),background var(--t-base);
  -webkit-appearance:none;appearance:none;
}
/* placeholder — muted charcoal, holds AA contrast (≈4.6:1 on white) */
.inq-input::placeholder{color:#6A6A6A;opacity:1;}
.inq-input:hover{border-color:var(--line-strong);}
.inq-input:focus{
  outline:none;
  border-color:var(--sela-red);
  box-shadow:0 0 0 3px rgba(99,14,21,0.12);
  background:var(--white);
}
/* label goes burgundy while its field is focused (color is not the only cue —
   the border + ring change too, satisfying "never color alone") */
.inq-field:focus-within label{color:var(--sela-red);}

textarea.inq-input{min-height:120px;resize:vertical;line-height:1.55;}
/* type=date sizing parity with text inputs across engines */
input.inq-input[type="date"]{min-height:49px;}
input.inq-input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:0.6;transition:opacity var(--t-fast);}
input.inq-input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1;}

/* invalid state — burgundy hairline + inline message (paired with text, icon-free
   but the message itself carries the meaning, so color is never the only signal) */
.inq-field.has-error .inq-input{border-color:var(--sela-red);box-shadow:0 0 0 3px rgba(99,14,21,0.10);}
.inq-field.has-error label{color:var(--sela-red);}
.inq-err{
  font-family:var(--font);
  font-size:12.5px;
  line-height:1.4;
  color:var(--sela-red);
  margin-top:6px;
  min-height:0;
}

/* honeypot — visually hidden, off-screen, kept out of the a11y tree + tab order */
.inq-hp{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* hairline divider before the full-width "why" textarea — breaks the congestion */
.inq-divide{
  grid-column:1 / -1;
  height:1px;
  background:var(--line);
  margin:clamp(4px,0.6vw,8px) 0 clamp(2px,0.4vw,4px);
}

/* ── chip / pill selectors — optional qualifying questions (program, campus,
   timing, referral). Single-select per group; tactile cream pills that fill
   burgundy when chosen. Their answers are folded into the message on submit. ── */
.inq-chips{gap:0;}
.inq-chips-label{
  font-family:var(--font);
  font-size:12.5px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;
}
.inq-chip-row{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch;}
.inq-chip{
  display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;
  padding:9px 15px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--white);
  font-family:var(--font);
  color:var(--body);
  cursor:pointer;
  line-height:1.15;
  text-align:left;
  transition:border-color var(--t-base),background var(--t-base),color var(--t-base),
             box-shadow var(--t-base),transform var(--t-fast);
}
.inq-chip-t{font-size:14px;font-weight:500;letter-spacing:0.01em;}
.inq-chip-s{font-size:11px;letter-spacing:0.03em;color:var(--muted);transition:color var(--t-base);}
.inq-chip:hover{border-color:var(--sela-red);color:var(--ink);transform:translateY(-1px);}
.inq-chip:focus-visible{outline:none;border-color:var(--sela-red);box-shadow:0 0 0 3px rgba(99,14,21,0.14);}
.inq-chip.is-on{
  background:var(--sela-red);
  border-color:var(--sela-red);
  color:var(--cream);
  box-shadow:0 4px 14px rgba(99,14,21,0.20);
}
.inq-chip.is-on .inq-chip-t{color:var(--cream);}
.inq-chip.is-on .inq-chip-s{color:rgba(250,247,242,0.74);}
.inq-chip.is-on:hover{color:var(--cream);}
@media (prefers-reduced-motion: reduce){ .inq-chip{transition:none;} .inq-chip:hover{transform:none;} }
body.no-motion .inq-chip{transition:none;}
body.no-motion .inq-chip:hover{transform:none;}

/* footer row — submit button + a small reassurance note */
.inq-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:clamp(22px,2.6vw,30px);
}
.inq-submit{position:relative;overflow:hidden;}
.inq-submit .inq-arrow{transition:transform var(--t-base);}
.inq-submit:hover .inq-arrow{transform:translateX(4px);}
.inq-submit[aria-busy="true"]{pointer-events:none;opacity:0.9;}
.inq-submit[aria-busy="true"] .inq-label,.inq-submit[aria-busy="true"] .inq-arrow{opacity:0;}
/* spinner shown while submitting */
.inq-spin{
  position:absolute;top:50%;left:50%;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid rgba(250,247,242,0.35);
  border-top-color:var(--cream);
  border-radius:50%;
  opacity:0;
  animation:inqSpin 0.7s linear infinite;
}
.inq-submit[aria-busy="true"] .inq-spin{opacity:1;}
@keyframes inqSpin{to{transform:rotate(360deg);}}
.inq-note{
  font-family:var(--font);
  font-size:12.5px;
  line-height:1.4;
  color:var(--muted);
  max-width:34ch;
}
/* form-level error (network/server) sits above the footer */
.inq-formerr{
  grid-column:1 / -1;
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.45;
  color:var(--sela-red);
  background:var(--sela-red-bg);
  border:1px solid rgba(99,14,21,0.18);
  border-radius:8px;
  padding:11px 14px;
  margin-top:4px;
  display:none;
}
.sela-inquiry-form.has-formerr .inq-formerr{display:block;}

/* ── entrance stagger ── fields rest at opacity 0 / y:12 and settle into place
   when the form is revealed (inline: on scroll; modal: on open). GSAP drives it
   when present; the CSS fallback below animates via per-field --i delays. ── */
.inq-anim .inq-field,
.inq-anim .inq-divide,
.inq-anim .inq-foot{opacity:0;transform:translateY(12px);}
.inq-anim.is-in .inq-field,
.inq-anim.is-in .inq-divide,
.inq-anim.is-in .inq-foot{
  opacity:1;transform:none;
  transition:opacity 0.55s var(--ease-out),transform 0.55s var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms);
}
/* reduced motion / no-motion: fields are simply present, no transform */
body.no-motion .inq-anim .inq-field,
body.no-motion .inq-anim .inq-divide,
body.no-motion .inq-anim .inq-foot{opacity:1;transform:none;transition:none;}
@media (prefers-reduced-motion: reduce){
  .inq-anim .inq-field,.inq-anim .inq-divide,.inq-anim .inq-foot{opacity:1;transform:none;transition:none;}
}

/* ── success state ── the form fades out and an on-brand confirmation fades in,
   led by a drawn check mark. ── */
.inq-success{
  display:none;
  text-align:center;
  padding:clamp(14px,2vw,24px) 0;
}
.sela-inquiry-form.is-done .inq-fields{display:none;}
.sela-inquiry-form.is-done .inq-success{display:block;animation:inqDone 0.6s var(--ease-out) both;}
@keyframes inqDone{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.inq-check{
  width:56px;height:56px;margin:0 auto 20px;
  border-radius:50%;
  border:1.5px solid rgba(99,14,21,0.28);
  display:grid;place-items:center;
}
.inq-check svg{width:30px;height:30px;overflow:visible;}
.inq-check path{fill:none;stroke:var(--sela-red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.inq-success h3{
  font-family:var(--font);font-weight:400;
  font-size:clamp(23px,2.6vw,29px);line-height:1.1;letter-spacing:-0.02em;
  color:var(--ink);margin:0 0 10px;
}
.inq-success .inq-done-serif{font-family:'Lora',Georgia,serif;font-style:italic;color:var(--sela-red);}
.inq-success p{font-size:15px;line-height:1.55;color:var(--body);margin:0 auto;max-width:40ch;}
/* draw the check when reduced motion allows */
.inq-check path{stroke-dasharray:40;stroke-dashoffset:40;}
.sela-inquiry-form.is-done .inq-check path{animation:inqDraw 0.6s 0.15s var(--ease-out) forwards;}
@keyframes inqDraw{to{stroke-dashoffset:0;}}
body.no-motion .inq-check path{stroke-dashoffset:0;}
body.no-motion .sela-inquiry-form.is-done .inq-check path{animation:none;}
@media (prefers-reduced-motion: reduce){
  .inq-check path{stroke-dashoffset:0;}
  .sela-inquiry-form.is-done .inq-check path{animation:none;}
}

/* single-column collapse — calm on phones */
@media (max-width:620px){
  .inq-grid{grid-template-columns:1fr;}
  .inq-field.is-full{grid-column:auto;}
}

/* ─── Inquiry modal (native <dialog>, top-layer — immune to overflow clipping
   and ScrollSmoother transforms) ─── */
dialog#inquireDialog{
  width:min(780px,calc(100vw - 40px));
  max-width:780px;
  max-height:min(90vh,900px);
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--cream);
  color:var(--body);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
dialog#inquireDialog::backdrop{
  background:rgba(26,26,26,0.52);
  backdrop-filter:blur(2px);
}
/* open/close animation — instant under reduced motion */
dialog#inquireDialog[open]{display:flex;flex-direction:column;animation:inqIn 340ms var(--ease-out);}
dialog#inquireDialog[open]::backdrop{animation:inqFade 340ms var(--ease-out);}
@keyframes inqIn{from{opacity:0;transform:translateY(14px) scale(0.985);}to{opacity:1;transform:none;}}
@keyframes inqFade{from{opacity:0;}to{opacity:1;}}
.inq-scroll{flex:1 1 auto;min-height:0;max-height:min(90vh,900px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.inq-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:26px clamp(22px,4vw,34px) 0;
  background:var(--cream);
}
.inq-head .eyebrow{margin-bottom:0;}
.inq-body{padding:14px clamp(22px,4vw,34px) clamp(26px,4vw,34px);}
.inq-title{
  font-family:var(--font);font-weight:400;
  font-size:clamp(26px,3.4vw,34px);line-height:1.08;letter-spacing:-0.02em;
  color:var(--ink);margin:12px 0 8px;
}
.inq-sub{font-size:15.5px;line-height:1.55;color:var(--body);margin:0 0 22px;max-width:44ch;}
.inq-close{
  flex:none;width:38px;height:38px;margin-top:-2px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background var(--t-base),color var(--t-base),border-color var(--t-base);
}
.inq-close:hover{background:var(--sela-red);border-color:var(--sela-red);color:var(--cream);}
.inq-close svg{width:16px;height:16px;}
@media (prefers-reduced-motion: reduce){
  dialog#inquireDialog[open],
  dialog#inquireDialog[open]::backdrop{animation:none;}
}

/* ─── native HubSpot embed host ───────────────────────────────────────────
   The inquiry form is HubSpot's own embed (invisible reCAPTCHA works only in
   their rendered form). It renders into a same-origin iframe that we skin on
   the JS side (assets/js/inquiry-modal.js injects the brand stylesheet). Here
   we style only the HOST container + the pre-render loading state. ─── */
.inquiry-embed{position:relative;min-height:120px;}
.inquiry-embed .hs-form-iframe{width:100%!important;border:0;display:block;}
/* let HubSpot's own resize drive height; never clip the form */
.inquiry-embed .hbspt-form,.inquiry-embed form{width:100%;}
.inq-embed-loading{
  display:flex;align-items:center;gap:12px;justify-content:center;
  min-height:120px;padding:26px 0;color:var(--body);font-size:14.5px;
}
.inquiry-embed.is-ready .inq-embed-loading{display:none;}
.inq-embed-spin{
  width:20px;height:20px;flex:none;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--sela-red);
  animation:inqSpin .8s linear infinite;
}
.inq-embed-fallback{
  padding:20px;border:1px solid var(--line-strong);border-radius:10px;
  background:#fff;color:var(--ink);font-size:14.5px;line-height:1.6;text-align:center;
}
.inq-embed-fallback a{color:var(--sela-red);font-weight:600;}
body.no-motion .inq-embed-spin{animation:none;}

/* ─── nib cursor-restore ─── the ink-nib cursor (SELA's custom pointer) is
   painted UNDER the top-layer <dialog>, so it vanishes over the inquiry modal.
   Restore the native cursor there so users see exactly where they're clicking.
   Guarded to fine pointers, where the nib is active. ─── */
@media (pointer: fine) {
  body.nib-on #inquireDialog, body.nib-on #inquireDialog *,
  body.nib-on .inquiry-embed, body.nib-on .inquiry-embed * { cursor: auto !important; }
  body.nib-on #inquireDialog a, body.nib-on #inquireDialog button, body.nib-on .inq-close,
  body.nib-on .inquiry-embed a, body.nib-on .inquiry-embed button { cursor: pointer !important; }
}
