/* ============================================================================
   er-mobile-fixes.css — hand-authored fixes for the eReceipt static site.

   Loaded LAST on every page (after post-50.css, which is injected mid-body),
   so it wins on source order against equal-specificity !important rules.

   Everything that must not touch desktop is inside a media query.
   Cluster ids (C1, C2, ...) map to the mobile repair plan.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   C11 — "Get Early Access" buttons fall through to Elementor's stock #69727D.
   Five widgets, all of them the primary CTA. Not media-scoped: they are grey
   on desktop too.
   ------------------------------------------------------------------------- */
.elementor-element-1cfe1ee .elementor-button,
.elementor-element-01e08d2 .elementor-button,
.elementor-element-99ccc4b .elementor-button,
.elementor-element-1675070 .elementor-button,
.elementor-element-959f8bb .elementor-button {
  background-color: #9a6eff;
  color: #fff;
  border-radius: 100px;
}
.elementor-element-1cfe1ee .elementor-button:hover,
.elementor-element-01e08d2 .elementor-button:hover,
.elementor-element-99ccc4b .elementor-button:hover,
.elementor-element-1675070 .elementor-button:hover,
.elementor-element-959f8bb .elementor-button:hover {
  background-color: #8a5bf5;
}


/* ---------------------------------------------------------------------------
   Double logo in the mobile header — do NOT "fix" this by hiding one of the
   logo slots. The theme ships two overlapping copies per breakpoint
   (-main / -second) at the same coordinates, one absolutely positioned, and
   cross-fades them on scroll: at the top of the page -second is at opacity 1
   and -main at 0; once scrolled that reverses. Hiding either one leaves the
   header with no visible logo in one of the two states.

   The doubling came from this file setting `display` on the logo, which
   revealed .uicore-main (position:relative, so it joins the flow) alongside
   the mobile pair. Removing that declaration is the entire fix.
   ------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   C9 — the sticky header computes to height 0, so in-page anchor jumps land
   underneath it. Give the scroll container padding instead.
   ------------------------------------------------------------------------- */
html { scroll-padding-top: 96px; }


/* ---------------------------------------------------------------------------
   C2 — entrance animations never settle on touch devices: elementor-invisible
   holds visibility:hidden until an animation runs, leaving the shared footer
   CTA blank for ~2s (and sometimes permanently). Below the tablet breakpoint
   we skip the choreography and just show the content.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .elementor-widget.elementor-invisible,
  .elementor-section.elementor-invisible,
  .elementor-column.elementor-invisible {
    animation-name: none !important;
    animation-delay: 0s !important;
  }
  /* uicore's split-text reveal leaves glyphs mid-transform if it is interrupted */
  .ui-split-animate .ui-e-split-item,
  .ui-split-animate span {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===========================================================================
   MOBILE ONLY
   ========================================================================= */
@media (max-width: 767px) {

  /* -------------------------------------------------------------------------
     C9 — smaller header on mobile, so a smaller anchor offset.
     ---------------------------------------------------------------------- */
  html { scroll-padding-top: 72px; }

  /* -------------------------------------------------------------------------
     C1 (CRITICAL) — the header row is allowed to wrap under 1024px. At <=376px
     logo + CTA + burger do not fit, so the CTA and burger drop to a second row
     that the white header background never paints — they land on the black
     hero and the burger's dark bars become invisible.
     Keep one row, and let the branding shrink rather than push.
     ---------------------------------------------------------------------- */
  .uicore-navbar .uicore-header-wrapper .uicore-container {
    flex-wrap: nowrap !important;
    gap: 8px;
  }
  .uicore-navbar .uicore-branding {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Logo: one size everywhere on mobile — the sticky header AND the slide-in
     menu. Both containers carry .uicore-navbar, and the slide-in copy of the
     logo has no width/height attributes, so a percentage clamp collapsed it to
     a sliver. Pin the height and let width follow the 324x96 aspect (~95px). */
  .uicore-branding img.uicore-logo,
  .uicore-navigation-wrapper .uicore-branding img.uicore-logo {
    height: 28px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    object-fit: contain;
    /* NB: never set `display` here. The theme swaps .uicore-main/.uicore-second
       (and the mobile pair) with display:none/block to change the logo between
       the transparent and scrolled header states. Forcing display shows both
       logos stacked once the page is scrolled. */
  }
  .uicore-navigation-wrapper .uicore-branding {
    min-width: 0;
    overflow: visible;
  }
  .uicore-navbar .uicore-mobile-head-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* -------------------------------------------------------------------------
     C5 — tap targets in the shared chrome.
     The burger is 28x28 and is the only route to the nav. Expand the hit
     region with a pseudo-element so the glyph and the header layout do not
     move (resizing the button reflows the flex row on all seven pages).
     ---------------------------------------------------------------------- */
  body button.uicore-ham { position: relative; }
  body button.uicore-ham::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }

  /* header CTA pill: 32px tall -> 44px, without changing its width */
  .uicore-navbar .uicore-cta-wrapper .uicore-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* footer link grid: 3 columns with zero row-gap and an orphaned 7th item.
     2x4 removes the orphan; padding takes each row to ~45px. */
  .elementor-50 .elementor-element.elementor-element-a4b3147 .elementor-icon-list-items.elementor-inline-items {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 6px !important;
  }
  .elementor-50 .elementor-element.elementor-element-a4b3147 .elementor-icon-list-item > a {
    display: block !important;
    padding-block: 10px !important;
  }

  /* -------------------------------------------------------------------------
     C5 — carousel arrows are 36x36.
     ---------------------------------------------------------------------- */
  .bdt-navigation-prev,
  .bdt-navigation-next,
  .elementor-swiper-button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/* ---------------------------------------------------------------------------
   C1 — at the narrowest widths the CTA pill itself has to give ground so the
   single row still fits. Two steps rather than one so 375px keeps the roomier
   pill and only 320-360px gets the tight one.
   ------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .uicore-navbar .uicore-cta-wrapper .uicore-btn {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 360px) {
  .uicore-navbar .uicore-cta-wrapper .uicore-btn {
    padding-left: 11px !important;
    padding-right: 11px !important;
    font-size: 12px !important;
  }
  body button.uicore-ham { padding-left: 12px !important; }

  /* The logo is 4.885:1, so 28px tall is ~137px wide — enough to push the
     burger off-screen at 320px once the CTA and burger are added. Step it
     down here; the slide-in menu keeps the same size as the header. */
  .uicore-branding img.uicore-logo,
  .uicore-navigation-wrapper .uicore-branding img.uicore-logo {
    height: 24px !important;
  }
}