/*
 * Guild Core – Base overrides
 *
 * Loaded after the Hello Elementor reset.css to restore the site's
 * intended baseline using Elementor's global CSS custom properties.
 *
 * All guild-* plugins should rely on these base styles for standard
 * HTML elements instead of hardcoding font sizes, weights, or colors.
 * Updating the Elementor Style Guide will propagate everywhere.
 *
 * Elementor typography mapping:
 *   primary   → H1
 *   secondary → H2
 *   accent    → H3
 *   text      → body / p
 *
 * Elementor color mapping:
 *   --e-global-color-primary  → Header Dark
 *   --e-global-color-accent   → Plum Purple
 *   --e-global-color-text     → Text Grey
 */

/* --- Body / paragraph text --- */
body {
    font-family: var(--e-global-typography-text-font-family, 'Heebo'), sans-serif;
    font-size: var(--e-global-typography-text-font-size, 1.2rem);
    font-weight: var(--e-global-typography-text-font-weight, 400);
    line-height: var(--e-global-typography-text-line-height, 1.8rem);
    color: var(--e-global-color-text, #2E404A);
}

p {
    font-family: var(--e-global-typography-text-font-family, 'Heebo'), sans-serif;
    font-size: var(--e-global-typography-text-font-size, 1.2rem);
    font-weight: var(--e-global-typography-text-font-weight, 400);
    line-height: var(--e-global-typography-text-line-height, 1.8rem);
}

/* --- Headings --- */
h1 {
    font-family: var(--e-global-typography-primary-font-family, 'Heebo'), sans-serif;
    font-size: var(--e-global-typography-primary-font-size, 4rem);
    font-weight: var(--e-global-typography-primary-font-weight, 500);
    line-height: var(--e-global-typography-primary-line-height, 65px);
}

h2 {
    font-family: var(--e-global-typography-secondary-font-family, 'Heebo'), sans-serif;
    font-size: var(--e-global-typography-secondary-font-size, 2rem);
    font-weight: var(--e-global-typography-secondary-font-weight, 700);
    line-height: var(--e-global-typography-secondary-line-height, 2rem);
}

h3 {
    font-family: var(--e-global-typography-accent-font-family, 'Heebo'), sans-serif;
    font-size: var(--e-global-typography-accent-font-size, 1.5rem);
    font-weight: var(--e-global-typography-accent-font-weight, 700);
    line-height: var(--e-global-typography-accent-line-height, 1.5rem);
}

h4, h5, h6 {
    font-family: var(--e-global-typography-accent-font-family, 'Heebo'), sans-serif;
    font-weight: 700;
}

/* --- Links --- */
a {
    color: inherit;
}

a:active,
a:hover {
    color: inherit;
}

/* --- Buttons --- */
button,
[type="button"],
[type="submit"] {
    font-family: var(--e-global-typography-text-font-family, 'Heebo'), sans-serif;
    background-color: inherit;
    border: none;
    border-radius: 0;
    color: inherit;
    padding: 0;
}

button:focus,
button:hover,
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover {
    background-color: inherit;
    color: inherit;
}

/* --- Form inputs --- */
input,
select,
textarea {
    font-family: var(--e-global-typography-text-font-family, 'Heebo'), sans-serif;
}

/* --- Lists inside Elementor widgets --- */
.elementor-widget ul {
    list-style-position: outside;
    margin-bottom: 0.9rem;
    padding-inline-start: 1.2em;
}

.elementor-widget ul > li,
.elementor-widget ol > li {
    list-style-position: outside;
    margin-bottom: 0.25rem;
}

.elementor-widget ol {
    list-style-position: outside;
    margin-bottom: 0.9rem;
    padding-inline-start: 1.5em;
}

/* --- Numbered list spacing --- */
.guild-numbered-list ol > li {
    margin-bottom: 9px;
}

.guild-numbered-list ol > li::before {
    width: 30px;
    height: 30px;
    font-size: 14px;
    top: 2px;
}

/* --- Color-swap hover utilities ---
 *
 * Add these classes to Elementor containers via Advanced > CSS Classes.
 *
 *   .guild-hover-to-plum   → yellow bg + plum text  ⟶  plum bg + yellow text
 *   .guild-hover-to-yellow → plum bg + yellow text  ⟶  yellow bg + plum text
 *
 * Works with inline SVGs (fill: currentColor) and <img> SVGs (via filter).
 */
.guild-hover-to-plum,
.guild-hover-to-yellow {
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.guild-hover-to-plum .elementor-heading-title,
.guild-hover-to-yellow .elementor-heading-title {
    transition: color 0.3s ease;
}

.guild-hover-to-plum img,
.guild-hover-to-yellow img {
    transition: filter 0.3s ease;
}

/* Inline SVGs inherit text color */
.guild-hover-to-plum svg,
.guild-hover-to-yellow svg {
    transition: fill 0.3s ease, stroke 0.3s ease;
    fill: currentColor;
}

/* Yellow → Plum on hover (high specificity to beat Elementor selectors) */
.elementor-element.guild-hover-to-plum:hover,
.elementor-element.guild-hover-to-plum:hover:not(.elementor-motion-effects-element-type-background) {
    background-color: var(--e-global-color-accent, #4B2D45) !important;
    color: var(--e-global-color-secondary, #F9C466) !important;
}

.elementor-element.guild-hover-to-plum:hover .elementor-heading-title {
    color: var(--e-global-color-secondary, #F9C466) !important;
}

/* Approximate filter to shift plum SVG → yellow */
.elementor-element.guild-hover-to-plum:hover img {
    filter: brightness(0) saturate(100%) invert(82%) sepia(30%) saturate(700%) hue-rotate(340deg) brightness(102%) contrast(96%);
}

/* Plum → Yellow on hover (high specificity to beat Elementor selectors) */
.elementor-element.guild-hover-to-yellow:hover,
.elementor-element.guild-hover-to-yellow:hover:not(.elementor-motion-effects-element-type-background) {
    background-color: var(--e-global-color-secondary, #F9C466) !important;
    color: var(--e-global-color-accent, #4B2D45) !important;
}

.elementor-element.guild-hover-to-yellow:hover .elementor-heading-title {
    color: var(--e-global-color-accent, #4B2D45) !important;
}

/* Approximate filter to shift yellow SVG → plum */
.elementor-element.guild-hover-to-yellow:hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(20%) saturate(1800%) hue-rotate(270deg) brightness(90%) contrast(95%);
}