/*--------------------------------------------------------------
# H4H brand wordmark ("Health 4 Haitians" next to the emblem)
# Loaded LAST in src/app/layout.js, after skins.css.
#
# Font: Lustria, matched to the stakeholder's logo. It is self-hosted by
#   next/font (src/app/layout.js), which exposes it as --font-brand.
# Color: #3f2867 = the purple sampled from the logo file.
#   Light mode -> purple. Dark mode -> white.
#   Over the homepage video (glass bar, before scrolling) -> white,
#   in both modes, because dark purple on a moving video is hard to read.
#
# The wordmark has no inner <span>, so the old ".sitename span" gradient
# rules in main.css / dark-mode.css / skins.css no longer touch it.
--------------------------------------------------------------*/

:root {
  --brand-purple: #3f2867;
  --brand-wordmark-color: var(--brand-purple);
}

html[data-theme="dark"] {
  --brand-wordmark-color: #ffffff;
}

/* Shared look: header + footer */
.header .logo .brand-wordmark,
.footer .footer-about .logo .brand-wordmark {
  font-family: var(--font-brand), Georgia, "Times New Roman", serif;
  font-weight: 400; /* Lustria has one weight; 700 would make a fake bold */
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--brand-wordmark-color);
  /* undo the template's gradient-text tricks */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  white-space: nowrap;
}

/*--------------------------------------------------------------
# Header sizes
--------------------------------------------------------------*/
.header .logo img {
  margin-right: 12px;
}

.header .logo .brand-wordmark {
  font-size: 30px;
}

/* Over the homepage video: white, with a soft shadow for contrast */
body:not(.scrolled) .header.video-hero-page .logo .brand-wordmark {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Laptops (1200-1439px): the menu row is tight, so a bit smaller */
@media (min-width: 1200px) and (max-width: 1439px) {
  .header .logo .brand-wordmark {
    font-size: 25px;
  }
}

/* Tablets */
@media (max-width: 1199px) {
  .header .logo .brand-wordmark {
    font-size: 28px;
  }
}

/* Phones: scale with the screen; "..." only as a last resort */
@media (max-width: 767px) {
  .header .logo {
    min-width: 0;
  }

  .header .logo img {
    margin-right: 8px;
  }

  .header .logo .brand-wordmark {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(17px, 5vw, 26px);
  }
}

@media (max-width: 575px) {
  .header .logo img {
    margin-right: 6px;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer .footer-about .logo .brand-wordmark {
  font-size: 32px;
}

@media (max-width: 575px) {
  .footer .footer-about .logo .brand-wordmark {
    font-size: 27px;
  }
}