/* ============================================================
   WellServe — layout.css
   Structural layout only: containers, section rhythm, grid,
   and the skeleton of header/footer. Visual styling of the
   things inside them lives in components.css.
   ============================================================ */

/* ---------- Skip link (accessibility) ---------- */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 6px 0;
}
.skip-link:focus{
  left: 0;
  top: 0;
}

/* ---------- Containers ---------- */
.container{ width: min(var(--max-lg), 92%); margin: 0 auto; }
.container-sm{ width: min(var(--max-sm), 92%); margin: 0 auto; }
.container-md{ width: min(var(--max-md), 92%); margin: 0 auto; }
.container-lg{ width: min(var(--max-lg), 92%); margin: 0 auto; }

/* ---------- Section rhythm ---------- */
section{ padding: var(--space-9) 0; }
section.tight{ padding: var(--space-7) 0; }
.section-header{ max-width: 680px; margin-bottom: 2.6rem; }
.section-head{ max-width: 680px; margin-bottom: 2.6rem; } /* legacy alias */

.section-light, .bg-paper{ background: var(--color-surface); }
.section-dark, .bg-navy{ background: var(--navy); color: #fff; }
.section-dark h2, .section-dark h3, .section-dark h1, .bg-navy h2, .bg-navy h3, .bg-navy h1{ color: #fff; }
.section-dark p, .bg-navy p{ color: rgba(255,255,255,0.75); }
.section-alt{ background: var(--color-background); }

/* ---------- Grid system ---------- */
.grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-5); }
.grid.cols-2{ grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.grid.cols-4{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }

/* ---------- Header / nav skeleton ---------- */
header{
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav{ display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
nav.links{ display: flex; align-items: center; gap: 28px; }
.nav-toggle{ display: none; }

/* ---------- Footer skeleton ---------- */
footer .container{ max-width: var(--max-lg); }
.foot-grid{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-7); }
.foot-cols{ display: flex; gap: 64px; flex-wrap: wrap; }
.foot-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; }

/* ---------- Product page layout ---------- */
.product-grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }

/* ---------- Category block layout (Knowledge Centre) ---------- */
.cat-block{ margin-bottom: 3.2rem; }
.cat-head{ display: flex; align-items: baseline; gap: 14px; margin-bottom: 1.4rem; padding-bottom: .6rem; }