/* Mobile Responsive Styles for The Moon Tower */

/* Base Responsive Overrides */
@media screen and (max-width: 959px) {
    /* Disable all animations and transitions on mobile for immediate content display */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    
    /* Override desktop animation visibility */
    [data-anim-desktop]:not([data-anim-desktop='none']) {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Remove minimum width constraint on mobile */
    .dmDesktopBody .dmInner {
        min-width: 100% !important;
    }
    
    /* Make body responsive */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Ensure main containers are fluid */
    .dmOuter,
    .dmInner,
    .dmHeader,
    .dmBody,
    .dmFooter {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Responsive rows and columns */
    .dmRespRow,
    .dmRespRow .dmRespColsWrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Responsive columns - stack vertically */
    .dmRespRow .dmRespCol {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 15px;
    }
    
    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .imageWidget,
    .imageWidget img {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Header responsive */
    .dmStandardDesktop .dmHeader {
        max-width: 100% !important;
        min-height: auto !important;
        padding: 15px 10px !important;
    }
    
    /* Logo responsive */
    #dm .p_hfcontainer div.u_1597732955 {
        width: 150px !important;
        margin: 10px auto !important;
    }
    
    /* Navigation responsive */
    #dm .p_hfcontainer nav.u_1591568712 {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .main-navigation.unifiednav {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .main-navigation.unifiednav .unifiednav__container {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    
    .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap {
        width: 100% !important;
        justify-content: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap > .unifiednav__item {
        padding: 15px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Content area responsive */
    #dm .dmBody div.u_1955029219 {
        max-width: 100% !important;
        padding: 30px 15px !important;
        border-width: 4px !important;
    }
    
    /* Text sizing */
    body,
    .dmInner {
        font-size: 14px !important;
    }
    
    h1 {
        font-size: 24px !important;
    }
    
    h2 {
        font-size: 20px !important;
    }
    
    h3 {
        font-size: 18px !important;
    }
    
    /* Buttons responsive */
    #dm .dmInner .dmWidget {
        padding: 10px 15px !important;
        font-size: 14px !important;
        white-space: normal !important;
        max-width: 100% !important;
    }
    
    /* Slider responsive */
    .dmImageSlider,
    .flexslider {
        height: 250px !important;
    }
    
    /* Footer responsive */
    .dmFooter {
        padding: 20px 15px !important;
    }
    
    .dmFooterResp .dmRespRow .dmRespCol {
        width: 100% !important;
        padding: 10px 0 !important;
        text-align: center !important;
    }
    
    /* Inner bar / page title */
    #innerBar {
        font-size: 18px !important;
        padding: 0 15px !important;
        margin: 20px 0 !important;
    }
    
    /* Ensure no horizontal scrolling */
    * {
        max-width: 100%;
    }
    
    /* Fix for fixed header if present */
    .dmHeader[style*="position: fixed"] {
        position: relative !important;
    }
    
    /* Popup responsive */
    .dmPopup {
        width: 90% !important;
        margin: 10px 5% !important;
        max-height: 90vh !important;
    }
}

/* Tablet specific adjustments */
@media screen and (min-width: 600px) and (max-width: 959px) {
    /* Two column layout for tablets */
    .dmRespRow .dmRespCol {
        width: 48% !important;
        float: left !important;
        margin-right: 2% !important;
    }
    
    .dmRespRow .dmRespCol:nth-child(2n) {
        margin-right: 0 !important;
    }
    
    /* Larger font sizes for tablets */
    body,
    .dmInner {
        font-size: 15px !important;
    }
    
    /* Slider height for tablets */
    .dmImageSlider,
    .flexslider {
        height: 350px !important;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    /* Even smaller spacing */
    .dmRespRow {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Smaller font sizes */
    body,
    .dmInner {
        font-size: 13px !important;
    }
    
    h1 {
        font-size: 20px !important;
    }
    
    h2 {
        font-size: 18px !important;
    }
    
    h3 {
        font-size: 16px !important;
    }
    
    /* Smaller logo */
    #dm .p_hfcontainer div.u_1597732955 {
        width: 120px !important;
    }
    
    /* Smaller slider */
    .dmImageSlider,
    .flexslider {
        height: 200px !important;
    }
    
    /* Smaller navigation items */
    .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap > .unifiednav__item {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    /* Content padding */
    #dm .dmBody div.u_1955029219 {
        padding: 20px 10px !important;
        border-width: 2px !important;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    a,
    button,
    .dmWidget,
    .unifiednav__item {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Better spacing for touch */
    .main-navigation.unifiednav .unifiednav__container > .unifiednav__item-wrap > .unifiednav__item {
        padding: 15px 20px !important;
    }
}

/* Landscape orientation on mobile */
@media screen and (max-width: 959px) and (orientation: landscape) {
    .dmImageSlider,
    .flexslider {
        height: 300px !important;
    }
    
    .dmHeader {
        padding: 10px !important;
    }
}

/* Gallery Page Mobile Improvements */
@media screen and (max-width: 959px) {
    /* Override inline styles for gallery columns - force 2 column layout */
    .dmPhotoGalleryHolder.gallery4inArow .galleryColumn,
    .dmPhotoGalleryHolder.gallery5inArow .galleryColumn,
    ul.galleryColumn {
        width: 50% !important;
        max-width: 50% !important;
        padding: 5px !important;
        float: left !important;
        box-sizing: border-box !important;
    }
    
    /* Gallery thumbnails - fill the column */
    .dmPhotoGallery .photoGalleryThumbs,
    li.photoGalleryThumbs {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 150px !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Force gallery holder to use flexbox */
    .dmPhotoGalleryHolder,
    ul.dmPhotoGalleryHolder {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Gallery container */
    li.galleryContainer {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        list-style: none !important;
    }
    
    /* Image links - maintain square aspect */
    .dmPhotoGallery .photoGalleryThumbs a,
    .photoGalleryThumbs .image-container a {
        display: block !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    /* Hide the actual img tags, use background instead */
    .dmPhotoGallery .photoGalleryThumbs img {
        display: none !important;
    }
    
    /* Image container */
    .photoGalleryThumbs .image-container {
        height: auto !important;
        width: 100% !important;
    }
    
    /* Gallery captions on mobile */
    .dmPhotoGallery .caption-container .caption-inner {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    .dmPhotoGallery .caption-container .caption-inner h3 {
        font-size: 15px !important;
        margin-bottom: 5px !important;
        line-height: 1.3 !important;
    }
    
    .dmPhotoGallery .caption-container .caption-inner p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* Gallery wrapper improvements */
    .dmGalerryWidgetRow,
    .dmRespRow.dmGalerryWidgetRow {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* PhotoSwipe (lightbox) improvements for mobile */
    .pswp__caption__center {
        max-width: 100% !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .pswp__top-bar {
        background-color: rgba(0, 0, 0, 0.85) !important;
    }
    
    .pswp__button {
        width: 50px !important;
        height: 50px !important;
    }
    
    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
        width: 60px !important;
        height: 80px !important;
    }
}

/* Single column on very small screens */
@media screen and (max-width: 480px) {
    /* Force single column on small phones */
    .dmPhotoGalleryHolder.gallery4inArow .galleryColumn,
    .dmPhotoGalleryHolder.gallery5inArow .galleryColumn,
    ul.galleryColumn {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .dmPhotoGallery .photoGalleryThumbs,
    li.photoGalleryThumbs {
        margin: 0 0 15px 0 !important;
    }
}

/* Print styles */
@media print {
    .dmHeader,
    .dmNav,
    .dmFooter {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
    
    .dmInner {
        background: white !important;
    }
}