/*
_______________________________________________
=== TYPOGRAPHY: STYLES ===
_______________________________________________
*/

.heading1 {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-heading1);
  line-height: var(--line-height-heading);
}

.heading2 {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-heading2);
  line-height: var(--line-height-heading);
}

.heading3 {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-heading3);
  line-height: var(--line-height-heading);
}

.heading4 {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-heading4);
  line-height: var(--line-height-heading);
}

.heading5 {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-heading5);
  line-height: var(--line-height-heading);
  text-transform: uppercase;
}

.paragraph {
  font-family: var(--font-family-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-text);
  margin-bottom: var(--spacing-paragraph);;
}

.caption {
  font-family: var(--font-family-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.fineprint {
  font-family: var(--font-family-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-fineprint);
  line-height: var(--line-height-fineprint);
}


/*
_______________________________________________
=== TYPOGRAPHY: BLOCK WRAPPERS ===
_______________________________________________
*/

.paragraph-wrapper {
  max-width: min(var(--width-max-ch), var(--width-max-vw));
  margin: 0 auto;
  text-align: left;
}

.caption-wrapper {
  max-width: min(var(--width-max-ch), var(--width-max-vw));
  margin: 0 auto;
  text-align: left;
}

.fineprint-wrapper {
  max-width: min(var(--width-max-ch), var(--width-max-vw));
  margin: 0 auto;
  text-align: left;
}

.quote-block-wrapper {
  max-width: min(var(--width-max-ch), var(--width-max-vw));
  margin: 0 auto;
  text-align: left;
}

.quote-card-wrapper {
  max-width: min(var(--width-max-ch), var(--width-max-vw));
  margin: 0 auto;
  text-align: left;
}


/*
_______________________________________________
=== TYPOGRAPHY: BLOCKS ===
_______________________________________________
*/

/* Quote Blocks and Quote Cards */

.quote-block {
  border-left: 2px solid var(--color-madder-red);
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  color: var(--color-charcoal-ink);
  text-align: left;
  max-width: min(65ch, 75vw);
  margin-left: auto;
  margin-right: auto;
}

.quote-block-text {
  font-style: italic;
  font-size: 1rem;
}

.quote-block-source {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  margin-top: 0.5rem;
  padding-left: 1rem;
}

.quote-card {
  background-color: var(--color-parchment-medium);
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Same as bible-quote-card and .drop-cap-container */
  text-align: left;
  color: var(--color-charcoal-ink);
  max-width: min(70ch, 80vw); /* Same as paragraph wrapper and bible-quote-card */
  margin-left: auto;
  margin-right: auto;
}

.quote-card-text {
  font-style: italic;
  font-size: 1rem;
  margin-bottom: 0.875rem;
}

.quote-card-source {
  font-style: normal;
  font-size: 1rem;
  padding-left: 1rem;
}

/* Specialised quote card for Bible text */

.bible-quote-card {
  background-color: var(--color-parchment-medium);
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Same as quote-card and .drop-cap-container */
  text-align: left;
  color: var(--color-charcoal-ink);
  max-width: min(70ch, 80vw); /* Same as paragraph wrapper and quote-card */
  margin-left: auto;
  margin-right: auto;
}

.bible-quote-card-text {
  font-style: normal;
  font-size: 1rem;
  margin-bottom: 0.875rem;
}

.bible-quote-card-source {
  font-style: normal;
  font-size: 1rem;
  padding-left: 1rem;
}


/* Margin collapse rules for when quotes follow or proceed a paragraph */

.paragraph + .quote-block,    /* Paragraph followed by quote: suppress the quote’s top margin */
.paragraph + .quote-card,
.paragraph + .bible-quote-card {
  margin-top: 0;
}

.quote-block + .paragraph,    /* Quote followed by paragraph: suppress the paragraph’s top margin */
.quote-card + .paragraph,
.bible-quote-card + .paragraph {
  margin-top: 0;
}


/*
_______________________________________________
=== TYPOGRAPHY: INITIALS ===
_______________________________________________
*/

/* Designed initially for drop caps, this will eventually expand to rubricated and decorative initials */

/* Initial Paragraph */
.initial-paragraph {
  position: relative;
  margin-bottom: var(--spacing-paragraph);
}

/* Initial Container: only box styling */
.initial-container {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-right: 0.75rem;
  margin-top: 0.5rem;
  background-color: var(--color-parchment-medium);
  border-radius: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Same as quote-card and bible-quote-card */
}

/* Initial Letter: only typography styling */
.initial-letter {
  font-family: var(--font-family-serif);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: var(--line-height-text);
  color: var(--color-charcoal-ink);
}

/* Initial Word: small caps styling for the rest of the first word */
.initial-word {
  display: inline;
  text-transform: uppercase;
  font-variant: small-caps;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* Initial Rest: resets styling for rest of paragraph to match standard paragraph */
.initial-rest {
  display: inline;
  font-size: var(--font-size-paragraph);
  line-height: var(--line-height-text);
}


/*
_______________________________________________
=== TYPOGRAPHY: RELIGIOUS TEXT ===
_______________________________________________
*/

/* For styling Bible references, words of Christ, etc. */

/*
_______________________________________________
=== TYPOGRAPHY: INTERFACE ===
_______________________________________________
*/

.ui-label {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-ui-label);
  line-height: var(--line-height-label);
}


/*
_______________________________________________
=== TYPOGRAPHY: LINKS ===
_______________________________________________
*/

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}