/* Shared modernization styles: light/dark theme, focus states, scroll animations */

/* "only light" keeps browsers with a forced dark mode from repainting the light theme */
:root {
    color-scheme: only light;
}
html.dark {
    color-scheme: dark;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}
h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #1d4ed8;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.5rem 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
}

/* Focus-visible states across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}
html.dark a:focus-visible,
html.dark button:focus-visible,
html.dark input:focus-visible,
html.dark textarea:focus-visible,
html.dark select:focus-visible {
    outline-color: #93c5fd;
}

.nav-blur {
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.9);
}
html.dark .nav-blur {
    background-color: rgba(15, 23, 42, 0.85);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
}

/* Scroll reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    * {
        scroll-behavior: auto !important;
    }
}

/* Dark mode toggle button */
.theme-toggle {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}
.theme-toggle:hover {
    background-color: rgba(37, 99, 235, 0.1);
}
html.dark .theme-toggle:hover {
    background-color: rgba(148, 163, 184, 0.16);
}

/* Smooth colour change when the theme is switched (class added briefly by site.js) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease,
        fill 0.3s ease, stroke 0.3s ease, box-shadow 0.3s ease !important;
    transition-delay: 0s !important;
}

/* Chrome paints an opaque white backdrop behind iframes whose colour scheme
   differs from the page. YouTube's player is dark and declares no scheme, so
   matching it keeps the black video frame from flashing white in dark mode. */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
    color-scheme: only light;
}

/* Areas that represent printed paper or light third-party widgets stay light in both themes */
.theme-light-surface {
    color-scheme: only light;
    color: #1e293b;
}

/* View Transitions API: progressive enhancement for same-origin navigation */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}