/*
Theme Name: Astra Child
Template: astra
*/

/* =========================================================
   1) Responsive Event Map (WP Event Manager)
   ========================================================= */

.wpem-event-map {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* desktop/tablet ratio */
  position: relative;
  overflow: hidden;
}

.wpem-event-map iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  .wpem-event-map {
    aspect-ratio: 4 / 3; /* more square on mobile */
  }
}

/* =========================================================
   2) Prevent horizontal page shift on mobile
   ========================================================= */

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* reset accidental negative margins / oversized rows */
  .elementor-section,
  .elementor-row,
  .search_events .wpem-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
  }

  .site-content,
  .content-area {
    max-width: 100vw !important;
    overflow-x: hidden;
  }
}

/* =========================================================
   3) Universal Tables (desktop + mobile)
   Safe for tournament content tables
   ========================================================= */

:root {
  --tbl-border: #e5e7eb;
  --tbl-head: #f9fafb;
  --tbl-text: #111827;
}

/* Base table styling */
.entry-content table,
.elementor .elementor-widget-container table,
.wp-block-table table,
.wpem-event-single table,
.wpem-event-details table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tbl-border);
  background: #fff;
  table-layout: auto;
}

.entry-content table th,
.entry-content table td,
.elementor .elementor-widget-container table th,
.elementor .elementor-widget-container table td,
.wp-block-table th,
.wp-block-table td,
.wpem-event-single table th,
.wpem-event-single table td,
.wpem-event-details table th,
.wpem-event-details table td {
  border: 1px solid var(--tbl-border);
  padding: 10px 14px;
  vertical-align: top;
  color: var(--tbl-text);
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.entry-content table th,
.elementor .elementor-widget-container table th,
.wp-block-table th,
.wpem-event-single table th,
.wpem-event-details table th {
  background: var(--tbl-head);
  font-weight: 600;
}

/* Mobile/touch: table itself becomes horizontal scroller (X only) */
@media (max-device-width: 812px), (pointer: coarse) and (hover: none) {
  /* parent wrappers should not create extra horizontal bars */
  .entry-content,
  .wp-block-group,
  .elementor .elementor-widget,
  .elementor .elementor-widget-container,
  .elementor .elementor-container,
  .e-con,
  .e-con-inner,
  .wpem-event-single,
  .wpem-event-details,
  .wp-block-table,
  .wp-block-table .wp-block-table__scroll-container,
  .table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .entry-content table,
  .elementor .elementor-widget-container table,
  .wp-block-table table,
  .wpem-event-details table,
  .wpem-event-single table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    max-height: none !important;
  }

  .wp-block-table.is-scrollable {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* Optional utility */
.no-hscroll {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* =========================================================
   4) Single Event Listing page — mobile full-width wrappers
   (only mobile, only single event pages)
   ========================================================= */

@media (max-width: 767px) {
  body.single-event_listing .site-content,
  body.single-event_listing .content-area,
  body.single-event_listing .ast-container,
  body.single-event_listing .ast-container .ast-row,
  body.single-event_listing .entry-content,
  body.single-event_listing .elementor-section,
  body.single-event_listing .elementor-container,
  body.single-event_listing .e-con,
  body.single-event_listing .e-con-inner,
  body.single-event_listing .wp-block-group {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

/* =========================================================
   5) WP Event Manager taxonomy archives (type/category)
   mobile full-width cards
   ========================================================= */

@media (max-width: 767px) {
  body.tax-event_listing_type .ast-container,
  body.tax-event_listing_category .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  body.tax-event_listing_type .entry-content > *:first-child,
  body.tax-event_listing_category .entry-content > *:first-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* if theme/plugin uses grid */
  body.tax-event_listing_type ul.wpem-event-listings,
  body.tax-event_listing_category ul.wpem-event-listings {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.tax-event_listing_type ul.wpem-event-listings > li,
  body.tax-event_listing_category ul.wpem-event-listings > li {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important; /* optional flat edge-to-edge look */
  }

  body.tax-event_listing_type .wpem-event-banner img,
  body.tax-event_listing_category .wpem-event-banner img {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
    display: block !important;
  }
}
/* =========================================================
   6) FIX: Single Event page columns must stack on mobile
   (WPEM left content + right sidebar)
   ========================================================= */

@media (max-width: 767px) {

  /* Main wrapper full width */
  body.single-event_listing .single_event_listing,
  body.single-event_listing .wpem-main,
  body.single-event_listing .wpem-single-event-page,
  body.single-event_listing .wpem-single-event-wrapper,
  body.single-event_listing .wpem-single-event-body,
  body.single-event_listing .wpem-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Kill flex/table layouts that keep 2 columns */
  body.single-event_listing .wpem-row {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Force BOTH columns to be full width and stacked */
  body.single-event_listing .wpem-single-event-left-content,
  body.single-event_listing .wpem-single-event-right-content,
  body.single-event_listing .wpem-col-xs-12,
  body.single-event_listing .wpem-col-sm-5,
  body.single-event_listing .wpem-col-sm-7,
  body.single-event_listing .wpem-col-md-4,
  body.single-event_listing .wpem-col-md-8,
  body.single-event_listing .wpem-col-md-12 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Put sidebar under main content */
  body.single-event_listing .wpem-single-event-right-content {
    margin-top: 16px !important;
    border-left: 0 !important;
  }

  /* Banner/image full width */
  body.single-event_listing .wpem-single-event-images,
  body.single-event_listing .wpem-event-single-image-wrapper,
  body.single-event_listing .wpem-event-single-image,
  body.single-event_listing .wpem-event-single-image img,
  body.single-event_listing .wpem-single-event-slider-wrapper,
  body.single-event_listing .wpem-single-event-slider,
  body.single-event_listing .wpem-slider-items img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Sidebar widgets/buttons full width */
  body.single-event_listing .wpem-single-event-body-sidebar,
  body.single-event_listing .wpem-single-event-sidebar-info,
  body.single-event_listing .wpem-theme-button,
  body.single-event_listing .event_registration,
  body.single-event_listing form.event_registration {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Inputs in registration block */
  body.single-event_listing input,
  body.single-event_listing select,
  body.single-event_listing textarea,
  body.single-event_listing button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent any hidden internal overflow */
  body.single-event_listing .wpem-single-event-short-info,
  body.single-event_listing .wpem-single-event-body-content,
  body.single-event_listing .wpem-additional-info-block-wrapper,
  body.single-event_listing .wpem-single-event-footer {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}