/* Global Acadie.sol shell chrome.
   This is the single visual contract for the floating menu, bottom dock,
   and global header across every page; page styles should change content
   surfaces, not this shared shell. */

/* Global header bar — Acadian banner. Fixed at top of every page.
   Slightly taller and louder now that it carries live counts, while still
   respecting the iPhone safe area and pushing page content below it globally. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(30px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  z-index: 84;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-deep);
  color: var(--acadian-yellow);
  font-family: monospace;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--acadian-yellow) 22%, transparent);
  box-shadow: 0 6px 14px -8px var(--shadow);
}
[data-theme="dark"] .site-header {
  background: var(--blue-deep);
  color: var(--acadian-yellow);
}
body {
  padding-top: calc(42px + env(safe-area-inset-top));
}
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* Shared floating menu overlay: the backdrop and drawer animate separately so the
   dimmed full-screen layer never inherits the centered panel transform. The high
   z-index keeps the global menu above page-local fixed headers on search. */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 31, 61, .42);
  backdrop-filter: blur(5px) saturate(.92);
  -webkit-backdrop-filter: blur(5px) saturate(.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.drawer {
  position: fixed;
  z-index: 81;
  left: 0;
  right: 0;
  bottom: 86px;
  margin: 0 auto;
  width: min(390px, calc(100vw - 28px));
  min-height: 218px;
  padding: 58px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--glass, color-mix(in srgb, var(--paper) 72%, transparent));
  backdrop-filter: blur(20px) saturate(1.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.45);
  box-shadow: 0 24px 54px var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
}
.menu-toggle:checked ~ .drawer-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menu-toggle:checked ~ .drawer { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }

/* Shared menu controls: display/language controls live in the corners; the quiet
   remembrance cross stays centered as one icon-only global utility. */
.drawer-controls {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
/* Shared button system: the shell treats every action button as the same
   familiar blue/yellow control so the UI can shift while the tap target stays
   readable in both themes. */
.menu-control,
.drawer-close,
.drawer-nav a,
.site-dock a,
.site-dock label {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 40px;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.menu-control:focus,
.drawer-close:focus,
.drawer-nav a:focus,
.site-dock a:focus,
.site-dock label:focus { outline: none; }
.menu-control:focus-visible,
.drawer-close:focus-visible,
.drawer-nav a:focus-visible,
.site-dock a:focus-visible,
.site-dock label:focus-visible { outline: 2px solid color-mix(in srgb, var(--button-fg) 55%, transparent); outline-offset: 2px; }
.theme-button { width: 44px; font-size: 1.15rem; line-height: 1; }
.lang-button { display: inline-flex; gap: 3px; align-items: center; padding-inline: 12px; }
.lang-button .lang-en,
.lang-button .lang-fr { color: inherit; }
.drawer-close {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 44px;
  font-size: 1.15rem;
}
.drawer-nav a {
  width: 100%;
  padding: 13px;
  border-radius: 17px;
  text-align: center;
}
.menu-control:hover,
.drawer-close:hover,
.drawer-nav a:hover,
.site-dock a:hover,
.site-dock label:hover { color: var(--button-fg); background: var(--button-bg-hover, color-mix(in srgb, var(--button-bg) 86%, #fff)); border-color: var(--button-border); }
.drawer-nav { display: grid; gap: 8px; margin-top: 18px; }


/* Shared bottom dock: permanent cross-page navigation, never page-specific chrome.
   Safe-area bottom keeps the dock pinned to the visible phone edge without letting
   directory/search scroll or filter states rewrite its placement. */
.site-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  margin: 0 auto;
  width: min(390px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--glass, color-mix(in srgb, var(--paper) 72%, transparent));
  box-shadow: 0 14px 38px var(--shadow);
  backdrop-filter: blur(20px) saturate(1.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.45);
  z-index: 82;
  isolation: isolate;
}
.site-dock a,
.site-dock label {
  gap: 2px;
  min-height: 56px;
  padding: 8px 2px;
  border-radius: 18px;
  font-size: .68rem;
  line-height: 1;
}
.site-dock a span:first-child,
.site-dock label span:first-child { font-size: 1.12rem; line-height: 1; }