/*
Theme Name: Vatican Child
Theme URI: https://vatican.modeltheme.com
Template: vatican
Author: ModelTheme
Author URI: http://modeltheme.com/
Description: Vatican - Church WordPress Theme
Version: 1.7
Text Domain: vatican
Tags: custom-header, custom-menu, featured-images, post-formats, sticky-post
*/

/* Custom CSS to make logo fill full navbar height without margins/padding */

/* Remove all margins and padding from logo in header */
header .navbar-header h1.logo {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Make navbar-header container take full height and remove Bootstrap padding */
header .navbar-header {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Specifically target the Bootstrap col-md-2 class to remove padding */
header .navbar-header.col-md-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure logo image fills available space while maintaining aspect ratio */
header .navbar-header h1.logo img {
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Specific overrides for different header styles */
header.header1 .navbar-header h1.logo {
    margin: 0 !important;
    padding: 0 !important;
}

header.header2 .navbar-header h1.logo {
    margin: 0 !important;
    padding: 0 !important;
}

header.header3 .navbar-header h1.logo {
    margin: 0 !important;
    padding: 0 !important;
}

header.header4 .navbar-header h1.logo {
    margin: 0 !important;
    padding: 0 !important;
}

header.header8 .navbar-header h1.logo {
    margin: 0 !important;
    padding: 0 !important;
}

header.header9 .navbar-header h1.logo {
    margin: 0 !important;
    padding: 0 !important;
}

/* Override any existing margin/padding rules */
.navbar-header .logo {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure logo link also has no padding */
.navbar-header .logo a {
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    height: 100%;
}

/* Make sure logo image is properly centered vertically */
.navbar-header .logo a img {
    vertical-align: middle;
    max-height: 100%;
    width: auto;
}

/* Center the navbar-collapse container vertically and remove Bootstrap padding */
header .navbar-collapse {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Specifically target the Bootstrap col-md-10 class to remove padding */
header .navbar-collapse.col-md-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Center the navigation menu (ul) both vertically and horizontally within navbar-collapse */
header .navbar-collapse .menu,
header .navbar-collapse .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: auto; /* Let it size to content instead of full width */
    margin: 0 auto; /* Center the menu container */
    padding: 0;
    list-style: none;
    gap: 0; /* Remove any default gap between flex items */
}

/* Override Bootstrap pull-right class to center the menu */
header .navbar-collapse .menu.pull-right,
header .navbar-collapse .navbar-nav.pull-right {
    float: none !important;
    justify-content: center;
    text-align: center;
}

/* Force menu items to center horizontally */
header .navbar-collapse .menu,
header .navbar-collapse .navbar-nav {
    text-align: center;
}

/* Ensure individual menu items don't have left alignment */
header .navbar-collapse .menu > li,
header .navbar-collapse .navbar-nav > li {
    text-align: center;
    margin: 0 auto;
}

/* Ensure navigation menu items are vertically centered with proper spacing */
header .navbar-collapse .menu > li,
header .navbar-collapse .navbar-nav > li {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 10px; /* Reduce spacing between menu items */
}

/* Remove excessive spacing from menu links */
header .navbar-collapse .menu > li > a,
header .navbar-collapse .navbar-nav > li > a {
    padding: 0 8px !important; /* Reduce horizontal padding */
    margin: 0;
}

/* Center navigation menu links vertically with controlled spacing */
header .navbar-collapse .menu > li > a,
header .navbar-collapse .navbar-nav > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 8px !important; /* Consistent padding for all sides */
    margin: 0;
    text-decoration: none;
}

/* Center the entire navbar area vertically */
header .navbar {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Ensure the header row takes full width and centers all its children vertically */
header .row {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure the navbar container takes full width */
header .navbar {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Make sure all column classes take their intended width */
header .row .col-md-2,
header .row .col-md-8 {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Specific width distribution for the three columns */
header .row .navbar-header.col-md-2 {
    width: 16.66666667%; /* Bootstrap col-md-2 width */
    flex: 0 0 16.66666667%;
}

header .row .navbar-collapse.col-md-8 {
    width: 66.66666667%; /* Bootstrap col-md-8 width */
    flex: 0 0 66.66666667%;
}

header .row .navbar-collapse.actions.col-md-2 {
    width: 16.66666667%; /* Bootstrap col-md-2 width */
    flex: 0 0 16.66666667%;
}

/* Make more-link button square instead of rounded */
.more-link {
    border-radius: 0 !important;
}
.more-link::before, 
.more-link::after {
    border-radius: 0 !important;
}

/* Make header button square instead of rounded */
.header-button .button {
    border-radius: 0 !important;
}
.header-button .button::before {
    border-radius: 0 !important;
}

/* Make event button square and change color to #c0392b with more-link hover style */
.event-button {
    border-radius: 0 !important;
    background: #c0392b !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
}
.event-button::before, 
.event-button::after {
    border-radius: 0 !important;
    background: #151515 !important;
    content: '';
    position: absolute;
    z-index: -1;
}
.event-button::after {
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
    color: #ffffff;
    transition: all 0.3s;
}
.event-button:hover {
    z-index: 1;
}
.event-button:hover::after {
    width: 100%;
}

/* Fix hover animation for square button in timeline */
.cbp_tmtimeline .cbp_tmlabel a.event-button {
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
}
.cbp_tmtimeline .cbp_tmlabel a.event-button::before,
.cbp_tmtimeline .cbp_tmlabel a.event-button::after {
    border-radius: 0 !important;
    background: #151515 !important;
    content: '';
    position: absolute;
    z-index: -1;
}
.cbp_tmtimeline .cbp_tmlabel a.event-button::after {
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
    color: #ffffff;
    transition: all 0.3s;
}
.cbp_tmtimeline .cbp_tmlabel a.event-button:hover {
    z-index: 1;
}
.cbp_tmtimeline .cbp_tmlabel a.event-button:hover::after {
    width: 100%;
}

/* Mobile Navigation Fixes */
@media (max-width: 768px) {
    /* Reset flexbox for mobile */
    header .row {
        display: block !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        overflow: hidden !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* When menu is collapsed - compact header */
    header .row .navbar-collapse.collapse:not(.in) {
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
    }
    
    /* When menu is open - expand to accommodate */
    header .row .navbar-collapse.collapse.in {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: auto !important;
        max-height: 70vh !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
    
    /* Force collapsed state to be truly hidden */
    header .row .navbar-collapse.collapse {
        transition: height 0.35s ease !important;
    }
    
    /* Ensure header row is compact when menu is collapsed */
    header .row:not(.expanded) {
        height: auto !important;
        min-height: auto !important;
    }
    
    /* When menu is expanded, header row stays fixed height, only menu scrolls */
    header .row.expanded {
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Keep logo and hamburger button fixed at top */
    header .row.expanded .navbar-header {
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 1001 !important;
        background: #fff !important;
        border-bottom: 1px solid #eee !important;
    }
    
    /* Croatian checkered button - repurpose existing elements */
    .navbar-toggle .sr-only {
        display: none !important;
    }
    
    /* Croatian checkered button container */
    .navbar-toggle {
        background: transparent !important;
        border: 2px solid #c0392b !important;
        border-radius: 4px !important;
        padding: 0 !important;
        width: 40px !important;
        height: 40px !important;
        position: relative !important;
        overflow: hidden !important;
        transition: all 0.4s ease !important;
        display: flex !important;
        flex-wrap: wrap !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
    }
    
    /* Override all default icon-bar styles */
    .navbar-toggle .icon-bar {
        width: 50% !important;
        height: 50% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
        position: relative !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* DEFAULT STATE: Croatian checkerboard pattern using 4 real elements */
    /* Top-left square: WHITE */
    .navbar-toggle .icon-bar:nth-child(1) {
        background: #fff !important;
        background-color: #fff !important;
        order: 1 !important;
    }
    
    /* Top-right square: RED */
    .navbar-toggle .icon-bar:nth-child(2) {
        background: #c0392b !important;
        background-color: #c0392b !important;
        order: 2 !important;
    }
    
    /* Bottom-left square: RED */
    .navbar-toggle .icon-bar:nth-child(3) {
        background: #c0392b !important;
        background-color: #c0392b !important;
        order: 3 !important;
    }
    
    /* Bottom-right square: WHITE */
    .navbar-toggle .icon-bar:nth-child(4) {
        background: #fff !important;
        background-color: #fff !important;
        order: 4 !important;
    }
    
    /* When menu is open (collapsed class is removed) - flip colors */
    .navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {
        background: #c0392b !important;
        transform: rotateY(180deg) !important;
    }
    
    .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
        background: #fff !important;
        transform: rotateY(180deg) !important;
    }
    
    .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
        background: #fff !important;
        transform: rotateY(180deg) !important;
    }
    
    .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
        background: #c0392b !important;
        transform: rotateY(180deg) !important;
    }
    
    /* Hover effect */
    .navbar-toggle:hover {
        transform: scale(1.05) !important;
        border-color: #2980b9 !important;
    }
    
    /* Add subtle shadow for depth */
    .navbar-toggle {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .navbar-toggle:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    /* Override parent theme mobile gray colors */
    @media only screen and (max-width: 767px) {
        /* DEFAULT STATE: Croatian checkerboard pattern - mobile override */
        nav.navbar-default .navbar-toggle .icon-bar:nth-child(1) {
            background: #fff !important;
            background-color: #fff !important;
        }
        
        nav.navbar-default .navbar-toggle .icon-bar:nth-child(2) {
            background: #c0392b !important;
            background-color: #c0392b !important;
        }
        
        nav.navbar-default .navbar-toggle .icon-bar:nth-child(3) {
            background: #c0392b !important;
            background-color: #c0392b !important;
        }
        
        nav.navbar-default .navbar-toggle .icon-bar:nth-child(4) {
            background: #fff !important;
            background-color: #fff !important;
        }
        
        /* Extra override for dynamically added 4th element */
        nav.navbar-default .navbar-toggle .icon-bar:last-child {
            background: #fff !important;
            background-color: #fff !important;
        }
        
        /* OPEN STATE: Flipped colors - mobile override */
        nav.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {
            background: #c0392b !important;
            background-color: #c0392b !important;
        }
        
        nav.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
            background: #fff !important;
            background-color: #fff !important;
        }
        
        nav.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
            background: #fff !important;
            background-color: #fff !important;
        }
        
        nav.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
            background: #c0392b !important;
            background-color: #c0392b !important;
        }
        
        /* Extra override for dynamically added 4th element in open state */
        nav.navbar-default .navbar-toggle:not(.collapsed) .icon-bar:last-child {
            background: #c0392b !important;
            background-color: #c0392b !important;
        }
    }

    /* Mobile navbar header */
    header .navbar-header {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        padding: 0 15px !important;
    }
    
    /* Mobile logo */
    header .navbar-header h1.logo {
        display: block !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Override parent theme mobile logo margin - more specific */
    header.header1 .navbar-header h1.logo {
        margin: 0 !important;
    }
    
    /* Mobile navigation menu */
    header .navbar-collapse {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: relative !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        max-height: 70vh !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
    
    header .navbar-collapse .menu,
    header .navbar-collapse .navbar-nav {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Mobile menu items */
    header .navbar-collapse .menu > li,
    header .navbar-collapse .navbar-nav > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    /* Mobile menu links - improved touch targets */
    header .navbar-collapse .menu > li > a,
    header .navbar-collapse .navbar-nav > li > a {
        display: block !important;
        padding: 16px 20px 16px 30px !important;
        text-align: left !important;
        border-bottom: 1px solid #eee;
        margin: 0 !important;
        min-height: 48px !important;
        line-height: 1.2 !important;
        font-size: 16px !important;
        color: #333 !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        touch-action: manipulation !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 5 !important;
    }
    
    /* Force left padding/margin with higher specificity */
    #navbar .menu > li > a,
    #navbar .navbar-nav > li > a,
    .navbar-collapse .menu > li > a,
    .navbar-collapse .navbar-nav > li > a {
        padding-left: 30px !important;
        padding-right: 20px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure li elements take full width for background */
    #navbar .menu > li,
    #navbar .navbar-nav > li,
    .navbar-collapse .menu > li,
    .navbar-collapse .navbar-nav > li {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    /* Add left spacing to the a element - multiple approaches */
    #navbar .menu > li > a,
    #navbar .navbar-nav > li > a,
    .navbar-collapse .menu > li > a,
    .navbar-collapse .navbar-nav > li > a {
        padding-left: 30px !important;
        margin-left: 0 !important;
        text-indent: 0 !important;
        position: relative !important;
    }
    
    /* Alternative approach - use pseudo-element for spacing */
    #navbar .menu > li > a::before,
    #navbar .navbar-nav > li > a::before,
    .navbar-collapse .menu > li > a::before,
    .navbar-collapse .navbar-nav > li > a::before {
        content: "" !important;
        display: inline-block !important;
        width: 30px !important;
        height: 0 !important;
    }
    
    /* Move only the text content, not the background */
    #navbar .menu > li > a,
    #navbar .navbar-nav > li > a,
    .navbar-collapse .menu > li > a,
    .navbar-collapse .navbar-nav > li > a {
        text-indent: 30px !important;
        padding-left: 0 !important;
    }
    
    /* Mobile menu link hover/active states */
    header .navbar-collapse .menu > li > a:hover,
    header .navbar-collapse .menu > li > a:active,
    header .navbar-collapse .navbar-nav > li > a:hover,
    header .navbar-collapse .navbar-nav > li > a:active {
        background-color: #f5f5f5 !important;
        color: #000 !important;
    }
    
    /* Current/selected menu item - red color */
    header .navbar-collapse .menu > li.current-menu-item > a,
    header .navbar-collapse .menu > li.current_page_item > a,
    header .navbar-collapse .navbar-nav > li.current-menu-item > a,
    header .navbar-collapse .navbar-nav > li.current_page_item > a {
        color: #c0392b !important;
        background-color: #fff5f5 !important;
    }
    
    /* Override parent theme white color with higher specificity */
    #navbar .menu-item.current_page_ancestor.current_page_parent > a,
    #navbar .menu-item.current_page_item.current_page_parent > a,
    #navbar .menu-item.current-menu-item > a,
    #navbar .menu-item.current_page_item > a {
        color: #c0392b !important;
        background-color: #fff5f5 !important;
    }
    
    /* Hide expand chevron on mobile - redundant with touch functionality */
    header .navbar-collapse .expand {
        display: none !important;
    }
    
    /* Mobile menu items with children - no visual indicator needed */
    header .navbar-collapse .menu-item-has-children > a {
        position: relative !important;
        padding-right: 20px !important;
    }
    
    /* Mobile actions */
    header .navbar-collapse.actions {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        text-align: center !important;
        padding: 10px 15px !important;
        margin: 0 !important;
    }
    
    /* Mobile header button */
    header .header-button {
        display: block !important;
        text-align: center !important;
        margin: 5px 0 !important;
    }
    
    /* Hide submenu on mobile by default */
    header .navbar-collapse .sub-menu {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f8f9fa !important;
        border-top: 1px solid #ddd !important;
    }
    
    /* Show submenu when parent has 'open' class */
    header .navbar-collapse .menu-item-has-children.open .sub-menu {
        display: block !important;
        position: static !important;
        background: #f8f9fa !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        animation: slideDown 0.3s ease !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        clear: both !important;
        max-height: 200px !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        pointer-events: auto !important;
        z-index: 1000 !important;
        overscroll-behavior: contain !important;
    }
    
    /* Mobile submenu items */
    header .navbar-collapse .sub-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    header .navbar-collapse .sub-menu li a {
        display: block !important;
        padding: 12px 20px 12px 40px !important;
        font-size: 15px !important;
        color: #666 !important;
        margin: 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        min-height: 44px !important;
        line-height: 1.3 !important;
        transition: background-color 0.2s ease !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        touch-action: auto !important;
        text-decoration: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1001 !important;
        pointer-events: auto !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
        contain: layout !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    header .navbar-collapse .sub-menu li a:hover,
    header .navbar-collapse .sub-menu li a:active {
        background-color: #e9ecef !important;
        color: #333 !important;
    }
    
    /* Slide down animation for submenus */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Remove extra spacing from menu items */
    header .navbar-collapse .menu li {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Compact mobile layout */
    header .navbar-collapse .menu {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Mobile-friendly scrolling enhancements */
    header .row {
        scroll-behavior: smooth !important;
        scrollbar-width: thin !important;
        scrollbar-color: #ccc transparent !important;
    }
    
    /* Custom scrollbar for webkit browsers */
    header .row::-webkit-scrollbar {
        width: 6px !important;
    }
    
    header .row::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    header .row::-webkit-scrollbar-thumb {
        background: #ccc !important;
        border-radius: 3px !important;
    }
    
    header .row::-webkit-scrollbar-thumb:hover {
        background: #999 !important;
    }
    
    /* Submenu scrollbar styling */
    header .navbar-collapse .sub-menu::-webkit-scrollbar {
        width: 4px !important;
    }
    
    header .navbar-collapse .sub-menu::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    header .navbar-collapse .sub-menu::-webkit-scrollbar-thumb {
        background: #bbb !important;
        border-radius: 2px !important;
    }
    
    header .navbar-collapse .sub-menu::-webkit-scrollbar-thumb:hover {
        background: #888 !important;
    }
    
    /* Visual indicator for scrollable submenus */
    header .navbar-collapse .menu-item-has-children.open .sub-menu::after {
        content: "" !important;
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 20px !important;
        background: linear-gradient(transparent, #f8f9fa) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
}

/* Square scroll-to-top button and hide on page load */
.back-to-top {
    border-radius: 0 !important;
    width: 50px !important;
    height: 50px !important;
}

/* Hide only on initial page load, allow theme JS to show it later */
.back-to-top:not(.modeltheme-is-visible) {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide event date elements completely */
.related-event-date {
    display: none !important;
}

/* Change blockquote left border from yellow to red */
blockquote {
    border-left-color: #dc3545 !important;
}

/* Tablet-specific fixes (768px - 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Use compact logo for tablets - flush left, no margins */
    header .navbar-header h1.logo {
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    
    header .navbar-header h1.logo img {
        content: url("http://udruga-stepincev-zavjet.local/wp-content/uploads/2025/09/logo.png") !important;
        max-height: 40px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove Bootstrap padding from navbar-header on tablets */
    header .navbar-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    
    /* Compact menu font and padding */
    header .navbar-collapse .menu > li > a,
    header .navbar-collapse .navbar-nav > li > a {
        font-size: 12px !important;
        padding: 0 5px !important;
        white-space: nowrap !important;
    }
    
    /* Tight spacing between menu items */
    header .navbar-collapse .menu > li,
    header .navbar-collapse .navbar-nav > li {
        margin: 0 3px !important;
    }
    
    /* Ensure header row doesn't wrap - no gap for flush logo */
    header .row {
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }
    
    /* Logo area - fixed width */
    header .row .navbar-header.col-md-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 200px !important;
        overflow: hidden !important;
    }
    
    /* Menu area - takes remaining space but with limits */
    header .row .navbar-collapse.col-md-8 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 250px) !important;
        overflow: hidden !important;
        margin-left: 15px !important;
    }
    
    /* Actions area - minimal space */
    header .row .navbar-collapse.actions.col-md-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 50px !important;
    }
    
    /* Hide donate button completely on tablets */
    .header-button {
        display: none !important;
    }
    
    /* Minimize search icon */
    .mt-search-icon {
        padding: 5px !important;
        font-size: 14px !important;
    }
    
    /* Horizontal scrolling menu for tablets */
    header .navbar-collapse .menu,
    header .navbar-collapse .navbar-nav {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
        padding-bottom: 5px !important; /* Space for scrollbar */
    }
    
    /* Hide scrollbar for webkit browsers */
    header .navbar-collapse .menu::-webkit-scrollbar,
    header .navbar-collapse .navbar-nav::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Menu items in horizontal scroll */
    header .navbar-collapse .menu > li,
    header .navbar-collapse .navbar-nav > li {
        flex: 0 0 auto !important;
        display: flex !important;
        position: relative !important;
    }
    
    /* Dropdown indicators for items with submenus */
    header .navbar-collapse .menu-item-has-children > a::after {
        content: " ▼" !important;
        font-size: 10px !important;
        margin-left: 3px !important;
        opacity: 0.7 !important;
    }
    
    /* Tablet submenu dropdowns - hidden by default */
    header .navbar-collapse .sub-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
        min-width: 200px !important;
        z-index: 1000 !important;
        padding: 5px 0 !important;
        margin-top: 5px !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Tablet submenu styling - moved to body with JavaScript */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        
        /* Style submenu items when moved to body */
        body > .sub-menu {
            list-style: none !important;
            margin: 0 !important;
            padding: 8px 0 !important;
        }
        
        body > .sub-menu li {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border-bottom: 1px solid #f5f5f5 !important;
        }
        
        body > .sub-menu li:last-child {
            border-bottom: none !important;
        }
        
        body > .sub-menu li a {
            display: block !important;
            padding: 12px 20px !important;
            color: #333 !important;
            text-decoration: none !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            line-height: 1.4 !important;
            transition: all 0.2s ease !important;
            border: none !important;
            background: transparent !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        
        body > .sub-menu li a:hover,
        body > .sub-menu li a:focus {
            background: #f8f9fa !important;
            color: #007cba !important;
            text-decoration: none !important;
        }
        
        body > .sub-menu li a:active {
            background: #e9ecef !important;
        }
        
        /* Ensure proper text styling */
        body > .sub-menu * {
            font-family: inherit !important;
            box-sizing: border-box !important;
        }
        
        /* Also show on hover for desktop-like behavior */
        header .navbar-collapse .menu-item-has-children:hover .sub-menu {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    }
    
    /* Submenu items styling */
    header .navbar-collapse .sub-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    header .navbar-collapse .sub-menu li a {
        display: block !important;
        padding: 8px 15px !important;
        font-size: 11px !important;
        color: #666 !important;
        text-decoration: none !important;
        white-space: normal !important;
        border-bottom: none !important;
        margin: 0 !important;
    }
    
    header .navbar-collapse .sub-menu li a:hover {
        background-color: #f5f5f5 !important;
        color: #333 !important;
    }
    
    /* Visual indicator for horizontal scroll */
    header .navbar-collapse::after {
        content: "" !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 20px !important;
        background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
}

/* Force override parent theme mobile logo margin - more specific */
@media only screen and (max-width: 767px) {
    body header.header1 .navbar-header h1.logo {
        margin: 0 !important;
    }
    
    /* Even more specific to ensure override */
    .navbar-header h1.logo {
        margin: 0 !important;
    }
    
    header .navbar-header h1.logo {
        margin: 0 !important;
    }
    
    /* Override hamburger menu button margins */
    .navbar-default .navbar-toggle:hover, 
    .navbar-default .navbar-toggle {
        margin: 17px 5px !important;
    }
}

/* Override timeline icon border color - change from yellow to official red */
.cbp_tmtimeline > li .cbp_tmicon {
    border-color: #c0392b !important;
}