/* ============================================================
   Diamond-blue header — hbicenter.org
   Added 2026-10-06.

   WHY THIS FILE EXISTS, read before changing anything:
   The editable project source for this site was lost. The only
   thing on the server is the compiled build, whose JavaScript and
   CSS are machine-generated and must not be hand-edited. This file
   is a separate, additive override loaded AFTER the compiled CSS,
   so the generated files stay untouched and this change can be
   undone by deleting one <link> tag.

   When the source is eventually rebuilt, port these rules into the
   Navbar component and delete this file.

   Selectors are structural (header, header nav a, header a[href="#top"])
   rather than Tailwind utility classes, because the utility class
   names are content-hashed and change on every build.

   TRANSPARENCY NOTE: the band is deliberately translucent, so page
   content shows through as you scroll. That is the look that was
   asked for, but it puts white text over an unpredictable backdrop.
   Three things keep it readable and must not be removed casually:
     1. the gradient alpha never drops below .62
     2. backdrop-filter blur + saturate, which mutes whatever is behind
     3. a text-shadow on every piece of text in the band
   ============================================================ */

:root {
  --dia-deep: #0B3A8C;
  --dia-mid: #1366D6;
  --dia-bright: #37A6F5;
  --dia-ice: #EAF6FF;
  --dia-glow: #BFE6FF;
}

/* ---- 1. The band itself ---------------------------------- */
/* `position: sticky; top: 0; z-index: 50` already comes from the
   compiled build. It is restated here so the behaviour survives even
   if that utility class is ever renamed by a future build. */
header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;

  position: -webkit-sticky;
  isolation: isolate;                 /* keeps the glint behind the text */

  background: linear-gradient(
      135deg,
      rgba(11, 58, 140, .80) 0%,
      rgba(19, 102, 214, .70) 30%,
      rgba(55, 166, 245, .62) 50%,
      rgba(19, 102, 214, .70) 70%,
      rgba(11, 58, 140, .80) 100%) !important;

  /* Blur is what makes translucency survivable: it smears whatever is
     scrolling underneath so text keeps a stable backdrop. */
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);

  border-bottom: 1px solid rgba(191, 230, 255, .55) !important;
  box-shadow: 0 2px 20px rgba(11, 58, 140, .35);
}

/* Cut facets across the band so it reads as gemstone, not a flat bar. */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .13) 0 1px,
      rgba(255, 255, 255, 0) 1px 52px),
    repeating-linear-gradient(65deg,
      rgba(11, 58, 140, .16) 0 1px,
      rgba(0, 0, 0, 0) 1px 76px);
}

/* ---- 2. The bling: a slow travelling glint --------------- */
header::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
      transparent 0%,
      rgba(255, 255, 255, .00) 35%,
      rgba(255, 255, 255, .42) 50%,
      rgba(191, 230, 255, .30) 58%,
      transparent 72%);
  transform: skewX(-18deg);
  animation: dia-glint 6.5s cubic-bezier(.55, 0, .3, 1) infinite;
}

@keyframes dia-glint {
  0%        { left: -45%; }
  55%, 100% { left: 115%; }
}

/* ---- 3. The diamond -------------------------------------- */
/* Brilliant-cut gem, drawn as SVG, set directly after the organisation
   name. It must hang off the NAME div, not the wrapper — hanging it on
   the wrapper drops it onto its own line below "FRESNO, CALIFORNIA".
   Inline data URI, so no extra network request. */
header a[href="#top"] > div > div:first-child::after {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin-left: .4em;
  vertical-align: -.2em;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<polygon points='32,3 50,20 32,61 14,20' fill='%23BFE6FF'/>\
<polygon points='14,20 32,3 32,24' fill='%23FFFFFF'/>\
<polygon points='32,3 50,20 32,24' fill='%23E6F6FF'/>\
<polygon points='14,20 32,24 32,61' fill='%236FC4F7'/>\
<polygon points='50,20 32,24 32,61' fill='%232E8FE0'/>\
<polygon points='4,22 14,20 32,61' fill='%231366D6'/>\
<polygon points='60,22 50,20 32,61' fill='%230B3A8C'/>\
<polygon points='4,22 14,20 32,3' fill='%23D8F0FF' opacity='.9'/>\
<polygon points='60,22 50,20 32,3' fill='%23A5D8FB' opacity='.9'/>\
</svg>");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 5px rgba(191, 230, 255, .95));
  animation: dia-sparkle 2.6s ease-in-out infinite;
}

/* The name div is `truncate` (overflow hidden) in the compiled CSS,
   which would clip the gem. Let it breathe. */
header a[href="#top"] > div > div:first-child {
  overflow: visible !important;
  text-overflow: clip !important;
}

@keyframes dia-sparkle {
  0%, 100% { transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 0 4px rgba(191, 230, 255, .8)); }
  50%      { transform: scale(1.14) rotate(-7deg); filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)); }
}

/* ---- 4. Text, re-coloured for a translucent dark band ---- */
/* Every text-shadow here is load-bearing, not decoration: the band is
   see-through, so the shadow is what guarantees legibility when pale
   page content scrolls underneath. */
header a[href="#top"] > div > div:first-child {
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(4, 26, 64, .85);
  letter-spacing: .005em;
}

header a[href="#top"] > div > div:last-child {
  color: var(--dia-glow) !important;
  text-shadow: 0 1px 3px rgba(4, 26, 64, .9);
}

header nav a {
  color: var(--dia-ice) !important;
  text-shadow: 0 1px 3px rgba(4, 26, 64, .85);
  transition: color .18s ease, text-shadow .18s ease;
}

header nav a:hover,
header nav a:focus-visible {
  color: #FFFFFF !important;
  text-shadow: 0 0 10px rgba(191, 230, 255, .95);
}

/* ---- 5. Logo and call-to-action -------------------------- */
/* The logo is navy-on-white; a white disc keeps it legible against the
   blue and reads as a deliberate setting rather than an artefact. */
header img {
  background: #FFFFFF;
  padding: 3px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(191, 230, 255, .75), 0 2px 8px rgba(4, 26, 64, .35);
}

/* "Contact & Appointments" is a <button>, not a link — targeting it by
   element plus its blue background class. Ice-white so it still reads
   as the primary action against a blue band. */
header button[class*="bg-["] {
  background: linear-gradient(135deg, #FFFFFF 0%, #DCEEFF 55%, #BFE6FF 100%) !important;
  color: #0B3A8C !important;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 2px 12px rgba(4, 26, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .9);
  text-shadow: none;
}

header button[class*="bg-["]:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 16px rgba(191, 230, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Mobile menu button (hamburger) must stay visible on the dark band. */
header button[aria-label="Open menu"],
header button[aria-label="Close menu"] {
  background: rgba(255, 255, 255, .92) !important;
  color: #0B3A8C !important;
  border-color: rgba(191, 230, 255, .9) !important;
}

/* ---- 6. Respect reduced-motion preferences --------------- */
@media (prefers-reduced-motion: reduce) {
  header::after,
  header a[href="#top"] > div > div:first-child::after {
    animation: none;
  }
  header::after { left: 115%; }
}