/*
Theme Name:     Lubinik Child Child
Theme URI:      
Description:    lubiniktheme child theme.
Author:         Me
Author URI:     
Template:       lubiniktheme
Version:        0.1.0
*/


@media (max-width: 1299px) {

    /*****************************************************************************
    /* Theme Specific rules ovveride for menu mobile
    /*****************************************************************************/
    
    .site-header .container {
        background-color: var(--lubinik-theme-secondary-color) ;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        max-width: 100% ;
        width: 100% ;
    }
    .menu-toggle {
        color: var(--lubinik-theme-primary-color);
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
    }
      
    .contact-info-mini .whatsapp1-mini a i {
        font-size: var(--lubinik-font-size-lg) !important ;
    }
      
    .contact-info-mini i {
        font-size: var(--lubinik-font-size-lg) !important ;
        color: var(--lubinik-theme-primary-color);
    }
      
    #header-default-top-bar {
        padding: var(--lubinik-spacing-tiny);
    }
      
    #header-default-content .custom-logo-link {
        width: var(--lubinik-default-menu-logo-min-size);
    }
          
    #header-default-content .custom-logo {
        max-height: var(--lubinik-default-menu-logo-min-size);
    }
      
    #site-navigation.toggled > ul{
        display:block !important;      /* cancel desktop flex */
        flex-direction:column !important;  /* safety */
        width:100%;
    }

    /* Mobile menu links - using exact selector structure */
    #site-navigation ul#primary-menu li.menu-item a {
        color: var(--lubinik-theme-secondary-color) ;
        font-weight: 600;
        padding: 10px 15px;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }

      
    /* Current/active menu item */
    #site-navigation ul#primary-menu li.current-menu-item > a {
        color: var(--lubinik-theme-primary-color) !important;
        background-color: var(--lubinik-theme-quinary-color) !important;
    }
          
    /* Collapsible submenu functionality */
    /* Hide submenus by default */
    #site-navigation .sub-menu {
        display: none !important;
    }
          
    /* Show when toggled */
    #site-navigation .menu-item.submenu-open .sub-menu {
        display: block !important;
    }
          
    /* Target specific menu items that have submenus */
    #site-navigation ul#primary-menu .auto-logements,
    #site-navigation ul#primary-menu .auto-terr,
    #site-navigation ul#primary-menu #menu-item-27,
    #site-navigation ul#primary-menu #menu-item-29 {
        position: relative !important;
    }
          
    /* Ensure the main menu item link doesn't change when submenu opens */
    #site-navigation ul#primary-menu .auto-logements > a,
    #site-navigation ul#primary-menu .auto-terr > a,
    #site-navigation ul#primary-menu #menu-item-27 > a,
    #site-navigation ul#primary-menu #menu-item-29 > a {
        position: relative !important;
        padding-right: 50px !important; /* Make space for the arrow */
    }
          
    /* Style for JavaScript-added toggle buttons - MOBILE ONLY */
    #site-navigation .submenu-toggle {
        position: absolute !important;
        right: 10px !important;
        top: 10px !important; /* Fixed position from top instead of center */
        cursor: pointer !important;
        font-size: 16px !important;
        color: var(--lubinik-theme-secondary-color) !important;
        background: transparent !important;
        border: 1px solid var(--lubinik-theme-quaternary-color) !important;
        padding: 6px !important;
        z-index: 999 !important;
        display: block !important;
        width: 30px !important;
        height: 30px !important;
        text-align: center !important;
        line-height: 1 !important;
        border-radius: 4px !important;
        transition: background-color 0.3s ease, color 0.3s ease !important; /* Only transition colors, not position */
    }
          
    #site-navigation .submenu-toggle:hover {
        background-color: var(--lubinik-theme-quaternary-color) !important;
        color: white !important;
    }
          
    #site-navigation .submenu-toggle:focus {
        outline: 2px solid var(--lubinik-theme-quaternary-color) !important;
        outline-offset: 2px !important;
    }
          
    #header-default-content .main-navigation a {
        font-size: var(--lubinik-font-size-lg);
    }
    
    #header-default-content .main-navigation a:hover {
        font-size: var(--lubinik-font-size-lg);
    }       
    
    .main-navigation a:hover:after {
        background-color: var(--lubinik-theme-primary-color) !important;
    }
          

    /* ───────────  hamburger / mobile  ─────────── */
    
    /* 1. Make every level flow vertically */
    .main-navigation.toggled .menu-item,
    .main-navigation.toggled .sub-menu {
        position: static !important;   /* no overlay */
        display: block !important;     /* always visible when hovered/tapped */
        width: 100%;
    }
    
    /* 2. Nesting indent */
    .main-navigation.toggled .sub-menu {
        padding-left: 1.2rem;          /* small indent for children */
    }
    
    /* 3. Optional: subtle divider between top-level items */
    .main-navigation.toggled > ul > li {
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
    
    /* 4. Keep the same hover colours */
    .main-navigation.toggled .sub-menu a:hover {
        background: var(--lubinik-theme-quinary-color);
        color: var(--lubinik-theme-primary-color);
    }
    
    
    .main-navigation .sub-menu, .menu-above-hero .main-navigation .sub-menu {
        background-color: var(--lubinik-theme-primary-color); 
        color: var(--lubinik-theme-quinary-color);
    }
    
    .main-navigation .sub-menu a:hover, 
    .menu-above-hero .main-navigation .sub-menu a:hover {
        color: var(--lubinik-theme-secondary-color) !important;
    background-color: var(--lubinik-theme-quaternary-color) !important;
    }
    
    /* Target ONLY top-level menu items in mobile/hamburger view */
    .main-navigation.toggled #primary-menu > li > a:hover,
    .main-navigation.toggled #primary-menu > li:hover > a {
        background-color: transparent !important;
    }


    
/* Keep submenu hover effects */
    
/* ------------------------------------------------------
    MOBILE SUB-MENU WIDTH FIX (hamburger view)
    Prevent long item names from overflowing the off-canvas panel
------------------------------------------------------ */
    .main-navigation.toggled .sub-menu{
        min-width:0 !important;        /* override desktop 600px */
        width:100% !important;         /* fit parent */
        max-width:100% !important;
        box-sizing:border-box;
    }
    
    .main-navigation.toggled .sub-menu a{
        white-space:normal !important; /* allow wrapping */
        overflow-wrap:anywhere;        /* break long words */
    }
    .main-navigation.toggled #primary-menu > li > ul.sub-menu li > a:hover {
        background-color: var(--lubinik-theme-quaternary-color) !important;
        color: var(--lubinik-theme-primary-color) !important;
    }
    
    .hero-section .main-navigation { display: none; }

    }
    
    
/* ------------------------------------------------------------------
    Desktop ≥1300px – keep hero nav, hide the header nav
-----------------------------------------------------------------*/
@media (min-width: 1300px) {
    .menu-above-hero .site-header .main-navigation { display: none; }
    .menu-above-hero .site-header .site-branding { display: none; }
    
    .menu-above-hero .site-header #menu-toggle { display: none; }
    
    .menu-below-hero .top-bar .container,
    .menu-above-hero .top-bar .container {
        max-width: 100%;
        width: 100%;
    }
    
    
    .menu-above-hero .top-bar {
        font-size: var(--lubinik-font-size-md);
    }
    
    .menu-above-hero .top-social-links .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        background-color: var(--lubinik-header-secondary-social-bg-color);
        color: var(--lubinik-header-secondary-social-text-color);
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    
    .menu-above-hero.menu-style-horizontal .hero-section .main-navigation ul li a {
        color: var(--lubinik-horizontal-menu-item-secondary-link-color);
        font-weight: var(--lubinik-font-weight-medium);
        font-size: var(--lubinik-font-size-lg);
        text-decoration: none;
        background-color: var(--lubinik-horizontal-menu-nav-background-color);
        border-radius: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        border: 0;
    }
    
    .menu-above-hero.menu-style-horizontal .hero-section .main-navigation {
      top: var(--lubinik-spacing-xxl); 
    }
    
    
    .container {
        margin: 0 ; 
    }
    
    #header-default-content .main-navigation a {
        font-size: var(--lubinik-font-size-xl);
    }
    
    #header-default-content .main-navigation a:hover {
        font-size: var(--lubinik-font-size-xl);
    }
    
    
    /* give the bar the whole width */
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation{
        padding: 0 !important;          /* remove side padding */
    }
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation .menu-container{
        width: 100%;
        max-width: none;
    }
        
    /* single row, zero extra gap */
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation ul{
        flex-wrap: nowrap;
        justify-content: space-between; /* pushes text to use all space */
        margin: 0;
    }
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation ul li{
        margin: 0;                      /* kill the 16-px gaps */
    }
        
    /* tighter link padding & smaller font */
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation ul li a{
        padding: 10px 12px;             /* was ~24-30 px */
        font-size: var(--lubinik-font-size-md);
    }
    
    .main-navigation .sub-menu, .menu-above-hero .main-navigation .sub-menu {
        min-width: 400px;
    }
    
    .custom-hero-slider {
        height: 100vh;
    }
    
    
}
    
    
    /* ==========================================================
       1300  – Only hero nav visible, single row
       ========================================================== */
    
        
@media (min-width:1299px){
    
    .menu-above-hero.menu-style-horizontal .hero-section .main-navigation {
        background-color: transparent;
        max-width: none !important; /* remove parent constraint */
    }
        
    /* Let nav span full viewport so translate hack isn’t needed */
    .menu-above-hero.menu-style-horizontal .hero-section .main-navigation{
        left:0;
        right:0;
        width:100%;
        transform:none;
        padding:0;                        /* optional remove side padding */
    }
        
    /* Limit the purple card and centre it */
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation .menu-container{
        width:auto !important;
        max-width:none !important;
        width:100%;
        margin:0 auto;                    /* centre */
    }
        
    /* One-row list, tightened spacing to fit 1280-px container */
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation ul{
        flex-wrap:nowrap;
        justify-content:space-between;
        gap:1rem;                        /* narrower gap */
    }
        
    /* remove side margins on li to avoid double spacing */
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation ul li{
        margin:0;
    }
        
    /* shrink side-padding on top-level links */
    .menu-above-hero.menu-style-horizontal
    .hero-section .main-navigation ul li > a{
        padding:10px 14px;               /* was ~24-30 px */
    }
        
    .menu-above-hero .site-header > .container {
        display: none;
        visibility: hidden;
    }
        
    .menu-above-hero .site-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: var(--lubinik-z-index-header);
        background-color: transparent;
        box-shadow: none;
    }
            
    /* 
    * Top Bar Styling
    * Make the top bar transparent with the menu above hero option
    */
    .menu-above-hero .site-header .top-bar {
        background-color: transparent;
        box-shadow: none;
        top: var(--lubinik-spacing-lg);
    }
            
    /* Top bar container width control */
    .menu-above-hero .site-header .top-bar .container {
        max-width: var(--lubinik-container-width-narrow);
    }
    
    
}
 

/* Desktop narrow band: 1300-1499 px */
@media (min-width:1300px) and (max-width:1499px){
    #header-default-content .main-navigation a {
        font-size: var(--lubinik-font-size-lg) !important;
      }

    #header-default-content .main-navigation a:hover {
        font-size: var(--lubinik-font-size-lg) !important;
      }
}

/**********************************      
/* HERO HEIGHT  
**********************************/



@media (max-width: 760px){
    .custom-hero-slider { height: 80vh; }
}


@media (min-width: 761px) and (max-width: 990px){
    .custom-hero-slider { height: 80vh; }
}

@media (min-width: 991px) and (max-width: 1290px){
    .custom-hero-slider { height: 85vh; }
}

@media (min-width: 1291px) {
    .custom-hero-slider { height: 100vh; }
}