/* ============================================================
   Sonargaon University — SU Theme (global presentation layer)
   Matches the look of cse.su.edu.bd, in the SU logo colours.
   Drop-in: web_assets/engineering/css/su_theme.css
   Loaded LAST in web_content/head.php so it wins over legacy CSS.
   No page content or PHP logic depends on this file.
   ============================================================ */

:root {
    --su-purple: #5B2382;
    --su-purple-dark: #2E1046;
    --su-purple-light: #7B3FA8;
    --su-magenta: #C2185B;
    --su-magenta-dark: #9C123F;
    --su-gold: #E9B824;
    --su-navy: #241B4E;
    --su-ink: #23193C;
    --su-body: #4A4560;
    --su-line: #E9E4F2;
    --su-soft: #F7F5FB;
    --su-radius: 16px;
    --su-shadow: 0 18px 45px rgba(46, 16, 70, .10);
    --su-shadow-lg: 0 26px 60px rgba(46, 16, 70, .16);
    --su-grad: linear-gradient(120deg, var(--su-purple) 0%, var(--su-magenta) 100%);
    --su-grad-deep: linear-gradient(120deg, #2E1046 0%, #5B2382 55%, #C2185B 100%);
}

/* ---------------- Base typography ---------------- */
html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', 'Raleway', 'Segoe UI', system-ui, sans-serif;
    color: var(--su-body);
    font-size: 15.5px;
    line-height: 1.75;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.title, .section-title, .page-title {
    font-family: 'Poppins', 'Raleway', sans-serif;
    color: var(--su-ink);
    font-weight: 700;
    line-height: 1.25;
}

h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: clamp(17px, 1.8vw, 21px); }

a { color: var(--su-purple); transition: color .2s ease; }
a:hover, a:focus { color: var(--su-magenta); text-decoration: none; }

p { margin-bottom: 14px; }

img { max-width: 100%; height: auto; }

::selection { background: rgba(194, 24, 91, .18); }

:focus-visible {
    outline: 3px solid var(--su-gold);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------------- Reusable section frame ---------------- */
.su-section { padding: 74px 0; }
.su-section--soft { background: var(--su-soft); }
.su-section--ink { background: var(--su-purple-dark); color: #E7E0F2; }
.su-section--ink h1, .su-section--ink h2, .su-section--ink h3 { color: #fff; }

.su-eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--su-magenta);
    margin-bottom: 10px;
}
.su-section--ink .su-eyebrow { color: var(--su-gold); }

.su-heading {
    margin: 0 0 12px;
    color: var(--su-navy);
}
.su-section--ink .su-heading { color: #fff; }

.su-sub {
    max-width: 760px;
    margin: 0 auto 34px;
    color: var(--su-body);
}
.su-section--ink .su-sub { color: #CFC5E4; }

.su-center { text-align: center; }

.su-rule {
    width: 78px;
    height: 4px;
    border-radius: 4px;
    background: var(--su-grad);
    margin: 0 0 20px;
}
.su-center .su-rule { margin-left: auto; margin-right: auto; }

/* ---------------- Buttons ---------------- */
.su-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .2px;
    border-radius: 999px;
    padding: 12px 26px;
    border: 0;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.su-btn--primary,
.btn.su-btn--primary {
    background: var(--su-grad);
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(91, 35, 130, .28);
}
.su-btn--ghost {
    background: transparent;
    color: var(--su-purple) !important;
    border: 1.6px solid var(--su-purple);
}
.su-btn--ghost:hover { background: var(--su-purple); color: #fff !important; }
.su-btn--gold {
    background: var(--su-gold);
    color: #35204F !important;
    box-shadow: 0 12px 26px rgba(233, 184, 36, .34);
}
.su-btn--light { background: #fff; color: var(--su-purple) !important; }

/* Legacy bootstrap buttons, made consistent */
.btn-primary { background: var(--su-purple); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--su-purple-dark); }
.btn-info { background: var(--su-magenta); color: #fff; }
.btn-info:hover, .btn-info:focus { background: var(--su-magenta-dark); }
.btn-blue { background: var(--su-purple); color: #fff; }
.btn-blue:hover { background: var(--su-purple-dark); color: #fff; }

/* ---------------- Cards ---------------- */
.su-grid { display: grid; gap: 26px; }
.su-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.su-grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.su-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.su-card {
    background: #fff;
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius);
    box-shadow: var(--su-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.su-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--su-shadow-lg);
    border-color: rgba(194, 24, 91, .28);
}
.su-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--su-soft);
}
.su-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.su-card:hover .su-card__media img { transform: scale(1.07); }
.su-card__body { padding: 22px; flex: 1 1 auto; }
.su-card__title { font-size: 18px; margin: 0 0 8px; color: var(--su-navy); }
.su-card__text { font-size: 14.5px; margin: 0; }
.su-card__foot {
    padding: 0 22px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.su-badge {
    display: inline-block;
    background: rgba(91, 35, 130, .09);
    color: var(--su-purple);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
}
.su-badge--gold { background: rgba(233, 184, 36, .2); color: #7A5A05; }
.su-badge--magenta { background: rgba(194, 24, 91, .1); color: var(--su-magenta); }

/* Chip / pill list */
.su-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.su-chips li {
    background: #fff;
    border: 1px solid var(--su-line);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--su-ink);
}
.su-chips li:hover { border-color: var(--su-magenta); color: var(--su-magenta); }

/* Stats */
.su-stat {
    text-align: center;
    padding: 26px 18px;
    border-radius: var(--su-radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
}
.su-stat__num {
    display: block;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    color: var(--su-gold);
    line-height: 1.1;
}
.su-stat__label { font-size: 13.5px; letter-spacing: 1.2px; text-transform: uppercase; }

/* ---------------- Legacy page bodies (all 328 views) ---------------- */
.about-page, .page-content, .content-page, .single-page,
.blog-post, .table-responsive, .tab-content {
    color: var(--su-body);
}

.table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--su-shadow);
}
.table thead th,
table thead th {
    background: var(--su-purple);
    color: #fff;
    border: 0 !important;
    font-weight: 600;
    font-size: 14px;
    vertical-align: middle;
}
.table td, .table th { vertical-align: middle; font-size: 14.5px; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--su-soft); }
.table-bordered td, .table-bordered th { border-color: var(--su-line) !important; }

.form-control {
    border-radius: 10px;
    border: 1px solid var(--su-line);
    padding: 11px 14px;
    font-size: 14.5px;
    box-shadow: none;
}
.form-control:focus {
    border-color: var(--su-purple-light);
    box-shadow: 0 0 0 4px rgba(91, 35, 130, .12);
}

.nav-tabs { border-bottom: 2px solid var(--su-line); }
.nav-tabs .nav-link, .nav-tabs > li > a {
    border: 0;
    color: var(--su-ink);
    font-weight: 600;
    border-radius: 10px 10px 0 0;
}
.nav-tabs .nav-link.active, .nav-tabs > li.active > a {
    background: var(--su-purple) !important;
    color: #fff !important;
}

.pagination > li > a, .page-link { color: var(--su-purple); border-color: var(--su-line); }
.pagination > .active > a, .page-item.active .page-link {
    background: var(--su-purple);
    border-color: var(--su-purple);
    color: #fff;
}

blockquote {
    border-left: 4px solid var(--su-magenta);
    background: var(--su-soft);
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    font-style: normal;
}

/* Inner page banners used across legacy views */
.page-banner, .banner-area, .breadcrumb-area, .page-header-area {
    background-image: var(--su-grad-deep) !important;
    color: #fff;
    padding: 54px 0;
    text-align: center;
}
.page-banner h1, .banner-area h1, .breadcrumb-area h1 { color: #fff; }

.breadcrumb {
    background: transparent;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
.breadcrumb a { color: #FFE9A8; }
.breadcrumb > .active { color: #fff; }

/* Teacher / people cards used in faculty listings */
.teacher-box, .team-box, .member-box, .faculty-box {
    background: #fff;
    border: 1px solid var(--su-line);
    border-radius: var(--su-radius);
    box-shadow: var(--su-shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.teacher-box:hover, .team-box:hover, .member-box:hover, .faculty-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--su-shadow-lg);
}

/* Kill legacy rainbow / blinking colour effects */
.blinking, .blink, .text-blink { animation: none !important; }

/* ---------------- Utilities ---------------- */
.su-mt-0 { margin-top: 0 !important; }
.su-flex { display: flex; flex-wrap: wrap; gap: 14px; }
.su-flex--center { justify-content: center; align-items: center; }
.su-min0 { min-width: 0; }
.su-fade-up { animation: suFadeUp .7s ease both; }
@keyframes suFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 991px) {
    .su-section { padding: 54px 0; }
    body { font-size: 15px; }
}

@media (max-width: 767px) {
    .su-section { padding: 44px 0; }
    .su-grid { gap: 18px; }
    .btn, .su-btn { width: auto; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    /* legacy fixed-width tables must scroll, not break the page */
    table { width: 100% !important; max-width: 100% !important; }
    iframe, video { max-width: 100%; }
    .container { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------- Print ---------------- */
@media print {
    header, footer, .icon-bar, #fb-root, #fb-customer-chat, .navbar { display: none !important; }
    body { color: #000; font-size: 12pt; }
}


/* ================= RESPONSIVE HARD GUARDS (all 328 views) ================= */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, embed, object { max-width: 100%; height: auto; }
iframe { display: block; }
pre, code { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
.container, .container-fluid { width: 100%; }
.row { margin-left: -12px; margin-right: -12px; }
.row > [class*="col-"] { padding-left: 12px; padding-right: 12px; min-width: 0; }
/* legacy pages often use fixed pixel widths — neutralise them on small screens */
[style*="width:"] img, [style*="width :"] img { max-width: 100%; }

/* any wide legacy table becomes horizontally scrollable instead of breaking layout */
table { width: 100% !important; max-width: 100% !important; border-collapse: collapse; }
table td, table th { word-break: break-word; }

@media (max-width: 1199px) {
    h1 { font-size: 30px; }
    h2 { font-size: 25px; }
    h3 { font-size: 21px; }
}

@media (max-width: 991px) {
    .su-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [class*="col-md-"] { float: none !important; width: auto !important; }
    .pull-left, .pull-right, .float-left, .float-right { float: none !important; }
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 19px; }
}

@media (max-width: 767px) {
    .su-grid--2, .su-grid--3 { grid-template-columns: 1fr; }
    .su-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .su-stat__num { font-size: 26px; }
    .su-heading { font-size: 21px; }
    .su-section { padding: 40px 0; }
    /* wide legacy tables scroll inside their own box */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    table.su-keep, .table-responsive table { white-space: normal; }
    /* full-width buttons and inputs feel right on phones */
    .su-btn, .btn { max-width: 100%; }
    input, select, textarea { width: 100% !important; max-width: 100%; font-size: 16px; }
    /* stop legacy absolute positioning from overflowing */
    .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
    .icon-bar { display: none !important; }
}

@media (max-width: 479px) {
    .su-grid--4 { grid-template-columns: 1fr; }
    body { font-size: 14.5px; }
}