/*
 * Mobile fix for fixed-position third-party widgets that overlap content:
 *   - GTranslate floating language switcher (.gt_float_switcher)
 *   - Accessible Poetry toolbar button (#acwp-toolbar-btn-wrap) + panel (.acwp-toolbar)
 *   - Screen Reader controls (#accessibility-links.fixed) - overlaps with the
 *     accessible-poetry toolbar functionally, so we collapse it on mobile.
 *   - Teapoz mobile bottom nav (.teapoz-bottom-nav, .mobile-fixed-bottom-bar
 *     and similar) - adds fixed bar to the bottom; content needs padding.
 *
 * Strategy:
 *   - Phone (≤768px): collapse the redundant Screen Reader to icon-only,
 *     keep accessible-poetry as the single accessibility entry point,
 *     reposition GTranslate above the Teapoz bottom nav, and add bottom
 *     padding to body so content clears the fixed bottom nav.
 *   - Tablet: scale things down moderately.
 */

/* =========================================================================
   Phone: ≤768px
   ========================================================================= */

@media (max-width: 768px) {

  /* Body padding so the fixed Teapoz bottom nav doesn't cover content.
     The nav is roughly 64–72px tall; we add 96px to be safe. */
  body {
    padding-bottom: 96px !important;
  }

  /* --- Screen Reader plugin (#accessibility-links) ---
     Hidden on phones: it's redundant with accessible-poetry which already
     provides text-to-speech, font scaling, and contrast controls in a
     compact toggleable toolbar. The Screen Reader panel takes a fixed
     ~80x100px chunk of the viewport even at heavy scale, which is too
     aggressive for the small screens our applicants use. */
  div#accessibility-links,
  div#accessibility-links.fixed {
    display: none !important;
  }

  /* --- GTranslate floating switcher ---
     Hidden on phones: the Teapoz mobile bottom nav already has an
     integrated language switcher (the EN flag in the bottom bar), so
     the floating widget is duplicate UI competing for thumb-zone space. */
  .gt_float_switcher,
  .gtranslate_wrapper .gt_float_switcher,
  [id^="gt-wrapper-"] {
    display: none !important;
  }

  /* --- Accessible Poetry toolbar button - primary accessibility entry.
     This is the ONE accessibility control on mobile. Position above the
     Teapoz bottom nav so users can always reach it. */
  body #acwp-toolbar-btn-wrap {
    bottom: 110px !important;
    right: 14px !important;
    transform: scale(0.92);
    transform-origin: bottom right;
  }
  .acwp-toolbar.acwp-toolbar-show {
    bottom: 110px !important;
    right: 14px !important;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 220px);
    overflow: auto;
  }

  /* --- Teapoz mobile bottom nav refinements ---
     Many Teapoz builds use one of these hooks; safe-guard z-index so the
     accessibility toolbars layer above it when opened. */
  .teapoz-bottom-nav,
  .mobile-fixed-bottom-bar,
  .opal-mobile-bar,
  [class*="mobile-bottom"] {
    z-index: 90 !important;
  }
  #acwp-toolbar-btn-wrap,
  .acwp-toolbar,
  .gt_float_switcher,
  div#accessibility-links {
    z-index: 100 !important;
  }
}

/* =========================================================================
   Tablet: 769px–1024px
   ========================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  div#accessibility-links.fixed {
    transform: scale(0.85);
    transform-origin: bottom right;
  }
  body #acwp-toolbar-btn-wrap {
    bottom: 100px !important;
  }
  .gt_float_switcher {
    transform: scale(0.92);
    transform-origin: bottom left;
  }
}

/* =========================================================================
   Tiny phones: ≤480px - shrink the one remaining accessibility entry
   (Screen Reader + GTranslate already display:none from the 768px rule.)
   ========================================================================= */

@media (max-width: 480px) {
  body #acwp-toolbar-btn-wrap {
    transform: scale(0.85);
    bottom: 104px !important;
  }
}

/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  div#accessibility-links.fixed,
  #acwp-toolbar-btn-wrap,
  .gt_float_switcher {
    transition: none !important;
  }
}

/* =========================================================================
   Footer: "Payments We Accept" composite image
   The site uses a single 1920x225 PNG strip of the payment-method logos.
   By default Elementor lets it span 100vw which makes it dominate the footer.
   Cap it to a sensible width on every viewport.
   ========================================================================= */

.elementor-element-6544b1c img,
img[src*="Untitled-design-2"] {
  max-width: 420px !important;
  width: 100%;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .elementor-element-6544b1c img,
  img[src*="Untitled-design-2"] {
    max-width: 320px !important;
  }
}

@media (max-width: 480px) {
  .elementor-element-6544b1c img,
  img[src*="Untitled-design-2"] {
    max-width: 260px !important;
  }
}

/* Tighten the surrounding section so the payments band isn't a tall slab */
.elementor-element-6544b1c {
  text-align: center;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}