/* ============================================================
   ONE HEALTH GUIDELINES DATABASE
   stylesheet.css
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {

  --maroon: #7a1735;
  --maroon-dark: #571027;
  --maroon-light: #f7edf1;

  --text: #263238;
  --text-light: #68737a;

  --border: #e1e5e8;

  --background: #f6f7f8;
  --white: #ffffff;

  --tag-background: #f0f2f3;

  --shadow:
    0 4px 18px rgba(0, 0, 0, 0.06);

  --shadow-hover:
    0 10px 30px rgba(0, 0, 0, 0.10);

}


/* ============================================================
   GLOBAL
   ============================================================ */

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  font-family:
    "Poppins",
    Arial,
    sans-serif;

  color: var(--text);

  background:
    var(--background);

  line-height: 1.6;

}


body.modal-open {

  overflow: hidden;

}


button,
input,
select {

  font-family: inherit;

}


button {

  cursor: pointer;

}


a {

  color: inherit;

}


/* ============================================================
   CONTAINER
   ============================================================ */

.container {

  width: min(
    1400px,
    calc(100% - 48px)
  );

  margin-left: auto;

  margin-right: auto;

}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {

  background:
    var(--white);

  border-bottom:
    1px solid var(--border);

}


.header-inner {

  width: min(
    1400px,
    calc(100% - 48px)
  );

  min-height: 82px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}


.brand {

  display: flex;

  align-items: center;

  gap: 14px;

}


.brand-mark {

  width: 48px;

  height: 48px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    var(--maroon);

  color:
    white;

  font-weight: 700;

  font-size: 17px;

}


.brand-title {

  font-size: 19px;

  font-weight: 600;

  color:
    var(--maroon-dark);

}


.brand-subtitle {

  font-size: 12px;

  color:
    var(--text-light);

}


.database-status {

  display: flex;

  align-items: center;

  gap: 8px;

  color:
    var(--text-light);

  font-size: 12px;

}


.status-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    #4b9c67;

}


/* ============================================================
   HERO
   ============================================================ */

.hero {

  background:
    linear-gradient(
      135deg,
      var(--maroon-dark),
      var(--maroon)
    );

  color:
    white;

}


.hero-inner {

  width: min(
    1400px,
    calc(100% - 48px)
  );

  margin: auto;

}


.hero-content {

  padding:
    65px 0 70px;

  max-width:
    850px;

}


.eyebrow {

  font-size: 12px;

  font-weight: 600;

  letter-spacing:
    2px;

  opacity:
    0.75;

  margin-bottom:
    12px;

}


.hero h1 {

  margin:
    0 0 16px;

  font-size:
    clamp(
      34px,
      5vw,
      58px
    );

  line-height:
    1.1;

  font-weight:
    600;

}


.hero p {

  margin: 0;

  max-width:
    800px;

  font-size:
    17px;

  line-height:
    1.8;

  opacity:
    0.9;

}


/* ============================================================
   STATISTICS
   ============================================================ */

.stats-section {

  background:
    var(--white);

  border-bottom:
    1px solid var(--border);

}


.stats-grid {

  display:
    grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap:
    0;

}


.stat-card {

  padding:
    28px 20px;

  text-align:
    center;

  border-right:
    1px solid var(--border);

}


.stat-card:last-child {

  border-right:
    none;

}


.stat-number {

  font-size:
    30px;

  font-weight:
    600;

  color:
    var(--maroon);

  line-height:
    1.2;

}


.stat-label {

  margin-top:
    5px;

  font-size:
    12px;

  color:
    var(--text-light);

  text-transform:
    uppercase;

  letter-spacing:
    0.5px;

}


/* ============================================================
   MAIN
   ============================================================ */

.main-content {

  padding:
    45px 0 80px;

}


/* ============================================================
   SEARCH
   ============================================================ */

.search-section {

  margin-bottom:
    35px;

}


.search-box {

  position:
    relative;

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    12px;

  box-shadow:
    var(--shadow);

}


.search-icon {

  position:
    absolute;

  left:
    18px;

  top:
    50%;

  transform:
    translateY(-50%);

  font-size:
    18px;

}


.search-box input {

  width:
    100%;

  border:
    none;

  outline:
    none;

  padding:
    17px 55px 17px 52px;

  font-size:
    15px;

  background:
    transparent;

  color:
    var(--text);

}


.search-box input::placeholder {

  color:
    #9ba3a8;

}


.clear-search {

  position:
    absolute;

  right:
    13px;

  top:
    50%;

  transform:
    translateY(-50%);

  border:
    none;

  background:
    transparent;

  font-size:
    25px;

  color:
    #9ba3a8;

}


.clear-search:hover {

  color:
    var(--maroon);

}


/* ============================================================
   FILTERS
   ============================================================ */

.filters-section {

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  padding:
    28px;

  margin-bottom:
    40px;

}


.filters-header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    24px;

}


.filters-header h2 {

  margin:
    0;

  font-size:
    19px;

  font-weight:
    600;

}


.reset-button {

  border:
    none;

  background:
    transparent;

  color:
    var(--maroon);

  font-size:
    13px;

  font-weight:
    500;

}


.reset-button:hover {

  text-decoration:
    underline;

}


.filters-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    18px;

}


.filter-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

}


.filter-group label {

  font-size:
    12px;

  font-weight:
    600;

  color:
    var(--text-light);

}


.filter-group select {

  width:
    100%;

  padding:
    11px 12px;

  border:
    1px solid var(--border);

  border-radius:
    8px;

  background:
    white;

  color:
    var(--text);

  outline:
    none;

  font-size:
    13px;

}


.filter-group select:focus {

  border-color:
    var(--maroon);

  box-shadow:
    0 0 0 3px
    rgba(122, 23, 53, 0.08);

}


/* ============================================================
   RESULTS HEADER
   ============================================================ */

.results-header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  margin-bottom:
    20px;

}


.results-header h2 {

  margin:
    0;

  font-size:
    24px;

  font-weight:
    600;

}


.results-count {

  margin-top:
    4px;

  color:
    var(--text-light);

  font-size:
    13px;

}


/* ============================================================
   RESULTS GRID
   ============================================================ */

.results-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    22px;

}


/* ============================================================
   RESOURCE CARD
   ============================================================ */

.resource-card {

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    13px;

  padding:
    23px;

  display:
    flex;

  flex-direction:
    column;

  min-height:
    360px;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;

}


.resource-card:hover {

  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow-hover);

  border-color:
    #d3d8db;

}


/* ============================================================
   CARD HEADER
   ============================================================ */

.card-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    15px;

}


.organization-label {

  font-size:
    12px;

  font-weight:
    600;

  color:
    var(--maroon);

}


.type-badge {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    4px 9px;

  border-radius:
    20px;

  background:
    var(--maroon-light);

  color:
    var(--maroon);

  font-size:
    10px;

  font-weight:
    600;

  white-space:
    nowrap;

}


/* ============================================================
   CARD TITLE
   ============================================================ */

.card-title {

  margin:
    0 0 7px;

  font-size:
    17px;

  line-height:
    1.45;

  font-weight:
    600;

  color:
    var(--text);

}


.short-title {

  color:
    var(--text-light);

  font-size:
    12px;

  font-style:
    italic;

  margin-bottom:
    14px;

}


/* ============================================================
   CARD META
   ============================================================ */

.card-meta {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px 15px;

  margin-bottom:
    17px;

  font-size:
    11px;

  color:
    var(--text-light);

}


.card-meta strong {

  color:
    var(--text);

  font-weight:
    500;

}


/* ============================================================
   TAGS
   ============================================================ */

.tag-section {

  margin-top:
    7px;

  margin-bottom:
    6px;

  font-size:
    11px;

  color:
    var(--text-light);

}


.tag-section strong {

  font-weight:
    500;

}


.tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;

  margin-bottom:
    9px;

}


.topic-tag,
.country-tag {

  display:
    inline-block;

  padding:
    4px 8px;

  border-radius:
    5px;

  background:
    var(--tag-background);

  color:
    #59636a;

  font-size:
    10px;

  line-height:
    1.4;

}


.country-tag {

  background:
    #f8f2f4;

  color:
    var(--maroon);

}


/* ============================================================
   CARD FOOTER
   ============================================================ */

.card-footer {

  margin-top:
    auto;

  padding-top:
    18px;

  border-top:
    1px solid var(--border);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

}


.source-label {

  font-size:
    10px;

  color:
    var(--text-light);

}


.details-button {

  border:
    none;

  background:
    transparent;

  color:
    var(--maroon);

  font-size:
    12px;

  font-weight:
    600;

  white-space:
    nowrap;

}


.details-button:hover {

  text-decoration:
    underline;

}


/* ============================================================
   NO RESULTS
   ============================================================ */

.no-results {

  text-align:
    center;

  padding:
    70px 20px;

  background:
    white;

  border:
    1px solid var(--border);

  border-radius:
    14px;

}


.no-results-icon {

  font-size:
    34px;

  margin-bottom:
    10px;

}


.no-results h3 {

  margin:
    0 0 7px;

  font-size:
    20px;

}


.no-results p {

  margin:
    0 0 22px;

  color:
    var(--text-light);

  font-size:
    13px;

}


/* ============================================================
   BUTTON
   ============================================================ */

.primary-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    11px 17px;

  border:
    none;

  border-radius:
    8px;

  background:
    var(--maroon);

  color:
    white;

  text-decoration:
    none;

  font-size:
    13px;

  font-weight:
    500;

  transition:
    background 0.15s ease;

}


.primary-button:hover {

  background:
    var(--maroon-dark);

}


/* ============================================================
   ERROR
   ============================================================ */

.error-message {

  grid-column:
    1 / -1;

  background:
    white;

  border:
    1px solid #e2c7ce;

  border-radius:
    12px;

  padding:
    35px;

  text-align:
    center;

}


.error-message h3 {

  color:
    var(--maroon);

}


.error-message p {

  color:
    var(--text-light);

}


.error-details {

  font-family:
    monospace;

  font-size:
    12px;

}


/* ============================================================
   MODAL
   ============================================================ */

.modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    25px;

}


.modal.hidden {

  display:
    none;

}


.modal-overlay {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      28,
      30,
      32,
      0.65
    );

  backdrop-filter:
    blur(3px);

}


.modal-content {

  position:
    relative;

  z-index:
    2;

  width:
    min(
      850px,
      100%
    );

  max-height:
    90vh;

  overflow-y:
    auto;

  background:
    white;

  border-radius:
    15px;

  padding:
    38px;

  box-shadow:
    0 20px 70px
    rgba(0, 0, 0, 0.25);

}


.modal-close {

  position:
    absolute;

  right:
    18px;

  top:
    15px;

  width:
    36px;

  height:
    36px;

  border:
    none;

  border-radius:
    50%;

  background:
    #f0f2f3;

  color:
    var(--text);

  font-size:
    23px;

  line-height:
    1;

}


.modal-close:hover {

  background:
    var(--maroon-light);

  color:
    var(--maroon);

}


/* ============================================================
   MODAL TITLE
   ============================================================ */

.modal-content h2 {

  margin:
    0 45px 15px 0;

  font-size:
    25px;

  line-height:
    1.4;

  color:
    var(--text);

}


.modal-badges {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    30px;

}


.year-badge {

  display:
    inline-flex;

  padding:
    4px 9px;

  border-radius:
    20px;

  background:
    #f0f2f3;

  color:
    var(--text-light);

  font-size:
    11px;

  font-weight:
    500;

}


/* ============================================================
   MODAL DETAILS
   ============================================================ */

.modal-details {

  border-top:
    1px solid var(--border);

}


.modal-field {

  display:
    grid;

  grid-template-columns:
    170px 1fr;

  gap:
    20px;

  padding:
    14px 0;

  border-bottom:
    1px solid var(--border);

}


.modal-field-label {

  font-size:
    12px;

  font-weight:
    600;

  color:
    var(--text-light);

}


.modal-field-value {

  font-size:
    13px;

  color:
    var(--text);

  overflow-wrap:
    anywhere;

}


/* ============================================================
   MODAL NOTES
   ============================================================ */

.modal-notes {

  margin-top:
    25px;

  padding:
    20px;

  background:
    #f8f9fa;

  border-radius:
    9px;

}


.modal-notes h3 {

  margin:
    0 0 7px;

  font-size:
    14px;

}


.modal-notes p {

  margin:
    0;

  font-size:
    13px;

  color:
    var(--text-light);

  white-space:
    pre-line;

}


/* ============================================================
   MODAL LINK
   ============================================================ */

.modal-link {

  margin-top:
    25px;

}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {

  background:
    #252a2e;

  color:
    white;

}


.footer-inner {

  min-height:
    110px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


.footer-inner strong {

  font-size:
    14px;

}


.footer-inner p {

  margin:
    3px 0 0;

  font-size:
    11px;

  color:
    #aeb5b9;

}


.footer-meta {

  display:
    flex;

  gap:
    8px;

  align-items:
    center;

  color:
    #aeb5b9;

  font-size:
    10px;

}


/* ============================================================
   UTILITY
   ============================================================ */

.hidden {

  display:
    none !important;

}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (
  max-width: 1100px
) {

  .results-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .filters-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }


  .stats-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }


  .stat-card:nth-child(3) {

    border-right:
      none;

  }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (
  max-width: 750px
) {

  .container,
  .header-inner,
  .hero-inner {

    width:
      calc(100% - 30px);

  }


  .header-inner {

    min-height:
      70px;

  }


  .brand-subtitle {

    display:
      none;

  }


  .database-status {

    display:
      none;

  }


  .hero-content {

    padding:
      45px 0 50px;

  }


  .hero h1 {

    font-size:
      34px;

  }


  .hero p {

    font-size:
      14px;

  }


  .stats-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .stat-card {

    border-bottom:
      1px solid var(--border);

  }


  .stat-card:nth-child(2n) {

    border-right:
      none;

  }


  .stat-card:last-child {

    grid-column:
      1 / -1;

  }


  .filters-grid {

    grid-template-columns:
      1fr;

  }


  .filters-section {

    padding:
      20px;

  }


  .results-grid {

    grid-template-columns:
      1fr;

  }


  .results-header {

    align-items:
      flex-start;

  }


  .resource-card {

    min-height:
      0;

  }


  .modal {

    padding:
      10px;

  }


  .modal-content {

    padding:
      28px 20px;

    max-height:
      94vh;

  }


  .modal-field {

    grid-template-columns:
      1fr;

    gap:
      4px;

  }


  .footer-inner {

    flex-direction:
      column;

    justify-content:
      center;

    text-align:
      center;

    padding:
      25px 0;

  }

}