/* Mobile UX and Performance Optimizations */

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Smooth scrolling with reduced motion support */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Better touch feedback */
* {
    -webkit-tap-highlight-color: rgba(201, 169, 110, 0.2);
}

/* Prevent double-tap zoom on buttons */
button,
.btn,
[role="button"],
a {
    touch-action: manipulation;
}

/* Optimize form inputs for mobile */
input,
textarea,
select {
    font-size: 16px; /* Prevents zoom on iOS */
    max-width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Better focus states for accessibility */
@media (hover: none) and (pointer: coarse) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--secondary-color);
        outline-offset: 2px;
    }
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.header .logo img,
.header .logo .logo-img {
    display: block;
    height: var(--header-logo-h);
    width: auto;
    max-width: var(--header-logo-max-w);
    max-height: var(--header-logo-h);
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

/* Hero Video Background Optimizations */
.hero video {
    pointer-events: none;
    will-change: transform;
}

/* Hide video on smaller mobile devices for performance */
@media (max-width: 480px) {
    .hero video {
        display: none;
    }
    
    .hero {
        background: var(--dark) !important;
    }
}

/* Reduce video quality on tablets for performance */
@media (min-width: 481px) and (max-width: 1024px) {
    .hero video {
        opacity: 0.2 !important;
    }
}

/* Slide-out nav + compact header (tablet and narrow desktop: avoids squeezed inline links) */
@media (max-width: 1100px) {
    .header .logo a {
        display: block !important;
    }

    .header-container {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 1rem;
        padding-inline: clamp(1rem, 4vw, 2.5rem);
        padding-block: 1rem;
    }

    .header-actions {
        justify-self: auto;
        flex-shrink: 0;
        padding-left: 0.35rem;
    }

    .header-contact-gold__link {
        padding: 0.55rem 1rem;
        font-size: 12px;
        min-width: auto !important;
        min-height: auto !important;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: var(--dark);
        border-left: 1px solid var(--border-color);
        transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
        padding: 2rem 1.5rem;
    }

    .main-nav.active {
        right: 0;
        box-shadow: -8px 0 36px rgba(0, 0, 0, 0.28);
    }

    .main-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 44px;
        height: 44px;
        margin: -0.5rem -0.25rem 1rem 0;
        padding: 0;
        font-size: 1.75rem;
        line-height: 1;
        color: var(--text-dark);
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        cursor: pointer;
    }

    .main-nav-close:hover,
    .main-nav-close:focus-visible {
        color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .nav-menu {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-item a {
        display: block;
        padding: 1rem 0 !important;
        width: 100%;
        font-size: 1rem;
    }

    .nav-item.has-dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        margin: 0;
        padding: 0 0 0.75rem 1rem;
        border: none;
        box-shadow: none;
        background: transparent;
        min-width: 0;
        display: none;
    }

    .nav-item.has-dropdown.active .dropdown-menu {
        display: block;
    }

    .nav-item.has-dropdown .dropdown-menu ul li a {
        padding: 0.65rem 0 !important;
        font-size: 0.95rem;
        color: var(--text-mid);
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 10000;
        position: relative;
    }

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--secondary-color);
        transition:
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        margin: 3px 0;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .main-nav {
        transition: none;
    }

    .nav-backdrop {
        transition: opacity 0.12s ease, visibility 0.12s ease;
    }

    .menu-toggle span {
        transition: none;
    }
}

@media (min-width: 1101px) {
    .nav-backdrop {
        display: none !important;
    }

    .main-nav-close {
        display: none !important;
    }
}

@media (max-width: 1100px) and (orientation: landscape) {
    .main-nav {
        max-width: 280px;
    }
}

/* Mobile-specific utilities */
@media (max-width: 768px) {
    /* Minimum touch targets: scoped so body copy links stay readable */
    .header .menu-toggle,
    .header .header-contact-gold__link,
    .main-nav .main-nav-close,
    .main-nav > .nav-menu a,
    .portfolio-filter-bar select,
    .portfolio-filter-bar button,
    input[type="submit"],
    input[type="button"],
    .btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-nav > .nav-menu a {
        width: 100%;
        justify-content: flex-start;
    }

    .portfolio-filter-bar select,
    .portfolio-filter-bar button {
        min-width: 0;
    }
    
    /* Better spacing for mobile */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Improve readability */
    body {
        font-size: 15px;
        line-height: 1.6;
    }
    
    /* Improve grid layouts on mobile */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Better card spacing */
    .portfolio-card,
    .brand-card,
    article {
        margin-bottom: 1.5rem;
    }
    
    /* Typography adjustments */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    /* Improve button spacing */
    [style*="display: flex"][style*="gap"] {
        flex-wrap: wrap;
    }
    
    /* Better form layouts */
    form {
        max-width: 100%;
    }
    
    /* Optimize padding on sections */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Password modal improvements */
    .password-modal-content {
        max-width: 100% !important;
        padding: 2rem 1.5rem !important;
    }
    
    .password-input-wrapper {
        flex-direction: row !important;
    }
}

@media (max-width: 640px) {
    .portfolio-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.25rem !important;
    }

    .portfolio-filter-bar > div {
        width: 100%;
        margin-left: 0 !important;
    }

    .portfolio-filter-bar select,
    .portfolio-filter-bar button {
        width: 100%;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Optimize for landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
}

/* Print optimizations */
@media print {
    .header,
    .menu-toggle,
    .password-modal,
    footer {
        display: none !important;
    }
    
    * {
        background: white !important;
        color: black !important;
    }
}

/* Optimize for high DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Loading skeleton (for lazy loading) */
img[data-src] {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark mode support (respects system preferences) */
@media (prefers-color-scheme: dark) {
    /* Already using dark theme, no changes needed */
}

/* Improve focus visibility for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Better mobile overlay handling */
.mobile-device body.modal-open {
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}