/* Phones, design C "app tabs" (owner 2026-10-29: "C, add other features you recommend"; mock-ups in
   Knowledge Base\mockups\phone-options-2026-10-29.md). Linked with media="(max-width:760px)" from _Layout, so nothing here
   reaches a wider screen. A tab bar along the bottom of every page (Home / Map / Reports / Contact / Menu); the old top row of
   Map, App and Menu buttons and the sticky "Open the Property Viewer" button give way to it, and Menu opens the full menu as a
   sheet above the bar. */

:root { --tabh:60px; --tabsafe:env(safe-area-inset-bottom, 0px); }
body.kg-tabs { padding-bottom:calc(var(--tabh) + var(--tabsafe)); }

.kg-tabbar { position:fixed; left:0; right:0; bottom:0; z-index:700; display:flex; height:calc(var(--tabh) + var(--tabsafe));
  padding-bottom:var(--tabsafe); background:var(--ink, #1f2d3a); border-top:1px solid rgba(255,255,255,.12); box-sizing:border-box; }
.kg-tabbar a, .kg-tabbar button { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:0; padding:0; margin:0; color:#cfd6dd; text-decoration:none; cursor:pointer;
  font:500 11.5px Roboto, system-ui, sans-serif; letter-spacing:.01em; -webkit-tap-highlight-color:transparent; }
.kg-tabbar i { font-size:21px; line-height:1; }
.kg-tabbar [aria-current="page"], .kg-tabbar [aria-expanded="true"] { color:var(--gold, #fac11c); }
.kg-tabbar a:active, .kg-tabbar button:active { background:rgba(255,255,255,.06); }

/* the tab bar carries Map and Menu, so the top row of buttons and the sticky viewer button go */
body.kg-tabs .mainnav { display:none; }
body.kg-tabs .mviewer { display:none !important; }
body.kg-tabs.mv-on .foot { padding-bottom:0; }

/* Menu: the whole site menu (and the App link, and the owner gear) as a sheet that slides up above the bar */
body.kg-tabs.kg-menu .mainnav { display:block; position:fixed; top:auto; left:0; right:0; bottom:calc(var(--tabh) + var(--tabsafe)); z-index:690;
  max-height:calc(100vh - var(--tabh) - var(--tabsafe) - 56px); max-height:calc(100dvh - var(--tabh) - var(--tabsafe) - 56px); overflow:auto;
  overscroll-behavior:contain; border-radius:14px 14px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.35); }
body.kg-tabs.kg-menu .mainnav .nv-viewer, body.kg-tabs.kg-menu .mainnav .navtoggle { display:none !important; }
body.kg-tabs.kg-menu .mainnav #navlist { display:flex; }
body.kg-tabs.kg-menu .mainnav #navlist > li > a, body.kg-tabs.kg-menu .mainnav #navlist > li > .moretoggle { min-height:46px; }
.kg-menushade { display:none; }
body.kg-tabs.kg-menu .kg-menushade { display:block; position:fixed; inset:0; z-index:680; background:rgba(10,18,26,.45); }
body.kg-tabs.kg-menu { overflow:hidden; }

/* "? Ask" and the iPhone install hint sit above the bar */
body.kg-tabs .kga-fab { bottom:calc(var(--tabh) + var(--tabsafe) + 12px) !important; }
body.kg-tabs.kg-menu .kga-fab { display:none !important; }
body.kg-tabs #kg-install-ios.bottom { bottom:calc(var(--tabh) + var(--tabsafe) + 16px); }

/* home page: four big tiles under the banner (the mock-up's home screen) */
.kg-hometiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px 16px 4px; }
.kg-hometiles a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:86px; padding:10px;
  background:#fff; border:1px solid var(--line, #dde2e7); border-radius:12px; color:var(--ink, #1f2d3a); text-decoration:none;
  font:700 17px "Open Sans Condensed", sans-serif; text-transform:uppercase; text-align:center; }
.kg-hometiles a i { font-size:24px; color:var(--gold-dark, #b8860b); }
.kg-hometiles a:active { background:#f6f3ea; }
.kg-hometiles small { font:400 12.5px Roboto, sans-serif; text-transform:none; color:#5a6672; }
/* the hero keeps only "Explore the property" and "Video tour": the tiles and the tab bar carry the rest */
.hero-cta [data-kg-install], .hero-cta .btn[href="/partners/apply"], .hero-cta .btn[href="/DataRoom"] { display:none; }

@media (prefers-reduced-motion: no-preference) {
  body.kg-tabs.kg-menu .mainnav { animation:kgsheet .2s ease-out; }
  @keyframes kgsheet { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
}