/* ============================================================================
   Done n Dusted — Mobile Experience Layer  (mobile-pro.css)
   ----------------------------------------------------------------------------
   Loaded LAST on every page, so it cleanly refines the built Astro styles
   without touching the generated bundles. Reuses the site's own design tokens
   (--navy-deep, --gold, --teal, --header-h, --r-pill, --ease …).

   Sections
     1. Logo fix (squash on narrow screens)
     2. Global safety: no horizontal overflow, safe-area awareness
     3. Touch targets & tap feedback
     4. iOS input zoom fix
     5. Mobile menu polish
     6. Mobile typography & spacing rhythm
     7. Sticky bottom action bar (Call / Free Quote)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. LOGO — never squash, always keep aspect ratio
   The header is a flex row; on narrow phones the brand used to shrink while the
   logo kept a fixed 40px height -> horizontal squash. Lock the brand width and
   let the image size purely from its natural ratio.
--------------------------------------------------------------------------- */
.nav__brand { flex: 0 0 auto !important; }

.nav__logo {
  height: 40px !important;
  width: auto !important;
  max-width: none !important;      /* stop global img{max-width:100%} from compressing it */
  object-fit: contain !important;
}

@media (max-width: 380px) {
  /* On the very smallest handsets, ease the logo down a touch so it and the
     menu button both breathe — still no distortion. */
  .nav__logo { height: 34px !important; }
}

.footer__logo {
  height: auto !important;
  object-fit: contain !important;
}

/* ---------------------------------------------------------------------------
   2. GLOBAL SAFETY — kill horizontal scroll & respect notches
--------------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

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

@media (max-width: 960px) {
  /* Honour the iPhone notch / home-indicator gutters on the fixed header. */
  .nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ---------------------------------------------------------------------------
   3. TOUCH TARGETS & TAP FEEDBACK  (Apple/Google guidance: >=44–48px)
--------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* Remove the "Get a Free Quote" button from the header bar on mobile.
     The original build tried to hide it, but its rule was scoped to the Nav
     component id while this button renders as a <Button> component (different
     scoped id), so the selector never matched and it leaked onto mobile,
     crowding out the menu button. The sticky bottom bar carries this action. */
  .nav__cta { display: none !important; }

  .nav__toggle {
    width: 48px !important;
    height: 48px !important;
    margin-right: -8px !important;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s var(--ease, ease);
  }
  .nav__toggle:active { background: rgba(14, 35, 71, .07); }

  .nav__mobile-link {
    padding: 1rem 0 !important;     /* ~52px row height */
    font-size: 1.15rem !important;
  }

  /* Comfortable, thumb-friendly buttons everywhere on phones. */
  .btn { min-height: 50px; }
}

/* Remove the blue tap flash on all interactive elements (premium feel). */
a, button, .btn, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------------------
   4. iOS INPUT ZOOM FIX
   Inputs under 16px make Safari auto-zoom on focus. Bump to 16px on phones.
--------------------------------------------------------------------------- */
@media (max-width: 960px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   5. MOBILE MENU POLISH — smoother open, fuller surface, clearer hierarchy
--------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .nav__mobile {
    box-shadow: 0 30px 60px -28px rgba(14, 35, 71, .55) !important;
    border-bottom: 1px solid var(--line) !important;
    /* Subtle slide+fade in when opened (panel is unhidden via [hidden]). */
    animation: mproMenuIn .32s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
  }
  .nav__mobile-links { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)) !important; }

  .nav__mobile-link:last-of-type { border-bottom: none !important; }

  /* "Get a Free Quote" is removed from the header/menu on mobile — the sticky
     bottom action bar now carries the Call + Free Quote actions, so this is
     redundant and declutters the dropdown. */
  .nav__mobile-cta { display: none !important; }

  /* Tidy the spacing now that the CTA button is gone from the panel. */
  .nav__mobile-phone { padding-bottom: 1rem !important; }
}

@keyframes mproMenuIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   6. MOBILE TYPOGRAPHY & SPACING RHYTHM
   Tightens vertical whitespace and improves readability on small screens so
   pages feel composed rather than scaled-down.
--------------------------------------------------------------------------- */
@media (max-width: 680px) {
  :root { --section-y: clamp(3rem, 2.2rem + 6vw, 4.25rem); }

  .hero__title { letter-spacing: -.01em; }
  .hero__sub   { text-wrap: pretty; }

  /* Single-column, full-width CTAs in the hero feel intentional on phones. */
  .hero__ctas { flex-direction: column; align-items: stretch; gap: .75rem; }
  .hero__ctas .btn { width: 100%; }

  /* Generous reading measure for body copy. */
  p { text-wrap: pretty; }
}

/* ---------------------------------------------------------------------------
   7. STICKY BOTTOM ACTION BAR  (Call / Free Quote)
   Injected near </body> on every page. Visible only on phones. Auto-hides
   while the in-page quote form is on screen (handled by the inline script).
--------------------------------------------------------------------------- */
.mpro-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: none;                    /* shown only <=960px below */
  gap: .6rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(251, 250, 246, .82);   /* --paper, translucent */
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--line, rgba(21,32,46,.12));
  box-shadow: 0 -14px 34px -22px rgba(14, 35, 71, .45);
  transform: translateY(0);
  transition: transform .35s var(--ease, cubic-bezier(.22,.61,.36,1)),
              opacity .35s var(--ease, ease);
}

.mpro-actionbar[data-hidden="true"] {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.mpro-actionbar__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 54px;
  padding: .7rem 1rem;
  border-radius: var(--r-pill, 999px);
  font-family: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: .005em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease),
              background .2s var(--ease, ease);
  -webkit-tap-highlight-color: transparent;
}
.mpro-actionbar__btn:active { transform: translateY(1px); }
.mpro-actionbar__btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

.mpro-actionbar__btn--call {
  color: var(--navy-deep, #0e2347);
  background: #fff;
  border-color: var(--line, rgba(21,32,46,.14));
  box-shadow: 0 6px 18px -12px rgba(14, 35, 71, .55);
}
.mpro-actionbar__btn--quote {
  color: var(--navy-deep, #0e2347);
  background: var(--gold, #c9a14a);
  box-shadow: 0 8px 22px -10px rgba(201, 161, 74, .85);
}

/* Show the bar only on phones, and reserve room so it never hides content. */
@media (max-width: 960px) {
  .mpro-actionbar { display: flex; }
  .mpro-ready body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .mpro-actionbar, .nav__mobile { animation: none !important; transition: none !important; }
}