/**
 * Phantom typography.
 * Ported from src/scss/custom/phantom/typography/*.
 * Breakpoints are Bootstrap Italia's $grid-breakpoints: sm 576, md 768, lg 992.
 */

/* ---------------------------------------------------------------- blockquote */

blockquote,
.blockquote {
  border-left: 4px solid var(--pt-color-border-primary);
}

/*
 * Bootstrap Italia sets .blockquote to $font-size-base * 1.25. The token used to
 * reach it only because the generated Sass name collided with BI's own
 * $blockquote-font-size; now that the tokens are namespaced, the design value is
 * applied here explicitly. Selector matches BI's, which is the class only.
 */
.blockquote {
  font-size: var(--pt-blockquote-font-size);
}

blockquote p,
.blockquote p {
  font-family: var(--pt-blockquote-font);
  font-size: var(--pt-blockquote-font-size);
  line-height: var(--pt-font-line-height-xs);
  letter-spacing: var(--pt-font-tracking-normal);
}

blockquote footer,
blockquote cite,
.blockquote footer,
.blockquote cite {
  font-family: var(--pt-blockquote-cite-font);
  font-size: var(--pt-blockquote-cite-size);
  line-height: var(--pt-font-line-height-xxs);
  letter-spacing: var(--pt-font-tracking-normal);
}

blockquote footer::before,
blockquote cite::before,
.blockquote footer::before,
.blockquote cite::before {
  display: none;
}

/* ------------------------------------------------------------------- callout */
/* xxx da fare tutto */

.phantom-callout.bg-subtle .text-formatted,
.phantom-callout.bg-subtle .text-formatted * {
  font-family: var(--pt-body-2-font-sans);
  font-size: var(--pt-body-2-font-size);
  font-weight: var(--pt-body-2-font-weight);
  line-height: var(--pt-body-2-line-height);
}

@media (min-width: 992px) {
  .phantom-callout.bg-subtle .text-formatted,
  .phantom-callout.bg-subtle .text-formatted * {
    font-size: var(--pt-body-2-font-size-lg);
    font-weight: var(--pt-body-2-font-weight-lg);
    line-height: var(--pt-body-2-line-height-lg);
  }
}

/* ------------------------------------------------------------------- caption */

caption,
figcaption {
  font-family: var(--pt-caption-font);
  line-height: var(--pt-caption-line-height);
  font-weight: var(--pt-caption-font-weight-regular);
  letter-spacing: var(--pt-font-tracking-normal);
}

/* --------------------------------------------------------- generic typography */

*::selection {
  color: rgb(255, 255, 255);
  background-color: var(--pt-color-background-primary);
}

.text-primary,
.font-primary {
  font-family: var(--pt-font-primary) !important;
  color: var(--pt-color-text-primary) !important;
}

a.text-primary:hover {
  color: var(--pt-color-text-primary-hover) !important;
}

.text-secondary,
.font-secondary {
  font-family: var(--pt-font-secondary) !important;
}

/* link */
article a {
  color: var(--pt-color-link-text-default);
}

article a:hover {
  color: var(--pt-color-link-text-hover);
}

/* extra typography */
small,
.small {
  font-size: var(--pt-font-size-1);
  line-height: var(--pt-font-line-height-xxs);
}

/* ------------------------------------------------------------------ headings */

h1,
.h1 {
  font-family: var(--pt-font-primary);
  font-weight: var(--pt-heading-1-font-weight);
  line-height: var(--pt-heading-1-line-height);
  letter-spacing: var(--pt-font-tracking-short);
  color: var(--pt-color-text-heading-1);
}

@media (min-width: 576px) {
  h1,
  .h1 {
    font-size: var(--pt-heading-1-font-size-md);
    line-height: var(--pt-heading-1-line-height-md);
  }
}

@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: var(--pt-heading-1-font-size-lg);
    line-height: var(--pt-heading-1-line-height-lg);
    letter-spacing: var(--pt-font-tracking-normal);
  }
}

h2,
.h2 {
  font-family: var(--pt-font-primary);
  font-size: var(--pt-heading-2-font-size);
  font-weight: var(--pt-heading-2-font-weight);
  line-height: var(--pt-heading-2-line-height);
  letter-spacing: var(--pt-font-tracking-normal);
  color: var(--pt-color-text-other-headings);
}

@media (min-width: 576px) {
  h2,
  .h2 {
    font-size: var(--pt-heading-2-font-size-lg);
    line-height: var(--pt-heading-2-line-height-lg);
  }
}

h3,
.h3 {
  font-family: var(--pt-font-primary);
  font-size: var(--pt-heading-3-font-size);
  font-weight: var(--pt-heading-3-font-weight);
  line-height: var(--pt-heading-3-line-height);
  letter-spacing: var(--pt-font-tracking-normal);
  color: var(--pt-color-text-other-headings);
}

@media (min-width: 576px) {
  h3,
  .h3 {
    font-size: var(--pt-heading-3-font-size-lg);
    line-height: var(--pt-heading-3-line-height-lg);
  }
}

h4,
.h4 {
  font-family: var(--pt-font-primary);
  font-size: var(--pt-heading-4-font-size);
  font-weight: var(--pt-heading-4-font-weight);
  line-height: var(--pt-heading-4-line-height);
  letter-spacing: var(--pt-font-tracking-normal);
  color: var(--pt-color-text-other-headings);
}

@media (min-width: 576px) {
  h4,
  .h4 {
    font-size: var(--pt-heading-4-font-size-lg);
    line-height: var(--pt-heading-4-line-height-lg);
  }
}

h5,
.h5 {
  font-family: var(--pt-font-primary);
  font-size: var(--pt-heading-5-font-size);
  font-weight: var(--pt-heading-5-font-weight);
  line-height: var(--pt-heading-5-line-height);
  letter-spacing: var(--pt-font-tracking-normal);
  color: var(--pt-color-text-other-headings);
}

@media (min-width: 576px) {
  h5,
  .h5 {
    font-size: var(--pt-heading-5-font-size-lg);
    line-height: var(--pt-heading-5-line-height-lg);
  }
}

h6,
.h6 {
  font-family: var(--pt-font-primary);
  font-size: var(--pt-heading-6-font-size);
  font-weight: var(--pt-heading-6-font-weight);
  line-height: var(--pt-heading-6-line-height);
  letter-spacing: var(--pt-font-tracking-normal);
  color: var(--pt-color-text-other-headings);
}

@media (min-width: 576px) {
  h6,
  .h6 {
    font-size: var(--pt-heading-6-font-size-lg);
    line-height: var(--pt-heading-6-line-height-lg);
  }
}

/*
 * Stile custom per pagine details che hanno titoli lunghi e necessità di avere
 * size smaller (usato per events detail in owsd).
 */
.heading-long {
  font-size: var(--pt-heading-long-font-size);
  line-height: var(--pt-heading-long-line-height);
}

@media (min-width: 576px) {
  .heading-long {
    font-size: var(--pt-heading-long-font-size-md);
    line-height: var(--pt-heading-long-line-height-md);
  }
}

@media (min-width: 768px) {
  .heading-long {
    font-size: var(--pt-heading-long-font-size-lg);
    line-height: var(--pt-heading-long-line-height-lg);
  }
}

/* -------------------------------------------------------------- lead/highlight */

.lead,
.lead p {
  color: var(--pt-color-text-lead);
  font-family: var(--pt-lead-font);
  font-size: var(--pt-lead-font-size);
  line-height: var(--pt-lead-line-height);
  font-weight: var(--pt-lead-font-weight);
  letter-spacing: var(--pt-font-tracking-normal);
}

@media (min-width: 576px) {
  .lead,
  .lead p {
    font-size: var(--pt-lead-font-size-lg);
    line-height: var(--pt-lead-line-height-lg);
  }
}

/* ---------------------------------------------------------------------- list */

article li::marker {
  color: var(--pt-color-text-primary);
}