/* United Legal — round 3 module "callband" (DESIGN-SPEC §8).
   The "Call Us for ADVICE / HELP / SUPPORT / SOLUTIONS" band: Tier A navy plate retinted to the blue-purple
   family, typed headline (callband.js), fixed-width word slot, 2 px yellow cursor, 99 px sky phone number.
   Loads after refine.css (and after template.css on home-en); selectors are `.sec-band .band…` so they beat
   template.css §4 (same specificity, later in the cascade) and original.css/landing.css (lower specificity).
   Every shared token is referenced with a literal fallback so the layer works before r3-system.css exists. */

/* ---------- 1. Section + plate ---------- */
.sec-band{padding:var(--sec-gap,96px) var(--gutter-a,10px) 0}
.sec-band .sec__inner{max-width:none;width:auto;margin:0 auto;padding:0}   /* beats identity.css .sec__inner (1240 / gutter width) */
.sec-band .band{
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  min-height:290px;padding:44px 10px;border-radius:var(--panel-r,33px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;text-align:center;
  background:var(--g-band,linear-gradient(180deg,#1B2E6B 0%,#0C1D55 100%));
  box-shadow:var(--rim-navy,inset 0 1px 0 rgba(255,255,255,.10)),var(--shadow-plate,0 1px 0 rgba(12,29,85,.06),0 32px 64px -40px rgba(8,19,56,.45));
}
/* bottom-centre light (the only light on this plate; never animated) */
.sec-band .band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--l-band,radial-gradient(ellipse 40% 70% at 50% 100%,rgba(79,95,147,.55) 0%,rgba(79,95,147,0) 70%));
}

/* ---------- 2. Headline: white lead + yellow typed word in a fixed slot ---------- */
.sec-band .band__line{
  font:600 66px/79.2px var(--f-primary,'Barlow Condensed',sans-serif);color:#fff;text-decoration:none;
  display:block;max-width:1200px;margin:0;white-space:nowrap;
}
.sec-band .band__pre{display:inline}
.sec-band .band__word{
  color:#F9E900;display:inline-block;text-align:start;vertical-align:baseline;white-space:nowrap;
  min-inline-size:var(--band-word-w,5.1em);
}
/* 2 px yellow cursor (re-enabled: landing.css hides it; original.css draws a 3 px one) */
.sec-band .band__word::after{
  content:"";display:inline-block;width:2px;height:.82em;margin-inline-start:5px;margin-left:5px;
  background:#F9E900;vertical-align:-.06em;opacity:1;animation:none;
}
.sec-band .band[data-phase=hold] .band__word::after{animation:band-blink 1s steps(1,end) infinite}
.sec-band .band[data-phase=empty] .band__word::after,
.sec-band .band[data-phase=static] .band__word::after,
.sec-band .band:not([data-phase]) .band__word::after{opacity:0}
@keyframes band-blink{50%{opacity:0}}
/* measuring probe used by callband.js to size the slot (never visible, never in the a11y tree) */
.sec-band .band__probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;white-space:nowrap;display:inline-block}
/* visually hidden full sentence for assistive tech */
.sec-band .band__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 3. Phone number ---------- */
.sec-band .band__phone{
  font:700 99px/99px var(--f-primary,'Barlow Condensed',sans-serif);color:#CCE1F6;text-decoration:none;
  direction:ltr;unicode-bidi:isolate;letter-spacing:.005em;display:block;margin:0;
  transition:color .2s ease,text-shadow .2s ease;
}
.sec-band .band__phone:hover,.sec-band .band__phone:focus-visible{color:#fff;text-shadow:0 0 28px rgba(204,225,246,.55)}
.sec-band .band__phone:focus-visible,.sec-band .band__line:focus-visible{outline:3px solid #F9E900;outline-offset:6px;border-radius:8px}

/* ---------- 4. Pause control (the loop runs > 5 s — WCAG 2.2.2) ---------- */
.sec-band .band__pause{
  position:absolute;z-index:2;inset-inline-end:16px;bottom:16px;width:44px;height:44px;padding:0;margin:0;
  border-radius:50%;border:1px solid rgba(204,225,246,.4);background:rgba(12,29,85,.4);color:#CCE1F6;
  display:grid;place-items:center;cursor:pointer;transition:background .18s ease,border-color .18s ease;
}
.sec-band .band__pause svg{width:18px;height:18px;fill:currentColor;display:block}
.sec-band .band__pause .band__ic-play{display:none}
.sec-band .band__pause[aria-pressed=true] .band__ic-play{display:block}
.sec-band .band__pause[aria-pressed=true] .band__ic-pause{display:none}
.sec-band .band__pause:hover{background:rgba(12,29,85,.7);border-color:rgba(204,225,246,.8)}
.sec-band .band__pause:focus-visible{outline:3px solid #F9E900;outline-offset:3px}
.sec-band .band__pause[hidden]{display:none}

/* ---------- 5. Entrance (once; transform/opacity only; armed by JS, never under reduced motion) ---------- */
.sec-band .band.band--armed{opacity:0}
.sec-band .band.band--armed .band__phone{opacity:0;transform:translateY(16px)}
.sec-band .band.band--armed.band--in{opacity:1;transition:opacity .6s var(--ease-std,cubic-bezier(.2,.7,.2,1))}
.sec-band .band.band--armed.band--in .band__phone{opacity:1;transform:none;transition:opacity .6s var(--ease-std,cubic-bezier(.2,.7,.2,1)),transform .6s var(--ease-std,cubic-bezier(.2,.7,.2,1))}

/* ---------- 6. Breakpoints (spec §8) ---------- */
@media (max-width:1024px){
  .sec-band .band{min-height:240px;border-radius:var(--panel-r,24px)}
  .sec-band .band__line{font-size:52px;line-height:1.2}
  .sec-band .band__phone{font-size:78px;line-height:1}
}
@media (max-width:767px){
  .sec-band .band{min-height:205px;padding:30px 14px 58px;gap:10px;border-radius:var(--panel-r,18px)}
  .sec-band .band__line{font-size:36px;line-height:1.2;white-space:normal}
  .sec-band .band__word{min-inline-size:auto}
  .sec-band .band__phone{font-size:50px;line-height:1}
  .sec-band .band__pause{inset-inline-end:8px;bottom:8px}
}

/* ---------- 7. RTL / Persian (Vazirmatn via html[lang=fa]; digits stay Barlow) ---------- */
[dir=rtl] .sec-band .band__line{font-size:48px;line-height:1.6}
[dir=rtl] .sec-band .band__phone{font-family:'Barlow Condensed',sans-serif}
@media (max-width:767px){[dir=rtl] .sec-band .band__line{font-size:28px;line-height:1.7}}

/* ---------- 8. Reduced motion: complete, static phrase; no cursor, no control, no entrance ---------- */
@media (prefers-reduced-motion:reduce){
  .sec-band .band__word::after{display:none}
  .sec-band .band__pause{display:none}
  .sec-band .band.band--armed,.sec-band .band.band--armed .band__phone{opacity:1;transform:none;transition:none}
}
@media (forced-colors:active){
  .sec-band .band{background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .sec-band .band__line,.sec-band .band__phone{color:CanvasText}
  .sec-band .band__word{color:Highlight}
  .sec-band .band__word::after{background:CanvasText}
  .sec-band .band__pause{background:ButtonFace;color:ButtonText;border-color:ButtonText}
}

/* ---------- 9. QA round-1 fixes (QA-ROUND1.json callband/major + minor 23): on phones the Spanish and Persian
   nouns do not fit beside the lead, so the line used to wrap and unwrap every cycle (layout shift). The lead now
   sits on its own row in those languages with the measured word slot under it, and the plate has a fixed height. */
@media (max-width:767px){
  .sec-band .band__line{line-height:1.25;min-height:44px}
  html[lang=es] .sec-band .band__pre,[dir=rtl] .sec-band .band__pre{display:block}
  html[lang=es] .sec-band .band__line,[dir=rtl] .sec-band .band__line{white-space:nowrap}
  html[lang=es] .sec-band .band__word,[dir=rtl] .sec-band .band__word{min-inline-size:var(--band-word-w,auto)}
  html[lang=es] .sec-band .band,[dir=rtl] .sec-band .band{min-height:245px}
}