/*
 * TCC Web v1.13.4 · Responsive action-first + mobile menu repair
 *
 * 1) On phones, the functional Access / Recovery / Registration card is shown
 *    before explanatory marketing copy.
 * 2) The global hamburger menu is fixed to the viewport while open so Safari /
 *    iOS cannot leave the page scroll-locked with the menu rendered off-screen.
 *
 * Desktop layout and previously approved page blocks remain unchanged.
 */

/* --------------------------------------------------------------------------
 * Functional forms first on phones
 * -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Access, login, first-password and password-recovery flows. */
  .tcc-access-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 16px !important;
    padding-bottom: 46px !important;
  }

  .tcc-access-panel-wrap {
    order: -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-margin-top: 84px;
  }

  .tcc-access-copy {
    order: 2 !important;
    width: 100% !important;
  }

  .tcc-access-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Public Mi Casillero registration. */
  .tcc-register-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 16px !important;
    padding-bottom: 46px !important;
  }

  .tcc-register-panel-wrap {
    order: -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-margin-top: 84px;
  }

  .tcc-register-copy {
    order: 2 !important;
    width: 100% !important;
  }

  .tcc-register-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .tcc-access-hero-grid,
  .tcc-register-hero-grid {
    gap: 24px !important;
    padding-top: 10px !important;
  }

  .tcc-access-panel-top,
  .tcc-register-panel-top {
    min-height: 58px !important;
  }

  .tcc-access-form-head,
  .tcc-register-panel-head {
    padding-top: 20px !important;
  }
}

/* --------------------------------------------------------------------------
 * Global mobile hamburger repair
 * -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* A fixed menu remains tied to the viewport even after body scroll locking.
     This specifically avoids the Safari/iOS case where an absolute menu inside
     a sticky header is rendered near the header's original document position. */
  .tcc-site-header .tcc-nav-wrap {
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 10001 !important;
    padding: 20px 24px max(34px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
  }

  .tcc-site-header .tcc-nav-wrap.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Keep the close/X control visible after opening the menu at any scroll
     position. The fixed header exists only while the menu is open. */
  body.tcc-menu-open .tcc-site-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10002 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.tcc-menu-open .tcc-mobile-toggle {
    position: relative;
    z-index: 10003 !important;
  }

  /* Preserve the existing scroll lock, but stop horizontal viewport drift. */
  body.tcc-menu-open {
    overflow: hidden !important;
    width: 100% !important;
  }

  /* Logged-in QA/client screens can include the WordPress admin bar. */
  body.admin-bar .tcc-site-header .tcc-nav-wrap {
    top: 118px !important;
  }

  body.admin-bar.tcc-menu-open .tcc-site-header {
    top: 46px !important;
  }
}

@media (max-width: 820px) {
  .tcc-site-header .tcc-nav-wrap {
    top: 68px !important;
  }

  body.admin-bar .tcc-site-header .tcc-nav-wrap {
    top: 114px !important;
  }
}