/* ==========================================================================
   Modern UI enhancement layer (public website only)
   Loaded LAST so it refines the existing theme without touching markup/logic.
   Conservative, additive styling — modernises typography, cards, tables,
   forms, buttons, page headers, footer and responsiveness across ALL pages.
   ========================================================================== */

/* ---------- Bangla font: SolaimanLipi (local) ---------- */
@font-face {
    font-family: 'SolaimanLipi';
    src: url('../../fonts/SolaimanLipi.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SolaimanLipi';
    src: url('../../fonts/SolaimanLipiBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --mc-primary: #1a4e8a;
    --mc-primary-dark: #143e6e;
    --mc-accent: #2e6fc0;
    --mc-ink: #1f2937;
    --mc-muted: #6b7280;
    --mc-line: #e6e9f0;
    --mc-bg: #f6f8fb;
    --mc-radius: 14px;
    --mc-shadow: 0 6px 22px rgba(20, 40, 80, .07);
    --mc-shadow-sm: 0 2px 10px rgba(20, 40, 80, .06);
}

/* ---------- Base typography ---------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--mc-ink);
}
img { max-width: 100%; height: auto; }

/* ---------- Accessibility: skip link ---------- */
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: var(--mc-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, .form-control:focus-visible {
    outline: 2px solid var(--mc-accent); outline-offset: 2px;
}

/* ---------- Section rhythm ---------- */
.main-content, section.py-5 { scroll-margin-top: 90px; }

/* ---------- Page titles (inner pages) ---------- */
.page-title { position: relative; margin-bottom: 18px; }
.page-title h1, .page-title h2, .page-title h3, .page-title h4, .page-title h5 {
    font-weight: 700; color: var(--mc-primary); display: inline-block; padding-bottom: 8px; margin: 0;
}
.page-title h1::after, .page-title h2::after, .page-title h3::after,
.page-title h4::after, .page-title h5::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 56px;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-accent)); border-radius: 3px;
}

/* Centered section headings used on many pages (e.g. teachers) */
section .text-center > h4,
section .text-center > h3 { font-weight: 700; color: var(--mc-primary); position: relative; padding-bottom: 12px; }
section .text-center > h4::after,
section .text-center > h3::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
    height: 3px; width: 64px; background: linear-gradient(90deg, var(--mc-primary), var(--mc-accent)); border-radius: 3px;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--mc-line) !important;
    border-radius: var(--mc-radius) !important;
    box-shadow: var(--mc-shadow-sm);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--mc-shadow); }
.card .card-body { padding: 1.1rem 1.15rem; }
.card img { border-radius: 10px; }

/* ---------- Tables ---------- */
.main-content .table, section .table {
    border-collapse: separate; border-spacing: 0; width: 100%;
}
.table:not(.no-modern) > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { background: #f3f6fb; color: #374151; font-weight: 600; border-bottom: 2px solid var(--mc-line); }
.table.table-bordered th, .table.table-bordered td { border: 1px solid #dde3ec; }
.table-hover tbody tr:hover { background: #f7faff; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 10px; border: 1px solid #d7dce5; padding: .55rem .8rem; font-size: 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--mc-accent); box-shadow: 0 0 0 .2rem rgba(46, 111, 192, .15);
}
label { font-weight: 600; color: #374151; margin-bottom: 4px; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background: var(--mc-primary); border-color: var(--mc-primary); }
.btn-primary:hover { background: var(--mc-primary-dark); border-color: var(--mc-primary-dark); }
.btn-success { background: #1b9e5a; border-color: #1b9e5a; }
.btn-success:hover { background: #15814a; border-color: #15814a; }

/* ---------- Hero text legibility (scrim) ---------- */
.hero-caption { text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.slider-section .carousel-item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}
.slider-section .carousel-caption { z-index: 2; }

/* ---------- Header / sticky menu ---------- */
.menu-section { position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* ---------- Notice board / important links (homepage widgets) ---------- */
.notice-board-wrapper, .important-link { border-radius: var(--mc-radius); overflow: hidden; }

/* ---------- Footer ---------- */
footer .footer-head ul li a { transition: color .15s ease, padding-left .15s ease; }
footer .footer-head ul li a:hover { padding-left: 4px; }
footer .location-info p { word-break: break-word; }

/* ---------- Empty / utility ---------- */
.text-muted { color: var(--mc-muted) !important; }

/* ==========================================================================
   Responsive refinements
   ========================================================================== */
@media (max-width: 991.98px) {
    h1 { font-size: 1.5rem; }
    .menu-section { position: static; }
}

@media (max-width: 767.98px) {
    section.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .card .card-body { padding: 0.95rem; }
    /* keep wide tables scrollable instead of breaking layout */
    .main-content .table-responsive, section .table-responsive { -webkit-overflow-scrolling: touch; }
    .table { font-size: 13px; }
    /* footer contact rows stack cleanly */
    footer .location-info p.d-flex { flex-direction: column; }
    footer .location-info .f-title { margin-bottom: 2px; }
}

@media (max-width: 575.98px) {
    .header-top .header-rop-right { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 12px; }
    h1 { font-size: 1.25rem; }
    .btn { width: 100%; }
    .hero-actions .btn { width: auto; }
}

/* larger, touch-friendly tap targets for menus on touch devices */
@media (hover: none) {
    .menubar ul li a, .mobile-menu a, .accordion-button.custom { min-height: 44px; }
}

/* ==========================================================================
   Bangla typography — render Bangla text with SolaimanLipi
   ========================================================================== */
/* Global fallback: Latin uses Inter, any Bangla glyph falls back to SolaimanLipi */
body { font-family: 'Inter', 'SolaimanLipi', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* When the page is in Bangla, use the Bangla font everywhere — including
   headings that otherwise use 'Bebas Neue' (which has no Bangla glyphs). */
html[lang="bn"] body,
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3,
html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6,
html[lang="bn"] p, html[lang="bn"] a, html[lang="bn"] span,
html[lang="bn"] li, html[lang="bn"] td, html[lang="bn"] th,
html[lang="bn"] label, html[lang="bn"] button, html[lang="bn"] .btn,
html[lang="bn"] input, html[lang="bn"] select, html[lang="bn"] textarea,
html[lang="bn"] .hero-title, html[lang="bn"] .hero-badge, html[lang="bn"] .hero-sub,
html[lang="bn"] .stat-number, html[lang="bn"] .stat-label,
html[lang="bn"] .menubar, html[lang="bn"] .accordion-button,
html[lang="bn"] .nb-title, html[lang="bn"] .np-title, html[lang="bn"] .qa-card span {
    font-family: 'SolaimanLipi', 'Inter', sans-serif !important;
}
html[lang="bn"] { line-height: 1.7; }

/* ==========================================================================
   Font-size adjustment
   (SolaimanLipi renders visually smaller, so scale Bangla up for readability)
   ========================================================================== */
body { font-size: 16px; line-height: 1.6; }

html[lang="bn"] body { font-size: 17px; line-height: 1.9; }
html[lang="bn"] p,
html[lang="bn"] .aboutinfo-text,
html[lang="bn"] li,
html[lang="bn"] td,
html[lang="bn"] th { font-size: 1.02em; }
html[lang="bn"] .menubar ul li a,
html[lang="bn"] .sub-menu a,
html[lang="bn"] .child-menu a,
html[lang="bn"] .accordion-button.custom { font-size: 15px; }
html[lang="bn"] .footer-head ul li a,
html[lang="bn"] .location-info p,
html[lang="bn"] .header-rop-right a { font-size: 14px; }
html[lang="bn"] .btn,
html[lang="bn"] .form-control,
html[lang="bn"] .form-select { font-size: 15px; }

/* ==========================================================================
   Online Admission / Application forms (all program types)
   ========================================================================== */
.application-page .page-breadcrumb h4{font-weight:800;color:var(--mc-primary);margin:0}
.application-page .card{border:1px solid #e6e9f0!important;border-radius:14px!important;box-shadow:0 3px 14px rgba(20,40,80,.05);margin-bottom:20px}
.application-page .card:hover{transform:none;box-shadow:0 3px 14px rgba(20,40,80,.05)}
/* Section headers — clear, gradient, sectioned */
.application-page .card-header.bg-primary{
    background:linear-gradient(135deg,#1a4e8a,#2e6fc0)!important;border:0;padding:13px 18px;
    border-radius:14px 14px 0 0;display:flex;align-items:center;gap:8px
}
.application-page .card-header.bg-primary h6{font-weight:700;letter-spacing:.3px;font-size:13.5px;margin:0}
.application-page .card-body{padding:20px}
/* Labels & inputs */
.application-page .form-label{font-weight:600;font-size:13px;color:#374151;margin-bottom:5px}
.application-page .form-control,.application-page .form-select{
    border-radius:9px;border:1px solid #d7dce5;padding:9px 12px;font-size:14px
}
.application-page .form-control:focus,.application-page .form-select:focus{
    border-color:#2e6fc0;box-shadow:0 0 0 .2rem rgba(46,111,192,.15)
}
.application-page .text-danger{font-size:12px}
/* SSC roll search step — make it a clear, inviting entry card */
.application-page .card-header.bg-primary + .card-body .btn-primary{padding:9px 22px;border-radius:9px}
.application-page input[name="roll"]{font-size:16px;letter-spacing:1px}
.application-page .text-danger h3{font-size:16px;font-weight:600}
/* Submit / action buttons */
.application-page .btn{border-radius:9px;font-weight:600}
.application-page .btn-success,.application-page button[type="submit"].btn-primary{padding:11px 30px;font-size:15px}
/* Tables inside forms (subject lists etc.) stay readable */
.application-page .table th,.application-page .table td{font-size:13px;vertical-align:middle}
/* Responsive */
@media(max-width:575.98px){
    .application-page .card-body{padding:14px}
    .application-page .card-header.bg-primary{padding:11px 14px}
}

/* ---------- Admission step guide + instruction banner ---------- */
.app-guide{background:#fff;border:1px solid #e6e9f0;border-radius:14px;box-shadow:0 2px 10px rgba(20,40,80,.05);padding:16px 18px}
.app-note{display:flex;gap:10px;align-items:flex-start;background:#eef4fb;border:1px solid #d8e6f7;color:#1a4e8a;border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.55}
.app-note i{font-size:17px;flex:0 0 auto;margin-top:1px}
.app-steps{display:flex;align-items:center;gap:6px;margin-top:14px;flex-wrap:nowrap;overflow-x:auto}
.app-step{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:6px 4px}
.app-step-no{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:#eef1f6;color:#8a93a3;border:2px solid #e2e7ef}
.app-step-txt b{display:block;font-size:12px;color:#9aa3b2;line-height:1.1}
.app-step-txt small{display:block;font-size:13px;font-weight:600;color:#475569}
.app-step.is-active .app-step-no{background:linear-gradient(135deg,#1a4e8a,#2e6fc0);color:#fff;border-color:transparent}
.app-step.is-active .app-step-txt b{color:#1a4e8a}
.app-step.is-active .app-step-txt small{color:#1a4e8a}
.app-step.is-done .app-step-no{background:#1b9e5a;color:#fff;border-color:transparent}
.app-step-line{flex:1 1 auto;min-width:18px;height:2px;background:#e2e7ef;margin:0 2px}
@media(max-width:575.98px){
    .app-step-txt b{font-size:10.5px}
    .app-step-txt small{font-size:11.5px}
    .app-step-no{width:30px;height:30px;font-size:13px}
}

/* ==========================================================================
   Modern site footer (public)
   ========================================================================== */
.site-footer{background:linear-gradient(135deg,#0f2440 0%,#143e6e 100%);color:#cdd7e6;margin-top:48px}
.site-footer .sf-top{padding:48px 0 30px}
.sf-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:14px}
.sf-brand img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px;padding:5px;flex:0 0 auto}
.sf-brand strong{display:block;color:#fff;font-size:16px;line-height:1.25}
.sf-brand small{color:#9fb3cc;font-size:11.5px}
.sf-about{font-size:13px;line-height:1.75;color:#a9bcd4;margin-bottom:16px;max-width:340px}
.sf-social{display:flex;gap:8px;flex-wrap:wrap}
.sf-social a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#cdd7e6;font-size:15px;transition:background .15s,color .15s,transform .15s}
.sf-social a:hover{background:#2e6fc0;color:#fff;transform:translateY(-2px)}
.sf-head{color:#fff;font-size:14px;font-weight:700;margin-bottom:15px;position:relative;padding-bottom:9px}
.sf-head::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:#2e6fc0;border-radius:2px}
.sf-links,.sf-contact{list-style:none;padding:0;margin:0}
.sf-links li{margin-bottom:9px}
.sf-links a{color:#a9bcd4;text-decoration:none;font-size:13px;transition:color .15s,padding-left .15s}
.sf-links a:hover{color:#fff;padding-left:4px}
.sf-contact li{display:flex;gap:9px;font-size:13px;color:#a9bcd4;margin-bottom:12px;line-height:1.6}
.sf-contact li i{color:#5b9be0;font-size:15px;flex:0 0 auto;margin-top:2px}
.sf-contact a{color:#a9bcd4;text-decoration:none;word-break:break-word}
.sf-contact a:hover{color:#fff}
.sf-bottom{border-top:1px solid rgba(255,255,255,.1);padding:15px 0;font-size:12.5px}
.sf-bottom p{color:#9fb3cc;margin:0}
.sf-bottom-right a{color:#cdd7e6;text-decoration:none}
.sf-bottom-right a:hover{color:#fff}
.sf-dot{opacity:.4;margin:0 8px}
html[lang="bn"] .sf-about,html[lang="bn"] .sf-links a,html[lang="bn"] .sf-contact li{line-height:1.9}
@media(max-width:575.98px){.site-footer .sf-top{padding:34px 0 18px}.sf-brand img{width:46px;height:46px}.sf-bottom .container{justify-content:center}}