/* Mobile corrections for the Tealive static snapshot.
 * Loaded last so it wins over Elementor's generated CSS.
 * Everything here is inside a mobile media query — desktop is untouched.
 */
@media (max-width: 767px) {

  /* ---------------------------------------------------------------- header
   * The header is a 2-item flex row (logo 147px, burger 71px) centred as a
   * group, which leaves the logo left of centre and the burger floating ~79px
   * in from the edge. A phantom flex item the same width as the burger,
   * plus space-between, puts the logo on the true viewport centre and pins
   * the burger to the right edge — without absolute positioning, so the
   * dropdown panel still anchors correctly.
   */
  .elementor-location-header .e-con-inner {
    justify-content: space-between !important;
    gap: 0 !important;
    padding-inline: 16px !important;
  }
  .elementor-location-header .e-con-inner::before {
    content: "";
    flex: 0 0 71px;   /* matches the burger widget's width */
  }
  .elementor-location-header .e-con-inner > .elementor-element:has(.elementor-menu-toggle) {
    flex: 0 0 71px;
  }
  /* The toggle is centred inside its 71px widget, leaving it ~35px from the
     edge. Push it to the widget's right edge so it lines up with the padding.
     The widget box keeps its width, so the logo stays centred. */
  .elementor-location-header .e-con-inner .elementor-menu-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* ------------------------------------------------------------- news cards
   * Image-box widgets sit in a non-wrapping flex row, so on a phone three of
   * them share ~355px and each title collapses to ~17px — one word per line.
   * Let the row wrap and give each card the full width.
   */
  .e-con-inner:has(> .elementor-widget-image-box) {
    flex-wrap: wrap !important;
    gap: 28px !important;
  }
  .e-con-inner > .elementor-widget-image-box {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  .elementor-widget-image-box .elementor-image-box-title {
    font-size: 18px;
    line-height: 1.35;
  }

  /* ------------------------------------------------- homepage "OG" section
   * This container carries a hard-coded width:344px with max-width
   * min(100%,344px) and zero horizontal margins, so in a 375px viewport it
   * sits flush left and leaves a ~31px white gap down the right-hand side.
   * Every neighbouring section is full-bleed, so match them.
   */
  .elementor .e-con,
  .elementor .e-con-full {
    margin-inline: auto !important;   /* no-op for full-width containers */
  }
  .elementor-element-2a877d19 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------- wide tables
   * The Holy Week schedule has 7 columns and cannot usefully compress to
   * 375px — forcing it to fit gives one character per line. Instead the table
   * keeps a readable minimum width and its wrapper scrolls sideways, so the
   * page itself never does.
   */
  .tl-table-scroll table {
    min-width: 660px;
  }
  .tl-table-scroll td,
  .tl-table-scroll th {
    white-space: normal;
    word-break: normal;
  }
}

/* Applies at every width: the wrapper is what scrolls, never the page. */
.tl-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* The "Check our menu" button exists twice — a desktop copy (87f1557, pinned
 * with right:170px) and a mobile copy (aaf503e, pinned with left:-41px). Both
 * are absolutely positioned and both land left of centre. Pin each to the
 * true centre instead. */
.elementor-element-87f1557.elementor-absolute,
.elementor-element-aaf503e.elementor-absolute {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  /* Both were sized by having left AND right set at once. Dropping `right`
     collapses the box and scales the button image down with it, so restore
     the original 300px box explicitly. */
  width: 300px !important;
  max-width: calc(100% - 32px) !important;
  text-align: center !important;
}