/*
Theme Name: BeLikeSocks Child
Theme URI: 
Author: Jure Hiršenfelder
Author URI: 
Description: belikesocks-child Child theme for BeLikeSocks
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: belikesocks-child
Tags: 
*/
@media screen and (min-width: 783px) {
    .hero-buttons {
        align-self: flex-start;
        margin-top: -45px !important;
        margin-left: clamp(282px, 13%, 282px) !important;
        position: relative;
        z-index: 2;
    }
}

/* ==================================================
   MOBILNI PRIKAZ – TELEFONI
   Velja samo do širine 782 px
================================================== */

@media screen and (max-width: 782px) {

    /* Prepreči vodoravno premikanje strani */
    html,
    body {
        overflow-x: hidden;
    }


    /* ==================================================
       UVODNA SEKCIJA
    ================================================== */

    .hero-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;

        margin: 0 !important;
        padding: 0 0 24px !important;
        gap: 16px !important;

        box-sizing: border-box !important;
    }


    /* Gallery z glavno ilustracijo */
    .hero-section .wp-block-gallery {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-section .wp-block-gallery figure {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-section .wp-block-gallery img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        object-fit: contain !important;
    }


    /* ==================================================
       GUMBA POD GLAVNO SLIKO
    ================================================== */

    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        /* Odstrani premikanje, uporabljeno na računalniku */
        margin: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;

        padding: 0 16px !important;
        gap: 12px !important;

        box-sizing: border-box !important;
        position: static !important;
    }

    .hero-buttons .wp-block-button {
        width: 100% !important;
        max-width: 280px !important;

        margin: 0 !important;
    }

    .hero-buttons .wp-block-button__link {
        display: block !important;

        width: 100% !important;
        padding: 14px 20px !important;

        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }


    /* ==================================================
       NASLOV "THE MESSAGE"
    ================================================== */

    .the-message {
        width: 100% !important;

        margin: 32px 0 8px !important;
        padding: 0 16px !important;

        box-sizing: border-box !important;
        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }


    /* ==================================================
       NASLOV "BE LIKE A SOCK."
    ================================================== */

    .like-a-sock {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 12px !important;

        box-sizing: border-box !important;
        text-align: center !important;

        font-size: clamp(42px, 13vw, 58px) !important;
        line-height: 1 !important;
        white-space: normal !important;
    }


    /* ==================================================
       ZELENA ČRTA POD NASLOVOM
    ================================================== */

    .message-underline {
        display: block !important;

        width: 85% !important;
        max-width: 360px !important;

        margin: 0 auto 24px !important;
        padding: 0 !important;
    }

    .message-underline img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
    }


    /* ==================================================
       SEKCIJA S TREMI SPOROČILI
    ================================================== */

    .message-icons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 16px !important;
        gap: 24px !important;

        box-sizing: border-box !important;
    }

    /* WordPress Columns znotraj sekcije */
    .message-icons.wp-block-columns,
    .message-icons .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        gap: 24px !important;
    }

    .message-icons .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .message-icons figure {
        width: 100% !important;
        max-width: 320px !important;

        margin: 0 auto !important;
        text-align: center !important;
    }

    .message-icons figure img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
        object-fit: contain !important;
    }


    /* ==================================================
       SEPARATORJI MED SPOROČILI
    ================================================== */

    .vertical-separator {
        width: 70% !important;
        max-width: 260px !important;

        height: 2px !important;
        min-height: 2px !important;

        margin: 4px auto !important;
        padding: 0 !important;

        border: 0 !important;
        background-color: #111111 !important;
    }
}









/* ==================================================
   MOBILNI PRIKAZ
================================================== */

@media screen and (max-width: 782px) {

    /* Prostor za spodnjo navigacijo */
    body {
        padding-bottom: 72px !important;
        overflow-x: hidden;
    }


    /* ==================================================
       SKRIJ SLOGAN
    ================================================== */

    .is-style-plain {
        display: none !important;
    }


    /* ==================================================
       ODSTRANI HAMBURGER GUMB
    ================================================== */

    .mobile-bottom-nav
    .wp-block-navigation__responsive-container-open,

    .mobile-bottom-nav
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }


    /* ==================================================
       SPODNJA FIKSNA NAVIGACIJA
    ================================================== */

    .mobile-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;

        width: 100% !important;
        min-height: 68px !important;

        margin: 0 !important;
        padding: 8px 12px !important;

        box-sizing: border-box !important;
        background-color: #f5f0e8 !important;
        border-top: 1px solid rgba(17, 17, 17, 0.16) !important;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
    }


    /* Meni naj bo vedno prikazan */
    .mobile-bottom-nav
    .wp-block-navigation__responsive-container {
        display: flex !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 0 !important;
        background: transparent !important;
    }

    .mobile-bottom-nav
    .wp-block-navigation__responsive-close {
        width: 100% !important;
    }

    .mobile-bottom-nav
    .wp-block-navigation__responsive-container-content {
        display: flex !important;
        width: 100% !important;
        padding: 0 !important;
    }


    /* Elementi menija v eni vrstici */
    .mobile-bottom-nav
    .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-around !important;

        width: 100% !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-bottom-nav
    .wp-block-navigation-item {
        flex: 1 1 0 !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .mobile-bottom-nav
    .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 48px !important;
        padding: 8px 5px !important;

        box-sizing: border-box !important;
        color: #111111 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

   


    /* ==================================================
       VEČJA GLAVNA ILUSTRACIJA
    ================================================== */
 /*
    .hero-section {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 24px !important;
    }

    .hero-gallery {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-gallery figure {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .hero-gallery img {
        display: block !important;
        width: 120% !important;
        max-width: none !important;
        height: auto !important;

        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        object-fit: contain !important;
    }
*/
    .hero-gallery {
        width: 100% !important;
        height: 330px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .hero-gallery figure {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .hero-gallery img {
        display: block !important;

        width: auto !important;
        max-width: none !important;
        height: 330px !important;

        margin: 0 !important;
        transform: none !important;
        object-fit: contain !important;
        object-position: left center !important;
    }
	    .hero-section {
        gap: 0 !important;
        row-gap: 0 !important;
    }

    .hero-gallery,
    .hero-gallery figure,
    .hero-gallery img {
        margin-bottom: 0 !important;
    }

    .hero-buttons {
        margin-top: -30px !important;
        padding-top: 0 !important;
    }
    
	  /* Celotna spodnja vrstica: logo + nav meni */
    .header-main-row {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 68px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        gap: 8px !important;

        background-color: #f5f0e8 !important;
        border-top: 1px solid rgba(17, 17, 17, 0.16) !important;
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box !important;
    }

    /* Logo na levi strani iste vrstice */
    .header-main-row .wp-block-site-logo {
        display: block !important;
        flex: 0 0 48px !important;
        width: 48px !important;
        margin: 0 !important;
    }

    .header-main-row .wp-block-site-logo img {
        display: block !important;
        width: 48px !important;
        height: auto !important;
        max-height: 56px !important;
        object-fit: contain !important;
    }

    /* Navigation ni več samostojno fiksiran */
    .header-main-row .mobile-bottom-nav {
        position: static !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Povezave zavzamejo prostor desno od logotipa */
    .mobile-bottom-nav .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-around !important;

        width: 100% !important;
        gap: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-bottom-nav .wp-block-navigation-item {
        flex: 1 1 0 !important;
        justify-content: center !important;
    }

    .mobile-bottom-nav .wp-block-navigation-item__content {
        padding: 8px 3px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    /* Prostor, da meni ne prekrije vsebine */
    body {
        padding-bottom: 72px !important;
    }  

}