/* ============================================================
   HEADER RESPONSIVE
============================================================ */

/* 900px */
@media (max-width: 900px) {
  #header-logo-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: unset;
    padding: 18px 2vw 10px;
    border-bottom-width: 1px;
    z-index: 1000;
    background: linear-gradient(180deg, #050a15 0%, #0a1628 100%);
  }

  body {
    padding-top: 180px !important;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .site-header__right {
    width: 100%;
    align-items: flex-start;
    margin-left: 0;
    gap: 8px;
  }

  .site-header__actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
  }

  .site-header__brand-link {
    gap: 10px;
  }

  .site-header__logo {
    width: 54px;
  }
}

/* 820px */
@media (max-width: 820px) {
  #header-logo-section {
    padding: 26px 5% 18px;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header__right {
    width: 100%;
    align-items: flex-start;
  }

  .site-header__actions {
    justify-content: flex-start;
  }

  .site-header__brand-text {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header__name,
  .site-header__tagline {
    white-space: normal;
  }
}

/* 600px */
@media (max-width: 600px) {
  #header-logo-section {
    padding: 8px 2vw 6px;
  }

  .site-header__logo {
    width: 40px;
  }

  .site-header__brand-text {
    gap: 2px;
  }

  .site-header__name {
    font-size: 1.1rem;
  }

  .site-header__tagline {
    font-size: 0.8rem;
  }

  .site-header__actions {
    gap: 4px;
  }
}

/* 480px - phone */
@media (max-width: 480px) {

  /* Banner: hide copyright so it stays one line */
  .top-banner__copyright { display: none; }

  /* Header below banner.
     STOP the diagonalFlow animation - it is the main cause of scroll
     flicker because the header is position:fixed and animated at the
     same time, forcing GPU repaints on every animation frame. */
  #header-logo-section {
    top: 32px;
    padding: 6px 10px 8px;
    animation: none !important;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Stop status dot pulse - small but still a repaint trigger */
  .site-header__status-dot { animation: none; }

  /* Also stop nav from repainting */
  #main-navigation {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Compact sizing */
  .site-header__logo { width: 36px; }
  .site-header__name { font-size: 1rem; }
  .site-header__tagline { font-size: 0.75rem; }
  .site-header__inner { gap: 6px; }

  /* Shrink headshot from 80px to 44px so it fits in the actions row */
  .site-header__owner-photo {
    width: 44px;
    height: 44px;
  }

  /* Hide HOME button, trust badge, quote button (email is kept visible) */
  #TitleHomePageContainer { display: none; }
  .site-header__trust { display: none; }
  .header-cta--primary { display: none; }

  /* Actions row: headshot + phone side by side */
  .site-header__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
  }

  /* Stop header ::before pseudo-element animation (not covered by element rule) */
  #header-logo-section::before { animation: none !important; }

  /* Stop status indicator pulse (correct class name) */
  .top-banner__status-indicator { animation: none; }

  /* Body padding: fallback — JS positionNav() sets the accurate value after layout */
  body { padding-top: 270px !important; }
}