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

:root{
  --tcl-tab-h: 60px;
  --tcl-tab-gap: 14px;
  --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) + var(--tcl-tab-gap) * 2);
  }

  /* 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 rgba(255,255,255,.5);
    background:rgba(255,253,247,.72);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    color:var(--green,#184d3a);
    box-shadow: 0 4px 14px rgba(15,56,42,.10);
    cursor:pointer;
  }
  .tcl-more-btn svg{ width:18px; height:18px; }

  /* ---------- Bottom tab bar ----------
     A floating "capsule" rather than an edge-to-edge strip —
     translucent, blurred, and lifted off the bottom edge so it
     reads as an app control surface rather than a web page's
     footer nav. */
  .tcl-tabbar{
    position:fixed; left:var(--tcl-tab-gap); right:var(--tcl-tab-gap);
    bottom: calc(var(--tcl-tab-gap) + var(--tcl-safe-b)); z-index:9000;
    display:flex; align-items:stretch;
    height: var(--tcl-tab-h);
    border-radius: 999px;
    background: rgba(255,253,247,.86);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 14px 34px rgba(15,56,42,.20), 0 2px 8px rgba(15,56,42,.10);
    padding: 5px;
  }
  .tcl-tab{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px;
    text-decoration:none; color:var(--muted,#56665d);
    font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    letter-spacing:.01em;
    background:none; border:none; cursor:pointer;
    border-radius: 999px;
    -webkit-tap-highlight-color:transparent;
    transition: color .15s ease;
  }
  .tcl-tab svg{ width:21px; height:21px; }
  .tcl-tab .tcl-dot{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:38px; height:26px; border-radius:14px;
    transition: background .18s ease, transform .18s ease;
  }
  .tcl-tab.is-active{ color:var(--green2,#0f382a); }
  .tcl-tab.is-active .tcl-dot{
    background: linear-gradient(135deg, rgba(184,144,60,.28), rgba(184,144,60,.12));
    transform: translateY(-1px) scale(1.05);
  }
  .tcl-tab.is-active svg{ color:var(--gold,#b8903c); }
  .tcl-tab:not(.is-active) svg{ color:var(--muted,#56665d); }
  .tcl-tab:active .tcl-dot{ transform: scale(.92); }

  /* ---------- "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:rgba(255,253,247,.94);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border-radius:22px 22px 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,.20);
    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) + var(--tcl-tab-gap) * 2 + 6px) !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 } }

  /* ---------- "Leave group" (group detail view) ---------- */
  .tcl-leave-group-wrap{
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--line, rgba(24,77,58,.12));
    text-align: center;
  }
  .tcl-leave-group-btn{
    appearance:none; -webkit-appearance:none;
    background: rgba(154,52,52,.07);
    border: 1px solid rgba(154,52,52,.25);
    color: #8a3a3a;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    padding: 11px 22px;
    border-radius: 999px;
    cursor: pointer;
  }
  .tcl-leave-group-btn:active{ background: rgba(154,52,52,.14); }
  .tcl-leave-group-btn:disabled{ opacity:.5; cursor:default; }
}

/* 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));
}