/* 
  Modern mobile-first layout (replaces old .container-based layout)
  - Fully semantic: uses <main>, <section>, <header>, <footer>
  - Responsive up to tablet width
  - Minimal, clean, and balanced spacing
*/

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Body layout */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
  /* line-height: 1.5; */
  color: #222;
}

/* Page wrapper (replaces .container) */
main {
  width: 100%;
  min-width: 320px;
  background-color: #fff;
  margin: 0.5rem 0;
  overflow: hidden;
}

/* Sections */
article, section {
  padding: 0.75rem 1rem;
}

/* Header and Footer */

body > header,
body > footer {
  width: 100%;
  min-width: 320px;
  background-color: #fff;
  margin: 0.5rem 0;
  overflow: hidden;
  padding: 0.75rem 1rem;
  /*
  background: var(--main-background, #fafafa);
  color: var(--main-color, #222);
  padding: var(--main-padding, 1em); */
}

main header,
main footer {
  all: unset;
  background: #f9f9f9;
  padding: 0.75rem 1rem;
  display: block; /* re-enable block flow */
}


/* Navigation or Menu area */
nav {
  background: #e9e9e9;
  padding: 0.75rem 1rem;
}

/* Advertisement or Aside */
aside {
  background: #fafafa;
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
}