/* ===== theme.css =====
   Shared visual language for PSB Sekolah Alam Cikeas.
   Loaded on every page alongside Tailwind (Play CDN). */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --color-ink: #101B33;
  --color-deep: #16295E;
  --color-primary: #204394;
  --color-sky: #4C7BC9;
  --color-pale: #A9C2E8;
  --color-paper: #F3F6FC;
  --color-mist: #DCE6F5;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-display {
  font-family: 'Baloo 2', sans-serif;
}

.font-mono {
  font-family: 'IBM Plex Mono', monospace;
}

/* Visible keyboard focus, kept consistent across both pages */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== Trail motif =====
   Dashed path used on the landing page to visually connect
   the hero to the two path cards. Drawn with stroke-dasharray
   and revealed with a one-time draw animation on load. */
.trail-path {
  stroke: var(--color-sky);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  fill: none;
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  .trail-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: draw-trail 1.8s ease-out 0.2s forwards;
  }
}

@keyframes draw-trail {
  to {
    stroke-dashoffset: 0;
  }
}

/* Hill/horizon silhouette strip along the hero base */
.deep-line {
  fill: var(--color-deep);
}

/* ===== Ticket stub =====
   Used for the fee breakdown result panel on the calculator
   page. Perforated edge is faked with a radial-gradient mask
   repeated along the top edge, evoking a trail entry pass. */
.ticket-stub {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid var(--color-mist);
  border-radius: 4px;
}

.ticket-stub::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 18px;
  background-image: radial-gradient(circle at 12px 9px, transparent 9px, var(--color-paper) 9.5px);
  background-size: 24px 18px;
  background-repeat: repeat-x;
}

.ticket-divider {
  border-top: 1px dashed var(--color-mist);
}

/* Simple skeleton pulse for loading states, no external deps */
.skeleton {
  background: linear-gradient(90deg, var(--color-mist) 25%, #F0ECDD 37%, var(--color-mist) 63%);
  background-size: 400% 100%;
  animation: skeleton-pulse 1.4s ease infinite;
}

@keyframes skeleton-pulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}