/*
====================================================
DoseClock Header Refinement
Phase 5 Package 6
Purpose: restore strong DoseClock branding, improve logo contrast,
and reduce legacy header bulk.
====================================================
*/

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;

  min-height: 5.25rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);

  background:
    radial-gradient(circle at 8% 20%, rgba(96, 165, 250, 0.30) 0%, rgba(96, 165, 250, 0.00) 34%),
    linear-gradient(135deg, #061f4f 0%, #0a2d6f 48%, #123f94 100%);
  color: #ffffff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 30px rgba(6, 31, 79, 0.22);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand__link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.brand__link:hover,
.brand__link:focus {
  text-decoration: none;
}

.brand__logo {
  display: block;
  width: min(46vw, 28rem);
  max-width: 100%;
  height: auto;
  max-height: 4.4rem;

  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

/*
The main content needs enough space when older CSS still treats the
header as fixed/sticky. This also prevents the page title being hidden.
*/
.page-main {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.flash-container {
  margin-bottom: 1.25rem;
}

.flash,
.flash-message {
  border-radius: 1rem;
  border: 1px solid rgba(10, 45, 111, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(10, 45, 111, 0.08);
}

@media (max-width: 900px) {
  .site-header {
    align-items: flex-start;
    min-height: 4.8rem;
    padding: 0.75rem 1rem;
  }

  .brand__logo {
    width: min(70vw, 22rem);
    max-height: 3.9rem;
  }
}

@media (max-width: 560px) {
  .site-header {
    min-height: 4.35rem;
  }

  .brand__logo {
    width: min(68vw, 18rem);
    max-height: 3.3rem;
  }

  .page-main {
    padding-top: 1.5rem;
  }
}