/*
 * 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;
}

/* --- Site-wide design tokens ---
 * --guild-field-h  Uniform height for inputs, selects, and field-height
 *                  buttons. Shifts to 2.5rem on mobile (see @media block).
 * --guild-radius   Standard corner radius for inputs and small buttons.
 *                  Use this instead of bespoke px values across plugins.
 *                  Cards/containers may use larger radii deliberately.
 */
:root {
    --guild-field-h: 3rem;
    --guild-radius: 0.625rem;
}

/* --- Form inputs — match p typography (weight 400, same size) --- */
input,
select,
textarea {
    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: 400;
    line-height: var(--e-global-typography-text-line-height, 1.8rem);
}

/* Uniform field height — excludes textareas and non-visual inputs */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
.elementor-field-textual:not(textarea) {
    height: var(--guild-field-h);
}

.elementor-field-type-submit .elementor-button {
    height: var(--guild-field-h);
    line-height: var(--guild-field-h);
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
    font-weight: 400;
}

/* --- Lists inside Elementor rich-content widgets ---
 *
 * Covers both the Text Editor widget (free-form text blocks) and the
 * Theme Post Content widget (single-post template). Both emit raw WP
 * <ul>/<ol> and need the same hanging-indent treatment.
 *
 * Hanging-indent behavior: when an <li> wraps to a second line, the
 * wrapped text must align with the first character of the item, NOT
 * under the bullet. In RTL this means the bullet sits on the far right
 * of the row and the whole paragraph "hangs" to the left of it.
 *
 * Requires: `list-style-position: outside` (the browser default, but
 * Elementor/theme CSS sometimes resets it to inside) AND
 * `padding-inline-start` large enough to give the outside bullet a home.
 *
 * Higher specificity (.elementor-widget.elementor-widget-*) to beat
 * Elementor's own widget styles that may load later.
 */
.elementor-widget.elementor-widget-text-editor ul,
.elementor-widget.elementor-widget-text-editor ol,
.elementor-widget.elementor-widget-theme-post-content ul,
.elementor-widget.elementor-widget-theme-post-content ol {
    margin-bottom: 0.9rem;
    /* Just enough inline-start padding to give the outside marker a home
       without pushing the text way inward. 1.25em ≈ one bullet-width. */
    padding-inline-start: 1.25em;
    /* `outside` so wrapped lines hang-indent under the first character
       of the text, not under the bullet. Centered lists flip this back
       to `inside` in the next rule (bullets travel with centered text). */
    list-style-position: outside;
}

.elementor-widget.elementor-widget-text-editor ul > li,
.elementor-widget.elementor-widget-text-editor ol > li,
.elementor-widget.elementor-widget-theme-post-content ul > li,
.elementor-widget.elementor-widget-theme-post-content ol > li {
    margin-bottom: 0.2rem;
}

/* Inline links inside rich-text and signup forms ---
 * So readers can actually see a link in running text. Teal brand color,
 * medium weight, and underline so it reads as "link" at a glance.
 * Scoped to rich-text widgets + signup container so button widgets and
 * nav links aren't repainted.
 * Signup form: only `<p>` and `<label>` contexts to avoid styling
 * submit buttons or layout elements that happen to be <a>. */
.elementor-widget.elementor-widget-text-editor a,
.elementor-widget.elementor-widget-theme-post-content a,
.guild-signup-container p a,
.guild-signup-container label a {
    color: #225D73;
    font-weight: 500;
    text-decoration: underline;
}

.elementor-widget.elementor-widget-text-editor a:hover,
.elementor-widget.elementor-widget-theme-post-content a:hover,
.guild-signup-container p a:hover,
.guild-signup-container label a:hover {
    color: #225D73;
    text-decoration: underline;
}

/* When the editor adds inline `text-align: center` to a list (or a
   single item), put the marker INSIDE the content box so the bullet
   travels with the centered text. Otherwise `list-style-position:
   outside` anchors the bullet to the container's padding edge,
   producing a bullet stranded far from the centered text. */
.elementor-widget.elementor-widget-text-editor ul[style*="text-align: center"],
.elementor-widget.elementor-widget-text-editor ol[style*="text-align: center"],
.elementor-widget.elementor-widget-text-editor ul > li[style*="text-align: center"],
.elementor-widget.elementor-widget-text-editor ol > li[style*="text-align: center"],
.elementor-widget.elementor-widget-theme-post-content ul[style*="text-align: center"],
.elementor-widget.elementor-widget-theme-post-content ol[style*="text-align: center"],
.elementor-widget.elementor-widget-theme-post-content ul > li[style*="text-align: center"],
.elementor-widget.elementor-widget-theme-post-content ol > li[style*="text-align: center"] {
    list-style-position: inside;
    padding-inline-start: 0;
}

/* --- Numbered list spacing ---
 * Companion to the per-element Elementor custom CSS that paints the
 * yellow number circles. Those declarations live inside each page's
 * Elementor styles, so !important is needed here to keep the tuned
 * values authoritative across the site.
 *
 * Circles stay anchored to the inline-start edge of each <li>; the
 * padding-inline-start gives the text comfortable room next to them
 * without pushing it all the way to 60px. Uses rem so the spacing
 * scales with the user's root font size. */
.guild-numbered-list ol > li {
    margin-bottom: 1.25rem !important;
    padding-inline-start: 2.75rem !important;
}

.guild-numbered-list ol > li::before {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    top: 0.125rem;
}

/* --- 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%);
}

/* ==========================================================================
   Newsletter signup blocks — client requested regular weight, not bold (B7)
   --------------------------------------------------------------------------
   The bold comes from <strong> tags hand-typed into Elementor text editors.
   Cleanest fix is to remove them in Elementor admin; this rule overrides
   them site-wide as long as they remain. Targets:
     - the homepage #newsletter section
     - any Elementor container that holds a form whose name contains
       "ניוזלטר" or "newsletter" (covers the footer signup form too).
   ========================================================================== */
#newsletter strong,
.elementor-element.e-con:has(form[name*="ניוזלטר"]) strong,
.elementor-element.e-con:has(form[name*="newsletter" i]) strong {
    font-weight: 400 !important;
}

/* ==========================================================================
   Mobile overrides (≤767px — matches Elementor mobile breakpoint)
   ========================================================================== */
@media (max-width: 767px) {
    :root {
        --guild-field-h: 2.5rem;
    }

    /* Clip any horizontal overflow at the document root on mobile.
       Elementor's `elementor-absolute` widgets (decorative stars, vectors,
       gradients, etc.) are positioned using offsets configured on desktop;
       on narrower viewports those offsets can land them past the viewport
       edge, producing a sideways scroll on phones. We never want horizontal
       scroll anywhere on this site on mobile, so `overflow-x: clip` on
       html+body is the safety net.

       Why `clip` and not `hidden`:
         - `clip` hides overflow WITHOUT creating a scroll container, so
           it doesn't break `position: sticky` elements higher up the tree.
         - It also disallows programmatic scroll, so no script can
           accidentally scroll the page sideways.
       Supported in all modern browsers (2022+). */
    html,
    body {
        overflow-x: clip;
    }

    /* Numbered list — on mobile drop the inline-start padding so the
       yellow number circle can move to its mobile position (above the
       text, per the per-page Elementor custom CSS) instead of being
       anchored to the right of the row. `!important` beats Elementor's
       per-page custom CSS that ships later in the cascade. */
    .guild-numbered-list ol > li {
        padding-inline-start: 0 !important;
    }
}