/* ریسپانسیو صفحات عمومی — 375 / 768 / 1024 / 1440 + spacing/type polish */



html {

    overflow-x: clip;

    max-width: 100%;

    scroll-behavior: smooth;

    scroll-padding-top: var(--site-header-offset, 80px);

}

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

}



body {

    max-width: 100%;

    overflow-x: clip;

    scroll-padding-top: var(--site-header-offset, 80px);

}



.site-main {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: 960px;

    margin: 0 auto;

    padding: var(--space-6, 28px) var(--space-4, 16px) 110px;

    box-sizing: border-box;

    overflow-x: clip;

    min-width: 0;

}



/* First content clears hanging logo / header notch */

.site-main > :first-child {

    scroll-margin-top: var(--site-header-offset, 80px);

}



img, video, canvas, svg {

    max-width: 100%;

}



.radar-wrap canvas,

.radar-chart-wrapper canvas {

    max-height: 100%;

}



.glass-card,

.event-card,

.content-article,

.tests-card,

.edu-hub__card,

.podcast-season-card,

.udash-card {

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

}



.page-title {

    color: var(--text-heading);

    font-family: 'Kalameh', sans-serif;

    font-size: var(--text-xl, clamp(1.35rem, 2.5vw, 1.75rem));

    margin-bottom: var(--space-2, 8px);

    line-height: var(--leading-tight, 1.4);

    word-wrap: break-word;

    overflow-wrap: anywhere;

}



.page-lead {

    color: var(--text-muted);

    margin-bottom: var(--space-6, 28px);

    line-height: var(--leading-body, 1.85);

    font-size: var(--text-sm, 0.95rem);

}



.btn-gold,

.btn-ghost {

    min-height: var(--touch-target-min, 36px);

}



.hero-brand {

    text-align: center;

    padding: 40px 16px 20px;

}



.hero-brand img {

    height: clamp(72px, 18vw, 96px);

    width: auto;

    margin-bottom: 12px;

    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.25));

}



.hero-brand h1 {

    color: var(--text-heading);

    font-family: 'Kalameh', sans-serif;

    font-weight: 700;

    font-size: var(--text-2xl, clamp(1.45rem, 3.2vw, 2.2rem));

    margin-bottom: 10px;

    line-height: 1.35;

}



.hero-brand p {

    color: var(--text-muted);

    max-width: 36rem;

    margin: 0 auto 22px;

    line-height: 1.9;

}



.hero-cta {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    justify-content: center;

}



.event-card {

    padding: 22px;

    margin-bottom: 16px;

}



.event-card h2,

.event-card h3 {

    color: var(--text-heading);

    margin: 0 0 8px;

    font-family: 'Kalameh', sans-serif;

    font-size: clamp(1.05rem, 2vw, 1.25rem);

    word-wrap: break-word;

}



.event-meta {

    color: var(--text-muted);

    font-size: 0.95rem;

    margin-bottom: 12px;

    line-height: 1.7;

}



.event-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;

}



.cms-content {

    color: var(--text-primary);

    line-height: 2;

    overflow-wrap: anywhere;

}



.cms-content img,

.cms-content video,

.cms-content iframe,

.cms-article img {

    max-width: 100%;

    height: auto;

    border-radius: 12px;

}



.cms-content table,
.post-content table,
.page-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



/* Quiz under-header clearance (Laravel .site-main) */

.site-main .quiz-welcome,

.site-main .quiz-instructions,

.site-main .eq-container,

.site-main .quiz-container {

    position: relative;

    z-index: 1;

    /* Cap at question-card width; 100% on narrow viewports (no overflow). */

    max-width: min(100%, var(--quiz-chrome-max, 900px));

    width: 100%;

    margin-inline: auto;

    box-sizing: border-box;

}



.site-main .quiz-welcome {

    margin-top: var(--space-2, 8px);

}



/* DISC result / quiz public wrappers */

.result-pattern-row {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 12px;

}



.gauges-container {

    display: grid;

    /* Match disc result.php: 2×2 gauges (I D / S C) — not 4 skinny columns */

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

}



.code-profile-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

}



.row {

    display: grid;

    grid-template-columns: 1fr 90px 90px;

    gap: 8px;

    align-items: center;

}



/* Blog / education / podcast / dashboard shared overflow guards */

.blog-grid,

.tests-grid,

.edu-hub__grid,

.podcast-grid,

.events-grid,

.udash-stats,

.udash-cards,

.udash-split,

.courses-grid,

.magazine-shelf,

.media-card-grid,

.home-explore,

.home-explore__track,

.home-mags,

.udash-list {

    width: 100%;

    max-width: 100%;

    min-width: 0;

}



.blog-cat-nav,
.blog-cat-chips {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}



.tests-header .page-lead a,

.edu-hub__actions a,

.tests-edu-link {

    color: var(--primary-color, #dab25d);

    font-weight: 600;

    text-decoration: none;

}



.tests-edu-link:hover,

.tests-header .page-lead a:hover {

    text-decoration: underline;

    color: var(--primary-hover, #c49d4a);

}



/* Phone — ~375–767 */

@media (max-width: 767px) {

    .btn-gold,
    .btn-ghost,
    .primary-btn,
    .secondary-btn,
    .tests-card__btn,
    .tests-card__edu {
        min-height: var(--touch-target-min, 36px);
        padding: var(--btn-pad-y, 8px) var(--btn-pad-x, 14px);
        font-size: var(--text-md, 0.875rem);
        border-radius: 12px;
        gap: 6px;
    }

    .page-title {
        font-size: var(--text-xl, clamp(1.15rem, 3vw, 1.35rem));
        margin-bottom: var(--space-2, 8px);
    }

    .page-lead {
        font-size: var(--text-sm, 0.9rem);
        margin-bottom: var(--space-5, 16px);
        line-height: 1.75;
    }

    .hero-brand h1 {
        font-size: var(--text-2xl, clamp(1.3rem, 3.4vw, 1.55rem));
        margin-bottom: 8px;
    }

    .hero-brand p {
        font-size: var(--text-sm, 0.9rem);
        line-height: 1.75;
        margin-bottom: 14px;
    }

    .hero-brand img {
        height: clamp(56px, 15vw, 72px);
        margin-bottom: 8px;
    }

    .event-card h2,
    .event-card h3 {
        font-size: var(--text-lg, clamp(1rem, 2.4vw, 1.12rem));
    }

    .event-meta {
        font-size: var(--text-sm, 0.9rem);
        margin-bottom: 8px;
    }

    .site-main {

        max-width: 100%;

        padding: var(--space-4, 12px) var(--space-3, 10px) 92px;

    }



    .hero-brand {

        padding: 24px 8px 12px;

    }



    .hero-cta,

    .event-actions {

        flex-direction: column;

        align-items: stretch;

    }



    .hero-cta .btn-gold,

    .hero-cta .btn-ghost,

    .event-actions .btn-gold,

    .event-actions .btn-ghost {

        width: 100%;

    }



    .event-card {

        padding: 16px;

    }



    .gauges-container,

    .code-profile-grid {

        grid-template-columns: 1fr;

    }

    .result-pattern-row {

        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

        gap: 10px;

    }



    .row {

        grid-template-columns: minmax(0, 1fr) 64px 64px;

        gap: 6px;

        padding: 10px 4px;

        font-size: 0.92rem;

    }



    .radar-wrap:not(.radar-wrap--bars),

    .radar-chart-wrapper {

        /* Room for Chart.js radar + DISC custom N/S labels — do not clip bars charts */

        height: min(340px, 90vw) !important;

        overflow: visible !important;

    }



    .site-main .quiz-welcome {

        margin-top: var(--space-3, 12px) !important;

        padding: 16px 14px !important;

    }



    .site-main .quiz-instructions,

    .site-main .eq-container > .quiz-header,

    .site-main .quiz-header.quiz-header--progress {

        margin-top: var(--space-2, 8px);

    }



    .content-page,

    .events-page,

    .podcast-page,

    .edu-hub,

    .education-guide,

    .udash {

        max-width: 100%;

        min-width: 0;

    }



    .blog-card-body,

    .event-card__body {

        padding: 16px;

    }



    .tests-card__footer {

        gap: 6px;

        flex-wrap: nowrap;

    }



    .tests-card__btn,

    .tests-card__edu {

        flex: 1 1 0;

        min-width: 0;

        justify-content: center;

    }

}



@media (max-width: 375px) {

    .site-main {

        padding: 12px 10px 88px;

    }



    .page-title {

        font-size: var(--text-xl, clamp(1.1rem, 4.2vw, 1.28rem));

    }



    .btn-gold,

    .btn-ghost {

        padding-inline: 14px;

        font-size: var(--text-md, 0.95rem);

    }



    .row {

        grid-template-columns: minmax(0, 1fr) 56px 56px;

        gap: 6px;

        font-size: 0.92rem;

    }

}



/* Tablet — 768 */

@media (min-width: 768px) and (max-width: 1023px) {

    .site-main {

        max-width: 860px;

        padding: 24px 20px 110px;

    }



    .gauges-container {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .result-pattern-row {

        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);

    }

}



/* Laptop — 1024 */

@media (min-width: 1024px) and (max-width: 1439px) {

    .site-main {

        max-width: 960px;

        padding: 28px 24px 110px;

    }

}



/* Desktop wide — 1440+ */

@media (min-width: 1440px) {

    .site-main {

        max-width: 1120px;

        padding: 32px 28px 120px;

    }

}

/* Site footer styles moved to /css/site-footer.css */

/* ——— Light theme: shared paper/gold polish (no overflow) ——— */
[data-theme="light"] .btn-gold {
    box-shadow: 0 8px 20px rgba(196, 157, 74, 0.22);
    border-color: rgba(168, 132, 58, 0.32);
}

[data-theme="light"] .btn-ghost {
    background: rgba(218, 178, 93, 0.08);
    border-color: rgba(196, 157, 74, 0.38);
}

[data-theme="light"] .hero-brand img {
    filter: drop-shadow(0 6px 16px rgba(72, 52, 20, 0.10));
}

[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] textarea {
    background: var(--input-bg, #fffefb);
    border-color: var(--input-border, rgba(168, 132, 58, 0.28));
    color: var(--text-primary, #1a1612);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: rgba(36, 30, 22, 0.48);
}

[data-theme="light"] .event-card,
[data-theme="light"] .glass-card {
    border-color: var(--glass-border, rgba(196, 157, 74, 0.30));
}

@media (max-width: 414px) {
    [data-theme="light"] .site-main,
    [data-theme="light"] .home-page,
    [data-theme="light"] .resume-page,
    [data-theme="light"] .content-page {
        overflow-x: clip;
        max-width: 100%;
    }
}