/**
 * ThaiLawOnline - Responsive Fixes
 *
 * Supplementary CSS for responsive edge cases that Elementor's visual
 * responsive editor cannot handle directly. These rules provide safety
 * nets and utility classes for consistent behavior across all viewports.
 *
 * Breakpoints (Elementor defaults):
 *   - Desktop: 1025px and above
 *   - Tablet:  768px - 1024px
 *   - Mobile:  767px and below
 *
 * This file is enqueued via the child theme functions.php.
 * Do NOT put brand colors here -- use Elementor Global Colors instead.
 *
 * @package ThaiLawOnline_Child
 * @version 1.0.0
 */

/* ==========================================================================
   1. Prevent Horizontal Scroll (Global Safety Net)
   ========================================================================== */

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==========================================================================
   2. Image Safety Net
   ========================================================================== */

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

/* ==========================================================================
   3. Responsive Utility Classes
   ========================================================================== */

/* Hide on mobile (767px and below) */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop (1025px and above) */
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Show only on desktop */
@media (max-width: 1024px) {
    .show-desktop-only {
        display: none !important;
    }
}

/* ==========================================================================
   4. Touch Target Enforcement (Mobile)
   ========================================================================== */

@media (max-width: 1024px) {
    /* Ensure all interactive elements meet 44x44px minimum touch target */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .elementor-button,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Navigation links need adequate spacing for touch */
    nav a,
    .elementor-nav-menu a {
        padding-top: 10px;
        padding-bottom: 10px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   5. Typography Adjustments for Small Screens
   ========================================================================== */

/* Extra small screens (below 360px) */
@media (max-width: 359px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 21px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }
}

/* Ensure body text is readable on mobile */
@media (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Form fields at 16px prevent iOS auto-zoom on focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* ==========================================================================
   6. Form Responsiveness (Mobile)
   ========================================================================== */

@media (max-width: 767px) {
    /* Full-width form fields on mobile */
    .elementor-field-group,
    .elementor-form .elementor-field {
        width: 100% !important;
    }

    /* Full-width submit buttons on mobile */
    .elementor-form .elementor-button {
        width: 100%;
    }
}

/* ==========================================================================
   7. Table Responsiveness
   ========================================================================== */

@media (max-width: 767px) {
    /* Allow tables to scroll horizontally if they overflow */
    .elementor-widget-table,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   8. Elementor Section Spacing Overrides
   ========================================================================== */

@media (max-width: 767px) {
    /* Reduce excessive padding on mobile */
    .elementor-section > .elementor-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ==========================================================================
   9. Print Styles (Accessibility)
   ========================================================================== */

@media print {
    /* Hide navigation and non-essential elements for printing */
    header,
    footer,
    nav,
    .elementor-nav-menu,
    .hide-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Show URLs after links in print */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* ============================================================
   HOMEPAGE LAYOUT FIX - April 2026
   Fix .ast-container collapse and scroll-reveal visibility
   ============================================================ */

/* Fix Astra grid container collapsing to 0x0 */
.page-template-template-homepage-php .ast-container,
.page-id-472 .ast-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure #tlo-home fills properly */
#tlo-home {
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Force all data-reveal elements to be visible */
[data-reveal] {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Keep the revealed class working too */
.tlo-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Ensure all major sections are visible */
.tlo-practices,
.tlo-why,
.tlo-articles,
.tlo-cta-banner,
.tlo-footer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Fix practice cards visibility */
.tlo-practice-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Fix article cards visibility */
.tlo-article-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Ensure content section takes full width */
.page-template-template-homepage-php #content,
.page-id-472 #content {
  width: 100% !important;
  overflow: visible !important;
}

/* Fix any Astra primary content area issues */
.page-template-template-homepage-php .site-content .ast-container,
.page-id-472 .site-content .ast-container {
  display: block !important;
}

/* HOMEPAGE LAYOUT FIX - April 2026 */
.page-template-template-homepage-php .ast-container, .page-id-472 .ast-container { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
#tlo-home { width: 100% !important; overflow-x: hidden !important; overflow-y: visible !important; }
[data-reveal] { opacity: 1 !important; transform: translateY(0) !important; }
.tlo-revealed { opacity: 1 !important; transform: translateY(0) !important; }
.tlo-practices, .tlo-why, .tlo-articles, .tlo-cta-banner, .tlo-footer { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.tlo-practice-card, .tlo-article-card { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.page-template-template-homepage-php #content, .page-id-472 #content { width: 100% !important; overflow: visible !important; }
.page-template-template-homepage-php .site-content .ast-container, .page-id-472 .site-content .ast-container { display: block !important; }

/* ============================================================
   RESPONSIVE ENHANCEMENTS - April 2026
   Improve mobile, tablet, iPad experience
   ============================================================ */

/* Mobile: Stack hero buttons vertically */
@media (max-width: 480px) {
  .tlo-hero__actions {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .tlo-hero__actions .tlo-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .tlo-hero__title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  .tlo-hero__subtitle {
    font-size: 0.95rem !important;
  }
  .tlo-section-header__title {
    font-size: 1.75rem !important;
  }
  .tlo-cta-banner__inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }
  .tlo-cta-banner__actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .tlo-cta-banner__actions .tlo-btn {
    width: 100% !important;
  }
  /* Floating CTA button smaller on mobile */
  #thailaw-floating-cta a {
    font-size: 0.85rem !important;
    padding: 10px 18px !important;
  }
}

/* Tablet/iPad: Optimize grid layout */
@media (min-width: 481px) and (max-width: 1024px) {
  .tlo-practices__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tlo-articles__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tlo-why__inner {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .tlo-why__stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Ensure smooth scrolling everywhere */
html {
  scroll-behavior: smooth !important;
}

/* Better touch targets on mobile */
@media (max-width: 767px) {
  .tlo-nav__menu li a {
    padding: 12px 16px !important;
    min-height: 44px !important;
  }
  .tlo-practice-card {
    padding: 24px 20px !important;
  }
  .tlo-topbar {
    font-size: 0.75rem !important;
  }
  .tlo-topbar__inner {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 6px 0 !important;
  }
}

/* iPad landscape */
@media (min-width: 1025px) and (max-width: 1366px) {
  .tlo-container {
    max-width: 960px !important;
  }
}

/* Improve font rendering */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
/* HERO TITLE FIX - April 2026 */
.tlo-hero__title { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.4) !important; font-weight: 700 !important; }
.tlo-hero__title span { color: #f0c040 !important; text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.4) !important; }
/* LAZY LOAD IMAGE FIX */
.tlo-article-card img[data-lazy-type="image"], .tlo-article-card img.lazy-hidden, .tlo-articles img[data-src] { opacity: 1 !important; display: block !important; }
img.lazy-hidden { opacity: 1 !important; }