/* ============================================================
   LION Design System — Navbar
   All colours are CSS variables defined in theme-*.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Lora:wght@400;500&display=swap');

@font-face {
  font-family: 'Bespoke Slab';
  src: url('/assets/fonts/BespokeSlab-Regular.woff2') format('woff2'),
       url('/assets/fonts/BespokeSlab-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --lion-caps-font: 'Bespoke Slab', Georgia, serif;
  --lion-nav-height: 72px;
  --lion-nav-height-scrolled: 56px;
}

body {
  /* The navbar is position:fixed and so ignores body's default 8px margin,
     while .lion-page does not. Above 1100px both centre on the viewport and
     it cancels out, but below that the page shifts 8px right of the navbar.
     Zero it so the two stay aligned at every width. */
  margin: 0;
  padding-top: var(--lion-nav-height);
  background-color: var(--lion-bg-page);
}

/* ── Navbar shell ── */
.lion-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--lion-nav-height);
  background-color: var(--lion-main);
  border-bottom: none;
  transition: height 0.25s ease, box-shadow 0.25s ease;
}

.lion-navbar-scrolled {
  height: var(--lion-nav-height-scrolled);
  box-shadow: 0 2px 20px rgba(26, 18, 9, 0.25);
}

/* ── Inner layout ──
   max-width and side padding deliberately match .lion-page in page-styles.html
   so the navbar's outer edges line up with the page content beneath it.
   Keep the two in sync if either changes. */
.lion-navbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* .lion-page drops to 1.5rem side padding here — follow it. */
@media (max-width: 700px) {
  .lion-navbar-inner { padding: 0 1.5rem; }
}

/* ── Logo ── */
.lion-navbar-logo {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  line-height: 1.1;
}

.lion-logo-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.lion-logo-img {
  height: 55px;
  width: auto;
  display: block;
}

.lion-logo-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.lion-logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--lion-white);
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}

.lion-logo-sub {
  font-family: var(--lion-caps-font);
  font-size: 0.62rem;
  font-style: normal;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
  transition: opacity 0.2s;
}

.lion-navbar-logo:hover .lion-logo-text,
.lion-navbar-logo:hover .lion-logo-sub {
  opacity: 0.8;
}

/* ── Nav links ── */
.lion-nav-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.lion-nav-links li a {
  font-family: var(--lion-caps-font);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  position: relative;
  transition: color 0.2s;
}

.lion-nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.9rem; right: 0.9rem;
  height: 1.5px;
  background: var(--lion-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.lion-nav-links li a:hover { color: var(--lion-white); }
.lion-nav-links li a:hover::after { transform: scaleX(1); }
.lion-nav-links li a.lion-nav-active { color: var(--lion-white); }
.lion-nav-links li a.lion-nav-active::after { transform: scaleX(1); }

/* ── Hamburger ── */
.lion-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}

.lion-menu-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--lion-white);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.22s;
  transform-origin: center;
}

.lion-menu-toggle.lion-menu-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lion-menu-toggle.lion-menu-open span:nth-child(2) { opacity: 0; }
.lion-menu-toggle.lion-menu-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile ── */
@media (max-width: 768px) {

  .lion-menu-toggle { display: flex; }
  .lion-navbar-inner::before { display: none; }

  .lion-nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--lion-main);
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 0.5rem 0 1rem;
    gap: 0;
  }

  .lion-nav-links.lion-nav-open { display: flex; }

  .lion-nav-links li a {
    display: block;
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
  }

  .lion-nav-links li:last-child a { border-bottom: none; }
  .lion-nav-links li a::after { display: none; }
}