/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

: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;
}

/* Every custom typography rule below is scoped to an explicit allowlist of
   content-wrapper classes ONLY -- the 8 shortcode sections (whats_included,
   author_success_story, testimonials, our_team, our_authors, who_should_use,
   how_it_works, faqs) plus .page-content and .page-header, WordPress's own
   wrappers for plain page bodies/titles (About, Terms, Privacy, Sample Page --
   confirmed absent from Shop/Cart/WooCommerce templates; .page-header holds
   the page's <h1 class="entry-title">, a sibling of .page-content, not a
   descendant -- easy to miss). Nothing outside this list (WooCommerce,
   the Elementor-built header/footer, the block editor's own chrome) is
   touched, deliberately. Those live outside this repo's control anyway
   (Elementor per-widget settings, or content this theme doesn't render), and
   reaching for bare tag selectors earlier caused real regressions (oversized
   WooCommerce descriptions, a blown-up footer address block) by styling
   things this scale was never measured against. Add new classes here
   deliberately, one at a time -- never fall back to a bare tag selector. */

: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); }

/* .sub-heading (h3) is used as-is via the h3 rule above across all 6 shortcode
   call sites (whats_included, who_should_use, how_it_works, both
   learn_about_our_other_* shortcodes, faqs) -- no override needed. .cost and
   .sub-heading only ever appear inside these 8 sections (confirmed against
   functions.php), so they don't need to repeat the :is() ancestor guard. */

.cost {
  /* price display nested under .sub-heading in whats_included -- de-emphasized,
     not a true section heading, so sized to the H6 rung instead of h4's default */
  font-size: var(--h6-size);
  line-height: var(--h6-line-height);
}

/* Fires only when a heading is actually inside a hovered link -- today that's
   just the two learn_about_our_other_* shortcodes, both already inside this
   section list, so no extra scoping needed here either. */
a:hover h3,
a:hover .sub-heading {
  color: var(--color-accent-green);
}

/* Colossal Part 2 preorder banner (shop page only) -- self-contained rather
   than folded into the shared allowlist above, since it needs white text on
   a green background instead of the standard black-on-white. A thin,
   full-bleed announcement bar, not a content block, so it uses Unica
   (the "working UI" font) at a small size, not the Garamond content scale.
   The full-bleed technique mirrors the parent theme's own .alignfull
   utility (theme.css: margin-inline: calc(50% - 50vw); max-width: 100vw). */
.preorder_banner {
  background-color: var(--color-accent-green);
  padding: 10px 44px 10px 16px;
  text-align: center;
  position: relative;
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}
.preorder_banner p {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
}
.preorder_banner a {
  color: #FFFFFF;
  text-decoration: underline;
  transition: color 0.15s ease;
}
.preorder_banner a:hover {
  color: #000000;
}
.preorder_banner__close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.preorder_banner__close:hover {
  color: #000000;
}