/* ============================================
   Victorian Governance Navigator — Style Layer
   Typography: Fraunces (display) + Plus Jakarta Sans (body)
   Brand: Deep teal/petrol
   ============================================ */

/* --- Focus states (accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0f4c5c;
    outline-offset: 2px;
}

/* --- Dimmed state for non-applicable nodes --- */
.node-dimmed {
  opacity: 0.4;
  transition: opacity 0.15s;
}
.node-dimmed:hover {
  opacity: 0.6;
}

/* --- HTMX loading indicator --- */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}
#loading-bar {
    animation: loading-pulse 1.5s ease-in-out infinite;
}
@keyframes loading-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* --- Prose adjustments for rendered markdown --- */
.prose h2 { margin-top: 1.5em; margin-bottom: 0.5em; }
.prose h3 { margin-top: 1.25em; margin-bottom: 0.5em; }
.prose table { font-size: 0.875rem; }
.prose td, .prose th { padding: 0.5rem 0.75rem; }

/* --- HTMX view transitions --- */
.htmx-swapping { opacity: 0; transition: opacity 150ms ease-out; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease-in; }
.htmx-added { opacity: 0; }
.htmx-added.htmx-settling { opacity: 1; transition: opacity 200ms ease-in; }

/* --- Smooth scroll and selection --- */
html { scroll-behavior: smooth; }
::selection { background-color: #e0f2f1; color: #0a3640; }

/* --- Print styles --- */
@media print {
    header, footer, nav, .no-print { display: none !important; }
    body { background: white !important; }
    main { max-width: 100% !important; padding: 0 !important; }
    #loading-bar { display: none !important; }
    .bg-surface-raised { background: white !important; }
    details { display: block !important; }
    details > summary { display: none !important; }
    details > div, details > * { display: block !important; }
}