/* ==========================================================================
   Typography System - Heebo Variable Font (Hebrew & Latin)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&display=swap');

:root {
    --font-primary: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Desktop Font Sizes (Above 1024px) */
    --fs-h1: 46px;
    --fs-h2: 32px;
    --fs-h3: 26px;
    --fs-h4: 22px;
    --fs-body: 20px;
    --fs-small: 17px;
    --fs-nav: 18px;
    --fs-btn: 18px;

    /* Font Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Line Heights */
    --lh-body: 1.8;
    --lh-heading: 1.3;

    /* Spacing */
    --paragraph-spacing: 24px;
}

/* Tablet Breakpoint (768px – 1024px) */
@media only screen and (max-width: 1024px) {
    :root {
        --fs-h1: 40px;
        --fs-h2: 30px;
        --fs-h3: 24px;
        --fs-h4: 21px;
        --fs-body: 19px;
        --fs-small: 17px;
        --fs-nav: 18px;
        --fs-btn: 18px;
    }
}

/* Mobile Breakpoint (Below 768px) */
@media only screen and (max-width: 767.98px) {
    :root {
        --fs-h1: 32px;
        --fs-h2: 27px;
        --fs-h3: 23px;
        --fs-h4: 20px;
        --fs-body: 18px;
        --fs-small: 16px;
        --fs-nav: 17px;
        --fs-btn: 17px;
    }
}

/* ==========================================================================
   Global Typography & Body Styles
   ========================================================================== */

html {
    direction: rtl;
}

body {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: normal !important;
    direction: rtl;
    text-align: right;
    color: #212121;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Ensure inputs, textareas, selects, and buttons inherit Heebo */
button, input, optgroup, select, textarea {
    font-family: var(--font-primary) !important;
    letter-spacing: normal !important;
}

/* ==========================================================================
   Headings & Heading Hierarchy
   ========================================================================== */

h1, .h1, .article-content h1, .news-details-area h1 {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-extrabold) !important; /* 800 */
    line-height: var(--lh-heading) !important;
    letter-spacing: normal !important;
    color: #25245e;
}

h2, .h2, .section-title h2 {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-h2) !important;
    font-weight: var(--fw-bold) !important; /* 700 */
    line-height: var(--lh-heading) !important;
    letter-spacing: normal !important;
    color: #25245e;
}

h3, .h3, .single-news h3, .news-content h3 {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-h3) !important;
    font-weight: var(--fw-bold) !important; /* 700 */
    line-height: var(--lh-heading) !important;
    letter-spacing: normal !important;
    color: #25245e;
}

h4, .h4, .widget-title {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-h4) !important;
    font-weight: var(--fw-semibold) !important; /* 600 */
    line-height: var(--lh-heading) !important;
    letter-spacing: normal !important;
    color: #25245e;
}

/* ==========================================================================
   Paragraphs & Text Spacing
   ========================================================================== */

p {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: normal !important;
    margin-bottom: var(--paragraph-spacing);
}

p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Small Text Elements
   ========================================================================== */

small, .small, .entry-meta, .entry-meta ul li, .entry-meta ul li span,
.entry-meta ul li a, .news-content ul li, .date, .time, .caption, 
.section-title span, .comments-area span, .post-navigation .navigation-links a,
.news-details-area .blog-details-desc .article-content .entry-meta ul li,
.news-details-area .blog-details-desc .article-content .entry-meta ul li a {
    font-size: var(--fs-small) !important;
    font-weight: var(--fw-regular) !important; /* 400 */
    letter-spacing: normal !important;
}

/* ==========================================================================
   Navigation Elements
   ========================================================================== */

.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item a,
.main-nav nav .navbar-nav .nav-item a,
.mean-container .mean-nav ul li a,
.navbar-nav .nav-link,
.dropdown-menu li a,
.nav-link {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-nav) !important;
    font-weight: var(--fw-semibold) !important; /* 600 */
    letter-spacing: normal !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.default-btn, button, .btn, .read-more, input[type="submit"], input[type="button"] {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-btn) !important;
    font-weight: var(--fw-bold) !important; /* 700 */
    letter-spacing: normal !important;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Icon Font Protection (Strictly Preserve Boxicons and Flaticon)
   ========================================================================== */

.bx, [class^="bx-"], [class*=" bx-"], .bxs, .bxl {
    font-family: 'boxicons' !important;
    font-weight: normal !important;
    speak: none;
    line-height: 1;
}

.flaticon, [class^="flaticon-"], [class*=" flaticon-"] {
    font-family: 'Flaticon' !important;
    font-weight: normal !important;
    line-height: 1;
}

/* ==========================================================================
   Article & Torah Lesson Content Width Limits (Max 800px)
   ========================================================================== */

/* Strictly restrict 800px maximum width to articles and Torah lessons */
.news-details-area .blog-details-desc {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure article content Hebrew typography is comfortable and readable */
.news-details-area .article-content {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    direction: rtl;
    text-align: right;
    letter-spacing: normal !important;
}

/* Override historical WYSIWYG editor inline styles in article content */
.news-details-area .article-content,
.news-details-area .article-content * {
    font-family: var(--font-primary) !important;
}

.news-details-area .article-content p,
.news-details-area .article-content div,
.news-details-area .article-content span,
.news-details-area .article-content font {
    line-height: var(--lh-body);
}

.news-details-area .article-content p {
    font-size: var(--fs-body) !important;
    margin-bottom: var(--paragraph-spacing) !important;
}

.news-details-area .article-content h1.article-title,
.news-details-area .article-content h1 {
    font-size: var(--fs-h1) !important;
    font-weight: var(--fw-extrabold) !important;
    line-height: var(--lh-heading) !important;
    margin-top: 24px;
    margin-bottom: 24px;
    color: #25245e;
}

/* Ensure images and videos inside 800px article content remain responsive */
.news-details-area .article-content img,
.news-details-area .article-content iframe {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}