/* ==========================================================================
   Aegis Health — mobile responsive layer
   Added 2026-08-07

   WHY THIS FILE EXISTS
   Several layouts on this site are declared as inline style attributes, e.g.
       <div style="display:grid;grid-template-columns:repeat(5,1fr);">
   Inline styles have higher precedence than stylesheet rules, so the
   @media blocks inside each page's own <style> element could never override
   them. On a phone those grids therefore kept their desktop column count,
   squeezing text into 58px wide columns and pushing some pages into
   horizontal scroll.

   HOW IT WORKS
   Attribute selectors match the inline declarations and override them with
   !important, which is the one thing that outranks an inline style.

   SAFETY
   Every rule in this file lives inside a max-width media query, so desktop
   and large tablet rendering is byte for byte unchanged. Deleting this file
   and its <link> tags restores the previous behaviour exactly.
   ========================================================================== */


/* ==========================================================================
   1. TABLET — - wide inline grids step down to two columns
   ========================================================================== */

@media (max-width: 992px) {

  /* 5 and 4 column grids: pain point cards (index), problem stats (our story) */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3 column grids: audience segmentation, contact strip */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ==========================================================================
   2. PHONE — every inline grid collapses to a single column
   ========================================================================== */

@media (max-width: 700px) {

  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Tighten the gutters between stacked cards */
  [style*="display:grid"],
  [style*="display: grid"] {
    gap: 16px !important;
  }

  /* The pain point cards are deliberately staggered on desktop by pushing
     alternate cards down 48px. Once stacked that reads as a random gap. */
  [style*="margin-top:48px"] {
    margin-top: 0 !important;
  }

  /* Oversized decorative quote glyphs overflow the narrower stacked cards */
  [style*="font-size:8rem"] {
    font-size: 5rem !important;
  }
}


/* ==========================================================================
   3. PHONE — horizontal padding
   Sections carry inline padding such as "100px 60px". 60px each side leaves
   only 270px of content on a 390px screen. Longhand properties override the
   horizontal half of the inline shorthand while leaving vertical spacing,
   and therefore the vertical rhythm of the page, untouched.
   ========================================================================== */

@media (max-width: 700px) {

  section[style*="padding"],
  footer[style*="padding"],
  div[style*="padding:80px 60px"],
  div[style*="padding:100px 60px"],
  div[style*="padding:120px 60px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 400px) {

  section[style*="padding"],
  footer[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Card padding of 36px 28px leaves very little room at 320px */
  [style*="padding:36px 28px 32px"],
  [style*="padding:32px 24px"],
  [style*="padding:44px 36px"],
  [style*="padding:32px;"],
  [style*="padding:32px 32px 28px"],
  [style*="padding:28px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Icon plus text cards: recover the gutter beside the 48px icon */
  [style*="display:flex"][style*="gap:20px"] {
    gap: 14px !important;
  }
}


/* ==========================================================================
   3b. MOBILE NAVIGATION MENU

   The hamburger handler in each page does:
       navLinks.style.display = (... === 'flex') ? 'none' : 'flex'
   which reveals .nav-links, and .nav-links is styled for desktop as
       display:flex; align-items:center; gap:40px
   i.e. a horizontal row. On a 390px screen that row measures 435px wide and
   starts 171px in, so it overlaps the logo and runs 216px past the right
   edge, carrying the Enquire Now button completely off screen.

   There was no mobile menu styling anywhere in the site. These rules turn
   the revealed row into a vertical dropdown panel. The submenus are opened
   permanently because the desktop ones rely on :hover, which does not exist
   on touch, so their links were previously unreachable on a phone.
   ========================================================================== */

@media (max-width: 992px) {

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: var(--cream-light);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.20);
    padding: 6px 20px 20px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  nav.scrolled .nav-links {
    background: var(--charcoal);
  }

  /* Top level items become full width rows */
  .nav-dropdown {
    position: static;
  }

  .nav-dropdown > .nav-link {
    justify-content: flex-start;
    padding: 15px 2px 9px;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    color: var(--horizon-deep);
    font-weight: 600;
  }

  nav.scrolled .nav-dropdown > .nav-link {
    color: var(--horizon-gold);
  }

  /* The arrow implies a tap target that does nothing once expanded */
  .nav-dropdown .dropdown-arrow {
    display: none;
  }

  /* Underline animation is meaningless in a stacked list */
  .nav-link::after {
    display: none !important;
  }

  /* Submenus: always open, indented, in flow */
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0;
    padding: 0 0 8px;
    min-width: 0;
    display: block;
  }

  .dropdown-menu a {
    padding: 11px 0 11px 14px;
    white-space: normal;
    border-left: 1px solid var(--cream-warm);
    font-size: 0.72rem;
  }

  nav.scrolled .dropdown-menu a {
    border-left-color: var(--charcoal-mid);
  }

  /* Enquire Now becomes a full width button at the foot of the panel */
  .nav-cta {
    display: block;
    text-align: center;
    margin-top: 14px;
    padding: 15px 20px;
    font-size: 0.72rem;
  }

  .nav-cta:hover {
    transform: none;
  }
}


/* ==========================================================================
   4. LAUNCH BANNER
   The banner is position:fixed. On phones its text wraps to two lines and
   the close button, set to position:static in the page's own mobile rules,
   drops onto a third line. Returning it to the corner recovers that space.
   ========================================================================== */

@media (max-width: 768px) {

  .launch-banner-inner {
    padding: 8px 34px 8px 16px !important;
    gap: 8px !important;
  }

  .launch-close {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    opacity: 0.75 !important;
    font-size: 16px !important;
    padding: 6px !important;
  }

  .launch-text {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }
}


/* ==========================================================================
   5. SAFETY NET — no page may scroll sideways
   ========================================================================== */

@media (max-width: 700px) {

  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
  }
}


/* ==========================================================================
   6. MOBILE AUDIT FIXES — 2026-08-14
   ========================================================================== */

/* iOS inflates text in landscape unless this is set explicitly. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The sideways-scroll safety net previously stopped at 700px, which left the
   tablet range uncovered. The nav does not switch to its panel layout until
   992px, so the gap mattered. */
@media (max-width: 992px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
  }
}

/* Touch targets. Anything tappable should be at least 44px in its smaller
   dimension. These three were between 22px and 34px. */
@media (max-width: 992px) {
  .launch-close {
    width: 36px !important;
    height: 36px !important;
  }

  .footer-social a,
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .faq-question {
    min-height: 56px;
  }
}

/* Form controls must be at least 16px or iOS Safari zooms the whole viewport
   when the field takes focus, and never zooms back out. */
@media (max-width: 992px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .enq-submit,
  .enq-wa {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .enq-actions {
    flex-direction: column;
    align-items: stretch !important;
  }
}

/* "CONTINUOUS CARE FOR 60+" is 8 characters longer than the tagline it
   replaced and is set to nowrap. Beside a 52px logo and a hamburger it runs
   past the right edge on the narrowest phones. */
@media (max-width: 420px) {
  .nav-brand {
    gap: 10px !important;
  }

  .nav-brand > span:first-of-type,
  .nav-brand-text > span:first-child {
    font-size: 1.15rem;
  }

  .nav-brand-tagline {
    font-size: 0.46rem;
    letter-spacing: 0.08em;
  }

  .nav-logo {
    width: 40px !important;
    height: 40px !important;
  }
}

/* The survey quote grid uses CSS multi-column. Long unbroken words in a
   single narrow column can push past the card edge. */
@media (max-width: 700px) {
  .sq-text,
  .testimonial-text,
  .pain-card p {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Stat strips are flex rows that only wrap once each item hits its min-width.
   Below 380px two items still will not fit, so force one per row. */
@media (max-width: 380px) {
  .survey-stat,
  .respite-stat,
  .room-stat {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}