/* layout.css - Site-wide layout helpers (updated for simplified header) */

/* Keep content below the fixed header */
.page { 
  padding-top: var(--header-h); 
}

/* Adjust for scrolled header height when needed */
@media (min-width: 1024px) {
  .page.scrolled { 
    padding-top: var(--header-h-scrolled); 
  }
}

/* Center content on the same grid used by header */
.container {
  max-width: var(--container-max);
  padding-inline: var(--container-pad);
  margin-inline: auto;
}

/* Optional width helpers */
.wide { 
  --container-max: 1320px; 
}

.narrow { 
  --container-max: 960px; 
}

/* Ensure smooth transitions for layout changes */
.container,
.page {
  transition: padding 200ms ease;
}