/* ───────────────────────────────────────────────────────────────
   YUHA · shared site chrome — header + footer for all static pages
   (About · Pricing · Contact · Privacy · Terms).

   Self-contained: scoped .yh-* classes + --yh-* tokens, with explicit
   font-family on the chrome elements. Safe to drop into any page
   without clobbering its own styles. To use:
     1. <link rel="stylesheet" href="/static/site-chrome.css?v=1"> in <head>
     2. paste the <header class="yh-nav"> snippet as the first body child
     3. paste the <footer class="yh-footer"> snippet as the last body child
   ─────────────────────────────────────────────────────────────── */
:root{
  --yh-accent:#0d9488; --yh-accent-deep:#0f766e;
  --yh-ink:#0f172a; --yh-ink-2:#475569; --yh-ink-3:#94a3b8;
  --yh-line:#e2e8f0; --yh-bg:#ffffff; --yh-bg-soft:#f8fafc;
  --yh-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ── Header ───────────────────────────────────────────────── */
.yh-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  /* Top padding grows to fit the device status bar on edge-to-edge Android.
     Pages must include `viewport-fit=cover` in their viewport meta for the
     env() value to be non-zero — otherwise the browser reports 0 and we fall
     back to the plain 14px. */
  padding:calc(14px + env(safe-area-inset-top, 0px)) 24px 14px;
  font-family:var(--yh-font);
  background:rgba(255,255,255,0.85);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--yh-line);
}
.yh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.yh-brand-mark{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#14b8a6,var(--yh-accent-deep));
  color:#fff;font-weight:800;font-size:17px;
  display:grid;place-items:center;letter-spacing:-.02em;
}
.yh-brand-name{font-size:18px;font-weight:700;color:var(--yh-ink);letter-spacing:-.01em;}
.yh-nav-right{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  /* defensive resets — a host page's bare `nav {}` rule must not leak into the chrome */
  margin:0;padding:0;border:0;position:static;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:auto;
}
.yh-nav-link{
  color:var(--yh-ink-2);text-decoration:none;font-size:14px;font-weight:500;
  padding:8px 12px;border-radius:8px;transition:color .15s,background .15s;
}
.yh-nav-link:hover{color:var(--yh-accent);background:var(--yh-bg-soft);}
.yh-nav-cta{
  margin-left:6px;padding:8px 16px;border-radius:9px;
  background:var(--yh-accent);color:#fff;text-decoration:none;
  font-size:14px;font-weight:600;transition:background .15s;
}
.yh-nav-cta:hover{background:var(--yh-accent-deep);}

/* ── Footer ────────────────────────────────────────────────────────────
   Unified 2026-05-29 to match the landing footer (views.css:.l-foot).
   Single space-between row: copyright + inline email LEFT, 5 links RIGHT,
   12px / ink-3 dim text. Email is part of the copyright string for visual
   consistency across every page on yuha.app. We re-use the existing
   `.yh-footer-links` and `.yh-footer-legal` selectors so the static HTML
   pages don't need a markup rewrite — just CSS. */
.yh-footer{
  max-width:1280px;margin:64px auto 0;
  padding:20px 40px 40px;
  font-family:var(--yh-font);
  border-top:1px solid var(--yh-line);
  background:transparent;
  display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;
  font-size:12px;color:var(--yh-ink-3);
}
.yh-footer-links{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:0;margin:0;order:2;
}
.yh-footer-link{
  color:var(--yh-ink-2);text-decoration:none;
  font-size:12px;font-weight:500;
  margin-left:20px;
  transition:color .15s;
}
.yh-footer-link:first-child{margin-left:0;}
.yh-footer-link:hover{color:var(--yh-accent);}
.yh-footer-legal{
  font-size:12px;color:var(--yh-ink-3);
  line-height:1.5;margin:0;order:1;
}
.yh-footer-legal a{
  color:var(--yh-ink-2);text-decoration:none;
}
.yh-footer-legal a:hover{color:var(--yh-accent);}
@media (max-width:680px){
  .yh-footer{padding:20px 20px 32px;}
  .yh-footer-link{margin-left:16px;}
}

@media (max-width:560px){
  .yh-nav{padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;}
  /* On phones we drop the secondary nav-link items (About / Pricing) to keep
     the header clean — the brand mark + the prominent "Open App →" CTA both
     route back to the SPA, which is the only nav users need from a static
     legal page. */
  .yh-nav-link{display:none;}
  .yh-nav-cta{padding:9px 14px;font-size:13.5px;}
}

/* ── Mobile bottom nav (Android shell + narrow web) ─────────────────────
   Mirrors the SPA's #mob-bottom-nav (see static/platform.css:3689). Static
   pages don't have access to sbNav(), so each tab is a plain anchor that
   navigates the WebView to /?view=<id>. When tapped from a static page in
   the Android shell the SPA loads and the chosen view becomes active.

   Visibility rules:
     • Always shown when <body> has .native-app (Android shell needs it)
     • Shown on narrow web (≤768px) regardless — mobile web users also
       benefit from a one-tap path back to the main app
     • Hidden on desktop web (>768px) — the top nav is enough there
   ──────────────────────────────────────────────────────────────────── */
.yh-mobile-nav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:150;
  height:calc(60px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--yh-line);
  padding-bottom:env(safe-area-inset-bottom, 0);
  padding-left:env(safe-area-inset-left, 0);
  padding-right:env(safe-area-inset-right, 0);
  font-family:var(--yh-font);
}
.yh-mobile-nav a{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  text-decoration:none; color:var(--yh-ink-3);
  padding:6px 2px 4px;
  transition:color .15s;
}
.yh-mobile-nav a:hover,
.yh-mobile-nav a:active{color:var(--yh-accent);}
.yh-mobile-nav svg{width:26px; height:26px;}
.yh-mobile-nav .yh-mob-lbl{
  font-size:10.5px; font-weight:600; letter-spacing:0.2px;
}

@media (max-width:768px){
  .yh-mobile-nav{display:flex;}
  /* Reserve room at the bottom of the page so content isn't hidden behind
     the fixed nav. 60px nav + 20px breathing room + safe-area inset. */
  body{
    padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));
  }
  /* The footer already has its own padding, but the bottom-nav covers it;
     trim its bottom padding so the visual gap stays consistent. */
  .yh-footer{margin-bottom:0; padding-bottom:24px;}
}

/* Force show in Android shell even on rare wide-tablet layouts */
body.native-app .yh-mobile-nav{display:flex;}
body.native-app{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));}
