/**
 * KSSBS.SK - Design System
 * Základné štýly a tmavý režim. Poradie súborov: includes/head.php
 */

/* Partials sa načítavajú ako samostatné <link> s verziou (includes/head.php),
   tento súbor ide posledný: základ stránky + tmavý režim. */

/* ============================================
   BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color2);
    background: var(--color5);
}

/* Mobil: miesto pre fixnú spodnú lištu (.mobile-bottom-nav), inak zakryje koniec
   stránky — pravidlo musí byť až za „padding: 0“ vyššie, preto tu, nie v _home.css */
@media (max-width: 600px) {
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin: 0;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
}

/* Alpine: prvky s x-cloak sú skryté, kým ich Alpine nespracuje */
[x-cloak] {
    display: none !important;
}

/* Main content wrapper - no top margin since header is floating */
main,
.main-content {
    padding-top: 0;
    margin-top: 0;
}

.main-content>*:first-child {
    margin-top: 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Visually Hidden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-gray {
    color: var(--color-gray-600);
}

.font-heading {
    font-family: var(--font-heading);
}

.font-body {
    font-family: var(--font-body);
}

.font-medium {
    font-weight: var(--font-medium);
}

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}

/* Spacing Utilities */
.mt-0 {
    margin-top: 0;
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

.pt-0 {
    padding-top: 0;
}

.pt-4 {
    padding-top: var(--space-4);
}

.pt-8 {
    padding-top: var(--space-8);
}

.pb-0 {
    padding-bottom: 0;
}

.pb-4 {
    padding-bottom: var(--space-4);
}

.pb-8 {
    padding-bottom: var(--space-8);
}

/* Display Utilities */
.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

/* Flex Utilities */
.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-8 {
    gap: var(--space-8);
}

/* Width Utilities */
.w-full {
    width: 100%;
}

.max-w-screen-lg {
    max-width: 1024px;
}

.max-w-screen-xl {
    max-width: 1280px;
}

/* Responsive Utilities */
@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }

    .md\:block {
        display: block;
    }

    .md\:flex {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }

    .lg\:block {
        display: block;
    }

    .lg\:flex {
        display: flex;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

.animate-slide-up {
    animation: slide-up 0.4s ease-out;
}

.animate-slide-down {
    animation: slide-down 0.4s ease-out;
}

.animate-scale-in {
    animation: scale-in 0.3s ease-out;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .header,
    .footer,
    .nav-mobile,
    .cookie-consent,
    .scroll-to-top,
    .mega-header,
    .mobile-topbar,
    .mobile-bottom-nav,
    .mobile-panel-overlay,
    .mobile-expanded-panel,
    .mobile-overlay,
    .skip-link,
    .art-rail,
    .art-react {
        display: none !important;
    }

    /* tlač: bez miesta pre plávajúcu hlavičku */
    :root {
        --header-offset: 0px;
    }
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

/* By default, elements are visible (for no-JS fallback) */
.animate-on-scroll {
    opacity: 1;
    transform: none;
}

/* Only apply animation styles when JS is enabled */
.js .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations for grid items */
.js .animate-on-scroll.delay-1 {
    transition-delay: 0.1s;
}

.js .animate-on-scroll.delay-2 {
    transition-delay: 0.2s;
}

.js .animate-on-scroll.delay-3 {
    transition-delay: 0.3s;
}

.js .animate-on-scroll.delay-4 {
    transition-delay: 0.4s;
}

.js .animate-on-scroll.delay-5 {
    transition-delay: 0.5s;
}

.js .animate-on-scroll.delay-6 {
    transition-delay: 0.6s;
}

/* Fade from left/right variations */
.js .animate-on-scroll.from-left {
    transform: translateX(-30px);
}

.js .animate-on-scroll.from-right {
    transform: translateX(30px);
}

.js .animate-on-scroll.from-left.is-visible,
.js .animate-on-scroll.from-right.is-visible {
    transform: translateX(0);
}

/* Scale variation */
.js .animate-on-scroll.scale-up {
    transform: scale(0.9);
}

.js .animate-on-scroll.scale-up.is-visible {
    transform: scale(1);
}

/* Respect reduced motion preference — aj varianty (from-left/right, scale-up
   majú vyššiu špecificitu a inak by ostali trvalo posunuté) */
@media (prefers-reduced-motion: reduce) {
    .js .animate-on-scroll,
    .js .animate-on-scroll.from-left,
    .js .animate-on-scroll.from-right,
    .js .animate-on-scroll.scale-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
.scroll-to-top {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    z-index: 999;
}

.scroll-to-top:hover {
    background: var(--color-primary-light);
    transform: translateY(0) scale(1.1);
    box-shadow: var(--shadow-xl);
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top.is-visible:hover {
    transform: translateY(-4px);
}

/* Mobil: dole je navigačná lišta — plávajúce tlačidlo by prekrývalo obsah */
@media (max-width: 600px) {
    .scroll-to-top {
        display: none;
    }
}

/* ============================================
   SKELETON LOADING
   ============================================ */
.skeleton {
    background: linear-gradient(90deg,
            var(--color-gray-200) 0%,
            var(--color-gray-100) 50%,
            var(--color-gray-200) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-title {
    height: 1.5em;
    width: 80%;
    margin-bottom: var(--space-3);
}

.skeleton-image {
    aspect-ratio: 16/9;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

.skeleton-card {
    padding: var(--space-4);
    background: var(--color-white);
    border-radius: var(--radius-xl);
}

/* ============================================
   DARK MODE
   ============================================ */
/* Tmavý režim: <html data-theme="dark"> nastavuje includes/theme-init.php
   (voľba návštevníka, inak podľa systému). */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-body-bg: #0f172a;
    --color-gray-50: #1e293b;
    --color-gray-100: #334155;
    --color-gray-200: #475569;
    --color-gray-300: #64748b;
    --color-gray-400: #94a3b8;
    --color-gray-500: #cbd5e1;
    --color-gray-600: #e2e8f0;
    --color-gray-700: #f1f5f9;
    --color-gray-800: #f8fafc;
    --color-gray-900: #ffffff;
    --color-white: #1e293b;
    /* tiene v tmavom režime: tmavšie, inak by na tmavom podklade zmizli */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.25), 0 14px 36px -14px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 52px -18px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 4px 10px rgba(0, 0, 0, 0.3), 0 34px 70px -24px rgba(0, 0, 0, 0.65);
    --shadow-header: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 36px -14px rgba(0, 0, 0, 0.55);
    /* farby škôl: svetlejší text, tmavé (nepriehľadné) podklady štítkov */
    --color-main-ink: #a5b4fc;
    --color-main-tint: color-mix(in srgb, #525fe1 30%, #0f172a);
    --color-ms-ink: #f7c948;
    --color-ms-tint: color-mix(in srgb, #f2b600 22%, #0f172a);
    --color-zs-ink: #b4a3f6;
    --color-zs-tint: color-mix(in srgb, #7655e6 28%, #0f172a);
    --color-wsos-ink: #ffa94d;
    --color-wsos-tint: color-mix(in srgb, #f07f00 24%, #0f172a);
    --color-jedalen-ink: #5fd38d;
    --color-jedalen-tint: color-mix(in srgb, #1c9a4c 26%, #0f172a);
}

[data-theme="dark"] body {
    background: var(--color-body-bg);
    color: var(--color-gray-600);
}

/* Cards */
[data-theme="dark"] .school-card,
[data-theme="dark"] .news-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .contact-card {
    background: var(--color-gray-50);
}

/* Sections */
[data-theme="dark"] .about-section,
[data-theme="dark"] .news-section {
    background: var(--color-body-bg);
}

[data-theme="dark"] .schools-section,
[data-theme="dark"] .stats-section,
[data-theme="dark"] .contact-section {
    background: var(--color-gray-50);
}

/* Text colors */
[data-theme="dark"] .school-card__name,
[data-theme="dark"] .news-card__title,
[data-theme="dark"] .news-card__title a,
[data-theme="dark"] .stat-card__value,
[data-theme="dark"] .about-section__title,
[data-theme="dark"] .contact-section__title,
[data-theme="dark"] .news-section__title {
    color: var(--color-gray-800);
}

/* Footer adjustments */
[data-theme="dark"] .footer {
    background:
        radial-gradient(1100px 520px at 100% 0%, rgba(82, 95, 225, 0.2), transparent 60%),
        radial-gradient(900px 480px at 0% 100%, rgba(140, 92, 230, 0.12), transparent 62%),
        linear-gradient(165deg, #121a33 0%, #0d1326 50%, #0a0f1e 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Skeleton loading */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
        var(--color-gray-100) 0%,
        var(--color-gray-50) 50%,
        var(--color-gray-100) 100%);
    background-size: 200% 100%;
}

/* Images */
[data-theme="dark"] .about-section__img,
[data-theme="dark"] .news-card__img {
    filter: brightness(0.9);
}

/* Obrázok len pre jeden režim (napr. biele logo v tmavom) */
[data-theme="dark"] .only-light,
:root:not([data-theme="dark"]) .only-dark {
    display: none !important;
}

/* Manual dark mode toggle class (optional) */
.dark-mode {
    --color-body-bg: #0f172a;
    --color-gray-50: #1e293b;
    --color-gray-100: #334155;
    --color-gray-200: #475569;
    background: var(--color-body-bg);
}

/* ============================================
   COOKIE CONSENT
   ============================================ */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* v oboch režimoch tmavá lišta s bielym textom */
    background: #111827;
    color: #fff;
    padding: var(--space-4) 0;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.cookie-consent__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    text-align: center;
}

/* Mobil: lišta nad spodnou navigáciou (tá má z-index nižší a zakryla by tlačidlo) */
@media (max-width: 600px) {
    .cookie-consent {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 768px) {
    .cookie-consent__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.cookie-consent__text {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
}

.cookie-consent__text a {
    color: var(--color-secondary);
    text-decoration: underline;
}

.cookie-consent__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Odkaz „Preskočiť na obsah“ — viditeľný len pri ovládaní klávesnicou */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 4000;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--color2);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: none;
}