/* ============================================
   VitroWorks — Base reset & globals
   ============================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* While the font-loading overlay is still in the DOM, any scroll that
   happens (e.g. the browser jumping to a URL fragment, or a scroll-position
   clamp when fonts swap in and layout reflows) must snap instantly — it's
   invisible under the overlay anyway. Animating it would only become
   visible as a jarring jump once the overlay is removed. */
html:has(#font-loading-overlay) {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-base) var(--ease-standard);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Font-loading overlay: hides content until web fonts are ready, so
   visitors never see the fallback-to-webfont swap. js/site.js measures
   how long document.fonts.ready actually took on THIS load (not a stored
   assumption from a previous visit) — a cache hit removes the overlay
   instantly with no transition, a real fetch fades it out gracefully. */
#font-loading-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* Safari < 14.1 fallback for inset */
  inset: 0;
  z-index: 9999;
  background: var(--color-white);
}

#font-loading-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}

/* Consistent, visible keyboard focus */
:focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  border-radius: var(--radius-sm);
}

/* Page titles carry one accented part: the answer in a question-and-answer
   title, the second half of a two-part statement, or the keyword in a short
   one. Defined here rather than in article.css because the offerte page
   uses it too and doesn't load that stylesheet. */
.title-accent {
  color: var(--color-cyan);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.content-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ============================================
   Breadcrumbs (rendered by vw_breadcrumbs_html on every non-home page)
   ============================================ */
.breadcrumbs {
  padding-block: var(--space-4) 0;
}

.breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--color-navy-soft);
}

.breadcrumbs__item a {
  color: var(--color-navy-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumbs__item a:hover {
  color: var(--color-cyan);
}

.breadcrumbs__item [aria-current="page"] {
  color: var(--color-navy);
  font-weight: var(--fw-medium);
}

/* Breadcrumbs sit directly above the page's first section, so tighten
   that section's top padding. Lives here (not article.css) so it also
   applies on the offerte and legal pages, which don't load article.css. */
.breadcrumbs + .article-page,
.breadcrumbs + .offerte-page,
.breadcrumbs + .legal-page {
  padding-top: var(--space-6);
}

/* External-link arrow, appended by js/site.js on every cross-domain
   anchor. Sized to the surrounding text and inheriting its color, so it
   works in body copy, the footer and buttons alike. */
a .ext-icon {
  width: 0.66em;
  height: 0.66em;
  margin-left: 0.3em;
  display: inline-block;
  vertical-align: baseline;
}