/*
 * Cirata "Find Your Path" wizard — scoped styles
 * All rules are prefixed with #cirata-path-recommender so they cannot
 * leak into the rest of the theme.
 *
 * FONTS: the client's original code registered Arboria Book (400) and Medium
 * (500) under the family name 'Arboria', but pointed at absolute
 * https://cirata.com/ URLs that fail on local and staging. The theme's own
 * assets/src/fonts.css registers 'Arboria' with the BOOK face only — the
 * Medium cut lives under a separate family name, 'Arboria Medium'. So
 * font-weight:500 against 'Arboria' finds no matching face and renders as
 * Book, lighter than the approved mockup.
 *
 * Rather than adding a weight-500 face to the shared 'Arboria' family (which
 * would restyle every .font-medium and .h6 element on any page including this
 * partial), the two faces are registered here under a component-private family
 * name. Same font files and same URLs as fonts.css, so they are already in the
 * browser cache — no extra download, and zero effect outside this component.
 */

@font-face {
  font-family:'ArboriaFYP';
  src:url('../fonts/Arboria/Arboria-Book.woff2') format('woff2'),
      url('../fonts/Arboria/Arboria-Book.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'ArboriaFYP';
  src:url('../fonts/Arboria/Arboria-Medium.woff2') format('woff2'),
      url('../fonts/Arboria/Arboria-Medium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
#cirata-path-recommender {
  --ink:#4a4a5f; --accent:#27aae1; --accent-dk:#1f93c6; --bg:#f2f5f4; --card:#fff;
  --line:#e3e7ef; --muted:#8a8fa3; --tint:#eaf6fc;
  color:var(--ink);
  font-family:'ArboriaFYP','Arboria',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg); padding:clamp(48px,7vw,84px) clamp(20px,5vw,48px);
}
#cirata-path-recommender * { box-sizing:border-box; }
#cirata-path-recommender .cph-inner { max-width:1120px; margin:0 auto; }
#cirata-path-recommender .cph-eye { text-align:center; font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
/* Weight 500 (Medium) to match the previous section's "The data orchestration
   foundation for enterprise AI" heading, which renders in Arboria Medium 500.
   font-family is set EXPLICITLY (not inherit) so weight 500 resolves to the real
   Medium face: `body, * { font-family:Arboria }` (bs-utilities.css) clobbers every
   ancestor directly, so `inherit` would fall to "Arboria" (Book-only, weight 400)
   and render lighter than the Symphony heading. The id-scoped selector outranks
   both that universal rule and the theme's `h1, h2 { font-family:"Arboria Medium" }`. */
#cirata-path-recommender h2.cph-h2 { text-align:center; font-family:'ArboriaFYP','Arboria',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; font-weight:500; letter-spacing:-.02em; font-size:clamp(28px,4.2vw,44px); line-height:1.08; margin:0 auto 14px; max-width:780px; }
/* font-size:inherit and font-family:inherit re-assert the h2's size AND font on
   the <em>; the theme globals `body, * { font-size:17px }` and
   `body, * { font-family:Arboria }` (bs-utilities.css) otherwise target the em
   directly and break inheritance — shrinking this second line to 17px and
   dropping it off the Medium face. inherit here pulls the h2's values (id-scoped,
   so it outranks the universal selector). */
/* Arboria has no SemiBold (600) cut between Medium and Bold, so a true
   intermediate weight isn't available from the font. -webkit-text-stroke paints a
   hairline outline in the text's own color, thickening the Medium (500) glyphs a
   tunable fraction — an optical "in-between" that also compensates for the accent
   color reading lighter than the dark ink on the first line. Tune the px value. */
#cirata-path-recommender h2.cph-h2 em { font-style:normal; color:var(--accent); font-size:inherit; font-family:inherit; -webkit-text-stroke:0.4px currentColor; }
#cirata-path-recommender .cph-lead { text-align:center; font-size:clamp(15px,1.6vw,18px); color:var(--muted); max-width:54ch; margin:0 auto 40px; line-height:1.5; }
#cirata-path-recommender .cph-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 30px rgba(74,74,95,.06); max-width:780px; margin:0 auto; padding:clamp(26px,4vw,40px); }
#cirata-path-recommender .cph-prog { display:flex; gap:7px; margin-bottom:26px; }
#cirata-path-recommender .cph-seg { height:5px; flex:1; border-radius:99px; background:#e9edf4; overflow:hidden; }
#cirata-path-recommender .cph-seg > i { display:block; height:100%; background:var(--accent); transition:width .35s ease; }
#cirata-path-recommender .cph-stepno { font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
#cirata-path-recommender .cph-q { font-weight:500; letter-spacing:-.01em; font-size:clamp(22px,3.2vw,30px); line-height:1.12; margin-bottom:24px; }
#cirata-path-recommender .cph-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
#cirata-path-recommender .cph-opt { font:inherit; font-size:15.5px; font-weight:500; text-align:left; color:var(--ink); cursor:pointer; background:#fff; border:1.5px solid var(--line); border-radius:13px; padding:17px 18px; transition:all .16s ease; }
#cirata-path-recommender .cph-opt:hover { border-color:var(--accent); background:var(--tint); transform:translateY(-2px); box-shadow:0 6px 18px rgba(39,170,225,.14); }
#cirata-path-recommender .cph-back { margin-top:22px; background:none; border:0; color:var(--muted); font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; padding:4px 0; }
#cirata-path-recommender .cph-back:hover { color:var(--accent); }
#cirata-path-recommender .cph-load { display:flex; flex-direction:column; align-items:center; gap:16px; color:var(--muted); text-align:center; padding:40px 0; }
#cirata-path-recommender .cph-spin { width:30px; height:30px; border:3px solid #e3e7ef; border-top-color:var(--accent); border-radius:50%; animation:cph-spin .7s linear infinite; }
@keyframes cph-spin { to{transform:rotate(360deg);} }
@keyframes cph-rise { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
#cirata-path-recommender .cph-result { max-width:960px; margin:0 auto; animation:cph-rise .5s ease both; }
#cirata-path-recommender .cph-pill { display:inline-block; font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--tint); border-radius:99px; padding:5px 13px; margin-bottom:15px; }
#cirata-path-recommender .cph-summary { font-weight:500; letter-spacing:-.01em; font-size:clamp(21px,2.8vw,30px); line-height:1.22; max-width:30ch; margin-bottom:28px; }
#cirata-path-recommender .cph-label { font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
#cirata-path-recommender .cph-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ #cirata-path-recommender .cph-grid{ grid-template-columns:1fr; } }
#cirata-path-recommender .cph-block { background:var(--card); border:1px solid var(--line); border-radius:15px; padding:20px; box-shadow:0 4px 16px rgba(74,74,95,.05); }
#cirata-path-recommender .cph-block.feature { background:var(--tint); border-color:#bfe6f7; }
#cirata-path-recommender .cph-bt { font-weight:500; font-size:17px; margin-bottom:6px; }
#cirata-path-recommender .cph-match-name { font-weight:500; font-size:19px; }
#cirata-path-recommender .cph-br { font-size:14px; color:#6c7287; line-height:1.5; }
#cirata-path-recommender .cph-link { display:inline-block; margin-top:13px; font-size:13.5px; font-weight:500; color:var(--accent); text-decoration:none; }
#cirata-path-recommender .cph-link:hover { color:var(--accent-dk); }
#cirata-path-recommender .cph-res { margin-top:22px; }
#cirata-path-recommender .cph-rcard { display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; transition:all .16s ease; }
#cirata-path-recommender .cph-rcard:hover { border-color:var(--accent); background:var(--tint); transform:translateX(3px); }
#cirata-path-recommender .cph-rnum { font-weight:500; color:var(--accent); font-size:14px; min-width:22px; }
#cirata-path-recommender .cph-rt { font-weight:500; font-size:14.5px; margin-bottom:2px; }
#cirata-path-recommender .cph-rr { font-size:13.5px; color:#6c7287; line-height:1.45; }
#cirata-path-recommender .cph-rarrow { margin-left:auto; color:#b7bdcc; align-self:center; font-size:18px; }
#cirata-path-recommender .cph-rcard:hover .cph-rarrow { color:var(--accent); }
#cirata-path-recommender .cph-cta { margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--tint); border:1px solid #bfe6f7; border-radius:15px; padding:20px 22px; }
#cirata-path-recommender .cph-cta-t { font-weight:500; font-size:16px; }
#cirata-path-recommender .cph-cta-s { font-size:13.5px; color:#6c7287; }
#cirata-path-recommender .cph-btn { font:inherit; font-weight:500; font-size:14px; text-decoration:none; color:#fff; background:var(--accent); padding:12px 20px; border-radius:10px; white-space:nowrap; transition:all .15s ease; border:0; cursor:pointer; margin-left:auto; }
#cirata-path-recommender .cph-btn:hover { background:var(--accent-dk); transform:translateY(-1px); }
#cirata-path-recommender .cph-reset { margin-top:24px; background:#fff; border:1.5px solid var(--line); color:var(--muted); font:inherit; font-weight:500; font-size:13.5px; cursor:pointer; padding:10px 18px; border-radius:10px; transition:all .15s ease; }
#cirata-path-recommender .cph-reset:hover { color:var(--accent); border-color:var(--accent); }

/* Keyboard focus indicators. The supplied code defined :hover states only, and
   the browser default ring is near-invisible against the white/tinted button
   backgrounds. :focus-visible keeps the ring for keyboard users without
   showing it on mouse click. WCAG 2.4.7. */
#cirata-path-recommender .cph-opt:focus-visible,
#cirata-path-recommender .cph-back:focus-visible,
#cirata-path-recommender .cph-btn:focus-visible,
#cirata-path-recommender .cph-reset:focus-visible,
#cirata-path-recommender .cph-link:focus-visible,
#cirata-path-recommender .cph-rcard:focus-visible,
#cirata-path-recommender .cph-result:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }