/*
 * Final-v28 typography ownership module.
 * Writer scope: font assets, public font family, type scale and weights only.
 */

/*
 * Montserrat v31, latin subset, served locally.
 * Official source: Google Fonts (fonts.gstatic.com), licensed under SIL OFL 1.1.
 */
@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --type-font-family: "Montserrat", sans-serif;
  --type-body-weight: 400;
  --type-lead-weight: 500;
  --type-label-weight: 600;
  --type-heading-weight: 600;
  --type-heading-strong-weight: 700;
}

/*
 * A priority override is required for family ownership because the legacy base
 * also prioritizes body and gives several page-local headings a competing
 * family. The selector is limited to public text-bearing HTML elements, so it
 * does not rewrite SVG paths, symbols or other icon internals.
 */
body,
.skip-link,
#app > .site,
#app > .site :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  button,
  label,
  legend,
  input,
  select,
  textarea,
  option,
  summary,
  li,
  dt,
  dd,
  address,
  blockquote,
  figcaption,
  small,
  strong,
  b,
  em,
  i,
  span,
  time,
  cite,
  abbr,
  mark,
  .glossary-definition
) {
  font-family: var(--type-font-family) !important;
}

#app > .site {
  font-weight: var(--type-body-weight);
}

/*
 * Priority overrides are required for weight ownership because the legacy base ends
 * with role rules that already use it. These resets are grouped by semantic
 * text role and map every public computed weight to an installed font file.
 */
#app > .site :is(
  div,
  section,
  article,
  aside,
  header,
  footer,
  nav,
  main
) {
  font-weight: inherit !important;
}

#app > .site :is(
  p,
  li,
  dt,
  dd,
  address,
  blockquote,
  figcaption,
  small,
  input,
  select,
  textarea,
  option
) {
  font-weight: var(--type-body-weight) !important;
}

#app > .site :is(.lead, [class*="lede"], [class*="intro"]) {
  font-weight: var(--type-lead-weight) !important;
}

#app > .site a:not(.btn, .menu-link, .mobile-link) {
  font-weight: var(--type-lead-weight) !important;
}

#app > .site :is(span, time, cite, em, i, abbr, mark) {
  font-weight: inherit !important;
}

#app > .site h1 {
  font-weight: var(--type-heading-strong-weight) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
}

#app > .site :is(h2, h3, h4, h5, h6) {
  font-weight: var(--type-heading-weight) !important;
}

/* The base contains a serif-only 500 exception for this former Georgia page. */
#app > .site .pva-page h1 {
  font-weight: var(--type-heading-strong-weight) !important;
}

#app > .site .pva-page :is(h2, h3, h4, h5, h6) {
  font-weight: var(--type-heading-weight) !important;
}

#app > .site h2 {
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
}

#app > .site h3 {
  line-height: 1.24 !important;
  letter-spacing: -0.012em !important;
}

#app > .site :is(h4, h5, h6) {
  line-height: 1.3 !important;
  letter-spacing: -0.006em !important;
}

#app > .site :is(strong, b) {
  font-weight: var(--type-heading-strong-weight) !important;
}

#app > .site :is(
  button:not(.burger),
  .btn,
  .menu-link,
  .mobile-link,
  .nav a,
  label,
  legend,
  summary,
  [class*="eyebrow"],
  [class*="kicker"],
  [class*="label"],
  [class*="heading"],
  [class*="title"],
  .volume-index,
  .form-topline,
  .work-help-kicker,
  .brand small,
  .mobile-volume-accordions summary strong,
  .faq-question,
  [class*="accordion"] summary
) {
  font-weight: var(--type-label-weight) !important;
}

#app > .site :is(
  [class*="eyebrow"],
  [class*="kicker"],
  [class*="label"],
  .volume-index,
  .form-topline,
  .work-help-kicker
) {
  letter-spacing: 0.04em !important;
}

/*
 * Montserrat is wider than the former condensed fallbacks. These bounded
 * typographic adjustments preserve the authored line groups without changing
 * grids or component geometry owned by the other finishing modules.
 */
@media (min-width: 1281px) {
  #app > .site.page-home .hero h1,
  #app > .site.page-organismes .officials-hero-v28 h1 {
    font-size: 48px !important;
  }
}

#app > .site.page-s-installer-en-suisse .installer-hero h1 {
  letter-spacing: -0.04em;
}

#app > .site.page-home .hero h1 {
  letter-spacing: -0.035em;
}

#app > .site main h3.short-card-title {
  letter-spacing: -0.04em;
}

@media (max-width: 1100px) {
  #app > .site.page-home .hero h1 > span,
  #app > .site.page-organismes .officials-hero-v28 h1 > span {
    overflow-wrap: break-word;
    white-space: normal;
    text-wrap: balance;
  }
}

/*
 * Desktop line-fit corrections measured with Montserrat. They affect only
 * short labels/titles that the QA proves can remain on one line in their
 * existing component; no grid, padding or component geometry is changed.
 */
@media (min-width: 1280px) {
  #app > .site.page-preparer-votre-arrivee .pva-journey-list small {
    font-size: 11.5px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
  }

  #app > .site.page-preparer-votre-arrivee .pva-theme-copy h3 {
    font-size: 18px !important;
    white-space: nowrap;
  }

  #app > .site.page-preparer-votre-arrivee #pva-guide-title {
    font-size: 26px !important;
    white-space: nowrap;
  }

  #app > .site.page-avant-le-depart #departure-timeline-title {
    letter-spacing: -0.03em !important;
    white-space: nowrap;
  }

  #app > .site.page-avant-le-depart #before-advice-title {
    font-size: 30px !important;
    white-space: nowrap;
  }

  #app > .site.page-arrivee-en-suisse .arrival-documents h4 {
    letter-spacing: -0.012em !important;
    white-space: nowrap;
  }

  #app > .site.page-guide .guide-final-cta h2 {
    max-width: none;
    text-wrap: balance;
  }

  #app > .site.page-vie-quotidienne .work-help-card > .btn > span {
    font-size: 13px !important;
    white-space: nowrap;
  }

  #app > .site.page-permis .volume-tab-head h3 {
    font-size: 17px !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap;
  }

  #app > .site.page-about #about-method-title {
    font-size: 38.5px !important;
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  #app > .site.page-organismes .official-card-summary-v28 small {
    font-size: 12.5px !important;
    letter-spacing: -0.01em !important;
    white-space: normal;
  }
}

@media (min-width: 1280px) and (max-width: 1399px) {
  #app > .site.page-preparer-votre-arrivee #pva-guide-title {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }

  #app > .site.page-organismes .official-card-summary-v28 small {
    font-size: 11.5px !important;
    letter-spacing: -0.01em !important;
    white-space: normal;
  }

}

@media (min-width: 901px) and (max-width: 1100px) {
  #app > .site.page-about .about-hero h1 {
    max-width: 720px;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  #app > .site.page-accessibility .legal-hero-copy-v28 h1 {
    letter-spacing: -0.03em !important;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

@media (max-width: 320px) {
  #app > .site.page-s-installer-en-suisse .installer-card-copy h3 {
    font-size: 18.5px !important;
    letter-spacing: -0.03em !important;
  }

  #app > .site.page-s-installer-en-suisse .installer-card-copy p {
    font-size: 13px !important;
    letter-spacing: -0.015em !important;
  }

  #app > .site.page-outils-pratiques .practical-tool-content > b {
    font-size: 11px !important;
    letter-spacing: -0.01em !important;
  }
}