/**
 * Utility classes.
 *
 * A small, curated set of token-driven utility classes, picked through the
 * Elementor "Utility Classes" control (core/class-utility-classes.php) on
 * Container / Section / Column / Flexbox / Div Block. Each class maps
 * straight to a token on :root (see the theme's assets/css/global.css), so
 * changing that token in the Customizer re-values every element using the
 * matching class instead of a value baked into that element's own settings.
 *
 * Spacing/Gap cover the full sm-6xl range; the rest stay at three steps
 * (Small/Medium/Large), reusing the *-sm/-md/-lg tokens that already exist.
 * Keep any addition here in step with ROOFKIT\Utility_Classes::catalog()
 * in core/class-utility-classes.php, which is what feeds the picker.
 *
 * @package roofing-kit\assets\css\
 * @author Masood HQ <hey@masoodhq.com>
 * @version 1.0
 */

/* Spacing (padding, all sides) */
.elementor .elementor-element.p-sm  { padding: var(--space-sm); }
.elementor .elementor-element.p-md  { padding: var(--space-md); }
.elementor .elementor-element.p-lg  { padding: var(--space-lg); }
.elementor .elementor-element.p-xl  { padding: var(--space-xl); }
.elementor .elementor-element.p-2xl { padding: var(--space-2xl); }
.elementor .elementor-element.p-3xl { padding: var(--space-3xl); }
.elementor .elementor-element.p-4xl { padding: var(--space-4xl); }
.elementor .elementor-element.p-5xl { padding: var(--space-5xl); }
.elementor .elementor-element.p-6xl { padding: var(--space-6xl); }
.elementor .elementor-element.p-7xl { padding: var(--space-7xl); }
.elementor .elementor-element.p-8xl { padding: var(--space-8xl); }

/* Gap (flex / grid containers) */
.elementor .elementor-element.gap-sm  { gap: var(--space-sm); }
.elementor .elementor-element.gap-md  { gap: var(--space-md); }
.elementor .elementor-element.gap-lg  { gap: var(--space-lg); }
.elementor .elementor-element.gap-xl  { gap: var(--space-xl); }
.elementor .elementor-element.gap-2xl { gap: var(--space-2xl); }
.elementor .elementor-element.gap-3xl { gap: var(--space-3xl); }
.elementor .elementor-element.gap-4xl { gap: var(--space-4xl); }
.elementor .elementor-element.gap-5xl { gap: var(--space-5xl); }
.elementor .elementor-element.gap-6xl { gap: var(--space-6xl); }
.elementor .elementor-element.gap-7xl { gap: var(--space-7xl); }
.elementor .elementor-element.gap-8xl { gap: var(--space-8xl); }

/* Margin Top (section-level vertical rhythm, 60-120px) */
.elementor .elementor-element.mt-sm { margin-top: var(--section-spacing-sm); }
.elementor .elementor-element.mt-md { margin-top: var(--section-spacing-md); }
.elementor .elementor-element.mt-lg { margin-top: var(--section-spacing-lg); }

/* Margin Bottom (section-level vertical rhythm, 60-120px) */
.elementor .elementor-element.mb-sm { margin-bottom: var(--section-spacing-sm); }
.elementor .elementor-element.mb-md { margin-bottom: var(--section-spacing-md); }
.elementor .elementor-element.mb-lg { margin-bottom: var(--section-spacing-lg); }

/* Background */
.elementor .elementor-element.bg-dark {
  background-color: var(--color-secondary);
  /* Flips the semantic text/border tokens so bare widget content (titles,
     body copy, descriptions, icons, outline buttons...) placed straight on
     this dark background stays readable. Components with their own fixed
     light surface (cards, badges, the form card, FAQ items...) reset these
     back to their light-mode value below, since a "direct child" var
     declaration always wins over this ancestor one for its own subtree. */
  --color-heading: var(--color-bg);
  --color-text: color-mix(in srgb, var(--color-bg) 85%, transparent);
  --color-description: color-mix(in srgb, var(--color-bg) 65%, transparent);
  --color-border: color-mix(in srgb, var(--color-bg) 20%, transparent);
  --color-border-solid: color-mix(in srgb, var(--color-bg) 25%, transparent);
  /* Also set the real `color` property (not just the custom property) so
     content with no color rule of its own - e.g. the counter widget's
     number, which only gets a color when a user explicitly picks one -
     inherits this light value instead of falling through to <body>'s
     dark default. */
  color: var(--color-text);
}
.elementor .elementor-element.bg-light { background-color: var(--color-bg); }
.elementor .elementor-element.bg-muted { background-color: var(--color-light-bg); }

/* Always-light surfaces --------------------------------------------------
 * These roofkit-* components render their own fixed light background no
 * matter what section they sit in, so their text/icon/border tokens must
 * stay pinned to the light-mode value even inside a .bg-dark ancestor.
 * Pulling from the frozen *-fixed copies (theme's global.css) keeps this
 * correct if the Customizer colors are ever changed. */
.roofkit-card-wrap,
.roofkit-review-wrap,
.roofkit-badge,
.roofkit-form-wrap,
.roofkit-faq-item,
.roofkit-form-chamber-inner,
.roofkit-btn-creative,
.roofkit-btn-white,
.roofkit-gallery--card .roofkit-gallery-item {
  --color-heading: var(--color-heading-fixed);
  --color-text: var(--color-text-fixed);
  --color-description: var(--color-description-fixed);
  --color-border: var(--color-border-fixed);
  --color-border-solid: var(--color-border-solid-fixed);
}

/* Same reset, plus a real `color` anchor for these four: unlike the badge
   (sets its own `color` directly already), the button's white/creative
   variants (own `color` set directly in button.css) and the chamber badge
   (own `color: var(--color-bg)` set directly in form.css), these wrappers
   have descendants that only get a color via plain inheritance - so they'd
   otherwise pick up .bg-dark's light `color` straight through. */
.roofkit-card-wrap,
.roofkit-review-wrap,
.roofkit-form-wrap,
.roofkit-faq-item,
.roofkit-gallery--card .roofkit-gallery-item {
  color: var(--color-text);
}

/* Border Radius */
.elementor .elementor-element.radius-sm { border-radius: var(--radius-sm); }
.elementor .elementor-element.radius-md { border-radius: var(--radius-md); }
.elementor .elementor-element.radius-lg { border-radius: var(--radius-lg); }

/* Border */
.elementor .elementor-element.border-light { border: var(--border-light); }
.elementor .elementor-element.border-dark  { border: var(--border-dark); }

/* Shadow */
.elementor .elementor-element.shadow-sm { box-shadow: var(--shadow-sm); }
.elementor .elementor-element.shadow-md { box-shadow: var(--shadow-md); }
.elementor .elementor-element.shadow-lg { box-shadow: var(--shadow-lg); }