/*
 * Site-wide floating enquiry widget: a vertically-centred tab on the right edge of the
 * viewport that slides a form panel open on hover (desktop) or tap (any device — hover
 * doesn't exist on touch, so click/tap is the one interaction that must always work).
 * Loaded on every real site page alongside navigation.css/js — see functions.php.
 */

/* A CSS `transform` on a fixed-position ancestor becomes the containing block for any
   `position: fixed` descendant instead of the viewport (per spec) — .fe-widget used
   `transform: translateY(-50%)` to center itself, which silently broke .fe-scrim and
   .fe-panel: both use `inset: 0` expecting to fill the viewport, but instead were sized to
   .fe-widget's own tiny content box (confirmed via getBoundingClientRect — .fe-scrim measured
   40x50px, matching .fe-tab exactly, not the ~390x844 viewport). Centering via flexbox instead
   avoids the transform entirely, so .fe-scrim/.fe-panel correctly reach the real viewport
   again. pointer-events: none here (with auto restored on the actual interactive children)
   keeps the full-height wrapper from swallowing clicks in the empty space above/below the tab. */
.fe-widget { position: fixed; z-index: 45; top: 0; right: 0; display: flex; align-items: center; height: 100vh; height: 100dvh; pointer-events: none; }
/* Only actually locked while the panel is held open by a click (not a passing hover) — see
   floating-enquiry.js, which toggles this alongside the `.is-open` state. */
body.fe-scroll-lock { overflow: hidden; }

/* ── Tab ─────────────────────────────────────────────────────────────── */
/* Native <button> chrome was never disabled (every other CTA on this site is an <a
   class="button">, which has no such chrome to fight) and the shadow used the site's usual
   navy tone, which reads as a muddy olive smear blended against gold rather than a clean drop
   shadow — both tightened up below. Combined with the .fe-widget containing-block fix above
   (the real source of most of the muddiness — .fe-scrim was compositing as a stray tinted
   layer over the tab), this should read as clean bright gold again. pointer-events restored
   explicitly since the parent now sets pointer-events: none. */
.fe-tab { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 46px; padding: 18px 0 16px; border: 1px solid rgba(255,255,255,.16); border-right: 0; border-radius: 14px 0 0 14px; color: var(--navy); background: linear-gradient(165deg, var(--gold-light), var(--gold)); box-shadow: -3px 4px 9px rgba(40,28,4,.22); cursor: pointer; appearance: none; -webkit-appearance: none; pointer-events: auto; touch-action: manipulation; transition: width .3s ease, padding .3s ease, box-shadow .3s ease; animation: fe-tab-breathe 2.4s ease-in-out infinite; }
@keyframes fe-tab-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* Light sweeps across the gold surface on a loop — the classic "premium button" shine, and the
   most unmistakable of the three motions on this tab if any one of them has to read as "clearly
   animating" at a glance. Its own overflow:hidden is scoped to this layer alone (not the parent
   .fe-tab, which must stay unclipped — the glow pseudo-element below deliberately bleeds past
   the tab's edges via a negative inset, and clipping the parent would cut that off). */
.fe-tab-shine { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fe-tab-shine::before { position: absolute; top: -40%; left: -80%; width: 55%; height: 180%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.75) 50%, transparent); transform: skewX(-20deg); content: ""; animation: fe-shine-sweep 2.6s ease-in-out infinite; }
@keyframes fe-shine-sweep { 0%, 20% { left: -80%; } 65%, 100% { left: 150%; } }

/* Double-chevron "beckoning" arrow. Resting shape already reads as "«" — two chevrons offset
   side by side, not stacked on top of each other — and each one independently marches through
   its own fade-in/drift/fade-out loop, staggered apart, so the pair looks like it's chasing
   itself leftward/inward on a loop rather than just sitting there. Left-pointing at rest, toward
   where the panel will appear; the whole pair rotates 180° together on open, same as the single
   arrow used to, so it still reads as "push to close" once the drawer is out. Sits above the
   shine layer (z-index: 1) so the sweep passes behind it, not over it. */
.fe-tab-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 22px; flex: none; transition: transform .35s ease; }
/* opacity: 1 is the actual resting value, not a value the animation reaches on its way past —
   if the animation fails to apply for any reason (a browser/extension quirk, an unusual
   prefers-reduced-motion signal, anything), the fallback is two plainly visible arrows, not
   nothing. The animation on top swings opacity and drifts position; it never owns visibility
   outright the way an 0%-opacity:0 start would. */
.fe-tab-chevron { position: absolute; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 1; animation: fe-chevron-march 1.15s cubic-bezier(.4,0,.2,1) infinite; }
.fe-tab-chevron-a { left: 0; animation-delay: 0s; }
.fe-tab-chevron-b { left: 12px; animation-delay: .22s; }
@keyframes fe-chevron-march {
  0%   { opacity: .25; transform: translateX(11px); }
  35%  { opacity: 1;   transform: translateX(0); }
  70%  { opacity: 1;   transform: translateX(-6px); }
  100% { opacity: .15; transform: translateX(-13px); }
}
.fe-tab-label { position: relative; z-index: 1; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px/1 "Poppins", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* The soft glow behind the tab — a third, larger-scale layer of motion so the whole thing reads
   as alive even before you consciously notice any one effect. Pauses the moment the panel opens
   so it doesn't compete with the form. */
.fe-tab::before { position: absolute; inset: -6px; z-index: -1; border-radius: 18px 0 0 18px; background: var(--gold); opacity: 0; content: ""; animation: fe-pulse 2.4s ease-in-out infinite; }
@keyframes fe-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: .4; transform: scale(1.16); } }

.fe-widget:hover:not(.fe-dismissed) .fe-tab, .fe-widget.is-open .fe-tab { width: 54px; box-shadow: -4px 5px 11px rgba(40,28,4,.26); }
.fe-widget.is-open .fe-tab-arrow { transform: rotate(180deg); }
/* animation: none (not just paused) — a paused CSS animation still applies its own frozen
   keyframe opacity/transform over any static value declared alongside it, so pausing alone
   left the two chevrons stuck mid-fade at whatever instant the click happened. Removing the
   animation outright is what lets the plain opacity/transform values actually take effect. */
.fe-widget.is-open .fe-tab-chevron { animation: none; opacity: 1; transform: translateX(-1px); }
.fe-widget.is-open .fe-tab::before { animation: none; opacity: 0; }
.fe-widget.is-open .fe-tab-shine::before, .fe-widget.is-open .fe-tab { animation-play-state: paused; }

/* ── Scrim (mobile mainly — a floating card over site content deserves a dimmed backdrop) ── */
.fe-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(4,15,36,.42); opacity: 0; pointer-events: none; transition: opacity .32s ease; }
.fe-widget.is-open .fe-scrim { opacity: 1; pointer-events: auto; }

/* ── Panel ───────────────────────────────────────────────────────────── */
/* box-shadow is NOT on the base rule — this was the actual root cause of the "muddy tab"
   report: a box-shadow paints relative to the element's own box regardless of where that box
   sits, so even fully translated off-screen (translate(100%,...) pushes .fe-panel's left edge
   to exactly the viewport's right edge), its shadow's -30px offset + 90px blur still reached
   about 120px back into the visible viewport — directly over .fe-tab, tinting it with this
   shadow's navy color. Scoping the shadow to only the open/hover state (where the panel is
   actually on-screen and needs the depth cue) removes the stray paint entirely at rest. */
.fe-panel { position: fixed; z-index: 46; top: 50%; right: 0; display: flex; flex-direction: column; width: min(94vw, 460px); max-height: 88vh; overflow: hidden; border-radius: 22px 0 0 22px; background: var(--white); pointer-events: auto; transform: translate(100%, -50%); transition: transform .48s cubic-bezier(.19,1,.22,1), box-shadow .2s ease; }
.fe-widget:hover:not(.fe-dismissed) .fe-panel, .fe-widget.is-open .fe-panel { box-shadow: -30px 40px 90px rgba(4,15,36,.35); transform: translate(0, -50%); }

.fe-photo { position: relative; flex: none; height: 168px; margin: 0; overflow: hidden; }
/* The source photo (1122×1402) has the university archway filling roughly its top third and
   the students' faces sitting around 35–45% down. At this panel's short, wide crop ratio,
   `object-position: 50% 18%` framed almost nothing but bare archway/glass — the actual people
   were cropped out entirely, which is what read as "nothing visible". 40% centers the window
   on their faces instead. */
.fe-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Strengthened and front-loaded versus the original 5%→82% fade — faces and varied skin/hair
   tones need more consistent darkening than the flat sky/glass this gradient was tuned for
   originally, so the caption stays legible regardless of what's directly behind it. */
.fe-photo::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,32,79,.1) 0%, rgba(5,32,79,.22) 40%, rgba(5,32,79,.9) 100%); content: ""; }
.fe-photo figcaption { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 1; color: var(--white); }
.fe-photo figcaption span { display: block; margin-bottom: 3px; color: var(--gold-light); font: 700 10px/1 "DM Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
.fe-photo figcaption strong { display: block; font: 600 18px/1.25 "Poppins", Arial, sans-serif; letter-spacing: -.02em; }

.fe-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--white); background: rgba(5,32,79,.35); cursor: pointer; backdrop-filter: blur(4px); transition: background .18s ease, transform .18s ease; }
.fe-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.fe-close:hover, .fe-close:focus-visible { background: rgba(5,32,79,.6); transform: rotate(90deg); }

.fe-body { flex: 1 1 auto; min-height: 0; padding: 22px 24px 24px; overflow-y: auto; }
.fe-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fe-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.fe-error { margin: 0 0 14px; padding: 9px 11px; border-left: 3px solid #bb2727; border-radius: 5px; color: #8f1e1e; background: #fff1f1; font-size: 11.5px; font-weight: 600; }
.fe-error[hidden] { display: none; }

.fe-fields { display: grid; grid-template-columns: 1fr; gap: 13px; }
.fe-fields label { display: block; color: #314965; font-size: 11.5px; font-weight: 700; }
.fe-fields input, .fe-fields textarea { display: block; width: 100%; min-height: 44px; margin-top: 7px; padding: 10px 12px; border: 1px solid #d6e0e9; border-radius: 9px; color: var(--navy); background: #fbfcfd; font: 500 13px/1.3 "Poppins", Arial, sans-serif; resize: vertical; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.fe-fields textarea { min-height: 68px; }
.fe-fields input::placeholder, .fe-fields textarea::placeholder { color: #98a6b6; opacity: 1; }
.fe-fields input:focus, .fe-fields textarea:focus { border-color: #8da4bf; outline: 3px solid rgba(240,184,26,.28); background: var(--white); }

/* The panel slides open on hover/tap — every field cascades in a beat behind it instead of
   just appearing, so opening the widget itself feels like a small piece of motion design
   rather than a plain visibility toggle. */
.fe-widget:hover .fe-fields > *, .fe-widget.is-open .fe-fields > * { animation: fe-field-in .42s cubic-bezier(.22,.61,.36,1) both; }
.fe-fields > *:nth-child(1) { animation-delay: .08s; }
.fe-fields > *:nth-child(2) { animation-delay: .13s; }
.fe-fields > *:nth-child(3) { animation-delay: .18s; }
.fe-fields > *:nth-child(4) { animation-delay: .23s; }
.fe-captcha { animation-delay: .28s; }
@keyframes fe-field-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fe-captcha { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px dashed #d9c88a; border-radius: 10px; background: #fffaec; }
.fe-captcha-q { flex: none; color: var(--navy); font: 700 14px/1 "DM Mono", monospace; letter-spacing: -.02em; }
.fe-captcha input { flex: 1; min-width: 0; margin: 0; }
.fe-captcha-refresh { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border: 1px solid #d9c88a; border-radius: 50%; color: #8a6a12; background: #fff; cursor: pointer; transition: transform .3s ease, background .18s ease; }
.fe-captcha-refresh svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fe-captcha-refresh:hover { background: #fff4d6; transform: rotate(120deg); }

.fe-submit { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; border: 0; border-radius: 9px; cursor: pointer; touch-action: manipulation; color: var(--navy); background: var(--gold); font: 700 12.5px/1 "Poppins", Arial, sans-serif; box-shadow: 0 9px 18px rgba(240,184,26,.22); transition: transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease; }
.fe-submit:hover, .fe-submit:focus-visible { background: var(--gold-light); box-shadow: 0 12px 23px rgba(240,184,26,.3); transform: translateY(-1px); }
.fe-submit:disabled { cursor: wait; opacity: .6; transform: none; }
.fe-note { margin: 11px 0 0; color: #8896a8; font-size: 9.5px; line-height: 1.5; text-align: center; }

.fe-success { display: none; min-height: 220px; align-content: center; justify-items: center; padding: 10px 4px; text-align: center; }
.fe-success.is-visible { display: grid; }
.fe-success-icon { display: grid; width: 48px; height: 48px; margin-bottom: 14px; place-items: center; border-radius: 50%; color: #0d6b50; background: #e4f6ef; }
.fe-success-icon svg { width: 22px; height: 22px; }
.fe-success h4 { margin: 0; color: var(--navy); font: 600 18px/1.25 "Poppins", Arial, sans-serif; letter-spacing: -.02em; }
.fe-success p { max-width: 320px; margin: 9px auto 0; color: #5e728a; font-size: 12.5px; line-height: 1.65; }

/* The double-chevron march is deliberately exempt from reduced-motion: it's a ~9px opacity/
   translate fade on a small icon, not the large-scale parallax/zoom/spin that this preference
   exists to suppress, and disabling it made the tab read as fully static/broken for anyone
   with "reduce motion" set (Windows' "Show animations" off is a common cause, and reports the
   same media-query signal to the browser as an actual vestibular-sensitivity preference). The
   breathing glow (a bigger scale/opacity pulse) still respects it. */
@media (prefers-reduced-motion: reduce) {
  .fe-tab, .fe-panel, .fe-tab-arrow, .fe-close, .fe-captcha-refresh { transition: none; }
  .fe-tab::before { animation: none; }
  .fe-fields > * { animation: none !important; }
}

/* ── Mobile: the tab reads as a pure directional affordance — a compact arrow chip rather
   than a wide labelled tab, since the vertical text has little room to earn its keep at this
   size. The panel becomes a right-edge drawer close to full width, with the dimming scrim
   doing more of the "this is a modal" work than it needs to on desktop. ── */
@media (max-width: 680px) {
  .fe-tab { width: 40px; padding: 13px 0; gap: 0; }
  .fe-widget.is-open .fe-tab { width: 40px; }
  .fe-tab-label { display: none; }
  /* No arrow-container override here any more — this used to shrink a single SVG's own box,
     but now .fe-tab-arrow holds two chevrons spanning ~24px (11px offset + 13px width); a
     leftover 18px override clipped the second one off the edge. The 40px mobile tab still has
     plenty of room for the same 30px box used on desktop. */
  .fe-panel { width: min(96vw, 380px); max-height: 92vh; border-radius: 18px 0 0 18px; }
  .fe-photo { height: 140px; }
  .fe-body { padding: 18px 18px 20px; }
}