/**
 * واجهة الموقع — مكوّنات هادية (تعتمد theme.css)
 */

.site-shell {
    background-color: var(--palette-bg);
    color: var(--palette-text);
}

/* ── Container موحّد (هيدر + محتوى + فوتر) ── */
.site-container {
    width: 100%;
    max-width: var(--site-container-max);
    margin-inline: auto;
    padding-inline: var(--site-container-padding);
    box-sizing: border-box;
}

@media (min-width: 640px) {
    :root {
        --site-container-padding: 1.125rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --site-container-padding: 1.25rem;
    }
}

/* ماك بوك إير / شاشات ~1440px */
@media (min-width: 1280px) {
    :root {
        --site-container-max: 82.5rem;
    }
}

/* شاشات كبيرة فقط — لا يمتد بلا حدود */
@media (min-width: 1536px) {
    :root {
        --site-container-max: 85rem;
    }
}

.site-layout-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

.site-layout-aside {
    width: 100%;
    min-width: 0;
    order: 2;
}

.site-layout-aside--end {
    order: 3;
}

.site-layout-center {
    width: 100%;
    min-width: 0;
    max-width: none;
    order: 1;
}

@media (min-width: 1024px) {
    .site-layout-grid {
        display: grid;
        grid-template-columns: var(--site-aside-width) minmax(0, 1fr) var(--site-aside-right-width);
        gap: 1.25rem 1.5rem;
        align-items: start;
    }

    .site-layout-aside,
    .site-layout-aside--end {
        order: unset;
    }

    .site-layout-center {
        order: unset;
        justify-self: stretch;
    }
}

/* تغذية المنشورات/المنتدى — تستخدم عرض العمود الأوسط كاملاً */
.site-layout-center--feed .site-feed-column {
    max-width: var(--site-feed-max);
    width: 100%;
}

.site-layout-single {
    width: 100%;
    margin-inline: auto;
}

.site-layout-single--auth {
    max-width: 28rem;
    margin-inline: auto;
}

/* ── شريط علوي ── */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 252, 251, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--palette-border-subtle);
    box-shadow: var(--shadow-sm);
}

.dark .site-nav {
    background: rgba(35, 45, 41, 0.96);
}

.site-nav .site-container {
    padding-block: 0;
}

.site-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 3.75rem;
    padding: 0.35rem 0;
}

@media (min-width: 1024px) {
    .site-nav-bar {
        min-height: 4.25rem;
        gap: 0.75rem;
    }
}

.site-nav-logo-link {
    display: flex;
    align-items: center;
    min-width: 0;
}

.site-nav-logo-img {
    height: 2.25rem;
    width: auto;
    max-width: min(10rem, 42vw);
    object-fit: contain;
}

@media (min-width: 640px) {
    .site-nav-logo-img {
        height: 2.5rem;
        max-width: 12rem;
    }
}

.site-nav-logo-text {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    font-weight: 700;
    color: var(--palette-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(12rem, 50vw);
}

.site-nav-desktop {
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
    flex-wrap: wrap;
    padding: 0 0.25rem;
}

.site-nav .nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.625rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--palette-text-muted);
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

@media (min-width: 1280px) {
    .site-nav .nav-item {
        padding: 0.5rem 0.85rem;
        font-size: 0.875rem;
        gap: 0.5rem;
    }
}

.site-nav .nav-item:hover {
    color: var(--palette-primary) !important;
    background: var(--palette-primary-soft);
}

.site-nav .nav-item-active {
    color: var(--palette-primary-dark) !important;
    background: var(--palette-primary-soft);
    font-weight: 600;
}

.dark .site-nav .nav-item-active {
    color: var(--palette-primary-light) !important;
}

.site-nav-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.site-nav-label {
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1280px) {
    .site-nav-label {
        max-width: none;
    }
}

.site-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .site-nav-actions {
        gap: 0.35rem;
    }
}

.site-nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.75rem;
    color: var(--palette-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-nav-icon-btn:hover {
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
}

.dark .site-nav-icon-btn:hover {
    color: var(--palette-primary-light);
}

.site-nav-account-btn {
    max-width: 10rem;
}

.site-nav-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    inset-inline-end: 0;
    min-width: 11rem;
    max-width: min(16rem, calc(100vw - 1.5rem));
    border-radius: 0.75rem;
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 60;
}

.site-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    color: var(--palette-text);
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.site-nav-dropdown-item:hover {
    background: var(--palette-primary-soft);
}

.site-nav-dropdown-item-primary {
    color: var(--palette-primary);
    font-weight: 600;
}

.site-nav-dropdown-item-danger {
    color: #dc2626;
}

.site-nav-dropdown-item.is-active,
.site-nav-dropdown-item-primary.is-active {
    color: var(--palette-primary);
    font-weight: 600;
    background: var(--palette-primary-soft);
}

/* قائمة الجوال */
.site-nav-mobile {
    border-top: 1px solid var(--palette-border-subtle);
    background: var(--palette-surface-elevated);
}

.site-nav-mobile-inner {
    max-height: min(75vh, calc(100dvh - 4.5rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0.5rem 1rem;
}

.site-nav-mobile-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
    background: var(--palette-surface);
    border: 1px solid var(--palette-border-subtle);
}

.site-nav-mobile-quick {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.site-nav-mobile-auth {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.site-nav-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.site-nav-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.75rem;
    font-weight: 500;
    color: var(--palette-text-muted);
    transition: background 0.15s ease, color 0.15s ease;
}

.site-nav-mobile-link:hover {
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
}

.site-nav-mobile-link.is-active {
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
    font-weight: 600;
}

.dark .site-nav-mobile-link.is-active {
    color: var(--palette-primary-light);
}

.site-nav-mobile-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--palette-border-subtle);
}

.site-nav-lang-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 0.65rem;
    font-size: 0.8125rem;
    border: 1px solid var(--palette-border-subtle);
    color: var(--palette-text-muted);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.site-nav-lang-chip.is-active {
    border-color: var(--palette-primary);
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
    font-weight: 600;
}

.site-nav-mobile-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem;
    border-radius: 0.65rem;
    font-size: 0.875rem;
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
    border: none;
    cursor: pointer;
}

[x-cloak] {
    display: none !important;
}

/* بطاقات */
.site-card {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--palette-border);
}

.site-card-flat {
    background: var(--palette-surface);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius);
}

.site-sidebar-panel {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--shadow-sm);
}

.site-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    border-radius: 0.65rem;
    margin-bottom: 0.3rem;
    color: var(--palette-text-muted);
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-sidebar-link:hover {
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
}

.site-sidebar-link.active {
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
    font-weight: 600;
}

.dark .site-sidebar-link:hover,
.dark .site-sidebar-link.active {
    color: var(--palette-primary-light);
}

.site-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    color: #fff;
    background: var(--palette-primary);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s ease;
}

.site-btn-primary:hover {
    background: var(--palette-primary-hover);
}

.site-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--palette-primary-dark);
    background: var(--palette-primary-soft);
    border: 1px solid var(--palette-border);
    border-radius: 0.75rem;
}

.dark .site-btn-ghost {
    color: var(--palette-primary-light);
}

.site-btn-ghost:hover {
    background: var(--palette-primary-muted);
}

.site-composer-trigger {
    flex-grow: 1;
    background: var(--palette-surface);
    border: 1px solid var(--palette-border);
    border-radius: 9999px;
    padding: 0.65rem 1.25rem;
    text-align: right;
    color: var(--palette-text-subtle);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-composer-trigger:hover {
    border-color: var(--palette-primary-muted);
    box-shadow: 0 0 0 3px var(--palette-primary-soft);
}

.dark .site-composer-trigger {
    background: var(--palette-surface);
}

.site-alert {
    border-radius: var(--site-radius);
    padding: 1rem 1.25rem;
    border-right: 3px solid;
}

.site-alert-success {
    background: var(--palette-success-soft);
    border-color: var(--palette-primary);
    color: var(--palette-primary-dark);
}

.dark .site-alert-success {
    color: var(--palette-primary-light);
}

.site-footer {
    background: var(--palette-surface);
    border-top: 1px solid var(--palette-border-subtle);
    margin-top: auto;
}

.site-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--palette-border);
    border-radius: 0.75rem;
    background: var(--palette-surface-elevated);
    color: var(--palette-text);
}

.site-input:focus {
    outline: none;
    border-color: var(--palette-primary);
    box-shadow: 0 0 0 3px var(--palette-primary-soft);
}

.site-main {
    min-height: calc(100vh - 4rem);
}

/* ── مكوّنات صفحات المحتوى (قراء، قرآن، كتب، تفسير…) ── */

.site-page-header {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.site-page-header h1,
.site-page-header .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--palette-text);
    margin: 0;
}

.site-page-header p {
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: var(--palette-text-muted);
    font-size: 0.9375rem;
}

.site-filter-bar {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.site-filter-bar .search-input,
.site-filter-bar input[type="text"],
.site-filter-bar input[type="search"],
.site-filter-bar select {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--palette-border);
    border-radius: 9999px;
    background: var(--palette-surface);
    color: var(--palette-text);
    font-size: 0.875rem;
}

.site-filter-bar .search-input:focus,
.site-filter-bar input:focus,
.site-filter-bar select:focus {
    outline: none;
    border-color: var(--palette-primary);
    box-shadow: 0 0 0 3px var(--palette-primary-soft);
}

.site-grid-card {
    display: block;
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    color: var(--palette-text);
}

.site-grid-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--palette-border);
}

a.site-grid-card:hover {
    transform: translateY(-2px);
}

.site-link-card {
    display: block;
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
    color: var(--palette-text);
}

.site-link-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--palette-primary-muted);
    transform: translateY(-2px);
}

.site-content-panel {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.site-auth-card {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.site-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--palette-text-muted);
}

.site-page-header .text-gray-900,
.site-page-header .text-gray-800,
.site-grid-card .text-gray-900,
.site-link-card .text-gray-900,
.site-content-panel .text-gray-900 {
    color: var(--palette-text);
}

.site-grid-card .text-gray-600,
.site-grid-card .text-gray-500,
.site-link-card .text-gray-600,
.site-link-card .text-gray-500,
.site-page-header .text-gray-600,
.site-page-header .text-gray-400 {
    color: var(--palette-text-muted);
}

.site-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.dark .site-badge {
    color: var(--palette-primary-light);
}

.site-audio-bar {
    background: var(--palette-surface-elevated) !important;
    border-top: 1px solid var(--palette-border-subtle) !important;
    box-shadow: var(--shadow-lg) !important;
}

.site-modal-card {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--shadow-xl);
    color: var(--palette-text);
}

.site-subcategory-pill {
    border-color: var(--palette-border-subtle);
    background: var(--palette-surface-elevated);
}

.site-subcategory-pill:hover {
    border-color: var(--palette-primary-muted);
    box-shadow: var(--shadow-md);
}

.site-subcategory-pill.is-active {
    border-color: var(--palette-primary);
    background: var(--palette-primary-soft);
    box-shadow: var(--shadow-sm);
}

.site-pagination-btn {
    background: var(--palette-surface-elevated);
    border: 1px solid var(--palette-border-subtle);
    color: var(--palette-text-muted);
}

.site-pagination-btn:hover {
    background: var(--palette-primary-soft);
    color: var(--palette-primary-dark);
    border-color: var(--palette-primary-muted);
}

.dark .site-pagination-btn:hover {
    color: var(--palette-primary-light);
}