/* Distinctive Roman bottom tab bar. Loaded after roman.css and style.css. Uses the
   self-hosted Cinzel face and the existing gold meander / stone textures.
   No new paid assets. */

/* Pages has no free-host "Powered by" badge. Zero the old 60px clearance
   and drop the ::after filler so the bar sits on the viewport bottom.
   Keep env(safe-area-inset-bottom) padding on the bar itself. */
:root{--nb:0px}
.tabs,.cta{bottom:0}
.tabs::after,.cta::after{content:none;display:none;height:0;background:none}

.tabs{
  max-width:none;
  left:0;right:0;
  margin:0;
  z-index:30;
  display:flex;
  justify-content:center;
  gap:0;
  border-top:0;
  padding:10px 4px calc(6px + env(safe-area-inset-bottom,0px));
  background:
    linear-gradient(180deg,rgba(18,14,9,.97),rgba(12,10,7,.96) 36%,rgba(10,8,6,.98)),
    #16110a url(img/roman/stone-dark.jpg) 0 0/384px 384px;
  box-shadow:0 -10px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(232,207,138,.18);
}
.tabs:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:10px;
  background:url(img/roman/meander.svg) 0 0/auto 10px repeat-x;
  opacity:.7;
  pointer-events:none;
  z-index:1;
}
.tabs a{
  position:relative;
  flex:1 1 0;
  max-width:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  padding:6px 2px 4px;
  min-height:44px;
  min-width:44px;
  color:#c6b89a;
  text-decoration:none;
  font-family:var(--rm),Cinzel,"Trajan Pro","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:600;
  font-size:8.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-variant-caps:all-small-caps;
  border-radius:0;
  -webkit-tap-highlight-color:transparent;
}
.tabs a .tab-lab{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:clip;
  white-space:nowrap;
  line-height:1.15;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
}
.tabs a .tab-ic{
  position:relative;
  width:28px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  overflow:visible;
}
.tabs a .tab-glyph{
  width:22px;
  height:22px;
  display:block;
  position:relative;
  z-index:1;
  color:inherit;
  flex:none;
}
/* Laurel lives in a HTML span, not on the SVG itself. PR12 put class=tab-wreath
   on an inline SVG with viewBox only (no width/height attrs) and absolutely
   positioned it inside a flex .tab-ic. iOS Safari often will not take an
   unsized inline SVG out of flex flow, so the wreath sat beside every glyph
   as a small U and stayed visible even when opacity:0 was in the stylesheet.
   Fix: explicit width/height on the SVG, position the wrapping span with left/top 50% and negative margins
   (explicit 36x32, no transform), and only emit the wreath on the active tab. */
.tabs a .tab-wreath{
  position:absolute;
  left:50%;
  top:50%;
  width:36px;
  height:32px;
  max-width:none; /* beat style.css `.tabs a span{max-width:100%}` */
  overflow:visible;
  margin:-16px 0 0 -18px; /* 32/2, 36/2 — centers a 36x32 box in the 28x24 icon cell */
  display:block;
  color:var(--or2,#e8cf8a);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:0;
}
.tabs a .tab-wreath svg{
  display:block;
  width:36px;
  height:32px;
  max-width:none;
  overflow:visible;
}
.tabs a.on .tab-wreath{
  opacity:1;
  visibility:visible;
}
.tabs a.on{
  color:var(--or2,#e8cf8a);
}
.tabs a.on .tab-glyph{
  color:var(--or2,#e8cf8a);
  filter:drop-shadow(0 0 4px rgba(232,207,138,.55));
}
/* Gold active mark under the label (kept from the approved Roman bar). */
.tabs a.on:after{
  content:"";
  position:absolute;
  top:auto;
  bottom:3px;
  left:18%;
  right:18%;
  height:2px;
  background:var(--lin,linear-gradient(180deg,#e8cf8a,#c9a24a 50%,#9a7428));
  border-radius:1px;
  box-shadow:0 0 8px rgba(232,207,138,.85),0 0 2px rgba(232,207,138,.9);
}
.tabs a:focus-visible{
  outline:2px solid var(--or2,#e8cf8a);
  outline-offset:-2px;
}
.tabs .dot{
  top:8px;
  right:calc(50% - 16px);
  width:9px;
  height:9px;
  background:var(--or2,#e8cf8a);
  border:2px solid #120e0a;
  box-shadow:0 0 6px rgba(232,207,138,.8);
  z-index:2;
}
@media (min-width:480px){
  .tabs a{font-size:9.5px;letter-spacing:.12em;padding:10px 4px 7px;min-height:48px}
  .tabs a .tab-glyph{width:24px;height:24px}
}
@media (min-width:800px){
  .tabs{padding-left:12px;padding-right:12px}
  .tabs a{font-size:10px;letter-spacing:.14em;max-width:140px;min-height:52px}
}
/* Eight tabs (Bible added): on phones every label gets the compact face so long words like
   SUPPLEMENTS / SUPLEMENTOS / PROGRAMAS fit in a ~47px column without clipping. */
@media (max-width:479px){
  .tabs a{font-size:7.5px;letter-spacing:.04em;padding:6px 0 4px}
}
@media (max-width:380px){
  .tabs{padding-left:1px;padding-right:1px}
  .tabs a{font-size:7.5px;letter-spacing:.04em;padding:10px 0 5px}
  .tabs a .tab-glyph{width:20px;height:20px}
  .tabs a .tab-ic{width:24px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .tabs a.on .tab-glyph{filter:none}
  .tabs a.on:after{box-shadow:none}
  .tabs .dot{box-shadow:none}
}

/* Meander cornice makes the bar a little taller than the old 96px clearance.
   --nb is 0 on Pages, so this is just bar height + safe area. */
main{padding-bottom:calc(114px + var(--nb,0px) + env(safe-area-inset-bottom,0px))}
html{scroll-padding-bottom:calc(114px + var(--nb,0px) + env(safe-area-inset-bottom,0px))}
/* Program pages: keep the first panel (4-week note, membership) out from
   under the sticky Join bar at first paint, including 390-wide phones. */
.phero:not(.under){min-height:340px}
.phero:not(.under) .ptxt{padding-top:100px}
.panel,.upcard{scroll-margin-bottom:calc(114px + var(--nb,0px) + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(118px + var(--nb,0px) + env(safe-area-inset-bottom,0px))}
.bd-pop{bottom:calc(118px + var(--nb,0px) + env(safe-area-inset-bottom,0px))}
.obimg{height:60vh}
.obt{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}

/* Keep the home marquee from sitting under the taller meander cornice. */
.marq{margin-bottom:8px}
@media (min-width:700px){
  .home-hero .hh{padding-bottom:0}
}