/**
 * Small WordPress-only bridge for the shared static header, hero and footer.
 * The visual rules themselves continue to live in static-home.css.
 */

/* Font Awesome 6 (the React Icons `fa6` set): shared icon alignment and sizing. */
.udfo-icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.search-toggle .udfo-icon { font-size: 24px; }
.header-search .udfo-icon { font-size: 19px; }
.drawer-search .udfo-icon { font-size: 18px; }
.button .udfo-icon,
.text-link .udfo-icon,
.quick-card a .udfo-icon,
.featured-news a .udfo-icon,
.about-block > a .udfo-icon,
.footer-all .udfo-icon,
.page-button .udfo-icon,
.page-button--outline .udfo-icon { font-size: 14px; }
.hero-arrow .udfo-icon { font-size: 19px; }
.event small .udfo-icon { color: var(--red); font-size: 10px; }
.resource-card > .udfo-icon:first-child { color: var(--red); font-size: 28px; }
.resource-card > .udfo-icon:last-child { color: var(--red); font-size: 13px; }
.footer-contact li { align-items: start; }
.footer-contact .udfo-icon {
  margin-top: 3px;
  color: #fff;
  font-size: 17px;
}
.socials .udfo-icon { font-size: 16px; }

/* Block Theme global heading colors must not override headings placed over
 * photographs. The static document inherits white from .hero. */
.hero .hero-content h1,
.hero .hero-content h2 {
  color: #fff;
}

/* Core's global link color is broader than the prototype's component rules. */
.site-header a,
.hero a.button,
.site-footer a {
  color: inherit;
}

.site-header .mobile-join {
  color: var(--red);
}

@media (max-width: 767px) {
  /* iOS zooms the viewport when a focused form control renders below 16px. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  .admin-bar .site-header {
    top: var(--wp-admin-bar-offset);
  }

  .admin-bar .mobile-drawer {
    inset: var(--wp-admin-bar-offset) auto 0 0;
  }

  .mobile-drawer .drawer-nav a,
  .mobile-drawer .drawer-nav a:hover,
  .mobile-drawer .drawer-nav a:focus,
  .mobile-drawer .drawer-nav a:focus-visible {
    color: #fff;
  }
}

.hero a.button {
  color: #fff;
}

.join-banner h2,
.site-footer h2,
.newsletter-card h2,
.promo-card--red h3 {
  color: #fff;
}

.join-banner .button--light {
  color: var(--red);
}

/* Template-part elements are extra wrappers that do not exist in /theme. */
.wp-block-template-part,
.wp-block-udfo-site-header,
.wp-block-udfo-site-footer {
  padding: 0;
  margin: 0;
}

/* The static header is a direct child of the full-height page shell. Core wraps
 * a Header template part in a same-height <header>, which otherwise confines
 * position: sticky to the first 185px of the document. */
header.wp-block-template-part {
  display: contents;
}

.wp-block-udfo-site-header,
.wp-block-udfo-site-footer {
  display: contents;
}

@media (max-width: 782px) {
  .admin-bar {
    --wp-admin-bar-offset: 46px;
  }
}