/* =====================================================================
   Aarogya Sakhi - landing page integration styles.
   Small additions only (landing.css stays byte-for-byte original).
   Uses the landing page's own design tokens.
   ===================================================================== */

/* ---------------------------------------------------------------------
   MOBILE WIDTH FIX (root cause of the "narrow strip" on phones)
   On screens <= 900px the menu (.links) becomes a fixed off-canvas panel that is
   hidden with transform:translateX(100%) - i.e. it sits completely to the RIGHT of
   the screen (+301px at 430px), and the rotated marquee sticks out ~11px. The original
   only had body{overflow-x:hidden}, which does not clip fixed-position boxes, so the
   mobile layout viewport grew to ~731px and phones zoomed the whole page out to fit
   (430/731 = 59% -> the site looked like a narrow strip).
   Fix: clip horizontal overflow at the VIEWPORT (html). body switches to overflow-x:clip,
   which clips without becoming a scroll container, so the sticky header and the window
   scroll animations keep working exactly as before. No transform / zoom / fixed width.
   --------------------------------------------------------------------- */
html{overflow-x:hidden;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:visible;max-width:100%}
@supports (overflow:clip){body{overflow-x:clip}}
@media (max-width:900px){
  /* the closed off-canvas menu is also removed from focus/screen readers; the slide animation is unchanged */
  .links{visibility:hidden;transition:transform .4s,visibility 0s linear .4s}
  .links.open{visibility:visible;transition:transform .4s,visibility 0s}
  /* header{backdrop-filter} makes the header the containing block of the fixed menu, so the "full screen"
     panel (inset:0 0 0 30%) was only header-high. While the menu is open the header drops the blur, so the
     panel covers the screen height as designed (:has() + .as-menu-open set by landing.js for older browsers). */
  header.as-menu-open,header:has(#links.open){-webkit-backdrop-filter:none;backdrop-filter:none}
  /* keep the burger above the open panel so the menu can also be closed with it */
  .burger{position:relative;z-index:2}
}

/* Anti-spam honeypot field in the enquiry form: invisible to people. */
.as-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* "Order" modal for visitors (Login / Register / WhatsApp enquiry). */
.as-modal{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:16px;background:rgba(26,11,30,.62);backdrop-filter:blur(4px)}
.as-modal.open{display:grid;animation:asFade .25s ease}
.as-modal-card{position:relative;width:min(460px,100%);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:30px;padding:30px 26px 26px;box-shadow:0 30px 60px -30px rgba(59,18,68,.6);animation:rise .4s}
.as-modal-card h3{font-size:1.6rem;color:var(--berry);margin-bottom:8px;padding-right:32px}
.as-modal-card .lead{font-size:.98rem;margin-bottom:20px}
.as-modal-actions{display:grid;gap:12px}
.as-modal-actions .btn{justify-content:center}
.as-modal-wa{font:inherit;font-weight:600;background:transparent;border:2px solid var(--line);color:var(--ink);border-radius:50px;padding:11px 20px;cursor:pointer;transition:.25s}
.as-modal-wa:hover{border-color:#25D366;color:#128C4B}
.as-modal-x{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:0;background:var(--blush);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}
@keyframes asFade{from{opacity:0}to{opacity:1}}

/* Keep the (one extra) Login nav item on one line in the tight 901-1100px range. */
@media (max-width:1100px) and (min-width:901px){.links{gap:14px}.links a.btn{padding:10px 16px}}