/* ============================================================ 
Agile AI University
Visual Refinement Layer
--------------------------------------------------------------

File: refinement.css
Version: 1.4.8
Date: 2026-03-21
Status: Governance Locked (Additive Layer Only)

--------------------------------------------------------------

PURPOSE
Controlled visual refinements layered on top of the
canonical design system (site.css).

ARCHITECTURAL PRINCIPLE

site.css       = Canonical Design System (Locked)
refinement.css = Controlled Additive Overlay (Reversible)

This file MUST remain additive and must never modify the
structural layout system defined in site.css.

--------------------------------------------------------------

GOVERNANCE RULES

• Must load AFTER site.css
• Strictly additive and removable
• No layout grid overrides
• No container width overrides
• No structural positioning overrides
• No theme engine modification
• No JS behavior interference
• No header/footer injection interference
• No cross-surface coupling assumptions

--------------------------------------------------------------

SYSTEM INTEGRITY RULE

• All updates must be FULL-FILE replacements
• Version header must increment on every change
• Prevents cascade drift and governance regression

Removing this file must safely revert the system to
canonical site.css behaviour.

--------------------------------------------------------------

CHANGELOG

v1.4.8
• Introduced Knowledge page refinement layer
• Added spacing and readability for knowledge-block sections
• Improved conceptual vs specification visual separation
• Fully additive — no layout or system overrides

v1.4.7
• Fixed dark-mode scoping so styles do not affect light theme
• Removed forced min-height rule causing large whitespace
• Corrected footer divider visibility across themes

v1.4.6
• Added theme-aware footer divider
• Added academic typography readability refinement

v1.4.5
• Added short-page vertical balance rule (later corrected)

v1.4.4
• Corrected dark-theme scoping for surfaces and typography

v1.4.3
• Removed large-screen main width constraint

============================================================ */


/* ============================================================
SECTION 1 — Global Anchor Normalization
============================================================ */

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}


/* ============================================================
SECTION 2 — Inline Content Links
============================================================ */

p a,
li a {
  border-bottom: 1px solid rgba(0,0,0,0.25);
  padding-bottom: 1px;
}

p a:hover,
li a:hover {
  opacity: 0.75;
  border-bottom-color: rgba(0,0,0,0.6);
}

/* Dark theme link refinement */

:root[data-theme="dark"] p a,
:root[data-theme="dark"] li a {
  border-bottom-color: rgba(255,255,255,0.35);
}

:root[data-theme="dark"] p a:hover,
:root[data-theme="dark"] li a:hover {
  border-bottom-color: rgba(255,255,255,0.7);
}


/* ============================================================
SECTION 3 — CTA Style Anchors
============================================================ */

a.cta,
a.primary-action {
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

a.cta:hover,
a.primary-action:hover {
  opacity: 0.75;
}


/* ============================================================
SECTION 4 — Button System Refinement
============================================================ */

a.btn {
  text-decoration: none !important;
}

.btn.primary {
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  padding: 0.7rem 1.4rem;
  font-weight: 500;
  letter-spacing: 0.4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn.primary:hover {
  background: #000000;
  border-color: #000000;
  transform: translateY(-1px);
}

.btn.secondary {
  background: transparent;
  color: #111111;
  border-bottom: 1px solid #111111;
  padding: 0.7rem 1.4rem;
}

.btn.secondary:hover {
  opacity: 0.75;
}


/* ============================================================
SECTION 5 — Dark Mode Button Calibration
============================================================ */

:root[data-theme="dark"] .btn.primary {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #ffffff !important;
}

:root[data-theme="dark"] .btn.primary:hover {
  background: #f2f2f2 !important;
  border-color: #f2f2f2 !important;
}

:root[data-theme="dark"] .btn.secondary {
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.6);
}


/* ============================================================
SECTION 6 — Section Rhythm
============================================================ */

main section {
  margin-top: 4.5rem;
}

main section:first-child {
  margin-top: 0;
}

section h2 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

section h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

main p {
  line-height: 1.75;
}

.hero-actions {
  margin-top: 2rem;
}

.hero p,
.hero .hero-subtitle {
  max-width: 720px;
}


/* ============================================================
SECTION 7 — Header → Content Spacing
============================================================ */

main {
  padding-top: 36px;
}


/* ============================================================
SECTION 8 — Dark Mode Surface Calibration
============================================================ */

:root[data-theme="dark"] main {
  background: #0d1117;
}

:root[data-theme="dark"] main section:nth-of-type(even) {
  background: rgba(255,255,255,0.02);
}

:root[data-theme="dark"] main p {
  color: rgba(255,255,255,0.88);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
  color: rgba(255,255,255,0.95);
}


/* ============================================================
SECTION 9 — Footer Institutional Identity Refinement
============================================================ */

.footer-title,
.footer-institutional,
.footer-global {
  margin-top: 0;
}

.footer-title {
  margin-bottom: 4px;
}

.footer-institutional {
  margin-bottom: 4px;
}

.footer-global {
  margin-bottom: 16px;
}


/* ============================================================
SECTION 10 — Footer Boundary & Grid Alignment
============================================================ */

#footer {
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 70px;
  padding-top: 40px;
}

:root[data-theme="dark"] #footer {
  border-top: 1px solid rgba(255,255,255,0.08);
}

#footer .container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
SECTION 11 — Footer Viewport Stabilization
============================================================ */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}


/* ============================================================
SECTION 12 — Short Page Visual Guard
============================================================ */

main section:last-child {
  margin-bottom: 2rem;
}


/* ============================================================
SECTION 13 — Institutional Typography & Navigation Polish
============================================================ */

#site-header nav a {
  padding-left: 12px;
  padding-right: 12px;
}

h1 {
  letter-spacing: -0.01em;
}

h2 {
  font-weight: 500;
}

h3 {
  letter-spacing: 0.01em;
}

main p {
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}


/* ============================================================
SECTION 14 — Knowledge Page Refinement (Additive Only)
============================================================ */

.knowledge-block {
  margin-top: 1.75rem;
}

.knowledge-block h3 {
  margin-bottom: 0.5rem;
}

.knowledge-block p {
  margin-bottom: 0.75rem;
}

/* Subtle separation for readability */

:root[data-theme="dark"] .knowledge-block {
  border-left: 2px solid rgba(255,255,255,0.06);
  padding-left: 12px;
}


/* ============================================================
END OF FILE
Version: 1.4.8
============================================================ */