/* ============================================================
   DESIGN SYSTEM — Texas Mediation Research Project (TMRP)
   styles.css
   ============================================================ */


/* ------------------------------------------------------------
   1. GOOGLE FONTS IMPORT
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Open+Sans:wght@300;400;500;600;700&display=swap');


/* ------------------------------------------------------------
   2. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {

  /* --- Typography --- */
  --font-heading : 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body    : 'Open Sans', system-ui, -apple-system, sans-serif;

  /* --- Color Palette --- */
  --color-primary    : #0F2A44;
  --color-secondary  : #6B7280;
  --color-accent     : #C4A45C;
  --color-bg         : #FFFFFF;
  --color-bg-light   : #F5F7FA;
  --color-text       : #111827;
  --color-text-muted : #6B7280;

  /* Derived interaction colors */
  --color-primary-dark  : #0a1e30;
  --color-accent-dark   : #a8883c;
  --color-border        : #E5E7EB;

  /* --- Spacing Scale --- */
  --space-xs : 0.5rem;
  --space-sm : 1rem;
  --space-md : 2rem;
  --space-lg : 4rem;
  --space-xl : 7rem;

  /* --- Border Radius --- */
  --radius-sm : 3px;
  --radius-md : 6px;
  --radius-lg : 12px;

  /* --- Transitions --- */
  --transition-fast   : 150ms ease;
  --transition-normal : 250ms ease;
  --transition-slow   : 400ms ease;

  /* --- Shadows --- */
  --shadow-sm  : 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md  : 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg  : 0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* --- Layout --- */
  --container-max    : 1200px;
  --container-gutter : var(--space-sm);
}


/* ------------------------------------------------------------
   3. CSS RESET & NORMALISE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

html {
  font-size          : clamp(15px, 1.25vw + 10px, 18px);
  scroll-behavior    : smooth;
  -webkit-text-size-adjust : 100%;
  text-size-adjust         : 100%;
}

body {
  font-family             : var(--font-body);
  font-weight             : 400;
  line-height             : 1.65;
  color                   : var(--color-text);
  background-color        : var(--color-bg);
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  text-rendering          : optimizeLegibility;
}

img, picture, video, canvas, svg {
  display   : block;
  max-width : 100%;
}

input, button, textarea, select {
  font : inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap : break-word;
}

ul, ol {
  list-style : none;
}

a {
  color           : var(--color-primary);
  text-decoration : none;
  transition      : color var(--transition-fast);
}

a:hover {
  color : var(--color-accent);
}

hr {
  border     : none;
  border-top : 1px solid var(--color-border);
  margin     : var(--space-md) 0;
}


/* ------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family    : var(--font-heading);
  font-weight    : 700;
  line-height    : 1.25;
  color          : var(--color-primary);
  letter-spacing : -0.01em;
}

h1 { font-size : clamp(2rem,    4vw + 0.75rem, 3.25rem); font-weight: 900; }
h2 { font-size : clamp(1.5rem,  2.5vw + 0.5rem, 2.25rem); }
h3 { font-size : clamp(1.25rem, 1.5vw + 0.5rem, 1.625rem); }
h4 { font-size : clamp(1.1rem,  1vw + 0.5rem,   1.25rem);  }
h5 { font-size : 1.05rem; font-weight: 600; }
h6 { font-size : 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

p {
  margin-bottom : var(--space-sm);
}

p:last-child {
  margin-bottom : 0;
}

small      { font-size   : 0.825rem; }
strong     { font-weight : 600; }
em         { font-style  : italic; }

.eyebrow {
  font-family    : var(--font-body);
  font-size      : 0.75rem;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : 0.14em;
  color          : var(--color-accent);
}

.lead {
  font-size   : 1.125rem;
  font-weight : 300;
  line-height : 1.75;
  color       : var(--color-text-muted);
}


/* ------------------------------------------------------------
   5. LAYOUT SYSTEM
   ------------------------------------------------------------ */
.container {
  width     : 100%;
  max-width : var(--container-max);
  margin    : 0 auto;
  padding   : 0 var(--container-gutter);
}

.section {
  padding : var(--space-lg) 0;
}

.section--lg {
  padding : var(--space-xl) 0;
}

.section--sm {
  padding : var(--space-md) 0;
}

.section--light {
  background-color : var(--color-bg-light);
}

.section--dark {
  background-color : var(--color-primary);
  color            : #ffffff;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color : #ffffff;
}

.section--dark p {
  color : rgba(255, 255, 255, 0.8);
}

.section--dark strong {
  color : #ffffff;
}

.section-header {
  margin-bottom : var(--space-md);
}

.section-header--center {
  text-align : center;
  max-width  : 720px;
  margin     : 0 auto var(--space-md);
}

.section-header .eyebrow {
  display       : block;
  margin-bottom : var(--space-xs);
}

.section-header h2 {
  margin-bottom : var(--space-xs);
}

.section-header .lead {
  margin-top : var(--space-sm);
}

/* --- Grid --- */
.grid {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(260px, 1fr));
  gap                   : var(--space-md);
}

.grid--2 { grid-template-columns : repeat(2, 1fr); }
.grid--3 { grid-template-columns : repeat(3, 1fr); }
.grid--4 { grid-template-columns : repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns : 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid--3,
  .grid--4 {
    grid-template-columns : repeat(2, 1fr);
  }
}

/* --- Flex --- */
.flex          { display: flex;  align-items: center; gap: var(--space-sm); }
.flex--wrap    { flex-wrap: wrap; }
.flex--start   { align-items: flex-start; }
.flex--end     { justify-content: flex-end; }
.flex--between { justify-content: space-between; }
.flex--center  { justify-content: center; }


/* ------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------ */
.btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.4em;
  font-family     : var(--font-body);
  font-size       : 0.9rem;
  font-weight     : 600;
  letter-spacing  : 0.04em;
  text-transform  : uppercase;
  white-space     : nowrap;
  padding         : 0.75em 1.75em;
  border-radius   : var(--radius-sm);
  border          : 2px solid transparent;
  cursor          : pointer;
  transition      : background-color var(--transition-fast),
                    color            var(--transition-fast),
                    border-color     var(--transition-fast),
                    box-shadow       var(--transition-fast),
                    transform        var(--transition-fast);
}

.btn:hover  { transform : translateY(-1px); }
.btn:active { transform : translateY(0); }

.btn-primary {
  background-color : var(--color-primary);
  border-color     : var(--color-primary);
  color            : #ffffff;
}
.btn-primary:hover {
  background-color : var(--color-primary-dark);
  border-color     : var(--color-primary-dark);
  color            : #ffffff;
  box-shadow       : var(--shadow-md);
}

.btn-accent {
  background-color : var(--color-accent);
  border-color     : var(--color-accent);
  color            : var(--color-primary);
}
.btn-accent:hover {
  background-color : var(--color-accent-dark);
  border-color     : var(--color-accent-dark);
  color            : var(--color-primary);
  box-shadow       : var(--shadow-md);
}

.btn-outline {
  background-color : transparent;
  border-color     : var(--color-primary);
  color            : var(--color-primary);
}
.btn-outline:hover {
  background-color : var(--color-primary);
  color            : #ffffff;
  box-shadow       : var(--shadow-md);
}

.btn-outline-light {
  background-color : transparent;
  border-color     : rgba(255, 255, 255, 0.5);
  color            : #ffffff;
}
.btn-outline-light:hover {
  background-color : rgba(255, 255, 255, 0.1);
  border-color     : #ffffff;
  color            : #ffffff;
}

.btn-sm { font-size : 0.78rem; padding : 0.55em 1.2em; }
.btn-lg { font-size : 1rem;    padding : 0.9em 2.25em; }


/* ------------------------------------------------------------
   7. CARD
   ------------------------------------------------------------ */
.card {
  background-color : var(--color-bg);
  border           : 1px solid var(--color-border);
  border-radius    : var(--radius-md);
  padding          : var(--space-md);
  box-shadow       : var(--shadow-sm);
  transition       : box-shadow var(--transition-normal),
                     transform  var(--transition-normal);
}

.card:hover {
  box-shadow : var(--shadow-md);
  transform  : translateY(-3px);
}

.card--flat {
  box-shadow : none;
}

.card--accent-top {
  border-top : 3px solid var(--color-accent);
}


/* ------------------------------------------------------------
   8. ACCENT LINE
   ------------------------------------------------------------ */
.accent-line {
  display    : block;
  width      : 48px;
  height     : 3px;
  background : var(--color-accent);
  border     : none;
  margin     : var(--space-sm) 0;
}

.accent-line--center {
  margin : var(--space-sm) auto;
}


/* ------------------------------------------------------------
   9. UTILITIES
   ------------------------------------------------------------ */
.text-left   { text-align : left;   }
.text-center { text-align : center; }
.text-right  { text-align : right;  }

.text-primary { color : var(--color-primary); }
.text-accent  { color : var(--color-accent); }
.text-muted   { color : var(--color-text-muted); }
.text-white   { color : #ffffff; }

.font-light  { font-weight : 300; }
.font-normal { font-weight : 400; }
.font-medium { font-weight : 500; }
.font-semi   { font-weight : 600; }
.font-bold   { font-weight : 700; }
.font-black  { font-weight : 900; }

.mt-sm { margin-top    : var(--space-sm); }
.mt-md { margin-top    : var(--space-md); }
.mt-lg { margin-top    : var(--space-lg); }
.mb-sm { margin-bottom : var(--space-sm); }
.mb-md { margin-bottom : var(--space-md); }
.mb-lg { margin-bottom : var(--space-lg); }
.my-sm { margin-block  : var(--space-sm); }
.my-md { margin-block  : var(--space-md); }

.d-block { display : block; }
.d-flex  { display : flex; }
.d-grid  { display : grid; }
.d-none  { display : none; }
.hidden  { visibility : hidden; }

.sr-only {
  position : absolute;
  width    : 1px;
  height   : 1px;
  padding  : 0;
  margin   : -1px;
  overflow : hidden;
  clip     : rect(0,0,0,0);
  border   : 0;
}

.bg-primary { background-color : var(--color-primary); color : #fff; }
.bg-light   { background-color : var(--color-bg-light); }
.bg-white   { background-color : var(--color-bg); }


/* ============================================================
   10. HEADER
   ============================================================ */
.site-header {
  position         : sticky;
  top              : 0;
  z-index          : 100;
  background-color : var(--color-bg);
  border-bottom    : 1px solid var(--color-border);
  box-shadow       : var(--shadow-sm);
  transition       : box-shadow var(--transition-normal);
}

.site-header.scrolled {
  box-shadow : var(--shadow-md);
}

.site-header .container {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  min-height      : 72px;
  padding-top     : var(--space-xs);
  padding-bottom  : var(--space-xs);
}

/* Logo */
.site-logo {
  font-family    : var(--font-heading);
  font-size      : 1.1rem;
  font-weight    : 700;
  color          : var(--color-primary);
  letter-spacing : 0.02em;
  text-decoration: none;
  display        : flex;
  align-items    : center;
}

.site-logo__img {
  height    : 60px;
  width     : auto;
  display   : block;
}

/* Nav */
.site-nav {
  display     : flex;
  align-items : center;
  gap         : var(--space-md);
}

.site-nav a {
  font-size      : 0.85rem;
  font-weight    : 600;
  color          : var(--color-text);
  letter-spacing : 0.03em;
  transition     : color var(--transition-fast);
  position       : relative;
}

.site-nav a:hover,
.site-nav a.active {
  color : var(--color-accent);
}

/* Active nav indicator line */
.site-nav a.active::after {
  content       : '';
  position      : absolute;
  bottom        : -6px;
  left          : 0;
  right         : 0;
  height        : 2px;
  background    : var(--color-accent);
  border-radius : 1px;
}

/* Exclude the CTA button from the indicator */
.site-nav .btn.active::after {
  display : none;
}

/* Nav CTA: white text by default, gold on hover */
.site-nav .btn-primary {
  color : #ffffff;
}

.site-nav .btn-primary:hover {
  color : var(--color-accent);
}

/* Mobile hamburger */
.btn-hamburger {
  display    : none;
  background : none;
  border     : none;
  cursor     : pointer;
  padding    : 8px;
  flex-direction : column;
  gap        : 5px;
}

.hamburger-bar {
  display    : block;
  width      : 24px;
  height     : 2px;
  background : var(--color-primary);
  border-radius : 2px;
  transition : transform var(--transition-fast),
               opacity   var(--transition-fast);
}


/* ============================================================
   11. HERO SECTION
   ============================================================ */
.hero {
  padding    : 0;
  position   : relative;
  overflow   : hidden;
  background : linear-gradient(170deg, #0a1e30 0%, var(--color-primary) 50%, #122f4f 100%);
}

.hero .container {
  position : relative;
  z-index  : 2;
}

.hero__inner {
  max-width    : 780px;
  padding      : var(--space-xl) 0 calc(var(--space-xl) + 2rem);
}

.hero__eyebrow {
  display       : inline-block;
  margin-bottom : var(--space-sm);
  color         : var(--color-accent);
  font-size     : 0.8rem;
  letter-spacing: 0.16em;
}

.hero h1 {
  color       : #ffffff;
  line-height : 1.2;
  margin-bottom : var(--space-xs);
}

.hero .accent-line {
  margin : var(--space-sm) 0 var(--space-md);
}

.hero__lead {
  color       : rgba(255, 255, 255, 0.78);
  font-size   : 1.15rem;
  line-height : 1.8;
  max-width   : 680px;
}

.hero__ctas {
  display   : flex;
  gap       : var(--space-sm);
  flex-wrap : wrap;
  margin-top: var(--space-md);
}

/* Subtle diagonal edge at the bottom of the hero */
.hero__edge {
  position   : absolute;
  bottom     : 0;
  left       : 0;
  right      : 0;
  height     : 48px;
  background : var(--color-bg-light);
  clip-path  : polygon(0 100%, 100% 0, 100% 100%);
  z-index    : 1;
}


/* ============================================================
   12. PROBLEM SECTION
   ============================================================ */
.problem__body {
  max-width  : 720px;
  margin     : 0 auto var(--space-md);
  text-align : center;
}

.problem__intro {
  font-size   : 1.05rem;
  line-height : 1.8;
  color       : var(--color-text);
}

.problem__cards {
  max-width : 900px;
  margin    : 0 auto;
}

.problem-card__icon {
  width         : 48px;
  height        : 48px;
  border-radius : 50%;
  background    : var(--color-bg-light);
  display       : flex;
  align-items   : center;
  justify-content : center;
  margin-bottom : var(--space-sm);
  color         : var(--color-primary);
}

.problem__cards h3 {
  margin-bottom : var(--space-xs);
  font-size     : 1.15rem;
}

.problem__cards p {
  color     : var(--color-text-muted);
  font-size : 0.95rem;
}


/* ============================================================
   13. SOLUTION SECTION — Feature Cards
   ============================================================ */
.solution__cards .feature-card {
  text-align : center;
  padding    : var(--space-md) var(--space-sm);
}

.feature-icon {
  width           : 56px;
  height          : 56px;
  border-radius   : 50%;
  background      : var(--color-bg-light);
  border          : 1px solid var(--color-border);
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin          : 0 auto var(--space-sm);
  color           : var(--color-primary);
}

.feature-card h3 {
  font-size     : 1.1rem;
  margin-bottom : var(--space-xs);
  color         : var(--color-primary);
}

.feature-card p {
  font-size : 0.92rem;
  color     : var(--color-text-muted);
}


/* ============================================================
   14. LEADERSHIP SECTION — Profile Cards
   ============================================================ */
.leadership__cards .profile-card {
  text-align : center;
}

.profile-avatar {
  width           : 120px;
  height          : 120px;
  border-radius   : 50%;
  background      : var(--color-primary);
  display         : flex;
  align-items     : center;
  justify-content : center;
  margin          : 0 auto var(--space-sm);
  overflow        : hidden;
  border          : 3px solid var(--color-border);
}

.profile-avatar span {
  font-family    : var(--font-heading);
  font-size      : 1.35rem;
  font-weight    : 700;
  color          : #ffffff;
  letter-spacing : 0.04em;
}

/* Real headshot photo inside the circle */
.profile-photo {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
}

.profile-card__name {
  font-family   : var(--font-heading);
  font-size     : 1.05rem;
  font-weight   : 700;
  color         : var(--color-primary);
  margin-bottom : 4px;
}

.profile-card__title {
  font-size  : 0.88rem;
  color      : var(--color-text-muted);
  line-height: 1.5;
}

.profile-card__meta {
  font-size  : 0.8rem;
  font-style : italic;
  margin-top : 4px;
}

/* Center orphaned 7th Profile Card (Andre Cook) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 2-column grid: Span across both columns, constrain width, and center */
  .leadership__cards .card:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - (var(--space-md) / 2));
    min-width: 260px;
  }
}

@media (min-width: 1025px) {
  /* 3-column grid: Place exactly in the middle (second) column */
  .leadership__cards .card:nth-child(7) {
    grid-column: 2;
  }
}


/* ============================================================
   15. IMPACT / STATS SECTION
   ============================================================ */
.stats-row {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--space-lg);
  flex-wrap       : wrap;
  padding         : var(--space-md) 0;
}

.stat {
  text-align : center;
  min-width  : 140px;
}

.stat__prefix,
.stat__number,
.stat__symbol {
  font-family : var(--font-heading);
  font-weight : 900;
  font-size   : clamp(2.5rem, 5vw + 0.5rem, 4.25rem);
  line-height : 1;
  color       : var(--color-accent);
  letter-spacing : -0.02em;
}

.stat__label {
  display       : block;
  margin-top    : var(--space-xs);
  font-family   : var(--font-body);
  font-size     : 0.82rem;
  font-weight   : 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color         : rgba(255, 255, 255, 0.6);
}

.stat-divider {
  width      : 1px;
  height     : 56px;
  background : rgba(255, 255, 255, 0.15);
}


/* ============================================================
   16. FOOTER
   ============================================================ */
.site-footer {
  background-color : var(--color-primary);
  color            : rgba(255, 255, 255, 0.75);
  padding          : var(--space-lg) 0 var(--space-md);
}

/* Footer logo */
.footer__brand-logo {
  margin-bottom : var(--space-sm);
  text-align    : center;
}

.footer-logo {
  height  : 72px;
  width   : auto;
  display : inline-block;
  /* Invert to white so it reads on the dark navy footer */
  filter  : brightness(0) invert(1);
  opacity : 0.9;
}

.footer__top {
  display               : grid;
  grid-template-columns : 2fr 1fr 1fr;
  gap                   : var(--space-md);
}

.site-footer h5 {
  color         : #ffffff;
  font-family   : var(--font-body);
  font-weight   : 700;
  font-size     : 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom : var(--space-sm);
}

.footer__brand p {
  font-size   : 0.88rem;
  line-height : 1.65;
  max-width   : 320px;
  text-align  : center;
  margin      : 0 auto;
}

.footer__links {
  list-style : none;
  padding    : 0;
  margin     : 0;
}

.footer__links li {
  margin-bottom : 0.6rem;
}

.footer__links a,
.footer__links span {
  font-size   : 0.85rem;
  color       : rgba(255, 255, 255, 0.6);
  transition  : color var(--transition-fast);
}

.footer__links a:hover {
  color : var(--color-accent);
}

.site-footer__bottom {
  border-top  : 1px solid rgba(255, 255, 255, 0.1);
  margin-top  : var(--space-md);
  padding-top : var(--space-sm);
  font-size   : 0.8rem;
  text-align  : center;
  color       : rgba(255, 255, 255, 0.45);
}


/* ============================================================
   17. ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline        : 2px solid var(--color-accent);
  outline-offset : 3px;
  border-radius  : var(--radius-sm);
}


/* ============================================================
   18. RESPONSIVE
   ============================================================ */

/* --- Tablet: ≤ 768px --- */
@media (max-width: 768px) {
  :root {
    --container-gutter : var(--space-sm);
    --space-lg         : 3rem;
    --space-xl         : 4.5rem;
  }

  .section {
    padding : var(--space-md) 0;
  }

  .section--lg {
    padding : var(--space-lg) 0;
  }

  /* Header — show hamburger, hide nav */
  .site-nav {
    display        : none;
    position       : fixed;
    top            : 0;
    right          : 0;
    bottom         : 0;
    width          : min(320px, 85vw);
    flex-direction : column;
    align-items    : flex-start;
    gap            : 0;
    padding        : 80px var(--space-md) var(--space-md);
    background     : var(--color-bg);
    box-shadow     : -4px 0 24px rgba(0,0,0,0.12);
    z-index        : 200;
  }

  .site-nav.is-open {
    display : flex;
  }

  .site-nav a {
    width       : 100%;
    padding     : var(--space-sm) 0;
    border-bottom : 1px solid var(--color-border);
    font-size   : 1rem;
  }

  .site-nav .btn {
    margin-top : var(--space-sm);
    width      : 100%;
    text-align : center;
    border-bottom : none;
  }

  .btn-hamburger {
    display        : flex;
  }

  /* Hero */
  .hero__inner {
    padding : var(--space-lg) 0 calc(var(--space-lg) + 1.5rem);
  }

  .hero__ctas {
    flex-direction : column;
  }

  .hero__ctas .btn {
    width      : 100%;
    text-align : center;
  }

  /* Footer */
  .footer__top {
    grid-template-columns : 1fr;
    gap : var(--space-md);
  }

  .footer__brand p {
    max-width : 100%;
  }

  /* Stats */
  .stats-row {
    gap : var(--space-md);
  }

  .stat-divider {
    display : none;
  }
}

/* --- Small mobile: ≤ 480px --- */
@media (max-width: 480px) {
  :root {
    --container-gutter : 1.25rem;
    --space-lg         : 2.5rem;
  }

  .btn {
    width      : 100%;
    text-align : center;
  }

  .btn + .btn {
    margin-top : var(--space-xs);
  }

  .stats-row {
    flex-direction : column;
    gap : var(--space-sm);
  }
}

/* --- Desktop wide: 1024px + --- */
@media (min-width: 1024px) {
  :root {
    --container-gutter : var(--space-md);
  }
}

/* --- Large desktop: 1280px + --- */
@media (min-width: 1280px) {
  :root {
    --container-gutter : var(--space-md);
  }
}