/*
  Responsive overrides
  - Make header and hero logos scale with viewport
  - Non-intrusive: works without HTML changes
*/

/* Top header logos (left block) */
.top-header img {
  /* Override any inline heights on logos to allow scaling */
  height: clamp(70px, 8vw, 76px) !important;
  width: auto;
  max-width: 100%;
}

/* Main hero logo */
.custom-logo img {
  height: clamp(60px, 12vw, 80px);
  width: auto;
  max-width: 100%;
}

/* Hero title and icon next to it */
.middle {
  /* Default is 2.25rem in main.css; scale down on small screens */
  font-size: clamp(1.25rem, 5vw, 2.25rem);
}

.layer1-icon {
  /* Default is 4.5rem (~72px); allow it to shrink responsively */
  height: clamp(55px, 8vw, 72px);
  width: auto;
}

/* When very narrow, let header wrap nicely */
@media (max-width: 520px) {
  .top-header {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }
}

/* Top header links: scale font size down on smaller viewports */
.top-links a {
  /* Max 18px (as in main.css), minimum 14px on small screens */
  font-size: clamp(13px, 2.1vw, 18px);
}

/* Keep the links on one line if possible */
.top-links {
  white-space: nowrap;
}

/* On smaller screens, tighten the space between the two right-side links */
@media (max-width: 900px) {
  .top-links a { margin: 0 3px; }
  /* Override inline padding-right on the first link */
  .top-links a:first-child { padding-right: 6px !important; }
}