/*
 * ==========================================================================
 * BASE STYLES — ZHM-X v3.0.1
 * Foundational styles: CSS reset, typography, responsive base.
 * All values sourced from _variables-components.css v3.2.0+ design tokens.
 * Vazirmatn exclusively — Zero Google Fonts.
 * SCOPED TO: Child theme content area only — NOT entire site.
 * ==========================================================================
 */

/* ==========================================================================
   1. BOX SIZING RESET — Scoped to child theme
   ========================================================================== */

.zhep-content,
.zhep-content *,
.zhep-content *::before,
.zhep-content *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   2. BODY DEFAULTS — Scoped to child theme
   ========================================================================== */

.zhep-content {
    /*font-family: var(--font-family-base);*/
    /*font-size: var(--size-body);*/
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--sys-color-neutral-900);
    background-color: var(--sys-color-neutral-0);
    text-align: right;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

/* ==========================================================================
   3. TYPOGRAPHY — HEADINGS — Scoped to child theme
   ========================================================================== */

.zhep-content h1, .zhep-content h2, .zhep-content h3,
.zhep-content h4, .zhep-content h5, .zhep-content h6 {
    margin: 0 0 var(--sys-spacing-xs) 0;
    line-height: var(--leading-heading);
    letter-spacing: var(--spacing-letter-default);
    font-style: normal;
    text-transform: none;
}

.zhep-content h1 {
    /*font-family: var(--font-family-heading);*/
    /*font-size: var(--size-h1);*/
    font-weight: var(--weight-black);
    color: var(--heading-color-h1);
    margin-bottom: var(--heading-margin-h1);
}

.zhep-content h2 {
    /*font-family: var(--font-family-heading);*/
    /*font-size: var(--size-h2);*/
    font-weight: var(--weight-extrabold);
    color: var(--heading-color-h2);
    margin-bottom: var(--heading-margin-h2);
}

.zhep-content h3 {
    /*font-family: var(--font-family-heading-h3);*/
    /*font-size: var(--size-h3);*/
    font-weight: var(--weight-bold);
    color: var(--heading-color-h3);
    margin-bottom: var(--heading-margin-h3);
}

.zhep-content h4 {
    /*font-family: var(--font-family-heading-h3);*/
    /*font-size: var(--size-h4);*/
    font-weight: var(--weight-semibold);
    color: var(--sys-color-neutral-900);
    margin-bottom: var(--heading-margin-h4);
}

.zhep-content h5 {
    /*font-family: var(--font-family-heading-h3);*/
    /*font-size: var(--size-h5);*/
    font-weight: var(--weight-medium);
    color: var(--sys-color-neutral-900);
    margin-bottom: var(--heading-margin-h5);
}

.zhep-content h6 {
    /*font-family: var(--font-family-heading-h3);*/
    /*font-size: var(--size-h6);*/
    font-weight: var(--weight-regular);
    color: var(--sys-color-neutral-800);
    margin-bottom: var(--heading-margin-h6);
}

/* ==========================================================================
   4. PARAGRAPH & INLINE TEXT — Scoped to child theme
   ========================================================================== */

.zhep-content p {
    margin: 0 0 var(--sys-spacing-md) 0;
    /*font-size: var(--size-body);*/
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
}

.zhep-content small {
    /*font-size: var(--size-small);*/
    color: var(--sys-color-neutral-600);
}

/* ==========================================================================
   5. LINKS — Scoped to child theme
   ========================================================================== */

.zhep-content a {
    color: var(--sys-color-primary);
    text-decoration: none;
    transition: color var(--sys-transition-fast);
}

.zhep-content a:hover {
    color: var(--sys-color-secondary);
    text-decoration: none;
}

.zhep-content a:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--sys-radius-sm);
}

/* ==========================================================================
   6. SELECTION — Site-wide (usually safe, kept as-is)
   ========================================================================== */

::selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

::-moz-selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

/* ==========================================================================
   7. MEDIA & EMBEDDED CONTENT — Scoped to child theme
   ========================================================================== */

.zhep-content img,
.zhep-content video,
.zhep-content svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   8. LISTS (RTL) — Scoped to child theme
   ========================================================================== */

.zhep-content ul,
.zhep-content ol {
    padding-right: 1.5rem;
    margin-bottom: var(--sys-spacing-md);
}

.zhep-content li {
    margin-bottom: var(--sys-spacing-xs);
}

/* ==========================================================================
   9. FORM ELEMENTS BASE — REMOVED
   ========================================================================== */

/* ==========================================================================
   10. RESPONSIVE BASE — Scoped to child theme
   ========================================================================== */

@media (max-width: 768px) {
    .zhep-content h1 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
    .zhep-content h2 { font-size: clamp(1rem, 1.5vw, 1.2rem); }
    .zhep-content h3 { font-size: clamp(0.95rem, 1.2vw, 1.1rem); }
    .zhep-content { line-height: 1.85; }
}

@media (max-width: 480px) {
    .zhep-content h1 { font-size: clamp(1rem, 2.5vw, 1.25rem); }
    .zhep-content h2 { font-size: clamp(0.9rem, 2vw, 1.1rem); }
    .zhep-content h3 { font-size: clamp(0.85rem, 1.8vw, 1rem); }
    .zhep-content { line-height: 1.75; }
}

/* ==========================================================================
   11. PRINT BASE — Site-wide (usually safe, kept as-is)
   ========================================================================== */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: var(--size-small);
    }

    img {
        max-width: 100% !important;
    }
}