/* ============================================================
   institutional_header.css
   ────────────────────────────────────────────────────────────
   Scoped under .ih — drop in a different header CSS when
   spinning off DLTPT to a startup brand.
   ============================================================ */

.ih {
  --ih-max:        1200px;
  --ih-pad:        32px;
  --ih-burgundy:   rgba(165, 30, 45, 1);     /* Tübingen #a51e2d */
  --ih-burgundy-d: rgba(125, 22, 35, 1);
  --ih-ink:        rgba(28, 32, 38, 1);
  --ih-ink-soft:   rgba(75, 82, 92, 1);
  --ih-ink-faint:  rgba(130, 138, 148, 1);
  --ih-line:       rgba(0, 0, 0, 0.08);
  --ih-bg:         rgba(255, 255, 255, 1);
  --ih-bg-2:       rgba(245, 246, 248, 1);

  --ih-font:       "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ih-font-slab:  "Roboto Slab", "Source Serif Pro", Georgia, "Times New Roman", serif;

  background: var(--ih-bg);
  color: var(--ih-ink);
  font-family: var(--ih-font);
}

.ih *, .ih *::before, .ih *::after { box-sizing: border-box; }

/* ── Utility strip ─────────────────────────────────────────── */

.ih__util {
  background: var(--ih-bg-2);
  border-bottom: 1px solid var(--ih-line);
  font-size: 12px;
}

.ih__util-inner {
  max-width: var(--ih-max);
  margin: 0 auto;
  padding: 8px var(--ih-pad);
  display: flex;
  justify-content: flex-end;
}

.ih__util-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
  align-items: center;
}

.ih__util-list a {
  color: var(--ih-ink-soft);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  transition: color 120ms ease;
}

.ih__util-list a:hover {
  color: var(--ih-burgundy);
}

.ih__util-cta {
  color: var(--ih-burgundy) !important;
  font-weight: 600 !important;
}

/* Language select — sits in the utility strip, looks like a link */
.ih__lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--ih-ink-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 2px 18px 2px 0;
  /* Tiny chevron drawn with background-image so we don't ship an icon. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position:
    right 6px top 50%,
    right 2px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: color 120ms ease;
}

.ih__lang-select:hover {
  color: var(--ih-burgundy);
}

.ih__lang-select:focus {
  outline: none;
  color: var(--ih-burgundy);
}

/* ── Logo row ──────────────────────────────────────────────── */
/*  Tübingen sits on the left edge; Hector is pushed to the far  */
/*  right with margin-left: auto. No divider between them — the  */
/*  whitespace itself does the dividing work.                    */

.ih__logos {
  background: var(--ih-bg);
}

.ih__logos-inner {
  max-width: var(--ih-max);
  margin: 0 auto;
  padding: 24px var(--ih-pad);
  display: flex;
  align-items: center;
}

.ih__logo-link {
  display: inline-block;
  flex-shrink: 0;
  transition: opacity 120ms ease;
}

.ih__logo-link--right {
  margin-left: auto;        /* push Hector to the far right */
}

.ih__logo-link:hover { opacity: 0.85; }

.ih__logo {
  display: block;
  width: auto;
  object-fit: contain;
}

.ih__logo--uni    { height: 56px; }
.ih__logo--hector { height: 64px; }

/* ── Title band — burgundy left-rule heading ───────────────── */

.ih__title-band {
  background: var(--ih-bg);
  padding: 8px 0 28px;
}

.ih__title-inner {
  max-width: var(--ih-max);
  margin: 0 auto;
  padding: 0 var(--ih-pad);
}

.ih__faculty {
  font-size: 14px;
  color: var(--ih-ink-soft);
  margin: 0 0 6px;
  font-weight: 400;
  padding-left: 18px;
  border-left: 3px solid var(--ih-burgundy);
}

.ih__product {
  font-family: var(--ih-font-slab);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  color: var(--ih-ink);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
  padding-left: 18px;
  border-left: 3px solid var(--ih-burgundy);
}

/* ── Burgundy hairline divider ─────────────────────────────── */
/*  Replaces the heavier charcoal nav band — same colour cue,    */
/*  much lighter visual weight.                                  */

.ih__divider {
  height: 2px;
  background: var(--ih-burgundy);
  margin: 0 auto;
  max-width: 100%;
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ih__util-inner,
  .ih__logos-inner,
  .ih__title-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ih__util-list { gap: 14px; }

  .ih__logos-inner {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .ih__logo--uni    { height: 38px; }
  .ih__logo--hector { height: 44px; }
}

@media (max-width: 480px) {
  /* Phone: hide the contact util link to make room for lang + login. */
  .ih__util-list li:first-child { display: none; }
}