/* ============================================================
   IMM Indeks Strachu — style.css
   Paleta zgodna z identyfikacją IMM: pomarańcz akcentowy
   na granatowo-grafitowej bazie, jasne tło, białe karty.
   ============================================================ */

:root {
  --orange: #f58220;
  --orange-dark: #e36c05;
  --orange-soft: rgba(245, 130, 32, 0.10);

  --navy: #002752;
  --navy-deep: #00162f;

  --ink: #002752;
  --ink-soft: #476382;

  --bg: #f4f7f9;
  --surface: #ffffff;
  --line: #dbe0e6;
  --grid: rgba(0, 39, 82, 0.08);

  --footer-text: #c2cbd5;
  --footer-text-dim: #b2becb;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(18, 48, 79, 0.04), 0 8px 24px rgba(18, 48, 79, 0.06);
  --container: 1420px;

  --chart-h: 300px;
  --chart-h-full: 420px;
  --axis-w: 46px;
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Górny pasek ---------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
}

.topbar__logo-link { display: flex; align-items: center; }
.topbar__logo { height: 34px; width: auto; display: block; }

.topbar__title {
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

.topbar__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar__link {
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.15s ease;
}

.topbar__link:hover,
.topbar__link:focus,
.topbar__link.is-active {
  color: var(--orange);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 64px 0 80px;
  color: var(--ink);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--orange);
}

.hero__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
}

.hero__title {
  margin: 0 0 20px;
  /* Sized to match imm.com.pl's own H1 (2.5rem/40px desktop). */
  font-size: clamp(1.375rem, calc(1.375rem + 1.5vw), 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero__title span { color: var(--ink); }

.hero__lead {
  max-width: 820px;
  margin: 0;
  font-size: 17px;
  color: var(--ink-soft);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 12px 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(227, 108, 5, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero__cta:hover, .hero__cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(227, 108, 5, 0.32);
}

/* ---------- Siatka kart ----------
   Trzy karty w pierwszym rzędzie, karta .card--full zajmuje
   cały kolejny rząd. */

main.grid {
  padding-top: 48px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.card--third { grid-column: span 1; }
.card--full { grid-column: 1 / -1; }

.card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card__index {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 13px;
  font-weight: 800;
}

.card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.card--full .card__title { font-size: 22px; }

.card__desc {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.card--full .card__desc { max-width: 960px; font-size: 15px; }

.methodology-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.methodology-list li { padding-left: 4px; }
.methodology-list strong { color: var(--navy); }

/* ---------- Wykres ---------- */

.chart { margin-top: 18px; }

/* Legenda jako HTML — poza canvasem, zawsze pełnej wielkości,
   zawija się do kolejnych wierszy i filtruje serie po kliknięciu. */
.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 14px;
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: opacity 0.15s ease;
}

.legend__item:hover { opacity: 0.65; }

.legend__item.is-off {
  color: var(--ink-soft);
  text-decoration: line-through;
}

.legend__item.is-off .legend__dot { background: #c6d0d9 !important; }

.legend__dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* Oś Y przypięta po lewej, reszta przewijana w poziomie.
   Oś to osobny kontener o stałej szerokości — canvas w środku
   dostaje wymiary od rodzica, nie od obszaru wykresu. */
.chart__plot {
  position: relative;
  height: var(--chart-h);
  padding-left: var(--axis-w);
}

.card--full .chart__plot { height: var(--chart-h-full); }

.chart__axis {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: var(--axis-w);
  height: 100%;
  background: var(--surface);
  pointer-events: none;
}

.chart__axis canvas { display: block; }

.chart__scroll {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

.chart__inner { position: relative; height: 100%; min-width: 100%; }

.chart__canvas { display: block; }

.chart__scroll::-webkit-scrollbar { height: 8px; }
.chart__scroll::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
.chart__scroll::-webkit-scrollbar-thumb { background: #c6d0d9; border-radius: 4px; }
.chart__scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

.chart__hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }

.chart.is-static .chart__scroll { overflow-x: hidden; }
.chart.is-static .chart__hint { display: none; }

/* ---------- Stopka ---------- */

.sitefoot {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.7);
  border-top: 4px solid var(--orange);
  padding: 36px 0 24px;
}

.sitefoot p { margin: 0 0 6px; font-size: 14px; }
.sitefoot strong { color: #fff; }
.sitefoot__note { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-top: 20px; }

.sitefoot__grid {
  display: flex;
  gap: 48px;
  padding-bottom: 8px;
}

.sitefoot__contact {
  flex: 0 0 240px;
  padding-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.sitefoot__company {
  margin: 0 0 10px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  color: #fff;
}

.sitefoot__line { display: flex; gap: 6px; }
.sitefoot__line-label { color: rgba(255, 255, 255, 0.5); }

.sitefoot__contact a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.sitefoot__contact a:hover { color: var(--orange); }

.sitefoot__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.sitefoot__social img { width: 18px; height: 18px; display: block; }

.sitefoot__about { flex: 1 1 auto; min-width: 0; }
.sitefoot__about p { max-width: 760px; font-size: 13.5px; line-height: 1.6; }

@media (max-width: 760px) {
  .sitefoot__grid { flex-direction: column; gap: 24px; }
  .sitefoot__contact {
    flex-basis: auto;
    padding-right: 0;
    padding-bottom: 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ---------- RWD ---------- */

@media (max-width: 1100px) {
  main.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--full { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  main.grid { grid-template-columns: minmax(0, 1fr); }
  :root { --chart-h: 280px; --chart-h-full: 320px; --axis-w: 42px; }
  .hero { padding: 48px 0 56px; }
  .card { padding: 20px 18px; }
  .topbar__inner { height: 64px; }
  .topbar__logo { height: 28px; }
  .topbar__title { font-size: 16px; padding-left: 12px; }
  .topbar__link { font-size: 14px; }
}
/* ============================================================
   DODATKI: miernik strachu (hero) + selektory interwału/zakresu
   Paleta i tokeny bez zmian — nowe elementy korzystają z tych
   samych zmiennych, co reszta strony.
   ============================================================ */

/* ---------- Hero: dwie kolumny (tekst + miernik) ---------- */

.hero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero__text { flex: 1 1 auto; min-width: 0; }
.hero__text .hero__lead { margin: 0; }

/* ---------- Miernik strachu (sygnaturowy element) ---------- */

.gauge {
  flex: 0 0 340px;
  width: 340px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 22px;
}

.gauge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.gauge__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.gauge__date { font-size: 13px; font-weight: 600; color: var(--navy); }

.gauge__dial { position: relative; margin: 6px 0 2px; }
.gauge__svg { display: block; width: 100%; height: auto; }

.gauge__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -8px;
}

.gauge__value {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.gauge__unit {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

.gauge__zones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 12px 0 14px;
}

.gauge__zone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: default;
}

.gauge__zone i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.gauge__zone.is-active {
  color: var(--ink);
}

.gauge__cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.gauge__cat {
  display: grid;
  grid-template-columns: 1fr 74px auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.gauge__cat-name { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.gauge__cat-name i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

.gauge__cat-track { height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.gauge__cat-track b { display: block; height: 100%; border-radius: 3px; }

.gauge__cat-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy); }

/* ---------- Selektory interwału / zakresu (styl stooq) ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 18px;
}

.controls__group { display: inline-flex; align-items: center; gap: 6px; }

.controls__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 2px;
}

.controls button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.controls button:hover:not(:disabled):not(.is-active) {
  border-color: var(--orange);
  color: var(--orange);
}

.controls button.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.controls button:disabled {
  color: #b8c3cd;
  background: var(--bg);
  border-color: var(--line);
  cursor: not-allowed;
}

/* ---------- Info-tip: ikonka z podpowiedzią (metodologia) ---------- */

.info-tip {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-soft);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: help;
  outline: none;
}

.info-tip::before { content: "i"; }

.info-tip:hover,
.info-tip:focus {
  background: var(--orange-soft);
  color: var(--orange);
}

.info-tip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(calc(-50% + var(--tip-shift, 0px)));
  width: 270px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 30;
  pointer-events: none;
}

.info-tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--tip-shift, 0px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--navy);
}

/* Flipped downward when there isn't room above (near the viewport top or under the sticky header). */
.info-tip__bubble.is-below {
  bottom: auto;
  top: calc(100% + 10px);
}

.info-tip__bubble.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--navy);
}

.info-tip:hover .info-tip__bubble,
.info-tip:focus .info-tip__bubble,
.info-tip:focus-within .info-tip__bubble {
  opacity: 1;
  visibility: visible;
}

.card__head .info-tip { margin-left: 4px; }

.gauge__head-eyebrow { display: inline-flex; align-items: center; gap: 6px; }

.gauge__cats-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
  margin-top: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  border-top: 1px solid var(--line);
}

.gauge__cats { border-top: 0; padding-top: 8px; }

@media (max-width: 400px) {
  .info-tip__bubble { width: 220px; }
}

/* ---------- Eventy na wykresie: chmurki opisów, widoczne po najechaniu ---------- */

.chart__events {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Kontener eventu: dymek nad punktem + kropka na wykresie, zakotwiczony
   swoim dolnym środkiem w (x,y) danego punktu — kropka jest zawsze widoczna,
   dymek z opisem pojawia się dopiero po najechaniu myszą lub focusie. */
.event-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  outline: none;
  cursor: help;
}

.event-marker__bubble {
  max-width: 200px;
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow);
  transform: translateX(var(--bubble-shift, 0px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.event-marker:hover .event-marker__bubble,
.event-marker:focus .event-marker__bubble {
  opacity: 1;
  visibility: visible;
}

.event-marker__bubble b { display: block; color: var(--orange); margin-bottom: 2px; }

/* Flipped downward when there isn't room above (e.g. a marker near the top of the chart). */
.event-marker.is-below {
  flex-direction: column-reverse;
  transform: translate(-50%, 0);
}

.event-marker.is-below .event-marker__bubble {
  margin-bottom: 0;
  margin-top: 6px;
}

.event-marker__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--orange);
  flex: 0 0 auto;
}

.event-marker:hover .event-marker__dot,
.event-marker:focus .event-marker__dot {
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}

/* ---------- RWD: miernik pod tekstem ---------- */

@media (max-width: 960px) {
  .hero__inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .gauge { flex-basis: auto; width: 100%; max-width: 420px; }
}

@media (max-width: 760px) {
  .controls { gap: 8px 16px; }
  .controls__group { flex-wrap: wrap; }
  .controls button { padding: 5px 9px; font-size: 12px; }
}

/* ---------- Panel admina / logowanie ---------- */

.auth {
  display: flex;
  justify-content: center;
  padding: 64px 0;
}

.auth__card { width: 100%; max-width: 380px; }

.alert {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
}

.alert p { margin: 0; }
.alert p + p { margin-top: 4px; }

.alert--error {
  background: rgba(200, 48, 48, 0.08);
  color: #a12a2a;
  border: 1px solid rgba(200, 48, 48, 0.2);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.form--inline {
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__field--grow { flex: 1 1 260px; }

.form__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.form__input {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 11px;
}

.form__input:focus {
  outline: none;
  border-color: var(--orange);
}

textarea.form__input { resize: vertical; min-height: 60px; }

.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: #d66702; }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}
.btn--ghost:hover { border-color: var(--orange); color: var(--orange); }

.btn--danger {
  background: transparent;
  border-color: rgba(200, 48, 48, 0.3);
  color: #a12a2a;
}
.btn--danger:hover { background: rgba(200, 48, 48, 0.08); }

.btn--small { padding: 5px 10px; font-size: 12.5px; }

.table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }

.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.table__date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; }
.table__actions { white-space: nowrap; text-align: right; }
.table__actions .btn { margin-left: 6px; }
.table__empty { text-align: center; color: var(--ink-soft); }
.table__desc-edit { width: 100%; }

/* ============================================================
   IMM corporate header + footer (public pages: index, methodology)
   Structure/content copied from imm.com.pl, styled with this
   project's tokens. Admin pages keep the older .topbar/.sitefoot.
   ============================================================ */

.imm-masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.backdrop-blue {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
body.active-backdrop .backdrop-blue { opacity: 0.8; visibility: visible; }

.imm-masthead__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 88px;
}

.logo-and-language { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.imm-logo { display: inline-flex; align-items: center; }
.imm-logo .logo-img { display: block; }
.v-mini-spacer { width: 1px; height: 16px; background: var(--line); flex: 0 0 auto; }

.language-buttons { display: inline-flex; align-items: center; }
.language-btn {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.39px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.language-buttons .language-btn:first-child { margin-right: 10px; padding-right: 10px; }
.language-btn.active, .language-btn:hover, .language-btn:focus { color: var(--orange-dark); }

.main-menu { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: center; }
.main-menu-list { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.main-menu-item { height: 88px; padding: 0 16px; display: flex; align-items: center; }

.main-menu-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.main-menu-link span {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.39px;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-menu-item.has-sub-menu > .main-menu-link span {
  padding-right: 24px;
  background-position: 96% 50%;
  background-repeat: no-repeat;
  background-size: 17px 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9734 5.47332C12.9114 5.41084 12.8376 5.36124 12.7564 5.32739C12.6752 5.29355 12.588 5.27612 12.5 5.27612C12.412 5.27612 12.3249 5.29355 12.2436 5.32739C12.1624 5.36124 12.0887 5.41084 12.0267 5.47332L8.97335 8.52666C8.91138 8.58914 8.83764 8.63874 8.7564 8.67258C8.67516 8.70643 8.58803 8.72385 8.50002 8.72385C8.41201 8.72385 8.32487 8.70643 8.24364 8.67258C8.1624 8.63874 8.08866 8.58914 8.02669 8.52666L4.97335 5.47332C4.91138 5.41084 4.83764 5.36124 4.7564 5.32739C4.67516 5.29355 4.58803 5.27612 4.50002 5.27612C4.41201 5.27612 4.32487 5.29355 4.24364 5.32739C4.1624 5.36124 4.08866 5.41084 4.02669 5.47332C3.90252 5.59823 3.83282 5.7672 3.83282 5.94332C3.83282 6.11945 3.90252 6.28841 4.02669 6.41332L7.08669 9.47332C7.46169 9.84786 7.97002 10.0582 8.50002 10.0582C9.03002 10.0582 9.53835 9.84786 9.91335 9.47332L12.9734 6.41332C13.0975 6.28841 13.1672 6.11945 13.1672 5.94332C13.1672 5.7672 13.0975 5.59823 12.9734 5.47332Z' fill='%23476382'/%3E%3C/svg%3E%0A");
}

.main-menu-link:hover span,
.main-menu-link:focus span,
.main-menu-item.has-sub-menu:hover > .main-menu-link span {
  background-color: var(--bg);
}

.sub-menu-block {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  width: 100%;
  overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  box-shadow: var(--shadow);
  padding: 24px 40px 32px;
  gap: 10px;
}

.main-menu-item.has-sub-menu:hover > .sub-menu-block,
.main-menu-item.has-sub-menu:focus-within > .sub-menu-block { display: flex; }

.sub-menu-block.mega-menu-b { flex-wrap: wrap; }
.sub-menu-col-3 { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.sub-menu-col-4 { display: flex; flex-direction: column; gap: 16px; flex: 0 0 300px; }
.sub-menu-row { display: flex; align-items: stretch; gap: 12px; }

.subTitle { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; }
.subTitle > span:first-child { color: var(--ink); }
.subTitle .text-dot { color: var(--orange-dark); }

.sub-menu-clickable {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg);
  text-decoration: none;
  transition: background 0.15s ease;
}
.sub-menu-clickable:hover { background: var(--line); }

.menu-title-icon-wrap { display: flex; align-items: center; gap: 8px; width: 100%; }
.menu-title-icon-wrap .btn-img { width: 24px; height: 24px; flex: 0 0 auto; }
.menu-title-icon { flex: 1; font-size: 14px; font-weight: 700; color: var(--ink); }
.sub-menu-clickable .nav-text-wrap { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

.simple-menu-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.simple-menu-element {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.simple-menu-element:hover { opacity: 0.7; }
.simple-menu-element span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.39px;
  color: var(--ink);
}
.simple-menu-element .btn-img, .img-li .btn-img { width: 24px; height: 24px; flex: 0 0 auto; }
.v-spacer { width: 1px; align-self: stretch; background: var(--line); flex: 0 0 auto; }
.v-spacer-2 { height: 6px; }

.sub-menu-block.mega-menu-a { align-items: flex-start; }
.sub-menu-col { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; flex: 1 1 420px; }
.sub-menu-img-block { flex: 1 1 calc(50% - 16px); }
.sub-menu-img-block img { width: 100%; max-width: 348px; object-fit: cover; border-radius: 8px; display: block; }
.sub-menu-text-block { display: flex; flex-direction: column; gap: 16px; flex: 1 1 calc(50% - 16px); }
.sub-menu-text-block .text-block { max-width: 320px; }
.sub-menu-text-block .text-block p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.sub-menu-text-block .text-block p strong { color: var(--ink); }
.read-more { display: inline-flex; align-items: center; gap: 6px; }
.read-more .menu-icon { width: 12px; height: 12px; }
.button-text-2 { font-size: 13px; font-weight: 600; color: var(--orange-dark); text-decoration: none; }
.sub-menu-col-2 { display: flex; flex-direction: column; gap: 16px; flex: 0 0 280px; }

.hamburger-button, .app-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.app-icon { display: inline-flex; }
.hamburger-button:hover, .app-icon:hover { background: var(--bg); }
.menu-icon { width: 16px; height: 16px; display: block; }
.menu-icon--close { display: none; }

.search-and-user-menu { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.btn-orange a, a.btn-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 10px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.btn-orange a:hover, a.btn-orange:hover { opacity: 0.9; }

.btn-orange a.user-icon {
  padding-left: 36px;
  background-repeat: no-repeat, no-repeat;
  background-position: 12px 50%, 0 0;
  background-size: 16px 16px, auto;
  background-image:
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_12024_1286)'%3E%3Cpath d='M8 8C8.79113 8 9.56448 7.7654 10.2223 7.32588C10.8801 6.88635 11.3928 6.26164 11.6955 5.53073C11.9983 4.79983 12.0775 3.99556 11.9231 3.21964C11.7688 2.44372 11.3878 1.73098 10.8284 1.17157C10.269 0.612164 9.55629 0.231201 8.78036 0.0768606C8.00444 -0.0774802 7.20017 0.00173312 6.46927 0.304484C5.73836 0.607234 5.11365 1.11992 4.67412 1.77772C4.2346 2.43552 4 3.20887 4 4C4.00106 5.06054 4.42283 6.07734 5.17274 6.82726C5.92266 7.57717 6.93946 7.99894 8 8ZM8 1.33333C8.52742 1.33333 9.04299 1.48973 9.48152 1.78275C9.92005 2.07577 10.2618 2.49224 10.4637 2.97951C10.6655 3.46678 10.7183 4.00296 10.6154 4.52024C10.5125 5.03752 10.2586 5.51268 9.88562 5.88562C9.51268 6.25856 9.03752 6.51253 8.52024 6.61543C8.00296 6.71832 7.46678 6.66551 6.97951 6.46368C6.49224 6.26184 6.07577 5.92005 5.78275 5.48152C5.48973 5.04299 5.33333 4.52742 5.33333 4C5.33333 3.29276 5.61429 2.61448 6.11438 2.11438C6.61448 1.61429 7.29276 1.33333 8 1.33333Z' fill='white'/%3E%3Cpath d='M8 9.33333C6.40924 9.3351 4.88414 9.96781 3.75931 11.0926C2.63447 12.2175 2.00176 13.7426 2 15.3333C2 15.5101 2.07024 15.6797 2.19526 15.8047C2.32029 15.9298 2.48986 16 2.66667 16C2.84348 16 3.01305 15.9298 3.13807 15.8047C3.26309 15.6797 3.33333 15.5101 3.33333 15.3333C3.33333 14.0957 3.825 12.9087 4.70017 12.0335C5.57534 11.1583 6.76232 10.6667 8 10.6667C9.23767 10.6667 10.4247 11.1583 11.2998 12.0335C12.175 12.9087 12.6667 14.0957 12.6667 15.3333C12.6667 15.5101 12.7369 15.6797 12.8619 15.8047C12.9869 15.9298 13.1565 16 13.3333 16C13.5101 16 13.6797 15.9298 13.8047 15.8047C13.9298 15.6797 14 15.5101 14 15.3333C13.9982 13.7426 13.3655 12.2175 12.2407 11.0926C11.1159 9.96781 9.59075 9.3351 8 9.33333Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12024_1286'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"),
    linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
}

.app-item .sub-menu-block { flex-direction: column; align-items: stretch; }
.app-item:hover > .sub-menu-block,
.app-item:focus-within > .sub-menu-block { display: flex; }
.sub-menu-service-tag { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.block-title { display: flex; align-items: center; gap: 12px; }
.nav-sub-title { font-size: 14px; font-weight: 700; color: var(--orange-dark); }
.sub-menu-title-2 { margin: 0 0 16px; font-size: 17px; font-weight: 700; width: 100%; color: var(--ink); }

.mobile-menu-modal, .mobile-menu-modal-2L { display: none; }
.menu-elements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu-item { position: relative; }
.mobile-menu-item .menu-link {
  display: block;
  padding: 14px 28px 14px 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu-item.has-sub-menu .menu-link {
  position: relative;
}
.mobile-menu-item.has-sub-menu .menu-link::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg);
}

.user-menu { margin-top: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.user-menu .btn-orange { display: block; width: 100%; }
.user-menu .btn-orange a.user-icon {
  width: 100%;
  height: auto;
  padding: 14px 20px 14px 44px;
  background-position: 18px 50%, 0 0;
  font-size: 15px;
}

.login-alt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.login-alt-btn img { width: 16px; height: 16px; display: block; }
.login-alt-btn img:last-child { width: 10px; height: 10px; margin-left: auto; }

.language-selector { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-soft); }
.language-selector .language-buttons {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
}
.language-selector .language-buttons .language-btn { padding: 6px 14px; border-radius: 6px; }
.language-selector .language-buttons .language-btn:first-child { margin-right: 0; padding-right: 14px; }

@media (max-width: 1080px) {
  .main-menu-list { display: none; }
  .logo-and-language .language-buttons { display: none; }
  .search-and-user-menu .app-item { display: none; }

  .imm-masthead__inner { height: 66px; padding: 0 16px; }

  /* Reserve room to the right of the login button so it never sits under the
     hamburger, which is pinned to the masthead's right edge below. */
  .search-and-user-menu { padding-right: 56px; }
  .hamburger-button {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }

  body.active-1L .menu-icon--open,
  body.active-2L .menu-icon--open { display: none; }
  body.active-1L .menu-icon--close,
  body.active-2L .menu-icon--close { display: block; }

  body.active-1L, body.active-2L { overflow: hidden; }

  .mobile-menu-modal, .mobile-menu-modal-2L {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    background: var(--surface);
    padding: 20px 16px 30px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-16px, 0, 0);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1000;
    /* svh (small viewport height) keeps the panel within the visible area even
       while a mobile browser's address/tab bar is on screen; vh alone can size
       it past the fold and leave the bottom unreachable. */
    height: calc(100vh - 66px);
    height: calc(100svh - 66px);
  }
  .mobile-menu-modal-2L { z-index: 1001; }

  body.active-1L .mobile-menu-modal,
  body.active-2L .mobile-menu-modal-2L {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  /* Cloned desktop dropdown content, re-flowed for a full-screen mobile panel. */
  .mobile-menu-modal-2L > .main-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu-modal-2L > .main-menu-link span {
    padding: 0;
    background: none;
    text-transform: none;
    font-size: 16px;
    letter-spacing: normal;
  }
  .mobile-menu-modal-2L > .main-menu-link::before {
    content: "";
    width: 7px;
    height: 7px;
    border-left: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg);
  }
  .mobile-menu-modal-2L > .sub-menu-block {
    display: flex !important;
    position: static;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap; /* override .mega-menu-b's desktop flex-wrap: wrap, which would otherwise turn the max-height below into unwanted multi-column layout instead of a single scrollable column */
    gap: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* The desktop rule sets overflow: hidden on .sub-menu-block; inside this flex
       column that lets the block shrink below its content height (flex items'
       automatic min-height collapses to 0 once overflow isn't visible) instead of
       pushing the panel taller, silently clipping the lower half of every mega
       menu with no way to scroll to it. Giving it its own scroll + cap fixes that
       and matches imm.com.pl's mobile drilldown behavior. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: calc(100svh - 100px);
  }
  .mobile-menu-modal-2L .sub-menu-row { flex-direction: column; }
  .mobile-menu-modal-2L .sub-menu-col-3,
  .mobile-menu-modal-2L .sub-menu-col-4,
  .mobile-menu-modal-2L .sub-menu-col-2 { flex: 1 1 auto; }
  .mobile-menu-modal-2L .sub-menu-row .sub-menu-col-3:not(:last-child) {
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
  }
  .mobile-menu-modal-2L .sub-menu-col { display: block !important; }
  .mobile-menu-modal-2L .sub-menu-img-block,
  .mobile-menu-modal-2L .sub-menu-text-block { flex: none; width: 100%; }
  .mobile-menu-modal-2L .sub-menu-img-block { margin-bottom: 20px; }
  .mobile-menu-modal-2L .sub-menu-img-block img { max-width: 220px; }
  .mobile-menu-modal-2L .v-spacer { display: none; }

  /* The apps flyout's own heading duplicates the back-link title the drilldown
     already synthesizes from the "log in to services" trigger, so hide it here. */
  .mobile-menu-modal-2L .sub-menu-title-2 { display: none !important; }
  /* On desktop each app's login button sits left-aligned under its own card;
     in the single-column mobile drilldown it should hug the right edge instead. */
  .mobile-menu-modal-2L .sub-menu-block .btn-orange { margin-left: auto; }
}

@media (max-width: 767px) {
  .imm-logo .logo-img { max-width: 150px; }
  /* Stage 3: below this width only the hamburger remains in the masthead. */
  .search-and-user-menu .btn-orange { display: none; }
}

/* ---------- IMM corporate footer ---------- */

.imm-footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); }

.imm-footer__top {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.imm-footer__about { flex: 1 1 287px; max-width: 287px; display: flex; flex-direction: column; gap: 32px; }
.imm-footer__about-inner { display: flex; flex-direction: column; gap: 16px; }
.imm-footer__logo img { display: block; }
.imm-footer__company { margin: 0; font-style: normal; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--footer-text); }

.imm-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; }
.imm-footer__contact a { color: var(--footer-text); text-decoration: none; transition: color 0.3s ease; }
.imm-footer__contact a:hover { color: var(--orange); }
.imm-footer__contact-label { color: rgba(255, 255, 255, 0.5); }

.imm-footer__social { display: flex; align-items: center; gap: 16px; }
.imm-footer__social img { width: 20px; height: 20px; display: block; }
.imm-footer__social a { display: inline-flex; opacity: 1; transition: opacity 0.3s ease; }
.imm-footer__social a:hover, .imm-footer__social a:focus { opacity: 0.65; }

.imm-footer__badges { display: flex; flex-direction: column; gap: 8px; }
.imm-footer__badges a { display: inline-block; width: 150px; opacity: 1; transition: opacity 0.3s ease; }
.imm-footer__badges a:hover, .imm-footer__badges a:focus { opacity: 0.65; }
.imm-footer__badges img { display: block; width: 100%; height: auto; }

.imm-footer__navs-col { display: flex; flex-direction: column; gap: 24px; max-width: 300px; }
/* .imm-footer__col { flex: 1 1 150px; max-width: 200px; } */
.imm-footer__col h4 { margin: 0 0 12px; font-size: 17px; line-height: 1.45; font-weight: 700; color: #fff; }
.imm-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.imm-footer__col a { font-size: 14px; font-weight: 500; line-height: 20.4px; color: var(--footer-text); text-decoration: none; transition: color 0.3s ease; }
.imm-footer__col a:hover { color: var(--orange); }

.imm-footer__bottom { background: var(--navy-deep); }
.imm-footer__bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.imm-footer__legal { display: flex; align-items: center; gap: 16px; }
.imm-footer__legal a { font-size: 12px; font-weight: 500; color: var(--footer-text); text-decoration: none; opacity: 1; transition: opacity 0.3s ease; }
.imm-footer__legal a:hover, .imm-footer__legal a:focus { opacity: 0.65; }
.imm-footer__divider { width: 1px; height: 12px; background: var(--ink-soft); }
.imm-footer__copyright { margin: 0; font-size: 12px; font-weight: 500; color: var(--footer-text-dim); text-align: right; }

@media (max-width: 1080px) {
  .imm-footer__top { flex-direction: column; }
  .imm-footer__about,
  .imm-footer__navs-col,
  .imm-footer__col { width: 100%; max-width: 100%; }

  .imm-footer__bottom-inner { justify-content: center; text-align: center; }
  .imm-footer__copyright { text-align: center; }

  /* Footer accordion, mirrors imm.com.pl: one column open at a time, toggled by JS (header.js). */
  .imm-footer__col { position: relative; }
  .imm-footer__col h4 {
    cursor: pointer;
    padding-right: 22px;
    position: relative;
  }
  .imm-footer__col h4::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .imm-footer__col.is-open h4::after { transform: rotate(-135deg); margin-top: -2px; }
  .imm-footer__col ul {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
  }
  .imm-footer__col.is-open ul { max-height: 1000px; }
}