/**
 * @file
 * Region containers + grid helpers for the Aero Page Builder theme.
 *
 * Sidebar widths and the sidebar-layout breakpoint are driven by CSS
 * custom properties exposed in `apb-theme-vars.css` and overridable via
 * the theme settings form. Note that CSS media queries cannot consume
 * custom properties directly, so the default breakpoint (`1024px`) is
 * baked in; when the operator changes the breakpoint, the theme emits
 * an additional `@media` block inline from `preprocess_html` that
 * shadows the rules below.
 */

/* Default region wrapper - sub-themes should override per-region. */
.region {
  display: block;
  width: 100%;
}

.region--inner,
.layout-content {
  max-width: var(--apb-theme-content-max-width);
  margin-inline: auto;
  padding-inline: var(--apb-theme-content-padding);
}

.layout-container {
  display: block;
}

/* Header / Footer placeholders - sub-themes are expected to fully restyle. */
header.layout-header {
  background-color: var(--apb-theme-color-bg-alt);
  border-bottom: 1px solid var(--apb-theme-color-border);
}

footer.layout-footer {
  background-color: var(--apb-theme-color-bg-alt);
  border-top: 1px solid var(--apb-theme-color-border);
}

/* Sidebar wrappers. The <aside class="layout-sidebar"> elements in
 * page.html.twig wrap the region output so the grid always has exactly
 * the expected number of direct children (sidebar | main | sidebar). */
.layout-sidebar {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.layout-sidebar .region {
  padding: var(--apb-theme-spacing-md);
}

.layout-sidebar .block + .block {
  margin-top: var(--apb-theme-spacing-lg);
}

.layout-sidebar .block h2 {
  font-size: 1.05rem;
  font-weight: var(--apb-theme-font-weight-bold);
  margin: 0 0 var(--apb-theme-spacing-sm);
  color: var(--apb-theme-color-text);
}

.layout-sidebar ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.layout-sidebar ul.menu li {
  margin: 0;
  padding: 0;
}

.layout-sidebar ul.menu a {
  display: block;
  padding: var(--apb-theme-spacing-xxs) 0;
  color: var(--apb-theme-color-text);
  text-decoration: none;
  font-size: 0.95rem;
}

.layout-sidebar ul.menu a:hover,
.layout-sidebar ul.menu a:focus {
  color: var(--apb-theme-color-link);
}

.layout-sidebar ul.menu a.is-active {
  color: var(--apb-theme-color-accent);
  font-weight: var(--apb-theme-font-weight-bold);
}

.layout-sidebar ul.menu ul {
  padding-left: var(--apb-theme-spacing-md);
}

/* Sidebars side-by-side with content on wide screens.
 * `apb-theme-sidebar-breakpoint` (default 1024px) is the activation width.
 * When that setting is overridden, `preprocess_html` emits a matching
 * `@media` block inline so the new breakpoint takes effect.
 *
 * Grid children: .layout-sidebar--first | .layout-main | .layout-sidebar--second
 * The <a id="main-content"> skip link is inside .layout-main so it does not
 * create an extra grid item.
 */
@media (min-width: 1024px) {
  .layout-with-sidebars {
    display: grid;
    grid-template-columns:
      var(--apb-theme-sidebar-first-width)
      1fr
      var(--apb-theme-sidebar-second-width);
    gap: var(--apb-theme-spacing-lg);
  }
  .layout-with-sidebars--no-left {
    grid-template-columns: 1fr var(--apb-theme-sidebar-second-width);
  }
  .layout-with-sidebars--no-right {
    grid-template-columns: var(--apb-theme-sidebar-first-width) 1fr;
  }
  .layout-with-sidebars--no-sidebars {
    grid-template-columns: 1fr;
  }

  .layout-sidebar--first {
    border-right: 1px solid var(--apb-theme-color-border);
  }
  .layout-sidebar--second {
    border-left: 1px solid var(--apb-theme-color-border);
  }
}

/* Target placement drop zones. Empty IDs must exist in the DOM so
   apb-placement.js can move paragraphs; :empty hides unused slots. */
.apb-placement-region:empty {
  display: none;
}

.apb-placement-region--presentation:not(:empty) {
  max-width: var(--apb-theme-content-max-width);
  margin-inline: auto;
  padding: var(--apb-theme-spacing-xxl) var(--apb-theme-content-padding) var(--apb-theme-spacing-xl);
}

/* Mobile: sidebars stack below content. */
@media (max-width: 1023px) {
  .layout-sidebar {
    border-top: 1px solid var(--apb-theme-color-border);
    margin-top: var(--apb-theme-spacing-lg);
    padding-top: var(--apb-theme-spacing-lg);
  }
}