/* ====================================================================
   Mobile Responsive Enhancements for TPCL Visa
   ==================================================================== */

@media (max-width: 767px) {
    /* Container padding adjustment */
    .container,
    .tpcl-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Hero sections */
    .bg-gradient-to-r {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .bg-gradient-to-r h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .bg-gradient-to-r p {
        font-size: 0.95rem !important;
    }

    /* TPCL Visa Hero Section - Mobile fixes */
    .tpcl-visa-hero {
        padding: 2rem 0 !important;
    }

    .tpcl-visa-hero__title {
        font-size: 1.5rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .tpcl-visa-hero__subtitle {
        font-size: 0.9rem !important;
        white-space: normal !important;
    }

    .tpcl-visa-hero__actions {
        gap: 0.75rem !important;
    }

    .tpcl-visa-hero__actions .tpcl-button {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }

    /* Grid layouts - force single column */
    .grid-cols-1,
    .grid-cols-2,
    .grid-cols-3,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .md\:grid-cols-2,
    .md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Spacing adjustments */
    .py-12,
    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .gap-8 {
        gap: 1.5rem !important;
    }

    /* Card components */
    .rounded-xl.p-8,
    .bg-white.rounded-xl.p-8 {
        padding: 1rem !important;
    }

    .rounded-xl.p-6 {
        padding: 1rem !important;
    }

    .shadow-md {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Sticky sidebar - disable on mobile */
    .sticky {
        position: static !important;
    }

    /* Typography */
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

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

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

    /* Prose content */
    .prose,
    .prose-lg {
        font-size: 1rem !important;
    }

    .prose h2,
    .prose-lg h2 {
        font-size: 1.5rem !important;
    }

    .prose h3,
    .prose-lg h3 {
        font-size: 1.25rem !important;
    }

    /* Tables - horizontal scroll */
    .tpcl-page__content table,
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Buttons */
    .tpcl-button,
    button:not(.tpcl-mobile-toggle):not(.tpcl-cta-tab__close) {
        width: 100%;
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Navigation - ensure mobile menu works */
    .tpcl-nav {
        flex-direction: column;
    }

    /* Sidebar navigation */
    .support-services-sidebar,
    .service-overview-sidebar {
        margin-bottom: 1.5rem;
    }

    .support-services-sidebar ul,
    .service-overview-sidebar ul {
        gap: 0.5rem !important;
    }

    .support-services-sidebar li a,
    .service-overview-sidebar li a {
        padding: 0.75rem !important;
        font-size: 0.95rem !important;
    }

    /* Category groups in sidebar */
    .category-group {
        margin-bottom: 1rem;
    }

    .category-group h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Social share buttons */
    .social-share {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* CTA Box */
    .cta-box {
        padding: 1rem !important;
    }

    /* Breadcrumb */
    .tpcl-breadcrumb {
        font-size: 0.85rem;
        padding: 0.75rem 0;
    }

    /* Archive/Blog layouts */
    .tpcl-card {
        margin-bottom: 1rem;
    }

    /* TPCL Visa specific mobile fixes */
    .tpcl-visa-contact__title {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 1.4rem !important;
    }

    .tpcl-visa-contact__desc {
        font-size: 0.9rem !important;
    }

    .tpcl-visa-contact__inner {
        padding: 1.25rem 1rem !important;
    }

    /* Visa programs grid */
    .tpcl-visa-programs__grid {
        grid-template-columns: 1fr !important;
    }

    .tpcl-visa-program {
        padding: 1.25rem 1rem !important;
    }

    .tpcl-visa-program__title {
        font-size: 1.2rem !important;
    }

    .tpcl-visa-program .tpcl-button {
        width: 100% !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Visa steps grid */
    .tpcl-visa-steps__grid {
        grid-template-columns: 1fr !important;
    }

    .tpcl-visa-step {
        padding: 1.25rem 1rem !important;
    }

    /* Visa support grid */
    .tpcl-visa-support__grid {
        grid-template-columns: 1fr !important;
    }

    .tpcl-visa-support__item {
        padding: 1.25rem 1rem !important;
    }

    .tpcl-visa-support__title {
        font-size: 1rem !important;
    }

    .tpcl-visa-support__desc {
        font-size: 0.9rem !important;
    }

    /* Visa news mobile */
    .tpcl-visa-news__item {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1rem !important;
    }

    .tpcl-visa-news__thumb {
        width: 100% !important;
        flex: 0 0 auto !important;
        height: 160px !important;
        margin-bottom: 0.75rem !important;
    }

    .tpcl-visa-news__meta {
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
    }

    .tpcl-visa-news__title {
        font-size: 1rem !important;
    }

    /* Visa testimonials grid */
    .tpcl-visa-testimonials__grid {
        grid-template-columns: 1fr !important;
    }

    /* Visa video grid */
    .tpcl-visa-video-grid {
        grid-template-columns: 1fr !important;
    }

    .tpcl-video__title {
        font-size: 1rem !important;
    }

    .tpcl-video__excerpt {
        font-size: 0.9rem !important;
    }

    /* Section headers mobile */
    .tpcl-section__header {
        margin-bottom: 1.5rem !important;
    }

    .section-title-jp {
        font-size: 1.5rem !important;
    }

    .section-title-en {
        font-size: 0.75rem !important;
        letter-spacing: 0.1em !important;
    }

    /* Testimonials mobile fixes */
    .tpcl-visa-testimonial__title {
        font-size: 1.1rem !important;
        padding: 0 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .tpcl-visa-testimonial .tpcl-button {
        margin: 0 1rem 1rem !important;
        width: calc(100% - 2rem) !important;
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }

    .tpcl-visa-testimonial__thumb {
        margin-bottom: 1rem !important;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    .tpcl-main {
        padding-bottom: 5rem; /* Space for FAB */
    }

    /* Hide desktop-only elements */
    .hidden-mobile {
        display: none !important;
    }

    /* FAB - Always visible on mobile (override parent theme's scroll behavior) */
    .tpcl-fab {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    /* Text alignment adjustments */
    .text-4xl {
        font-size: 1.875rem !important;
    }

    .text-3xl {
        font-size: 1.5rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

    /* Featured images/banners - responsive sizing */
    .post-thumbnail img,
    img.wp-post-image,
    .wp-block-image img,
    article img {
        max-width: 100% !important;
        height: auto !important;
        width: 100% !important;
        object-fit: cover;
    }

    /* Sticky CTA bar - fix text overflow */
    .tpcl-sticky-cta {
        padding: 0.5rem !important;
    }

    .tpcl-sticky-cta__item {
        font-size: 0.7rem !important;
        padding: 0.6rem 0.3rem !important;
        gap: 0.2rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 32%;
        flex: 1;
    }

    .tpcl-sticky-cta__item i,
    .tpcl-sticky-cta__item svg {
        width: 0.9rem !important;
        height: 0.9rem !important;
        min-width: 0.9rem !important;
    }

    /* Center alignment fixes */
    .text-center,
    .mx-auto {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .container.mx-auto,
    .tpcl-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Tablet adjustments (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container,
    .tpcl-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* 2-column grid on tablet */
    .grid-cols-3,
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gap-8 {
        gap: 1.5rem;
    }

    /* Adjust font sizes for tablet */
    h1 {
        font-size: 2.25rem !important;
    }

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

    .text-4xl {
        font-size: 2.25rem !important;
    }
}

/* Ensure base responsive utilities work */
@media (max-width: 640px) {
    .sm\:hidden {
        display: none !important;
    }
}

/* Tailwind responsive utilities are handled by tpcl-base/style.css */