/* ==========================================================================
   BQEB Public Website — Design Tokens & Shared Components
   --------------------------------------------------------------------------
   এই ফাইলটি পাবলিক ওয়েবসাইটের একমাত্র কালার/স্টাইল সূত্র (single source of truth)।
   Tailwind Play CDN ব্যবহারের কারণে ইউটিলিটি ক্লাসগুলো (`bg-brand-teal` ইত্যাদি)
   header.php-এর inline `tailwind.config` থেকে আসে। যেসব CSS Tailwind দিতে পারে না
   (কীফ্রেম, স্ক্রলবার, ড্রপডাউন, CMS কন্টেন্ট) সেগুলো এখানে রাখা হয়েছে।

   রঙের নিয়ম: কখনো নতুন হেক্স কোড যোগ করবেন না — নিচের টোকেন ব্যবহার করুন।
   কোনো কোডবেসে কাজ না করলে `var(--...)` ফলব্যাক দিয়ে ইউটিলিটি ক্লাস রাখুন।
   ========================================================================== */

/* ==========================================================================
   বর্ণমালা (Bornomala) — বাংলা ফন্ট
   --------------------------------------------------------------------------
   ডিজাইনার: Jayed Ahsan Saad (codepotro.com)
   লাইসেন্স: SIL Open Font License 1.1 — ওয়েব ব্যবহার ও সেল্ফ-হোস্টিং অনুমোদিত।
   ফাইলগুলো assets/fonts/ এ নিজের সার্ভারে রাখা, তাই তৃতীয় পক্ষের অনুরোধ নেই
   এবং CDN না থাকায় পেজ দ্রুত ও নির্ভরযোগ্য থাকে।

   শুধু দুটি ওজন আছে (400 ও 700)। মাঝের ওজন (500/600) ব্রাউজার কাছাকাছি
   ওজন বেছে নেয় — 400-এর কাছে 500, 700-এর কাছে 600।
   ========================================================================== */

@font-face {
    font-family: 'Bornomala';
    src: url('/assets/fonts/bornomala-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    /* বাংলা লেখার আগে ফন্ট না এলে যেন লেখা লুকিয়ে না যায় */
    unicode-range: U+0951-0952, U+0980-09FE, U+1CD0, U+1CD2-1CD5, U+1CD8-1CE1,
                   U+1CE2-1CE8, U+1CED, U+1CF2-1CF4, U+200C-200D, U+20B9, U+25CC;
}

@font-face {
    font-family: 'Bornomala';
    src: url('/assets/fonts/bornomala-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0951-0952, U+0980-09FE, U+1CD0, U+1CD2-1CD5, U+1CD8-1CE1,
                   U+1CE2-1CE8, U+1CED, U+1CF2-1CF4, U+200C-200D, U+20B9, U+25CC;
}

/* ল্যাটিন ও সংখ্যা — বাংলার জন্য আলাদা ঘোষণা না দিয়ে একই ফন্ট ব্যবহার করা হয়,
   তাই ইংরেজি লেখাও একই রূপে দেখাবে। */

/* .font-bornomala — <body>-তে বসলে পুরো পেজের লেখা এই ফন্টে আসে।
   header.php শুধু যেসব পেজে এটি প্রয়োজন সেখানেই ক্লাসটি বসায়। */
.font-bornomala,
.font-bornomala body {
    font-family: 'Bornomala', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ফন্ট বসলে লেখা যেন সরে যাওয়ার বদলে জায়গা ধরে রাখে (FOUT/CLS হ্রাস) */
.font-bornomala body {
    font-synthesis-weight: none;
}

:root {
    /* ---- ব্র্যান্ড কোর (এগুলোই প্রধান থিম) ---- */
    --brand-teal:        #0F766E;   /* প্রধান ক্রিয়া / লিংক / বর্ডার */
    --brand-teal-light:  #2AA79C;
    --brand-teal-dark:   #115E59;
    --brand-green:       #14532D;   /* গাঢ় সবুজ — হেডার, ফুটার, শিরোনাম */
    --brand-green-dark:  #0B3B1F;
    --brand-green-mid:   #1E6B3B;
    --brand-gold:        #D4AF37;   /* অ্যাকসেন্ট / আইকন / হাইলাইট */
    --brand-gold-dark:   #B8941F;
    --brand-mist:        #F8FAFC;   /* হালকা ব্যাকগ্রাউন্ড */

    /* ---- নিউট্রাল / সেমাংটিক ---- */
    --surface:      #FFFFFF;
    --surface-sunk: #F1F5F9;
    --page:         #F8FAFC;
    --ink:          #1F2937;
    --ink-soft:     #374151;
    --muted:        #6B7280;
    --line:         #E5E7EB;
    --line-soft:    #F1F5F9;

    /* ---- স্ট্যাটাস ---- */
    --success:      #166534;
    --success-bg:   #F0FDF4;
    --success-line: #DCFCE7;
    --danger:       #B91C1C;
    --warning:      #B45309;

    /* ---- রেডিয়াস স্কেল (এক জায়গায়) ---- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* ---- শ্যাডো স্কেল ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.10);
}

/* ==========================================================================
   বেস
   ========================================================================== */

body {
    font-family: 'Hind Siliguri', sans-serif;
    background-color: var(--page);
    color: var(--ink);
    font-size: 15px;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    color: var(--brand-green);
}

/* যেসব কনটেইনার নিজে রঙ ঠিক করে (যেমন বকেয়া-কার্ড: text-green-800 / text-red-800),
   সেখানে শিরোনাম উপরের নিয়মকে উপেক্ষা করে কনটেইনারের রঙ নেয় */
.text-inherit {
    color: inherit;
}

/* ইসলামি প্যাটার্ন — বাইরের হোস্ট নয়, ইনলাইন SVG ডেটা-URI (DNS+TLS ব্যয় নেই) */
.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%230F766E' stroke-opacity='0.22' stroke-width='1'%3E%3Cpath d='M30 4l7 7-7 7-7-7z'/%3E%3Cpath d='M30 42l7 7-7 7-7-7z'/%3E%3Cpath d='M4 30l7-7 7 7-7 7z'/%3E%3Cpath d='M42 30l7-7 7 7-7 7z'/%3E%3Ccircle cx='30' cy='30' r='9'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Cpath d='M0 0l30 30M60 0L30 30M0 60l30-30M60 60L30 30' stroke-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   স্লাইডার
   ========================================================================== */

.slider-img {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider-img.active {
    opacity: 1;
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   ডেস্কটপ ড্রপডাউন
   ========================================================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1024px) {
    .nav-item:hover .dropdown-menu {
        display: block;
        animation: fadeIn 0.3s ease-in-out;
    }
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--surface);
        min-width: 240px;
        box-shadow: var(--shadow-lg);
        z-index: 50;
        border-top: 3px solid var(--brand-teal);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        overflow: hidden;
    }
    .dropdown-menu a {
        display: block;
        padding: 10px 20px;
        color: var(--ink-soft);
        border-bottom: 1px solid var(--line-soft);
        transition: all 0.3s;
        font-size: 14px;
        font-weight: 500;
    }
    .dropdown-menu a:hover {
        background: var(--page);
        color: var(--brand-teal);
        padding-left: 26px;
        border-left: 3px solid var(--brand-gold);
    }
    .dropdown-menu a:last-child { border-bottom: none; }
}

/* ==========================================================================
   মোবাইল মেনু
   ========================================================================== */

#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}
#mobile-menu.open { transform: translateX(0); }

.mobile-dropdown-content {
    display: none;
    background: var(--page);
    padding-left: 15px;
    border-left: 2px solid var(--brand-teal);
    margin-top: 5px;
}
.mobile-dropdown-content.open { display: block; }

/* ==========================================================================
   স্ক্রলবার — শুধু এই ডকুমেন্টের জন্য (iframe/PDF ভিউয়ারে চলবে না, আলাদা ডকুমেন্ট)
   ========================================================================== */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface-sunk); }
::-webkit-scrollbar-thumb { background: var(--brand-teal); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-green); }

/* ==========================================================================
   CMS পেজ কন্টেন্ট (page.php → $page['content'])
   ========================================================================== */

.dynamic-content ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 10px;
}
.dynamic-content ol {
    list-style-type: decimal;
    margin-left: 20px;
    margin-bottom: 10px;
}
.dynamic-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}
.dynamic-content table,
.dynamic-content th,
.dynamic-content td {
    border: 1px solid var(--line);
    padding: 8px;
}
.dynamic-content img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: var(--radius-lg);
}
.dynamic-content a { color: var(--brand-teal); text-decoration: underline; }
.dynamic-content a:hover { color: var(--brand-gold-dark); }

/* ==========================================================================
   স্ক্রোলিং নোটিশ টিকার
   --------------------------------------------------------------------------
   আগে <marquee> ছিল — সেটি প্রতি ফ্রেমে repaint করত, তাই পেজ স্ক্রল করার সময়
   ক্রল আটকে যেত। এখন CSS animation; স্ক্রিন থেকে বাইরে গেলে থামে (S9)।
   ========================================================================== */

.notice-ticker .notice-track {
    display: inline-flex;
    min-width: 100%;
    animation: notice-scroll 32s linear infinite;
    will-change: transform;
}

.notice-ticker:hover .notice-track {
    animation-play-state: paused;
}

/* পর্দার নিচে না গেলে বন্ধ — IntersectionObserver এই ক্লাসটি টগল করে */
.notice-ticker.is-paused .notice-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .notice-ticker .notice-track { animation: none; }
}

@keyframes notice-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ==========================================================================
   YouTube ক্লিক-টু-লোড ফ্যাসাড
   ========================================================================== */

.yt-facade {
    cursor: pointer;
    background: var(--brand-green-dark);
}
.yt-facade img {
    opacity: 0.85;
    transition: opacity 0.25s ease;
}
.yt-facade:hover img { opacity: 1; }

/* ==========================================================================
   ব্র্যান্ড কম্পোনেন্ট হেল্পার (ঐচ্ছিক — ইউটিলিটি ক্লাসের বদলে)
   ========================================================================== */

.bq-section-head {
    background: linear-gradient(90deg, var(--brand-green), var(--brand-teal));
    color: #fff;
    border-bottom: 3px solid var(--brand-gold);
}
.bq-section-head .fa-solid,
.bq-section-head .fa-brands { color: var(--brand-gold); }

.bq-rule { border-bottom: 3px solid var(--brand-teal); }

.bq-btn-primary {
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-green));
    color: #fff;
}
.bq-btn-primary:hover { filter: brightness(1.08); }

.bq-btn-gold {
    background: var(--brand-gold);
    color: var(--brand-green);
}
.bq-btn-gold:hover { filter: brightness(1.08); }