@import url("/mobile-layout.css?v=20260918-fit1");
/* Shared masthead surfaces and destination colors (September 2026).
   Use a solid hero color so small navigation labels stay readable.
   Imported by styles.css; standalone mastheads load this file directly. */
:root {
  --site-masthead-bg:  #36505E;
  --site-navigation-bg: #2C414D;
  --site-header-rule:  #B68D4C;
  --hub-newlydiag-bg:  #0F766E; /* Newly Diagnosed: teal end of the hero */
  --hub-care-bg:       #0D2B5E; /* Find Care: deep blue */
  --hub-treatment-bg:  #1565C0; /* Treatment: blue */
  --hub-prevention-bg: #004D40; /* Prevention: deep green */
  --hub-education-bg:  #4527A0; /* Education: violet */
  --hub-wellness-bg:   #A8D3C7; /* Wellness: seafoam from the hero */
  --hub-community-bg:  #FFC247; /* Community: sunny amber from the hero */
  --hub-explainers-bg: #2D2D44; /* Learning Hub: charcoal violet */
  --hub-daily-bg:      #7B1FA2; /* Daily Message: purple */
  --hub-story-bg:      #FFE3A8; /* Voices Rising: warm amber */
  --hub-pledge-bg:     #0D2B5E; /* Pledge: deep blue */
  --hub-policy-bg:     #1B3A5C; /* Policy: navy */
  --hub-faq-bg:        #2A4A52; /* Common Questions: blue gray */
  --hub-share-bg:      #01579B; /* Share Facts: blue */
}

/* Element-qualified selectors also cover the older standalone mastheads.
   Keep these colors independent of a page's hero and content variables. */
header.site-header {
  background: var(--site-masthead-bg);
  color: #FFFFFF;
}

div.hub-nav-bar,
header.site-header nav.hub-nav.pillbar {
  background: var(--site-navigation-bg);
  border-top: 2px solid var(--site-header-rule);
  border-bottom: 2px solid var(--site-header-rule);
}

header.site-header :is(.tagline, .refined-tagline) {
  color: #E0E7E9;
}

header.site-header nav.hub-nav.pillbar a.pill {
  color: var(--hub-destination-ink, #FFFFFF);
  border-color: rgba(255,255,255,0.18);
}

/* The older guidelines page uses a separate mobile drawer. */
nav.drawer#drawer[aria-label="Mobile site navigation"] {
  background: var(--site-navigation-bg);
  color: #FFFFFF;
}
nav.drawer#drawer[aria-label="Mobile site navigation"] a {
  color: var(--hub-destination-ink, #FFFFFF);
  border-color: rgba(255,255,255,0.18);
}
nav.drawer#drawer[aria-label="Mobile site navigation"] .drawer-close {
  color: #FFFFFF;
}

@media (max-width: 768px) {
  header.site-header nav.hub-nav:not(.pillbar) {
    background: var(--site-navigation-bg);
  }
}

a.hub-link.hub-newlydiag  { --hub-destination-bg: var(--hub-newlydiag-bg); }
a.hub-link.hub-care       { --hub-destination-bg: var(--hub-care-bg); }
a.hub-link.hub-red        { --hub-destination-bg: var(--hub-treatment-bg); }
a.hub-link.hub-prevention { --hub-destination-bg: var(--hub-prevention-bg); }
a.hub-link.hub-education  { --hub-destination-bg: var(--hub-education-bg); }
a.hub-link.hub-wellness   { --hub-destination-bg: var(--hub-wellness-bg); --hub-destination-ink: #173F35; }
a.hub-link.hub-orange     { --hub-destination-bg: var(--hub-community-bg); --hub-destination-ink: #4B2C10; }
a.hub-link.hub-explainers { --hub-destination-bg: var(--hub-explainers-bg); }
a.hub-link.hub-daily      { --hub-destination-bg: var(--hub-daily-bg); }
a.hub-link.hub-story      { --hub-destination-bg: var(--hub-story-bg); --hub-destination-ink: #3B2F14; }
a.hub-link.hub-pledge     { --hub-destination-bg: var(--hub-pledge-bg); }
a.hub-link.hub-policy     { --hub-destination-bg: var(--hub-policy-bg); }
a.hub-link.hub-faq        { --hub-destination-bg: var(--hub-faq-bg); }
a.hub-link.hub-share      { --hub-destination-bg: var(--hub-share-bg); }

/* Specificity keeps legacy page-local mastheads on the shared palette. */
a.hub-link:is(.hub-newlydiag, .hub-care, .hub-red, .hub-prevention,
  .hub-education, .hub-wellness, .hub-orange, .hub-explainers, .hub-daily,
  .hub-story, .hub-pledge, .hub-policy, .hub-faq, .hub-share) {
  background: var(--hub-destination-bg);
  color: var(--hub-destination-ink, #FFFFFF);
}

a.hub-link:is(.hub-wellness, .hub-story, .hub-orange) {
  border-color: rgba(13, 27, 52, 0.18);
}

a.hub-link:is(.hub-wellness, .hub-story, .hub-orange) .hub-nav-sub {
  color: inherit;
  opacity: 1;
}

/* Keyboard focus remains visible without relying on the destination color. */
a.hub-link:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #0D1B34;
}