/* ===============================================================
   Light / dark theme toggle, plus the light-theme rules that a
   colour mapping cannot express.

   theme-light.css is GENERATED from the dark sources and is
   overwritten whenever it is rebuilt, so anything written by hand
   for the light theme lives here instead.
   ============================================================ */

/* ---- toggle button ---- */

.tkm-theme-toggle {
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tkm-theme-toggle:hover { background-color: rgba(212, 175, 55, 0.18); }
.tkm-theme-toggle:focus-visible { outline: 2px solid #F5D77F; outline-offset: 2px; }

[data-theme="light"] .tkm-theme-toggle:hover { background-color: rgba(195, 230, 47, 0.18); }
[data-theme="light"] .tkm-theme-toggle:focus-visible { outline-color: #DDF37A; }

/* The icon names the theme a click switches TO: sun while dark, moon while light. */
.tkm-theme-toggle .tkm-theme-icon { display: inline-flex; }
.tkm-theme-toggle .tkm-theme-icon--moon { display: none; }
[data-theme="light"] .tkm-theme-toggle .tkm-theme-icon--sun { display: none; }
[data-theme="light"] .tkm-theme-toggle .tkm-theme-icon--moon { display: inline-flex; }

/* The toggle adds 52px to the header's right cluster. From the lg breakpoint up
   to 1280px the eight nav items then fill the row edge to edge, touching the logo
   on one side and the toggle on the other. Tightening the gap alone does not
   help: the logo is the flex item that wraps, so it simply absorbs whatever the
   gap frees. A margin on the nav guarantees space on both sides instead, and the
   logo wraps a little sooner to make room. Wider screens are unchanged. */
@media (min-width: 1024px) and (max-width: 1279px) {
  header nav.lg\:flex { gap: 1rem; margin: 0 1rem; }
}

/* ---- light-theme fixes a mapping cannot express ---- */

/* Gold on a white card became lime on white, which does not read. Accents that
   sit on a light ground take the poster blue instead. */
[data-theme="light"] .bg-white .text-\[\#D4AF37\] { color: #1163D6; }

/* Alumni Spotlight carries small light text (a 14px quote, a 10px year line).
   The mapped gradient starts at the bright poster blue, where that text falls
   under 4.5:1. The band starts one step deeper instead, like the navy block
   behind the competition name on the poster; the quote measures 5.7:1 there. */
[data-theme="light"] .tkm-alspot {
  background: linear-gradient(160deg, #0B4AA8 0%, #0A3D8F 100%);
}

/* The year line was lime at 62% opacity, which blends down to about 3:1 on blue.
   A solid pale lime at 85% keeps it quieter than the name and clears 5:1. */
[data-theme="light"] .tkm-alspot-angkatan {
  color: rgba(221, 243, 122, 0.85);
}

/* Partner banner empty state. Its greys sit on a pale blue ground and the
   mapped values land under 4.5:1; one darker slate carries all three lines. */
[data-theme="light"] .tkm-trust-kicker,
[data-theme="light"] .tkm-trust-empty {
  color: #5A6A82;
}

[data-theme="light"] .tkm-trust-empty strong {
  color: #3F4E66;
}

/* Tiny uppercase labels on blue bands (credential stats, countdown units, the
   no-image thumbnail mark) were gold at 72-75% opacity. That reads on near-black
   but blends to under 4:1 on the poster blue, and at 9-10px they need 4.5:1.
   Near-solid pale lime clears 5.7:1 and still sits quieter than the numbers. */
[data-theme="light"] .tkm-cred-lab,
[data-theme="light"] .tkm-countdown-band .tkm-count-label,
[data-theme="light"] .tkm-thumb-fallback .tkm-fallback-label {
  color: rgba(221, 243, 122, 0.92);
}

/* The no-image news thumbnail. Its mapped gradient starts at the bright poster
   blue, which leaves the 9px label at 4:1 even near-solid. Starting one step
   deeper, as the Alumni Spotlight band does, takes it past 5.7:1. The lime glow
   at the top is decoration and stays. */
[data-theme="light"] .tkm-thumb-fallback {
  background:
    radial-gradient(at 50% 0%, rgba(195, 230, 47, 0.18) 0%, rgba(195, 230, 47, 0) 60%),
    linear-gradient(160deg, #0B4AA8 0%, #0A3D8F 100%);
}

/* Pamong initials in light. The mapped circle starts at the bright poster blue,
   where the 18px initials only just reach 4.5:1. Starting one step deeper, like
   every other small-text panel in this theme, gives them margin. */
[data-theme="light"] .bg-gradient-to-br.from-\[\#1A1A1A\].to-\[\#0C0D11\] {
  background-image: linear-gradient(to bottom right, #0B4AA8, #0A3D8F);
}

/* ---- hero photos keep their own colours ----
   The dark theme lays a near-black scrim over the hero photos so the copy on
   the left reads. The generator turned that scrim into brand blue, which washed
   every photo blue. Photos stay natural in both themes: the scrim stays neutral,
   and blue is kept for solid surfaces.
   Below 1024px the copy runs almost to the right edge (88-92% of the width), so
   there the scrim keeps the dark theme's curve exactly and only its colour
   changes. */
[data-theme="light"] .tkm-hero-scrim {
  background:
    linear-gradient(to right, rgba(12, 13, 17, 0.82) 0%, rgba(12, 13, 17, 0.55) 45%, rgba(12, 13, 17, 0.15) 100%),
    linear-gradient(to top, rgba(12, 13, 17, 0.9) 0%, rgba(12, 13, 17, 0) 45%, rgba(12, 13, 17, 0.28) 100%);
}

/* From 1024px the copy ends by 56% of the width (measured at 1024, 1280 and
   1440), so past 58% there is nothing to protect and the right of the photo
   clears. The 45-58% segment sits on the dark theme's own line (0.455 at 58%),
   so every part of the curve that the copy touches is unchanged. */
@media (min-width: 1024px) {
  [data-theme="light"] .tkm-hero-scrim {
    background:
      linear-gradient(to right, rgba(12, 13, 17, 0.82) 0%, rgba(12, 13, 17, 0.55) 45%, rgba(12, 13, 17, 0.455) 58%, rgba(12, 13, 17, 0) 88%),
      linear-gradient(to top, rgba(12, 13, 17, 0.9) 0%, rgba(12, 13, 17, 0) 45%, rgba(12, 13, 17, 0.28) 100%);
  }
}

/* The stage shows through the slides while they cross-fade; blue there tinted
   every transition. */
[data-theme="light"] .tkm-hero-stage {
  background: #0C0D11;
}

/* ---- inline styles in front-page.php ----
   Two homepage backgrounds are written as style="" attributes, which the
   generator cannot see because it only reads stylesheets. A stylesheet can only
   outrank an inline declaration with !important. If front-page.php ever moves
   these into classes, delete both rules and rebuild theme-light.css. */

/* Video gallery: the near-black scrim over the parallax photo. */
[data-theme="light"] #video-galeri > .absolute.inset-0:not(.tkm-parallax) {
  background: linear-gradient(to bottom, #0D55C2 0%, rgba(13, 85, 194, 0.82) 45%, #0D55C2 100%) !important;
}

/* The "Selamat Datang" block under the PPDB banner. */
[data-theme="light"] section.tkm-divider-diagonal {
  background: #EDF3FC !important;
}

/* The generator emits [data-theme="light"] .tkm-vm-heading from the base rule,
   which outranks the .tkm-vm-heading--dark modifier and turned the heading on the
   blue Visi band navy-on-blue. Restore white at matching specificity. */
[data-theme="light"] .tkm-vm-heading--dark,
[data-theme="light"] .tkm-sej-heading--dark {
  color: #FFFFFF;
}


/* ---- PPDB: keep the dark-band heading legible in light mode ---- */
[data-theme="light"] .tkm-ppdb-heading--dark { color: #FFFFFF; }


/* ---- Alumni: keep the dark-band heading legible in light mode ---- */
[data-theme="light"] .tkm-alu-heading--dark { color: #FFFFFF; }


/* ===============================================================
   Floating WhatsApp button (footer.php) - brand green in both
   themes, so it lives here rather than in the colour-mapped
   site.css.
   =============================================================== */

.tkm-wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tkm-wa-float:hover {
  transform: translateY(-2px);
  background: #1EBE5B;
  color: #FFFFFF;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.tkm-wa-float:focus-visible {
  outline: 3px solid #F5D77F;
  outline-offset: 2px;
}

.tkm-wa-float svg {
  flex: none;
  width: 28px;
  height: 28px;
}

.tkm-wa-float-txt {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: max-width 0.28s ease, opacity 0.2s ease, padding 0.2s ease;
}

.tkm-wa-float:hover .tkm-wa-float-txt,
.tkm-wa-float:focus-visible .tkm-wa-float-txt {
  max-width: 160px;
  padding-right: 6px;
  opacity: 1;
}

@media (max-width: 767px) {
  .tkm-wa-float {
    right: 16px;
    bottom: 16px;
  }
  .tkm-wa-float-txt {
    display: none;
  }
}

/* Call-to-action band: the generated grey (#95A3B8) is too faint on the blue band. */
[data-theme="light"] .tkm-page-cta p { color: rgba(255, 255, 255, 0.82); }