/*
 * PANTON – JEDINÁ TYPOGRAFICKÁ RODINA WEBU
 *
 * Do složky public/fonts vložte soubory přesně s těmito názvy:
 *   panton-regular.woff2    (400)
 *   panton-medium.woff2     (500)
 *   panton-semibold.woff2   (600)
 *   panton-bold.woff2       (700)
 *   panton-extrabold.woff2  (800)
 *   panton-black.woff2      (900)
 *
 * Thin ani Light se záměrně nepoužívají.
 */
@font-face {
    font-family: 'Panton';
    src: url('/fonts/panton-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Panton';
    src: url('/fonts/panton-medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Panton';
    src: url('/fonts/panton-semibold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Panton';
    src: url('/fonts/panton-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Panton';
    src: url('/fonts/panton-extrabold.woff2') format('woff2');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Panton';
    src: url('/fonts/panton-black.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

:root {
    --font-main: 'Panton', Arial, sans-serif;
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--font-main);
}

body {
    background-color: #09090b;
    color: #e4e4e7;
    font-weight: 400;
}

/* Výrazné nadpisy */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: var(--font-main);
    font-weight: 900;
}

/* Běžné ovládací prvky mají klidnější váhu než nadpisy. */
button,
[role='button'],
input[type='button'],
input[type='submit'],
input[type='reset'],
a.mobile-store-button {
    font-family: var(--font-main);
    font-weight: 500 !important;
}

/* Navigace musí být na všech stránkách opticky stejná. */
#navbar,
#navbar a,
#mobile-menu,
#mobile-menu a {
    font-family: var(--font-main);
    font-weight: 600 !important;
    letter-spacing: 0.025em;
}

/* Footer je čitelný, ale nemá soupeřit s nadpisy. */
footer,
footer a,
footer p,
footer span,
footer li {
    font-family: var(--font-main);
    font-weight: 500 !important;
}

/* Formulářové popisky a drobné UI texty. */
label,
.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

#mobile-menu {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

@media (max-width: 767px) {
    #navbar { padding-top: 0.5rem; }
    #navbar > div:first-child { padding-left: 1rem; padding-right: 1rem; }
    #navbar img[alt='PvPMania'] { height: 4rem; }
    .mobile-store-label { display: none; }
    .mobile-store-button { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
    .hero-pattern, .parallax-bg { background-attachment: scroll; }
    #toast { left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; }
    h1 { overflow-wrap: anywhere; }
}

@media (max-width: 639px) {
    .mobile-safe-title { font-size: clamp(2.5rem, 13vw, 4rem) !important; }
    .mobile-card-padding { padding: 1.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}