/* =========================================================
   KMS Theme — layout.css
   Page grid with persistent left-side navigation.
   ========================================================= */

.kms-app {
  display: grid;
  grid-template-columns: var(--kms-sidebar-width) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header   header"
    "sidebar  main"
    "footer   footer";
  min-height: 100vh;
}

/* If a right-rail region is rendered, switch to a 3-column grid */
.kms-app:has(.kms-sidebar-second) {
  grid-template-columns: var(--kms-sidebar-width) 1fr 280px;
  grid-template-areas:
    "header   header  header"
    "sidebar  main    secondary"
    "footer   footer  footer";
}

.kms-header {
  grid-area: header;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kms-space-3) var(--kms-space-4);
  padding: var(--kms-space-2) var(--kms-space-4);
  min-height: var(--kms-header-height);
  background: var(--kms-color-secondary);
  color: #fff;
  border-bottom: 3px solid var(--kms-color-primary);
}

.kms-header a {
  color: #fff;
  text-decoration: none;
}

/* Site branding block (logo + site name + slogan).
   Targets both the canonical class and the ID-derived selector,
   since standalone themes don't always emit .block-system-branding-block. */
.kms-header [id^="block-"][id$="-site-branding"],
.kms-header .block-system-branding-block {
  display: flex;
  align-items: flex-start;
  gap: var(--kms-space-4);
  flex-wrap: wrap;
}

.kms-header [id^="block-"][id$="-site-branding"] > h2 {
  display: none;
}

.kms-header [id^="block-"][id$="-site-branding"] img,
.kms-header .block-system-branding-block img {
  height: var(--kms-logo-height);
  width: auto;
  display: block;
}

.kms-header [id^="block-"][id$="-site-branding"] a,
.kms-header [id^="block-"][id$="-site-branding"] .site-name,
.kms-header .block-system-branding-block .site-name,
.kms-header .block-system-branding-block .site-name a {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}

.kms-header [id^="block-"][id$="-site-branding"] .site-slogan,
.kms-header .block-system-branding-block .site-slogan {
  font-size: 12px;
  font-weight: normal;
  opacity: 0.85;
}

.kms-sidebar {
  grid-area: sidebar;
  background: var(--kms-color-surface);
  border-right: 1px solid var(--kms-color-border);
  padding: var(--kms-space-3) 0;
  overflow-y: auto;
}

.kms-sidebar .region {
  padding: 0 var(--kms-space-3);
}

.kms-main {
  grid-area: main;
  padding: var(--kms-space-4) var(--kms-space-5);
  background: var(--kms-color-bg);
  outline: none;
  min-width: 0; /* allow content to shrink in grid */
}

.kms-content {
  max-width: 1100px;
}

.kms-sidebar-second {
  grid-area: secondary;
  padding: var(--kms-space-4);
  background: var(--kms-color-surface);
  border-left: 1px solid var(--kms-color-border);
}

.kms-footer {
  grid-area: footer;
  padding: var(--kms-space-3) var(--kms-space-5);
  background: #f0eee9;
  border-top: 1px solid var(--kms-color-border);
  font-size: var(--kms-font-size-sm);
  color: var(--kms-color-text-muted);
}

/* Region defaults */
.region {
  margin-bottom: var(--kms-space-3);
}
.region:last-child {
  margin-bottom: 0;
}

/* Responsive collapse: stack on narrow screens */
@media (max-width: 900px) {
  .kms-app,
  .kms-app:has(.kms-sidebar-second) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "header"
      "sidebar"
      "secondary"
      "main"
      "footer";
  }
  .kms-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--kms-color-border);
  }
  .kms-sidebar-second {
    border-left: none;
    border-bottom: 1px solid var(--kms-color-border);
  }
}