/* ============================================================
   ReMind — enrolment calls-to-action.
   Uses the existing charcoal/sage palette so these read as part
   of the site, not a bolted-on banner.
   ============================================================ */

:root {
    --rmc-ink:    #262626;
    --rmc-accent: #9B9A84;
    --rmc-accent-ink: #6E6D57;  /* same hue, 4.90:1 — for small label TEXT */
    --rmc-muted:  #6f6f6f;   /* 4.68:1 on --rmc-soft; #838383 was 3.53:1 */
    --rmc-line:   #e6e6e0;
    --rmc-soft:   #f7f7f4;
    --rmc-urgent: #9b1c1c;
}

/* ── Shared button ─────────────────────────────────────── */
.rm-cta-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; border-radius: 10px;
    font-family: Sora, sans-serif; font-size: 14px; font-weight: 600;
    text-decoration: none; border: 1.5px solid transparent;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap; cursor: pointer;
}
.rm-cta-btn i { font-size: 12px; transition: transform .18s ease; }
.rm-cta-btn:hover i { transform: translateX(3px); }

.rm-cta-btn--solid { background: var(--rmc-ink); color: #fff; }
.rm-cta-btn--solid:hover { background: var(--rmc-accent); color: #fff; transform: translateY(-1px); }

.rm-cta-btn--outline { background: transparent; color: var(--rmc-ink); border-color: var(--rmc-line); }
.rm-cta-btn--outline:hover { border-color: var(--rmc-accent); color: var(--rmc-accent); }

.rm-cta-btn--lg { padding: 17px 34px; font-size: 15px; }

/* ── Slim strip (sits just under the page header) ──────── */
.rm-cta-strip {
    background: var(--rmc-soft);
    border-bottom: 1px solid var(--rmc-line);
    padding: 16px 0;
}
.rm-cta-strip__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.rm-cta-strip__text { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rm-cta-strip__label {
    font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--rmc-accent-ink); font-weight: 700;
}
.rm-cta-strip__text strong { font-family: Marcellus, serif; font-size: 18px; color: var(--rmc-ink); }
.rm-cta-strip__meta { font-size: 14px; color: var(--rmc-muted); }
.rm-cta-strip__urgent { color: var(--rmc-urgent); font-weight: 600; }

/* ── Full band (sits before the footer) ────────────────── */
/* Deliberately LIGHT. The programme pages already end with two dark sections
   (a navy closing statement, then the green Discovery block). A third dark
   block disappeared into them. A cream band breaks the run, so the commercial
   action is the thing that stands out rather than the thing that blends in. */
.rm-cta-band {
    background: linear-gradient(180deg, #fbfbf9 0%, var(--rmc-soft) 100%);
    color: var(--rmc-ink);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--rmc-line);
    border-bottom: 1px solid var(--rmc-line);
}
/* A soft sage wash, so the block has depth without needing an image. */
.rm-cta-band::after {
    content: ''; position: absolute; width: 520px; height: 520px;
    right: -180px; top: -240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(155,154,132,.18), transparent 68%);
    pointer-events: none;
}
.rm-cta-band__inner {
    display: grid; grid-template-columns: 1fr auto;
    gap: 48px; align-items: center; position: relative; z-index: 1;
}
.rm-cta-band__eyebrow {
    display: inline-block; font-size: 11px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--rmc-accent-ink);
    font-weight: 700; margin-bottom: 12px;
}
.rm-cta-band h2 {
    font-family: Marcellus, serif; font-size: 34px; line-height: 1.25;
    color: var(--rmc-ink); margin: 0 0 12px;
}
.rm-cta-band p { color: var(--rmc-muted); font-size: 16px; line-height: 1.7; margin: 0 0 22px; max-width: 560px; }

.rm-cta-band__facts {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 12px 30px;
}
.rm-cta-band__facts li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--rmc-muted); }
.rm-cta-band__facts i { color: var(--rmc-accent); width: 15px; text-align: center; }
.rm-cta-band__facts strong { color: var(--rmc-ink); font-weight: 600; }

.rm-cta-band__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 240px; }
.rm-cta-band__actions .rm-cta-btn { justify-content: center; }
.rm-cta-band__actions .rm-cta-btn--outline { color: var(--rmc-ink); border-color: var(--rmc-line); background: #fff; }
.rm-cta-band__actions .rm-cta-btn--outline:hover { border-color: var(--rmc-accent); color: var(--rmc-accent); }
.rm-cta-band__alt { font-size: 12.5px; color: var(--rmc-muted); text-align: center; margin-top: 2px; }

/* ── Header button ─────────────────────────────────────── */
/* Solid against the outlined Discovery button, so the eye lands on the
   commercial action first without shouting. */
.btn-enrol {
    background: var(--rmc-accent) !important;
    color: #fff !important;
    border-color: var(--rmc-accent) !important;
}
.btn-enrol:hover { background: var(--rmc-ink) !important; border-color: var(--rmc-ink) !important; color: #fff !important; }

/* ── Sticky bar (small screens only) ───────────────────── */
.rm-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
    display: none; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 14px; background: #fff;
    border-top: 1px solid var(--rmc-line);
    box-shadow: 0 -6px 22px rgba(38,38,38,.12);
    transform: translateY(110%); transition: transform .3s ease;
}
.rm-sticky-cta.is-visible { transform: translateY(0); }
.rm-sticky-cta__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rm-sticky-cta__text strong { font-size: 14px; color: var(--rmc-ink); }
.rm-sticky-cta__text span { font-size: 12px; color: var(--rmc-muted); }
.rm-sticky-cta .rm-cta-btn { padding: 11px 22px; }

/* The float is 58px tall and sits 30px up, so at rest it lands inside the bar.
   The bar is 74px, so 88px puts the float clear above it with a 14px gap.
   The class is toggled by the same script that reveals the bar, so the two can
   never get out of step. */
body.rm-sticky-on .whatsapp-float { bottom: 88px; }

@media (max-width: 991px) {
    .rm-sticky-cta { display: flex; }
    /* room so the bar never covers the footer's last line */
    body { padding-bottom: 68px; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991px) {
    .rm-cta-band__inner { grid-template-columns: 1fr; gap: 30px; }
    .rm-cta-band h2 { font-size: 28px; }
    .rm-cta-band__actions { min-width: 0; }
}
@media (max-width: 600px) {
    .rm-cta-band { padding: 48px 0; }
    .rm-cta-band h2 { font-size: 24px; }
    .rm-cta-strip__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .rm-cta-strip .rm-cta-btn { width: 100%; justify-content: center; }
    .rm-cta-band__facts { gap: 10px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-cta-btn, .rm-cta-btn i, .rm-sticky-cta { transition: none; }
}

/* ── Header layout ─────────────────────────────────────── */
/* The header carried three equal-weight pills (Online Learning / Enrol Now /
   Book Discovery). At 1280px they had ~326px between them and every one wrapped
   to four lines. Online Learning is a returning-student login, so it becomes a
   quiet utility link and the two commercial actions get room to sit on one line. */
.header-btn { align-items: center; gap: 10px; }
.header-btn .btn-default { white-space: nowrap; }

/* The header now carries a solid white background in both states (see
   header.main-header in custom.css), so utility text reads as a dimmer dark
   tone next to the dark nav links, rather than the dimmer-white this used
   when the header was transparent over the hero photo. */
.hdr-utility {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: Sora, sans-serif; font-size: 13.5px; font-weight: 500;
    color: rgba(38,38,38,.6); text-decoration: none; white-space: nowrap;
    padding: 6px 2px; transition: color .18s ease;
}
.hdr-utility i { font-size: 10px; opacity: .8; }
.hdr-utility:hover { color: var(--rmc-ink, #262626); }

/* Between 1200px (raised from Bootstrap's stock 992px — see custom.css,
   the desktop nav no longer even attempts to render below 1200px) and
   ~1300px, six nav items plus two full-padded buttons are still wider than
   the container at default spacing — "Book Discovery" silently overflowed
   past the viewport edge (no scrollbar, so it just vanished off-screen).
   Tightening nav-link and button padding in just this narrow range closes
   the gap without touching how the header looks at the widths either side. */
@media (min-width: 1200px) and (max-width: 1300px) {
    .main-menu .nav-menu-wrapper { margin-left: 14px; }
    .main-menu ul li a { padding: 14px 12px !important; }
    .header-btn { gap: 8px; }
    .header-btn .btn-default { padding-left: 16px; padding-right: 16px; }
}

/* In the collapsed mobile menu the buttons stack, so the link can come back. */
@media (max-width: 991px) {
    .header-btn { align-items: stretch; }
    .hdr-utility { justify-content: center; order: 3; padding-top: 10px; }
}

/* Both header pills computed to the same sage fill, so "Book Discovery" and
   "Enrol Now" carried identical weight and nothing led. Enrol Now keeps the
   solid brand fill as the primary commercial action; Book Discovery drops to a
   ghost, which is the correct weight for a consultative secondary.
   An inset shadow rather than a real border, so neither pill changes size and
   the row does not reflow. Border and text are dark-toned to match the
   header's white background (the base .btn-default text colour is white,
   meant for a solid fill, so it needs overriding here too).
   .btn-default has its own hover effect independent of this: a skewed
   ::before panel sweeps in var(--primary-color) — near-black — behind the
   text on hover (see .btn-default:hover::before in custom.css). Forcing the
   resting dark text to *stay* dark through that hover state made the text
   sit on a black fill with almost no contrast — that's the "goes black"
   button. The resting state needs dark text (readable on white); the hover
   state needs it to switch to white (readable on that black sweep). */
.header-btn .btn-default:not(.btn-enrol) {
    background: transparent;
    color: var(--rmc-ink, #262626) !important;
    box-shadow: inset 0 0 0 1.5px rgba(38,38,38,.3);
}
.header-btn .btn-default:not(.btn-enrol):hover {
    color: #fff !important;
    box-shadow: inset 0 0 0 1.5px rgba(38,38,38,.55);
}

/* ── Homepage strip ────────────────────────────────────── */
/* On a programme page the strip sits directly under a dark hero, so a cream bar
   reads as a distinct band. On the homepage the section above it is #f9f9f9 and
   the strip's own #f7f7f4 vanished into it — a two-value difference is not a
   boundary. Boxing it gives the bar an edge of its own, with a sage left rule
   marking it as the action rather than more page furniture. */
.rm-cta-strip--home {
    background: transparent;
    border-bottom: none;
    padding: 34px 0;
}
.rm-cta-strip--home .rm-cta-strip__inner {
    background: linear-gradient(180deg, #fbfbf9 0%, var(--rmc-soft) 100%);
    border: 1px solid var(--rmc-line);
    border-left: 3px solid var(--rmc-accent);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(38,38,38,.04);
}
@media (max-width: 600px) {
    .rm-cta-strip--home { padding: 22px 0; }
    .rm-cta-strip--home .rm-cta-strip__inner { padding: 18px; }
}

/* ── Hero secondary button ─────────────────────────────── */
/* "Partner With ReMind" reuses .btn-default.btn-highlighted, the site's
   standard ghost-button pattern — but every other page uses that pattern on
   a light section background. The hero sits on a dark photo, so the
   pattern's dark border/text (#262626 on #262626-ish photo shadow) was
   nearly invisible. .btn-default's own hover already sweeps in a dark fill
   (see .btn-default:hover::before in custom.css), so white text stays
   readable resting AND on hover — no separate hover override needed. */
.hero-btn .btn-highlighted {
    border-color: rgba(255,255,255,.65);
    color: #fff;
}
.hero-btn .btn-highlighted:hover {
    border-color: #fff;
}