/* ==========================================================================
   NJDOH core
   Shared by every page built on the new templates: topic pages, Health topics
   A to Z, landing pages, WIC. Load this first, then the page's own stylesheet.

   Full-width bands
   Never use width: 100vw with left: 50% and transform. iPhone Safari counts the
   untransformed position toward page width and the page scrolls sideways.
   Instead:
     Solid color band:  box-shadow: 0 0 0 100vmax <color>; clip-path: inset(0 -100vmax);
     Image band:        margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
   ========================================================================== */

:root {
  /* Brand */
  --njdoh-navy:           #163753;
  --njdoh-blue:           #266091;
  --njdoh-blue-hover:     #265f8f;
  --njdoh-teal:           #45a0c2;
  --njdoh-blue-light:     #88b8e0;
  --njdoh-sky:            #5dade2;
  --njdoh-link:           #185fa5;

  /* Status */
  --njdoh-danger:         #720002;
  --njdoh-success:        #56930c;
  --njdoh-warning:        #f59e0b;
  --njdoh-myth:           #b3261e;
  --njdoh-fact:           #146c2e;
  --njdoh-alert-surface:  #fff8e1;
  --njdoh-alert-accent:   #92400e;
  --njdoh-alert-text:     #78350f;

  /* Text */
  --njdoh-white:          #ffffff;
  --njdoh-ink:            #1a1c1e;
  --njdoh-text:           #333333;
  --njdoh-text-muted:     #555555;
  --njdoh-text-slate:     #495057;
  --njdoh-text-on-dark:   #f5f5f5;
  --njdoh-hotline-text:   #b5cef0;

  /* Surfaces and lines */
  --njdoh-surface-muted:  #f4f6f9;
  --njdoh-surface-tint:   #f3f8fd;
  --njdoh-surface-cyan:   #dff0f7;
  --njdoh-surface-pale:   #ddeaf7;
  --njdoh-surface-blue:   #e8eef5;
  --njdoh-surface-danger: #fde8e8;
  --njdoh-surface-gray:   #f9f9f9;
  --njdoh-surface-alt:    #f8f9fa;
  --njdoh-surface-panel:  #f5f7f9;
  --njdoh-border:         #dde8f5;
  --njdoh-border-muted:   #e3e9ef;
  --njdoh-border-soft:    #e2e2e2;
  --njdoh-divider:        #d5dde5;

  /* Layout */
  --njdoh-max-width:      1555px;
  --njdoh-radius:         8px;
  --njdoh-radius-sm:      6px;
  --njdoh-radius-lg:      10px;
  --njdoh-hero-image:     none;
  /* Set to the site header's height if the header stays pinned on phones */
  --njdoh-sticky-offset:  0px;
}

/* The template's page title is replaced by each page's own H1 */
.pageTitle { display: none; }

.clearA { margin: 0; padding: 0; height: 0; }

/* Safety net for stray sideways overflow. "clip" (unlike "hidden") does not
   turn body into a scroll container, so sticky and fixed bars keep working. */
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--njdoh-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Small uppercase label above a heading */
.njdoh-eyebrow {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--njdoh-surface-pale);
}

/* Buttons */
.njdoh-btn-primary,
.njdoh-btn-navy {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--njdoh-teal);
  border-radius: var(--njdoh-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.njdoh-btn-primary { background: var(--njdoh-white); color: var(--njdoh-navy); }
.njdoh-btn-primary:hover { background: var(--njdoh-surface-pale); color: var(--njdoh-navy); text-decoration: none; }

.njdoh-btn-navy { background: var(--njdoh-navy); color: var(--njdoh-white); }
.njdoh-btn-navy:hover { background: var(--njdoh-white); color: var(--njdoh-navy); text-decoration: none; }