/* layouts/app/app-layout.css
 * v1.1.3.359 — Shared layout primitives для всіх layouts.
 *
 * Цей файл містить layout primitives які потрібні ВСІМ layouts:
 *   - z-index ієрархія (`:root` variables)
 *   - `.app-page-wrapper` (generic wrapper between header і footer)
 *   - `.container` (generic width-constrained main)
 *   - Skip-to-content (a11y)
 *
 * v359 рефакторинг: цей файл тепер завантажується ОДИН РАЗ для default
 * layout. Інші layouts (messages/auth/arena/admin/profile/communities/listings)
 * мають свої окремі CSS files, ЯКІ ВЖЕ МІСТЯТЬ свої wrappers/containers
 * (наприклад messages-layout.css має .container--messages з flex chain).
 *
 * Що НЕ тут:
 *   - Header стилі     → widgets/main/header/header.css
 *   - Footer стилі     → widgets/main/footer/footer.css
 *   - Bottom nav       → widgets/main/footer/footer.css (.kp-mobile-bottom-nav)
 *   - Right slider     → widgets/main/right_slider/right_slider.css
 *   - Toast            → widgets/main/toast/toast.css
 *   - Cookie banner    → widgets/cookies/banner/banner.css
 *   - Body reset/typo  → base.css
 *   - Tokens           → tokens.css
 */

/* ─── Layout layers (z-index ієрархія) ─────────────────────────────────────── */
:root {
  --kp-z-content: 1;
  --kp-z-cookies: 1100;
  --kp-z-header: 1200;
  --kp-z-toast: 1300;
  --kp-z-modal: 1400;
  --kp-z-lang-popup: 1500;
}

/* ─── Page wrapper (між header і footer) ──────────────────────────────────── */
.app-page-wrapper {
  position: relative;
  z-index: var(--kp-z-content);
  /* v1.1.3.781: 100vh fallback для старих браузерів; 100dvh primary для сучасних
   * (Chrome 108+, Safari 15.4+, Firefox 101+). Mobile browser toolbars міняють
   * visible viewport — 100vh створює фантомну висоту коли toolbar collapsed,
   * викликаючи overscroll glitch. 100dvh динамічно follows actual viewport. */
  min-height: calc(100vh - var(--kp-header-h, 60px) - var(--kp-footer-h, 80px));
  min-height: calc(100dvh - var(--kp-header-h, 60px) - var(--kp-footer-h, 80px));
  display: flex;
  flex-direction: column;
}

/* ─── Main container (стандартний для більшості сторінок) ─────────────────── */
.container {
  flex: 1;
  width: 100%;
  max-width: var(--n-content-w, 720px);
  margin-inline: auto;
  padding: var(--n-s-5, 20px) var(--n-s-3, 16px);
}

/* Logged-in users with bottom nav — додаємо padding-bottom щоб контент
   не ховався під фіксованою mobile nav */
@media (max-width: 768px) {
  body[data-kp-mobile-bottom-nav="1"] .app-page-wrapper {
    padding-bottom: var(--kp-bottom-nav-h, 64px);
  }
}

/* ─── Skip-to-content (a11y) ───────────────────────────────────────────────── */
.kp-skip-to-content {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: var(--kp-z-modal);
  padding: 8px 14px;
  background: var(--n-accent);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .2s var(--ease);
}

.kp-skip-to-content:focus {
  top: 0;
}