/* KalHeshbon centralized typography — v1.3.0 */

:root {
    --kh-control-min-height: 44px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    max-width: 100%;
}

/* Root overflow guard: prevents a single oversized widget from creating a page-wide horizontal scrollbar. */
html,
body {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

body {
    font-family: var(--kh-font);
    font-size: var(--kh-text);
    line-height: var(--kh-line);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Safe media containment. This does not resize Elementor sections or intentional full-width layouts. */
body :where(img, svg, video, canvas, iframe, table) {
    max-width: 100%;
}

body :where(p, li, td, th, blockquote, figcaption, summary, details),
body :where(.elementor-widget-text-editor, .elementor-widget-theme-post-content),
body :where(.woocommerce, .woocommerce-page) {
    font-family: var(--kh-font);
}

body :where(p, blockquote, figcaption, summary, details),
body :where(.elementor-widget-text-editor p, .elementor-widget-theme-post-content p) {
    font-size: max(var(--kh-text), 1em);
    line-height: var(--kh-line);
}

/* Preserve deliberate designer heading sizes; unify family/weight only. */
body :where(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
    font-family: var(--kh-font) !important;
    text-wrap: balance;
}

body :where(h1, .elementor-heading-title.elementor-size-xxl) {
    line-height: 1.16;
    font-weight: 700;
}

body :where(h2, .elementor-heading-title.elementor-size-xl) {
    line-height: 1.22;
    font-weight: 700;
}

body :where(h3, .elementor-heading-title.elementor-size-large) {
    line-height: 1.28;
    font-weight: 700;
}

body :where(h4, h5, h6) {
    line-height: 1.32;
    font-weight: 600;
}

/* Strong Elementor/theme overrides. :where() was intentionally NOT used here because some site rules are !important. */
body .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item,
body .elementor-widget-nav-menu .elementor-nav-menu a,
body .elementor-nav-menu .elementor-item,
body .main-navigation .menu-item > a,
body .site-navigation .menu-item > a,
body .wp-block-navigation .wp-block-navigation-item__content,
body header nav a,
body .menu > li > a {
    font-family: var(--kh-font) !important;
    font-size: var(--kh-nav) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/* Buttons: target both the clickable shell and Elementor/Woo nested label. */
body button,
body .button,
body .btn,
body [role="button"],
body input[type="submit"],
body input[type="button"],
body input[type="reset"],
body .elementor-widget-button .elementor-button,
body .elementor-widget-button .elementor-button .elementor-button-text,
body .elementor-button .elementor-button-text,
body .wp-element-button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .wc-block-components-button,
body .wc-block-components-button .wc-block-components-button__text {
    font-family: var(--kh-font) !important;
    font-size: var(--kh-btn) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

/* Keep ordinary primary actions easy to hit without forcing compact chips/tags to 44px. */
body :where(
    .elementor-widget-button .elementor-button,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .wc-block-components-button,
    button[type="submit"],
    input[type="submit"]
) {
    min-height: var(--kh-control-min-height);
}

body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body select,
body textarea {
    font-family: var(--kh-font) !important;
    font-size: var(--kh-input) !important;
    line-height: 1.35 !important;
}

body label,
body legend,
body .form-row label,
body .woocommerce-form-row label {
    font-family: var(--kh-font) !important;
    font-size: var(--kh-label) !important;
    line-height: 1.35 !important;
    font-weight: 500;
}

/* User-facing helper copy must never collapse to illegible 11–13px. */
body :where(
    small,
    .small,
    .description,
    .help-text,
    .helper-text,
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-message,
    .woocommerce-notices-wrapper,
    .woocommerce-privacy-policy-text,
    .woocommerce-terms-and-conditions-wrapper
) {
    font-family: var(--kh-font);
    font-size: var(--kh-text-sm) !important;
    line-height: 1.45;
}

/* Promo / announcement bars. Strong selectors include the nested Elementor text widgets. */
body [class*="announcement"] :is(p, span, a, strong),
body [class*="promo-bar"] :is(p, span, a, strong),
body [class*="notice-bar"] :is(p, span, a, strong),
body [class*="top-bar"] :is(p, span, a, strong),
body [class*="topbar"] :is(p, span, a, strong),
body [class*="announcement"] .elementor-widget-text-editor,
body [class*="promo-bar"] .elementor-widget-text-editor,
body [class*="notice-bar"] .elementor-widget-text-editor,
body [class*="top-bar"] .elementor-widget-text-editor,
body [class*="topbar"] .elementor-widget-text-editor {
    font-family: var(--kh-font) !important;
    font-size: var(--kh-announcement) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Product/card titles. */
body :where(.woocommerce-loop-product__title, .wc-block-grid__product-title, .product_title, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td) {
    font-family: var(--kh-font);
}

body .woocommerce-loop-product__title,
body .wc-block-grid__product-title {
    font-size: var(--kh-card-title) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

body :where(.price, .amount, .woocommerce-Price-amount) {
    font-family: var(--kh-font);
    font-variant-numeric: tabular-nums;
}

/* Common KalHeshbon tool surfaces. */
body :where(
    [class*="kalheshbon"],
    [class*="kh-"],
    [id*="kalheshbon"],
    [id^="kh-"]
) :where(p, li, span:not(.dashicons):not([class*="fa-"]):not([class*="icon"]), button, input, select, textarea, label) {
    font-family: var(--kh-font);
}

/* Math is deliberately larger than ordinary UI copy. */
body :where(
    [class*="math"],
    [class*="exercise"],
    [class*="question"],
    [class*="equation"],
    [class*="fraction"],
    [data-math],
    .kh-math
) {
    font-size: max(var(--kh-math), 1em) !important;
    line-height: 1.35;
}

/* Grade 1–2 opt-in surfaces get another 15%. */
body :where([data-kh-grade="1"], [data-kh-grade="2"], .kh-grade-1, .kh-grade-2) :where(
    [class*="math"], [class*="exercise"], [class*="question"], [class*="equation"], [data-math], .kh-math
) {
    font-size: calc(var(--kh-math) * 1.15) !important;
}

/* Long Hebrew labels should wrap instead of widening the page. */
body :where(p, li, a, button, label, .elementor-button-text, .woocommerce-loop-product__title) {
    overflow-wrap: break-word;
}

/* Never replace icon glyph fonts. */
body :where(.dashicons, [class^="fa-"], [class*=" fa-"], .fa, .fas, .far, .fab, [class*="elementor-icon"], [class*="eicon-"]) {
    font-family: inherit !important;
}

@media (max-width: 767px) {
    body {
        font-size: var(--kh-text-mobile);
    }

    body :where(p, blockquote, figcaption, summary, details),
    body :where(.elementor-widget-text-editor p, .elementor-widget-theme-post-content p) {
        font-size: max(var(--kh-text-mobile), 1em);
    }

    body .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item,
    body .elementor-widget-nav-menu .elementor-nav-menu a,
    body .elementor-nav-menu .elementor-item,
    body .main-navigation .menu-item > a,
    body .site-navigation .menu-item > a,
    body .wp-block-navigation .wp-block-navigation-item__content,
    body header nav a,
    body .menu > li > a {
        font-size: max(17px, var(--kh-nav)) !important;
    }

    body button,
    body .button,
    body .btn,
    body [role="button"],
    body input[type="submit"],
    body input[type="button"],
    body .elementor-widget-button .elementor-button,
    body .elementor-widget-button .elementor-button .elementor-button-text,
    body .elementor-button .elementor-button-text,
    body .wp-element-button,
    body .wc-block-components-button,
    body .wc-block-components-button .wc-block-components-button__text {
        font-size: max(17px, var(--kh-btn)) !important;
    }

    body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body select,
    body textarea {
        font-size: max(16px, var(--kh-input)) !important;
    }
}

/* v1.3.0: Elementor often puts short visible copy in nested spans instead of <p>.
   Keep those readable without inflating the whole text widget to body size. */
body .elementor-widget-text-editor :where(span, strong, b, em, i),
body .elementor-widget-html :where(.kh-copy, .kh-label, .kh-eyebrow, .kh-kicker),
body :where(.eyebrow, .kicker, .badge, .tag, .chip, [class*="badge"], [class*="chip"], [class*="eyebrow"], [class*="kicker"]) {
    font-family: var(--kh-font) !important;
    font-size: max(var(--kh-compact), 1em) !important;
    line-height: 1.35 !important;
}

/* Common visually-button-like links that are not marked up with .button by page builders. */
body a.elementor-button,
body a[class*="cta"],
body a[class*="button"],
body a[class*="btn"],
body a[class*="action"] {
    font-family: var(--kh-font) !important;
    font-size: var(--kh-btn) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* Compact pills may stay compact, but never microscopic. */
body :where(.badge, .tag, .chip, .pill, [class*="badge"], [class*="tag"], [class*="chip"], [class*="pill"]) :where(span, a, strong),
body :where(.badge, .tag, .chip, .pill, [class*="badge"], [class*="tag"], [class*="chip"], [class*="pill"]) {
    font-size: max(var(--kh-compact), 1em) !important;
}

@media (max-width: 767px) {
    body {
        font-size: var(--kh-text-mobile);
    }

    body .elementor-widget-nav-menu .elementor-nav-menu a,
    body header nav a,
    body .menu > li > a {
        font-size: max(17px, calc(var(--kh-nav) - 1px)) !important;
    }
}