/**
 * Custom CSS Fixes for Baia de Maputo Lodge
 */

/* Fix 1: Align currency selector on the same line as menu items */
/* Only target first level menu items */
.site-header .main-navigation > div > ul > li {
    display: inline-block !important;
    vertical-align: middle;
    float: none !important;
}

/* Ensure currency selector stays on same line */
.site-header .main-navigation {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Only first level ul should be flex horizontal */
.site-header .main-navigation > div > ul {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    margin: 0;
    width: auto !important;
}

/* Specific fix for WPML currency and language switchers - first level only */
.site-header .main-navigation > div > ul > li.menu-item {
    display: inline-block !important;
    margin-right: 1rem;
    position: relative;
}

.site-header .main-navigation > div > ul > li:last-child {
    margin-right: 0;
}

/* Dropdown/submenu styles - should be vertical */
.site-header .main-navigation ul ul,
.site-header .main-navigation ul li ul,
.site-header .main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column !important;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 9999;
    min-width: 200px;
    padding: 0.5rem 0;
}

/* Show dropdown on hover */
.site-header .main-navigation ul li:hover > ul,
.site-header .main-navigation ul li.focus > ul {
    display: block !important;
}

/* Dropdown items should be vertical */
.site-header .main-navigation ul ul li,
.site-header .main-navigation .sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 1rem;
    float: none !important;
}

.site-header .main-navigation ul ul li a,
.site-header .main-navigation .sub-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #2c2c2c;
    text-decoration: none;
}

.site-header .main-navigation ul ul li a:hover,
.site-header .main-navigation .sub-menu li a:hover {
    background: #f6f6f6;
}

/* Fix 2: Prevent logo from overlapping the primary content area */
.site-branding {
    position: relative;
    z-index: 10;
}

/* Fix 3: Ensure site title displays horizontally - CRITICAL FIX */
.site-header .site-branding .site-title,
.site-branding .site-title,
.site-title,
.site-description,
.site-header .site-title a,
.site-branding .site-title a {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: inline-block !important;
    white-space: normal !important;
    transform: none !important;
    -webkit-writing-mode: horizontal-tb !important;
    -ms-writing-mode: lr-tb !important;
}

/* Force horizontal layout for site branding container */
.site-header .site-branding,
.site-branding {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    writing-mode: horizontal-tb !important;
}

#primary,
.content-area {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 0;
}

/* Ensure proper spacing between header and content */
.site-header {
    margin-bottom: 0;
}

.site-content {
    margin-top: 0;
    padding-top: 0;
}

/* Additional fix: ensure the page title doesn't overlap with logo */
.entry-header {
    position: relative;
    z-index: 1;
    clear: both;
}

/* Fix for boxed content layout */
#primary.boxed {
    margin-top: 2rem;
}

/* Responsive adjustments */
/* Hide site title on screens smaller than 1430px */
@media screen and (max-width: 1429px) {
    .site-title,
    .site-branding .site-title,
    .site-header .site-branding .site-title,
    .site-header .site-title {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* Hide header visually but keep navigation functional */
    .site-header {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }
    
    /* Hide logo and title */
    .site-header .site-branding,
    .site-header .main-navigation > div > ul {
        display: none !important;
    }
    
    /* Ensure body has no extra padding */
    body {
        padding-top: 0 !important;
    }
    
    /* Hide page title on mobile - it's redundant */
    .entry-header {
        display: none !important;
    }
    
    /* Ensure content starts at top */
    .site-content,
    #content {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }
    
    /* Hide the theme's default menu toggle */
    .menu-toggle,
    .site-header .menu-toggle {
        display: none !important;
    }
    
    /* Ensure sidebar menu is properly styled and visible */
    .sidebar-open [role="complementary"],
    .sidebar-open .sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Keep main content visible when sidebar is open */
    .sidebar-open main,
    .sidebar-open .site-content,
    .sidebar-open #content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure map is responsive */
    .interactive-map {
        height: 300px !important;
    }
    
    /* Ensure content doesn't overflow */
    .location-map-container {
        padding: 0 15px;
    }
    
    /* Make sure main content is visible */
    #primary,
    main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    /* Extra small screens */
    .location-details {
        padding: 15px !important;
    }

    .location-details h2 {
        font-size: 18px !important;
    }

    .interactive-map {
        height: 250px !important;
    }
}

/* Fix 4: Hide datepicker popup on form fields - users should only use the calendar */
/* Only hide popups that appear outside the calendar widget */
.datepick-popup:not(.mphb-calendar *),
div.datepick-popup:not(.mphb-calendar *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Show the calendar that should be visible (not a popup) */
.mphb-calendar,
.mphb-calendar .datepick,
.mphb-calendar .datepick-inline {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure form fields look like they're filled but not editable */
input[name="mphb_check_in_date"],
input[name="mphb_check_out_date"] {
    cursor: default !important;
    background-color: #f9f9f9 !important;
}

/* Fix 5: Make calendar bigger and more touch-friendly */
/* Increase overall calendar size */
.mphb-calendar .datepick,
.mphb-calendar .datepick-inline {
    font-size: 16px !important;
    max-width: 100% !important;
}

/* Force single month display - no multi-month view */
.mphb-calendar .datepick-multi {
    width: 100% !important;
}

.mphb-calendar .datepick-month-row {
    display: block !important;
    width: 100% !important;
}

.mphb-calendar .datepick-month {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
}

/* Hide all months except the first one */
.mphb-calendar .datepick-month-row .datepick-month:not(:first-child) {
    display: none !important;
}

/* Make calendar table cells larger and easier to tap */
.mphb-calendar .datepick-month table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
}

.mphb-calendar .datepick-month tbody {
    pointer-events: auto !important;
}

.mphb-calendar .datepick-month tr {
    pointer-events: auto !important;
}

/* Larger day cells with better touch targets */
.mphb-calendar .datepick-month td {
    padding: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Make the date links/spans bigger and easier to tap */
.mphb-calendar .datepick-month td a,
.mphb-calendar .datepick-month td span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    min-width: 45px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 12px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Better hover/active states for touch */
.mphb-calendar .datepick-month td a:hover,
.mphb-calendar .datepick-month td a:active {
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* Larger month header */
.mphb-calendar .datepick-month-header {
    font-size: 20px !important;
    font-weight: 600 !important;
    padding: 15px !important;
}

/* Larger navigation arrows */
.mphb-calendar .datepick-cmd {
    padding: 12px 16px !important;
    font-size: 20px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Day of week headers (Mon, Tue, etc.) */
.mphb-calendar .datepick-month thead th {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 8px !important;
}

/* Better visual feedback for selected dates */
.mphb-calendar .mphb-calendar-selected-checkin {
    background-color: #4CAF50 !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4) !important;
}

.mphb-calendar .mphb-calendar-selected-checkout {
    background-color: #2196F3 !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(33, 150, 243, 0.4) !important;
}

/* Mobile-specific enhancements */
@media screen and (max-width: 768px) {
    /* Even larger touch targets on mobile */
    .mphb-calendar .datepick-month td {
        height: 55px !important;
        min-height: 55px !important;
    }

    .mphb-calendar .datepick-month td a,
    .mphb-calendar .datepick-month td span {
        height: 55px !important;
        min-height: 55px !important;
        min-width: 48px !important;
        font-size: 20px !important;
        padding: 14px 10px !important;
    }

    /* Larger spacing between cells on mobile */
    .mphb-calendar .datepick-month table {
        border-spacing: 6px !important;
    }

    /* Bigger month header on mobile */
    .mphb-calendar .datepick-month-header {
        font-size: 22px !important;
        padding: 18px !important;
    }
}

@media screen and (max-width: 480px) {
    /* Maximum size for small phones */
    .mphb-calendar .datepick-month td {
        height: 52px !important;
        min-height: 52px !important;
    }

    .mphb-calendar .datepick-month td a,
    .mphb-calendar .datepick-month td span {
        height: 52px !important;
        min-height: 52px !important;
        min-width: 44px !important;
        font-size: 18px !important;
    }
}

/* Fix 6: Hide WPML translator tooltip elements that appear in checkout form */
.translate-tooltip-mtz,
.translator-hidden,
.mphb_sc_checkout-form .translate-tooltip-mtz,
.mphb-checkout-section .translate-tooltip-mtz {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Fix 7: Hide book button on accommodations page and style details button like book button */
/* Hide the book button */
.mphb_sc_rooms-wrapper .mphb-to-book-btn-wrapper,
.mphb_sc_search_results-wrapper .mphb-to-book-btn-wrapper {
    display: none !important;
}

/* Style the details button to look like the book button */
.mphb-view-details-button {
    display: inline-block !important;
    border: 1px solid !important;
    border-color: #2c2c2c !important;
    border-radius: 0 !important;
    background: #2c2c2c !important;
    color: #fff !important;
    font-size: 14px !important;
    font-size: .875rem !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    padding: 1.3575em 2.85em !important;
}

.mphb-view-details-button:hover,
.mphb-view-details-button:focus {
    background-color: #b34a4a !important;
    border-color: #b34a4a !important;
    color: #fff !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.mphb-view-details-button:visited {
    color: #fff !important;
}

/* Fix 8: Hide datepicker icon on check-in and check-out date fields */
/* Remove calendar background image from date input fields */
input[type='text'].mphb-datepick.is-datepick,
input[type='text'].mphb-datepick.is-datepick:focus,
input[type='text'].mphb-datepick.is-datepick:active,
input[type='text'].mphb-datepick.is-datepick:hover,
input[name="mphb_check_in_date"],
input[name="mphb_check_out_date"] {
    background-image: none !important;
    padding-right: 13px !important;
}