/* ── Design Tokens ─────────────────────────────────────── */
:root {
    --primary:            hsl(210, 52%, 23%);
    --primary-foreground: hsl(40,  33%, 96%);
    --background:         hsl(40,  33%, 96%);
    --foreground:         hsl(210, 29%, 20%);
    --card:               hsl(0,   0%,  100%);
    --card-foreground:    hsl(210, 29%, 20%);
    --muted:              hsl(40,  20%, 90%);
    --muted-foreground:   hsl(210, 10%, 45%);
    --navy:               hsl(210, 52%, 23%);
    --navy-light:         hsl(210, 40%, 35%);
    --teal:               hsl(174, 55%, 39%);
    --teal-light:         hsl(174, 45%, 55%);
    --sand:               hsl(40,  33%, 96%);
    --sand-dark:          hsl(40,  20%, 90%);
    --coral:              hsl(16,  80%, 60%);
    --gold:               hsl(42,  87%, 55%);
    --font-heading: 'Merriweather',  serif;
    --font-body:    'Source Sans 3', sans-serif;
}

/* ── Base ──────────────────────────────────────────────── */
html, body {
    height: 100%;
}
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
}
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-main { flex: 1 1 0%; padding-top: 80px; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* ── Section Container ─────────────────────────────────── */
.section-container {
    max-width: 80rem;
    margin-left:  auto;
    margin-right: auto;
    padding-left:  1rem;
    padding-right: 1rem;
}

/* ── Colour Utilities ──────────────────────────────────── */
.bg-primary-bar  { background-color: var(--primary); }
.bg-navy         { background-color: var(--navy); }
.bg-teal         { background-color: var(--teal); }
.bg-coral        { background-color: var(--coral); }
.bg-gold         { background-color: var(--gold); }
.bg-sand-dark    { background-color: var(--sand-dark); }
.bg-page         { background-color: var(--background); }
.bg-card-white   { background-color: var(--card); }

.text-primary-fg   { color: var(--primary-foreground); }
.text-teal         { color: var(--teal); }
.text-foreground   { color: var(--foreground); }
.text-card-fg      { color: var(--card-foreground); }
.text-muted-fg     { color: var(--muted-foreground); }

.text-primary-fg-85 { color: hsla(40, 33%, 96%, 0.85); }
.text-primary-fg-70 { color: hsla(40, 33%, 96%, 0.70); }
.text-primary-fg-60 { color: hsla(40, 33%, 96%, 0.60); }
.text-primary-fg-50 { color: hsla(40, 33%, 96%, 0.50); }

/* ── Nav Links ─────────────────────────────────────────── */
.nav-link-custom {
    font-size:       0.875rem;
    font-weight:     500;
    text-transform:  uppercase;
    letter-spacing:  0.025em;
    color:           hsla(40, 33%, 96%, 0.8);
    text-decoration: none;
    transition:      color 0.2s;
    white-space:     nowrap;
}
.nav-link-custom:hover {
    color:           var(--primary-foreground);
    text-decoration: none;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn-teal {
    display:          inline-block;
    background-color: var(--teal);
    color:            var(--primary-foreground);
    border:           none;
    border-radius:    0.375rem;
    font-family:      var(--font-body);
    font-weight:      600;
    font-size:        0.875rem;
    text-decoration:  none;
    transition:       background-color 0.2s;
    cursor:           pointer;
}
.btn-teal:hover {
    background-color: var(--teal-light);
    color:            var(--primary-foreground);
    text-decoration:  none;
}
.btn-hero-primary {
    display:          inline-block;
    background-color: var(--teal);
    color:            var(--primary-foreground);
    border:           none;
    border-radius:    0.375rem;
    font-family:      var(--font-body);
    font-weight:      700;
    font-size:        1rem;
    padding:          0.875rem 2rem;
    box-shadow:       0 10px 15px -3px rgba(0,0,0,0.15);
    text-decoration:  none;
    transition:       background-color 0.2s;
    cursor:           pointer;
}
.btn-hero-primary:hover {
    background-color: var(--teal-light);
    color:            var(--primary-foreground);
    text-decoration:  none;
}
.btn-hero-outline {
    display:          inline-block;
    border:           2px solid hsla(40, 33%, 96%, 0.4);
    color:            var(--primary-foreground);
    border-radius:    0.375rem;
    font-family:      var(--font-body);
    font-weight:      600;
    font-size:        1rem;
    padding:          0.875rem 2rem;
    background:       transparent;
    text-decoration:  none;
    transition:       background-color 0.2s;
    cursor:           pointer;
}
.btn-hero-outline:hover {
    background-color: hsla(40, 33%, 96%, 0.1);
    color:            var(--primary-foreground);
    text-decoration:  none;
}

/* ── Card Hover ────────────────────────────────────────── */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform:       translateY(-0.25rem);
    box-shadow:      0 10px 15px -3px rgba(0,0,0,0.12),
                     0  4px  6px -4px rgba(0,0,0,0.10) !important;
    text-decoration: none;
}
.card-hover:hover .hover-teal   { color: var(--teal); }
.card-hover:hover .hover-arrow  { color: var(--teal); transform: translateX(0.25rem); }
.card-hover:hover .icon-box     { transform: scale(1.1); }

/* ── Icon Box ──────────────────────────────────────────── */
.icon-box {
    width:           3rem;
    height:          3rem;
    border-radius:   0.5rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      transform 0.2s;
    flex-shrink:     0;
}

/* ── Logo Circle ───────────────────────────────────────── */
.logo-circle {
    width:            2.5rem;
    height:           2.5rem;
    border-radius:    50%;
    background-color: var(--teal);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
}

/* ── Hero ──────────────────────────────────────────────── */
.hero-section {
    position:    relative;
    min-height:  70vh;
    display:     flex;
    align-items: center;
    overflow:    hidden;
}
.hero-bg {
    position:            absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size:     cover;
    background-position: center;
}
.hero-overlay {
    position:   absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(
        to right,
        hsla(210, 52%, 23%, 0.7),
        hsla(210, 52%, 23%, 0.5),
        hsla(210, 52%, 23%, 0.2)
    );
}
.hero-content {
    position:       relative;
    z-index:        10;
    padding-top:    5rem;
    padding-bottom: 5rem;
    width:          100%;
}
.hero-max { max-width: 42rem; }

.hero-h1 {
    font-size:   2.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ── Section Headings ──────────────────────────────────── */
.section-h2 {
    font-size:   1.875rem;
    font-weight: 700;
}

/* ── News Card Top Bar ─────────────────────────────────── */
.news-top-bar {
    height:           0.5rem;
    background-color: var(--teal);
}

/* ── Footer ────────────────────────────────────────────── */
footer {
    background-color: var(--primary);
    color:            var(--primary-foreground);
}
.footer-divider { border-top: 1px solid hsla(40, 33%, 96%, 0.1); }
a.footer-link {
    color:           hsla(40, 33%, 96%, 0.7);
    text-decoration: none;
    transition:      color 0.2s;
    display:         block;
    margin-bottom:   0.4rem;
}
a.footer-link:hover   { color: var(--teal); }
a.footer-link-sm {
    color:           hsla(40, 33%, 96%, 0.5);
    font-size:       0.75rem;
    text-decoration: none;
    transition:      color 0.2s;
}
a.footer-link-sm:hover { color: hsla(40, 33%, 96%, 0.8); }

/* ── View-All Link ─────────────────────────────────────── */
.view-all-link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    color:           var(--teal);
    font-weight:     600;
    font-size:       0.875rem;
    text-decoration: none;
    transition:      gap 0.2s;
}
.view-all-link:hover {
    color:           var(--teal);
    gap:             0.75rem;
    text-decoration: none;
}

/* ── Resource Card Arrow ───────────────────────────────── */
.resource-arrow {
    color:       var(--muted-foreground);
    flex-shrink: 0;
    margin-left: 1rem;
    transition:  all 0.2s;
}

.resource-header {
    font-size:   2.25rem;
    font-family: var(--font-heading);
    color: var(--navy) !important;
}

/* ── Rich Text Page ────────────────────────────────────── */
.blurb-header-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    height: 200px;
    opacity: 0.6;
}

.carousel-border {
    position: relative;
}

.slider-gradient {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
}

.inside-carousel-caption {
    max-width:     80rem;
    margin-left:   auto;
    margin-right:  auto;
    padding:       1rem;
    padding-top:   1.25rem;
}
.a {
    color: var(--navy) !important;
    text-decoration: none;
    background-color: transparent;
    font-size: 22px;
}

.page-blurb-title {
    color:       var(--navy) !important;
    font-size:   2.25rem;
    font-family: var(--font-heading);
    font-weight: 700;
    margin:      0;
}

.home-text { line-height: 1.7; }

.blurb-about-bg {
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: center;
    min-height:          200px;
}

.inside-blurb {
    transition:    transform 0.2s ease-in-out;
    border-radius: 0.25rem;
    overflow:      hidden;
}
.inside-blurb-hover { transform: translateY(-4px); }

.inside-blurb-title {
    font-size:   1.1rem;
    font-weight: 700;
}

.inside-blurb-text { font-size: 0.9rem; }

.btn-outline-blurb {
    border-color: #fff;
    color:        #fff !important;
    transition:   background-color 0.2s;
}
.btn-outline-blurb:hover {
    background-color: var(--teal);
    border-color:     var(--teal);
}
/* ── Programs sidebar nav ──────────────────────────────────────────────── */
.programs-sidebar {
  position: sticky;
  top: 1.5rem;
  width: 240px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.programs-sidebar .sidebar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin: 0 0 12px;
}

.programs-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.programs-sidebar a {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  border-radius: 6px;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.programs-sidebar a:hover,
.programs-sidebar a.active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 500;
}
/* ── Blog ──────────────────────────────────────────────── */
.blog-post-title {
    font-family: var(--font-heading);
    font-size:   1.75rem;
    font-weight: 700;
    color:       var(--navy);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.blog-post-title a {
    color:           var(--navy);
    text-decoration: none;
    transition:      color 0.2s;
}
.blog-post-title a:hover {
    color:           var(--teal);
    text-decoration: none;
}
.post-meta {
    color:     var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.post-meta a {
    color:           var(--teal);
    text-decoration: none;
}
.post-meta a:hover {
    color:           var(--teal-light);
    text-decoration: none;
}
.blog-list-detail {
    margin-top:    0.75rem;
    padding-top:   0.75rem;
    border-top:    1px solid var(--sand-dark);
}
.blog-list-detail a {
    color:           var(--teal);
    font-weight:     600;
    text-decoration: none;
}
.blog-list-detail a:hover {
    color:           var(--teal-light);
    text-decoration: none;
}
.blog-list-detail .tags { margin-bottom: 0.5rem; }

/* ── Blog Sidebar & Tag Cloud ──────────────────────────── */
.blog-sidebar {
    padding-top: 0.5rem;
}
.blog-sidebar-section {
    background-color: var(--sand-dark);
    border-radius:    0.5rem;
    padding:          1.25rem;
    box-shadow:       0 1px 3px rgba(0,0,0,0.07);
}
.blog-sidebar-title {
    font-family:   var(--font-heading);
    font-size:     1rem;
    font-weight:   700;
    color:         var(--navy);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--teal);
}
.tag-cloud {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.4rem;
}
.tag-cloud-item {
    display:          inline-block;
    background-color: var(--sand-dark);
    color:            var(--navy);
    font-family:      var(--font-body);
    font-size:        0.8rem;
    font-weight:      500;
    padding:          0.3rem 0.65rem;
    border-radius:    999px;
    text-decoration:  none;
    transition:       background-color 0.2s, color 0.2s;
    margin-bottom:    0.25rem;
}
.tag-cloud-item:hover {
    background-color: var(--teal);
    color:            var(--primary-foreground);
    text-decoration:  none;
}
.tag-cloud-active {
    background-color: var(--navy) !important;
    color:            var(--primary-foreground) !important;
}

/* ── Misc Helpers ──────────────────────────────────────── */
.tracking-widest { letter-spacing: 0.1em; }
.cursor-pointer  { cursor: pointer; }
.overflow-hidden { overflow: hidden; }

/* ══ Media Queries ═════════════════════════════════════════ */

/* ── ≥ 576px ────────────────────────────────────────────── */
@media (min-width: 576px) {
    .section-container        { padding-left: 1.5rem; padding-right: 1.5rem; }
    .hero-h1                  { font-size: 3rem; }
    .section-h2               { font-size: 2.25rem; }
    .inside-carousel-caption  { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ── ≥ 768px ────────────────────────────────────────────── */
@media (min-width: 768px) {
    .section-container        { padding-left: 2rem; padding-right: 2rem; }
    .blurb-header-bg          { height: 229px; }
    .inside-carousel-caption  { padding-left: 2rem; padding-right: 2rem; }
    .page-blurb-title         { font-size: 3.5rem; }
}

/* ── ≥ 992px ────────────────────────────────────────────── */
@media (min-width: 992px) {
    .hero-h1 { font-size: 3.75rem; }
}