:root { --qiyadat-card-background: radial-gradient(ellipse at 0% 100%, #5b6fe8 0%, transparent 58%), radial-gradient(ellipse at 100% 0%, #454545 0%, transparent 58%), linear-gradient(165deg, #313236 0%, #424373 50%, #1b4388 100%); }
:root {
  --green: #143cff;
  --navy: #121a2d;
  --ink: #1d2947;
  --muted: #66718a;
  --line: #dce2f0;
  --soft: #f0f3ff;
  --gold: #6077ff;
}

body { background: #fff; }
.home-banner { width: 100%; padding: 0; margin: 0; }
.home-banner img { display: block; width: 100%; height: auto; }
.org-required-note { color: var(--ink); margin-bottom: 18px; }
.org-section-heading { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; margin-bottom: 20px; }
.org-vacancy { border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin: 26px 0; min-width: 0; background: #f8f9fd; }
.org-vacancy legend { padding: 0 12px; color: var(--navy); font-size: 1.2rem; font-weight: 700; }
.org-experiences { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 22px; }
.org-experiences h3 { margin-bottom: 16px; }
.org-experience-row { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; }
.org-experience-row label { flex: 1; min-width: 0; }
.org-vacancy-footer { display: flex; justify-content: end; margin-top: 20px; }
.org-accommodations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 24px; }
.org-accommodations .check { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.org-accommodations input { flex: 0 0 18px; accent-color: #1b4388; }
.org-extra-label { margin-top: 24px; }
#organization-error { color: #a12626; margin-top: 12px; }
.organization-registration .btn { background: linear-gradient(165deg,#313236,#424373 50%,#1b4388); border-color: #424373; color: white; }
@media(max-width:720px) { .org-vacancy { padding: 16px; } .org-accommodations { grid-template-columns: 1fr; } .org-experience-row { flex-wrap: wrap; } .org-experience-row label { flex-basis: 100%; } }
.employee-intro { max-width: 900px; }
.employee-heading { padding: 28px 32px; border-radius: 14px; background: linear-gradient(165deg,#313236,#424373 50%,#1b4388); color: white; margin-bottom: 24px; }
.employee-heading h1 { font-size: clamp(1.8rem,3vw,2.5rem); letter-spacing: 0; margin: 10px 0; }
.employee-heading p { color: white; }
.employee-intro ol { padding-inline-start: 24px; }
.employee-intro li { margin: 14px 0; }
.employee-terms { max-width: 960px; }
.terms-card { padding: 30px; }
.terms-draft { padding: 18px 20px; background: #f0f3ff; border-inline-start: 4px solid #424373; color: #26334d; font-size: 1rem; line-height: 1.8; }
.terms-section-title { margin-top: 28px; color: var(--navy); }
.employee-terms .terms-list { list-style: none; padding: 0; margin: 12px 0 30px; }
.terms-list > li { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; margin: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.terms-list > li:last-child { border-bottom: 0; }
.terms-list h3 { font-size: 1.3rem; color: #121a2d; margin: 0 0 10px; }
.terms-card .terms-list p { font-size: 1.125rem; line-height: 1.9; color: #27344b; margin: 0; }
.terms-documents-panel { padding: 26px; background: #f5f7fc; border: 1px solid #d4dced; border-radius: 12px; margin-bottom: 26px; }
.terms-documents-panel h2 { font-size: 1.65rem; color: #121a2d; }
.terms-card .terms-documents-intro { color: #27344b; font-size: 1.125rem; line-height: 1.9; }
.terms-documents { padding-inline-start: 26px; margin: 16px 0 0; }
.employee-terms .terms-documents li { margin: 0; padding: 10px 6px; font-size: 1.125rem; line-height: 1.8; color: #27344b; }
.terms-documents li::marker { color: #1b4388; }
.terms-actions { border-top: 1px solid var(--line); padding-top: 16px; }
.terms-actions .check { align-items: center; font-size: 1.125rem; line-height: 1.8; }
.terms-actions .check input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; }
.terms-next-help { color: #34405a; font-size: 1rem; }
.terms-actions .btn { font-size: 1.125rem; min-height: 52px; }
.employee-terms .notice { font-size: 1rem; line-height: 1.9; }
.terms-actions .btn { margin-top: 20px; background: linear-gradient(165deg,#313236,#424373 50%,#1b4388); border-color: #424373; color: white; }
.terms-actions input { accent-color: #1b4388; }
@media(max-width:720px) { .terms-card { padding: 20px; } .terms-list > li { gap: 14px; } .terms-list .goal-number { flex-basis: 40px; height: 40px; } .terms-documents-panel { padding: 20px; } .terms-actions .btn { width: 100%; } }
.employee-registration { max-width: 1120px; }
.employee-section { min-width: 0; border: 1px solid var(--line); padding: 24px; margin: 24px 0 32px; border-radius: 12px; background: white; }
.employee-section legend { display: flex; align-items: center; gap: 12px; padding: 0 10px; font-size: 1.3rem; font-weight: 700; color: var(--navy); max-width: 100%; }
.employee-section legend .goal-number { flex-basis: 40px; width: 40px; height: 40px; font-size: 1rem; }
.employee-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.employee-grid label { min-width: 0; font-size: 1rem; }
.employee-wide { grid-column: 1 / -1; }
.employee-note { margin: 0 0 20px; font-size: 1rem; }
.required-mark { color: #a12626; }
.employee-upload { padding: 20px; border: 1px dashed #7a86b1; border-radius: 10px; background: #f5f7fc; min-width: 0; }
.employee-upload input { max-width: 100%; background: white; font-size: .9rem; }
.employee-upload p { overflow-wrap: anywhere; }
.employee-submit .btn { margin-top: 20px; }
#employee-error { color: #a12626; margin-top: 12px; }
.employee-success-title { font-size: 2rem; letter-spacing: 0; margin-bottom: 16px; }
.employee-intro .row { margin-top: 24px; }
@media(max-width:720px) { .employee-grid { grid-template-columns: 1fr; gap: 18px; } .employee-wide { grid-column: auto; } .employee-heading { padding: 24px; } .employee-section { padding: 18px; } }
.journey { padding-top: 36px; padding-bottom: 40px; }
.journey h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0; margin-bottom: 24px; }
.journey-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.employment-goals { border-top: 1px solid var(--line); padding-top: 36px; padding-bottom: 44px; }
.employment-goals h2 { color: var(--navy); margin-bottom: 28px; }
.goals-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.goals-grid li { display: flex; gap: 18px; margin: 0; padding: 24px; background: #f5f7fc; border: 1px solid var(--line); border-radius: 12px; }
.goal-number { flex: 0 0 48px; height: 48px; display: grid; place-items: center; background: var(--qiyadat-card-background); color: white; border-radius: 10px; font-size: 1.2rem; font-weight: 700; }
.goals-grid h3 { color: var(--navy); margin: 0 0 10px; }
.goals-grid p { color: var(--ink); font-size: 1rem; line-height: 1.8; }
@media(max-width:720px) { .goals-grid { grid-template-columns: 1fr; gap: 16px; } .goals-grid li { padding: 20px; gap: 14px; } }
.journey-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--qiyadat-card-background); color: #fff; border: 2px solid #424373; padding: 30px; border-radius: 14px; transition: border-color .15s ease; }
.journey-card h2, .journey-card p, .journey-number, .journey-link { color: #fff; }
.journey-card h2 { font-size: 1.8rem; }
.journey-card p { margin: 12px 0 24px; font-size: 1.05rem; }
.journey-number { font-size: 1.4rem; margin-bottom: 10px; }
.journey-link { font-weight: 700; border-bottom: 1px solid #fff; margin-top: auto; }
.journey-card:hover, .journey-card:focus-visible { border-color: #6077ff; }
.journey-card:focus-visible { outline: 3px solid #143cff; outline-offset: 4px; }
.staff-login { max-width: 620px; margin: 40px auto; padding: 32px; }
.staff-login h1 { font-size: 2rem; letter-spacing: 0; margin: 20px 0; }
.staff-login p { margin-bottom: 24px; }
@media(max-width:720px) { .journey-grid { grid-template-columns: 1fr; } .journey-card { padding: 24px; } .staff-header { flex-wrap: wrap; } }
.demo { background: linear-gradient(90deg, var(--navy), #1c2d57, var(--green)); }
header { padding-top: 18px; padding-bottom: 18px; background: #fff; }
.mark { display: none; }
.brand strong { font-size: 1.65rem; color: var(--navy); }
.brand small { margin-top: 5px; }
.brand-logo {
  display: block;
  width: 240px;
  height: 129px;
  flex: 0 0 auto;
  background: #fff url('assets/qiyadat-logo-light.jpeg') 50% 43.333% / 285.714% auto no-repeat;
}
.footer-logo { display: flex; align-items: center; }
.footer-logo .brand-logo { width: 200px; height: 107px; }
.brand-copy { border-right: 1px solid var(--line); padding-right: 12px; }
.hero {
  background:
    radial-gradient(circle at 12% 18%, #dfe6ff 0, transparent 32%),
    linear-gradient(125deg, #f7f9ff, #edf1ff 58%, #e7edff);
}
.feature-board {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--navy), #173b86);
  padding-top: 190px;
  box-shadow: 18px 20px 0 #d7dfff;
}
.feature-board::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 166px;
  background: var(--navy) url('assets/qiyadat-logo-dark.jpeg') center / cover no-repeat;
  border-bottom: 1px solid #ffffff26;
}
.feature-board p, .step-line { color: #dbe3ff; }
.cta { background: linear-gradient(125deg, var(--navy), #173b86 72%, var(--green)); }
.cta p { color: #dbe3ff; }
.sidebar { background: #f3f5ff; }
#toast { background: var(--navy); }
body.contrast {
  --green: #002dd1;
  --navy: #000817;
  --ink: #000;
  --muted: #202020;
  --soft: #e7ebff;
  --line: #66708a;
}

@media (max-width: 720px) {
  header { padding: 14px 18px; }
  .brand-logo { width: 200px; height: 107px; }
  header .brand { flex: 0 0 100%; justify-content: flex-start; }
  .brand-copy { display: none; }
  .feature-board { padding-top: 165px; }
  .feature-board::before { height: 145px; }
}

/* Responsive layout for phones, tablets, and desktop displays. */
html { -webkit-text-size-adjust: 100%; }
main, header > *, .cards > *, .two-col > *, .form-grid > *, .goals-grid li > div { min-width: 0; }
img { max-width: 100%; }
header nav { flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
button, .btn, .outline { min-height: 44px; }
p, label, h1, h2, h3, .card, footer { overflow-wrap: anywhere; }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.two-col, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check input { flex-shrink: 0; }
@media (min-width: 721px) and (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wrap { padding-inline: 24px; }
  .goals-grid li { padding: 20px; gap: 12px; }
}
@media (max-width: 720px) {
  header { position: relative; gap: 12px; }
  header .brand { flex: 0 1 auto; }
  header .actions { margin-inline-start: auto; }
  header nav { overflow: visible; justify-content: flex-start; gap: 4px 18px; }
  header nav a { white-space: normal; font-size: 1rem; }
  .cards, .two-col, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .page-title h1, h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); letter-spacing: 0; }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .staff-login { margin: 24px 16px; padding: 24px; }
  .employee-upload { padding: 14px; }
  .demo { font-size: .875rem; }
  .btn, .outline { max-width: 100%; text-align: center; }
  footer { padding: 24px 20px; }
}
@media (max-width: 380px) {
  .wrap { padding-inline: 14px; }
  .brand-logo { width: 170px; height: 91px; }
  .journey-card, .terms-card, .employee-heading { padding: 18px; }
  .employee-section, .org-vacancy, .terms-documents-panel { padding: 12px; }
  .goals-grid li { flex-direction: column; }
  .goals-grid .goal-number { flex-basis: auto; width: 48px; }
}

.association-intro h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0; margin-bottom: 30px; color: var(--navy); }
.association-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 28px; }
.association-grid article { border-radius: 16px; padding: clamp(24px, 3vw, 40px); min-width: 0; }
.association-grid h2 { margin-bottom: 20px; }
.association-vision { background: linear-gradient(145deg, #121a2d, #173b86); color: white; }
.association-vision p { color: white; font-size: 1.125rem; line-height: 1.9; }
.association-vision .vision-statement { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin-bottom: 20px; }
.association-mission { background: #f5f7fc; border: 1px solid var(--line); }
.association-mission h2, .association-values h2 { color: var(--navy); }
.association-mission ul { margin: 0; padding-inline-start: 24px; }
.association-mission li { font-size: 1.125rem; line-height: 1.9; padding-inline-start: 6px; margin-bottom: 18px; }
.association-mission li:last-child { margin-bottom: 0; }
.association-mission li::marker { color: #143cff; }
.association-values { margin-top: 36px; }
.association-values ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 20px 0 0; }
.association-values li { margin: 0; padding: 20px 10px; border: 1px solid var(--line); border-top: 3px solid #143cff; border-radius: 8px; text-align: center; font-size: 1.125rem; font-weight: 700; color: var(--navy); background: #fff; }
@media (max-width: 1000px) { .association-values ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .association-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .association-values ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.association-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.association-grid h2 { padding-bottom: 14px; border-bottom: 2px solid #143cff; }
.association-vision h2 { border-bottom-color: #6077ff; }
.association-mission p { color: var(--ink); font-size: 1.125rem; line-height: 2; }
@media (max-width: 720px) { .association-grid { grid-template-columns: minmax(0, 1fr); } }

.programs-section { padding-top: 0; }
.programs-divider { border: 0; height: 1px; background: var(--line); margin: 0 0 44px; }
.programs-section h2 { color: var(--navy); }
.program-search { width: min(100%, 340px); }
.programs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.program-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; background: #fff; }
.program-card-heading { padding: 26px; background: linear-gradient(145deg,#121a2d,#173b86); color: #fff; border-bottom: 4px solid #143cff; }
.program-card-heading span { font-size: .875rem; color: #dbe3ff; }
.program-card-heading h3 { margin-top: 12px; font-size: 1.35rem; line-height: 1.6; }
.program-card-body { padding: 26px; display: flex; flex-direction: column; flex: 1; gap: 24px; }
.program-card-body p { color: var(--ink); line-height: 1.9; }
.program-details { margin-top: auto; align-self: flex-start; background: transparent; color: #143cff; border: 0; border-bottom: 1px solid var(--line); font-weight: 700; padding: 8px 0; }
.program-details:hover { color: var(--navy); }
.program-full h2 { font-size: 1.7rem; line-height: 1.6; }
.program-full h3 { margin-top: 26px; color: var(--navy); }
.program-full p, .program-full dd { color: var(--ink); line-height: 1.9; }
.program-full dl { background: var(--soft); padding: 20px; border-radius: 10px; }
.program-full dt { font-weight: 700; margin-top: 12px; }
.program-full dd { margin: 4px 0 16px; white-space: pre-line; }
.program-lines { white-space: pre-line; }
@media (max-width: 1000px) { .programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .programs-grid { grid-template-columns: minmax(0, 1fr); } .program-search { width: 100%; } .program-card-heading, .program-card-body { padding: 22px; } }

.program-card { position: relative; }
.program-card-heading { position: relative; border-bottom: 0; }
.program-card-heading .program-brand-mark { display: block; width: 22px; height: 44px; margin-bottom: 18px; }
.program-brand-mark svg { display: block; width: 100%; height: 100%; }
.program-card-heading::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg,#143cff 0%,#143cff 30%,#b8ccff 48%,#fff 50%,#b8ccff 52%,#143cff 70%,#143cff 100%); background-size: 250% 100%; animation: program-laser 3.5s linear infinite; box-shadow: 0 0 9px #143cff80; }
@keyframes program-laser { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@media (hover: hover) and (pointer: fine) {
  .program-details { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 24px; display: flex; align-items: center; justify-content: center; background: #121a2deF; color: #fff; border: 0; border-radius: 13px; font-size: 1.4rem; opacity: 0; transition: opacity .25s ease; z-index: 1; }
  .program-card:hover .program-details, .program-card:focus-within .program-details { opacity: 1; color: #fff; }
  .program-details:focus-visible { outline: 3px solid #6077ff; outline-offset: -7px; }
}
@media (prefers-reduced-motion: reduce) { .program-card-heading::after { animation: none; } .program-details { transition: none; } }

/* Reserve equal space for every program title and brand mark. */
.program-card-heading { min-height: 17rem; display: flex; flex-direction: column; align-items: flex-start; background: linear-gradient(145deg,#121a2d,#173b86); }
.program-card-heading .program-brand-mark { flex: 0 0 44px; }
.program-card-heading h3 { margin: 12px 0 0; }

.program-viewport { overflow: hidden; padding: 4px; margin: -4px; }
.program-carousel .programs-grid { display: flex; flex-wrap: nowrap; gap: 24px; direction: ltr; }
.program-carousel .program-card { flex: 0 0 calc((100% - 24px) / 2); min-width: 0; direction: rtl; }
.program-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.program-controls button { border: 1px solid var(--line); background: var(--navy); color: #fff; border-radius: 8px; min-width: 46px; padding: 8px 16px; }
@media (max-width: 720px) { .program-carousel .program-card { flex-basis: 100%; } }

.program-carousel { position: relative; padding-inline: 48px; }
.program-controls { margin: 0; }
.program-controls button { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 54px; min-width: 44px; padding: 8px; border: 0; border-radius: 0; background: transparent; color: #143cff; display: grid; place-items: center; }
.program-controls .program-prev { right: 0; }
.program-controls .program-next { left: 0; }
.program-controls svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.program-prev:hover svg { transform: translateX(3px); }
.program-next:hover svg { transform: translateX(-3px); }
.program-controls button:focus-visible { outline: 2px solid #143cff; outline-offset: 2px; }
@media(max-width:720px) { .program-carousel { padding-inline: 32px; } .program-controls button { width: 32px; min-width: 32px; padding: 2px; } .program-controls svg { width: 26px; height: 26px; } }
@media(prefers-reduced-motion:reduce) { .program-controls svg { transition: none; } }

/* Unified association typography. */
body { font-family: "Readex Pro", Tahoma, Arial, sans-serif; }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }

.home-banner { position: relative; overflow: hidden; border: 0; border-radius: 0; isolation: isolate; }
.home-banner img { border: 0; border-radius: 0; }
.home-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 0% 0%, #567fff66, transparent 22%), radial-gradient(ellipse at 100% 100%, #143cff55, transparent 22%); animation: banner-edge-glow 12s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes banner-edge-glow { 0% { opacity: .35; transform: scale(1); } 50% { opacity: .8; transform: scale(1.15) translateX(-2%); } 100% { opacity: .45; transform: scale(1.05) translateX(2%); } }
@media (prefers-reduced-motion: reduce) { .home-banner::after { animation: none; opacity: .35; } }

/* Full-width banner without a frame, corner treatment, or edge overlay. */
.home-banner, .home-banner img { border: 0; border-radius: 0; outline: 0; box-shadow: none; margin: 0; padding: 0; width: 100%; }
.home-banner::before, .home-banner::after { content: none; animation: none; }

/* Rounded image with a moving light confined to its frame. */
@property --banner-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.home-banner { width: calc(100% - 40px); max-width: 1400px; margin: 24px auto; padding: 4px; border-radius: 28px; overflow: hidden; background: conic-gradient(from var(--banner-angle),#121a2d 0%,#143cff 25%,#b8ccff 33%,#143cff 40%,#121a2d 60%,#173b86 85%,#121a2d 100%); box-shadow: 0 8px 28px #143cff26; animation: banner-frame-orbit 7s linear infinite; }
.home-banner img { display: block; width: 100%; height: auto; border-radius: 24px; }
@keyframes banner-frame-orbit { to { --banner-angle: 360deg; } }
@media(max-width:720px) { .home-banner { width: calc(100% - 24px); margin: 16px auto; padding: 3px; border-radius: 20px; } .home-banner img { border-radius: 17px; } }
@media(prefers-reduced-motion:reduce) { .home-banner { animation: none; } }

.home-banner { overflow: visible; animation: none; background: #173b86; }
.frame-diamond { position: absolute; top: 0; left: 0; width: 7px; height: 7px; background: #143cff; z-index: 2; pointer-events: none; offset-rotate: 0deg; offset-anchor: center; transform: rotate(45deg); box-shadow: 0 0 5px #6077ff; animation: frame-diamond-meet 7s ease-in-out infinite; }
@keyframes frame-diamond-meet { 0%, 8% { offset-distance: 0%; } 50% { offset-distance: 100%; } 92%, 100% { offset-distance: 0%; } }
@media(prefers-reduced-motion:reduce) { .frame-diamond { animation: none; offset-distance: 0%; } }

header { border-bottom-color: #143cff; }

.news-section { padding-top: 0; }
.news-section h2 { color: var(--navy); margin-bottom: 26px; }
.news-categories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 28px; }
.news-category { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 1.125rem; font-weight: 600; }
.news-count { display: grid; place-items: center; flex: 0 0 44px; min-height: 40px; border-radius: 6px; background: var(--category-color); color: #fff; font-weight: 700; }
.news-category:hover, .news-category.selected { color: var(--category-color); border-bottom-color: var(--category-color); }
.news-category:focus-visible { outline: 2px solid var(--category-color); outline-offset: 4px; }
.news-empty { padding: 28px 0; color: var(--muted); }
.news-results-heading { margin-top: 36px; }
.news-results { margin-top: 20px; }
@media(max-width:900px) { .news-categories { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .news-categories { grid-template-columns: minmax(0,1fr); gap: 6px; } }

/* Governance: Qiyadat navy, royal blue, and white. */
.governance-page { padding-top: 38px; padding-bottom: 70px; }
.governance-heading { padding: 30px 34px; background: var(--qiyadat-card-background); color: #fff; border-radius: 14px; border-inline-start: 5px solid var(--green); margin-bottom: 28px; }
.governance-heading > span { font-size: 1rem; }
.governance-heading h1 { font-size: clamp(1.8rem,3.4vw,2.6rem); letter-spacing: 0; line-height: 1.5; margin-top: 8px; }
.governance-sections { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.governance-sections a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; font-size: 1rem; font-weight: 600; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); background: #fff; transition: background .15s,color .15s; }
.governance-sections a:hover { background: var(--soft); border-color: var(--green); }
.governance-sections a.is-selected { background: var(--green); color: #fff; border-color: var(--green); }
.governance-sections a:focus-visible,.governance-open:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.governance-panel { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.governance-panel h2 { font-size: 1.5rem; color: var(--navy); padding: 24px 26px 8px; }
.governance-note { margin: 0; padding: 0 26px 24px; font-size: 1rem; }
.governance-table-wrap { width: 100%; overflow-x: auto; }
.governance-table { margin: 0; white-space: normal; table-layout: fixed; }
.governance-table th,.governance-table td { font-size: 1rem; padding: 18px 24px; vertical-align: middle; line-height: 1.8; }
.governance-table thead { background: var(--qiyadat-card-background); }
.governance-table thead th { background: transparent; color: white; font-weight: 600; }
.governance-table thead th:first-child { width: 70px; }
.governance-table thead th:last-child { width: 150px; text-align: center; }
.governance-table tbody th { background: transparent; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.governance-table tbody tr:nth-child(even) { background: var(--soft); }
.governance-table tbody td:first-child { color: var(--green); font-weight: 700; }
.governance-table tbody td:last-child { text-align: center; }
.governance-table tbody tr:last-child > * { border-bottom: 0; }
.governance-unavailable { display: inline-block; color: var(--muted); font-size: .875rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.governance-open { color: var(--green); font-weight: 600; }
@media(max-width:600px) { .governance-heading { padding: 24px 20px; } .governance-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .governance-sections a { padding: 10px; } .governance-panel h2 { padding: 20px 16px 8px; } .governance-note { padding: 0 16px 20px; } .governance-table th,.governance-table td { padding: 14px 10px; } .governance-table thead th:first-child { width: 38px; } .governance-table thead th:last-child { width: 92px; } .governance-unavailable { padding: 4px 6px; } }

/* Development and professional empowerment entry points. */
.professional-pathways { min-height: 60vh; }
.pathway-card { align-items: center; justify-content: center; gap: 22px; min-height: 250px; text-align: center; }
.pathway-icon { width: 58px; height: 58px; color: white; }
.development-page #main { min-height: calc(100vh - 150px); }
.development-page footer,.development-page .demo { display: none; }
@media(max-width:720px) { .pathway-card { min-height: 190px; } }

/* Region sits directly above its dependent city field. */
.job-location-fields { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
#search-form > label { min-width: 0; }
@media(max-width:720px) { .job-location-fields { width: 100%; flex: auto; } }

/* Optional color-safe presentation, without altering photos or brand assets. */
#vision-settings { width: min(520px,calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 26px; background: #fff; color: var(--ink); }
.vision-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vision-heading h2 { font-size: 1.4rem; }
.vision-close { background: var(--soft); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; width: 44px; height: 44px; flex-shrink: 0; font-size: 26px; }
.vision-options { border: 0; padding: 0; margin: 24px 0 0; }
.vision-options legend { margin-bottom: 12px; }
.vision-options label { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.vision-options label:has(input:checked) { border: 2px solid var(--ink); padding: 13px; font-weight: 700; background: var(--soft); }
.vision-options input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: #164d85; }
#vision-settings .vision-description,#vision-status { font-size: 1rem; }
body.color-safe { --green: #164d85; --navy: #121a2d; --ink: #16202e; --muted: #414b58; --soft: #edf2f8; --line: #758394; --gold: #164d85; }
body.color-safe .news-count { background: #164d85; color: #fff; border: 2px solid #121a2d; }
body.color-safe .news-category { color: var(--ink); }
body.color-safe .news-category:hover,body.color-safe .news-category.selected { color: var(--ink); border-bottom: 3px solid var(--ink); text-decoration: underline; text-underline-offset: 5px; }
body.color-safe .journey-card,body.color-safe .employee-heading,body.color-safe .organization-registration .btn,body.color-safe .terms-actions .btn { background: #164d85; border-color: #121a2d; color: #fff; }
body.color-safe .journey-card:hover { outline: 3px solid var(--ink); outline-offset: 4px; }
body.color-safe .text-btn,body.color-safe nav a.active { text-decoration: underline; text-underline-offset: 5px; }
body.color-safe .governance-sections a.is-selected,body.color-safe .sidebar a.selected { outline: 2px solid var(--ink); outline-offset: 3px; text-decoration: underline; text-underline-offset: 5px; }
body.color-safe .tag { border: 1px solid var(--green); }
body.color-safe :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #121a2d; outline-offset: 4px; box-shadow: 0 0 0 4px white; }

/* Color-vision modes rely on luminance and explicit non-color cues. */
body.vision-adapted { --vision-accent: #163d65; --green: var(--vision-accent); --navy: #111; --ink: #111; --muted: #333; --line: #666; --soft: #f4f4f4; --gold: var(--vision-accent); background: #fff; color: #111; }
body[data-vision-mode="blue-yellow"] { --vision-accent: #531b37; }
body[data-vision-mode="monochrome"],body[data-vision-mode="contrast"] { --vision-accent: #000; --soft: #fff; --line: #000; }
body.vision-adapted :is(.card,.strip,.filters,.result,.org-vacancy,.terms-documents-panel,.sidebar,.mini-job,.association-values li,.vision-options label,.governance-unavailable,.notice,.terms-draft) { background: #fff !important; color: #111 !important; border-color: #666 !important; }
body.vision-adapted :is(h1,h2,h3,p,small,label,legend,li,dt,dd,.eyebrow,.subtle,.news-category,.program-details,.text-btn,.terms-documents-intro,.service-number,.program-full h3) { color: #111 !important; }
body.vision-adapted :is(input,select,textarea) { background: #fff; color: #111; border-color: #666; accent-color: var(--vision-accent); }
body.vision-adapted input::placeholder,body.vision-adapted textarea::placeholder { color: #444; opacity: 1; }
body.vision-adapted :is(.journey-card,.program-card,.program-card-heading,.association-vision,.governance-heading,.employee-heading,.cta,.feature-board,.btn,button.primary,.news-count,.goal-number,.governance-sections a.is-selected,.sidebar a.selected,#toast) { background: var(--vision-accent) !important; color: #fff !important; border-color: #111 !important; }
body.vision-adapted :is(.journey-card,.program-card,.program-card-heading,.association-vision,.governance-heading,.employee-heading,.cta,.feature-board) :is(h1,h2,h3,p,span,small,li,a,em,strong) { color: #fff !important; }
body.vision-adapted .program-card-body { background: var(--vision-accent); }
body.vision-adapted .program-details { color: #fff !important; }
body.vision-adapted :is(.tag,.company-icon,.icon,.outline,.vision-close) { background: #fff !important; color: #111 !important; border: 2px solid #111; }
body.vision-adapted .governance-table :is(th,td) { background: #fff; color: #111; border-color: #666; }
body.vision-adapted .governance-table thead th { background: var(--vision-accent); color: #fff; }
body.vision-adapted .governance-table tbody tr:nth-child(even) > * { background: #f4f4f4; }
body.vision-adapted :is(.text-btn,.program-details,.journey-link,.governance-open) { text-decoration: underline; text-underline-offset: 5px; }
body.vision-adapted :is(nav a.active,.news-category.selected,.governance-sections a.is-selected,.sidebar a.selected) { text-decoration: underline double; text-underline-offset: 5px; font-weight: 700; }
body.vision-adapted :is(.news-category:hover,.news-category.selected) { color: #111; border-bottom: 3px solid #111; }
body.vision-adapted :is(.journey-card,.news-category,.governance-sections a):hover { outline: 2px solid #111; outline-offset: 4px; }
body.vision-adapted .vision-options label:has(input:checked) { border: 3px solid #111 !important; padding: 12px; text-decoration: underline; }
body.vision-adapted :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #111 !important; outline-offset: 4px; box-shadow: 0 0 0 4px #fff !important; }
body.vision-adapted button:disabled { opacity: 1; background: #eee !important; color: #444 !important; border: 2px dashed #666; }
body[data-vision-mode="monochrome"] :is(img,.brand-logo,.frame-diamond) { filter: grayscale(1); }
body.vision-adapted .news-count { border: 2px solid #111; }
body.vision-adapted .program-card::before,body.vision-adapted .program-card::after { display: none; }

.vision-preview { border: 2px solid var(--line); border-radius: 10px; padding: 16px; margin: 20px 0; background: #fff; }
.vision-preview h3 { font-size: 1.1rem; }
.vision-preview-samples { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 1rem; }
.vision-sample-text { color: var(--ink); }
.vision-sample-selected { background: var(--green); color: #fff; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 6px; font-weight: 700; }
.vision-sample-link { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
#vision-reset { min-height: 44px; }
body.vision-adapted .program-card-heading::after { background: #fff; box-shadow: none; animation: none; }
body.vision-adapted .feature-board .mini-job,body.vision-adapted .feature-board .mini-job :is(h3,p,span,small,strong) { color: #111 !important; }
body.vision-adapted .program-details { opacity: 1; }
/* Grayscale all rendered content, including CSS-backed logos and decorations. */
body[data-vision-mode="monochrome"] > :not(script):not(style) { filter: grayscale(1); }
@media(max-width:480px) { #vision-settings { padding: 18px; } #vision-settings .vision-heading h2 { font-size: 1.2rem; } }

/* Keep every carousel card label white in black-and-white viewing modes. */
body:is([data-vision-mode="monochrome"],[data-vision-mode="contrast"]) #programs-grid .program-card,
body:is([data-vision-mode="monochrome"],[data-vision-mode="contrast"]) #programs-grid .program-card :is(.program-card-heading,.program-card-body) {
  background: #000 !important;
}
body:is([data-vision-mode="monochrome"],[data-vision-mode="contrast"]) #programs-grid .program-card :is(h3,p,span,a,button),
body:is([data-vision-mode="monochrome"],[data-vision-mode="contrast"]) #programs-grid .program-card .program-details:is(:hover,:focus,:focus-visible) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
}

/* Association navigation: RTL disclosure, pointer, keyboard and touch. */
header { position:relative; z-index:30; }
header nav { overflow:visible; }
.about-nav { position:relative; flex-shrink:0; }
.about-toggle { display:flex; align-items:center; gap:7px; border:0; padding:8px 0; background:transparent; color:var(--ink); font:700 15px 'Readex Pro',Tahoma,sans-serif; white-space:nowrap; }
.about-toggle:hover,.about-toggle.active,.about-toggle[aria-expanded="true"] { color:var(--green); }
.about-toggle span { color:var(--green); transition:transform .18s; }
.about-toggle[aria-expanded="true"] span { transform:rotate(180deg); }
.about-menu { position:absolute; top:100%; inset-inline-start:0; width:310px; max-width:calc(100vw - 32px); max-height:70vh; overflow-y:auto; background:#fff; color:var(--ink); border:1px solid var(--line); border-top:3px solid var(--green); border-radius:0 0 12px 12px; box-shadow:0 16px 40px #121a2d25; padding:8px; text-align:right; }
.about-menu[hidden] { display:none; }
.about-menu a,.about-menu summary { display:block; padding:11px 14px; min-height:44px; border-radius:6px; font-size:14px; font-weight:500; white-space:normal; cursor:pointer; }
.about-menu a:hover,.about-menu a:focus-visible,.about-menu summary:hover { background:var(--soft); color:var(--green); text-decoration:none; }
.about-menu summary { display:list-item; list-style-position:inside; }
.about-menu details>div { margin-inline-start:15px; border-inline-start:2px solid var(--green); }
.about-pending { border-inline-start:3px solid var(--green); padding:20px; background:var(--soft); }
@media(max-width:800px) { .about-nav { position:static; } .about-menu { inset-inline:16px; top:auto; width:auto; margin-top:6px; max-width:none; max-height:65vh; } }
@media(prefers-reduced-motion:reduce) { .about-toggle span { transition:none; } }

/* Keep Contact last at the left edge of RTL navigation, including future links. */
header nav > :not(a[href="#contact"]) { order: 0; }
header nav > a[href="#contact"] { order: 100; margin-inline-start: auto; }

/* News page category bar follows the governance navigation layout. */
.news-page .news-categories { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.news-page .news-category { flex:1 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--navy); font-size:1rem; font-weight:600; }
.news-page .news-category:hover { background:var(--soft); border-color:var(--green); }
.news-page .news-category.selected { background:var(--qiyadat-card-background); color:#fff; border-color:var(--green); }
.news-page .news-count { flex:0 0 36px; min-height:34px; }
.news-page .news-category:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
body.vision-adapted .news-page .news-category.selected { background:var(--vision-accent); color:#fff; }
@media(max-width:600px) { .news-page .news-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .news-page .news-category { padding:10px; gap:8px; } }

/* Keep news labels and counts readable on dark interactive cards. */
body.vision-adapted .news-category:is(.selected,[aria-current="page"],:hover,:focus-visible,:active) {
  background: var(--vision-accent) !important;
  color: #fff !important;
}
body.vision-adapted .news-category:is(.selected,[aria-current="page"],:hover,:focus-visible,:active) span {
  color: #fff !important;
}
body.vision-adapted .news-category:is(.selected,[aria-current="page"],:hover,:focus-visible,:active) .news-count {
  border-color: #fff !important;
}

/* Association footer, shared across public routes. */
footer.qiyadat-footer{display:block;background:#121a2d;color:#fff;padding:0;margin:0;border-top:5px solid #143cff;text-align:right}
.qiyadat-footer .footer-grid{display:grid;grid-template-columns:1.2fr 1.1fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:48px}
.qiyadat-footer .footer-logo{width:200px;margin-bottom:20px}
.qiyadat-footer .footer-logo .brand-logo{filter:grayscale(1) invert(1);mix-blend-mode:screen;background-color:#fff}
.qiyadat-footer .footer-column{padding:0;margin:0;min-width:0}
.qiyadat-footer h2{font-size:1.2rem;color:#fff;margin:0 0 24px;font-weight:700}
.qiyadat-footer h2::after{content:"";display:block;width:34px;height:3px;background:#4767ff;margin-top:14px}
.qiyadat-footer p,.qiyadat-footer dd,.qiyadat-footer li{font-size:.95rem;line-height:1.9;color:#e1e6f3}
.qiyadat-footer .footer-registration{font-size:.85rem;margin:14px 0 20px}
.qiyadat-footer a{color:#fff;text-decoration:none}
.qiyadat-footer a:hover{text-decoration:underline;text-underline-offset:5px}
.qiyadat-footer a:focus-visible{outline:2px solid #fff;outline-offset:5px}
.qiyadat-footer .footer-channels{display:flex;gap:10px}
.qiyadat-footer .footer-channels a{display:grid;place-items:center;width:42px;height:42px;border:1px solid #8791aa;border-radius:50%}
.qiyadat-footer svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.qiyadat-footer .footer-contact{margin:0}.qiyadat-footer dt{color:#c0c9df;font-size:.85rem;margin-bottom:3px}.qiyadat-footer dd{margin:0 0 16px}
.qiyadat-footer .footer-links{padding:0;margin:0;list-style:none;display:grid;gap:9px}
.qiyadat-footer .footer-all-news{display:inline-block;margin-top:20px;padding-bottom:6px;border-bottom:1px solid #8791aa}
.qiyadat-footer .footer-bottom{border-top:1px solid #ffffff26;padding:20px 0}
.qiyadat-footer .footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.qiyadat-footer .footer-bottom p{font-size:.85rem;margin:0}
body.vision-adapted footer.qiyadat-footer{background:#000!important;border-color:#fff}
body.vision-adapted .qiyadat-footer :is(h2,h3,p,a,span,li,dt,dd,bdi){color:#fff!important}
body.vision-adapted .qiyadat-footer h2::after{background:#fff}
@media(max-width:1000px){.qiyadat-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}}
@media(max-width:600px){.qiyadat-footer .footer-grid{grid-template-columns:1fr;padding-top:36px;padding-bottom:32px;gap:32px}.qiyadat-footer .footer-bottom .wrap{flex-direction:column;align-items:flex-start}.qiyadat-footer .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
body.development-page footer.qiyadat-footer{display:none}
[hidden]{display:none!important}
.news-image-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:20px}
.news-image-gallery a{display:block;border-radius:10px;overflow:hidden;background:var(--soft)}
.news-image-gallery img{display:block;width:100%;height:230px;object-fit:contain}
.news-image-gallery a:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.news-summary{white-space:pre-line}
@media(max-width:520px){.news-image-gallery{grid-template-columns:1fr}.news-image-gallery img{height:auto;max-height:360px}}
.qiyadat-footer .footer-channels a{width:44px;height:44px;padding:0;border-radius:50%;flex:0 0 44px}
.qiyadat-footer .footer-channels a:hover{background:#ffffff18}
.qiyadat-footer .footer-channels svg{width:23px;height:23px}
.latest-news-carousel{position:relative;padding-inline:44px}
.latest-news-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 12px}
.latest-news-track::-webkit-scrollbar{display:none}
.latest-news-card{flex:0 0 calc((100% - 48px)/3);min-width:0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;scroll-snap-align:start}
.latest-news-card>a{display:block;height:100%;text-decoration:none}
.latest-news-media{position:relative;padding-top:34px;background:#f4f6fc;overflow:hidden}
.latest-news-category{position:absolute;inset-inline-start:0;top:0;display:inline-flex;align-items:center;min-height:34px;padding:5px 18px;border-end-end-radius:8px;color:#fff!important;font-size:.875rem;font-weight:700}
.latest-news-media img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#f4f6fc}
.latest-news-placeholder{display:grid;place-items:center;aspect-ratio:16/10;background:#eef2ff;color:var(--navy);font-size:2rem;font-weight:700}
.latest-news-card h3{font-size:1.1rem;line-height:1.8;color:var(--navy);margin:0;padding:20px}
.latest-news-card a:focus-visible{outline:3px solid #143cff;outline-offset:-3px}
.latest-news-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;min-height:54px;padding:8px;border:0;background:transparent;color:#143cff;display:grid;place-items:center}
.latest-news-prev{right:0}.latest-news-next{left:0}
.latest-news-arrow svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.latest-news-arrow:disabled{opacity:.3;cursor:default}
.latest-news-all{display:inline-flex;align-items:center;gap:16px}
.news-article>.latest-news-media{max-width:800px;margin:0 auto 24px;border-radius:10px}
body.vision-adapted .latest-news-category{background:#000!important;color:#fff!important}
body.vision-adapted .latest-news-card{border-color:#111}
@media(max-width:1000px){.latest-news-card{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:650px){.latest-news-card{flex-basis:100%}.latest-news-carousel{padding-inline:32px}.latest-news-arrow{width:32px;padding:2px}.latest-news-arrow svg{width:26px;height:26px}}