@charset "utf-8";
/* ==========================================================
   South Florida Community Health Centers
   fonts_and_colors.css
   Global typography, brand colors, links, and buttons
   ========================================================== */
/* ---------- Site Variables ---------- */
:root {
  --font-heading: "Montserrat", Arial, sans-serif;
  --font-body: "Source Sans 3", Arial, sans-serif;
  --font-accent: "Quicksand", Arial, sans-serif;
  --readable-content-width-lg: 58rem;
  --readable-content-width-xl: 61rem;
  --readable-content-width-xxl: 64rem;
}
/* ---------- Color Utilities ---------- */
.color-prussian {color: #283C57;} /* Prussian Blue */
.color-marian {color: #234476;} /* Marian Blue */
.color-lapis {color: #3C688E;} /* Lapis Lazuli */
.color-moonstone {color: #6BAABC;} /* Moonstone */
.color-celadon {color: #A7CEB6;} /* Celadon */
.color-cream {color: #EDF6CB;} /* Cream */
.color-citrine {color: #CFCA3A;} /* Citrine */
.color-white {color: #F0F8FF;} /* White */
.color-brightwhite {color: #FFFFFF;} /* Bright White */
.color-dark {color: #222222;} /* Dark */
.background-color-prussian {background-color: rgba(40, 60, 87, var(--bs-bg-opacity, 1));}
.background-color-marian {background-color: rgba(35, 68, 118, var(--bs-bg-opacity, 1));}
.background-color-lapis {background-color: rgba(60, 104, 142, var(--bs-bg-opacity, 1));}
.background-color-citrine {background-color: rgba(207, 202, 58, var(--bs-bg-opacity, 1));}
.background-color-cream {background-color: rgba(237, 246, 203, var(--bs-bg-opacity, 1));}
.background-color-moonstone {background-color: rgba(107, 170, 188, var(--bs-bg-opacity, 1));}
.background-color-celadon {background-color: rgba(167, 206, 182, var(--bs-bg-opacity, 1));}
/* ---------- Global Typography ---------- */
html,
body {
  font-size: 18px;
}
body {
  color: #283C57; /* Prussian Blue */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}
p {
  margin: 0 0 0.75rem;
  font-weight: 400;
  line-height: 1.6;
}
p a {
  text-decoration: underline;
}
p a:hover {
  color: #234476; /* Marian Blue */
  text-decoration: underline;
}
.caption {
  margin: 8px 0 12px;
  font-family: var(--font-accent);
  font-size: 14px;
  text-align: center;
}
ul {
  margin: 0 0 0.3rem;
}
.bullet-list {
  padding-left: 2rem;
}
.bullet-list > li {
  margin: 0 0 0.4rem;
  padding-left: 0.1rem;
  color: #283C57; /* Prussian Blue */
  line-height: 1.4;
}
.bullet-list > li:last-child {
  margin-bottom: 0;
}
.bullet-list > li::marker {
  color: #6BAABC; /* Moonstone */
  font-size: 1.15em;
}
.secondary-bullet-list {
  margin-top: 0.1rem;
  margin-bottom: 0;
  padding-left: 1.2rem;
  list-style-type: circle;
}
.secondary-bullet-list > li {
  margin: 0;
  padding-left: 0.05rem;
  line-height: 1.4;
}
.secondary-bullet-list > li::marker {
  color: #A7CEB6; /* Celadon */
  font-size: 1.15em;
}
strong,
b {
  color: #234476; /* Marian Blue */
  font-weight: 600;
}
/* ---------- Headings ---------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}
h1,
.h1 {
  margin: 0;
  color: #283C57; /* Prussian Blue */
  font-size: 1.9rem;
  line-height: 1.2;
}
h2,
.h2 {
  margin: 0;
  color: #283C57; /* Prussian Blue */
  font-size: 1.6rem;
  line-height: 1.3;
}
h3,
.h3 {
  margin-top: 1.5rem;
  margin-bottom: 0;
  color: #234476; /* Marian Blue */
  font-size: 1.3rem;
  line-height: 1.35;
}
h4,
.h4 {
  margin-top: 1rem;
  margin-bottom: 0;
  color: #234476; /* Marian Blue */
  font-size: 1.1rem;
  line-height: 1.4;
}
h5,
.h5 {
  margin: 0 0 0.35rem;
  padding: 0;
  color: #EDF6CB; /* Cream */
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
h6,
.h6 {
  color: #222222; /* Dark */
  font-size: 0.8rem;
  font-weight: 500;
}
/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
a:hover,
a:focus {
  text-decoration: none;
}
/* ---------- Common Components ---------- */
.shaded-div {
  padding: 10px 24px;
  background-color: rgba(40, 60, 87, 0.2); /* Prussian Blue, 20% */
  border-radius: 10px;
}
/* ---------- Buttons ---------- */
.btn {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 1rem auto 0;
  font-family: var(--font-accent);
  font-size: 12pt;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.btn-primary,
.btn-primary:visited,
.btn-primary:active {
  background-color: #283C57; /* Prussian Blue */
  border: 0 !important;
  color: #F0F8FF; /* White */
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #EDF6CB; /* Cream */
  color: #283C57; /* Prussian Blue */
}
.btn-secondary,
.btn-secondary:visited,
.btn-secondary:active {
  background-color: #A7CEB6 !important; /* Celadon */
  border: 0 !important;
  color: #F0F8FF; /* White */
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #EDF6CB !important; /* Cream */
  color: #283C57; /* Prussian Blue */
}
.btn-small {
  font-size: 0.9rem;
}
/* ---------- Page Transitions ---------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 160ms ease-in both page-fade-out;
}
::view-transition-new(root) {
  animation: 220ms ease-out both page-fade-in;
}
@keyframes page-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}
/* ---------- Readable Content Width ---------- */
@media (min-width: 992px) {
  .container :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    max-width: var(--readable-content-width-lg);
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .container :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    max-width: var(--readable-content-width-xl);
  }
}
@media (min-width: 1400px) {
  .container :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    max-width: var(--readable-content-width-xxl);
  }
}
/* ---------- Responsive Typography ---------- */
@media (max-width: 768px) {
  html,
  body {
    font-size: 17px;
  }
  h1,
  .h1 {
    font-size: 1.7rem;
  }
  h2,
  .h2 {
    font-size: 1.45rem;
  }
}