/*
=================================================================
  KOHANDATUD STIILID MOBIILI- JA TAHVELARVUTI MENÜÜLE
  Viimati uuendatud: 16. juuli 2025
=================================================================
*/

/*
-----------------------------------------------------------------
  MENÜÜ SPETSIIFILISED STIILID
  Need reeglid rakenduvad nüüd nii mobiilidele kui ka tahvlitele.
-----------------------------------------------------------------
*/
/* UUENDUS: Muudetud 768px -> 1024px, et kaasata tahvelarvutid */
@media (max-width: 1024px) {

    /* --- PARANDUS: Ikoonide paigutus mobiilimenüüs --- */

    /* Samm 1: Muudame list-itemi (li) positsioneerimise kontekstiks.
       See on vajalik, et saaksime ikooni selle sees täpselt paigutada. */
    .wp-block-navigation__responsive-container .wp-block-navigation-item[class*="fa-"] {
      position: relative;
    }

    /* Samm 2: Positsioneerime ikooni (mis luuakse ::before pseudo-elemendiga)
       absoluutselt list-itemi vasakusse serva. */
    .wp-block-navigation__responsive-container .wp-block-navigation-item[class*="fa-"]::before {
      position: absolute;
      left: 15px; /* Kaugus konteineri vasakust servast */
      top: 50%; /* Joondame vertikaalselt keskele */
      transform: translateY(-50%);
      font-size: 20px; /* Veendume, et ikooni suurus on sobiv */
      /* Font Awesome lisab ise sisu (content) ja fondi (font-family) */
    }


    /* --- Kogu avatud mobiilimenüü taust --- */
    .wp-block-navigation__responsive-container {
        /*
         * UUENDATUD TAUST: Pilt on gradienti peal.
         * Pilt (esimene väärtus) asetatakse gradienti (teine väärtus) peale.
        */
        background: 
            /* 1. SAMM: Aseta siia oma läbipaistva pildi URL */
            url('https://www.transparenttextures.com/patterns/brushed-alum.png'),
            
            /* 2. SAMM: Taustagradient jääb pildi alla */
            linear-gradient(to bottom, #a35382 60%, #e39568 100%) !important;
        
        /* Lisaseaded pildi jaoks (valikuline) */
        background-repeat: repeat; /* Pilt kordub üle tausta (või 'no-repeat') */
        background-position: center center; /* Pildi asukoht */
    }

    /* --- Mobiilimenüü linkide tekst, suurus ja värv --- */
    .wp-block-navigation__responsive-container .wp-block-navigation-item a {
        font-size: 1.37rem; /* Mobiilis võib tekst olla suurem */
        color: #ffffff !important; /* Teksti värv valgeks */
        padding: 15px 10px; /* Üldine polsterdus */
        transition: background-color 0.3s ease; /* Sujuv üleminek */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Õrn joon menüüpunktide vahel */
        display: block; /* Tagab, et link täidab kogu rea laiuse */
    }

    /* Samm 3: Lisame spetsiaalselt ikooniga menüüpunkti lingile (a) vasakule
       rohkem polsterdust, et tekst ei jääks ikooni alla. */
    .wp-block-navigation__responsive-container .wp-block-navigation-item[class*="fa-"] a {
      padding-left: 45px !important; /* Suurem polsterdus vasakul teeb ruumi ikoonile */
    }
    
    /* Eemaldab viimase menüüpunkti alt joone */
    .wp-block-navigation__responsive-container .wp-block-navigation-item:last-of-type a {
        border-bottom: none;
    }

    /* Muudab lingi tausta, kui hiirega peale minna */
    .wp-block-navigation__responsive-container .wp-block-navigation-item a:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Kergelt läbipaistev valge taust */
    }

    /* Tõstab esile aktiivse (hetkel vaadatava) lehe menüüpunkti */
    .wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item > a {
        background-color: rgba(0, 0, 0, 0.2); /* Aktiivse lingi taust tumedamaks */
        font-weight: bold; /* Tekst paksuks */
    }
    
    /* Muudab sulgemise "X" nupu värvi valgeks, et see oleks nähtav */
    .wp-block-navigation__responsive-container-close {
        color: #ffffff;
    }

    /* Kujundab "Logi välja" nupu (kindel taust, ilma raamita) */
    /* Uuendatud: Sihime nii välimist DIV-i kui ka sisemist A-linki, et eemaldada kõik raamid */
    .wp-block-navigation__responsive-container .log-inout-button-mobile {
      margin: 20px 10px 10px 10px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      border: none !important; /* Eemaldame raami DIV-ilt */
      box-shadow: none !important; /* Eemaldame varju DIV-ilt */
      outline: none !important; /* Eemaldame outline'i DIV-ilt */
      transition: background-color 0.3s ease;
      overflow: hidden; /* Aitab vältida visuaalseid vigu */
    }

    .wp-block-navigation__responsive-container .log-inout-button-mobile a {
      padding: 12px;
      color: white !important;
      border: none !important; /* Topeltkontroll, et ka lingil pole raami */
      box-shadow: none !important;
      outline: none !important;
      text-align: center;
      display: block;
      text-decoration: none;
      font-size: 18px;
      background-color: transparent !important; /* Lingi taust on läbipaistev, värv tuleb vanem-elemendilt */
    }
    
    /* "Logi välja" nupu stiil hiirega peal olles (muudame DIV-i tausta) */
    .wp-block-navigation__responsive-container .log-inout-button-mobile:hover {
      background-color: rgba(255, 255, 255, 0.2); /* Taust muutub veidi heledamaks */
    }

}