/* Layout: site shell (header/nav/footer) + responsive hardening */

.shell-header {
  position: var(--layout-header-position, sticky);
  top: 0;
  z-index: var(--layout-z-sticky-header, 50);
}

.nav-container {
  position: relative;
  width: 100%;
  background-color: color-mix(in srgb, var(--theme-nav-desktop-bg) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: 0 2px 10px rgba(28, 27, 25, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

@supports (backdrop-filter: blur(12px)) {
  .nav-container {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
  }
}

.nav-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 40%);
  opacity: 0.65;
}

.nav-inner {
  position: relative;
  z-index: 1;
  max-width: var(--layout-content-max-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--layout-page-padding-inline, var(--space-4));
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.nav-toggler {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-step--1);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-toggler:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.nav-toggler__icon { flex-shrink: 0; }
.nav-toggler__logo {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.nav-brand-mobile {
  display: none;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: var(--font-size-step--1);
}
.nav-brand-mobile__img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}
.nav-brand-mobile__guesticon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  background: color-mix(in srgb, var(--theme-nav-mobile-bg) 70%, #fff);
  color: var(--theme-nav-mobile-menu-text);
}
.nav-brand-mobile__guesticon svg { width: 18px; height: 18px; }

.nav-home-logo {
  display: none;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: initial;
  vertical-align: baseline;
  border-radius: 0;
  border: 0;
  flex-shrink: 0;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
}
.nav-menu-item { position: relative; display: flex; align-items: center; align-self: center; }
.nav-menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--theme-nav-desktop-menu-text);
  font-family: var(--type-nav-main-font-family, var(--font-body));
  font-size: var(--type-nav-main-font-size);
  font-weight: var(--type-nav-main-font-weight);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.2;
  min-height: 44px;
}
.nav-menu-link__icon { flex-shrink: 0; opacity: 0.85; }
.nav-menu-link:hover,
.nav-menu-link:focus-visible { color: var(--theme-nav-desktop-menu-hover); }
.nav-menu-link.is-active,
.nav-menu-link[aria-current="page"] { color: var(--theme-nav-menu-active, var(--theme-nav-desktop-menu-active)) !important; font-weight: 600; }
.nav-menu-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.nav-menu-dropdown.is-active-branch > .nav-menu-link--trigger { color: var(--theme-nav-menu-active, var(--theme-nav-desktop-menu-active)) !important; }

.nav-menu-sub {
  display: none;
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: min(280px, 92vw);
  background: color-mix(in srgb, var(--theme-nav-desktop-dropdown-bg) 94%, transparent);
  border: 1px solid var(--theme-nav-desktop-dropdown-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-sm);
  z-index: var(--layout-z-dropdown, 60);
}

@supports (backdrop-filter: blur(10px)) {
  .nav-menu-sub {
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
  }
}

@media (min-width: 769px) {
  .nav-menu-dropdown:hover .nav-menu-sub,
  .nav-menu-dropdown:focus-within .nav-menu-sub {
    display: block;
  }
}

.nav-menu-sub-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--theme-nav-desktop-submenu-text);
  font-family: var(--type-nav-sub-font-family, var(--font-body));
  font-size: var(--type-nav-sub-font-size);
  font-weight: var(--type-nav-sub-font-weight);
}
.nav-menu-sub-link:hover,
.nav-menu-sub-link:focus-visible,
.nav-menu-sub-link.is-active {
  background: var(--theme-nav-desktop-submenu-hover-bg);
  color: var(--theme-nav-desktop-submenu-hover);
}
.nav-menu-sub-link.is-active { font-weight: 600; }

.nav-menu-item--mobile-only { display: none; }
.nav-menu-link--btnfull {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  border: 0;
  border-radius: 0;
}
.nav-menu-logout-form { margin: 0; padding: 0; }

.shell-footer {
  margin-top: 96px;
  padding-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--font-size-step--1);
  border-top: 0;
}
.shell-footer__links {
  max-width: var(--layout-content-max-width, 1200px);
  margin-inline: auto;
  padding: var(--space-6) var(--layout-page-padding-inline, var(--space-4)) var(--space-4);
}
.shell-footer__menu-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  justify-items: start;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .shell-footer__menu-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .shell-footer__menu-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.shell-footer__link {
  font-family: var(--type-footer-nav-font-family, var(--font-body));
  font-size: var(--type-footer-nav-font-size);
  font-weight: var(--type-footer-nav-font-weight);
  color: var(--theme-footer-link-color);
  text-decoration: none;
  font-size: var(--font-size-step--1);
  line-height: 1.4;
  text-align: left;
}
.shell-footer__link:hover { color: var(--color-shell-accent); }
.shell-footer__quote {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-5);
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  color: #819a91;
  line-height: var(--font-line-height-heading);
}
.shell-footer__contact-wrap {
  max-width: var(--layout-content-max-width, 1200px);
  margin-inline: auto;
  padding: 0 var(--layout-page-padding-inline, var(--space-4));
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  align-items: flex-start;
}
.shell-footer__contact { flex: 1 1 380px; max-width: 100%; }
.shell-footer__contact-line { margin: 0 0 var(--space-3); line-height: var(--font-line-height-body); }
.shell-footer__contact-line a { color: var(--color-primary); }
.shell-footer__legal { margin: 0; font-size: var(--font-size-step--2); color: var(--color-text-muted); }
.shell-footer__social { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.shell-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  text-decoration: none;
  color: #0d9ab8;
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1;
}
.shell-footer__social-link:hover { color: var(--color-shell-accent); border-color: color-mix(in srgb, var(--color-shell-accent) 40%, var(--color-border)); }
.shell-footer__social-link--muted { opacity: 0.75; }
.shell-footer__logo-box { text-align: center; margin-top: var(--space-4); padding: 0 var(--space-4); }
.shell-footer__logo-img { max-width: min(120px, 40%); height: auto; }
.shell-footer__copy { margin: var(--space-2) 0 0; text-align: center; font-size: var(--font-size-step--2); color: var(--color-text-muted); }
.shell-footer__copy-brand { font-family: var(--font-heading); font-weight: 600; }
.shell-footer__mobile-quick,
.shell-footer__mobile-fold,
.mobile-bottom-nav { display: none; }
.shell-footer__links--mobile { display: none; }
.mobile-bottom-nav__icon svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 1199px) {
  .nav-toggler { display: inline-flex !important; }
  .nav-brand-mobile { display: inline-flex !important; margin-left: auto; }
  .nav-header { display: flex !important; justify-content: space-between; }
  .nav-toggler__logo { display: none !important; }
  .nav-home-logo { display: none !important; }
  .nav-menu { display: none !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100%; }
  .nav-menu.is-open { display: flex !important; }
  .nav-menu-item { display: block !important; width: 100%; align-self: stretch; }
  .nav-menu-item--mobile-only { display: block !important; }
  .nav-menu-dropdown { display: block !important; }
  .nav-container { background-color: color-mix(in srgb, var(--theme-nav-mobile-bg) 88%, transparent); }
  .nav-menu-link { color: var(--theme-nav-mobile-menu-text); justify-content: flex-start; width: 100%; text-align: left; }
  .nav-menu-link:hover, .nav-menu-link:focus-visible { color: var(--theme-nav-mobile-menu-hover); }
  .nav-menu-link.is-active, .nav-menu-link[aria-current="page"] { color: var(--theme-nav-menu-active, var(--theme-nav-desktop-menu-active)) !important; }
  .nav-menu-dropdown.is-active-branch > .nav-menu-link--trigger { color: var(--theme-nav-menu-active, var(--theme-nav-desktop-menu-active)) !important; }
  .nav-menu-sub-link { color: var(--theme-nav-mobile-submenu-text); }
  .nav-menu-sub-link:hover, .nav-menu-sub-link:focus-visible, .nav-menu-sub-link.is-active { background: var(--theme-nav-mobile-submenu-hover-bg); color: var(--theme-nav-mobile-submenu-hover); }
  .nav-menu-sub {
    position: static;
    display: block !important;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: var(--theme-nav-mobile-dropdown-bg);
    border-radius: var(--radius-sm);
    margin: 0;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .22s ease, opacity .2s ease, transform .2s ease;
  }
  .nav-menu-dropdown.is-open .nav-menu-sub {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
    border: 1px solid var(--theme-nav-mobile-dropdown-border);
    padding: var(--space-1) 0;
    margin: var(--space-1) 0;
  }
  .nav-menu-dropdown + .nav-menu-item,
  .nav-menu-dropdown + .nav-menu-item--mobile-only {
    margin-top: 0;
  }

  .shell-footer__contact-wrap { flex-wrap: wrap; gap: var(--space-4); }
  .shell-footer__contact, .shell-footer__social { flex-basis: 100%; }
  .shell-footer__social { justify-content: flex-start; }
}

@media (max-width: 1199px) {
  .shell-footer {
    margin-top: 72px;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); /* reserve space for fixed bottom nav */
  }
  .shell-footer__mobile-quick {
    display: none;
    max-width: var(--layout-content-max-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--layout-page-padding-inline, var(--space-4)) var(--space-3);
  }
  .shell-footer__links--desktop { display: none; }
  .shell-footer__quote--desktop,
  .shell-footer__contact-wrap {
    display: none;
  }
  .shell-footer__mobile-fold {
    display: block;
    max-width: var(--layout-content-max-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--layout-page-padding-inline, var(--space-4));
  }
  .shell-footer__mobile-fold > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--theme-card-bg) 90%, #fff);
    color: var(--theme-card-text);
    font-size: var(--font-size-step--2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    min-height: 44px;
  }
  .shell-footer__mobile-fold > summary::-webkit-details-marker { display: none; }
  .shell-footer__mobile-fold > summary::after {
    content: "";
    position: absolute;
    right: var(--space-3);
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    opacity: 0.8;
    transition: transform .18s ease;
  }
  .shell-footer__mobile-fold[open] > summary::after {
    transform: translateY(-40%) rotate(-135deg);
  }
  .shell-footer__mobile-fold-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .shell-footer__mobile-fold-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .shell-footer__mobile-fold-label {
    font-size: var(--font-size-step--1);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.01em;
    padding-right: 20px;
  }
  .shell-footer__mobile-fold-body {
    margin-top: var(--space-2);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--theme-card-bg) 90%, #fff);
    padding: var(--space-3);
  }
  .shell-footer__links--mobile {
    display: block;
    margin: 0;
    padding: 0 0 var(--space-3);
  }
  .shell-footer__links--mobile .shell-footer__menu-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-3);
    column-gap: var(--space-4);
  }
  .shell-footer__links--mobile .shell-footer__link {
    font-size: var(--font-size-step--1);
  }
  .shell-footer__mobile-fold .shell-footer__quote {
    margin: 0;
    padding: 0 0 var(--space-2);
    text-align: left;
    font-size: var(--font-size-step-0);
  }
  .shell-footer__mobile-fold .shell-footer__contact-line,
  .shell-footer__mobile-fold .shell-footer__legal {
    margin: 0;
    font-size: var(--font-size-step--1);
  }
  .shell-footer__mobile-fold .shell-footer__contact-line { padding-bottom: var(--space-2); }
  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--layout-z-mobile-bottom, 70);
    border-top: 1px solid var(--theme-card-border);
    background: color-mix(in srgb, var(--theme-site-bg) 96%, #fff);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-bottom-nav__link {
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-decoration: none;
    color: var(--theme-body-text, var(--color-text));
    font-size: 0.72rem;
    font-weight: 500;
    position: relative;
    transition: color .18s ease, transform .18s ease;
  }
  .mobile-bottom-nav__icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
  }
  .mobile-bottom-nav__icon svg {
    width: 100%;
    height: 100%;
  }
  .mobile-bottom-nav__text {
    line-height: 1.1;
    letter-spacing: 0.005em;
  }
  .mobile-bottom-nav__link.is-active {
    color: var(--theme-nav-menu-active, var(--theme-nav-mobile-menu-active));
    background: color-mix(in srgb, var(--theme-card-raised-bg, var(--color-surface-raised)) 45%, transparent);
  }
  .mobile-bottom-nav__link.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--theme-nav-menu-active, var(--theme-nav-mobile-menu-active));
  }
  .mobile-bottom-nav__link:active {
    transform: translateY(1px);
  }
  .shell-footer__logo-box {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-sub { transition: none !important; }
  .mobile-bottom-nav__link { transition: none !important; }
  .shell-footer__mobile-fold > summary::after { transition: none !important; }
}

@media (min-width: 1200px) {
  .nav-toggler, .nav-brand-mobile, .nav-menu-item--mobile-only { display: none !important; }
  .nav-header { display: none !important; }
  .nav-inner { min-height: var(--header-height); display: flex; align-items: center; }
  .nav-menu { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100%; padding: 0 !important; }
  .nav-menu-item { display: list-item !important; }
  .nav-menu > .nav-menu-item:first-child > .nav-menu-link { padding-left: 0; }
  .nav-menu-sub { position: absolute !important; }
  .nav-home-logo { display: inline-block; }

  .shell-footer { margin-top: 104px; }
  .shell-footer__contact-wrap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; }
  .shell-footer__contact { grid-column: 1 / span 4; }
  .shell-footer__social { grid-column: 6; justify-content: flex-end; }
}

/* ── Board: app-like enter/leave between list ↔ thread (MPA + progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  html.board-nav-enter-prep #main {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(0.4px);
  }

  html.board-nav-enter-prep.board-nav-enter-ready #main {
    opacity: 1;
    transform: translateY(0);
    filter: none;
    transition:
      opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.28s ease;
  }

}

@media (prefers-reduced-motion: reduce) {
  html.board-nav-enter-prep #main,
  html.board-nav-enter-prep.board-nav-enter-ready #main {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none !important;
  }
}