/* ==========================================================
   navigation.css: header, menu, language switch, setlist rail, sticky booking bar
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--stout);
  color: var(--foam);
  border-bottom: 1px solid rgba(239, 238, 230, 0.12);
}

.admin-bar .site-header { top: 32px; }

.site-header .container { height: 100%; display: flex; align-items: center; gap: 1.5rem; position: relative; }

.logo-link { display: block; color: var(--foam); line-height: 0; transition: color var(--ease); }

.logo-link:hover { color: var(--amber); }

.logo-link svg { width: 74px; height: auto; fill: currentColor; }

.main-nav { margin-left: auto; }

.main-nav__list { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }

.main-nav a {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--on-dark-soft);
  transition: color var(--ease);
}

.main-nav a:hover, .main-nav .current-menu-item > a:not([href*="#"]) { color: var(--foam); }

.main-nav .current-menu-item > a:not([href*="#"]) { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Language switch: plain codes */
.lang-switch { display: flex; border: 2px solid rgba(239, 238, 230, 0.3); }

.lang-switch a {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--on-dark-soft);
  padding: 0.3em 0.6em;
  transition: color var(--ease), background var(--ease);
}

.lang-switch a:hover { color: var(--foam); }

.lang-switch a[aria-current="true"] { background: var(--foam); color: var(--stout); }

.header-cta { padding: 0.55em 1.1em; font-size: 1.05rem; }

.nav-toggle { display: none; }

/* ---- Setlist rail ---- */
.setlist {
  position: fixed;
  left: 14px;
  top: 50%;
  z-index: 40;
  width: 150px;
  transform: translateY(-45%) rotate(-1.5deg);
  background: var(--foam);
  color: var(--stout);
  padding: 1.5rem 0.85rem 0.9rem;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}

.setlist::before {
  /* tape */
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 64px;
  height: 22px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(240, 160, 48, 0.75);
}

.setlist__title { font-family: var(--font-display); font-size: 1rem; margin: 0 0 0.5rem; }

.setlist ol { list-style: none; margin: 0; padding: 0; counter-reset: song; }

.setlist li { counter-increment: song; }

.setlist a {
  display: block;
  font-family: var(--font-marker);
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0.22rem 0;
  text-decoration: none;
  position: relative;
}

.setlist a::before { content: counter(song) ". "; color: var(--amber-deep); }

/* Marker strike, drawn left to right once a section has been played */
.setlist a::after {
  content: "";
  position: absolute;
  left: -2px;
  right: 6px;
  top: 52%;
  height: 2px;
  background: var(--stout);
  transform-origin: left center;
  transform: rotate(-3deg) scaleX(0);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1);
}

.setlist a.is-played { color: rgba(22, 17, 13, 0.45); }

.setlist a.is-played::after { transform: rotate(-3deg) scaleX(1); }

.setlist a.is-current { color: var(--bottle); }

/* No encore, on principle: never struck, an Irish green tick at the very end */
.setlist a.no-encore::after { display: none; }

.setlist a.no-encore.is-played { color: var(--stout); }

.setlist .icon--check {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.2em;
  vertical-align: -0.25em;
  color: var(--irish-green);
  transform: scale(0) rotate(-20deg);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.setlist a.is-done .icon--check { transform: scale(1) rotate(0); }

/* Narrow the content column so the setlist always fits beside it */
.has-setlist { --container: min(1120px, calc(100vw - 380px)); }

/* ---- Sticky booking bar (mobile) ---- */
.sticky-book {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--stout);
  border-top: 3px solid var(--amber);
  transform: translateY(110%);
  transition: transform var(--ease);
}

.sticky-book .btn { width: 100%; justify-content: center; }

.sticky-book.is-visible { transform: translateY(0); }

/* ---- Responsive ---- */
@media (max-width: 1279px) {
  .setlist { display: none; }
  .has-setlist { --container: 1120px; }
}

@media (max-width: 980px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--stout);
    border-bottom: 3px solid var(--amber);
    padding: 1.25rem var(--gutter) 1.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--ease), transform var(--ease), visibility 0s linear 0.3s;
    margin: 0;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--ease), transform var(--ease), visibility 0s; }
  .main-nav__list { flex-direction: column; gap: 0.9rem; }
  .main-nav a { font-size: 1.5rem; color: var(--foam); }
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    background: none;
    border: 2px solid rgba(239, 238, 230, 0.3);
    color: var(--foam);
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.35em 0.7em;
    cursor: pointer;
  }
  .header-cta { display: none; }
  .sticky-book { display: block; }
}

@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

@media (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}

@media (max-width: 420px) {
  .logo-link svg { width: 62px; }
  .lang-switch a { padding: 0.3em 0.45em; }
  .site-header .container { gap: 0.75rem; }
}