/* ==========================================================================
   YEKETO DESIGN SYSTEM
   Base / Typography / Layout
   ========================================================================== */


/* ==========================================================================
   1. FONTS
   ========================================================================== */

@font-face {
    font-family: 'YekanBakhFaNum';
    src:
        url('../fonts/YekanBakhFaNum-Regular.woff2') format('woff2'),
        url('../fonts/YekanBakhFaNum-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YekanBakhFaNum';
    src:
        url('../fonts/YekanBakhFaNum-Bold.woff2') format('woff2'),
        url('../fonts/YekanBakhFaNum-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   2. FULL-WIDTH THEME WRAPPER
   ========================================================================== */

/*
 * GeneratePress normally limits .grid-container.
 * Only remove that limitation when it contains Yeketo.
 */
.grid-container:has(.yeketo-site) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}


/* ==========================================================================
   3. YEKETO ROOT
   ========================================================================== */

.yeketo-site {
    /* ----------------------------------------------------------------------
       Brand Colors
    ---------------------------------------------------------------------- */

    --yeketo-color-primary: #6c5ce7;
    --yeketo-color-primary-hover: #5b4bd8;
    --yeketo-color-primary-light: #f2f0ff;

    --yeketo-color-secondary: #00cfef;
    --yeketo-color-secondary-light: #e9fbfe;

    --yeketo-color-accent: #ffb000;
    --yeketo-color-accent-light: #fff7e0;


    /* ----------------------------------------------------------------------
       Semantic Colors
    ---------------------------------------------------------------------- */

    --yeketo-color-success: #22c55e;
    --yeketo-color-success-light: #ecfdf3;

    --yeketo-color-error: #ef4444;
    --yeketo-color-error-light: #fef2f2;


    /* ----------------------------------------------------------------------
       Backgrounds
    ---------------------------------------------------------------------- */

    --yeketo-color-background: #ffffff;
    --yeketo-color-surface: #f8f9fc;
    --yeketo-color-surface-soft: #f3f5f9;


    /* ----------------------------------------------------------------------
       Typography Colors
    ---------------------------------------------------------------------- */

    --yeketo-color-text: #171923;
    --yeketo-color-text-secondary: #4b5563;
    --yeketo-color-text-muted: #7b8493;


    /* ----------------------------------------------------------------------
       Borders
    ---------------------------------------------------------------------- */

    --yeketo-color-border: #e5e7eb;
    --yeketo-color-border-strong: #d1d5db;


    /* ----------------------------------------------------------------------
       Typography
    ---------------------------------------------------------------------- */

    --yeketo-font-primary:
        'YekanBakhFaNum',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;

    --yeketo-font-size-xs: 0.875rem;
    --yeketo-font-size-sm: 0.9375rem;
    --yeketo-font-size-base: 1rem;
    --yeketo-font-size-lg: 1.125rem;
    --yeketo-font-size-xl: 1.25rem;
    --yeketo-font-size-2xl: 1.5rem;
    --yeketo-font-size-3xl: clamp(1.75rem, 3vw, 2.25rem);
    --yeketo-font-size-display: clamp(2.25rem, 5vw, 3.5rem);


    /* ----------------------------------------------------------------------
       Spacing
    ---------------------------------------------------------------------- */

    --yeketo-space-1: 0.25rem;
    --yeketo-space-2: 0.5rem;
    --yeketo-space-3: 0.75rem;
    --yeketo-space-4: 1rem;
    --yeketo-space-6: 1.5rem;
    --yeketo-space-8: 2rem;
    --yeketo-space-12: 3rem;
    --yeketo-space-16: 4rem;
    --yeketo-space-24: 6rem;


    /* ----------------------------------------------------------------------
       Radius
    ---------------------------------------------------------------------- */

    --yeketo-radius-sm: 0.5rem;
    --yeketo-radius-md: 0.75rem;
    --yeketo-radius-lg: 1rem;
    --yeketo-radius-xl: 1.5rem;
    --yeketo-radius-pill: 999px;


    /* ----------------------------------------------------------------------
       Shadows
    ---------------------------------------------------------------------- */

    --yeketo-shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.05);
    --yeketo-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.07);
    --yeketo-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.09);


    /* ----------------------------------------------------------------------
       Layout
    ---------------------------------------------------------------------- */

    --yeketo-container: 77.5rem;
    --yeketo-header-height: 5rem;


    /* ----------------------------------------------------------------------
       Motion
    ---------------------------------------------------------------------- */

    --yeketo-transition-fast: 150ms ease;
    --yeketo-transition: 200ms ease;


    /* ----------------------------------------------------------------------
       Base
    ---------------------------------------------------------------------- */

    width: 100%;
    max-width: none;
    min-width: 20rem;
    margin: 0;
    padding: 0;

    color: var(--yeketo-color-text);
    background: var(--yeketo-color-background);

    font-family: var(--yeketo-font-primary);
    font-size: var(--yeketo-font-size-base);
    line-height: 1.8;

    direction: rtl;
    text-align: right;

    overflow: visible;
}


/* ==========================================================================
   4. CONTENT CONTAINER
   ========================================================================== */

/*
 * Full-width sections can use .yeketo-site,
 * while actual content remains centered and constrained.
 */
.yeketo-site .yeketo-container {
    width: min(100% - 2rem, var(--yeketo-container));
    max-width: var(--yeketo-container);
    margin-inline: auto;
    margin-block: 0;
}


/* ==========================================================================
   5. RESPONSIVE CONTAINER
   ========================================================================== */

@media (min-width: 768px) {
    .yeketo-site .yeketo-container {
        width: min(100% - 3rem, var(--yeketo-container));
    }
}

@media (min-width: 1200px) {
    .yeketo-site .yeketo-container {
        width: min(100% - 4rem, var(--yeketo-container));
    }
}


/* ==========================================================================
   6. BOX SIZING
   ========================================================================== */

.yeketo-site *,
.yeketo-site *::before,
.yeketo-site *::after {
    box-sizing: border-box;
}
/* ==========================================================================\n   7. WORDPRESS / GENERATEPRESS PAGE SHELL\n   ========================================================================== */

body.ykt-page .site-content,
body.ykt-page .content-area,
body.ykt-page .inside-article {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.ykt-page .grid-container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.yeketo-site .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .yeketo-site *,
    .yeketo-site *::before,
    .yeketo-site *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}