/*
  site_shell.css
  Structural/layout styles shared across ALL pages.
  - Keeps colors/theme controlled via CSS variables (set by active theme CSS).
  - Avoids hardcoding theme colors so Themes + Menu editors keep working.
*/

/* Make sizing predictable */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

/* Provide sensible defaults using the theme variables */
body {
  background: var(--background, #f4f4f4);
  color: var(--color, #222);
}

/* Unified page container primitives */
:where(.content-inner, .container, .admin-container) {
  width: min(1400px, 95vw);
  margin-left: auto;
  margin-right: auto;
}

.content-inner {
  padding: 20px;
}

/* Some older pages wrap content in `.container` without padding */
.container {
  padding: 20px;
}

/* Top-layout pages: keep content aligned with the banner/header width */
.layout-wrapper.top-layout :where(.content-inner, .container, .admin-container) {
  width: var(--shell-width, 95vw);
  max-width: var(--shell-max-width, 1400px);
}

/* Section spacing that works for both content + admin */
:where(.content-inner, .container, .admin-container) h1 {
  margin: 0 0 12px;
}

:where(.content-inner, .container, .admin-container) h2 {
  margin: 18px 0 10px;
}

:where(.content-inner, .container, .admin-container) p {
  margin: 0 0 10px;
}

/* Make common UI elements behave consistently */
img { max-width: 100%; height: auto; }

input, select, textarea { max-width: 100%; }

/* Improve readability for large forms in admin pages */
body.is-admin :where(input, select, textarea) {
  font-size: 14px;
}

/* Responsive padding */
@media (max-width: 768px) {
  .content-inner, .container {
    padding: 12px;
  }
}