/* ============================================================
   Before-login mobile refinements
   Loaded ONLY on: home (index), login, register
   Everything here is guarded by a max-width media query and/or
   the .before-login header marker, so desktop, logged-in and
   other pages are never affected.
   ============================================================ */

/* ----------------------------------------------------------
   1. HEADER — make Login / Sign Up reachable on phones.
   The stock mobile header hides the nav and shows a hamburger
   that opens an (empty) off-canvas menu. Before login there is
   only the Login/Signup action, so we surface it inline and
   retire the hamburger.
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* reveal the nav that stock CSS hides (#responsive { display:none }) */
  #header-container.before-login #navigation {
    display: inline-flex !important;
    align-items: center;
    height: 100%;
    margin-top: 0;
  }
  #header-container.before-login #navigation #responsive {
    display: flex !important;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
  }
  #header-container.before-login #navigation #responsive > li {
    margin: 0;
  }

  /* compact pill so it fits alongside the flag + theme toggle */
  #header-container.before-login #navigation #responsive > li > a.btn {
    margin: 0 !important;
    padding: .5rem .85rem;
    font-size: .8rem;
    line-height: 1;
    white-space: nowrap;
  }
  #header-container.before-login #navigation #responsive > li > a.btn:after {
    display: none !important;   /* no dropdown arrow glyph on the pill */
  }

  /* hide the broken/empty hamburger for logged-out visitors */
  #header-container.before-login .mmenu-trigger {
    display: none !important;
  }

  /* tighten widget gaps so logo + pill + flag + theme never collide */
  #header-container.before-login .header-widget {
    padding: 0 .45rem;
  }
  /* the revealed nav gives .end-side width, which made the stock
     position:absolute box wrap below the bar — pin it back to the top
     and vertically centre everything in the header row */
  #header-container.before-login .end-side {
    top: 0;
    right: 0;
    left: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@media (max-width: 400px) {
  /* smallest phones: shave a little more so nothing wraps or overlaps */
  #header-container.before-login #logo img {
    max-width: 132px;
  }
  #header-container.before-login #navigation #responsive > li > a.btn {
    padding: .5rem .7rem;
    font-size: .75rem;
  }
  #header-container.before-login .header-widget {
    padding: 0 .3rem;
  }
}

/* ----------------------------------------------------------
   2. LOGIN / REGISTER banner — kill the wasted vertical gap.
   The stock banner is forced to 100vh and its content is
   vertically centered, pushing the form far down the screen.
   On phones we let it size to content and top-align it.
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {

  .intro-banner.banner.login {
    height: auto;
    min-height: auto;
    padding: 90px 0 40px;
  }
  .intro-banner.banner.login > .container {
    height: auto;
  }
  .intro-banner.banner.login > .container > .row {
    min-height: 0 !important;
    align-items: flex-start !important;
  }

  /* caption: readable size, a little breathing room above the card */
  .intro-banner.banner.login .banner_caption {
    margin-bottom: 1rem !important;
  }

  /* the glass card: comfortable padding + subtle separation */
  .banner .registration,
  .reg-form-sec .registration {
    padding: 1.25rem 1.15rem;
    border-radius: 0.75rem;
  }

  /* full-width, thumb-friendly primary actions */
  .banner .registration .btn-primary,
  .reg-form-sec .registration .btn-primary {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
}

/* ----------------------------------------------------------
   3. HOME — trust cards were very tall on phones. Trim the
   padding and heading size so the block scrolls tighter.
   ---------------------------------------------------------- */
@media (max-width: 767.98px) {

  .bg-primary .web-info.p-4 {
    padding: 1.25rem 1.15rem !important;
  }
  .bg-primary .web-info h3 {
    font-size: 1.15rem;
    margin-bottom: .35rem;
  }
  .bg-primary .web-info p {
    margin-bottom: 0;
  }
  .bg-primary .web-info img {
    height: 52px;
    width: 52px;
  }

  /* home hero caption gets a little side padding so it never hugs the edge */
  .banner.home .banner_caption {
    padding: 0 .5rem;
  }
}