/**
 * StaircaseDefaultHeader - Mobile Styles
 * Applies to screens 480px and below
 * Optimizations for small screens
 */

/* Container Adjustments */
.sdhdr-container {
    padding: 0 10px;
}

.sdhdr-inner {
    min-height: 55px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px; /* Small gap between items */
}

/* Logo Area - Allow shrinking */
.sdhdr-logo-area {
    flex: 1 1 auto; /* Can grow and shrink to fill available space */
    min-width: 0; /* Allow shrinking below content size */
    overflow: hidden;
    max-width: 50%; /* Don't take more than half the width */
}

/* Logo Optimizations */
.sdhdr-logo {
    max-height: 40px;
    max-width: 100%; /* Prevent overflow */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Ensure branding stays compact */
.sdhdr-branding {
    max-width: 100%;
}

.sdhdr-site-title {
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Navigation Area - Keep items inline */
.sdhdr-nav-area {
    flex: 0 0 auto; /* Don't grow or shrink */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Full Width Mobile Menu */
.sdhdr-navigation {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Menu Items */
.sdhdr-menu a {
    padding: 12px 15px;
    font-size: 0.95rem;
}

.sdhdr-submenu a {
    padding-left: 30px;
    font-size: 0.9rem;
}

.sdhdr-submenu .sdhdr-submenu a {
    padding-left: 45px;
}

/* Compact Phone Button */
.sdhdr-phone {
    display: flex !important; /* Always show on mobile */
    flex: 0 0 auto;
}

.sdhdr-phone-button {
    padding: 9px 15px; /* 150% of 6px 10px */
    font-size: 1.2rem; /* 150% of 0.8rem */
    gap: 9px; /* 150% of 6px */
    white-space: nowrap;
    min-width: 0;
    display: flex;
    align-items: center;
}

.sdhdr-phone-icon {
    width: 21px; /* 150% of 14px */
    height: 21px; /* 150% of 14px */
    flex-shrink: 0;
}

.sdhdr-phone-number {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide phone number text on very small screens */
@media (max-width: 360px) {
    .sdhdr-phone-number {
        display: none;
    }
    
    .sdhdr-phone-button {
        padding: 9px; /* 150% of 6px */
        min-width: 48px; /* 150% of 32px */
        justify-content: center;
    }
}

/* Menu Toggle - Compact */
.sdhdr-menu-toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 4px;
}

.sdhdr-toggle-line {
    width: 20px;
    height: 2px;
    margin: 2px 0;
}

/* Scrolled State Adjustments */
.sdhdr-header.is-scrolled .sdhdr-inner {
    min-height: 48px;
}

.sdhdr-header.is-scrolled .sdhdr-logo {
    max-height: 35px;
}

/* Body Padding Adjustment */
body.has-staircase-default-header {
    padding-top: 63px;
}

/* Touch-Friendly Tap Targets */
.sdhdr-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.sdhdr-dropdown-toggle {
    width: 44px;
    height: 44px;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

/* Make sure parent items are clearly distinguished */
.sdhdr-has-children > a {
    font-weight: 500;
    padding-right: 55px;
}

/* Smooth Scrolling for iOS */
.sdhdr-navigation {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===================================
   SILKWEAVER MOBILE SUPPORT
   =================================== */
/* Silkweaver styles moved to /css/silkweaver-core.css */