/**
 * @file
 * Layout system for TDSpares D10 theme.
 *
 * Provides:
 * - .layout-container: max-width centred wrapper
 * - .layout-content-wrapper: flex row for two-column (content + sidebar) layouts
 * - .layout-content: main content area (grows to fill available space)
 * - .layout-sidebar: fixed-width sidebar (facets, category nav)
 *
 * Two-column layout is activated via body classes:
 *   .path-taxonomy         — category listing pages (/catalogue/...)
 *   .path-product-search   — product search results (/product-search)
 *
 * These body classes are added automatically by Drupal's html.html.twig
 * based on the current path. No extra preprocess hook needed.
 *
 * Single-column pages (product detail, cart, checkout, etc.) use only
 * .layout-container without the sidebar structure.
 *
 * Mobile-first: sidebar stacks above content below 768px.
 */

/* ==========================================================================
   Page background — tiling technical diagram pattern behind content area
   ========================================================================== */

.dialog-off-canvas-main-canvas {
  background: var(--td-color-bg-subtle) url(../../images/background_tile.jpg) repeat fixed;
}

/* ==========================================================================
   Container
   ========================================================================== */

.layout-container {
  max-width: var(--td-container-width-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--td-color-text);
  background-color: var(--td-color-bg);
  box-shadow: var(--td-shadow-page);
}


/* ==========================================================================
   Two-column wrapper (mobile-first: single column by default)
   ========================================================================== */

main[role="main"] {
  flex: 1 0 auto;
}

.layout-content-wrapper {
  display: flex;
  flex-direction: column;               /* Stacked on mobile */
  gap: var(--td-gutter);
  width: 100%;
}

/* Two-column layout activated on taxonomy and search paths */
.path-taxonomy .layout-content-wrapper,
.path-search .layout-content-wrapper {
  flex-direction: column;               /* Mobile: still stacked */
}


/* ==========================================================================
   Content area
   ========================================================================== */

.layout-content {
  flex: 1 1 auto;
  min-width: 0;                         /* Prevents flex blowout with long content */
  padding-left: var(--td-container-padding);
  padding-right: var(--td-container-padding);
  margin: var(--td-space-xl) var(--td-space-md);
}


/* ==========================================================================
   Sidebar
   ========================================================================== */

.layout-sidebar {
  flex: 0 0 auto;
  width: 100%;                          /* Full width on mobile */
}


/* ==========================================================================
   Desktop: two-column layout (768px and up)
   ========================================================================== */

@media (min-width: 768px) {

  /* Sidebar-enabled paths switch to a horizontal flex row */
  .path-taxonomy .layout-content-wrapper,
  .path-product-search .layout-content-wrapper {
    flex-direction: row;
    align-items: flex-start;
  }

  /* On desktop, sidebar gets its fixed width and content fills the rest */
  .path-taxonomy .layout-sidebar,
  .path-product-search .layout-sidebar {
    width: var(--td-sidebar-width);     /* 220px */
    flex-shrink: 0;
    /* Sidebar sits to the left; content follows on the right */
    order: -1;
  }

  .path-taxonomy .layout-content,
  .path-product-search .layout-content {
    flex: 1 1 auto;
    min-width: 0;
  }

}


/* ==========================================================================
   Utility: full-bleed section (for homepage heroes, promo banners)
   ========================================================================== */

.layout-full-bleed {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Inner wrapper for full-bleed sections that still need max-width content */
.layout-full-bleed__inner {
  max-width: var(--td-container-width-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--td-container-padding);
  padding-right: var(--td-container-padding);
}