/* ============================================================
   New-endodontists recruiting page (WP page 1227): presentation-only.
   All rules scoped to .page-id-1227 so nothing leaks to other pages.
   Native .mfe-* components untouched; this only ADDS on top.
   Decouple-safe: no dependency on mfe-core or functions.php.

   Loaded by inc/enqueue.php, which conditionally enqueues this file on
   is_page(1227). Hand-authored + git-tracked (lives in assets/, NOT the
   gitignored assets/build/), so it ships with a deploy without a build step.
   The .page-id-1227 scope and the is_page(1227) enqueue check share one anchor:
   they apply together, or (if the page ever changes ID) degrade to the native
   .mfe-* components together. A WP Engine full-site migration preserves post
   IDs; if the ID ever DID change, update both the enqueue check and this scope
   (upgrade path: switch to a slug-based body_class).

   Motion contract: EVERY animation here is gated on
   (prefers-reduced-motion: no-preference) and additionally disabled
   under the theme's a11y toggle html.mfe-a11y-no-motion. If motion is
   off (or JS/CSS anim never runs) all content rests at its final,
   fully-visible state. Nothing can get stuck hidden.
   ============================================================ */

/* ---------- 3x2 pillar grid rebalance (was 4+2) ---------- */
.page-id-1227 .mfe-careers__culture-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:960px){.page-id-1227 .mfe-careers__culture-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.page-id-1227 .mfe-careers__culture-grid{grid-template-columns:1fr!important}}

/* ============================================================
   UPGRADE A · BOLDER, TYPE-LED HERO
   Reference direction: Robinhood/LottieFiles/21st.dev, where the TYPE is
   the wow. We keep the theme's hero photo + blue scrim + slow zoom,
   and go bigger + tighter + heavier on the H1, then layer a restrained
   blur-in entrance and ONE animated accent (a slow-drifting dot grid).
   ============================================================ */

/* Enlarge + tighten the H1 (theme default is weight 400, clamp 2–3.25rem). */
.page-id-1227 .mfe-pro-sub-hero__title{
  font-weight:800;
  letter-spacing:-.028em;
  font-size:clamp(2.5rem,6.2vw,4.4rem);
  line-height:1.03;
  max-width:18ch;
  text-wrap:balance;
}
/* Eyebrow a touch stronger so the stack reads as a confident display block. */
.page-id-1227 .mfe-pro-sub-hero__eyebrow{
  letter-spacing:.22em;
  color:rgba(255,255,255,.86);
}
/* Slightly wider inner so the bigger type has room to breathe. */
.page-id-1227 .mfe-pro-sub-hero__inner{max-width:960px}
.page-id-1227 .mfe-pro-sub-hero__sub{max-width:64ch;font-size:clamp(1.05rem,1.5vw,1.2rem)}

/* Hero CTA row (native white-pill component reused). */
.page-id-1227 .mfe-pro-sub-hero__actions{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.6rem;
}
.page-id-1227 .mfe-pro-sub-hero__cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--wp--preset--font-family--dm-sans,'DM Sans',sans-serif);
  font-weight:700;font-size:.95rem;line-height:1;text-decoration:none;
  padding:.85rem 1.5rem;border-radius:40px;
  transition:transform 220ms cubic-bezier(.33,1,.68,1),box-shadow 220ms cubic-bezier(.33,1,.68,1);
}
.page-id-1227 .mfe-pro-sub-hero__cta--primary{
  background:#fff;color:var(--mfe-navy,#0A3D8A);
  box-shadow:0 10px 26px rgba(3,20,54,.28);
}
.page-id-1227 .mfe-pro-sub-hero__cta--ghost{
  background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.55);
}
.page-id-1227 .mfe-pro-sub-hero__cta:focus-visible{
  outline:3px solid #fff;outline-offset:3px;
}
@media(prefers-reduced-motion:no-preference){
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-pro-sub-hero__cta--primary:hover{
    transform:translateY(-2px);box-shadow:0 16px 34px rgba(3,20,54,.36);
  }
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-pro-sub-hero__cta--ghost:hover{
    background:rgba(255,255,255,.18);transform:translateY(-2px);
  }
}

/* --- Animated accent: slow-drifting dot grid over the scrim (subtle) --- */
.page-id-1227 .mfe-res-hero-dots{
  position:absolute;inset:-40% -20%;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.3px,transparent 1.4px);
  background-size:26px 26px;
  /* soft radial mask so the grid glows near the type and fades at the edges */
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%,#000 0%,rgba(0,0,0,.35) 55%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 42%,#000 0%,rgba(0,0,0,.35) 55%,transparent 78%);
  opacity:.9;
}
@media(prefers-reduced-motion:no-preference){
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-res-hero-dots{
    animation:mfe-res-dot-drift 44s linear infinite;
  }
}
@keyframes mfe-res-dot-drift{
  from{background-position:0 0}
  to{background-position:260px 130px}
}

/* --- Blur-in entrance for the hero stack (layers on top of the theme's
       GSAP y/opacity stagger; GSAP clears transform/opacity/visibility but
       NOT filter, so the two compose into a single richer reveal). Scoped
       to the hero only, so a JS failure can never hide body content. --- */
@media(prefers-reduced-motion:no-preference){
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-pro-sub-hero__inner [data-stagger]{
    animation:mfe-res-blur-in 900ms cubic-bezier(.22,1,.36,1) both;
  }
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-pro-sub-hero__inner [data-stagger]:nth-child(1){animation-delay:80ms}
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-pro-sub-hero__inner [data-stagger]:nth-child(2){animation-delay:200ms}
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-pro-sub-hero__inner [data-stagger]:nth-child(3){animation-delay:340ms}
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-pro-sub-hero__inner [data-stagger]:nth-child(4){animation-delay:480ms}
}
@keyframes mfe-res-blur-in{
  from{filter:blur(14px);opacity:0;transform:translateY(14px) scale(.985)}
  60%{opacity:1}
  to{filter:blur(0);opacity:1;transform:none}
}

/* ============================================================
   UPGRADE B · EVENT CALLOUT BANNER (swappable per event)
   Slim, on-brand, clearly isolated. Wired to an ACF toggle next.
   ============================================================ */
.page-id-1227 .mfe-res-eventbar{
  background:var(--mfe-sky,#E7F3FF);
  border-bottom:1px solid var(--mfe-border,#D0DCF0);
}
.page-id-1227 .mfe-res-eventbar__inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.85rem var(--mfe-gutter,1rem);
  font-family:var(--wp--preset--font-family--inter,'Inter',sans-serif);
}
.page-id-1227 .mfe-res-eventbar__badge{
  display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
  font-family:var(--wp--preset--font-family--dm-sans,'DM Sans',sans-serif);
  font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--mfe-accent,#1088FF);
  padding:.32rem .6rem;border-radius:999px;
}
.page-id-1227 .mfe-res-eventbar__badge svg{width:.9rem;height:.9rem}
.page-id-1227 .mfe-res-eventbar__text{
  font-size:.92rem;color:var(--mfe-navy,#0A3D8A);font-weight:600;margin:0;
}
.page-id-1227 .mfe-res-eventbar__text span{color:var(--mfe-subtle,#545555);font-weight:500}
.page-id-1227 .mfe-res-eventbar__link{
  margin-left:auto;flex-shrink:0;
  font-family:var(--wp--preset--font-family--dm-sans,'DM Sans',sans-serif);
  font-weight:700;font-size:.85rem;color:var(--mfe-accent-text,#0B59A8);
  text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;
  transition:gap 200ms cubic-bezier(.33,1,.68,1);
}
.page-id-1227 .mfe-res-eventbar__link:focus-visible{outline:2px solid var(--mfe-accent,#1088FF);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:no-preference){
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-res-eventbar__link:hover{gap:.6rem}
}
@media(max-width:640px){
  .page-id-1227 .mfe-res-eventbar__link{margin-left:0}
}

/* ============================================================
   UPGRADE C · Pillar-card icons + deeper hover-lift
   ============================================================ */
.page-id-1227 .mfe-careers__culture-card{position:relative}
.page-id-1227 .mfe-res-pillar-icon{
  width:2.75rem;height:2.75rem;border-radius:.7rem;
  background:rgba(16,136,255,.08);border:1px solid rgba(16,136,255,.20);
  color:var(--mfe-accent-text,#0B59A8);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;flex-shrink:0;
  transition:background 320ms cubic-bezier(.33,1,.68,1),
             border-color 320ms cubic-bezier(.33,1,.68,1);
}
.page-id-1227 .mfe-res-pillar-icon svg{width:1.5rem;height:1.5rem;display:block}
/* Deepen the shared card lift on these pillars specifically. */
@media(prefers-reduced-motion:no-preference){
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-careers__culture-card{
    transition:transform 320ms cubic-bezier(.33,1,.68,1),box-shadow 320ms cubic-bezier(.33,1,.68,1);
  }
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-careers__culture-card:hover,
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-careers__culture-card:focus-within{
    transform:translateY(-4px);
    box-shadow:0 16px 36px rgba(10,61,138,.11),0 0 0 4px rgba(16,136,255,.06);
  }
}
.page-id-1227 .mfe-careers__culture-card:hover .mfe-res-pillar-icon,
.page-id-1227 .mfe-careers__culture-card:focus-within .mfe-res-pillar-icon{
  background:rgba(16,136,255,.13);border-color:rgba(16,136,255,.38);
}
.page-id-1227 .mfe-careers__culture-card:focus-visible{
  outline:3px solid var(--mfe-accent,#1088FF);outline-offset:3px;
}

/* ============================================================
   UPGRADE D · Visual "your path" timeline
   ============================================================ */
.page-id-1227 .mfe-res-path{position:relative;margin:.5rem 0 1.25rem}
.page-id-1227 .mfe-res-path__track{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;
}
/* connector rail behind the nodes (desktop) */
.page-id-1227 .mfe-res-path__rail{
  position:absolute;top:22px;left:12.5%;right:12.5%;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--mfe-navy,#0A3D8A) 0%,var(--mfe-blue,#0B59A8) 50%,var(--mfe-accent,#1088FF) 100%);
  z-index:0;
}
.page-id-1227 .mfe-res-path__rail::after{
  content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:11px solid var(--mfe-accent,#1088FF);
}
.page-id-1227 .mfe-res-step{position:relative;z-index:1;padding:0 .75rem;text-align:center}
.page-id-1227 .mfe-res-step__node{
  width:46px;height:46px;border-radius:50%;margin:0 auto .85rem;
  background:#fff;border:4px solid var(--mfe-accent,#1088FF);
  box-shadow:0 0 0 6px var(--mfe-gray,#F7F7F7);
  display:flex;align-items:center;justify-content:center;
  color:var(--mfe-accent-text,#0B59A8);
  transition:transform 260ms cubic-bezier(.33,1,.68,1);
}
.page-id-1227 .mfe-res-step:nth-child(2) .mfe-res-step__node{border-color:var(--mfe-navy,#0A3D8A)}
.page-id-1227 .mfe-res-step:nth-child(3) .mfe-res-step__node{border-color:var(--mfe-blue,#0B59A8)}
.page-id-1227 .mfe-res-step__node svg{width:1.35rem;height:1.35rem;display:block}
@media(prefers-reduced-motion:no-preference){
  html:not(.mfe-a11y-no-motion) .page-id-1227 .mfe-res-step:hover .mfe-res-step__node{transform:scale(1.08)}
}
.page-id-1227 .mfe-res-step__label{
  font-family:var(--wp--preset--font-family--dm-sans,'DM Sans',sans-serif);
  font-weight:700;font-size:1rem;line-height:1.2;color:var(--mfe-navy,#0A3D8A);
  margin:0 0 .35rem;
}
.page-id-1227 .mfe-res-step__desc{
  font-family:var(--wp--preset--font-family--inter,'Inter',sans-serif);
  font-size:.86rem;line-height:1.5;color:var(--mfe-subtle,#545555);margin:0;
}
/* vertical on mobile */
@media(max-width:720px){
  .page-id-1227 .mfe-res-path__track{grid-template-columns:1fr;gap:0}
  .page-id-1227 .mfe-res-path__rail{display:none}
  .page-id-1227 .mfe-res-step{
    text-align:left;display:grid;grid-template-columns:auto 1fr;gap:0 1rem;
    padding:0 0 1.5rem 0;position:relative;
  }
  .page-id-1227 .mfe-res-step:not(:last-child)::before{
    content:"";position:absolute;left:22px;top:46px;bottom:0;width:3px;
    background:linear-gradient(180deg,var(--mfe-accent,#1088FF),rgba(16,136,255,.35));
  }
  .page-id-1227 .mfe-res-step__node{margin:0;grid-row:span 2}
  .page-id-1227 .mfe-res-step__label{align-self:center;margin:0}
  .page-id-1227 .mfe-res-step__desc{grid-column:2}
}

/* ============================================================
   UPGRADE E · "Where you could practice": real MFE map framing.
   The map itself is the theme's native .mfe-locations-map component
   (embedded via the mfe/locations-map block pattern below). This
   just gives it a section intro + trims the component's own header
   (we supply our own recruiting-flavored heading).
   ============================================================ */
.page-id-1227 .mfe-res-map-intro{margin-bottom:0}
/* Our recruiting-framed H2 ("Where you could practice") sits directly above the
   map, so the map's own patient-facing header ("Find care near you / Our offices
   across Central Florida") would double up. Hide just that header on THIS page.
   body.page-id-1227 wraps ALL page content, including the map pattern (a top-level
   sibling of our intro section), so this reaches it. The component is untouched. */
.page-id-1227 .mfe-locations-map__header{display:none}
/* Pull the map tight under our intro line and drop the homepage top gap the
   pattern picks up from its .mfe-home-locations modifier on this page. */
.page-id-1227 .mfe-res-map{padding-bottom:.5rem}
.page-id-1227 .mfe-locations-map{padding-top:.5rem;margin-top:0}

/* ============================================================
   UPGRADE F · Text-forward "environment" note (replaces AI photo).
   A calm, on-brand fact strip instead of a fake operatory render.
   ============================================================ */
.page-id-1227 .mfe-res-note{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--mfe-sky,#E7F3FF);
  border:1px solid var(--mfe-border,#D0DCF0);
  border-radius:1rem;padding:1.25rem 1.35rem;margin:1.5rem 0 0;
}
.page-id-1227 .mfe-res-note__icon{
  flex-shrink:0;width:2.4rem;height:2.4rem;border-radius:.6rem;
  background:#fff;border:1px solid rgba(16,136,255,.25);
  color:var(--mfe-accent-text,#0B59A8);
  display:flex;align-items:center;justify-content:center;
}
.page-id-1227 .mfe-res-note__icon svg{width:1.3rem;height:1.3rem}
.page-id-1227 .mfe-res-note__text{
  font-family:var(--wp--preset--font-family--inter,'Inter',sans-serif);
  font-size:.95rem;line-height:1.55;color:var(--mfe-navy,#0A3D8A);margin:0;
}

/* ---------------------------------------------------------------------------
   Resident Interest form (Fluent Forms id 3) — brand-card treatment.
   Fluent Forms ships essentially unstyled; wrap it in an elevated white card
   that matches the page's cards, with brand-blue focus and a full-width
   #1088FF submit. Scoped to page 1227 so it never leaks to other Fluent Forms
   elsewhere on the site.
--------------------------------------------------------------------------- */
.page-id-1227 .mfe-res-form-lead{
  font-family:var(--wp--preset--font-family--dm-sans,'DM Sans',sans-serif);
  font-weight:700;font-size:1.1rem;letter-spacing:-.01em;
  color:var(--mfe-navy,#0A3D8A);margin:2.6rem 0 1.1rem;
}
.page-id-1227 .frm-fluent-form{
  background:#fff;border:1px solid var(--mfe-border,#D0DCF0);
  border-radius:1rem;padding:1.9rem 1.75rem;
  box-shadow:0 10px 30px rgba(3,20,54,.06);
}
.page-id-1227 .frm-fluent-form .ff-el-group{margin-bottom:1.15rem}
.page-id-1227 .frm-fluent-form .ff-el-input--label label{
  font-family:var(--wp--preset--font-family--dm-sans,'DM Sans',sans-serif);
  font-weight:600;font-size:.92rem;color:var(--mfe-text,#1F1F1F);
  margin-bottom:.4rem;display:inline-block;
}
.page-id-1227 .frm-fluent-form .ff-el-form-control{
  width:100%;border:1px solid var(--mfe-border,#D0DCF0);border-radius:.6rem;
  padding:.72rem .9rem;font-size:.98rem;line-height:1.4;
  font-family:var(--wp--preset--font-family--inter,'Inter',sans-serif);
  color:#000;background:#fff;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
.page-id-1227 .frm-fluent-form .ff-el-form-control::placeholder{color:#828282}
.page-id-1227 .frm-fluent-form .ff-el-form-control:focus{
  outline:none;border-color:var(--mfe-accent,#1088FF);
  box-shadow:0 0 0 3px rgba(16,136,255,.18);
}
.page-id-1227 .frm-fluent-form select.ff-el-form-control{cursor:pointer}
.page-id-1227 .frm-fluent-form .ff-el-form-check{margin:.2rem 0}
.page-id-1227 .frm-fluent-form .ff-el-form-check label{margin-left:.35rem}
.page-id-1227 .frm-fluent-form .ff-btn-submit{
  width:100%;background:var(--mfe-accent,#1088FF);border:none;border-radius:.6rem;
  padding:.9rem 1.2rem;cursor:pointer;color:#fff;
  font-family:var(--wp--preset--font-family--dm-sans,'DM Sans',sans-serif);
  font-weight:700;font-size:1rem;
  transition:background 160ms ease,transform 160ms ease,box-shadow 160ms ease;
}
.page-id-1227 .frm-fluent-form .ff-btn-submit:hover{
  background:#0E70D6;transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(16,136,255,.28);
}