/* * استایل‌های سفارشی Material 3 برای بازنویسی سایت خبری
 * این فایل باید بعد از Bootstrap 5 بارگذاری شود.
 * فرض بر این است که متغیرهای رنگی M3 (مانند --md-sys-color-...)
 * توسط کیت UI شما در :root تعریف شده‌اند.
 * اگر تعریف نشده‌اند، باید مقادیر ثابت جایگزین شوند.
 */

:root {
    /* مقادیر نمونه - اینها باید از کیت M3 شما بیایند */
    --md-sys-color-surface: #FEF7FF;
    --md-sys-color-surface-container: #F3EDF7;
    --md-sys-color-surface-container-high: #f39292;
    --md-sys-color-on-surface: #1D1B20;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-primary: #f40002;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-secondary-container: #f2c7c7;
    --md-sys-color-on-secondary-container: #1D192B;
    --md-sys-color-outline: #79747E;
    --md-sys-color-inverse-on-surface: #F4EFF4;
    --md-sys-color-inverse-surface: #313033;

    --md-sys-typescale-title-large-font: 'IRANSans';
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-weight: 500;
}

body {
    font-family: 'IRANSans', sans-serif;
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

a, a:visited{
    color: var(--md-sys-color-on-surface) !important;
    text-decoration: none !important;
}

a:hover, a:focus, a:active {
    color: var(--md-sys-color-primary) !important;
    text-decoration: none !important;
}

/* 1. M3 Top App Bar (نوار بالایی) */
.m3-top-app-bar {
    background-color: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline);
}

.m3-top-app-bar .navbar-brand {
    display: flex;
    align-items: center;
}

.m3-top-app-bar .navbar-brand img {
    height: 40px;
}

.m3-top-app-bar .navbar-brand h1 {
    font-size: var(--md-sys-typescale-title-large-size);
    font-weight: bold;
    color: var(--md-sys-color-primary);
    margin-right: 12px;
    margin-bottom: 0;
}

.m3-top-app-bar .navbar-toggler {
    border: none;
    font-size: 24px;
    color: var(--md-sys-color-on-surface-variant);
}

.m3-top-app-bar .nav-link {
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    color: var(--md-sys-color-on-surface-variant);
    padding: 8px 12px;
    border-radius: 20px;
}

.m3-top-app-bar .nav-link.active,
.m3-top-app-bar .nav-link:hover {
    color: var(--md-sys-color-on-secondary-container);
    background-color: var(--md-sys-color-secondary-container);
}

/* 2. M3 Navigation Drawer (منوی موبایل) */
.m3-navigation-drawer .modal-content {
    background-color: var(--md-sys-color-surface-container);
}
.m3-navigation-drawer .modal-dialog {
    margin: 0;
    width: 300px; /* عرض استاندارد منوی کشویی */
}
.m3-navigation-drawer.modal.fade .modal-dialog {
    transform: translateX(100%); /* شروع از خارج صفحه در RTL */
}
.m3-navigation-drawer.modal.show .modal-dialog {
    transform: translateX(0);
}
.m3-navigation-drawer .nav-link {
    font-size: 1.1rem;
    color: var(--md-sys-color-on-surface-variant);
    padding: 12px 16px;
    border-radius: 24px;
}
.m3-navigation-drawer .nav-link.active {
    font-weight: bold;
    color: var(--md-sys-color-on-primary-container);
    background-color: var(--md-sys-color-primary-container);
}


/* 3. M3 Ticker (سرخط خبر) */
.m3-ticker-card {
    display: flex;
    align-items: center;
    background-color: var(--md-sys-color-surface-container-high);
    border-radius: 12px;
    padding: 8px 16px;
}
.m3-ticker-label {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    padding: 4px 12px;
    border-radius: 8px;
    margin-left: 12px;
    white-space: nowrap;
}
.m3-ticker-card #typed {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    font-size: var(--md-sys-typescale-body-medium-size);
}
.m3-ticker-card #typed a {
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}
.m3-ticker-card #typed-strings {
    display: none;
}
.typed-cursor {
    opacity: 1;
    animation: blink 0.7s infinite;
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}


/* 4. M3 Cards (کارت‌ها) */
.m3-card {
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px; /* گوشه‌های گرد استاندارد M3 */
    background-color: var(--md-sys-color-surface);
    box-shadow: none;
}
.m3-card.m3-card-filled {
    background-color: var(--md-sys-color-surface-container);
    border-color: var(--md-sys-color-surface-container);
}
.m3-card.m3-card-outlined {
    background-color: var(--md-sys-color-surface);
    border-color: var(--md-sys-color-outline);
}
.m3-card .card-img-top {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.m3-card .card-title {
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: bold;
    color: var(--md-sys-color-on-surface);
}

/* اسلایدر اصلی */
.main-slider-card {
    overflow: hidden; /* برای گرد شدن گوشه‌های تصویر */
}
.main-slider-card .carousel-caption {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 10px;
}

/* 5. M3 Widget Title (عناوین ویجت) */
.m3-widget-title {
    font-size: var(--md-sys-typescale-title-medium-size);
    font-weight: bold;
    color: var(--md-sys-color-primary);
    border-bottom: 2px solid var(--md-sys-color-primary);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.card-header.m3-widget-title {
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 0;
    background: none;
}

/* 6. M3 Lists (لیست‌ها) */
.m3-list .list-group-item {
    display: flex;
    align-items: center;
    padding: 12px 0; /* M3 padding */
    background-color: transparent;
    border-bottom: 1px solid var(--md-sys-color-surface-container-high);
}
.m3-list.list-group-flush .list-group-item {
    padding-right: 16px;
    padding-left: 16px;
}
.m3-list .list-group-item:last-child {
    border-bottom: none;
}
.m3-list .m3-list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%; /* دایره‌ای */
    margin-left: 16px;
    object-fit: cover;
}
.m3-list .m3-list-content {
    flex-grow: 1;
}
.m3-list .m3-list-headline {
    font-size: var(--md-sys-typescale-body-medium-size);
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}
.m3-list.m3-list-dense .list-group-item {
    padding-top: 8px;
    padding-bottom: 8px;
}
.m3-list.m3-list-dense .list-group-item a {
    text-decoration: none;
    color: var(--md-sys-color-on-surface-variant);
}
.m3-list.m3-list-dense .list-group-item a:hover {
    color: var(--md-sys-color-primary);
}


/* 7. M3 Footer (فوتر) */
.m3-footer {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    margin-top: 24px;
}
.m3-footer .m3-footer-logo {
    height: 60px;
    margin-bottom: 16px;
    opacity: 0.8;
}
.m3-footer h5 {
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: bold;
    color: var(--md-sys-color-on-surface);
}
.m3-footer .nav-link {
    color: var(--md-sys-color-on-surface-variant);
}
.m3-footer .nav-link:hover {
    color: var(--md-sys-color-primary);
}
.m3-footer hr {
    border-color: var(--md-sys-color-outline);
}