/**
 * Mobile Responsive CSS
 * Rent Our Timeshare - Mario & Sue Admin Tools
 * Applied across all frontend pages for consistent mobile experience
 */

/* MOBILE HEADER FIXES */
@media (max-width: 968px) {
    body {
        margin-top: 70px !important; /* Adjust for smaller mobile header */
    }

    .header-content {
        padding: 1rem !important;
    }

    nav {
        font-size: 0.9rem;
    }

    nav a {
        padding: 0.75rem 0 !important;
    }

    .logo {
        font-size: 1.25rem !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }
}

/* TABLET RESPONSIVE (max-width: 1024px) */
@media (max-width: 1024px) {
    /* Container padding adjustments */
    .hero-content,
    .resorts-content,
    .features-content,
    .access-content,
    section > div {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* Grid layouts */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Text sizing */
    h1 {
        font-size: clamp(2rem, 6vw, 3rem) !important;
    }

    h2 {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    }

    /* Button groups */
    .hero-actions {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }
}

/* MOBILE RESPONSIVE (max-width: 768px) */
@media (max-width: 768px) {
    body {
        margin-top: 65px !important; /* Smaller header on mobile */
    }

    /* Container padding */
    .hero-content,
    .resorts-content,
    .features-content,
    .access-content,
    section > div {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* All grids to single column */
    .features-grid,
    .resorts-grid,
    .access-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Hero section */
    .hero,
    .about-hero,
    section:first-of-type {
        padding-top: 2rem !important; /* Reduce excessive top padding on mobile */
    }

    .hero-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 2rem !important;
    }

    /* Text sizing */
    h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    p {
        font-size: 1rem !important;
    }

    /* Full-width buttons */
    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    .btn-primary,
    .btn-secondary,
    .cta-button {
        width: 100% !important;
        padding: 1rem !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    /* Cards and content blocks */
    .feature-card,
    .resort-card,
    .access-tier {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    /* Resort cards */
    .resort-info {
        padding: 1.5rem !important;
    }

    .resort-features li {
        font-size: 0.9rem !important;
    }

    /* Value banner */
    .value-banner {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
    }

    /* Images */
    .resort-image,
    .hero-image,
    img {
        width: 100% !important;
        height: auto !important;
    }

    /* Sections */
    section {
        padding: 3rem 0 !important;
    }

    .section-header {
        margin-bottom: 2rem !important;
    }

    /* Footer */
    footer {
        padding: 2rem 1rem !important;
    }

    .footer-content {
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .footer-section {
        width: 100% !important;
    }
}

/* SMALL MOBILE (max-width: 480px) */
@media (max-width: 480px) {
    /* Base font size */
    body {
        font-size: 14px !important;
        margin-top: 60px !important; /* Even smaller header on tiny screens */
    }

    /* Container padding - even tighter */
    .hero-content,
    .resorts-content,
    .features-content,
    .access-content,
    section > div {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Text sizing - smaller */
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.35rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    p, li {
        font-size: 0.9rem !important;
    }

    /* Buttons - smaller padding */
    .btn-primary,
    .btn-secondary,
    .cta-button {
        padding: 0.875rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    /* Cards - tighter padding */
    .feature-card,
    .resort-card,
    .access-tier {
        padding: 1.25rem !important;
    }

    /* Feature icons */
    .feature-icon {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Resort info */
    .resort-info {
        padding: 1.25rem !important;
    }

    .resort-name {
        font-size: 1.15rem !important;
    }

    .resort-location {
        font-size: 0.85rem !important;
    }

    .resort-features li {
        font-size: 0.85rem !important;
        padding: 0.25rem 0 !important;
    }

    /* Value banner - very compact */
    .value-banner {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .value-banner strong {
        font-size: 0.95rem !important;
    }

    /* Sections - less padding */
    section {
        padding: 2rem 0 !important;
    }

    .section-header {
        margin-bottom: 1.5rem !important;
    }

    /* Hero */
    .hero,
    .about-hero,
    section:first-of-type {
        min-height: auto !important;
        padding: 1rem 0 !important; /* Very minimal top padding on small screens */
        padding-top: 1rem !important;
    }

    .hero-subtitle {
        font-size: 0.9rem !important;
    }

    /* Forms */
    input,
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
    }

    /* Tables */
    table {
        font-size: 0.85rem !important;
    }

    th, td {
        padding: 0.5rem !important;
    }
}

/* UTILITY CLASSES FOR MOBILE */
.mobile-hide {
    @media (max-width: 768px) {
        display: none !important;
    }
}

.mobile-show {
    display: none !important;
    @media (max-width: 768px) {
        display: block !important;
    }
}

.mobile-center {
    @media (max-width: 768px) {
        text-align: center !important;
    }
}

.mobile-full-width {
    @media (max-width: 768px) {
        width: 100% !important;
    }
}

/* FIX COMMON MOBILE ISSUES */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }

    /* Fix viewport issues */
    * {
        max-width: 100% !important;
    }

    /* Ensure content starts at top - override any excessive spacing */
    main,
    .main-content,
    body > section:first-of-type,
    body > div:first-of-type {
        margin-top: 0 !important;
        padding-top: 1.5rem !important;
    }

    /* Better touch targets */
    a, button {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Prevent text overflow */
    p, h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Ensure text starts at left edge properly */
    section,
    .container,
    .content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}