/* BagFit EU production UI polish — 2026-09-15 */

/* Accessible focus states across navigation, forms and interactive content. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(17, 104, 232, .38);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Small secondary text needs stronger contrast than the original muted shades. */
.breadcrumbs { color: #5d6b7b; }
.input-unit { color: #5d6b7b; }

/* Step cards are light by default. The previous rules were dark-section styles,
   which caused pale text on a pale background on the home page. */
.step {
  border-color: #c9d8e3;
  background: #fff;
  box-shadow: 0 10px 28px rgba(10, 42, 67, .055);
}
.step::before { color: #557100; }
.step h3 { color: var(--navy); }
.step p { color: var(--muted); }

/* Preserve the intended dark treatment whenever steps are actually inside a navy section. */
.section.navy .step {
  border-color: #36526a;
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
}
.section.navy .step::before { color: var(--lime); }
.section.navy .step h3 { color: #fff; }
.section.navy .step p { color: #c5d9e5; }

/* Vueling yellow needs dark lettering for sufficient contrast. */
.airline-card[href="/airlines/vueling/"] .airline-code { color: var(--navy); }

/* Make dense card grids feel clickable without adding visual noise. */
.airline-card,
.article-card,
.side-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.article-card:hover,
.article-card:focus-visible,
.airline-card:focus-visible {
  transform: translateY(-2px);
  border-color: #9db7c9;
  box-shadow: 0 12px 30px rgba(10, 42, 67, .09);
}

/* Keep long generated/translated values from forcing horizontal overflow. */
.result,
.result-head,
.result-state,
.fit-line,
.side-card,
.article-card,
.airline-card {
  min-width: 0;
}
.result-head strong,
.fit-line b,
.prose,
.page-lead,
.section-head p {
  overflow-wrap: anywhere;
}

/* Slightly improve separation and readability of long-form tables. */
.rule-table tbody tr:hover { background: #f8fbfd; }
.rule-table th { border-bottom-color: #cbd9e3; }

/* Footer links added by the edge worker should visually match the footer. */
.footer-bottom a {
  color: #b7cbd8;
  text-decoration: none;
}
.footer-bottom a:hover { color: #fff; }

@media (max-width: 760px) {
  .section-head h2 { font-size: clamp(1.9rem, 10vw, 2.75rem); }
  .step { padding: 22px; }
  .nav-links.open { max-height: calc(100vh - 90px); overflow-y: auto; }
}

@media (max-width: 520px) {
  .dimension-row { gap: 12px; }
  .fit-line {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .fit-line .bar { width: 100%; }
  .fit-line b { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .airline-card,
  .article-card,
  .side-card {
    transition: none;
  }
  .article-card:hover,
  .article-card:focus-visible,
  .airline-card:focus-visible {
    transform: none;
  }
}