/* v24.39 — production transparent identity for Vision and Mission. */

/*
 * The section headers use the official high-resolution SRI Al-Hijrah emblem
 * directly. The old coloured containers, borders and decorative artwork are
 * deliberately removed so no visual box remains around either logo.
 */
.vision-emblem,
.mission-count {
  position: relative;
  display: grid;
  flex: 0 0 54px;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.vision-emblem::before,
.vision-emblem > i {
  display: none;
  content: none;
}

.vision-emblem > .direction-logo,
.mission-count > .direction-logo {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
}

/*
 * Keep the Vision card level with the complete Mission panel on desktop.
 * The base public shell previously aligned grid items to the start, so the
 * left card stopped at its own content height.
 */
@media (min-width: 981px) {
  .direction-layout {
    align-items: stretch;
  }

  .direction-layout > .vision-card {
    display: flex;
    align-self: stretch;
    height: 100%;
    min-height: 100%;
    flex-direction: column;
    box-sizing: border-box;
  }

  .direction-layout > .vision-card .vision-statement-wrap {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  /*
   * Keep the sentence itself as normal inline text. v24.36 made the <p> a
   * flex container, which turned the text around <strong> into separate flex
   * items and caused the vision to split into overlapping columns.
   */
  .direction-layout > .vision-card .vision-statement {
    display: block;
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-block: clamp(28px, 4vw, 52px);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .direction-layout > .vision-card .vision-statement strong {
    display: inline;
    white-space: normal;
  }

  .direction-layout > .vision-card .vision-card-footer {
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .direction-layout > .vision-card {
    height: auto;
    min-height: 0;
  }

  .direction-layout > .vision-card .vision-statement-wrap {
    display: block;
    width: 100%;
  }
}

.programme-heading {
  max-width: 860px;
}

.programme-explorer {
  align-items: stretch;
}

.programme-tab {
  outline: none;
}

.programme-tab:focus-visible {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.94),
    0 0 0 3px rgba(32, 199, 217, 0.45);
}

.programme-tab.active {
  box-shadow: inset 4px 0 0 var(--cyan);
}

.programme-panel {
  --programme-accent: #64e4ee;
  --programme-glow: rgba(100, 228, 238, 0.34);
  isolation: isolate;
  background:
    radial-gradient(
      circle at 84% 15%,
      var(--programme-glow),
      transparent 26%
    ),
    linear-gradient(145deg, #153fb2, #081f68);
}

.programme-panel::before {
  z-index: 0;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 38% 62% 55% 45%;
  content: "";
  position: absolute;
  top: -82px;
  right: 64px;
  transform: rotate(18deg);
}

.programme-panel::after {
  z-index: 0;
  border-color: rgba(255, 255, 255, 0.07);
}

.programme-panel.tone-kafa {
  --programme-accent: #7be7ef;
  --programme-glow: rgba(29, 205, 219, 0.38);
  background:
    radial-gradient(circle at 84% 15%, var(--programme-glow), transparent 27%),
    linear-gradient(145deg, #174bc3, #091f66);
}

.programme-panel.tone-alquran {
  --programme-accent: #a9f2cf;
  --programme-glow: rgba(73, 218, 164, 0.34);
  background:
    radial-gradient(circle at 84% 15%, var(--programme-glow), transparent 27%),
    linear-gradient(145deg, #087f79, #05444f);
}

.programme-panel.tone-qiraati {
  --programme-accent: #e6c2ff;
  --programme-glow: rgba(191, 123, 255, 0.34);
  background:
    radial-gradient(circle at 84% 15%, var(--programme-glow), transparent 27%),
    linear-gradient(145deg, #6540bc, #292268);
}

.programme-panel.tone-tadika {
  --programme-accent: #fff0a6;
  --programme-glow: rgba(255, 210, 86, 0.38);
  background:
    radial-gradient(circle at 84% 15%, var(--programme-glow), transparent 27%),
    linear-gradient(145deg, #d55a45, #8e3159);
}

.programme-panel.tone-transit {
  --programme-accent: #9de8ff;
  --programme-glow: rgba(70, 193, 235, 0.35);
  background:
    radial-gradient(circle at 84% 15%, var(--programme-glow), transparent 27%),
    linear-gradient(145deg, #116e9c, #12375f);
}

.programme-panel.tone-pengangkutan {
  --programme-accent: #ffd38a;
  --programme-glow: rgba(245, 171, 61, 0.36);
  background:
    radial-gradient(circle at 84% 15%, var(--programme-glow), transparent 27%),
    linear-gradient(145deg, #aa5c1c, #583447);
}

.programme-panel.has-programme-background {
  background-color: #081f68;
  background-image:
    linear-gradient(
      112deg,
      rgba(4, 15, 46, var(--programme-overlay, 0.72)) 0%,
      rgba(4, 15, 46, calc(var(--programme-overlay, 0.72) - 0.08)) 58%,
      rgba(4, 15, 46, calc(var(--programme-overlay, 0.72) + 0.08)) 100%
    ),
    var(--programme-image);
  background-position: center, var(--programme-position, 50% 50%);
  background-repeat: no-repeat;
  background-size: cover;
}

.programme-panel .highlight-list i {
  color: var(--programme-accent);
}

.programme-panel.is-updating > h3,
.programme-panel.is-updating .programme-panel-copy,
.programme-panel.is-updating .highlight-list,
.programme-panel.is-updating .outcome-card {
  animation: programme-panel-enter-v24-31 260ms ease both;
}

.programme-detail-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}

.programme-detail-link:focus-visible {
  border-radius: 6px;
  outline: 3px solid rgba(255, 255, 255, 0.94);
  outline-offset: 5px;
}

@keyframes programme-panel-enter-v24-31 {
  from {
    opacity: 0.62;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.journey-node {
  border-radius: 14px;
  outline: none;
}

.journey-node:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(23, 71, 209, 0.42);
}

.journey-node[aria-pressed="true"] {
  color: #0b1739;
}

.journey-node[aria-pressed="true"] > .journey-icon {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px rgba(23, 71, 209, 0.25),
    0 9px 20px rgba(11, 46, 158, 0.13);
}

.journey-node > .journey-node-copy {
  display: flex;
  width: auto;
  height: auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  color: inherit;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.journey-node:hover > .journey-node-copy,
.journey-node[aria-pressed="true"] > .journey-node-copy {
  box-shadow: none;
  transform: none;
}

.journey-node-copy strong {
  transition: color 180ms ease;
}

.journey-node-copy small {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  color: #64708b;
  font-size: 10px;
  font-weight: 680;
  line-height: 1.35;
  opacity: 0;
  transition:
    max-height 180ms ease,
    margin-top 180ms ease,
    opacity 180ms ease;
}

.journey-node[aria-pressed="true"] .journey-node-copy strong {
  color: #1747d1;
}

.journey-node[aria-pressed="true"] .journey-node-copy small {
  max-height: 30px;
  margin-top: 3px;
  opacity: 1;
}

.day-step {
  position: relative;
  grid-template-columns: 78px minmax(0, 1fr) 24px;
  outline: none;
}

.day-step::after {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  color: transparent;
  background: rgba(23, 71, 209, 0.06);
  border: 1px solid rgba(23, 71, 209, 0.12);
  border-radius: 50%;
  content: "→";
  font-size: 12px;
  font-weight: 900;
  transform: scale(0.88);
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.day-step.active {
  background: linear-gradient(135deg, #eef2ff, #f4f8ff);
  border-color: rgba(23, 71, 209, 0.58);
  box-shadow:
    0 10px 25px rgba(11, 46, 158, 0.09),
    inset 4px 0 0 #1747d1;
}

.day-step.active::after {
  color: #fff;
  background: #1747d1;
  border-color: #1747d1;
  transform: scale(1);
}

.day-step:focus-visible {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(23, 71, 209, 0.38);
}

.day-panel {
  outline: none;
}

.day-panel[data-day-state="niat"] .day-visual {
  --day-fallback: linear-gradient(145deg, #0b4fc4, #0f88c6);
}

.day-panel:focus-visible {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(23, 71, 209, 0.34),
    var(--shadow-sm);
}

.day-panel.is-updating .day-copy,
.day-panel.is-updating .day-visual {
  animation: day-panel-enter-v24-28 240ms ease both;
}

.day-panel[data-day-state="belajar"] .day-visual {
  --day-fallback: linear-gradient(145deg, #163aa8, #2461e7);
  background:
    radial-gradient(
      circle at 74% 24%,
      rgba(255, 207, 77, 0.58),
      transparent 18%
    ),
    linear-gradient(145deg, #163aa8, #2461e7);
}

.day-panel[data-day-state="alquran"] .day-visual {
  --day-fallback: linear-gradient(145deg, #087f91, #16afbf);
  background:
    radial-gradient(
      circle at 73% 24%,
      rgba(255, 223, 125, 0.6),
      transparent 18%
    ),
    linear-gradient(145deg, #087f91, #16afbf);
}

.day-panel[data-day-state="nilai"] .day-visual {
  --day-fallback: linear-gradient(145deg, #9b6c00, #d8a314);
  background:
    radial-gradient(
      circle at 73% 24%,
      rgba(255, 255, 255, 0.46),
      transparent 18%
    ),
    linear-gradient(145deg, #9b6c00, #d8a314);
}

.day-panel .day-visual.has-day-background {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(
      rgba(4, 17, 48, var(--day-overlay, 0.7)),
      rgba(4, 17, 48, var(--day-overlay, 0.7))
    ),
    var(--day-image),
    var(--day-fallback, linear-gradient(145deg, #0b4fc4, #0f88c6));
  background-position: center, var(--day-position, 50% 50%), center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
  transition: background-size 500ms ease;
}

.day-panel .day-visual.has-day-background > * {
  position: relative;
  z-index: 1;
}

.day-panel .day-visual.has-day-background .day-number,
.day-panel .day-visual.has-day-background .day-icon {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .day-panel:hover .day-visual.has-day-background.has-day-motion {
    background-size: cover, 106%, cover;
  }
}

@keyframes day-panel-enter-v24-28 {
  from {
    opacity: 0.68;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.checklist-items label {
  position: relative;
  outline: none;
}

.checklist-items input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 1;
}

.checklist-items input:focus-visible + .custom-check {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(23, 71, 209, 0.38);
}

.checklist-items input:checked + .custom-check,
.checklist-items label.checked .custom-check {
  color: #fff;
  background: linear-gradient(145deg, #20bccc, #0b9dad);
  border-color: #0b9dad;
  box-shadow: 0 7px 16px rgba(8, 127, 145, 0.2);
}

.checklist-items label.checked {
  background: linear-gradient(135deg, #ecfbfb, #f5ffff);
  border-color: rgba(20, 170, 187, 0.55);
  box-shadow: inset 4px 0 0 #14aabb;
}

.checklist-items label.checked strong {
  color: #0b1739;
  text-decoration: none;
}

.checklist-items label.checked > i {
  color: #087f91;
}

.checklist-status {
  min-height: 18px;
  margin: 14px 2px 0;
  color: #66718a;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.45;
}

.checklist-card.is-complete .checklist-status {
  color: #087f91;
  font-weight: 780;
}

.checklist-footer {
  margin-top: 17px;
}

.checklist-footer button:focus-visible,
.checklist-footer a:focus-visible {
  outline: 3px solid rgba(23, 71, 209, 0.42);
  outline-offset: 4px;
}

.checklist-footer button:disabled {
  cursor: default;
  border-color: transparent;
  opacity: 0.42;
}

@media (max-width: 680px) {
  .programme-tab.active {
    box-shadow: inset 0 -4px 0 var(--cyan);
  }

  .programme-panel::before {
    right: -52px;
  }

  .programme-detail-link {
    min-height: 48px;
  }

  .journey-node > .journey-node-copy {
    width: auto;
    height: auto;
    align-items: center;
  }

  .journey-node-copy small {
    text-align: center;
    font-size: 9px;
  }

  .day-step {
    grid-template-columns: 64px minmax(118px, 1fr) 22px;
  }

  .day-step::after {
    width: 21px;
    height: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-node-copy strong,
  .journey-node-copy small,
  .day-step::after {
    transition: none;
  }

  .day-panel.is-updating .day-copy,
  .day-panel.is-updating .day-visual,
  .programme-panel.is-updating > h3,
  .programme-panel.is-updating .programme-panel-copy,
  .programme-panel.is-updating .highlight-list,
  .programme-panel.is-updating .outcome-card {
    animation: none;
  }
}