/**
 * @file
 * Core page layout and grid systems for Wares Point Theme.
 * Modernized page-width system: Compact (1120px), Standard (1280px), Wide (1536px).
 * 100% responsive on all screen sizes with accessible touch targets.
 */

html,
body {
  overflow-x: hidden;
  width: 100%;
}

/* Page shell container */
.container {
  width: 100%;
  max-width: var(--wp-selected-width, var(--wp-width-standard));
  margin-inline: auto;
  padding-inline: var(--wp-page-gutter);
}

/* Container variant for wide decorative banners if needed */
.container--wide {
  max-width: var(--wp-width-wide);
}

/* Skip link for screen readers & keyboard navigation */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--wp-space-md);
  background-color: var(--wp-brown-deep);
  color: var(--wp-white);
  padding: var(--wp-space-sm) var(--wp-space-md);
  border-radius: var(--wp-radius-sm);
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  transition: top var(--wp-transition-fast);
}

.skip-link:focus {
  top: var(--wp-space-md);
}

/* Page wrapper */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.main-content-wrapper {
  flex: 1 0 auto;
  padding-top: var(--wp-space-xl);
  padding-bottom: var(--wp-space-3xl);
}

@media (min-width: 1200px) {
  .main-content-wrapper {
    padding-top: var(--wp-space-2xl);
    padding-bottom: 2.5rem;
  }
}

/* Ensure empty regions never take up space */
.sidebar:empty,
.sidebar-left:empty,
.sidebar-right:empty,
.highlighted-region:empty,
.content-header-region:empty,
.breadcrumb-container:empty,
.pre-footer-region:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ==========================================================================
   Main Content & Sidebars Layout Structure
   ========================================================================== */
.layout-content-grid {
  display: flex;
  flex-direction: column;
  gap: var(--wp-space-xl);
  width: 100%;
}

/* Main content column */
.layout-main-column {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  min-width: 0; /* Prevents grid blowout from wide content/code blocks */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Drupal alerts & status messages at top of main content */
.highlighted-region {
  margin-bottom: var(--wp-space-md);
  width: 100%;
}

.highlighted-region .messages-list {
  margin-top: 0;
  margin-bottom: var(--wp-space-md);
}

.highlighted-region .messages:last-child {
  margin-bottom: 0;
}

/* Mobile & Tablet Ordering (<= 900px):
   Main content appears first, sidebars collapse neatly beneath */
@media (max-width: 900px) {
  .layout-content-grid {
    display: flex;
    flex-direction: column;
    gap: var(--wp-space-xl);
  }

  .layout-main-column {
    order: 1;
    width: 100%;
  }

  .sidebar-left {
    order: 2;
    width: 100%;
  }

  .sidebar-right {
    order: 3;
    width: 100%;
  }
}

/* Desktop Grid (> 900px): Sidebars placed respectfully beside main content */
@media (min-width: 901px) {
  .layout-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "main";
    align-items: start;
    width: 100%;
  }

  .layout-main-column {
    grid-area: main;
    order: 0;
  }

  .sidebar-left {
    grid-area: sidebar-left;
    order: 0;
  }

  .sidebar-right {
    grid-area: sidebar-right;
    order: 0;
  }

  /* No sidebars: Full 1-column layout taking 100% of the container */
  .layout-content-grid.layout--no-sidebars,
  .layout-content-grid:not(:has(.sidebar)) {
    display: block;
    width: 100%;
  }

  .layout-content-grid.layout--no-sidebars .layout-main-column,
  .layout-content-grid:not(:has(.sidebar)) .layout-main-column {
    width: 100%;
    max-width: 100%;
  }

  /* -------------------------------------------------------------
     Sidebar Grid Layouts: Evenly Spaced & Respective Set Widths
     ------------------------------------------------------------- */

  /* One Right Sidebar: Content takes 1fr, sidebar takes set width */
  .layout-content-grid.layout--sidebar-right:not(.layout--sidebar-left),
  .layout-content-grid:has(.sidebar-right):not(:has(.sidebar-left)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wp-sidebar-width-right, var(--wp-sidebar-width-single, 280px));
    grid-template-areas: "main sidebar-right";
    gap: var(--wp-layout-gap, 24px);
    align-items: start;
  }

  /* One Left Sidebar: Sidebar takes set width, content takes 1fr */
  .layout-content-grid.layout--sidebar-left:not(.layout--sidebar-right),
  .layout-content-grid:has(.sidebar-left):not(:has(.sidebar-right)) {
    display: grid;
    grid-template-columns: var(--wp-sidebar-width-left, var(--wp-sidebar-width-single, 280px)) minmax(0, 1fr);
    grid-template-areas: "sidebar-left main";
    gap: var(--wp-layout-gap, 24px);
    align-items: start;
  }

  /* Two Sidebars: Evenly spaced and balanced set width respective to content */
  .layout-content-grid.layout--two-sidebars,
  .layout-content-grid:has(.sidebar-left):has(.sidebar-right) {
    display: grid;
    grid-template-columns: var(--wp-sidebar-width-left, var(--wp-sidebar-width-dual, 260px)) minmax(0, 1fr) var(--wp-sidebar-width-right, var(--wp-sidebar-width-dual, 260px));
    grid-template-areas: "sidebar-left main sidebar-right";
    gap: var(--wp-layout-gap, 24px);
    align-items: start;
  }

  /* Responsive adaptation for smaller desktop / tablet landscape (901px - 1100px) */
  @media (max-width: 1100px) {
    .layout-content-grid.layout--two-sidebars,
    .layout-content-grid:has(.sidebar-left):has(.sidebar-right) {
      grid-template-columns: 220px minmax(0, 1fr) 220px;
      gap: 16px;
    }
  }
}

/* ==========================================================================
   Sub Content Region (Horizontal on Desktop, Vertical on Mobile)
   Evenly spaced blocks below the content & sidebars
   ========================================================================== */

.sub-content-region {
  margin-top: var(--wp-space-2xl, 1.5rem);
  width: 100%;
}

.sub-content-region:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile & Tablet (< 768px): Vertical Stack */
@media (max-width: 767.98px) {
  .sub-content-region {
    display: flex;
    flex-direction: column;
    gap: var(--wp-space-md, 8px);
    margin-top: var(--wp-space-xl, 1rem);
  }

  .sub-content-region > .block,
  .sub-content-region .region > .block {
    width: 100%;
    margin-bottom: 0;
  }
}

/* Desktop (>= 768px): Evenly Spaced Horizontal Grid */
@media (min-width: 768px) {
  .sub-content-region,
  .sub-content-region .region {
    display: grid;
    grid-template-columns: var(--wp-sub-content-grid-cols, repeat(auto-fit, minmax(280px, 1fr)));
    gap: var(--wp-layout-gap, 20px);
    align-items: stretch;
    width: 100%;
  }

  .sub-content-region > .block,
  .sub-content-region .region > .block {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
  }

  .sub-content-region .block__content {
    flex: 1 1 auto;
  }
}