/* =========================================================
  FILE         : /public/css/widelayout.css
  PURPOSE      : Desktop layout using 12-column grid + Brand Theme
  AUTHOR       : Oluwasegun Dayo Ogunsola
  VERSION      : 2.0.0
  UPDATED      : 2025-10-12
  ========================================================= */

/* ---------------- BRAND & THEME VARIABLES ---------------- */
:root {
  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Colors */
  --brand-primary: #0B6E60;
  --brand-accent: #F29E4C;
  --surface: #ffffff;
  --bg: #FAFBFB;
  --text: #2E2E2E;
  --muted: #6C757D;
  --footer-bg: #081018;
  --footer-text: #BFC9D2;

  /* Layout */
  --container-width: 1200px;
  --gap: 1rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-soft: 0 8px 20px rgba(11,110,96,0.06);
  --easing: cubic-bezier(.2,.9,.3,1);

  /* Icons */
  --icon-size: 20px;
  --icon-bg: rgba(255,255,255,0.06);
  --icon-fg: #fff;

  /* Typography */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* ---------------- BASE RESET & TYPOGRAPHY ---------------- */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-family);
  background-color: #f9f9f9;
  color: var(--text);
  line-height: 1.6;
}

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

/* Header and Footer span full width */
.header-row,
.footer-row {
  grid-column: 1 / -1;
  padding: var(--space-lg);
  background: #fff;
  border-bottom: 1px solid #ddd;
}

/* Main grid: 12-column logic */
.main-grid {
  display: grid;
  grid-template-columns: 2fr 7fr 3fr;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: #fff;
}

/* Left Sidebar */
.sidebar-left {
  background: #f0f4f8;
  padding: var(--space-md);
  border-right: 1px solid #ddd;
	margin-left: var(--space-md);
}

/* Middle Column */
.middle-row, 
.center-column {
  padding: var(--space-md);
}

/* Right Sidebar */
.sidebar-right {
  background: #f0f4f8;
  padding: var(--space-md);
  border-left: 1px solid #ddd;
}

/* Footer */
.footer-row {
  text-align: center;
  background: #fff;
  border-top: 1px solid #ddd;
  padding: var(--space-md);
}