/* ==========================================================
   site-layout.css — Shared universal rules (StanHinton.com)
   Goal: consistent flex layout + consistent left index styling
   Notes:
   - Keep this file small and truly universal.
   - Avoid broad “* { … }” overrides that can cause surprises.
   ========================================================== */

/* Base font scaling for consistent rem sizing across site */
html { font-size: 112.5%; }  /* 18px base so rem sizing is consistent sitewide */

/* 1) Base layout alignment: prevent sidebar stretching */
.layout {
  align-items: flex-start;
}

/* 2) Sidebar should not stretch within the flex row */
aside.sidebar {
  align-self: flex-start;
}

/* ==========================================================
   3) Shared Left Index Normalization
   Works across mixed injected markup (p/div/ul/li/forms/selects)
   ========================================================== */

/* Enforce consistent left index typography (match blog page) */
#navigation-container {
  font-family: Arial, sans-serif;
  font-size: 1.0rem;
  line-height: 1.25;
  color: #ffffff;
}
/* Remove default margins/padding that cause random extra gaps */
#navigation-container p,
#navigation-container div,
#navigation-container ul,
#navigation-container li {
  margin: 0;
  padding: 0;
}

/* Make every nav entry behave like a consistent menu item */
#navigation-container a {
  display: block;
  padding: 2px 0;
  color: #ffffff !important;
  text-decoration: none;
}

#navigation-container a:hover {
  text-decoration: underline;
}

/* Normalize dropdown/form spacing (Annual Reviews selector, etc.) */
#navigation-container select,
#navigation-container form {
  margin: 4px 0;
}

/* Optional: ensure list bullets never appear */
#navigation-container ul,
#navigation-container li {
  list-style: none;
}
/* Ensure non-link nav items (labels/dropdowns) match link typography */
#navigation-container label,
#navigation-container span,
#navigation-container select,
#navigation-container option {
  font-family: Arial, sans-serif;
  font-size: 1.0rem;
}
#navigation-container .nav-index-label { font-size: 1.0rem; }
/* Make "Annual Reviews" label match the rest of the nav items */
#navigation-container .nav-index-label,
#navigation-container b,
#navigation-container strong {
  font-family: Arial, sans-serif;
  font-size: 1.0rem;
  font-weight: normal;     /* removes the bold look */
  line-height: 1.25;
}

/* Give labels the same vertical rhythm as the links */
#navigation-container .nav-index-label {
  display: block;
  padding: 2px 0;
  margin: 0;
}

/* ==========================================================
   4) Universal site framework (header + layout + basic palette)
   Needed for pages using: .site-header-bar, .page, .layout,
   .sidebar-box, .page-header, .page-divider, .footer-disclaimer
   ========================================================== */

/* Shared palette (used throughout) */
:root {
  --blue-dark: #243F73;
  --blue-mid:  #3560A6;
  --blue-light: #f3f4f7;

  --bg-main: #ffffff;
  --text-main: #222222;
  --border-soft: #99cfdc;
}

/* Safe universal box model */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-main);
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text-main);
}

a {
  color: #1a5fd0;
  text-decoration: underline;
}
a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

/* Header */
.site-header-bar {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue-mid));
  color: #ffffff;
  padding: 0.75rem 0;
}

.site-header-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-title-block {
  font-family: Verdana, Arial, sans-serif;
}

.site-title {
  font-size: 1.55rem;
  font-weight: bold;
}

.site-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
}

.site-search {
  min-width: 260px;
  max-width: 400px;
  width: 100%;
  flex-shrink: 0;
}

/* Main page layout */
.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0.5rem 3rem;
}

.layout {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: flex-start; /* keeps sidebar from stretching */
}

.sidebar {
  width: 165px;
  flex-shrink: 0;
}

.sidebar-box {
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background-color: var(--blue-dark);
  padding: 0.75rem 0.75rem 0.9rem;
  font-size: 1.0rem;
}

.sidebar-title {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.0rem;
  font-weight: bold;
  color: #ffffff;
  margin: 0 0 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.25rem;
}

.content {
  flex: 1;
  min-width: 0;
}

/* Page title area */
.page-header {
  background-color: var(--blue-dark);
  color: #ffffff;
  border-radius: 6px;
  padding: 1.2rem 1.3rem;
  font-family: Verdana, Arial, sans-serif;
}

.page-header h1 {
  margin: 0;
  font-size: 1.7rem;
}

.page-header-sub {
  margin-top: 0.4rem;
  font-size: 1.0rem;
  opacity: 0.9;
}

.page-divider {
  margin-top: 1.25rem;
  border: 0;
  height: 3px;
  background: linear-gradient(to right, var(--blue-mid), var(--border-soft));
}

/* Footer disclaimer */
.footer-disclaimer {
  margin-top: 2rem;
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  text-align: center;
  color: #000000;
}

/* Responsive */
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
}