/**
 * Injury clinic page (/injury-clinic-cambridge/), body.rp-injury. Gym identity:
 * an image hero (floating header), ivory and white bands, navy headings and
 * text, the shared .h2, the enquiry form styled by rp-forms.css. In-text links
 * are navy underlined (red on ivory misses AA); red is reserved for buttons.
 */
body.rp-injury{
	--navy:#002c41;--red:#e4022e;--ivory:#F6F5EE;--white:#fff;--ink:#0a2233;--muted:#4a5157;--line:#cdd6db;
	margin:0;background:var(--ivory);font-family:'Montserrat',Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
}
.rp-injury .lead{font-size:18px;line-height:1.62;color:var(--muted);margin:18px auto 0;max-width:640px}

/* ---------- Hero (image cover, centred, floating header) ---------- */
.rp-injury .ichero.wp-block-cover{min-height:760px}
.rp-injury .ichero .wp-block-cover__background{background:linear-gradient(180deg,rgba(0,18,26,.5) 0%,rgba(0,18,26,.58) 55%,rgba(0,18,26,.72) 100%) !important;opacity:1 !important}
.rp-injury .ichero .wrap{text-align:center}
.rp-injury .ich1{color:#fff;font-size:clamp(2.25rem,5vw,3.25rem);font-weight:800;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.rp-injury .ich1 mark{background:transparent}
.rp-injury .icsub{color:rgba(255,255,255,.95);font-size:18px;line-height:1.6;margin:18px auto 28px;max-width:560px}
.rp-injury .ichero .wp-block-buttons{justify-content:center}

/* ---------- Bands (shared section token) ---------- */
.rp-injury .icintro{background:var(--white);padding:var(--rp-section-y) 0}
.rp-injury .ictreat{background:var(--white);padding:var(--rp-section-y) 0;text-align:center}
.rp-injury .icexpect{background:var(--ivory);padding:var(--rp-section-y) 0;text-align:center}
.rp-injury .icwho{background:var(--white);padding:var(--rp-section-y) 0;text-align:center}
.rp-injury .icbook{background:var(--ivory);padding:var(--rp-section-y) 0;text-align:center;scroll-margin-top:90px}
.rp-injury .icquestions{background:var(--white);padding:var(--rp-section-y) 0;text-align:center}

/* ---------- Treatments list ---------- */
.rp-injury .ic-treatments{list-style:none;margin:30px auto 0;padding:0;max-width:420px;text-align:left}
.rp-injury .ic-treatments li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line);font-size:18px;font-weight:600;color:var(--ink)}
.rp-injury .ic-treatments li:first-child{border-top:1px solid var(--line)}
.rp-injury .ic-treatments li::before{content:"";position:absolute;left:4px;top:21px;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.rp-injury .ic-price{font-size:17px;line-height:1.6;color:var(--muted);margin:26px auto 0;max-width:560px;font-weight:600}

/* ---------- What to expect (text + image) ---------- */
.rp-injury .ic-expect-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center;margin-top:42px;text-align:left}
.rp-injury .ic-expect-txt p{font-size:17px;line-height:1.68;color:var(--muted);margin:0 0 16px}
.rp-injury .ic-expect-txt p:last-child{margin-bottom:0}
.rp-injury .ic-expect-note{font-weight:700;color:var(--navy) !important}
.rp-injury .ic-expect-img{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 16px 36px rgba(0,44,65,.16)}
.rp-injury .ic-expect-img img{display:block;width:100%;height:auto}

/* ---------- Who you will see (room for a quals paragraph later) ---------- */
.rp-injury .ic-who-body{max-width:560px;margin:0 auto}
.rp-injury .ic-who-body .lead{margin-top:0}
.rp-injury .ic-who-body .lead + p{margin-top:18px}

/* ---------- Booking placeholder (clearly marked, not a real element) ---------- */
.rp-injury .ic-book-placeholder{margin:32px auto 0;max-width:620px;background:#eef2f4;border:2px dashed var(--navy);border-radius:14px;padding:34px 28px;text-align:center}
.rp-injury .ic-book-placeholder-h{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.rp-injury .ic-book-placeholder p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.rp-injury .ic-book-placeholder p + p{margin-top:8px}
.rp-injury .cc-note{font-size:14.5px;line-height:1.6;color:var(--muted);margin:22px auto 0;max-width:520px}

/* ---------- Questions (form) ---------- */
.rp-injury .ic-formintro{font-size:18px;line-height:1.6;color:var(--muted);margin:16px auto 28px;max-width:560px}
.rp-injury .icquestions .rp-form{margin-top:6px}

/* ---------- Amelia booking calendar (brand skin) ----------
   Amelia v2 is driven by --am-c-* custom properties. We remap its blues to the
   brand: navy for structure (sidebar, selected date, step markers) and red for
   the action buttons, and switch its font to the site Montserrat. !important is
   needed because Amelia declares these vars on the same nodes at runtime. */
/* Amelia sets its whole palette inline on .am-fs__wrapper, and each button
   carries its own inline colour tokens, so we override only the blue ACCENT
   tokens with !important (a stylesheet !important beats an inline value). The
   white panel/input backgrounds and the dark text tokens are left as Amelia's
   readable defaults. Structure and date accents become navy; the action button
   becomes brand red, matching every other button on the site. */
body.rp-injury [id^="amelia-v2-booking"] .am-fs__wrapper{
	--am-c-primary:#002c41 !important;   /* links, step markers */
	--am-c-btn-prim:#002c41 !important;  /* selectable / selected day accent */
	--am-c-sb-bgr:#002c41 !important;    /* sidebar */
	--am-font-family:'Montserrat',Arial,sans-serif !important;
}
/* primary action buttons (Continue, Book) -> brand red */
body.rp-injury [id^="amelia-v2-booking"] .am-button--primary{
	--am-c-btn-first:#e4022e !important;
	--am-c-btn-first-op80:rgba(228,2,46,.85) !important;
	--am-c-btn-first-op30:rgba(228,2,46,.30) !important;
	--am-c-btn-first-op20:rgba(228,2,46,.12) !important;
}
/* the availability calendar (dates + time slots) has its own accent token
   family, defined in Amelia's stylesheet on .am-advsc__wrapper -> navy */
body.rp-injury [id^="amelia-v2-booking"] .am-advsc__wrapper{
	--am-c-advsc-cell-bgr:rgba(0,44,65,.08) !important;
	--am-c-advsc-cell-border:rgba(0,44,65,.55) !important;
	--am-c-advsc-cell-busy:rgba(0,44,65,.28) !important;
	--am-c-advsc-cell-text:#002c41 !important;
	--am-c-advsc-slot-text:#002c41 !important;
}
/* time-slot pills carry the accent colour directly on their inner element */
body.rp-injury [id^="amelia-v2-booking"] .am-advsc__slots-item__inner{
	background-color:rgba(0,44,65,.07) !important;border-color:rgba(0,44,65,.5) !important;
}
/* Selected slot. Amelia applies `am-advsc__slots-item__selected` on the ITEM and
   sets the inner text to white, but leaves the inner background at the 7% navy
   tint. White on that tint measures 1.00:1, i.e. invisible. The `.am-selected`
   selector below never matched anything: that class does not exist in Amelia
   9.6.2's v3 scheduler. It is kept only in case an older markup path is hit.
   The `__selected` selector is the one that actually applies. */
body.rp-injury [id^="amelia-v2-booking"] .am-advsc__slots-item__inner:hover,
body.rp-injury [id^="amelia-v2-booking"] .am-advsc__slots-item.am-selected .am-advsc__slots-item__inner,
body.rp-injury [id^="amelia-v2-booking"] .am-advsc__slots-item__selected .am-advsc__slots-item__inner,
body.rp-injury [id^="amelia-v2-booking"] .am-advsc__slots-item.am-advsc__slots-item__selected .am-advsc__slots-item__inner{
	background-color:#002c41 !important;border-color:#002c41 !important;color:#fff !important;
}
/* unavailable / past day numbers: darken from Amelia's #8C959A to meet AA
   contrast on the cell tint, while staying clearly muted (no navy, no border) */
body.rp-injury [id^="amelia-v2-booking"] .am-advsc__dayGridMonth-disabled .fc-daygrid-day-number{
	color:#575d64 !important;
}
/* the sidebar element also holds its own background token */
body.rp-injury [id^="amelia-v2-booking"] .am-fs-sb,
body.rp-injury [id^="amelia-v2-booking"] [class*="am-fs-sb"]{
	--am-c-sb-bgr:#002c41 !important;background-color:#002c41 !important;
}
body.rp-injury [id^="amelia-v2-booking"]{max-width:100%}
/* Give the widget a touch more room than the text sections. The auto side
   margins are load bearing: .icbook is a full-bleed section, so without them
   the 820px column pins to the left edge and the whole booking block reads as
   left aligned on desktop even though its contents are centred within it. */
body.rp-injury .icbook .wrap{max-width:820px;margin-left:auto;margin-right:auto}

/* ---------- Required email / telephone (see assets/js/rp-amelia-required.js) ----------
   Amelia's v3 scheduler ignores requiredEmailField / requiredPhoneNumberField,
   so the theme marks those two fields required and validates them. The asterisk
   itself is Element Plus's own .is-required rule, reused so email and phone look
   identical to First Name rather than introducing a second convention. Only the
   error message below is ours. */
/* Required asterisk in brand red rather than Element Plus's own #b4190f.
   Applies to every required field in the widget, so First Name, Last Name,
   Email and Telephone all carry the same marker. */
body.rp-injury [id^="amelia-v2-booking"] .el-form-item.is-required > .el-form-item__label::before,
body.rp-injury [id^="amelia-v2-booking"] .el-form-item.is-required > .el-form-item__label-wrap > .el-form-item__label::before{
	color:#e4022e !important;
}
body.rp-injury [id^="amelia-v2-booking"] .rp-req-err{
	margin:6px 0 0;font-size:14px;line-height:1.45;color:#c1121f;font-weight:600;
}
body.rp-injury [id^="amelia-v2-booking"] .rp-req-err--fatal{
	margin-top:14px;padding:12px 14px;border-radius:8px;
	background:rgba(193,18,31,.08);border:1px solid rgba(193,18,31,.35);
}
body.rp-injury [id^="amelia-v2-booking"] .rp-req-invalid .am-input-wrapper,
body.rp-injury [id^="amelia-v2-booking"] .rp-req-invalid .am-input-phone-wrapper,
body.rp-injury [id^="amelia-v2-booking"] .rp-req-invalid .el-input__wrapper{
	box-shadow:0 0 0 1px #c1121f inset !important;border-radius:6px;
}

/* ---------- Mobile ---------- */
@media (max-width:860px){
	.rp-injury .ichero.wp-block-cover{min-height:600px}
	.rp-injury .ic-expect-grid{grid-template-columns:1fr;gap:28px}
	.rp-injury .ic-expect-img{order:-1}
}


/* ===== Injury page rebuild additions (2026-08-05) ===== */
/* Intro two column: text + ticks left, clinic room image right */
.rp-injury .ic-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center;text-align:left}
.rp-injury .ic-intro-txt .h2{text-align:left;margin:0 0 20px}
.rp-injury .ic-intro-txt p{font-size:17px;line-height:1.68;color:var(--muted);margin:0 0 16px}
.rp-injury .ic-intro-img{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 16px 36px rgba(0,44,65,.16)}
.rp-injury .ic-intro-img img{display:block;width:100%;height:auto}

/* Tick lists: red round tick with a white check */
.rp-injury .ic-ticks{list-style:none;margin:22px 0 0;padding:0;text-align:left}
.rp-injury .ic-ticks--center{display:inline-block;margin-left:auto;margin-right:auto}
.rp-injury .ic-ticks li{position:relative;padding:9px 0 9px 34px;font-size:17px;font-weight:600;color:var(--ink);line-height:1.5}
.rp-injury .ic-ticks li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:50%;background:var(--red)}
.rp-injury .ic-ticks li::after{content:"";position:absolute;left:7px;top:15px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Centred CTA buttons in the expect and faq bands */
.rp-injury .icexpect .wp-block-buttons,.rp-injury .icfaq .wp-block-buttons{justify-content:center;margin-top:34px}

/* New bands */
.rp-injury .icaftercare{background:var(--white);padding:var(--rp-section-y) 0;text-align:center}
.rp-injury .icfaq{background:var(--ivory);padding:var(--rp-section-y) 0;text-align:center}

/* FAQ accordion: native details, site consistent look, +/minus marker (no dash glyph) */
.rp-injury .ic-faq{max-width:760px;margin:38px auto 0;text-align:left}
.rp-injury .ic-faq-item{border-top:1px solid var(--line)}
.rp-injury .ic-faq-item:last-child{border-bottom:1px solid var(--line)}
.rp-injury .ic-faq-q{list-style:none;cursor:pointer;position:relative;padding:20px 46px 20px 0;font-size:18px;font-weight:700;color:var(--ink);line-height:1.4}
.rp-injury .ic-faq-q::-webkit-details-marker{display:none}
.rp-injury .ic-faq-q::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:var(--red);line-height:1}
.rp-injury .ic-faq-item[open] .ic-faq-q::after{content:"\2212"}
.rp-injury .ic-faq-q:focus{outline:none}
.rp-injury .ic-faq-q:focus-visible{outline:2px solid var(--navy);outline-offset:-3px;border-radius:6px}
.rp-injury .ic-faq-a{padding:0 0 22px;font-size:16px;line-height:1.62;color:var(--muted)}
.rp-injury .ic-faq-a p{margin:0}

@media (max-width:860px){
	.rp-injury .ic-intro-grid{grid-template-columns:1fr;gap:28px}
}
