/* ============================================================
   Rockwell Health : "Book an Appointment" page styles
   Adds ONLY this page's section styles on top of the shared
   editorial system (../style.css owns tokens, header, footer,
   buttons, .ed-head, .ed-eyebrow, .ed-kicker, .ed-textlink,
   focus states).
   Page sub-prefix: ed-ra-

   Integration intent: the editorial masthead and the Healow Open
   Access scheduler share ONE paper surface, so the widget reads as
   part of the page, not a boxed third-party embed. The scheduler is
   a cross-origin healow.com iframe; its interior (fonts, colours,
   controls) is owned by Healow and cannot be styled from here.

   Spine (light throughout; no navy slab):
     1 · Book  : intro copy + the scheduler in a quiet hairline panel.
     2 · Next  : sand band, three ruled + numbered steps.
   ============================================================ */

/* ============================================================
   1 · Book : masthead and scheduler on one paper surface.
   ============================================================ */
.ed-ra-book{
  position:relative;
  background:var(--paper);
  padding-block:clamp(48px,6.5vw,96px) clamp(40px,5vw,72px);
  overflow:hidden;
}
/* faint navy hairline-arc motif, top-right (pure decoration) */
.ed-ra-book::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-180px; right:-190px; width:520px; height:520px; border-radius:50%;
  border:1px solid var(--line-2);
  -webkit-mask-image:radial-gradient(circle at center, transparent 64%, #000 65%);
          mask-image:radial-gradient(circle at center, transparent 64%, #000 65%);
  opacity:.65;
}
.ed-ra-book-in{ position:relative; z-index:1; }

.ed-ra-book-head{ max-width:60ch; }
.ed-ra-book-head h1{
  margin-top:4px;
  font-size:clamp(2.5rem,4.8vw,4rem);
  line-height:1.02; letter-spacing:-.026em; color:var(--navy);
}
.ed-ra-book-head h1 em{ font-style:italic; font-weight:600; color:var(--red); }
.ed-ra-lead-sub{
  margin-top:20px; max-width:56ch;
  font-size:clamp(1.08rem,1.3vw,1.24rem); line-height:1.62; color:var(--body-2);
}

/* "Prefer to call?" : one compact inline line, not a boxed block */
.ed-ra-inline-call{
  margin-top:22px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
}
.ed-ra-inline-lbl{
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--body-2);
}
.ed-ra-inline-call a{
  font-family:"Spectral",serif; font-weight:600; font-size:1.1rem;
  letter-spacing:-.01em; color:var(--navy); border-radius:var(--r-xs);
  transition:color var(--fast) var(--ease);
}
.ed-ra-inline-call a:hover{ color:var(--red-ink); }
.ed-ra-sep{ color:var(--line-3); }

/* insurance / new-patient reassurance, just above the scheduler */
.ed-ra-assure{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:clamp(20px,2.4vw,30px); max-width:70ch;
  font-size:.95rem; line-height:1.56; color:var(--body-2);
}
.ed-ra-assure svg{ width:19px; height:19px; flex:none; color:var(--red-ink); margin-top:.1em; }
.ed-ra-assure a{
  color:var(--navy); font-weight:600;
  border-bottom:1px solid var(--line-2); border-radius:var(--r-xs);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.ed-ra-assure a:hover{ color:var(--red-ink); border-color:var(--red); }

/* the scheduler panel : a quiet framed surface (hairline + faint
   lift), NOT a floating card, so the widget feels set into the page */
.ed-ra-panel{
  margin-top:clamp(26px,3vw,40px);
  /* cap the width: Healow flips to a broken 2-column carousel at >=992px,
     so keep the widget under that breakpoint where it lays out cleanly as
     a single column. Left-aligned to the masthead. */
  max-width:940px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:clamp(8px,1vw,14px);
}
.ed-ra-widget{
  position:relative;
  height:clamp(620px,74vh,800px);
  border-radius:var(--r);
  overflow:hidden;               /* clip the iframe corners to the panel */
}
#healow-root{ position:relative; z-index:1; }
#healow-oa-practice-widget{ position:relative; z-index:1; height:100%; }
.healow-oa-practice-widget iframe{
  width:100% !important; height:100% !important; border:0; display:block;
}

/* our loading state, hidden the moment Healow injects (no double loader) */
.ed-ra-widget.is-loaded .ed-ra-widget-loading{ opacity:0; visibility:hidden; }

.ed-ra-widget-loading{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; color:var(--body-2); text-align:center;
  transition:opacity .4s ease, visibility .4s ease;
}
.ed-ra-widget-loading .t{
  font-family:"Figtree",sans-serif; font-size:.95rem; letter-spacing:.02em;
}
.ed-ra-spinner{
  width:34px; height:34px; border-radius:50%;
  border:2.5px solid var(--line-2); border-top-color:var(--red);
  animation:ed-ra-spin .9s linear infinite;
}
@keyframes ed-ra-spin{ to{ transform:rotate(360deg); } }

/* secure / fallback caption beneath the panel */
.ed-ra-sched-help{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:clamp(14px,1.6vw,20px);
  font-size:.9rem; line-height:1.56; color:var(--body-2); max-width:84ch;
}
.ed-ra-sched-help svg{ width:18px; height:18px; flex:none; color:var(--red-ink); margin-top:.1em; }
.ed-ra-sched-help a{
  color:var(--navy); font-weight:600;
  border-bottom:1px solid var(--line-2); border-radius:var(--r-xs);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.ed-ra-sched-help a:hover{ color:var(--red-ink); border-color:var(--red); }
.ed-ra-sched-help strong{ color:var(--navy); font-weight:600; }

/* ============================================================
   2 · How it works : sand band, three ruled + numbered steps in
   the editorial style (navy serif folio numeral + short red rule).
   ============================================================ */
.ed-ra-next{
  padding-block:var(--sec);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ed-ra-steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  border-top:1px solid var(--line-2);
}
.ed-ra-step{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(30px,3vw,44px) clamp(20px,1.9vw,32px) clamp(8px,1vw,14px);
}
.ed-ra-step:first-child{ padding-inline-start:0; }
.ed-ra-step:last-child{ padding-inline-end:0; }
.ed-ra-step + .ed-ra-step{ border-inline-start:1px solid var(--line); }
.ed-ra-step-no{
  font-family:"Spectral",serif; font-style:italic; font-weight:700;
  font-size:clamp(2.6rem,4vw,3.4rem); line-height:1;
  letter-spacing:-.02em; color:var(--navy);
  position:relative; padding-bottom:clamp(14px,1.6vw,18px);
  margin-bottom:clamp(16px,1.8vw,22px);
}
.ed-ra-step-no::after{
  content:""; position:absolute; left:0; bottom:0;
  width:32px; height:2px; border-radius:2px; background:var(--red);
}
.ed-ra-step h3{
  font-size:clamp(1.2rem,1.6vw,1.42rem); font-weight:600;
  letter-spacing:-.012em; line-height:1.18; color:var(--navy);
}
.ed-ra-step p{
  margin-top:12px; max-width:32ch;
  color:var(--body-2); font-size:.98rem; line-height:1.56;
}

/* staggered rise (gated to scroll-timeline support so headless /
   reduced-motion never ship blank) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-ra-step{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 24%;
    }
    .ed-ra-step:nth-child(2){ animation-range:entry 6% cover 28%; }
    .ed-ra-step:nth-child(3){ animation-range:entry 10% cover 32%; }
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .ed-ra-book::before{ width:380px; height:380px; top:-140px; right:-150px; }
  .ed-ra-widget{ height:clamp(560px,86vh,800px); }
}

@media (max-width:760px){
  .ed-ra-steps{ grid-template-columns:1fr; }
  .ed-ra-step{ padding:clamp(24px,5vw,30px) 0; }
  .ed-ra-step:first-child{ padding-top:clamp(26px,5vw,32px); }
  .ed-ra-step + .ed-ra-step{ border-inline-start:none; border-top:1px solid var(--line); }
  .ed-ra-step p{ max-width:52ch; }
}

@media (max-width:560px){
  .ed-ra-panel{ padding:10px; }
  .ed-ra-widget{ height:660px; }
}

/* ============================================================
   Reduced motion : neutralize this page's motion defensively
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ed-ra-step{ animation:none; opacity:1; transform:none; }
  .ed-ra-spinner{ animation:none; }
}