/* =========================================================
   The Church Life — App Shell
   Bottom tab navigation + slim header for phone-width /
   installed-app contexts. Desktop layout is untouched.
   ========================================================= */

:root{
  --tcl-tab-h: 64px;
  --tcl-safe-b: env(safe-area-inset-bottom, 0px);
  --tcl-safe-t: env(safe-area-inset-top, 0px);
}

/* Only take over navigation below 820px (phones/tablets) —
   desktop keeps the existing top nav exactly as-is. */
@media (max-width: 820px){

  html.tcl-shell-ready body{
    padding-bottom: calc(var(--tcl-tab-h) + var(--tcl-safe-b));
  }

  /* Hide the original wrapping horizontal nav; keep the logo. */
  header nav{ display:none !important; }
  header .wrapper.shell{
    padding-top: calc(10px + var(--tcl-safe-t));
    padding-bottom: 10px;
    display:flex; align-items:center; justify-content:space-between;
  }
  header .mark-full{ height: 30px; width:auto; }

  /* "More" trigger button, top right of header */
  .tcl-more-btn{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:999px;
    border:1px solid var(--line, rgba(24,77,58,.14));
    background:var(--paper,#fffdf7); color:var(--green,#184d3a);
    cursor:pointer;
  }
  .tcl-more-btn svg{ width:18px; height:18px; }

  /* ---------- Bottom tab bar ---------- */
  .tcl-tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:9000;
    display:flex;
    height: calc(var(--tcl-tab-h) + var(--tcl-safe-b));
    padding-bottom: var(--tcl-safe-b);
    background: var(--paper,#fffdf7);
    border-top: 1px solid var(--line, rgba(24,77,58,.14));
    box-shadow: 0 -8px 24px rgba(15,56,42,.08);
  }
  .tcl-tab{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px;
    text-decoration:none; color:var(--muted,#56665d);
    font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    letter-spacing:.01em;
    background:none; border:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .tcl-tab svg{ width:22px; height:22px; }
  .tcl-tab .tcl-dot{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:40px; height:26px; border-radius:14px; transition:background-color .15s ease;
  }
  .tcl-tab.is-active{ color:var(--green2,#0f382a); }
  .tcl-tab.is-active .tcl-dot{ background: rgba(184,144,60,.16); }
  .tcl-tab.is-active svg{ color:var(--gold,#b8903c); }
  .tcl-tab:not(.is-active) svg{ color:var(--muted,#56665d); }

  /* ---------- "More" sheet ---------- */
  .tcl-sheet-scrim{
    position:fixed; inset:0; background:rgba(15,30,24,.42);
    opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:9100;
  }
  .tcl-sheet-scrim.is-open{ opacity:1; pointer-events:auto; }

  .tcl-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:9200;
    background:var(--paper,#fffdf7);
    border-radius:20px 20px 0 0;
    padding: 10px 20px calc(22px + var(--tcl-safe-b));
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -16px 40px rgba(15,56,42,.18);
    max-height: 78vh; overflow-y:auto;
  }
  .tcl-sheet.is-open{ transform: translateY(0); }
  .tcl-sheet-grabber{
    width:36px; height:4px; border-radius:99px; background:var(--line, rgba(24,77,58,.2));
    margin: 4px auto 14px;
  }
  .tcl-sheet h3{
    margin:0 0 12px; font:700 13px/1 -apple-system, sans-serif;
    letter-spacing:.08em; text-transform:uppercase; color:var(--gold,#b8903c);
  }
  .tcl-sheet-link{
    display:flex; align-items:center; gap:12px;
    padding:13px 4px; text-decoration:none; color:var(--ink,#143225);
    font:600 15.5px/1.2 -apple-system, sans-serif;
    border-bottom:1px solid var(--line, rgba(24,77,58,.1));
  }
  .tcl-sheet-link:last-of-type{ border-bottom:none; }
  .tcl-sheet-link svg{ width:19px; height:19px; color:var(--green,#184d3a); flex-shrink:0; }

  .tcl-lang-row{
    display:flex; gap:8px; margin: 14px 0 4px;
  }
  .tcl-lang-btn{
    flex:1; padding:11px 0; text-align:center; border-radius:12px;
    border:1px solid var(--line, rgba(24,77,58,.18));
    background:var(--bg,#f6f2e8); color:var(--ink,#143225);
    font:700 14px/1 -apple-system, sans-serif; cursor:pointer;
  }
  .tcl-lang-btn.is-active{
    background:var(--green2,#0f382a); border-color:var(--green2,#0f382a); color:#fff;
  }

  /* Keep the page's own floating "back to top" button clear
     of the tab bar instead of overlapping it. */
  .back-to-top{
    bottom: calc(var(--tcl-tab-h) + var(--tcl-safe-b) + 16px) !important;
  }

  /* Fade the page content in once the shell has taken over,
     so nav swap never "flashes" the old layout. */
  html.tcl-shell-ready body{ animation: tcl-fade .18s ease both; }
  @keyframes tcl-fade{ from{ opacity:.4 } to{ opacity:1 } }
}

/* Running installed (standalone) — extra breathing room under
   the status bar / notch, and no browser chrome to rely on. */
html.tcl-standalone header .wrapper.shell{
  padding-top: calc(14px + var(--tcl-safe-t));
}