/* ==========================================================================
   JPC Style Guide 2025 – colour layer (loads last)

   Corporate palette (Style Guide s2.1):
     JPC Burgundy  #880D27  Pantone 202C   – primary
     JPC Blue      #4980C1  Pantone 660C   – primary
   "No other colours are to be added to corporate material and tonal
   variations should be avoided where possible."

   M1 uses a gold accent (close to the Early Years secondary colour) and the
   JPIC navy for big surfaces. Here gold becomes JPC Blue (swapped at build
   time in the copied M1 CSS) and the navy surfaces become JPC Burgundy or
   JPC Blue. Reversed (white) logos only sit on burgundy, blue or a dark
   area of a photograph (s1.4).

   Contrast: white on JPC Blue is 4.1:1, which meets WCAG AA for large text
   (18.66px bold or 24px regular) and for icons, but not for small text. So
   blue carries buttons with large bold labels, highlights, icons, lines and
   backgrounds; small text on dark photos stays white.
   ========================================================================== */

:root{
  --jpc-burgundy:#880D27;
  --jpc-blue:#4980C1;
  /* Point M1's tokens at the corporate palette */
  --jpic-gold:#4980C1;
  --jpic-gold-dark:#4980C1;
  --jpic-blue:#4980C1;
  --jpic-blue-light:#4980C1;
  --jpic-blue-dark:#880D27;
  --jpic-burgundy-dark:#880D27;      /* no tonal variations */
}

/* ---------- Buttons: blue fill, white label at large-text size (AA) ---------- */
.km-btn{font-size:1.1875rem;letter-spacing:.2px;padding:13px 28px;}
.km-btn-gold,
.jpic-footer .km-btn-gold{background:var(--jpc-blue);color:#fff;box-shadow:0 4px 16px rgba(73,128,193,.35);}
.km-btn-gold:hover,
.jpic-footer .km-btn-gold:hover{background:var(--jpc-blue);color:#fff;box-shadow:0 8px 24px rgba(73,128,193,.5);transform:translateY(-2px);}
body.jpc-domestic .hx-btn-blue:hover{background:var(--jpc-burgundy);border-color:var(--jpc-burgundy);filter:brightness(1.12);}
:focus-visible{outline-color:var(--jpc-blue);}

/* ---------- Hero: dark photo wash (neutral) with a burgundy edge, blue highlight ---------- */
body.jpc-domestic .km-hero-overlay{
  background:
    linear-gradient(0deg, rgba(10,10,14,.92) 0%, rgba(10,10,14,.62) 34%, rgba(10,10,14,.22) 62%, rgba(10,10,14,.08) 100%),
    linear-gradient(110deg, rgba(136,13,39,.55) 0%, rgba(136,13,39,.18) 55%, rgba(136,13,39,0) 100%);
}
.km-hero-tagline,
body.jpc-domestic .km-hero-title-accent{color:var(--jpc-blue);}
.km-hero-tagline{text-shadow:0 1px 10px rgba(0,0,0,.45);}
.jp-shine{
  --jp-shine-1:#4980C1; --jp-shine-2:#4980C1; --jp-shine-3:#ffffff;
  --jp-shine-4:#4980C1; --jp-shine-5:#4980C1; --jp-shine-6:#4980C1;
}

/* ---------- Section labels: burgundy text, blue rule ---------- */
body.jpc-domestic .km-label,
body.jpc-domestic .hx-zone .km-label{color:var(--jpc-burgundy);}
body.jpc-domestic .km-label::before,
body.jpc-domestic .hx-zone .km-label::before{background:var(--jpc-blue);}

/* ---------- Year-level tiles: neutral photo darkening, white text ---------- */
body.jpc-domestic .hx-door{box-shadow:0 8px 24px rgba(20,20,26,.14);}
body.jpc-domestic .hx-door::after{background:linear-gradient(180deg,rgba(12,12,16,.04) 0%,rgba(12,12,16,.34) 45%,rgba(12,12,16,.86) 100%);}
body.jpc-domestic .hx-door:hover::after,
body.jpc-domestic .hx-door:focus-visible::after{background:linear-gradient(180deg,rgba(136,13,39,.12) 0%,rgba(12,12,16,.5) 45%,rgba(12,12,16,.92) 100%);}
body.jpc-domestic .hx-door:hover,
body.jpc-domestic .hx-door:focus-visible{box-shadow:0 18px 40px rgba(20,20,26,.26);}
body.jpc-domestic .hx-door:focus-visible{box-shadow:0 0 0 3px var(--jpc-blue),0 18px 40px rgba(20,20,26,.26);}
/* (the ring is a shadow, which Windows contrast themes remove: an invisible outline beside it is drawn there instead) */
body.jpc-domestic .hx-door:focus-visible{outline:3px solid transparent;outline-offset:3px;}
body.jpc-domestic .hx-door-tag{color:#fff;display:inline-flex;align-items:center;gap:8px;}
body.jpc-domestic .hx-door-tag::before{content:'';width:18px;height:3px;border-radius:2px;background:var(--jpc-blue);}
body.jpc-domestic .hx-door-cue{color:#fff;}

/* ---------- Sticky section bar ---------- */
.km-qnav{--qnav-accent:var(--jpc-blue);}

/* ---------- Call-to-action band: JPC Blue, large white text ---------- */
.km-cta{background:var(--jpc-blue);}
.km-cta-bg{display:none;}
.km-cta-crest{color:#fff;}
.km-cta-text p{color:#fff;font-size:1.1875rem;font-weight:700;}
.km-cta .km-btn-gold{background:#fff;color:var(--jpc-burgundy);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.km-cta .km-btn-gold:hover{background:#fff;color:var(--jpc-burgundy);}
.km-cta .km-btn-outline{border-color:#fff;color:#fff;}

/* ---------- Footer: JPC Burgundy (reversed logo allowed), blue accents only as lines ---------- */
.jpic-footer,
body.jpc-domestic .jpic-footer{--jf-navy:#880D27;--jf-navy-deep:#880D27;background:var(--jpc-burgundy);border-top:4px solid var(--jpc-blue);}
.jf-bottom{background:var(--jpc-burgundy);border-top:1px solid rgba(255,255,255,.18);}
body.jpc-domestic .jf-heading{color:#fff;}
.jpic-footer .jf-ic,
.jpic-footer .jf-links a::before,
.jpic-footer .jf-links li::before{color:#fff;}
.jpic-footer .km-btn-gold{box-shadow:0 4px 16px rgba(0,0,0,.2);}

/* ---------- Rail: icons stay white on burgundy; blue marks the current page ---------- */
.jpicnav-rail-item:hover .jpicnav-icon,
.jpicnav-rail-item:focus-visible .jpicnav-icon,
.jpicnav-rail-item-cta .jpicnav-icon,
.jpicnav-rail-item-cta:hover .jpicnav-icon{color:#fff;}
.jpicnav-rail-item-cta:hover,
.jpicnav-rail-item-cta:focus-visible{background:linear-gradient(90deg, rgba(73,128,193,.4), rgba(73,128,193,.12));}
body.jpc-domestic .jpicnav-rail-brand .jpicnav-toggle{background-color:var(--jpc-burgundy);color:#fff;border-color:#fff;}
.jpicnav :focus-visible{outline-color:#fff;}
.jpicnav-rail-item[aria-current="page"]::before{background:var(--jpc-blue);}

/* ---------- Onboarding components ---------- */
.ob-video .ob-play{background:var(--jpc-blue);color:#fff;}
.ob-docs a::after{color:var(--jpc-blue);opacity:1;}
.ob-rules li::before{background:var(--jpc-blue);box-shadow:0 0 0 4px rgba(73,128,193,.2);}
.ob-mobile-list .ob-mobile-head::before{background:var(--jpc-blue);}
.ob-mobile-list a[aria-current="page"]::after{background:var(--jpc-blue);}
.hx-door[aria-current="page"]{outline-color:var(--jpc-blue);}
.ob-checklist .jpcd-steps li:focus-visible{outline-color:var(--jpc-blue);}
.ob-progress-fill{background:var(--jpc-burgundy);}
.jpcd-divert{border-left-color:var(--jpc-blue);}

/* ---------- Specificity matches for M1's domestic overrides ---------- */
body.jpc-domestic .km-btn-gold,
body.jpc-domestic .jpic-footer .km-btn-gold{color:#fff;background:var(--jpc-blue);}
body.jpc-domestic .km-cta .km-btn-gold{color:var(--jpc-burgundy);background:#fff;}
body.jpc-domestic .jpic-footer .km-btn{font-size:1.1875rem;}
body.jpc-domestic .km-qnav-pill,
body.jpc-domestic .km-qnav-pill.is-ready{background:var(--jpc-burgundy);}
/* Small grey notes: darker grey to reach 4.5:1 on white */
.ob-docs a small,.ob-figure figcaption{color:var(--grey-600);}

/* ---------- Readability fixes (found by the contrast audit) ---------- */
/* M1's accordion answers are 14px grey-500 (4.4:1). FAQ answers are core content: darker and slightly larger. */
.km-acc-body,.km-acc-body p,.km-acc-body li{color:var(--grey-700);font-size:15px;line-height:1.7;}
.ob-tick-hint,.ob-days tr.is-muted td{color:var(--grey-600);}
#help .jf-contact a{color:var(--jpc-burgundy);font-weight:700;}
#help .jf-contact .jf-ic{color:var(--jpc-blue);}
/* Accordion +/- icon used JPIC red */
.km-acc-item summary::after{color:var(--jpc-burgundy);}
/* Navy-tinted shadows → neutral */
.jpicnav-rail-brand .jpicnav-toggle{box-shadow:0 2px 10px rgba(0,0,0,.3);}
.km-qnav{box-shadow:0 1px 0 rgba(0,0,0,.04);}
body.jpc-domestic .hx-btn-blue{box-shadow:0 4px 14px rgba(136,13,39,.25);}
.ob-program dt,.ob-mobile-list .ob-mobile-head{color:var(--grey-600);}
body.jpc-domestic .jpicnav-rail{box-shadow:2px 0 18px rgba(0,0,0,.18);}
.jpicnav-mobile-bar{box-shadow:0 2px 14px rgba(0,0,0,.16);}
/* Footer button: narrow column, so white with burgundy text (9.8:1) at normal size instead of a large blue button */
body.jpc-domestic .jpic-footer .km-btn-gold{background:#fff;color:var(--jpc-burgundy);font-size:15px;white-space:nowrap;}
body.jpc-domestic .jpic-footer .km-btn-gold:hover{background:#fff;color:var(--jpc-burgundy);}
/* Hero: neutral darkening behind the text column (no burgundy wash – blue type needs a dark, neutral ground) */
body.jpc-domestic .km-hero-overlay{
  background:
    linear-gradient(90deg, rgba(10,10,14,.78) 0%, rgba(10,10,14,.6) 38%, rgba(10,10,14,.2) 70%, rgba(10,10,14,.05) 100%),
    linear-gradient(0deg, rgba(10,10,14,.7) 0%, rgba(10,10,14,.25) 40%, rgba(10,10,14,0) 70%);
}

/* ---------- 13 Oct 2026: user feedback ---------- */
/* Hero tagline (e.g. "Onboarding Portal · 2026") in white */
.km-hero-tagline{color:#fff;}
/* Call-to-action band: white, burgundy heading and buttons (was a JPC Blue fill) */
.km-cta{background:#fff;border-top:1px solid var(--grey-200);}
.km-cta-crest{color:var(--jpc-burgundy);}
.km-cta-text h2{color:var(--jpc-burgundy);}
.km-cta-text p{color:var(--grey-700);font-size:1.05rem;font-weight:400;}
body.jpc-domestic .km-cta .km-btn-gold{background:var(--jpc-burgundy);color:#fff;box-shadow:0 4px 14px rgba(136,13,39,.25);}
body.jpc-domestic .km-cta .km-btn-gold:hover{background:var(--jpc-burgundy);color:#fff;}
.km-cta .km-btn-outline,
.km-cta .km-btn-outline:hover{border-color:var(--jpc-burgundy);color:var(--jpc-burgundy);background:transparent;}
/* M1 sets .km-btn-outline colour with !important, so the white band needs the same */
.km-cta .km-btn-outline{color:var(--jpc-burgundy) !important;border-color:var(--jpc-burgundy);background:transparent;}
.km-cta .km-btn-outline:hover{color:#fff !important;background:var(--jpc-burgundy);}
/* …and so do the buttons in the page's sections (light backgrounds), where the editor's Style › Secondary puts
   an outline button: burgundy like the white band's, never the banner's white */
.ob-actions .km-btn-outline{color:var(--jpc-burgundy) !important;border-color:var(--jpc-burgundy);background:transparent;}
.ob-actions .km-btn-outline:hover,.ob-actions .km-btn-outline:focus-visible{color:#fff !important;background:var(--jpc-burgundy);border-color:var(--jpc-burgundy);}

/* ---------- 30 Oct 2026: more college button styles (go-live A6) ---------- */
/* The editor's Edit button box offers Main, Secondary and these, but only where the server's table allows each
   (tools/editor/server/36-Ops.cs, ButtonPlaces): White on the banner's photo; Blue and Blue outline in the white
   band at the end of the page; Burgundy and Blue outline in sections (white or grey). tools/editor/test/test-v4.js
   checks each allowed pair in the built CSS: the words against the button in the normal, hover and keyboard-focus
   states (labels are 19px bold, large text: 3:1; the filled styles reach 4.5:1 anyway), and that the button stands
   out from its background. Hover and focus keep the colours; only the lift, the shadow and the focus ring change. */
body.jpc-domestic .km-btn.ob-s-btn-burgundy,
body.jpc-domestic .km-btn.ob-s-btn-burgundy:hover,
body.jpc-domestic .km-btn.ob-s-btn-burgundy:focus-visible{background:var(--jpc-burgundy);border-color:var(--jpc-burgundy);color:#fff;}
body.jpc-domestic .km-btn.ob-s-btn-burgundy{box-shadow:0 4px 14px rgba(136,13,39,.25);}
body.jpc-domestic .km-btn.ob-s-btn-blue,
body.jpc-domestic .km-btn.ob-s-btn-blue:hover,
body.jpc-domestic .km-btn.ob-s-btn-blue:focus-visible{background:var(--jpc-blue);border-color:var(--jpc-blue);color:#fff;}
body.jpc-domestic .km-btn.ob-s-btn-blue{box-shadow:0 4px 16px rgba(73,128,193,.35);}
body.jpc-domestic .km-btn.ob-s-btn-blue-outline{background:transparent;border-color:var(--jpc-blue);color:var(--jpc-blue);box-shadow:none;}
body.jpc-domestic .km-btn.ob-s-btn-blue-outline:hover,
body.jpc-domestic .km-btn.ob-s-btn-blue-outline:focus-visible{background:var(--jpc-blue);border-color:var(--jpc-blue);color:#fff;}
body.jpc-domestic .km-btn.ob-s-btn-white,
body.jpc-domestic .km-btn.ob-s-btn-white:hover,
body.jpc-domestic .km-btn.ob-s-btn-white:focus-visible{background:#fff;border-color:#fff;color:var(--jpc-burgundy);}
body.jpc-domestic .km-btn.ob-s-btn-white{box-shadow:0 4px 16px rgba(0,0,0,.25);}
body.jpc-domestic .km-btn.ob-s-btn-burgundy:hover,
body.jpc-domestic .km-btn.ob-s-btn-blue:hover,
body.jpc-domestic .km-btn.ob-s-btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.22);}
/* keyboard focus: a ring that stands out from the place's background (white on the banner's dark photo) */
body.jpc-domestic .km-btn[class*="ob-s-btn-"]:focus-visible{outline:3px solid var(--jpc-burgundy);outline-offset:3px;}
body.jpc-domestic .km-hero-buttons .km-btn[class*="ob-s-btn-"]:focus-visible{outline-color:#fff;}
/* Everything else on the banner photo (the default banner buttons, the handbook breadcrumbs, Back): JPC Blue can
   vanish on a photo, so the ring is white with a dark halo under it that keeps it clear on light parts of the photo */
.km-hero :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(0,0,0,.55);}

/* ---------- 1 Nov 2026: collapsed-rail name pill (js/onboarding.js) in the corporate palette ---------- */
/* M1 draws it in its blue (here JPC Blue) on mist, under 4.5:1 for its 13.5px text: burgundy text, blue edge */
.jpicnav-tip{color:var(--jpc-burgundy);border-left-color:var(--jpc-blue);box-shadow:6px 6px 20px rgba(0,0,0,.2);}
.jpicnav-tip::before{border-right-color:var(--jpc-blue);}