/**
 * Tiedosto: resurssit/tyylit/paatyyli.css
 * Versio: 1.4
 * Kuvaus: Sivuston päätyylitiedosto. LISÄTTY: Globaali edge-to-edge pakotus. PÄIVITYS 1.4: Korjattu kriittinen selainbugi! Muutettu 'overflow-x: hidden' muotoon 'overflow-x: clip', jotta 'position: sticky' -yläpalkki voi vihdoin toimia. Tehty <3 Kalajoella.
 * Tekijä: Markus Haapasaari / Kaupunkilehti Kalajokinen
 */

/* =========================================================================
   1. GLOBAALIT PAKOTUKSET SIVUSTON LEVEYDELLE (Edge-to-Edge)
   ========================================================================= */
:root {
    --nav-gap: 1.5rem;
}

body {
    font-family: var(--font-body), sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 !important;
    padding: 0 !important;

    /* KRITTINEN KORJAUS: overflow-x: clip estää sivun heilumisen sivusuunnassa,
       MUTTA ei tuhoa yläpalkin tahmeutta (sticky) toisin kuin hidden! */
    overflow-x: clip;
}

/* Poistetaan ylätason elementeiltä max-width -rajoitteet koko sivustolla */
header,
nav,
#sisalto,
.ylapalkki,
.paavalikko,
.alatunniste,
.sivun-sisalto {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Pakotetaan KAIKKI sisäiset wrapperit (headerit, valikot, containerit) tasan 12px reunaan */
header > div,
nav > div,
.paavalikko > div,
.ylapalkki > div,
.megamenu > div,
.alatunniste > div,
[class*="paavalikko-container"],
[class*="header-container"],
[class*="nav-container"],
[class*="valikko-kääre"],
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================================
   2. NAVIGAATION KORJAUKSET
   ========================================================================= */
.nav-tyopoyta {
    display: flex;
}

.hampurilais-nappi,
.mobiili-overlay {
    display: none; /* Piilotetaan oletuksena työpöydällä */
}

/* =========================================================================
   3. RESPONSIIVISUUS (Mobiili)
   ========================================================================= */
@media (max-width: 1024px) {
    .nav-tyopoyta {
        display: none !important; /* Piilotetaan vaakalista mobiilissa */
    }

    .hampurilais-nappi {
        display: flex; /* Näytetään hampurilainen vasta mobiilissa */
    }

    .ylapalkki-sisalto {
        grid-template-columns: auto 1fr auto;
    }
}

/* =========================================================================
   4. YLEISIÄ TYYLEJÄ (Esim. otsikot)
   ========================================================================= */
.tervetuloa-alue h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--color-primary);
}