/* media.css */

/* Pielāgo izkārtojumu mazākiem ekrāniem vai pie lielāka zoom (768px vai mazāk) */
@media (max-width: 768px) {
    /* Slēpjam parasto izvēlni un parādām hamburgera ikonu */
    .nav ul {
        display: none; /* Slēpjam izvēlni mazajos ekrānos */
    }

    .hamburger {
        display: flex;           /* Parādam hamburgera ikonu */
        flex-direction: column;  /* Sakārto span elementus kolonnā (vertikāli) */
        justify-content: center; /* Centrē span elementus vertikāli */
        align-items: center;     /* Centrē span elementus horizontāli */
        cursor: pointer;         /* Peles kursors parāda pointeru */
        height: 100%;            /* Pārliecināmies, ka hamburgera augstums ir pilns */
    }

    /* Span elementi (svītriņas) */
    .hamburger span {
        display: block;
        width: 30px;             /* Pielāgo span elementu platumu */
        height: 3px;             /* Pielāgo span elementu augstumu */
        background-color: var(--primary-color); /* Krāsa no root mainīgā */
        margin: 5px 0;           /* Atstarpe starp svītriņām */
    }

    /* Izvēlne, kas parādās, kad klikšķināt uz hamburgera ikonas */
    .nav.active ul.open {
        display: flex;           /* Rādām izvēlni, kad tā ir aktīva */
        flex-direction: column;  /* Sakārtojam izvēlnes vienumus kolonnā */
        align-items: center;     /* Centrējam izvēlnes vienumus horizontāli */
        position: absolute;
        top: 60px;               /* Novietojam zem header */
        left: 50%;
        transform: translateX(-50%); /* Centrējam horizontāli */
        background-color: #333333; /* Fona krāsa: pelēka (#808080) */
        padding: 10px;
        border-radius: 8px;      /* Noapaļoti stūri */
        width: 25%;              /* Platums 25% no ekrāna platuma */
        z-index: 1000;
    }

    .nav.active ul.open li {
        margin: 10px 0;          /* Vertikāla atstarpe starp izvēlnes vienumiem */
    }

    .nav.active ul.open li a {
        text-decoration: none;   /* Noņemam pasvītrojumu */
    }

    /* Sociālās ikonas mazajos ekrānos */
    .header .social-icons {
        justify-content: center;
        margin-top: 10px;
    }
}

/* Lielākiem ekrāniem (virs 768px) */
@media (min-width: 769px) {
    /* Parādam parasto izvēlni un slēpjam hamburgera ikonu */
    .nav {
        display: flex;
        justify-content: center; /* Centrējam izvēlni horizontāli */
        align-items: center;
    }

    .nav ul.open {
        display: flex;
        list-style: none;        /* Noņemam noklusējuma saraksta punktus */
        padding: 0;
        margin: 0;
        /* Noņemam platuma un fona iestatījumus, lai tie neietekmētu lielos ekrānus */
    }

    .nav ul.open li {
        margin: 0 10px;          /* Horizontāla atstarpe starp izvēlnes vienumiem */
        position: relative;      /* Nepieciešams nolaižamās izvēlnes pozicionēšanai */
    }

    .nav ul.open li a,
    .nav ul.open li .dropbtn {
        text-decoration: none;
        padding: 5px 10px;       /* Iekšējās atstarpes */
        cursor: pointer;
    }

    /* Slēpjam hamburgera ikonu */
    .hamburger {
        display: none;
    }
}

/* Nolaižamās izvēlnes saturs */
/* Šie stili attiecas tikai uz nolaižamo izvēlni, un tos var atstāt ārpus @media vaicājuma */
.dropdown-content {
    display: none;           /* Sākotnēji paslēpta */
    position: absolute;
    top: 100%;               /* Novietojam tieši zem pogas */
    left: 50%;
    transform: translateX(-50%); /* Centrējam horizontāli */
    background-color: #808080; /* Fona krāsa: pelēka (#808080) */
    width: 25%;              /* Platums 25% */
    padding: 10px;
    border-radius: 8px;      /* Noapaļoti stūri */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    list-style: none;        /* Noņemam saraksta punktus */
}

/* Parādām nolaižamo izvēlni, kad pele ir virs vecāka elementa */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Stilizējam nolaižamās izvēlnes saraksta elementus */
.dropdown-content li {
    padding: 8px 16px;
    text-align: center;      /* Centrējam tekstu */
}

/* Stilizējam nolaižamās izvēlnes saites */
.dropdown-content li a {
    text-decoration: none;
    display: block;
}

/* Hover efekts nolaižamās izvēlnes saitēm */
.dropdown-content li a:hover {
    background-color: #f1f1f1;
}

/* Dekoratīvais elements (•) */
.decor-element {
    margin-right: 5px;
}