/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.0.0
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
*/

/* Add your custom styles here */





/*  POST CONTENT */



/* ==========================================================================
   tc-content — progressive flow styles for WordPress post_content
   --------------------------------------------------------------------------
   Usage: add `tc-content` to the CSS Classes field of the Post Content
   widget (or any widget that outputs editor HTML).

   PRINCIPLE
   Elementor site settings own typography: font family, size, weight,
   line-height, letter-spacing, colour and link colour. This class never
   sets those by default. It only adds what the globals can't express:
   - vertical rhythm between blocks (the one thing it deliberately owns)
   - structure the editor produces: lists, quotes, media, tables, code

   Anything that would change inherited typography is opt-in, via a
   custom property or a modifier class (see section 1).

   SPACING MODEL (Every Layout "Stack")
   - ONE rule applies margin-block-start: var(--flow)
   - every other rule only adjusts --flow
   - `em` values resolve at the element using them, so heading gaps
     scale with each heading's own font size

   HOST SELECTOR
   :is(.tc-content, .tc-content > .elementor-widget-container)
   covers both the standard Elementor DOM (content inside
   .elementor-widget-container) and the optimised DOM (no container).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Settings
   --------------------------------------------------------------------------
   Spacing — always active, override per site or per widget:
     --flow-base            gap between ordinary blocks
     --flow-heading-above   gap above headings
     --flow-heading-below   gap between a heading and its content
     --flow-subheading      gap when a heading follows a heading
     --flow-feature         gap around media, quotes, tables
     --flow-list-item       gap between list items

   Accent:
     --tc-accent            set to --e-global-color-e2cda72

   Opt-in — unset by default, so nothing changes until you set them:
     --tc-measure           max line length, e.g. 70ch (default: none)
     --tc-quote-border      blockquote rule colour (default: --tc-accent)
     --tc-marker-color      list marker colour (default: --tc-accent)

   Typography overrides — see section 10. Each is gated behind its own
   modifier class, e.g. `tc-content tc-content--heading-font`.
   -------------------------------------------------------------------------- */

.tc-content {
  --flow-base: 1em;
  --flow-heading-above: 1.75em;
  --flow-heading-below: 0.5em;
  --flow-subheading: 0.75em;
  --flow-feature: 1.5em;
  --flow-list-item: 0.35em;

  /* Accent — the Elementor global colour used for quote rules and list
     markers. Falls back to the text colour if the global doesn't exist */
  --tc-accent: var(--e-global-color-e2cda72, currentColor);

  /* Tints derived from the inherited text colour, so they follow the
     globals rather than introducing new colours */
  --tc-tint-border: color-mix(in srgb, currentColor 15%, transparent);
  --tc-tint-surface: color-mix(in srgb, currentColor 6%, transparent);

  --flow: var(--flow-base);

  /* max-width is not inherited, so an unset variable falls back to
     `none`: no change unless --tc-measure is set */
  max-width: var(--tc-measure, none);
}


/* --------------------------------------------------------------------------
   2. The stack — the only place margin is applied
   Clears theme/browser margins on direct children and replaces them with
   the flow. This is the one deliberate override in the file.
   -------------------------------------------------------------------------- */

:is(.tc-content, .tc-content > .elementor-widget-container) > * {
  margin-block: 0;
}

:is(.tc-content, .tc-content > .elementor-widget-container) > * + * {
  margin-block-start: var(--flow);
}


/* --------------------------------------------------------------------------
   3. Flow overrides — general first, specific pairings after
   -------------------------------------------------------------------------- */

/* Large gap above headings */
:is(.tc-content, .tc-content > .elementor-widget-container) > :is(h2, h3, h4, h5, h6) {
  --flow: var(--flow-heading-above);
}

/* Features: media, quotes, tables, separators */
:is(.tc-content, .tc-content > .elementor-widget-container)
  > :is(figure, blockquote, table, pre, hr, .wp-block-image, .wp-block-embed,
        .wp-block-table, .wp-block-pullquote, .wp-block-quote, .wp-block-separator,
        .wp-block-gallery, .wp-block-video) {
  --flow: var(--flow-feature);
}

/* Content after a feature gets the same gap below it */
:is(.tc-content, .tc-content > .elementor-widget-container)
  > :is(figure, blockquote, table, pre, hr, .wp-block-image, .wp-block-embed,
        .wp-block-table, .wp-block-pullquote, .wp-block-quote, .wp-block-separator,
        .wp-block-gallery, .wp-block-video) + * {
  --flow: var(--flow-feature);
}

/* Tight gap after a heading (wins over the feature rule above by order) */
:is(.tc-content, .tc-content > .elementor-widget-container) > :is(h2, h3, h4, h5, h6) + * {
  --flow: var(--flow-heading-below);
}

/* Heading directly followed by a lower-level heading */
:is(.tc-content, .tc-content > .elementor-widget-container)
  > :is(h2 + h3, h3 + h4, h4 + h5, h5 + h6) {
  --flow: var(--flow-subheading);
}


/* --------------------------------------------------------------------------
   4. Nested stacks — blocks that contain their own flow
   Reset --flow so they don't inherit a heading/feature value.
   -------------------------------------------------------------------------- */

.tc-content :is(blockquote, li, .wp-block-group, .wp-block-group__inner-container,
                .wp-block-column, .wp-block-media-text__content) {
  --flow: var(--flow-base);
}

.tc-content :is(blockquote, li, .wp-block-group, .wp-block-group__inner-container,
                .wp-block-column, .wp-block-media-text__content) > * {
  margin-block: 0;
}

.tc-content :is(blockquote, li, .wp-block-group, .wp-block-group__inner-container,
                .wp-block-column, .wp-block-media-text__content) > * + * {
  margin-block-start: var(--flow);
}


/* --------------------------------------------------------------------------
   5. Lists — structure only; marker colour is opt-in
   -------------------------------------------------------------------------- */

.tc-content :is(ul, ol) {
  padding-inline-start: 1.25em;
}

.tc-content ul {
  list-style-type: disc;
}

.tc-content ol {
  list-style-type: decimal;
}

.tc-content li + li {
  margin-block-start: var(--flow-list-item);
}

.tc-content li > :is(ul, ol) {
  --flow: var(--flow-list-item);
}

.tc-content li::marker {
  color: var(--tc-marker-color, var(--tc-accent));
}


/* --------------------------------------------------------------------------
   6. Quotes — adds a rule and indent; text styling stays inherited
   -------------------------------------------------------------------------- */

.tc-content blockquote {
  margin-inline: 0;
  padding-inline-start: 1em;
  border-inline-start: 3px solid var(--tc-quote-border, var(--tc-accent));
}

.tc-content blockquote :is(cite, footer) {
  display: block;
}

/* Pullquote: core block styles handle the visual treatment; we only
   stop the inner blockquote picking up the rule above */
.tc-content .wp-block-pullquote blockquote {
  padding: 0;
  border: 0;
}


/* --------------------------------------------------------------------------
   7. Media — keep media inside the column; no layout changes
   -------------------------------------------------------------------------- */

.tc-content :is(img, video) {
  max-width: 100%;
  height: auto;
}

.tc-content figure {
  margin-inline: 0;
}

.tc-content :is(figcaption, .wp-element-caption) {
  margin-block-start: 0.5em;
}

/* Responsive embeds (YouTube, Vimeo, etc.) */
.tc-content .wp-block-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* A new section never wraps around a floated image from the last one */
.tc-content :is(h2, h3) {
  clear: both;
}

:is(.tc-content, .tc-content > .elementor-widget-container)::after {
  content: "";
  display: table;
  clear: both;
}


/* --------------------------------------------------------------------------
   8. Tables — scrolling and width only; cell styling left to theme/core
   -------------------------------------------------------------------------- */

.tc-content .wp-block-table {
  overflow-x: auto;
}

.tc-content table {
  width: 100%;
  border-collapse: collapse;
}


/* --------------------------------------------------------------------------
   9. Code and separators — additive surfaces derived from text colour
   -------------------------------------------------------------------------- */

.tc-content :not(pre) > code {
  padding: 0.1em 0.3em;
  background: var(--tc-tint-surface);
  border-radius: 3px;
}

.tc-content pre {
  padding: 1em;
  overflow-x: auto;
  background: var(--tc-tint-surface);
  border-radius: 4px;
}

.tc-content :is(hr, .wp-block-separator) {
  height: 0;
  border: 0;
  border-block-start: 1px solid var(--tc-tint-border);
}


/* ==========================================================================
   10. Overrides
   --------------------------------------------------------------------------
   For when post content must differ from the Elementor globals. Nothing
   here applies unless its modifier class is on the widget, alongside
   `tc-content`:

     tc-content tc-content--heading-font tc-content--body-size

   Then set the matching variables (Elementor custom CSS, site CSS, or
   the widget's own custom CSS):

     .tc-content {
       --tc-heading-font: "Inter Tight", sans-serif;
       --tc-body-size: 1.125rem;
     }

   WHY MODIFIERS, NOT BARE VARIABLES
   Typography properties are inherited. An unset `var()` on an inherited
   property doesn't fall back to Elementor's value; it inherits from the
   parent and silently overrides the globals. So each property only
   applies when you've explicitly switched it on.

   SIZE UNITS
   Use rem or clamp() for sizes. em compounds when elements nest
   (a p inside an li inside a blockquote).
   ========================================================================== */


/* --------------------------------------------------------------------------
   10a. Heading overrides
   --------------------------------------------------------------------------
   Modifier                       Variable(s)                 Fallback
   tc-content--heading-font       --tc-heading-font           (required)
   tc-content--heading-size       --tc-h1-size … --tc-h6-size (required, each)
   tc-content--heading-weight     --tc-heading-weight         700
   tc-content--heading-leading    --tc-heading-leading        1.15
   tc-content--heading-tracking   --tc-heading-tracking       normal
   tc-content--heading-case       --tc-heading-case           none
   tc-content--heading-color      --tc-heading-color          currentColor
   -------------------------------------------------------------------------- */

.tc-content--heading-font :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tc-heading-font);
}

/* Each level reads its own variable. Levels you don't set inherit the
   body size, so set every level that appears in your content */
.tc-content--heading-size h1 { font-size: var(--tc-h1-size); }
.tc-content--heading-size h2 { font-size: var(--tc-h2-size); }
.tc-content--heading-size h3 { font-size: var(--tc-h3-size); }
.tc-content--heading-size h4 { font-size: var(--tc-h4-size); }
.tc-content--heading-size h5 { font-size: var(--tc-h5-size); }
.tc-content--heading-size h6 { font-size: var(--tc-h6-size); }

.tc-content--heading-weight :is(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--tc-heading-weight, 700);
}

.tc-content--heading-leading :is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--tc-heading-leading, 1.15);
}

.tc-content--heading-tracking :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: var(--tc-heading-tracking, normal);
}

.tc-content--heading-case :is(h1, h2, h3, h4, h5, h6) {
  text-transform: var(--tc-heading-case, none);
}

.tc-content--heading-color :is(h1, h2, h3, h4, h5, h6) {
  color: var(--tc-heading-color, currentColor);
}


/* --------------------------------------------------------------------------
   10b. Body text overrides
   --------------------------------------------------------------------------
   Applies to paragraphs, list items, quotes, captions, definition lists
   and table cells.

   Modifier                       Variable                    Fallback
   tc-content--body-font          --tc-body-font              (required)
   tc-content--body-size          --tc-body-size              (required)
   tc-content--body-weight        --tc-body-weight            400
   tc-content--body-leading       --tc-body-leading           1.6
   tc-content--body-tracking      --tc-body-tracking          normal
   tc-content--body-color         --tc-body-color             currentColor
   -------------------------------------------------------------------------- */

.tc-content--body-font :is(p, li, blockquote, figcaption, dd, dt, td, th) {
  font-family: var(--tc-body-font);
}

.tc-content--body-size :is(p, li, blockquote, figcaption, dd, dt, td, th) {
  font-size: var(--tc-body-size);
}

.tc-content--body-weight :is(p, li, blockquote, figcaption, dd, dt, td) {
  font-weight: var(--tc-body-weight, 400);
}

.tc-content--body-leading :is(p, li, blockquote, figcaption, dd, dt, td, th) {
  line-height: var(--tc-body-leading, 1.6);
}

.tc-content--body-tracking :is(p, li, blockquote, figcaption, dd, dt, td, th) {
  letter-spacing: var(--tc-body-tracking, normal);
}

.tc-content--body-color :is(p, li, blockquote, figcaption, dd, dt, td, th) {
  color: var(--tc-body-color, currentColor);
}