/* Mobile Optimization and Enhanced Responsiveness */

/* Base mobile optimizations */
@media (max-width: 1200px) {
    /* Container adjustments */
    .container {
        padding: 0 1em;
    }
    
    /* Wrapper adjustments */
    .wrapper {
        margin: 0 0.5em;
        border-radius: 10px;
    }
    
    /* Navigation adjustments */
    #nav ul {
        gap: 0.8em;
    }
    
    #nav ul li a {
        padding: 0.8em 1.2em;
        font-size: 0.95em;
    }
}

@media (max-width: 768px) {
    /* Mobile-first approach */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* Container and layout */
    .container {
        padding: 0 0.8em;
        max-width: 100%;
    }
    
    /* Wrapper mobile optimization */
    .wrapper {
        padding: 2.5em 1.5em !important;
        margin: 1em 0.8em;
        border-radius: 8px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    /* Mobile navigation */
    #nav {
        position: relative;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    
    #nav ul {
        flex-direction: column;
        gap: 0.5em;
        padding: 1em;
        width: 100%;
    }
    
    #nav ul li {
        width: 100%;
    }
    
    #nav ul li a {
        display: block;
        width: 100%;
        padding: 1em 1.5em;
        text-align: center;
        font-size: 1.1em;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    #nav ul li a:hover {
        background: rgba(220, 38, 38, 0.1);
        transform: translateX(5px);
    }
    
    /* Mobile buttons */
    .button,
    input[type="button"],
    input[type="submit"],
    button {
        width: 100%;
        margin: 0.5em 0;
        padding: 0.9em 1.1em;
        font-size: 1.05em;
        border-radius: 8px;
        text-align: center;
        display: block;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Primary: compact and centered */
    .button.primary,
    input[type="submit"].primary,
    button.primary {
        width: auto !important;
        max-width: 90vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 0.75em !important;
        padding-bottom: 0.75em !important;
        line-height: 1.1 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Lists: center buttons, avoid forced full width */
    ul.buttons,
    ul.actions { display: flex; justify-content: center; padding-left: 0; }
    ul.buttons li,
    ul.actions li { width: auto; }
    ul.buttons li .button,
    ul.actions li .button { width: auto; display: inline-flex; }

    .button.primary {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
    }

    .button.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    }
    
    /* Mobile headers */
    h1 {
        font-size: 2.2em;
        line-height: 1.2;
        margin-bottom: 0.5em;
    }
    
    h2 {
        font-size: 1.8em;
        line-height: 1.3;
        margin-bottom: 0.8em;
    }
    
    h3 {
        font-size: 1.5em;
        line-height: 1.4;
        margin-bottom: 0.6em;
    }
    
    h4 {
        font-size: 1.3em;
        line-height: 1.4;
        margin-bottom: 0.5em;
    }
    
    /* Mobile text */
    p {
        font-size: 1em;
        line-height: 1.6;
        margin-bottom: 1em;
    }
    
    /* Mobile banner */
    #banner {
        padding: 2em 1em;
        text-align: center;
    }
    
    #banner .inner {
        padding: 2em 1.5em;
        border-radius: 12px;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
    
    #banner h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin-bottom: 0.5em; }
    
    #banner p { font-size: clamp(1rem, 3.5vw, 1.2rem); margin-bottom: 1.5em; }
    
    /* Mobile main content */
    #main {
        padding: 2em 0;
    }
    
    /* Mobile footer */
    #footer {
        padding: 2em 1em;
        text-align: center;
    }
    
    #footer .icons { justify-content: center; gap: 0.75em; }
    #footer .icons a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(220,38,38,0.12); transition: transform .2s ease, background-color .2s ease; }
    #footer .icons a:hover { background: rgba(220,38,38,0.22); transform: translateY(-2px); }
    #footer .icons i { font-size: 1.15rem; }
    
    /* Mobile forms */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        width: 100%;
        padding: 1em;
        font-size: 1em;
        border-radius: 8px;
        border: 1px solid rgba(220, 38, 38, 0.3);
        background: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: #dc2626;
        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
    }
    
    /* Mobile lists */
    ul, ol {
        padding-left: 1.5em;
    }
    
    li {
        margin-bottom: 0.5em;
        line-height: 1.5;
    }
    
    /* Mobile tables */
    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9em;
    }
    
    th, td {
        padding: 0.8em 0.5em;
        text-align: left;
        border-bottom: 1px solid rgba(220, 38, 38, 0.2);
    }
    
    /* Mobile breadcrumbs */
    nav[aria-label="Breadcrumb"] {
        padding: 1em;
        font-size: 0.9em;
    }
    
    nav[aria-label="Breadcrumb"] a {
        padding: 0.3em 0.6em;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    nav[aria-label="Breadcrumb"] a:hover {
        background: rgba(220, 38, 38, 0.1);
    }
}

@media (max-width: 480px) {
    /* Ultra-mobile optimizations */
    body {
        font-size: 14px;
    }
    
    .container {
        padding: 0 0.5em;
    }
    
    .wrapper {
        padding: 2em 1.2em !important;
        margin: 1em 0.5em;
        border-radius: 6px;
    }
    
    /* Ultra-mobile navigation */
    #nav ul {
        padding: 0.8em;
        gap: 0.3em;
    }
    
    #nav ul li a {
        padding: 0.8em 1em;
        font-size: 1em;
    }
    
    /* Ultra-mobile buttons */
    .button,
    input[type="button"],
    input[type="submit"],
    button {
        padding: 0.8em 1em;
        font-size: 1em;
        line-height: 1.2;
    }

    .button.primary,
    input[type="submit"].primary,
    button.primary {
        padding-top: 0.7em !important;
        padding-bottom: 0.7em !important;
        max-width: 88vw !important;
    }
    
    /* Ultra-mobile headers */
    h1 {
        font-size: 1.8em;
    }
    
    h2 {
        font-size: 1.5em;
    }
    
    h3 {
        font-size: 1.3em;
    }
    
    h4 {
        font-size: 1.2em;
    }
    
    /* Ultra-mobile banner */
    #banner {
        padding: 1.5em 0.8em;
    }
    
    #banner .inner {
        padding: 1.5em 1em;
    }
    
    #banner h1 {
        font-size: 2em;
    }
    
    #banner p {
        font-size: 1em;
    }
    
    /* Ultra-mobile main content */
    #main {
        padding: 1.5em 0;
    }
    
    /* Ultra-mobile footer */
    #footer {
        padding: 1.5em 0.8em;
    }
    
    #footer .icons a { width: 40px; height: 40px; }
    #footer .icons i { font-size: 1.05rem; }
    
    /* Ultra-mobile forms */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        padding: 0.8em;
        font-size: 0.9em;
    }
    
    /* Ultra-mobile tables */
    table {
        font-size: 0.8em;
    }
    
    th, td {
        padding: 0.6em 0.3em;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Touch device optimizations */
    .button {
        min-height: 44px;
        min-width: 44px;
    }
    
    #nav ul li a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .button:hover,
    #nav ul li a:hover,
    img:hover {
        transform: none;
    }
    
    /* Add active states for touch */
    .button:active {
        transform: scale(0.98);
    }
    
    #nav ul li a:active {
        background: rgba(220, 38, 38, 0.2);
    }
}

/* Gallery controls: touch-friendly */
@media (max-width: 768px) {
    .gallery-wrapper { position: relative; }
    .gallery-prev,
    .gallery-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 9999px;
        border: 1px solid rgba(255,255,255,0.25);
        background: rgba(0,0,0,0.35);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .gallery-prev { left: 8px; }
    .gallery-next { right: 8px; }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp borders and shadows */
    .wrapper, section, .container {
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.15),
            0 1px 3px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    
    /* Crisp text */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Landscape mobile optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    #banner {
        padding: 1em;
    }
    
    #banner .inner {
        padding: 1.5em 1em;
    }
    
    #banner h1 {
        font-size: 2em;
    }
    
    .wrapper {
        padding: 1.5em 1em !important;
    }
    
    #nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.3em;
    }
    
    #nav ul li {
        flex: 1;
        min-width: calc(50% - 0.15em);
    }
}

/* Print optimizations */
@media print {
    .wrapper, section, .container {
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    #nav, #footer {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .button {
        border: 1px solid black;
        background: white;
        color: black;
    }
}

/* Additional mobile centering and sizing refinements */
@media (max-width: 768px) {
    /* Constrain widths and center content */
    .container { max-width: 100%; padding-left: 0.75em; padding-right: 0.75em; margin-left: auto; margin-right: auto; }
    section, header, .special.container, #main, .wrapper { text-align: center !important; }
    .grid, .row.gtr-50 { justify-items: center !important; }
    .row, .grid { display: grid; grid-template-columns: 1fr; }
    .grid.grid-2 { grid-template-columns: 1fr; }
    .grid.grid-3 { grid-template-columns: 1fr; }
    @media (min-width: 640px) and (max-width: 768px) {
        .grid.grid-2 { grid-template-columns: 1fr 1fr; }
    }

    /* Smaller headings on mobile for better fit */
    h1 { font-size: 1.8em !important; }
    h2 { font-size: 1.4em !important; }
    h3 { font-size: 1.2em !important; }

    /* Buttons: compact, centered, not edge-to-edge by default */
    .button,
    input[type="button"],
    input[type="submit"],
    button {
        width: auto;
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1em;
        padding-right: 1em;
    }
    /* Keep newsletter submit full-width for accessibility */
    body.contact form.newsletter .button.primary { width: 100% !important; max-width: 100% !important; }

    /* Reduce large paddings */
    #banner { padding: 1.2em 0.9em; margin-top: 3.5em; }
    .wrapper { padding: 1.6em 1em !important; }
    section { padding: 1.2em 0.8em; }

    /* Grid spacing tighter on phones */
    .grid.grid-3, .grid.grid-2, .row.gtr-50 { gap: 0.8rem !important; }

    /* Center all paragraph text on mobile */
    p { text-align: center !important; }
}

@media (max-width: 480px) {
    /* Further reduce type scale for small phones */
    h1 { font-size: 1.6em !important; }
    h2 { font-size: 1.3em !important; }
    h3 { font-size: 1.1em !important; }

    /* Buttons: ensure no overflow and center */
    .button,
    input[type="button"],
    input[type="submit"],
    button {
        max-width: 88vw;
    }

    /* Tighter section spacing */
    .wrapper { padding: 1.4em 0.9em !important; }
    section { padding: 1em 0.7em; }
}

/* Standardize button groups on mobile: single-column, full-width buttons */
@media (max-width: 768px) {
    section ul.buttons,
    section ul.actions,
    .buttons,
    .actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6em !important;
        justify-items: stretch !important;
        padding-left: 0 !important;
    }
    .buttons li,
    .actions li { width: 100% !important; padding: 0 !important; }
    .buttons li .button,
    .actions li .button { width: 100% !important; display: inline-flex !important; justify-content: center !important; }

    /* Contact form spacing on mobile */
    body.contact .form-styled .row { gap: 0.8em !important; }
    body.contact .form-styled input,
    body.contact .form-styled textarea,
    body.contact .form-styled select { margin: 0 !important; }
}