/* ============================================================
   layout.css — structural layout (SMACSS: Layout)
   navigation_type = sidebar-left  |  dom_hierarchy = deep-nested
   layout_strategy = float-clearfix
   ============================================================ */

/* --- deep-nested shells --- */
.site-root { position: relative; }
.site-wrapper { position: relative; min-height: 100vh; }

/* --- fixed left sidebar (desktop) --- */
.main-header {
  position: fixed;
  left: 0; top: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--color-bg);
  border-right: 1px solid var(--color-line);
  z-index: 60;
  --mm-bg: var(--color-bg);
  --mm-text: var(--color-text);
  --mm-primary: var(--color-accent);
  --mm-overlay-bg: rgba(31,34,51,0.55);
}
.header-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md) 1.4em;
}
.brand-logo { display: inline-block; margin-bottom: var(--space-lg); }
.brand-logo img { width: 180px; }

/* nav becomes a vertical column inside the fixed sidebar on desktop */
@media (min-width: 768px) {
  .main-header [data-mm-menu] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .main-header [data-mm-menu] ul {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0.15em;
  }
}

/* --- main content offset by the sidebar --- */
.page-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  animation: pageSlideIn 0.5s ease;
}
.content-shell { width: 100%; }

/* airy centred container for text-heavy blocks */
.content-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: 1.4em;
  padding-right: 1.4em;
}
.content-wide {
  max-width: 75em;
  margin: 0 auto;
  padding-left: 1.4em;
  padding-right: 1.4em;
}

/* --- footer offset by sidebar --- */
.site-footer { margin-left: var(--sidebar-w); }
.footer-sticky-bar { left: var(--sidebar-w); }

/* --- float / clearfix column system (layout_strategy) --- */
.clearfix::after { content: ""; display: table; clear: both; }
.col-half  { float: left; width: 50%;    padding: 0 0.9em; }
.col-third { float: left; width: 33.333%; padding: 0 0.9em; }
@media (max-width: 768px) {
  .col-half, .col-third { float: none; width: 100%; padding: 0; }
}

/* --- page transition keyframe (animation_type) --- */
@keyframes pageSlideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Mobile: sidebar collapses into slide-top header bar
   ============================================================ */
@media (max-width: 767px) {
  .main-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.8em 1.2em;
  }
  .brand-logo { margin-bottom: 0; }
  .brand-logo img { width: 148px; }
  .page-main { margin-left: 0; }
  .site-footer { margin-left: 0; }
  .footer-sticky-bar { left: 0; }
}