/* JPLP program page. All component styles are scoped to .jplp. */
@font-face {
  font-family: "JPLP Almarai";
  src: url("../fonts/Almarai-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JPLP Almarai";
  src: url("../fonts/Almarai-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.jplp-document { margin: 0; }

.jplp {
  --jplp-ink: #123354;
  --jplp-text: #43566a;
  --jplp-blue: #176395;
  --jplp-red: #c81520;
  --jplp-border: #dbe3eb;
  --jplp-surface: #f4f7fa;
  --jplp-width: 1200px;
  --jplp-gutter: clamp(16px, 3vw, 32px);
  color: var(--jplp-text);
  background: #fff;
  direction: rtl;
  font: 400 16px/1.9 "JPLP Almarai", Tahoma, Arial, sans-serif;
  text-align: start;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.jplp, .jplp *, .jplp *::before, .jplp *::after { box-sizing: border-box; }
.jplp img { display: block; max-width: 100%; }
.jplp a { color: inherit; text-decoration: none; }
.jplp a:focus-visible, .jplp summary:focus-visible, .jplp [tabindex]:focus-visible {
  outline: 3px solid #176395;
  outline-offset: 5px;
}
.jplp h1, .jplp h2, .jplp h3, .jplp p, .jplp ul, .jplp dl { margin: 0; }
.jplp h1, .jplp h2, .jplp h3 { color: var(--jplp-ink); font-family: inherit; font-weight: 700; }
.jplp h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.5; }
.jplp h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.65; }
.jplp h3 { font-size: 21px; line-height: 1.7; }
.jplp .jplp-container { width: min(var(--jplp-width), calc(100% - var(--jplp-gutter) * 2)); margin-inline: auto; }
.jplp .jplp-skip { position: absolute; z-index: 5; inset-block-start: 12px; inset-inline-start: 16px; padding: 10px 16px; background: #fff; border: 2px solid var(--jplp-blue); transform: translateY(-200%); }
.jplp .jplp-skip:focus { transform: translateY(0); }
.jplp [id] { scroll-margin-block-start: 24px; }

/* Header */
.jplp .jplp-header { background: #fff; border-block-end: 1px solid var(--jplp-border); }
.jplp .jplp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.jplp .jplp-brand { flex: 0 0 auto; }
.jplp .jplp-brand img { width: 220px; height: auto; }
.jplp .jplp-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; }
.jplp .jplp-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.jplp .jplp-nav a:hover { color: var(--jplp-blue); text-decoration: underline; text-underline-offset: 7px; }

/* President's statement */
.jplp .jplp-president { padding-block: clamp(32px, 5vw, 64px); background: linear-gradient(180deg, #f4f7fa, #fff); border-block-end: 1px solid var(--jplp-border); }
.jplp .jplp-president-layout { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.jplp .jplp-president-photo { margin: 0; position: sticky; inset-block-start: 24px; }
.jplp .jplp-president-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: #d7e0e6; border-block-end: 4px solid var(--jplp-red); }
.jplp .jplp-president-photo figcaption { padding-block-start: 14px; text-align: center; }
.jplp .jplp-president-photo strong { display: block; color: var(--jplp-ink); font-size: 18px; }
.jplp .jplp-president-photo span { display: block; color: #52677a; font-size: 13px; }
.jplp .jplp-president-copy h2 { margin-block-end: 16px; }
.jplp .jplp-president-quote { margin: 0; padding-inline-start: 22px; border-inline-start: 3px solid #1768a4; color: #2f465c; font-size: 16px; line-height: 2; }
.jplp .jplp-president-quote p + p, .jplp .jplp-president-quote ol + p { margin-block-start: 14px; }
.jplp .jplp-directives { display: grid; gap: 12px; margin-block: 14px 0; padding-inline-start: 22px; }
.jplp .jplp-directives li::marker { color: var(--jplp-blue); font-weight: 700; }
.jplp .jplp-directive-key { padding: 12px 16px; background: #fff; border: 1px solid var(--jplp-border); border-inline-start: 4px solid var(--jplp-red); color: var(--jplp-ink); font-weight: 700; }

/* Academy leaders' statements */
.jplp .jplp-leaders { padding-block: clamp(40px, 5vw, 64px); border-block-end: 1px solid var(--jplp-border); }
.jplp .jplp-leaders h2 { margin-block-end: 26px; }
.jplp .jplp-leader-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.jplp .jplp-leader { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start; margin: 0; padding: 22px; background: var(--jplp-surface); border-block-start: 3px solid #1768a4; }
.jplp .jplp-leader + .jplp-leader { border-block-start-color: var(--jplp-red); }
.jplp .jplp-leader img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #d7e0e6; }
.jplp .jplp-leader blockquote { margin: 0; color: #2f465c; font-size: 15px; line-height: 1.95; }
.jplp .jplp-leader figcaption { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--jplp-border); }
.jplp .jplp-leader strong { display: block; color: var(--jplp-ink); font-size: 17px; }
.jplp .jplp-leader span { display: block; color: #52677a; font-size: 13px; }

/* Hero remains in document flow at every breakpoint. */
.jplp .jplp-hero { padding-block: 24px 0; background: linear-gradient(#fff 66%, #f4f7fa 66%); }
.jplp .jplp-hero-layout { display: grid; grid-template-columns: 1.04fr 1fr; border: 1px solid var(--jplp-border); }
.jplp .jplp-hero-copy { align-self: stretch; padding: clamp(28px, 3.5vw, 48px); background: #f7f8fa; border-block-start: 3px solid #1768a4; }
.jplp .jplp-eyebrow { margin-block-end: 17px; color: #3b576f; font-size: 14px; line-height: 1.8; }
.jplp .jplp-hero-description { max-width: 39ch; margin-block-start: 20px; font-size: 17px; }
.jplp .jplp-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-block-start: 28px; }
.jplp .jplp-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 50px; max-width: 100%; padding: 11px 19px; border: 1px solid transparent; font: 700 14px/1.8 "JPLP Almarai", Tahoma, Arial, sans-serif; text-align: center; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; }
.jplp .jplp-button-primary { color: #fff; background: var(--jplp-red); border-color: var(--jplp-red); }
.jplp .jplp-button-primary:hover { background: #a30e18; border-color: #a30e18; }
.jplp .jplp-button-secondary { background: #fff; color: var(--jplp-ink); border-color: #c4ced9; }
.jplp .jplp-button-secondary:hover { background: #eaf0f6; border-color: #176395; }
.jplp .jplp-filetype { font-size: 10px; font-weight: 400; color: #536a7f; }
.jplp .jplp-action-hint { margin-block-start: 13px; font-size: 12px; line-height: 1.8; color: #52677a; }
.jplp .jplp-hero-image { display: block; min-width: 0; min-height: 460px; position: relative; background: #d7e0e6; }
.jplp .jplp-hero-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 51% 50%; }
.jplp .jplp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--jplp-border); border-block-start: 0; }
.jplp .jplp-facts > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 22px 14px; text-align: center; }
.jplp .jplp-facts > div + div { border-inline-start: 1px solid var(--jplp-border); }
.jplp .jplp-facts dt { font-size: 12px; color: #52677a; }
.jplp .jplp-facts dd { margin: 0; color: #13558e; font-size: 24px; font-weight: 700; line-height: 1.7; }
.jplp .jplp-facts dd span { display: block; color: #52677a; font-size: 12px; font-weight: 400; }

/* Content sections */
.jplp .jplp-section { padding-block: clamp(48px, 6vw, 76px); }
.jplp .jplp-section-muted { background: var(--jplp-surface); }
.jplp .jplp-kicker { margin-block-end: 10px; color: var(--jplp-blue); font-size: 13px; font-weight: 700; }
.jplp .jplp-about-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 76px); }
.jplp .jplp-prose p + p { margin-block-start: 16px; }
.jplp .jplp-vision { margin-block-start: 25px; padding-inline-start: 22px; border-inline-start: 3px solid #1768a4; }
.jplp .jplp-vision h3 { margin-block-end: 8px; font-size: 18px; }
.jplp .jplp-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.jplp .jplp-section-intro { margin-block: 16px 24px; max-width: 58ch; }
.jplp .jplp-section-heading .jplp-section-intro { margin-block-end: 0; }
.jplp .jplp-program-logo { flex: 0 0 auto; width: 150px; height: auto; }
.jplp .jplp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block-start: 34px; }
.jplp .jplp-card { --jplp-card-accent: #1768a4; padding: 25px; background: #fff; border-block-start: 3px solid var(--jplp-card-accent); }
.jplp .jplp-card-green { --jplp-card-accent: #23745f; }
.jplp .jplp-card-red { --jplp-card-accent: #b91e3d; }
.jplp .jplp-icon { display: block; float: left; margin-right: 12px; width: 36px; height: 36px; color: var(--jplp-card-accent); fill: none; stroke: currentColor; stroke-width: 1.7; }
.jplp .jplp-card-caption { margin-block: 3px 22px; text-align: start; color: #4e6478; font-size: 11px; letter-spacing: 1.5px; }
.jplp .jplp-card h3 { clear: both; margin-block-end: 10px; }
.jplp .jplp-card > p:last-child { font-size: 15px; }
.jplp .jplp-topics { display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; margin-block-start: 40px; padding-block-start: 30px; border-block-start: 1px solid #cdd9e4; }
.jplp .jplp-topics h3 { margin-block-end: 8px; }
.jplp .jplp-topics p { font-size: 14px; }
.jplp .jplp-topic-list { display: grid; gap: 11px; padding-inline-start: 20px; }
.jplp .jplp-topic-list li::marker { color: #176395; }
.jplp .jplp-age-note { display: inline-block; margin-inline-start: 6px; color: #395d7c; font-size: 13px; }
.jplp .jplp-admission-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.jplp .jplp-requirements { padding: 28px; background: var(--jplp-surface); border: 1px solid var(--jplp-border); }
.jplp .jplp-requirements h3 { margin-block-end: 16px; }
.jplp .jplp-requirements ul { display: grid; gap: 12px; padding-inline-start: 20px; }
.jplp .jplp-faq-section { border-block-start: 1px solid var(--jplp-border); }
.jplp .jplp-faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.jplp .jplp-faq details { border-block-end: 1px solid var(--jplp-border); }
.jplp .jplp-faq details:first-child { border-block-start: 1px solid var(--jplp-border); }
.jplp .jplp-faq summary { position: relative; padding: 20px 0; padding-inline-end: 30px; color: var(--jplp-ink); cursor: pointer; font-weight: 700; list-style: none; min-height: 60px; }
.jplp .jplp-faq summary::-webkit-details-marker { display: none; }
.jplp .jplp-faq summary::after { content: "+"; position: absolute; inset-inline-end: 3px; inset-block-start: 15px; font: 28px/1.5 Arial, sans-serif; font-weight: 400; }
.jplp .jplp-faq details[open] summary::after { content: "\2212"; }
.jplp .jplp-faq details > div { padding-block-end: 22px; }
.jplp .jplp-faq a { color: #13558e; text-decoration: underline; text-underline-offset: 4px; }

/* Transformational learning pillars */
.jplp .jplp-prose strong { color: var(--jplp-ink); }
.jplp .jplp-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block-start: 24px; padding: 0; list-style: none; }
.jplp .jplp-pillars li { padding: 16px 18px; background: var(--jplp-surface); border-block-start: 3px solid #1768a4; }
.jplp .jplp-pillars li:nth-child(2) { border-block-start-color: #23745f; }
.jplp .jplp-pillars li:nth-child(3) { border-block-start-color: #b91e3d; }
.jplp .jplp-pillars strong { display: block; font-size: 19px; line-height: 1.6; }
.jplp .jplp-pillars span { display: block; font-size: 13px; color: #52677a; }

/* Journey */
.jplp .jplp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.jplp .jplp-step { --jplp-step-accent: #1768a4; position: relative; padding: 28px; background: #fff; border-inline-start: 4px solid var(--jplp-step-accent); }
.jplp .jplp-step-red { --jplp-step-accent: var(--jplp-red); }
.jplp .jplp-step-num { margin-block-end: 6px; color: var(--jplp-step-accent); font-size: 13px; font-weight: 700; }
.jplp .jplp-step h3 { margin-block-end: 10px; }
.jplp .jplp-step > p:last-child { font-size: 15px; }
.jplp .jplp-tracks { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px 35px; align-items: center; margin-block-start: 36px; padding-block-start: 28px; border-block-start: 1px solid #cdd9e4; }
.jplp .jplp-tracks > p { grid-column: 1; font-size: 14px; }
.jplp .jplp-tracks h3 { grid-column: 1; }
.jplp .jplp-track-list { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jplp .jplp-track-list > div { padding: 18px 20px; background: #fff; border: 1px solid var(--jplp-border); }
.jplp .jplp-track-list strong { display: block; color: var(--jplp-ink); font-size: 20px; }
.jplp .jplp-track-list span { color: #13558e; font-weight: 700; }

/* Statement band */
.jplp .jplp-statement { padding-block: clamp(40px, 5vw, 60px); color: #e8eff7; background: #13558e; }
.jplp .jplp-statement-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; }
.jplp .jplp-statement h2 { color: #fff; margin-block-end: 10px; }
.jplp .jplp-statement p { max-width: 60ch; }
.jplp .jplp-button-light { flex: 0 0 auto; color: var(--jplp-ink); background: #fff; border-color: #fff; }
.jplp .jplp-button-light:hover { background: #eaf0f6; }
.jplp .jplp-statement a:focus-visible { outline-color: #fff; }

/* Parents note */
.jplp .jplp-parents { margin-block-start: 30px; padding-inline-start: 20px; border-inline-start: 3px solid #23745f; }
.jplp .jplp-parents h3 { margin-block-end: 6px; font-size: 18px; }
.jplp .jplp-parents p { font-size: 15px; }

/* Footer */
.jplp .jplp-footer { padding-block: 32px; color: #e8eff7; background: #123354; }
.jplp .jplp-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; }
.jplp .jplp-footer-name { font-size: 18px; font-weight: 700; margin-block-end: 4px; }
.jplp .jplp-footer p + p { color: #cedbe8; font-size: 12px; }
.jplp .jplp-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.jplp .jplp-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.jplp .jplp-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.jplp .jplp-footer a:focus-visible { outline-color: #fff; }

@media (max-width: 1023px) {
  .jplp .jplp-leader-list { grid-template-columns: 1fr; }
  .jplp .jplp-hero-copy { padding: 28px; }
  .jplp .jplp-hero-image { min-height: 420px; }
  .jplp .jplp-card { padding: 22px; }
  .jplp .jplp-footer-inner { align-items: start; flex-direction: column; }
}

@media (max-width: 767px) {
  .jplp .jplp-header-inner { flex-direction: column; gap: 4px; padding-block: 10px 6px; }
  .jplp .jplp-brand img { width: 200px; }
  .jplp .jplp-nav { width: 100%; justify-content: center; gap: 0 18px; font-size: 12px; }
  .jplp .jplp-hero { padding-block-start: 16px; }
  .jplp .jplp-hero-layout { grid-template-columns: 1fr; }
  .jplp .jplp-hero-copy { padding: 25px 24px; }
  .jplp .jplp-hero-description { font-size: 16px; margin-block-start: 16px; }
  .jplp .jplp-actions { margin-block-start: 22px; }
  .jplp .jplp-hero-image { min-height: 0; aspect-ratio: 1 / 1; }
  .jplp .jplp-facts > div { padding: 17px 8px; }
  .jplp .jplp-facts dt { font-size: 10px; }
  .jplp .jplp-facts dd { font-size: 19px; }
  .jplp .jplp-facts dd span { font-size: 10px; }
  .jplp .jplp-about-layout, .jplp .jplp-topics, .jplp .jplp-admission-layout, .jplp .jplp-faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .jplp .jplp-section-heading { align-items: start; gap: 15px; }
  .jplp .jplp-section-heading h2 { font-size: 27px; }
  .jplp .jplp-program-logo { width: 90px; }
  .jplp .jplp-cards { grid-template-columns: 1fr; gap: 15px; margin-block-start: 26px; }
  .jplp .jplp-card { padding: 24px; }
  .jplp .jplp-card-caption { margin-block-end: 16px; }
  .jplp .jplp-requirements { padding: 24px; }
  .jplp .jplp-steps { grid-template-columns: 1fr; gap: 15px; }
  .jplp .jplp-step { padding: 22px; }
  .jplp .jplp-tracks { grid-template-columns: 1fr; }
  .jplp .jplp-track-list { grid-column: 1; grid-row: auto; }
  .jplp .jplp-statement-inner { flex-direction: column; align-items: start; }
  .jplp .jplp-president-layout { grid-template-columns: 1fr; }
  .jplp .jplp-president-photo { position: static; max-width: 260px; margin-inline: auto; }
  .jplp .jplp-president-quote { padding-inline-start: 16px; font-size: 15px; }
}

@media (max-width: 479px) {
  .jplp .jplp-leader { grid-template-columns: 1fr; padding: 18px; }
  .jplp .jplp-leader img { width: 160px; margin-inline: auto; }
  .jplp .jplp-pillars { grid-template-columns: 1fr; }
}

@media (max-width: 399px) {
  .jplp .jplp-section-heading { flex-wrap: wrap; }
  .jplp .jplp-section-heading > div { flex: 1 1 100%; }
  .jplp .jplp-program-logo { width: 100px; }
  .jplp .jplp-actions { flex-direction: column; }
  .jplp .jplp-facts { grid-template-columns: 1fr; }
  .jplp .jplp-facts > div { padding-block: 13px; }
  .jplp .jplp-facts > div + div { border-inline-start: 0; border-block-start: 1px solid var(--jplp-border); }
  .jplp .jplp-facts dt { font-size: 12px; }
  .jplp .jplp-facts dd span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .jplp .jplp-button { transition: none; }
}

@media print {
  .jplp .jplp-header, .jplp .jplp-footer, .jplp .jplp-skip, .jplp .jplp-actions, .jplp .jplp-action-hint { display: none; }
  .jplp .jplp-container { width: 100%; }
  .jplp .jplp-section { padding-block: 22px; }
  .jplp .jplp-hero-image { min-height: 260px; }
  .jplp .jplp-card, .jplp .jplp-requirements { break-inside: avoid; }
}


/* ==========================================================================
   JPLP LTR (English) Support
   ========================================================================== */

.jplp[dir="ltr"] {
  direction: ltr;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.jplp[dir="ltr"] h1,
.jplp[dir="ltr"] h2,
.jplp[dir="ltr"] h3 {
  font-family: inherit;
}

.jplp[dir="ltr"] .jplp-icon {
  float: right;
  margin-left: 12px;
  margin-right: 0;
}

.jplp[dir="ltr"] .jplp-president-quote {
  border-left: 3px solid #1768a4;
  border-right: none;
  padding-left: 22px;
  padding-right: 0;
}

.jplp[dir="ltr"] .jplp-directive-key {
  border-left: 4px solid var(--jplp-red);
  border-right: 1px solid var(--jplp-border);
}

.jplp[dir="ltr"] .jplp-leader blockquote {
  border-left: 3px solid #1768a4;
  border-right: none;
  padding-left: 18px;
  padding-right: 0;
}

.jplp[dir="ltr"] .jplp-vision {
  border-left: 3px solid #1768a4;
  border-right: none;
  padding-left: 22px;
  padding-right: 0;
}

.jplp[dir="ltr"] .jplp-hero-copy {
  border-left: 3px solid #1768a4;
  border-right: none;
}