/* MOBILE -skärmar som har viewport som en mobil. 
  Grundinställningen för responsiviteten (alla skärmar uppfyller 
  det här kravet)
  */
@media(min-width:320px),
(max-width:320px) {

    /* scroll-padding-topp gör att när man klickar på en knapp eller en länk
    som förflyttar skärmen till att visa ett visst element med angivet id,
    så fyttas skärmen lite längre ner. På så sätt kan man kompensera för
    sticky header som blockerar sikten */
    html {
        scroll-padding-top: 128px;
    }


    /* för små skärmar ska griden bara ha en kolumn och aside ska hamna direkt
    under headern */
    .grid-container {
        display: grid;
        grid-template-areas:
            'header'
            'aside'
            'main'
            'footer';
    }

    /* lite smalare vänsterkant för små skärmar */
    header {
        padding-left: 20px;
    }

    /* div-containern i headern som innehåller menyikonen ska vara synlig */
    .header_container2 {
        display: block;
    }


    /* Aside-menyn ska inte visas och aktiveras istället med javascript när man 
    klickar på meny-knappen samtidigt som underrubriken göms.
    
    Aside sätts till sticky  när dess topp når y-positionen 42px, vilket också är där h1-rubriken 
    slutar och aside-elementet börjar i flödet. När man skrollar neråt förblir alltså aside orörlig
    redan från början.
    
    Aside-menyn kräver att skärmen är minst 434px hög annars kan man inte se alla rubriker i menyn.*/
    aside {
        position: sticky;
        position: -webkit-sticky;
        top: 42px;
        display: none;
    }



    /* lite mindre padding-marginal */
    main {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* lite mindre rubrik-storlek och top-marginal */
    h1 {
        margin-top: 5px;
        font-size: 32px;
    }

    /* lite mindre paragraftext-storlek i headern */
    header p {
        font-size: 16px;
    }

    /* lite mindre h2-rubrik i aside */
    aside h2 {
        font-size: 20px;
    }

}




/* MOBILE LANDSCAPE */
/* @media(min-width:578px) {

} */


/* TABLET */
/* @media(min-width:768px) {

} */




/* SCREEN */
@media(min-width:1200px) {

    /* lite större scroll-padding */
    html {
        scroll-padding-top: 144px;
    }

    /* grid-container ska ha två kolumner och de tomma divarna header-empty och footer-empty ska ta plats */
    .grid-container {
        display: grid;
        grid-template-areas:
            'header-empty header'
            'aside main'
            'footer-empty footer';
    }

    /* lite bredare vänsterkant för stora skärmar */
    header {
        padding-left: 30px;
    }

    /* Den här diven ska gömmas för stora skärmar, vilket också gömmer meny-ikonen inuti.
    Stora skärmar visar istället aside-menyn direkt i vänsterkanten. */
    .header_container2 {
        display: none;
    }



     /* Aside görs synlig med block-display när skärmen är stor.

    Den görs sticky vid y-positionen 114px under toppen,
    vilket är y-positionen som headern tar slut och där aside börjar i flödet.
    Man kan inte scrolla aside och skärmhöjden måste vara minst 572px för att man ska kunna
    se alla dess rubriker.
    
    Med align-self justeras elementet vertikalt (gäller för grid-items).
    Jag väljer att aside ska fyttas till överkanten (flex-start). */
    
    aside {
        position: sticky;
        position: -webkit-sticky;
        top: 114px;
        display: block;
        align-self: flex-start;
    }

    /* lite större padding-marginal */
    main {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* lite större rubrik-storlek och top-marginal */
    h1 {
        margin-top: 15px;
        font-size: 48px;
    }

    /* lite större paragraftext-storlek i headern */
    header p {
        font-size: 24px;
        margin-top: 5px;
        margin-bottom: 10px
    }

    /* lite större h2-rubrik i aside */
    aside h2 {
        font-size: 24px;
    }

}



/* big screen */
/* @media(min-width:1600px) {

} */