/* ======================
FILE NAME   : /public/css/static-layout.css
MODULE      : Static Page Grid Layout
AUTHOR      : Oluwasegun Dayo Ogunsola
VERSION     : 1.0.1
DESCRIPTION : Full-height layout with header and footer pinned
============= */

/* ---------------- BASE RESET ---------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #081018;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------------- PAGE STRUCTURE ---------------- */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* ---------------- HEADER ---------------- */
.header-row {
  flex-shrink: 0;
  width: 100%;
}

/* ---------------- MAIN CONTENT ---------------- */
.main-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: #ffffff;
}

/* ---------------- STATIC PAGE ROW ---------------- */
.static-page-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}

/* ---------------- EMPTY COLUMNS ---------------- */
.empty-col {
  flex: 0 0 auto;
  width: 16.6667%; /* 2 of 12 columns */
}

/* ---------------- CONTENT AREA ---------------- */
.content-area {
  flex: 0 0 auto;
  width: 66.6667%; /* 8 of 12 columns */
  padding: 2rem;
  display: block;
  position: relative;
  text-align: left;
}

.content-area h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.content-area p {
  font-size: 1rem;
  color: #333;
}

/* ---------------- FOOTER ---------------- */
.footer-row {
  flex-shrink: 0;
  width: 100%;
  background: #0a4f43;
  color: #ffffff;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9rem;
}

/* ---------------- RESPONSIVE ---------------- */
@media screen and (max-width: 768px) {
  .main-content {
    padding: 1rem;
  }

  .content-area {
    padding: 0.5rem;
  }
}