/* app/static/css/base/global.css */
/* Base Layout System & Global Styles using CSS variables */

/* Reset & box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%; /* Ensure html takes full height for sticky footer */
  font-size: var(--font-size-root); /* Set root font size for rem units */
}

body {
  min-height: 100vh; /* Ensure body takes at least full viewport height */
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* Prevent horizontal scrollbar from full-bleed elements */
}

/* Media elements */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
}

/* Strip list bullets (typography.css re-styles for content contexts) */
ul,
ol {
  list-style: none;
}

/* Target the main content area by its ID from base.html */
main#main-content {
  /* Changed from main#content to match base.html */
  flex-grow: 1; /* Allow main content to grow and push footer down */
}

/* --- Container --- */
.container {
  width: 100%; /* Let container be full width */
  max-width: var(--container-max-width); /* Constrain by max-width */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-x); /* Use padding variable */
  padding-right: var(--container-padding-x); /* Use padding variable */
}

/* --- Generic Layout Grid (used within pages/layouts) --- */
/* This is a basic grid structure; specific layouts will define columns */
.layout {
  display: grid;
  gap: var(--spacing-md); /* Use spacing variable for gap (was --grid-gap) */
  margin-bottom: var(--spacing-xl); /* Use spacing variable */
  grid-template-columns: 1fr; /* Default to single column mobile-first */
}

/* Layout Sections */
.layout__section {
  width: 100%; /* Sections typically span full width of their grid area */
}

/* --- Common Card Grid --- */
/* Base styles for a card grid, columns defined in media queries or layout files */
.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* Default single column */
  gap: var(--spacing-md); /* Use spacing variable (was --grid-gap) */
}

/* --- Media Queries --- */

/* Large screens (desktop) */
@media (min-width: 1024px) {
  .card-grid--3-col-lg {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Page-Specific Layout Overrides --- */
/* TODO: Consider moving these rules to specific page CSS files (pages/*.css)
   or potentially layout CSS files if the structure is tied to the layout
   rather than just the page type. Leaving here for now during refactor. */

/* Hide sidebar and expand main content for specific static pages */
/* Uses page-* classes from body */
.page-search .layout--with-sidebar,
.page-about .layout--with-sidebar,
.page-privacy .layout--with-sidebar,
.page-contact .layout--with-sidebar {
  grid-template-columns: 1fr; /* Override to single column */
}

.page-search .layout__sidebar,
.page-about .layout__sidebar,
.page-privacy .layout__sidebar,
.page-contact .layout__sidebar {
  display: none; /* Hide the sidebar */
}

.page-search .layout__main,
.page-about .layout__main,
.page-privacy .layout__main,
.page-contact .layout__main {
  grid-column: 1 / -1; /* Ensure main content spans full width */
}

/* Constrain content width on specific pages */
.page-search .search-page-container, /* Assuming these containers exist in templates */
.page-about .static-page-container,
.page-privacy .static-page-container,
.page-contact .static-page-container {
  max-width: 750px; /* Example constraint */
  margin-left: auto;
  margin-right: auto;
}