/* PRJ-004 event site layout (EMS-08).
   Load after quartz.css. Uses Quartz tokens only; no external requests.
   Layouts (spec Section 9.3):
     below 48rem     phone: top bar, menu button, full-height menu panel, full-width cards
     48rem to 64rem  tablet: same pattern, wider gutters and cards
     64rem and up    laptop: persistent left navigation panel, capped content width */

/* ---------- Skip link (keyboard users) ---------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--qds-theme-control-background-default);
  color: var(--qds-theme-text-standard);
  border-radius: var(--qds-control-border-radius);
}
.skip-link:focus { top: 0.5rem; }

/* ---------- Top bar (phone and tablet) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--qds-control-standard-height);
  padding: 0 0.5rem 0 var(--qds-main-subsection-padding-start);
  background: var(--qds-theme-navigation-background);
  box-shadow: var(--qds-navigation-elevation);
}
.topbar__title {
  margin: 0;
  font: var(--qds-navigation-subsection-title-emphasized);
  color: var(--qds-theme-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Menu and close buttons ---------- */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: none;
  min-height: var(--qds-control-standard-height);
  min-width: var(--qds-control-standard-height);
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--qds-control-border-radius);
  background: transparent;
  color: var(--qds-theme-text-standard);
  font: var(--qds-control-standard-text);
  cursor: pointer;
}
.icon-button:hover { background: var(--qds-theme-interactive-background-hover); }
.icon-button:active { background: var(--qds-theme-interactive-background-pressed); }
.icon-button svg { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- Navigation panel ---------- */
.site-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(100%, 24rem);
  overflow-y: auto;
  background: var(--qds-theme-navigation-background);
  box-shadow: var(--qds-navigation-elevation);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-nav.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease, visibility 0s;
}
.site-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--qds-control-standard-height);
  padding: 0.5rem 0.5rem 0.5rem var(--qds-main-subsection-padding-start);
  border-bottom: 1px solid var(--qds-theme-divider-subdued);
}
.site-nav__title {
  margin: 0;
  font: var(--qds-navigation-subsection-title-emphasized);
  color: var(--qds-theme-title);
}
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--qds-nav-element-standard-height);
  padding: 0 var(--qds-main-subsection-padding-start);
  color: var(--qds-theme-text-standard);
  font: var(--qds-nav-element-standard-title);
  text-decoration: none;
}
.site-nav__link:hover {
  background: var(--qds-theme-interactive-background-hover);
  color: var(--qds-theme-text-standard);
}
.site-nav__link[aria-current="page"] {
  background: var(--qds-theme-interactive-background-selected);
  font: var(--qds-nav-element-standard-title-emphasized);
}
.site-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: var(--qds-signature-line-connection-width);
  border-radius: var(--qds-signature-line-connection-cap-radius);
  background: var(--qds-theme-signature-color-default);
}
.site-nav__link:focus-visible { outline-offset: -4px; }

/* Dimmed page behind the open menu (visible at tablet widths, where the panel is narrower than the screen) */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--qds-theme-popup-overlay-background);
}
.nav-backdrop[hidden] { display: none; }

/* Stop the page scrolling behind the open menu */
body.nav-locked { overflow: hidden; }

.site-nav__signout {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* ---------- Main content and cards ---------- */
.qds-main {
  display: flex;
  flex-direction: column;
  gap: var(--qds-main-section-gap-children-related);
  padding: var(--qds-main-subsection-padding-top) var(--qds-main-subsection-padding-start);
}
.qds-main:focus { outline: none; }
.qds-main > h1 { margin: 0; }
.qds-main-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--qds-main-subsection-gap-children-related);
  padding: var(--qds-main-subsection-padding-top) var(--qds-main-subsection-padding-end)
           var(--qds-main-subsection-padding-bottom) var(--qds-main-subsection-padding-start);
  background: var(--qds-theme-main-subsection-standard-background);
  border-radius: var(--qds-main-subsection-border-radius);
  box-shadow: var(--qds-main-subsection-elevation);
}
.qds-main-subsection > * { margin: 0; }
.qds-main-subsection h2 { font: var(--qds-main-subsection-title-emphasized); color: var(--qds-theme-title); }

/* Layout label on the check page: only the line for the current width shows */
.layout-label { display: none; }
.layout-label--phone { display: block; }

/* ---------- Tablet: 48rem to 64rem ---------- */
@media (min-width: 48rem) {
  .qds-main { padding: 1.5rem 2rem; }
  .layout-label--phone { display: none; }
  .layout-label--tablet { display: block; }
}

/* ---------- Laptop: 64rem and up ---------- */
@media (min-width: 64rem) {
  .app {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    min-height: 100vh;
  }
  .topbar, .nav-close, .nav-backdrop { display: none !important; }
  .site-nav {
    position: sticky;
    top: 0;
    width: auto;
    height: 100vh;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .site-nav__header { padding: 1.25rem var(--qds-main-subsection-padding-start); }
  .qds-main {
    width: 100%;
    max-width: 60rem;
    padding: var(--qds-main-padding-vertical) var(--qds-main-padding-horizontal);
  }
  body.nav-locked { overflow: auto; }
  .layout-label--tablet { display: none; }
  .layout-label--laptop { display: block; }
}