/* Global responsive stylesheet for Townhall site */

/* Base: sensible defaults that won’t fight page styles */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, video { max-width: 100%; height: auto; }

/* Breakpoints */
/* xs: ≤ 480px — very small phones */
@media (max-width: 480px) {
  .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .navbar-brand { font-size: 1.25rem !important; }
  .ftco_navbar { height: 64px !important; }
  /* Form usability */
  .contact-form .row > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  .contact-form label { letter-spacing: 2px; font-size: 0.65rem; }
  .contact-form .form-control, .contact-form .message-box { font-size: 1rem; padding: 0.6rem 0 !important; min-height: 40px; }
  .contact-form .message-box { min-height: 120px !important; }
  .btn-submit-style { width: 100%; text-align: center; }
}

/* sm: ≤ 767px — phones */
@media (max-width: 767px) {
  /* COMPLETELY REMOVE HERO OVERLAYS - No overlays can interfere */
  .hero-wrap .overlay { 
    display: none !important; 
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important; 
    z-index: -999 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
  
  .hero-wrap.hero-wrap-2 { 
    background-attachment: scroll !important; 
    position: relative !important; 
    z-index: 1 !important;
    overflow: hidden !important;
  }
  
  .hero-wrap {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

  /* Stack two-column sections gracefully */
  .sexy-contact-section .row > .col-md-7,
  .sexy-contact-section .row > .col-md-5 { flex: 0 0 100% !important; max-width: 100% !important; }
  .sexy-contact-section .row > .col-md-7 { margin-bottom: 32px !important; }
  .sexy-contact-section .info-wrap { margin-top: 0 !important; padding-top: 24px !important; border-top: 1px solid rgba(255,255,255,0.15) !important; }

  /* COMPLETELY SEPARATE FORM SECTION - No overlays possible */
  .sexy-contact-section {
    position: relative !important;
    z-index: 3 !important;
    margin-top: 2rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    overflow: visible !important;
  }
  
  /* ISOLATE MAP SECTION */
  .ftco-section.contact-section:first-of-type {
    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;
  }
  
  .contact-form {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5) !important;
  }
  
  /* Ensure no pseudo-elements overlay the form */
  .sexy-contact-section::before,
  .sexy-contact-section::after {
    display: none !important;
    content: none !important;
  }

  /* Menu grids and galleries */
  .tiles-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* md: 768px–991px — tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-brand { font-size: 1.35rem !important; }
  .tiles-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* lg: 992px–1199px — small laptops */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-brand { font-size: 1.5rem !important; }
}

/* xl: ≥ 1200px — desktops */
@media (min-width: 1200px) {
  .tiles-grid { grid-template-columns: repeat(4, 1fr) !important; }
}