/* =========================================
   Editorly — Utility Classes
   USAGE: add these classes in the "Additional CSS Class(es)" field
   (Gutenberg block -> Advanced) or "CSS Classes" (Elementor widget -> Advanced).
   Full list and examples in documentation/index.html */
   ========================================= */

/* ---- Spacing: margin-top ---- */
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: 8px !important; }
.mt-2  { margin-top: 16px !important; }
.mt-3  { margin-top: 24px !important; }
.mt-4  { margin-top: 40px !important; }

/* ---- Spacing: margin-bottom ---- */
.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: 8px !important; }
.mb-2  { margin-bottom: 16px !important; }
.mb-3  { margin-bottom: 24px !important; }
.mb-4  { margin-bottom: 40px !important; }

/* ---- Spacing: padding (all sides) ---- */
.p-0   { padding: 0 !important; }
.p-1   { padding: 8px !important; }
.p-2   { padding: 16px !important; }
.p-3   { padding: 24px !important; }

/* ---- Text alignment ---- */
.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }

/* ---- Text weight/style ---- */
.text-bold    { font-weight: 700 !important; }
.text-muted   { color: var(--ed-text-muted, #6b6b6b) !important; }
.text-primary { color: var(--ed-primary, #0073aa) !important; }

/* ---- Display / Flex ---- */
.d-block  { display: block !important; }
.d-flex   { display: flex !important; }
.d-none   { display: none !important; }

.flex-center       { display: flex; align-items: center; justify-content: center; }
.flex-between      { display: flex; align-items: center; justify-content: space-between; }
.flex-column        { flex-direction: column !important; }

.gap-1 { gap: 8px !important; }
.gap-2 { gap: 16px !important; }
.gap-3 { gap: 24px !important; }

/* ---- Rounded corners / shadow (matching the CSF design tokens) ---- */
.rounded       { border-radius: var(--ed-radius, 8px) !important; }
.rounded-full  { border-radius: 999px !important; }
.shadow-soft   { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; }

/* ---- Per-device visibility ----
   The 782px breakpoint matches the responsive breakpoint main.css and
   header-styles.css already use throughout the theme. */
.hide-mobile {
    display: block;
}

.hide-desktop {
    display: none;
}

@media (max-width: 782px) {
    .hide-mobile {
        display: none !important;
    }

    .hide-desktop {
        display: block !important;
    }
}

/* ---- Max width helper, e.g. to constrain text inside a full-width Elementor section ---- */
.max-w-sm { max-width: 480px !important; margin-left: auto; margin-right: auto; }
.max-w-md { max-width: 720px !important; margin-left: auto; margin-right: auto; }

/* ---- Icon Ring: a gradient-ringed circle; put an icon or letter inside ----
   Usage: <div class="icon-ring"><div class="icon-ring-inner">OK</div></div> */
.icon-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, var(--ed-primary), #ff7a59, var(--ed-primary));
    padding: 3px;
    display: inline-block;
}

.icon-ring-inner {
    width: 100%;
    height: 100%;
    background: var(--ed-panel-bg, #fff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--ed-primary);
}

/* ---- Stat Callout: a compact accent box for large numbers or statistics ----
   Usage: <div class="stat-callout"><div class="stat-callout-number">6+</div><p>Description</p></div> */
.stat-callout {
    background: var(--ed-primary);
    border-radius: var(--ed-radius);
    padding: 32px;
    color: #fff;
}

.stat-callout-number {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 8px;
    line-height: 1;
}

.stat-callout p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
    color: #fff;
}

/* ---- Dark mode: drop this element's background image ----
   Add "dark-no-bg" to a section or container in Elementor (Advanced → CSS
   Classes) to clear its background image while dark mode is active, leaving
   every other section untouched. The rule itself lives in dark-mode.css,
   alongside the site-wide option that does the same thing everywhere. */