/* ═══════════════════════════════════════════════════════════════════════════
   Carlo Schembri — Shared Components
   Used by every page (home, chapters, admin) so the brand reads consistently.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Universal Button System ──────────────────────────────────────────── */
.btn {
  --btn-pad-y: 16px;
  --btn-pad-x: 32px;
  --btn-bg: transparent;
  --btn-border: rgba(232, 226, 214, 0.22);
  --btn-fg: var(--limestone);
  --btn-accent: var(--bronze-pale);

  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-fg);
  font-family: var(--font-sc);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  cursor: none;
  position: relative;
  overflow: hidden;
  transition: gap 0.4s var(--ease-out), color 0.3s, border-color 0.3s, background 0.4s;
}
.btn svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); flex-shrink: 0; }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--btn-accent);
  transform: translateX(-101%);
  transition: transform 0.6s var(--ease-out);
  z-index: -1;
}
.btn:hover { gap: 22px; border-color: var(--btn-accent); }
.btn:hover svg { transform: translateX(4px); }

/* Primary — filled bronze on hover */
.btn-primary {
  --btn-bg: var(--bronze);
  --btn-border: var(--bronze);
  --btn-fg: var(--ink-deep);
  --btn-accent: var(--bronze-light);
}
.btn-primary:hover { color: var(--ink-deep); }
.btn-primary:hover::before { transform: translateX(0); }

/* Ghost (light bg) */
.btn-ghost-light {
  --btn-border: rgba(30, 26, 22, 0.22);
  --btn-fg: var(--ink);
  --btn-accent: var(--bronze);
}
.btn-ghost-light:hover { color: var(--bronze); }

/* Minimal underline link-button */
.btn-line {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 0;
  font-family: var(--font-sc);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: inherit;
  border-bottom: 1px solid currentColor;
  opacity: 0.7;
  cursor: none;
  transition: gap 0.4s var(--ease-out), opacity 0.3s, color 0.3s;
}
.btn-line:hover { gap: 22px; opacity: 1; color: var(--bronze-pale); }
.btn-line svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease-out); }
.btn-line:hover svg { transform: translateX(4px); }

/* ── Mobile Navigation Overlay ─────────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  padding: 0;
  cursor: none;
  z-index: 9600;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--bronze-pale);
  transition: transform 0.4s var(--ease-out), opacity 0.3s;
  transform-origin: center;
}
.nav-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0;
  z-index: 9550;
  background: rgba(10, 9, 8, 0.98);
  backdrop-filter: blur(24px) saturate(1.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.mobile-nav.active { opacity: 1; pointer-events: auto; }
.mobile-nav a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--limestone);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), color 0.3s;
  position: relative;
}
.mobile-nav a em {
  position: absolute;
  left: -28px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sc);
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  color: var(--bronze);
  opacity: 0.5;
}
.mobile-nav.active a { opacity: 1; transform: translateY(0); }
.mobile-nav.active a:nth-child(1) { transition-delay: 0.15s; }
.mobile-nav.active a:nth-child(2) { transition-delay: 0.22s; }
.mobile-nav.active a:nth-child(3) { transition-delay: 0.29s; }
.mobile-nav.active a:nth-child(4) { transition-delay: 0.36s; }
.mobile-nav.active a:nth-child(5) { transition-delay: 0.43s; }
.mobile-nav a:hover { color: var(--bronze-pale); }
.mobile-nav-foot {
  position: absolute;
  bottom: 48px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-sc);
  font-size: 0.5rem;
  letter-spacing: 0.4em;
  color: rgba(232, 226, 214, 0.25);
  text-transform: uppercase;
}

/* ── Page Transition Overlay ──────────────────────────────────────────── */
/* Slides in from the right when navigating to "forward" page,
   from the left when navigating "back". Then the new page slides from
   opposite side into place. Result: a cohesive horizontal motion. */
.page-transition {
  position: fixed;
  top: 0; bottom: 0;
  left: 100%;
  width: 100%;
  z-index: 99990;
  background: var(--ink-deep);
  pointer-events: none;
  will-change: transform;
}
.page-transition.direction-back { left: -100%; }
.page-transition::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    var(--bronze-pale) 50%,
    transparent);
  opacity: 0.5;
}
.page-transition.direction-back::before { left: auto; right: 0; }

.pt-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 1rem;
  color: var(--bronze-pale);
  letter-spacing: 0.3em;
  opacity: 0;
  transition: opacity 0.4s;
}
.page-transition.covering .pt-mark { opacity: 1; }

/* Page enter animation — fades/slides content in on load */
body.page-entering {
  animation: pageEnter 0.9s var(--ease-out) both;
}
body.page-entering.direction-back {
  animation: pageEnterBack 0.9s var(--ease-out) both;
}
@keyframes pageEnter {
  0%   { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes pageEnterBack {
  0%   { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── Social Icons ──────────────────────────────────────────────────────── */
.social-list {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
}
.social-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(232, 226, 214, 0.12);
  border-radius: 50%;
  color: rgba(232, 226, 214, 0.45);
  transition: color 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
}
.social-list a:hover {
  color: var(--bronze-pale);
  border-color: var(--bronze-pale);
  transform: translateY(-2px);
}
.social-list a svg { width: 14px; height: 14px; }

/* ── Responsive: show burger, hide nav-links on mobile ─────────────────── */
@media (max-width: 820px) {
  .nav-burger { display: flex; }
  .nav-links { display: none !important; }
}