/* =========================================================================
   APP SHELL — makes the public site behave like a native app on phones
   (bottom tab bar, compact header, app-style buttons, standalone mode)
   Loaded last so it can override earlier layers.
   ========================================================================= */

:root{
  --app-tab-h: 64px;
  --app-safe-b: env(safe-area-inset-bottom, 0px);
  --app-safe-t: env(safe-area-inset-top, 0px);
  --app-surface: #FFFFFF;
  --app-ink: #0C1B5C;
  --app-muted: #6B7280;
  --app-accent: #1F5BFF;
}

/* Native feel: no tap flash, no text selection on chrome, no rubber-band over-scroll */
html{ -webkit-tap-highlight-color: transparent; }
.app-tabbar, .site-header, .app-tabbar *{ -webkit-user-select:none; user-select:none; }
.btn, .app-tab, .nav-toggle, .chat-opt{ touch-action: manipulation; }

/* Page fade-in on load (app-like), disabled for reduced motion */
@keyframes appFadeIn { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: no-preference){
  main#main-content{ animation: appFadeIn .28s ease both; }
}

/* ---------- Installed / standalone mode (home-screen app) ---------- */
@media (display-mode: standalone){
  html{ overscroll-behavior-y: none; }
  .site-header{ padding-top: var(--app-safe-t); }
  .app-install{ display:none !important; }
}

/* ---------- Phone layout (app mode) ---------- */
@media (max-width: 768px){
  /* Top bar on phones: ONE line only — serving places + email (phone is on the header call icon) */
  .topbar{ display:block; font-size:.74rem; padding:7px 0; }
  .topbar .container{ flex-direction:row !important; flex-wrap:nowrap !important; justify-content:space-between; align-items:center; text-align:left; gap:10px; }
  .topbar__locations{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar__contact{ flex:0 0 auto; white-space:nowrap; }
  .topbar__tel, .topbar__sep{ display:none; }
  .topbar__mail{ font-weight:600; }

  /* Compact sticky app header with safe-area support */
  /* NOTE: no backdrop-filter/transform here — it would trap the fixed side menu inside the header */
  .site-header{
    position:sticky; top:0; padding-top: var(--app-safe-t);
    z-index: 720; /* above the scrim (650) so the side menu sheet is never dimmed */
    background:#FFFFFF !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-bottom: 1px solid rgba(12,27,92,.08);
  }
  .site-header .container{ min-height:58px; padding-top:6px; padding-bottom:6px; }
  .brand__logo{ height:40px; width:auto; }

  /* Header quick actions: install + call (icons only, big tap targets) */
  .app-header-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; margin-right:10px; }
  .app-header-actions a, .app-install{
    display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px;
    border-radius:12px; text-decoration:none; border:0; cursor:pointer; font: inherit;
  }
  .app-header-actions .app-icon-btn{ background:#EEF2FF; color:var(--app-ink); }
  .app-install[hidden]{ display:none !important; }
  .app-install{
    background: linear-gradient(90deg,#1F5BFF,#7B2FF2); color:#fff; font-weight:600; font-size:.8rem;
    padding:0 12px; box-shadow:0 6px 14px rgba(31,91,255,.25);
  }
  /* On phones the bottom Menu tab replaces the header button (header button stays on tablets) */

  /* Side menu becomes a full-height app sheet with a dimmed backdrop */
  .main-nav{
    background:#FFFFFF !important;
    padding: calc(var(--app-safe-t) + 74px) 20px calc(24px + var(--app-safe-b));
    box-shadow: -12px 0 40px rgba(12,27,92,.25);
    z-index: 700;
  }
  .main-nav a.nav-link{ display:block; padding:14px 12px; border-radius:12px; font-size:1rem; }
  .main-nav .nav-cta{ margin-top:12px; text-align:center; background: linear-gradient(90deg,#1F5BFF,#7B2FF2); color:#fff !important; border-radius:14px; }
  .app-scrim{
    position:fixed; inset:0; background:rgba(12,27,92,.45); opacity:0; pointer-events:none;
    transition:opacity .25s ease; z-index:650;
  }
  body.app-menu-open .app-scrim{ opacity:1; pointer-events:auto; }
  body.app-menu-open{ overflow:hidden; }

  /* Bottom tab bar — the core "app" element */
  .app-tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:640;
    height: calc(var(--app-tab-h) + var(--app-safe-b));
    padding-bottom: var(--app-safe-b);
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(12,27,92,.08);
    box-shadow: 0 -8px 24px rgba(12,27,92,.08);
    display:grid; grid-template-columns: repeat(5,1fr); align-items:center;
  }
  .app-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    height:100%; min-height:44px; color:var(--app-muted); text-decoration:none;
    font-size:.68rem; font-weight:600; letter-spacing:.01em; background:none; border:0; cursor:pointer; font-family:inherit;
    transition: transform .12s ease, color .2s ease;
  }
  .app-tab svg{ width:22px; height:22px; }
  .app-tab__pill{ display:flex; }
  .app-tab:active{ transform:scale(.92); }
  .app-tab.is-active{ color:var(--app-accent); }
  .app-tab.is-active svg{ filter: drop-shadow(0 2px 4px rgba(31,91,255,.35)); }
  /* Centre action: prominent Call / Quote button */
  .app-tab--primary{ color:#fff !important; }
  .app-tab--primary .app-tab__pill{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    width:58px; height:58px; margin-top:-22px; border-radius:20px;
    background: linear-gradient(135deg,#1F5BFF 0%,#7B2FF2 55%,#E8337A 100%);
    box-shadow: 0 10px 22px rgba(123,47,242,.38), inset 0 1px 0 rgba(255,255,255,.3);
    color:#fff;
  }
  .app-tab--primary .app-tab__pill svg{ width:22px; height:22px; }
  .app-tab--primary span:last-child{ color:var(--app-ink); }
  .app-tab--primary{ color:var(--app-ink) !important; }

  /* One-time iPhone hint (Add to Home Screen) */
  .a2hs-hint{
    position:fixed; left:12px; right:12px; bottom:calc(var(--app-tab-h) + var(--app-safe-b) + 12px); z-index:630;
    background:var(--app-ink); color:#fff; border-radius:16px; padding:12px 14px; font-size:.84rem; line-height:1.45;
    box-shadow:0 14px 30px rgba(12,27,92,.35); display:flex; gap:10px; align-items:flex-start;
  }
  .a2hs-hint[hidden]{ display:none !important; }
  .a2hs-hint strong{ color:#FCD34D; }
  .a2hs-hint button{ margin-left:auto; flex:0 0 auto; background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:10px; padding:6px 10px; font:inherit; font-weight:600; cursor:pointer; }

  /* Content must never sit under the tab bar */
  body{ padding-bottom: calc(var(--app-tab-h) + var(--app-safe-b) + 8px); }
  .float-contact, .mobile-cta{ display:none !important; }
  .cookie-bar{ bottom: calc(var(--app-tab-h) + var(--app-safe-b) + 10px) !important; }

  /* App-style controls */
  .btn{ min-height:48px; border-radius:14px; }
  .btn-sm{ min-height:40px; }
  .card, .service-window, .offer-card, .feature-card{ border-radius:20px; }
  input, select, textarea{ font-size:16px; } /* stops iOS auto-zoom on focus */
  .section{ padding-top:56px; padding-bottom:56px; }

  /* Footer is long on phones: keep it, but tighter */
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* Very small phones */
@media (max-width: 360px){
  .app-tab{ font-size:.6rem; }
  .app-tab--primary .app-tab__pill{ width:52px; height:52px; margin-top:-18px; }
}

/* Desktop: none of the app-only chrome shows */
@media (min-width: 769px){
  .app-tabbar, .app-scrim, .app-header-actions, .app-install, .a2hs-hint{ display:none !important; }
}


/* Top bar: always ONE line (serving places + email), on desktop and phone.
 * Long place lists are cut with "..." instead of wrapping to a second line. */
.topbar .container{ flex-wrap:nowrap !important; }
.topbar__locations{ min-width:0; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__contact{ flex:0 0 auto; white-space:nowrap; }

/* Phones (up to 720px): the bottom Menu tab opens the menu, so the header button is hidden */
@media (max-width: 720px){
  .nav-toggle{ display:none !important; }
}

/* Tablets and small laptops (721px to 960px): the menu becomes the same side drawer as on phones,
 * so the desktop menu never runs off the screen */
@media (min-width: 721px) and (max-width: 960px){
  .nav-toggle{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; z-index:800; }
  .main-nav{ position:fixed; top:0; right:-100%; height:100vh; width:min(320px,86vw); background:#FFFFFF !important;
    flex-direction:column; align-items:stretch; padding:calc(var(--app-safe-t) + 74px) 20px 24px; transition:right .25s ease;
    box-shadow:-12px 0 40px rgba(12,27,92,.25); overflow-y:auto; z-index:700; }
  .main-nav.is-open{ right:0; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .main-nav a.nav-link{ display:block; padding:14px 12px; border-radius:12px; font-size:1rem; }
  .main-nav .nav-cta{ margin-top:12px; text-align:center; background:linear-gradient(90deg,#1F5BFF,#7B2FF2); color:#fff !important; border-radius:14px; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-left:14px; display:none; }
  .has-dropdown.is-open .dropdown{ display:block; }
  /* no backdrop-filter here: it would trap the fixed drawer inside the header */
  .site-header{ z-index:720; background:#FFFFFF !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .app-scrim{ position:fixed; inset:0; background:rgba(12,27,92,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:650; }
  body.app-menu-open .app-scrim{ opacity:1; pointer-events:auto; }
  body.app-menu-open{ overflow:hidden; }
}