/*
 * Translated from styleguide/components/00-base/02-base/_04-base.scss
 * (link-styling portion).
 */

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: var(--color-hyperlink);
}

a:hover,
a:focus {
  text-decoration: underline;
}

/*
 * Translated from styleguide/components/01-elements/01-text/text.scss.
 * Found entirely missing (found via the same post-Phase-7 live-comparison
 * sweep as the FontAwesome/slick/video CSS leaks, this time prompted by a
 * user report that hover-box heading text rendered wrong on a real page):
 * this whole file -- headings, heading-look utility classes, link/blockquote/
 * hr utilities -- was never ported by any phase of this migration. Every
 * <h1>-<h6> sitewide has always fallen back to the browser's own default
 * heading styling (bold, ~1.5em, no custom margin, inherited body font)
 * instead of this theme's actual intended typography (500 weight, the real
 * Dopis heading font, a defined size scale, and controlled margins) --
 * masked the whole time by global.css, which always carried this rule.
 * Confirmed via a real computed-style comparison (getComputedStyle) against
 * production: local before this fix reported font-size 24px/weight 700/
 * font-family "inter-variable" (the browser UA default, inheriting body's
 * font since UA heading rules don't set font-family) with an 19.92px UA
 * default margin; production reports font-size 32px/weight 500/font-family
 * "DopisRegular" with the 0/0.5rem margin below. The ".h1"-".h6"/".link"/
 * ".blockquote"/".hr" utility classes have zero real call sites in any
 * current template and zero live content usage (checked via a read-only DB
 * query for both), but are ported anyway for parity with production's
 * actual editorial capability, matching this migration's established
 * practice of restoring capability rather than only currently-exercised
 * paths (e.g. Phase 7 Task 7's spotlight body-image float rule).
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: var(--font-heading);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

.h1 {
  color: #000;
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 3rem;
  margin: 0 0 var(--space-one-half);
  width: auto;
}

.h2 {
  color: #000;
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 2.25rem;
  margin: 0 0 0.5rem;
  width: auto;
}

.h3 {
  color: #000;
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 1.875rem;
  margin: 0 0 var(--space-one-half);
  width: auto;
}

.h4 {
  color: #000;
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;
  margin: 0 0 var(--space-one-half);
  width: auto;
}

.h5 {
  color: #000;
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  margin: 0 0 var(--space-one-half);
  width: auto;
}

.h6 {
  color: #000;
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  margin: 0 0 var(--space-one-half);
  width: auto;
}

.link {
  color: var(--color-hyperlink);
}

.blockquote {
  color: var(--color-grey-darkest);
  text-align: center;
  font-size: 1.5rem;
  border-top: solid 3px var(--color-lehigh-brown);
  border-bottom: solid 3px var(--color-lehigh-brown);
  margin: var(--space-double);
  padding: var(--space-double);
  position: relative;
}

.blockquote::before {
  content: "\201C";
  color: var(--color-lehigh-brown);
  font-size: 20rem;
  font-family: var(--font-quotation);
  opacity: 0.1;
  position: absolute;
  top: -25px;
  left: calc(var(--space) * -1);
}

.blockquote::after {
  content: "\201D";
  color: var(--color-lehigh-brown);
  font-size: 20rem;
  font-family: var(--font-quotation);
  opacity: 0.1;
  position: absolute;
  bottom: -150px;
  right: calc(var(--space) * -1);
}

.blockquote .source {
  margin: 1rem 0 0 0;
  font-size: 1rem;
  color: var(--color-grey-k60);
  font-style: italic;
}

.blockquote .source::before {
  content: "- ";
}

.hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: currentColor;
}