/* HomeoValley app shell. Phones only; desktop keeps the normal site. */

:root {
  --hv-accent:#0E7C6B;
  --hv-dark:#0A5F52;
  --hv-deep:#083F35;
  --hv-line:#DCE8E4;
  --hv-nav:60px;
}

.hvnav { display: none; }

@media (max-width: 899px) {

  body.hvapp-shell {
    padding-bottom: calc(var(--hv-nav) + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .hvnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9990;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--hv-nav) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--hv-deep);
    box-shadow: 0 -6px 22px rgba(8, 63, 53, .22);
  }

  .hvnav__i {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: rgba(255, 255, 255, .62);
    font-family: Manrope, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    transition: color 140ms ease;
    min-width: 0;
  }
  .hvnav__i:hover, .hvnav__i:focus { color: #fff; }
  .hvnav__i[aria-current="page"] { color: #fff; }

  .hvnav__ic { display: block; width: 21px; height: 21px; }
  .hvnav__ic svg { width: 100%; height: 100%; display: block; }
  .hvnav__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* The booking tab is the one action the clinic actually wants. */
  .hvnav__i--go .hvnav__ic {
    width: 40px; height: 40px;
    margin-top: -16px;
    padding: 9px;
    border-radius: 99px;
    background: var(--hv-accent);
    color: #fff;
    border: 3px solid var(--hv-deep);
    box-sizing: border-box;
  }
  .hvnav__i--go { color: #fff; }

  body.hvapp-shell .elementor-location-footer { padding-bottom: 8px; }
  body.hvapp-shell .elementor-button { min-height: 44px; }

  /* The auth screen owns the whole viewport on a phone. */
  body.hvapp-auth .hva { min-height: auto; }
}
/* ==========================================================================
   Floating call and WhatsApp buttons.

   They were pinned 16px from the bottom, which now falls behind the app bar.
   Lift them clear of it on phones, and leave them where they were on desktop
   since the bar does not exist there.
   ========================================================================== */

@media (max-width: 899px) {
  body.hvapp-shell .hv-float {
    bottom: calc(var(--hv-nav) + env(safe-area-inset-bottom) + 14px);
    z-index: 9985;              /* under the bar, never over it */
  }

  /* Two 52px circles plus the bar is a lot of a small screen. */
  body.hvapp-shell .hv-float a {
    width: 46px;
    height: 46px;
    box-shadow: 0 6px 16px rgba(8, 63, 53, .28);
  }
  body.hvapp-shell .hv-float a svg { width: 21px; height: 21px; }
  body.hvapp-shell .hv-float { gap: 8px; }

  /* Any other sticky element from Elementor gets the same clearance. */
  body.hvapp-shell .elementor-sticky--effects[data-settings*="bottom"] {
    bottom: calc(var(--hv-nav) + env(safe-area-inset-bottom));
  }
}
/* ==========================================================================
   Booking page on a phone.

   Arriving from the Book tab, the hero repeats the same two actions the tab
   bar already offers and pushes the real form below the fold. On a phone the
   page opens straight on the form instead. Desktop keeps the hero, because
   there the form is visible beside it anyway.
   ========================================================================== */

@media (max-width: 899px) {
  body.hvapp-book .hv-hero { display: none; }

  /* The crumb is the only thing left above the form, so keep it tight. */
  body.hvapp-book .crumb {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12.5px;
  }

  body.hvapp-book .hvc-card { margin-top: 12px; }

  /* The form heading was set for a page that had a hero above it. */
  body.hvapp-book .hvc-title {
    font-size: 20px;
    line-height: 1.25;
  }
  body.hvapp-book .hvc-note { font-size: 13px; }
}
/* ==========================================================================
   Booking gate on a phone.
   It was laid out as a desktop card: deep padding, large body copy, wide
   line spacing. On a 390px screen that pushes the Sign in button off the
   fold, which is the only thing the card exists for.
   ========================================================================== */

@media (max-width: 899px) {

  body.hvapp-book .hvc-card {
    padding: 18px 16px 20px;
    margin: 10px 12px 18px;
    border-radius: 14px;
  }

  body.hvapp-book .hvc-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 7px;
  }

  body.hvapp-book .hvc-note {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
  }

  body.hvapp-book .hvc-gate-points {
    margin: 0 0 16px;
    padding: 14px 0 0;
    border-top: 1px solid #DCE8E4;
    display: grid;
    gap: 8px;
    list-style: none;
  }
  body.hvapp-book .hvc-gate-points li {
    position: relative;
    margin: 0;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.45;
  }
  body.hvapp-book .hvc-gate-points li::marker { content: none; }
  body.hvapp-book .hvc-gate-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 10px;
    height: 5px;
    background: none;
    border: 0;
    border-left: 2px solid #0E7C6B;
    border-bottom: 2px solid #0E7C6B;
    border-radius: 0;
    box-shadow: none;
    transform: rotate(-45deg);
  }

  body.hvapp-book .hvc-actions {
    display: grid;
    gap: 9px;
    margin: 0;
  }
  body.hvapp-book .hvc-btn {
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    font-size: 14.5px;
    line-height: 46px;
  }

  body.hvapp-book .hvc-hint {
    font-size: 11.5px;
    line-height: 1.5;
    margin: 12px 0 0;
  }

  /* The floating buttons were sitting on top of the list on this page. */
  body.hvapp-book .hv-float a { width: 42px; height: 42px; }
  body.hvapp-book .hv-float a svg { width: 19px; height: 19px; }
}
/* ==========================================================================
   Header on a phone

   The theme stacks a 461px logo above a tagline and centres the lot, which
   eats most of the first screen before any content appears. An app header is
   one short row: small mark on the left, menu on the right. All the wording
   stays, it is just sized for a phone.
   ========================================================================== */

@media (max-width: 899px) {

  body.hvapp-shell .site-header .header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    min-height: 0;
  }

  body.hvapp-shell .site-header .site-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: 0;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  body.hvapp-shell .site-header .site-logo { margin: 0; line-height: 0; }
  body.hvapp-shell .site-header .custom-logo-link { display: block; line-height: 0; }
  body.hvapp-shell .site-header img.custom-logo {
    height: 34px;
    width: auto;
    max-width: 190px;
    margin: 0;
    display: block;
  }

  body.hvapp-shell .site-header .site-description {
    margin: 2px 0 0;
    padding: 0;
    font-family: Manrope, -apple-system, sans-serif;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    color: #54756D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  body.hvapp-shell .site-header .site-navigation { flex: 0 0 auto; }
  body.hvapp-shell .site-header .menu-toggle,
  body.hvapp-shell .site-header button.menu-toggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.hvapp-shell .site-header .menu-toggle svg { width: 20px; height: 20px; }
}
/* ==========================================================================
   Tighter still.

   The header row was compact but the theme's own padding on the header, the
   branding block and the page wrapper was still stacking up around it, so it
   read as a small logo floating in a tall empty band. Those are flattened
   here and the logo comes up a size, since it now has to hold the row on
   its own.
   ========================================================================== */

@media (max-width: 899px) {

  body.hvapp-shell .site-header {
    padding: 0;
    min-height: 0;
  }

  body.hvapp-shell .site-header .header-inner {
    padding: 6px 12px;
    gap: 10px;
    min-height: 0;
  }

  body.hvapp-shell .site-header .site-branding,
  body.hvapp-shell .site-header .site-logo,
  body.hvapp-shell .site-header .custom-logo-link {
    padding: 0;
    margin: 0;
  }

  body.hvapp-shell .site-header img.custom-logo {
    height: 38px;
    max-width: 210px;
  }

  body.hvapp-shell .site-header .site-description {
    margin: 1px 0 0;
    font-size: 10px;
  }

  body.hvapp-shell .site-header .menu-toggle,
  body.hvapp-shell .site-header button.menu-toggle {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  /* The band above the header, with the number and WhatsApp. */
  body.hvapp-shell .site-header + *,
  body.hvapp-shell .hv-topbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Hello Elementor pads the page wrapper generously for desktop. */
  body.hvapp-shell .site-main,
  body.hvapp-shell .page-content {
    padding-top: 0;
    margin-top: 0;
  }

  /* And the first block inside the page should not add its own gap on top. */
  body.hvapp-shell .page-content > *:first-child { margin-top: 0; }
  body.hvapp-auth-page .hva { padding-top: 8px; }
}