/*
 * Puskesmas Gajah Mada - Modern Medical Blue
 * Custom stylesheet (plain CSS, no build step).
 *
 * Tailwind CSS is loaded separately via CDN (see inc/enqueue.php /
 * template-parts/tailwind-config.php) and provides the utility classes
 * used throughout the theme templates (bg-primary, text-text, etc.).
 * This file only contains:
 *   1. Design-system CSS custom properties (colors, radius, shadow).
 *   2. Base element styles that are awkward to express as inline
 *      utility classes (focus ring, headings, WordPress menu structure).
 *   3. Accessibility toggle styles (high contrast, grayscale, underline
 *      links) driven by assets/js/accessibility.js.
 *   4. prefers-reduced-motion support.
 *
 * No @tailwind directives and no @apply are used here on purpose: the
 * CDN build of Tailwind does not run a build step against this file, so
 * @apply would not be compiled and the rules would simply fail.
 */

/* ==========================================================
   1. Design tokens - Modern Medical Blue
   ========================================================== */
:root {
  --base-font-size: 100%;

  --color-primary: #1769aa;
  --color-primary-light: #2f8fd1;
  --color-primary-dark: #0f4d7d;
  --color-secondary: #13a89e;
  --color-secondary-light: #3fc7bd;
  --color-secondary-dark: #0c7d75;
  --color-navy: #15324b;
  --color-background: #f3f8fc;
  --color-surface: #ffffff;
  --color-surface-muted: #eef4fa;
  --color-text: #243746;
  --color-text-muted: #64748b;
  --color-border: #dce6ef;

  --radius-card: 14px;
  --shadow-card: 0 4px 14px -2px rgba(21, 50, 75, 0.1), 0 2px 6px -2px rgba(21, 50, 75, 0.06);
}

html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-text);
}

p {
  line-height: 1.7;
}

/* ==========================================================
   2. Accessibility: focus styles
   ========================================================== */
*:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================
   3. WordPress navigation menu structure
   ========================================================== */
.primary-menu > li {
  position: relative;
  list-style: none;
}

.primary-menu a {
  font-weight: 500;
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
  background-color: var(--color-surface-muted);
  color: var(--color-primary);
}

.primary-menu .current-menu-item > a,
.primary-menu .current-page-ancestor > a {
  color: var(--color-primary);
  font-weight: 700;
  background-color: var(--color-surface-muted);
}

.primary-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  width: 14rem;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}

.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.primary-menu .sub-menu li {
  width: 100%;
  display: block;
  list-style: none;
}

.primary-menu .sub-menu a {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: 0;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
  background-color: var(--color-surface-muted);
  color: var(--color-primary);
}

/* Mobile menu */
.mobile-menu li {
  width: 100%;
  display: block;
  list-style: none;
}

.mobile-menu > li > a {
  display: block;
  width: 100%;
  font-weight: 500;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.mobile-menu > li > a:hover {
  color: var(--color-primary);
}

.mobile-menu .current-menu-item > a {
  color: var(--color-primary);
  font-weight: 700;
}

.mobile-menu .sub-menu {
  padding-left: 1rem;
  margin: 0.25rem 0;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--color-border);
  background-color: rgba(238, 244, 250, 0.6);
  border-radius: 0 0.5rem 0.5rem 0;
}

.mobile-menu .sub-menu a {
  display: block;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  border-bottom: none;
}

.mobile-menu .sub-menu a:hover {
  color: var(--color-primary);
}

/* ==========================================================
   4. Accessibility toggles (controlled by assets/js/accessibility.js)
   ========================================================== */

/*
 * Mode Kontras Tinggi - SENGAJA tidak memakai filter: contrast().
 * filter: contrast() hanya efek visual mentah dan tidak menjamin rasio
 * kontras memenuhi WCAG 2.2 AA/AAA. Solusi yang dipakai di sini adalah
 * mengganti nilai warna ke kombinasi yang sudah diuji rasio kontrasnya.
 */
html.a11y-high-contrast {
  background-color: #ffffff;
  color: #000000;
}

html.a11y-high-contrast body,
html.a11y-high-contrast .bg-white,
html.a11y-high-contrast .bg-surface,
html.a11y-high-contrast .bg-surface-muted {
  background-color: #ffffff !important;
}

html.a11y-high-contrast .text-text,
html.a11y-high-contrast .text-text-muted,
html.a11y-high-contrast p,
html.a11y-high-contrast span,
html.a11y-high-contrast li,
html.a11y-high-contrast h1,
html.a11y-high-contrast h2,
html.a11y-high-contrast h3,
html.a11y-high-contrast h4 {
  color: #000000 !important;
}

html.a11y-high-contrast a,
html.a11y-high-contrast .text-primary,
html.a11y-high-contrast .text-primary-dark {
  color: #063f63 !important; /* Biru gelap, rasio kontras >7:1 di atas putih (AAA). */
  text-decoration: underline;
}

html.a11y-high-contrast .bg-primary,
html.a11y-high-contrast .bg-primary-dark {
  background-color: #063f63 !important;
  color: #ffffff !important;
}

html.a11y-high-contrast * {
  border-color: #000000 !important;
}

html.a11y-high-contrast img,
html.a11y-high-contrast svg {
  filter: none !important; /* Jangan ikut memutihkan foto/ikon dengan mode ini. */
}

/* Grayscale adalah preferensi visual murni (bukan mekanisme kontras WCAG). */
html.a11y-grayscale {
  filter: grayscale(100%);
}

html.a11y-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* ==========================================================
   5. Reduced motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}