/* Mobile Header Optimization - Compact Layout */
/* Combines social icons and search form in a single row on mobile devices */
/* High specificity to override accessibility plugin */

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

    /* Hide mobile search completely - we're using the top_bar search instead */
    .mobile_search,
    header .mobile_search,
    #header .mobile_search,
    body .mobile_search,
    html .mobile_search {
        display: none !important; /* Force hide with highest specificity */
        visibility: hidden !important; /* Double ensure it's hidden */
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important; /* Move off-screen as well */
        z-index: -1 !important;
    }

    /* Override accessibility plugin - Force top_bar search to be visible on mobile */
    .top_bar .search-form,
    .top_bar .top_bar_right .search-form {
        display: flex !important; /* Override plugin's display:none !important */
    }

    /* Make top_bar visible and optimized for mobile - Override accessibility plugin */
    header#header .top_bar,
    .top_bar {
        display: block !important;
        border-bottom: 1px solid #E4E4E4;
        padding: 0 !important; /* Remove default padding */
        margin: 0 !important;
        height: auto !important; /* Override any fixed heights */
        min-height: unset !important; /* Remove minimum height constraints */
        line-height: 1.2 !important; /* Compact line height */
    }

    /* Hide the left section on mobile to save space */
    .top_bar .top_bar_left {
        display: none !important;
    }

    /* Hide the first column entirely */
    .top_bar .col-lg-6.col-md-5.col-sm-12.col-xs-12:first-child {
        display: none !important;
    }

    /* Make the container and row more compact */
    .top_bar .container {
        padding: 0 10px !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .top_bar .row {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Make the right column take full width with no bootstrap padding */
    .top_bar .col-lg-6.col-md-7.col-sm-12.col-xs-12:last-child {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1;
    }

    /* Make the right section use flexbox for better layout */
    .top_bar .top_bar_right {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 12px 8px !important; /* More padding to accommodate larger elements */
        width: 100% !important;
        margin: 0 !important;
        background: transparent;
        box-sizing: border-box;
        height: auto !important; /* Override any fixed heights */
        min-height: unset !important; /* Remove minimum height constraints */
    }

    /* Social icons: compact and properly sized - Override accessibility plugin */
    .top_bar .top_bar_right .top_bar_socials {
        float: none !important;
        border-right: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0; /* Don't shrink */
        order: 1; /* Put socials visually first */
        height: auto !important; /* Override plugin container height */
    }

    .top_bar .top_bar_right .top_bar_socials ul {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        list-style: none !important;
        height: auto !important; /* Compact container */
    }

    .top_bar .top_bar_right .top_bar_socials ul li {
        display: inline-block !important;
        padding: 0 2px !important; /* Minimal spacing between icons */
        font-size: 16px !important; /* Set icon size to 16px */
        margin: 0 !important;
        vertical-align: middle;
        height: auto !important;
    }

    /* Override accessibility plugin social icon sizing with higher specificity */
    header#header .top_bar .top_bar_right .top_bar_socials ul li a,
    .top_bar .top_bar_right .top_bar_socials ul li a {
        color: #B2B2B2 !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important; /* Larger for better touch targets */
        height: 40px !important; /* Taller for better presence */
        padding: 0 !important; /* No padding needed */
        margin: 0 6px 0 0 !important; /* More spacing between icons */
        font-size: 18px !important; /* Larger icon size */
        line-height: 1 !important;
        transition: color 0.2s ease !important;
        min-width: unset !important; /* Override plugin min-width */
        min-height: unset !important; /* Override plugin min-height */
    }

    .top_bar .top_bar_right .top_bar_socials ul li a:hover {
        color: #bd9e53 !important;
    }

    /* Search form: flexible width, comes after socials visually */
    .top_bar .search-form,
    .top_bar .top_bar_right .search-form {
        position: relative !important;
        flex: 1 !important; /* Take remaining space */
        margin-left: 15px !important; /* More space between socials and search */
        margin-right: 0 !important;
        max-width: none !important;
        order: 2; /* Put search visually second (after socials) */
    }

    /* Override accessibility plugin search input sizing with higher specificity */
    header#header .top_bar .search-form input[type="search"],
    header#header .top_bar .top_bar_right .search-form input[type="search"],
    .top_bar .search-form input[type="search"],
    .top_bar .top_bar_right .search-form input[type="search"] {
        border: 1px solid #E4E4E4 !important;
        border-radius: 4px !important;
        font-size: 15px !important; /* Slightly larger font */
        color: #666 !important;
        outline: none !important;
        padding: 10px 45px 10px 12px !important; /* More comfortable padding */
        font-weight: 300 !important;
        width: 100% !important;
        height: 40px !important; /* Match social icon height for consistency */
        line-height: normal !important;
        background: #fff !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 !important;
        min-height: unset !important; /* Override plugin min-height */
        max-height: 40px !important; /* Match social icon height */
        flex: 1 1 auto !important; /* Take available space */
    }

    .top_bar .top_bar_right .search-form input[type="search"]:focus {
        border-color: #bd9e53 !important;
    }

    /* Override search button sizing with highest specificity */
    header#header .top_bar .search-form button,
    header#header .top_bar .search-form .button,
    header#header .top_bar .top_bar_right .search-form button,
    header#header .top_bar .top_bar_right .search-form .button,
    .top_bar .search-form button,
    .top_bar .search-form .button,
    .top_bar .top_bar_right .search-form button,
    .top_bar .top_bar_right .search-form .button {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        border: 1px solid #E4E4E4 !important;
        background: #fff !important;
        font-size: 16px !important; /* Larger icon */
        padding: 0 !important;
        margin: 0 !important;
        width: 40px !important; /* Match input height */
        height: 40px !important; /* Match input height */
        text-align: center !important;
        color: #B2B2B2 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: color 0.2s ease !important;
        min-width: unset !important; /* Override plugin */
        min-height: unset !important; /* Override plugin */
        border-radius: 0 4px 4px 0 !important; /* Match input border radius */
    }

    /* Button hover states */
    header#header .top_bar .search-form button:hover,
    header#header .top_bar .search-form .button:hover,
    header#header .top_bar .top_bar_right .search-form button:hover,
    header#header .top_bar .top_bar_right .search-form .button:hover,
    .top_bar .search-form button:hover,
    .top_bar .search-form .button:hover,
    .top_bar .top_bar_right .search-form button:hover,
    .top_bar .top_bar_right .search-form .button:hover {
        color: #bd9e53 !important;
        border-color: #bd9e53 !important;
    }

    /* Hide language selector if present */
    .top_bar .top_bar_right #lang_sel {
        display: none !important;
    }
}

/* Style for clickable top bar label link */
.top_bar .top_bar_left b a {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: inherit !important;
    transition: color 0.2s ease !important;
}

.top_bar .top_bar_left b a:hover {
    color: #bd9e53 !important;
    text-decoration: none !important;
}

.top_bar .top_bar_left b a:focus {
    outline: 2px solid #bd9e53 !important;
    outline-offset: 2px !important;
}

/* Styles for separate clickable phone and location links in top info boxes */
.top_info_box .text .phone-link,
.top_info_box .text .location-link {
    color: inherit !important;
    text-decoration: none !important;
    font-weight: inherit !important;
    transition: color 0.2s ease !important;
    display: inline !important;
}

.top_info_box .text .phone-link:hover,
.top_info_box .text .location-link:hover {
    color: #bd9e53 !important;
    text-decoration: none !important;
}

.top_info_box .text .phone-link:focus,
.top_info_box .text .location-link:focus {
    outline: 2px solid #bd9e53 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* Ensure the strong and span elements maintain their styling when containing links */
.top_info_box .text strong a.phone-link {
    font-weight: inherit !important;
}

.top_info_box .text span a.location-link {
    font-weight: inherit !important;
}

/* Desktop: Keep dual-section as original single layout with spacing */
.top_info_box.dual-section {
    /* Reset to default - no special styling on desktop */
}

.top_info_box.dual-section .info-section {
    /* On desktop, make both sections inline within same container */
    display: inline;
}

.top_info_box.dual-section .info-section.location-section {
    display: inline; /* Show location section on desktop in original format */
}

.top_info_box.dual-section .info-section.phone-section {
    display: inline; /* Show phone section on desktop in original format */
}

/* Add spacing between phone and location on desktop */
.top_info_box.dual-section .info-section.phone-section .text {
    margin-bottom: 8px;
}

/* Hide the separate icons on desktop - keep original layout */
.top_info_box.dual-section .info-section.location-section .icon {
    display: none;
}

/* Mobile: Dual-section layout for first info box only */
@media only screen and (max-width: 768px) {
    /* Fix dual-section positioning and spacing only - use stronger selectors */
    .top_info_boxes .container .row .col-lg-4.col-md-4.col-sm-4.col-xs-12:first-child {
        text-align: left !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: -28px !important;
        width: 100% !important; /* Take full width on mobile */
    }

    .top_info_boxes .container .row .col-lg-4:first-child .top_info_box.dual-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; /* Tighter gap between phone and location */
        padding: 25px 15px !important; /* Standard padding */
        margin: 0 !important;
        text-align: left !important;
        align-items: flex-start !important; /* Force left alignment */
        justify-content: flex-start !important;
        width: 100% !important; /* Take full width of container */
        box-sizing: border-box !important;
    }

    .top_info_boxes .top_info_box.dual-section .info-section {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Force left alignment */
        gap: 5px !important; /* Very tight gap between icon and text */
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important; /* Take full width */
        margin-left: 0 !important; /* Start from left edge */
        margin-right: auto !important; /* Push content to left */
    }

    .top_info_box.dual-section .info-section.location-section {
        display: flex !important; /* Show location section on mobile */
    }

    .top_info_boxes .top_info_box.dual-section .info-section .icon {
        flex-shrink: 0 !important;
        width: 60px !important; /* Bigger like other sections */
        height: 60px !important; /* Bigger like other sections */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8f8f8 !important;
        border-radius: 50% !important;
        font-size: 22px !important; /* Bigger font for bigger icon */
        color: #bd9e53 !important;
    }

    /* Add margin-right to both phone and location icons */
    .top_info_boxes .top_info_box.dual-section .info-section .icon .stm-icon-roundels,
    .top_info_boxes .top_info_box.dual-section .info-section .icon .stm-icon-map-marker {
        margin-right: 104% !important;
    }

    .top_info_box.dual-section .info-section .icon i {
        font-family: 'icomoon' !important;
        font-style: normal !important;
        font-weight: normal !important;
        line-height: 1 !important;
    }

    .top_info_boxes .top_info_box.dual-section .info-section .text {
        flex: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        margin-left: -15% !important; /* Pull text closer to icons */
        padding: 0 !important;
        width: 100% !important;
    }

    .top_info_boxes .top_info_box.dual-section .info-section .text strong,
    .top_info_boxes .top_info_box.dual-section .info-section .text span {
        display: block !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .top_info_box.dual-section .info-section .text strong {
        font-weight: 600 !important;
        color: #333 !important;
    }

    .top_info_box.dual-section .info-section .text span {
        color: #666 !important;
        font-weight: 400 !important;
    }
}

@media only screen and (max-width: 480px) {
    .top_info_box.dual-section {
        gap: 30px !important;
        padding: 30px 15px !important;
    }

    .top_info_box.dual-section .info-section {
        gap: 10px !important;
    }

    .top_info_box.dual-section .info-section .icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* Override the accessibility plugin's mobile_search display rules specifically */
@media only screen and (max-width: 575.98px) {
    /* Plugin tries to show mobile_search on small screens - override it */
    .mobile_search,
    header .mobile_search,
    #header .mobile_search,
    body .mobile_search,
    html .mobile_search {
        display: none !important; /* Override plugin's display:block !important */
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        z-index: -1 !important;
    }
}

/* Optional: Even more compact version for very small screens */
@media only screen and (max-width: 480px) {

    /* More compact container on very small screens */
    .top_bar .container {
        padding: 0 5px !important;
    }

    .top_bar .top_bar_right {
        padding: 10px 6px !important; /* Maintain good padding on small screens */
    }

    /* Social icons on small screens - still good size */
    header#header .top_bar .top_bar_right .top_bar_socials ul li a,
    .top_bar .top_bar_right .top_bar_socials ul li a {
        width: 40px !important; /* Still substantial on tiny screens */
        height: 36px !important; /* Good presence */
        margin: 0 5px 0 0 !important; /* Decent margin */
        font-size: 16px !important;
    }

    /* Search form spacing on small screens */
    .top_bar .top_bar_right .search-form {
        margin-left: 12px !important;
    }

    /* Search input for small screens - still usable */
    header#header .top_bar .search-form input[type="search"],
    header#header .top_bar .top_bar_right .search-form input[type="search"],
    .top_bar .search-form input[type="search"],
    .top_bar .top_bar_right .search-form input[type="search"] {
        padding: 8px 38px 8px 10px !important; /* Good usability */
        font-size: 14px !important;
        height: 36px !important; /* Match social icon height */
        max-height: 36px !important;
    }

    /* Search button for small screens */
    header#header .top_bar .search-form button,
    header#header .top_bar .search-form .button,
    header#header .top_bar .top_bar_right .search-form button,
    header#header .top_bar .top_bar_right .search-form .button,
    .top_bar .search-form button,
    .top_bar .search-form .button,
    .top_bar .top_bar_right .search-form button,
    .top_bar .top_bar_right .search-form .button {
        width: 36px !important; /* Match input height */
        height: 36px !important;
        font-size: 14px !important;
    }
}