/**
 * Widget Kebolehcapaian (Accessibility Toolbar) — Ko-Nelayan
 * Diletak bucu kiri-bawah (bertentangan dgn Nelia FAB kanan-bawah).
 */

/* ---------- Skip link (WCAG 2.4.1 Bypass Blocks) ---------- */
.konel-a11y-skip-link {
  position: fixed;
  top: -60px;
  left: 8px;
  z-index: 100000;
  background: #002366;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: top .2s ease;
}

.konel-a11y-skip-link:focus {
  top: 8px;
  outline: 3px solid #ffd54a;
  outline-offset: 2px;
}

/* ---------- Floating button ---------- */
.konel-a11y-fab {
  position: fixed;
  bottom: 24px;
  left: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #002366;
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
  z-index: 9997;
  transition: transform .15s ease, box-shadow .15s ease;
}

.konel-a11y-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.konel-a11y-fab:focus-visible {
  outline: 3px solid #ffd54a;
  outline-offset: 2px;
}

/* ---------- Panel ---------- */
.konel-a11y-panel {
  position: fixed;
  bottom: 88px;
  left: 20px;
  width: 300px;
  max-width: calc(100vw - 40px);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  color: #1c1c1c;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  z-index: 9997;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
}

.konel-a11y-panel[hidden] { display: none; }
.konel-a11y-panel.is-open { opacity: 1; transform: translateY(0); }

.konel-a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #002366;
  color: #fff;
  border-radius: 14px 14px 0 0;
  position: sticky;
  top: 0;
}

.konel-a11y-panel-title {
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.konel-a11y-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.konel-a11y-close:hover,
.konel-a11y-close:focus-visible {
  background: rgba(255, 255, 255, .18);
}

.konel-a11y-panel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.konel-a11y-group-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: #555;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.konel-a11y-stepper { display: flex; gap: 8px; }

.konel-a11y-stepper button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid #002366;
  background: #fff;
  color: #002366;
  font-weight: 700;
  cursor: pointer;
}

.konel-a11y-stepper button:hover,
.konel-a11y-stepper button:focus-visible {
  background: #002366;
  color: #fff;
}

.konel-a11y-lang-btn.is-active {
  background: #002366;
  color: #fff;
}

.konel-a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.konel-a11y-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 10px;
  border: 1.5px solid #d8dee8;
  background: #f7f9fc;
  color: #1c1c1c;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.konel-a11y-toggle i { font-size: 1.2rem; color: #002366; }

.konel-a11y-toggle.is-active {
  background: #002366;
  border-color: #002366;
  color: #fff;
}

.konel-a11y-toggle.is-active i { color: #ffd54a; }

.konel-a11y-toggle:focus-visible {
  outline: 3px solid #ffd54a;
  outline-offset: 2px;
}

.konel-a11y-read-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid #002366;
  background: #fff;
  color: #002366;
  font-weight: 700;
  cursor: pointer;
}

.konel-a11y-read-btn:hover,
.konel-a11y-read-btn:focus-visible {
  background: #002366;
  color: #fff;
}

.konel-a11y-read-btn.is-active {
  background: #002366;
  color: #fff;
}

.konel-a11y-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid #b21e35;
  background: #fff;
  color: #b21e35;
  font-weight: 700;
  cursor: pointer;
}

.konel-a11y-reset:hover,
.konel-a11y-reset:focus-visible {
  background: #b21e35;
  color: #fff;
}

@media (max-width: 575.98px) {
  .konel-a11y-fab { width: 46px; height: 46px; bottom: 16px; left: 12px; font-size: 1.2rem; }
  /* Lebar dihadkan (bukan calc(100vw - 24px)) — elak tindih zon FAB/nudge Nelia di kanan */
  .konel-a11y-panel { left: 12px; bottom: 70px; width: min(230px, calc(100vw - 110px)); }
}

@media (prefers-reduced-motion: reduce) {
  .konel-a11y-panel, .konel-a11y-fab, .konel-a11y-skip-link { transition: none; }
}

/* ============================================================
 * Kesan kebolehcapaian (dikawal kelas pada <html>)
 * ============================================================ */

/* Kontras Tinggi */
html.konel-a11y-contrast body,
html.konel-a11y-contrast section,
html.konel-a11y-contrast header,
html.konel-a11y-contrast footer,
html.konel-a11y-contrast div,
html.konel-a11y-contrast article,
html.konel-a11y-contrast aside,
html.konel-a11y-contrast nav,
html.konel-a11y-contrast ul,
html.konel-a11y-contrast li {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
}

html.konel-a11y-contrast h1,
html.konel-a11y-contrast h2,
html.konel-a11y-contrast h3,
html.konel-a11y-contrast h4,
html.konel-a11y-contrast h5,
html.konel-a11y-contrast h6,
html.konel-a11y-contrast p,
html.konel-a11y-contrast span {
  color: #fff !important;
  background: transparent !important;
}

html.konel-a11y-contrast a {
  color: #ffd54a !important;
  text-decoration: underline !important;
}

html.konel-a11y-contrast button,
html.konel-a11y-contrast input,
html.konel-a11y-contrast select,
html.konel-a11y-contrast textarea {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #ffd54a !important;
}

html.konel-a11y-contrast .konel-a11y-panel,
html.konel-a11y-contrast .konel-a11y-panel-body,
html.konel-a11y-contrast .konel-a11y-toggle,
html.konel-a11y-contrast .konel-a11y-stepper button {
  background-color: #000 !important;
  color: #fff !important;
}

/* Skru Warna (grayscale) */
html.konel-a11y-grayscale { filter: grayscale(100%); }

/* Garis Bawah Pautan */
html.konel-a11y-underline-links a { text-decoration: underline !important; }

/* Fon Mudah Baca */
html.konel-a11y-readable-font,
html.konel-a11y-readable-font body,
html.konel-a11y-readable-font p,
html.konel-a11y-readable-font li,
html.konel-a11y-readable-font span,
html.konel-a11y-readable-font div,
html.konel-a11y-readable-font a {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: .02em !important;
  line-height: 1.7 !important;
  word-spacing: .05em !important;
}

/* Jarak Teks (WCAG 1.4.12 Text Spacing) — nilai minimum SC 1.4.12, TANPA
   tukar fon (berasingan drpd "Fon Mudah Baca" — boleh gabung kedua-dua). */
html.konel-a11y-text-spacing,
html.konel-a11y-text-spacing p,
html.konel-a11y-text-spacing li,
html.konel-a11y-text-spacing span,
html.konel-a11y-text-spacing div,
html.konel-a11y-text-spacing a {
  line-height: 1.5 !important;
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}

html.konel-a11y-text-spacing p {
  margin-bottom: 2em !important;
}

/* Hentikan Animasi (WCAG 2.3.3) */
html.konel-a11y-stop-motion *,
html.konel-a11y-stop-motion *::before,
html.konel-a11y-stop-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Kursor Besar — anak panah SVG custom (~2x saiz OS lalai), hitam+putih
   utk elemen biasa, royal blue+putih utk elemen boleh-klik (kekalkan
   pembezaan "boleh klik" yg biasanya dibawa cursor:pointer). */
html.konel-a11y-big-cursor,
html.konel-a11y-big-cursor * {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KPHBhdGggZD0iTTYgNCBMNiAzOCBMMTUgMzAuNCBMMjEgNDMgTDI2LjYgNDAuNCBMMjAuNiAyOCBMMzQgMjggWiIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=") 6 4, auto !important;
}

html.konel-a11y-big-cursor a,
html.konel-a11y-big-cursor button,
html.konel-a11y-big-cursor input,
html.konel-a11y-big-cursor select,
html.konel-a11y-big-cursor textarea,
html.konel-a11y-big-cursor summary,
html.konel-a11y-big-cursor label,
html.konel-a11y-big-cursor [role="button"],
html.konel-a11y-big-cursor [onclick],
html.konel-a11y-big-cursor .btn {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KPHBhdGggZD0iTTYgNCBMNiAzOCBMMTUgMzAuNCBMMjEgNDMgTDI2LjYgNDAuNCBMMjAuNiAyOCBMMzQgMjggWiIgZmlsbD0iIzAwMjM2NiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=") 6 4, pointer !important;
}

/* ============================================================
 * Google Website Translator — sembunyi UI asal Google (kita guna
 * butang BM/English kita sendiri), elak layout shift bila banner
 * "Powered by Google" cuba tolak <body> ke bawah.
 *
 * NOTA: Google guna nama kelas auto-jana/obfuscated utk banner sejak
 * versi terkini (cth. "VIpgJd-ZVi9od-ORHb-OEVmcd") — TIDAK boleh
 * dipercayai (berubah ikut versi skrip Google, bukan dlm kawalan kita).
 * "skiptranslate" pula kekal STABIL merentas versi (Google guna ia utk
 * tandakan elemen UI sendiri, disahkan empirik) — sasar itu sebagai
 * penyelesaian utama. .goog-te-banner-frame dikekal sbg sandaran warisan.
 * ============================================================ */
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-gadget-icon,
#konel-gt-target {
  display: none !important;
}

body {
  top: 0 !important;
  position: static !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ============================================================
 * Panduan Bacaan (Reading Guide) — 2 jalur gelap fixed, JS kawal
 * height/top ikut Y kursor. pointer-events:none = tak ganggu klik.
 * z-index DI BAWAH panel a11y (9997) & FAB Nelia (9998+) — kekal
 * boleh dicapai walau jalur menutupi kedudukannya secara menegak.
 * ============================================================ */
.konel-a11y-reading-guide {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9996;
  pointer-events: none;
  display: none;
}

/* Sembunyi panel cuaca (kiri-atas) bila Accessibility Menu terbuka (kiri-bawah)
   — kedua-dua fixed bucu kiri, boleh bertindih bila panel cuaca terlipat
   (bucu tab "Cuaca" jatuh dalam ruang panel a11y). */
body.konel-a11y-open .konel-weather {
  display: none;
}

.konel-a11y-reading-guide-top {
  top: 0;
  height: 0;
}

.konel-a11y-reading-guide-bottom {
  bottom: 0;
  top: 100%;
}