/* Small override file loaded after main.min.css to stabilize header/tagline behavior */

/* Keep header as flex and keep the desktop tagline positioned (clipped) across tablet/desktop widths.
   The tagline will only disappear when it truly overflows. */
@media (min-width: 768px) {
  .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .desktop-header-tagline {
    display: block !important;
    position: absolute !important;
    right: 80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: inherit !important;
    font-size: 1.1em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 40% !important;
    z-index: 1200 !important;
    pointer-events: none !important;
  }

  /* Allow the logo text to shrink slightly to make room, but maintain legibility */
  .logo-text {
    font-size: clamp(1.1rem, 2.6vw, 2.2rem) !important;
  }
}

/* Ensure mobile header tagline rules remain effective but not conflicting */
@media (max-width: 767px) {
  .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .mobile-header-tagline {
    min-width: 0 !important;
  }
}

/* Strong override for the 950/951 boundary:
   Keep header as a single-line flex container and force the desktop tagline
   to remain positioned (clipped with ellipsis) instead of reflowing under the logo
   when the menu is hidden around 950px. Loaded after main.min.css so it wins. */
@media (max-width: 950px) {
  .header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  .logo {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .menu-container {
    flex: 0 0 auto !important;
    margin-right: 16px !important;
  }

  .desktop-header-tagline {
    display: block !important;
    position: absolute !important;
    right: 80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 40% !important;
    z-index: 1200 !important;
    color: inherit !important;
    font-size: 1.05em !important;
    pointer-events: none !important;
  }
}

/* ---------- Subtitle proportional sizing and visibility override ---------- */

/* Ensure the logo defines --logo-font-size on the logo element (this is set in components.css).
   Here we enforce the subtitle to be 30% of that value and always visible across breakpoints. */

.logo-subtitle {
  display: block !important;
  font-size: calc(var(--logo-font-size) * 0.4) !important;
  line-height: 1 !important;
  color: hsla(0, 0%, 100%, 0.95) !important; /* keep white, slightly transparent */
  font-family: var(--font-serif) !important; /* preserve special serif styling */
  font-weight: 400 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
  margin-top: 0 !important;
}

/* Defensive rule: if any other CSS attempts to hide the subtitle around particular breakpoints,
   this ensures it remains visible until it truly doesn't fit. */
/* Define a concrete logo font-size on the .logo (used as the parent font-size).
   Subtitle (using em units) will scale to 30% of this automatically. */
.logo {
  --logo-font-size: clamp(1.2rem, 3.2vw, 2.53rem) !important;
  font-size: var(--logo-font-size) !important;
}

/* Make the visible logo text inherit the logo font-size */
.logo-text {
  font-size: 1em !important; /* 1em of .logo == var(--logo-font-size) */
}

/* Subtitle should be 40% of the logo font-size (0.4em of .logo) */
.logo-subtitle {
  display: block !important;
  font-size: 0.4em !important;
  line-height: 1 !important;
  color: hsla(0, 0%, 100%, 0.95) !important; /* ensure white color */
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
  margin-top: 0 !important;
}

/* Defensive rule: on extremely narrow screens allow subtitle to wrap slightly */
@media (max-width: 400px) {
  /* On very narrow screens, allow subtitle to wrap if absolutely necessary
     but still try to keep it visible. */
  .logo-subtitle {
    white-space: normal !important;
    font-size: calc(var(--logo-font-size) * 0.28) !important;
  }
}