/* Keep in sync with style.css -- this file is enqueued on EVERY front-end page
   load (not just the block editor), so it needs the exact same 8-section
   scoping as style.css or it leaks onto WooCommerce/footer/etc. just like the
   bare global rules did before. Only the reusable base rules are mirrored
   here; .sub-heading/.cost/link-hover only exist in rendered shortcode output,
   never inside the editor's WYSIWYG surface, so they're left out. Note: since
   the 8 section wrapper divs never exist inside the block editor's own
   WYSIWYG textarea, these rules are effectively inert there -- editors won't
   see a live preview of the custom fonts while typing. That's the accepted
   tradeoff for keeping this scoped identically to the front end. */
:root {
  --color-ink: #000000;
  --color-accent-green: #39B54A;

  --font-serif: 'Garamond Premier Pro Medium', Garamond, 'Times New Roman', serif;
  --font-ui: 'Neue Haas Unica Pro', Arial, Helvetica, sans-serif;

  --h1-size: 40px;  --h1-line-height: 1.15;
  --h2-size: 34px;  --h2-line-height: 40px;
  --h3-size: 27px;  --h3-line-height: 1.3;
  --h4-size: 24px;  --h4-line-height: 1.3;
  --h5-size: 21px;  --h5-line-height: 1.3;
  --h6-size: 19px;  --h6-line-height: 1.3;
  --body-size: 31px; --body-line-height: 38px;
}

@font-face {
  font-family: 'Garamond Premier Pro Medium';
  src: url('fonts/GaramondPremrPro-Med.woff2') format('woff2'),
       url('fonts/GaramondPremrPro-Med.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garamond Premier Pro Medium';
  src: url('fonts/GaramondPremrPro-MedIt.woff2') format('woff2'),
       url('fonts/GaramondPremrPro-MedIt.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Unica Pro';
  src: url('fonts/Neue-Haas-Unica-Pro.woff2') format('woff2'),
       url('fonts/Neue-Haas-Unica-Pro.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header)
  :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-serif);
  font-weight: normal;
  color: var(--color-ink);
}

:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) h1 { font-size: var(--h1-size); line-height: var(--h1-line-height); }
:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) h2 { font-size: var(--h2-size); line-height: var(--h2-line-height); color: var(--color-accent-green); }
:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) h3 { font-size: var(--h3-size); line-height: var(--h3-line-height); }
:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) h4 { font-size: var(--h4-size); line-height: var(--h4-line-height); }
:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) h5 { font-size: var(--h5-size); line-height: var(--h5-line-height); }
:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) h6 { font-size: var(--h6-size); line-height: var(--h6-line-height); }

:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) p {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-ink);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
}

:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) a {
  color: var(--color-ink);
  transition: color 0.15s ease;
}
:is(.whats_included, .author_success_story, .testimonials, .our_team,
    .our_authors, .who_should_use, .how_it_works, .faqs, .page-content, .page-header) a:hover { color: var(--color-accent-green); }

.all-cap {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.underline {
    border-bottom:1px solid black;
}