﻿/* Theme variables */
:root {
    --color-primary: #c8102e; /* red */
    --color-primary-dark: #9b0f24; /* dark red */
    --color-accent: #e94f64; /* light red */
    --surface: #ffffff;
    --surface-2: #fff4f4;
    --border: rgba(128, 0, 0, .08);
  --glow: 0 10px 30px rgba(37, 99, 235, .25);
    --text-muted: #7a1b1f; /* muted red */

  --brand:#2f9e44; /* green */
  --brand-dark:#237736;
  --brand-50:#eaf7ef;
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
}

/* Local Vazirmatn FD font declarations */
@font-face {
  font-family: 'Vazirmatn FD';
  src: url('/resources/fonts/Vazirmatn FD.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html { font-size: 14px; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    margin-bottom: 60px;
    font-family: 'Vazirmatn FD','Tahoma','Arial',sans-serif;
    background: var(--color-primary) !important;
    color: #fff;
}

/* Make post/page content responsive */
.content { line-height: 2; overflow-wrap: anywhere; }
.content img { max-width: 100%; height: auto; display: block; }
.content figure { margin: 1rem 0; }
.content figure img { max-width: 100%; height: auto; }
.content iframe, .content video { max-width: 100%; width: 100%; height: auto; aspect-ratio: 16/9; }
.content table { width: 100% !important; display: block; overflow-x: auto; border-collapse: collapse; }
.content pre, .content code { white-space: pre-wrap; word-break: break-word; }

/* Focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}

/* Hero header */
.hero {
  background: radial-gradient(1000px 400px at 100% -100%, rgba(255,255,255,.12), transparent),
              linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  border-radius: 16px;
  box-shadow: var(--glow);
}

/* Post card emphasis */
.post-card { border: 1px solid var(--border); background: var(--surface); }
.post-card .card-body { background: linear-gradient(180deg, rgba(124,58,237,.04), transparent 30%); }
.post-card h5 a { color: #0f172a; }
.post-card h5 a:hover { color: var(--color-primary); text-decoration: none; }

/* Generic cards */
.card { border-radius: 14px; border: 1px solid var(--border); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; background: var(--surface); }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(2,6,23,.12); }
.card-title { font-weight: 700; font-size: 1.05rem; }
.card-footer { background: var(--surface); border-top: 1px solid var(--border); }

/* Buttons */
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary); color: #fff; }

/* Links */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Section header */
h3 { font-weight: 700; position: relative; padding-bottom: 10px; }
h3::after { content: ''; position: absolute; bottom: 0; right: 0; width: 60px; height: 3px; background: var(--color-primary); border-radius: 2px; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
.card { animation: fadeIn .5s ease-out; }

/* Toasts */
.toast-container { gap: .5rem; display: flex; flex-direction: column; }

/* RTL tweaks */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--text-muted); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

/* Base */
html[dir="rtl"] body{font-family:"Vazirmatn fd", "IRANSans", Tahoma, Arial, sans-serif; background:var(--bg); color:var(--text);} 
a{ text-decoration:none }

/* Sidebar */
.sidebar{
  position:fixed; inset-block:0; inset-inline-start:0; width:64px; background:var(--card); border-inline-end:1px solid var(--border); z-index:1032;
}
.sidebar .brand{height:64px; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--brand)}
.sidebar nav{display:flex; flex-direction:column; gap:.25rem; padding:.5rem}
.sidebar a{display:flex; align-items:center; justify-content:center; height:44px; color:var(--muted); border-radius:.5rem}
.sidebar a.active, .sidebar a:hover{ background:var(--brand-50); color:var(--brand)}

/* Topbar */
.topbar{ position:fixed; inset-inline-start:64px; inset-inline-end:0; height:64px; display:flex; align-items:center; gap:1rem; background:var(--card); border-bottom:1px solid var(--border); padding-inline:1rem; z-index:1031; }
.searchbar{ flex:1; display:flex; align-items:center; gap:.5rem; background:#f1f5f9; border:1px solid var(--border); border-radius:2rem; padding:.25rem .75rem; }
.searchbar input{ border:none; background:transparent; outline:none; width:100%; }

/* Page content wrapper accounting sidebar/topbar */
.page-wrap{ padding-block-start:84px; padding-inline-start:80px; padding-inline-end:16px; }

/* Widgets */
.widget{ background:var(--card); border:1px solid var(--border); border-radius:.75rem; box-shadow:0 1px 1px rgba(0,0,0,.03); }
.widget .widget-header{ background:var(--brand); color:#fff; padding:.5rem .75rem; border-top-left-radius:.75rem; border-top-right-radius:.75rem; font-weight:700; }
.widget .widget-body{ padding:.75rem; }

/* Quick links grid */
.quick-grid{ display:grid; grid-template-columns:repeat(6,minmax(120px,1fr)); gap:12px; }
.quick-tile{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; border:1px solid var(--border); border-radius:.75rem; padding:16px; background:#fff; color:var(--text); transition:transform .1s ease; }
.quick-tile .icon{ width:40px; height:40px; display:grid; place-items:center; background:var(--brand-50); color:var(--brand); border-radius:10px; font-size:20px; }
.quick-tile:hover{ transform:translateY(-2px) }

/* Lists */
.list-clean{ list-style:none; margin:0; padding:0 }
.list-clean li{ padding:.5rem .25rem; border-bottom:1px dashed var(--border) }
.list-clean li:last-child{ border-bottom:none }
.small-muted{ color:var(--muted); font-size:.85rem }

/* Cards mimic */
.card-green{ border-color:#d7f0df }
.card-green>.card-header{ background:var(--brand); color:#fff }

/* Utilities */
.rtl-flip{ transform:scaleX(-1) }

@media (max-width: 1200px){ .quick-grid{ grid-template-columns:repeat(4,minmax(120px,1fr)); } }
@media (max-width: 768px){
  .sidebar{ width:56px }
  .topbar{ inset-inline-start:56px }
  .page-wrap{ padding-inline-start:72px }
  .quick-grid{ grid-template-columns:repeat(2,minmax(120px,1fr)); }
}

/* تغییرات رنگ‌بندی برای صفحه اول سایت */


/* استایل‌های اضافی برای صفحه اول */
.home-banner {
    background-color: #dc3545;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
}

.home-banner h1 {
    font-size: 2.5rem;
}

.home-banner p {
    font-size: 1.25rem;
}

/* استایل برای نمایه پست‌ها در صفحه اول */
.post-box {
    border: 2px solid #dc3545;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 15px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 300px;
}
.post-box .post-thumbnail {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 0;
    border-bottom: 1px solid #dc3545;
    display: block;
}
.post-box .post-content {
    text-align: center;
    padding: 16px 12px 8px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.post-box h3 {
    font-size: 1.15rem;
    color: #dc3545;
    margin-bottom: 8px;
    margin-top: 0;
}
.post-box p {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0;
}

/* keep action bar visible and avoid overlap */
.sticky-actions{ position: sticky; bottom: 0; background: var(--card,#fff); padding-top:.5rem; padding-bottom:.5rem; border-top:1px solid var(--border,#e5e7eb); z-index: 10; }

/* avoid overflow of editor toolbars inside cards */
.card .ql-toolbar{ position: sticky; top: 0; z-index: 5; background:#fff; }

/* spacing between columns on small screens */
@media (max-width: 991.98px){
  .page-wrap .row.g-3 > [class^="col-"]{ order: initial; }
}

/* News Ticker Styles */
.news-ticker-container {
    margin-bottom: 1rem;
    border: 1px solid #dc3545;
    border-radius: 8px;
}
.ticker-content-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 48px;
}
.ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* animation duration and distance controlled by JS via CSS variables */
    animation: ticker-move var(--ticker-duration, 24s) linear infinite;
    --scroll-distance: 50%; /* fallback value */
    will-change: transform;
    /* prevent gaps from flex gap; spacing is handled by .ticker-item margin */
    gap: 0;
    transform: translate3d(0,0,0);
}
.ticker-track:hover {
    animation-play-state: paused;
}
.ticker-item {
    display: inline-flex;
    align-items: center;
}
.ticker-link:hover {
    text-decoration: underline !important;
    color: #ffc107 !important;
}

@keyframes ticker-move {
    /* move left by the width of one inner copy (px) for a seamless loop */
    0% { transform: translate3d(0,0,0); }
    100% { transform: translate3d(calc(-1 * var(--scroll-distance)),0,0); }
}

/* One logical copy inside the track */
.ticker-inner {
    display: flex;
    align-items: center;
    gap: 0; /* spacing via .ticker-item margin */
}

.ticker-item { margin-inline-end: 2rem; }

/* One logical copy inside the track */
.ticker-inner {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* If the ticker content is short, reduce empty gap by ensuring minimum visible spacing */
.ticker-item { padding-inline-end: 1rem; }

/* ---- New landing design ---- */
:root {
    --navy-900: #7b0d1e; /* dark red */
    --navy-800: #8f1124;
    --navy-700: #a3162a;
    --accent-gold: #f5c04f;
    --soft-blue: #fff3f4; /* now soft red/pink background */
    --deep-blue: #8b0f1f;
}

.landing-body { background: #fff6f6; color: #20070a; }
.landing-header { position: sticky; top: 0; z-index: 1040; background: var(--navy-900); }
.top-utility { background: var(--navy-900); padding: .35rem 0; }
.lang-pill { color: #5a0a14; background: #ffe4e7; border-radius: 999px; padding: .2rem .75rem; font-weight: 700; font-size: .85rem; text-decoration: none; }
.lang-pill:hover { background: #ffd5db; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.08); border-radius: 12px; border: 1px solid rgba(255,255,255,.12); }
.brand .logo-img { width: 32px; height: 32px; object-fit: contain; }
.landing-nav { background: var(--deep-blue); padding-block: .4rem; }
.landing-nav .nav-link { color: #ffeef1; font-weight: 600; }
.landing-nav .nav-link:hover, .landing-nav .nav-link:focus { color: #fff; }
.landing-nav .dropdown-menu { text-align: right; }
.navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-toggler-icon { filter: invert(1); }

.mega-menu {
    min-width: 320px;
    background: #b71c1c !important; /* قرمز تیره */
    color: #fff !important;
    border: 1px solid #ffd5db;
    border-radius: 12px;
    box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.08);
}
.mega-link {
    display: block;
    padding: .35rem 0;
    color: #fff !important;
    text-decoration: none;
}
.mega-link:hover {
    color: #ffd6d6 !important;
}
.mega-menu h6 {
    color: #ffd6d6 !important;
}

.page-shell { padding-top: 0; }

.hero-wrap { position: relative; overflow: hidden; }
.hero-wrap .carousel-item { min-height: 68vh; }
.hero-image { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.1); }
.hero-wrap .carousel-caption {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(123,13,30,.10) 50%, rgba(123,13,30,0) 85%);
    padding: clamp(1.5rem, 3vw, 3rem);
    text-align: right;
}
.hero-wrap h1 { color: #fff; text-shadow: 0 6px 20px rgba(0,0,0,.35); }
.hero-wrap p.lead { color: #ffe6ea; max-width: 540px; }
.bg-glass { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.24); color: #fff; border-radius: 999px; padding: .35rem 1rem; }
.hero-wrap .btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.hero-wrap .btn-outline-light:hover { background: #fff; color: var(--navy-900); }

.section-shell { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-shell.soft-bg { background: var(--soft-blue); }
.section-header h2 { color: var(--navy-900); }
.eyebrow { letter-spacing: .08em; text-transform: uppercase; color: var(--accent-gold); font-weight: 800; font-size: .8rem; }

.news-card { border: 1px solid #f1b5bc; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 15px 40px rgba(139,15,31,.08); display: flex; flex-direction: column; }
.news-thumb {
    display: block;
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 3;
    width: 100%;
    min-height: 50%; /* حداقل ۵۰٪ ارتفاع باکس خبر */
    max-height: 66%; /* حداکثر دو سوم باکس خبر */
    object-fit: cover;
}
.news-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.news-title { font-size: 1.1rem; line-height: 1.6; color: #300b10; }
.news-title a { color: inherit; text-decoration: none; }
.news-title a:hover { color: var(--navy-800); }
.empty-state { border: 1px dashed #f1b5bc; border-radius: 14px; background: #fff; }

.activity-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; border-radius: 14px; text-align: center; color: #fff; font-weight: 700; min-height: 140px; background: var(--tile-color, #a3162a); box-shadow: 0 12px 28px rgba(0,0,0,.12); transition: transform .2s ease, box-shadow .2s ease; }
.activity-tile .icon-wrap { width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 1.5rem; }
.activity-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.18); color: #fff; }

.project-card { border: 1px solid #f1b5bc; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.project-thumb { height: 200px; background-size: cover; background-position: center; }
.project-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.project-title { color: var(--navy-900); font-size: 1.05rem; }

.link-tile { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-radius: 14px; background: #fff; border: 1px solid #f1b5bc; text-decoration: none; color: #20070a; box-shadow: 0 8px 18px rgba(139,15,31,.05); transition: transform .15s ease, box-shadow .15s ease; }
.link-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(139,15,31,.08); }
.icon-circle { width: 40px; height: 40px; border-radius: 12px; background: #ffe4e7; color: #8f1124; display: grid; place-items: center; font-size: 1.1rem; }

.contact-card { background: linear-gradient(180deg, #fff, #fff6f6); border: 1px solid #f1b5bc; border-radius: 16px; padding: 1.5rem; box-shadow: 0 12px 28px rgba(0,0,0,.08); }

.landing-footer { background: var(--navy-900); margin-top: 2rem; }
.landing-footer a { color: #ffd5db; }

@media (max-width: 991.98px) {
    .hero-wrap .carousel-item { min-height: 60vh; }
    .news-thumb { height: 160px; }
}

@media (max-width: 575.98px) {
    .hero-wrap .carousel-caption {
        background: linear-gradient(180deg, rgba(123,13,30,.18), rgba(123,13,30,.08));
    }
    .activity-tile { min-height: 120px; }
}