/* ==========================================================================
   Website design styles – chosen in Admin → Appearance → Design Style.
   Each style is a body class (style-glass, style-elegant, style-minimal, style-bold)
   and works with every colour theme. "Classic" uses front.css only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MODERN GLASS – rounded, airy, frosted navigation, floating cards
   -------------------------------------------------------------------------- */
body.style-glass { --sr: 18px; background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--primary) 4%, var(--bg)) 100%); }
body.style-glass .main-nav {
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08); border-bottom: 1px solid rgba(15, 23, 42, .06);
}
body.style-glass .nav-menu > li > a { color: var(--ink); font-weight: 600; margin: 8px 0; padding: 8px 12px; border-radius: 30px; }
body.style-glass .nav-menu > li.active > a, body.style-glass .nav-menu > li:hover > a { background: var(--primary); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 35%, transparent); }
body.style-glass .nav-menu > li.active > a { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 35%, transparent); }
body.style-glass .nav-search { color: var(--ink); border-radius: 50%; }
body.style-glass .nav-search:hover { color: #fff; }
body.style-glass .sub-menu { border-radius: 16px; border-top: 0; margin-top: 4px; box-shadow: 0 20px 44px rgba(15, 23, 42, .16); padding: 8px; }
body.style-glass .sub-menu a { border-radius: 10px; }
body.style-glass.theme-dark .main-nav { background: rgba(15, 23, 42, .86); border-bottom-color: rgba(255, 255, 255, .06); }
body.style-glass.theme-dark .nav-menu > li > a, body.style-glass.theme-dark .nav-search { color: #e6ebf3; }

body.style-glass .vm-box, body.style-glass .leader-v3, body.style-glass .ql-row, body.style-glass .award-card,
body.style-glass .prog-card, body.style-glass .mgmt-card, body.style-glass .news-card, body.style-glass .content-card,
body.style-glass .side-card, body.style-glass .contact-info-card, body.style-glass .ticker, body.style-glass .g-item {
    border-radius: var(--sr); border-color: transparent; box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}
body.style-glass .ql-row { border-radius: 12px; }
body.style-glass .sec-icon {
    width: 46px; height: 46px; border-radius: 14px; display: inline-grid; place-items: center; font-size: 20px; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 35%, transparent);
}
body.style-glass .btn-hero-1, body.style-glass .btn-hero-2, body.style-glass .btn-outline-c,
body.style-glass .btn-primary-c, body.style-glass .btn-accent { border-radius: 40px; }
body.style-glass .c-nav { width: 40px; height: 40px; box-shadow: 0 8px 20px rgba(15, 23, 42, .15); border: 0; }
body.style-glass .page-banner { border-radius: 0 0 32px 32px; }
body.style-glass .site-footer { border-radius: 32px 32px 0 0; margin-top: 40px; }
body.style-glass .stats-band { background: transparent; }
body.style-glass .stats-band::before { display: none; }
body.style-glass .stats-band .container-xxl {
    background: linear-gradient(120deg, var(--secondary), color-mix(in srgb, var(--secondary) 70%, var(--primary)));
    border-radius: 22px; padding-top: 18px; padding-bottom: 18px; box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}
@media (min-width: 992px) {
    body.style-glass .hero-v3 .hero-swiper { border-radius: 0 0 36px 36px; height: 580px; }
    body.style-glass .hero-v3 .hero-title { font-size: 42px; }
    body.style-glass .hero-v3 .hero-desc { font-size: 15px; margin-bottom: 22px; }
    html:lang(mr) body.style-glass .hero-v3 .hero-title, html:lang(hi) body.style-glass .hero-v3 .hero-title { font-size: 38px; }
    body.style-glass .hero-v3 .hero-content {
        max-width: 540px; height: auto; top: calc(50% - 22px); transform: translateY(-50%); padding: 26px 30px 28px; border-radius: 24px;
        background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
    }
    body.style-glass .hero-v3 .hero-slide::before {
        background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 75%, transparent) 0%, color-mix(in srgb, var(--primary) 35%, transparent) 45%, transparent 70%);
    }
    body.style-glass .stats-band { margin-top: -44px; position: relative; z-index: 4; padding: 0; }
    body.style-glass .hero-v3 .hero-pagination { bottom: 62px !important; }
}

/* --------------------------------------------------------------------------
   2. ELEGANT GRADIENT – rich gradients, gold accents, refined headings
   -------------------------------------------------------------------------- */
body.style-elegant .topbar { background: color-mix(in srgb, var(--secondary) 92%, #000); }
body.style-elegant .brand-header {
    background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%), linear-gradient(180deg, #fff, #fbf8f2);
}
body.style-elegant.theme-dark .brand-header { background: linear-gradient(180deg, #111a2e, #0b1120); }
body.style-elegant .main-nav { background: linear-gradient(90deg, var(--secondary) 0%, color-mix(in srgb, var(--secondary) 55%, var(--primary)) 60%, var(--primary) 100%); }
body.style-elegant .nav-menu > li > a { position: relative; }
body.style-elegant .nav-menu > li > a::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 7px; height: 2px; background: var(--accent); transition: left .25s, right .25s;
}
body.style-elegant .nav-menu > li.active > a, body.style-elegant .nav-menu > li:hover > a { background: rgba(255, 255, 255, .12); box-shadow: none; }
body.style-elegant .nav-menu > li.active > a::after, body.style-elegant .nav-menu > li:hover > a::after { left: 12px; right: 12px; }
body.style-elegant .nav-search:hover { background: rgba(255, 255, 255, .12); }

body.style-elegant .sec-title { position: relative; padding-bottom: 10px; font-weight: 700; }
body.style-elegant .sec-title::after {
    display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}
body.style-elegant .sec-icon { color: var(--accent); filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--primary) 35%, transparent)); }
body.style-elegant .vm-box, body.style-elegant .leader-v3, body.style-elegant .mgmt-card, body.style-elegant .award-card,
body.style-elegant .news-card, body.style-elegant .content-card, body.style-elegant .contact-info-card {
    border: 0; border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); position: relative;
}
body.style-elegant .vm-box::before, body.style-elegant .leader-v3::before, body.style-elegant .mgmt-card::before,
body.style-elegant .content-card::before, body.style-elegant .contact-info-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
}
body.style-elegant .leader-v3, body.style-elegant .contact-info-card { overflow: hidden; }
body.style-elegant .mgmt-photo::before { display: none; }
body.style-elegant .btn-hero-1, body.style-elegant .btn-primary-c {
    background: linear-gradient(120deg, var(--primary), color-mix(in srgb, var(--primary) 50%, var(--secondary))); border-radius: 30px;
    position: relative; overflow: hidden;
}
body.style-elegant .btn-hero-1::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transition: left .6s;
}
body.style-elegant .btn-hero-1:hover::before { left: 130%; }
body.style-elegant .btn-hero-2, body.style-elegant .btn-outline-c { border-radius: 30px; }
body.style-elegant .hero-v3 .hero-title span { font-style: italic; }
body.style-elegant .stats-band { background: linear-gradient(110deg, var(--secondary), color-mix(in srgb, var(--secondary) 50%, var(--primary))); }
body.style-elegant .page-banner {
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 88%, transparent), color-mix(in srgb, var(--secondary) 85%, transparent)), var(--banner, none) center 40%/cover;
}
body.style-elegant .page-banner h1 { font-style: italic; }
body.style-elegant .site-footer { background: linear-gradient(160deg, var(--secondary), color-mix(in srgb, var(--secondary) 75%, #000)); }
body.style-elegant .footer-bottom { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, var(--secondary))); }
@media (min-width: 992px) {
    body.style-elegant .hero-v3 .hero-slide::before {
        background: linear-gradient(115deg, color-mix(in srgb, var(--secondary) 92%, transparent) 0%, color-mix(in srgb, var(--primary) 78%, transparent) 38%, color-mix(in srgb, var(--primary) 20%, transparent) 58%, transparent 72%);
    }
}

/* --------------------------------------------------------------------------
   3. MINIMAL CLEAN – white space, thin lines, flat cards, no heavy colour blocks
   -------------------------------------------------------------------------- */
body.style-minimal .topbar { background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--border); }
body.style-minimal .topbar-left { color: var(--muted); }
body.style-minimal .topbar-right .topbar-links a { color: var(--ink); }
body.style-minimal .topbar-right .topbar-links a:hover { background: var(--primary-soft); color: var(--primary); }
body.style-minimal .topbar .text-accent, body.style-minimal .topbar-right .topbar-links a i { color: var(--primary) !important; }
body.style-minimal .lang-btn { background: transparent; color: var(--ink); border-color: var(--border); }
body.style-minimal .lang-btn .fa-globe { color: var(--primary); }
body.style-minimal .lang-btn:hover, body.style-minimal .lang-btn[aria-expanded="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
body.style-minimal .lang-btn:hover .fa-globe, body.style-minimal .lang-btn[aria-expanded="true"] .fa-globe { color: #fff; }
body.style-minimal .brand-header { background: var(--surface); border-bottom: 0; }
body.style-minimal .main-nav { background: var(--surface); box-shadow: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.style-minimal .nav-menu > li > a { color: var(--ink); font-weight: 500; box-shadow: none !important; border-bottom: 3px solid transparent; padding-bottom: 12px; }
body.style-minimal .nav-menu > li.active > a, body.style-minimal .nav-menu > li:hover > a { background: transparent; color: var(--primary); border-bottom-color: var(--primary); }
body.style-minimal .nav-menu > li.active > a i:not(.caret) { color: var(--primary); }
body.style-minimal .nav-search { color: var(--ink); }
body.style-minimal .nav-search:hover { background: var(--primary-soft); color: var(--primary); }
body.style-minimal .sub-menu { border-top-width: 2px; border-top-color: var(--primary); border-radius: 0; box-shadow: 0 12px 30px rgba(15, 23, 42, .1); }

body.style-minimal .vm-box, body.style-minimal .leader-v3, body.style-minimal .ql-row, body.style-minimal .award-card,
body.style-minimal .prog-card, body.style-minimal .mgmt-card, body.style-minimal .news-card, body.style-minimal .content-card,
body.style-minimal .side-card, body.style-minimal .contact-info-card, body.style-minimal .ticker {
    border-radius: 6px; box-shadow: none; border: 1px solid var(--border); background: var(--surface);
}
body.style-minimal .vm-box:hover, body.style-minimal .leader-v3:hover, body.style-minimal .mgmt-card:hover,
body.style-minimal .prog-card:hover, body.style-minimal .news-card:hover {
    transform: none; box-shadow: none; border-color: var(--primary);
}
body.style-minimal .prog-card { background: var(--surface); }
body.style-minimal .vm-box::after { display: none; }
body.style-minimal .vm-box { padding-bottom: 54px; }
body.style-minimal .sec-icon { display: none; }
body.style-minimal .sec-title { border-left: 4px solid var(--primary); padding-left: 12px; font-weight: 600; }
body.style-minimal .sec-sub { padding-left: 16px; color: var(--muted); opacity: 1; }
body.style-minimal .btn-hero-1, body.style-minimal .btn-hero-2, body.style-minimal .btn-outline-c { border-radius: 2px; box-shadow: none; }
body.style-minimal .c-nav { box-shadow: none; border-radius: 4px; }
body.style-minimal .stats-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.style-minimal .stats-band::before { display: none; }
body.style-minimal .stats-band .stat-icon, body.style-minimal .stats-band .stat-val { color: var(--primary); -webkit-text-fill-color: var(--primary); }
body.style-minimal .stats-band .stat-lbl { color: var(--muted); }
body.style-minimal .stats-band .stat { border-color: var(--border); }
body.style-minimal .page-banner { background: var(--soft); color: var(--ink); border-bottom: 1px solid var(--border); padding: 40px 0 34px; }
body.style-minimal .page-banner h1 { color: var(--heading); }
body.style-minimal .page-banner p { color: var(--muted); }
body.style-minimal .page-banner .breadcrumb a { color: var(--primary); }
body.style-minimal .page-banner .breadcrumb-item.active, body.style-minimal .page-banner .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
body.style-minimal .site-footer { background: var(--soft); color: var(--text); border-top: 1px solid var(--border); }
body.style-minimal .site-footer .f-name, body.style-minimal .site-footer .f-title { color: var(--heading); }
body.style-minimal .site-footer .f-links a, body.style-minimal .site-footer .f-contact a, body.style-minimal .site-footer .f-contact li { color: var(--text); }
body.style-minimal .site-footer .f-links a:hover { color: var(--primary); }
body.style-minimal .site-footer .f-links a::before, body.style-minimal .site-footer .f-contact i { color: var(--primary); }
body.style-minimal .site-footer .f-title::after { background: var(--primary); }
@media (min-width: 992px) {
    body.style-minimal .hero-v3 .hero-slide::before {
        background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 88%, transparent) 0%, color-mix(in srgb, var(--secondary) 60%, transparent) 34%, transparent 60%);
    }
    body.style-minimal .hero-v3 .hero-slide::after { display: none; }
}

/* --------------------------------------------------------------------------
   4. BOLD ACADEMIC – strong colour blocks, uppercase menu, angled sections
   -------------------------------------------------------------------------- */
body.style-bold .brand-header { border-bottom: 5px solid var(--accent); }
body.style-bold .main-nav { background: var(--primary); }
body.style-bold .nav-menu > li > a { text-transform: uppercase; font-weight: 700; font-size: 12.5px; letter-spacing: .4px; }
body.style-bold .nav-menu > li.active > a, body.style-bold .nav-menu > li:hover > a { background: var(--accent); color: #1b1b1b; box-shadow: none; }
body.style-bold .nav-menu > li.active > a i:not(.caret) { color: #1b1b1b; }
body.style-bold .nav-search:hover { background: var(--accent); color: #1b1b1b; }
body.style-bold .sub-menu { border-radius: 0; border-top-width: 4px; }
html:lang(mr) body.style-bold .nav-menu > li > a, html:lang(hi) body.style-bold .nav-menu > li > a { text-transform: none; letter-spacing: 0; font-size: 14px; }

body.style-bold .sec-icon {
    width: 46px; height: 46px; display: inline-grid; place-items: center; font-size: 20px;
    background: var(--primary); color: var(--accent); box-shadow: 6px 6px 0 var(--accent);
}
body.style-bold .sec-title { text-transform: uppercase; font-weight: 900; letter-spacing: .3px; }
html:lang(mr) body.style-bold .sec-title, html:lang(hi) body.style-bold .sec-title { text-transform: none; }
body.style-bold .vm-box, body.style-bold .ql-row, body.style-bold .award-card, body.style-bold .news-card,
body.style-bold .content-card, body.style-bold .side-card, body.style-bold .contact-info-card, body.style-bold .prog-card {
    border-radius: 4px; border-left: 5px solid var(--primary);
}
body.style-bold .mgmt-card, body.style-bold .leader-v3 { border-radius: 4px; border-top: 5px solid var(--primary); }
body.style-bold .mgmt-photo::before { background: var(--primary); }
body.style-bold .vm-box:hover, body.style-bold .mgmt-card:hover, body.style-bold .news-card:hover { box-shadow: 10px 10px 0 color-mix(in srgb, var(--accent) 70%, transparent); }
body.style-bold .btn-hero-1, body.style-bold .btn-hero-2, body.style-bold .btn-outline-c, body.style-bold .btn-primary-c {
    border-radius: 0; text-transform: uppercase; font-weight: 700; letter-spacing: .5px;
}
html:lang(mr) body.style-bold .btn-hero-1, html:lang(hi) body.style-bold .btn-hero-1,
html:lang(mr) body.style-bold .btn-hero-2, html:lang(hi) body.style-bold .btn-hero-2 { text-transform: none; letter-spacing: 0; }
body.style-bold .btn-hero-1 { background: var(--accent); color: #1b1b1b; border-color: var(--accent); }
body.style-bold .btn-hero-1:hover { background: #fff; color: #1b1b1b; }
body.style-bold .c-nav { border-radius: 0; }
body.style-bold .stats-band { background: var(--secondary); border-top: 5px solid var(--accent); }
body.style-bold .stats-band::before { display: none; }
body.style-bold .stats-band .stat-val { font-size: 28px; font-weight: 900; }
body.style-bold .page-banner h1 { text-transform: uppercase; }
html:lang(mr) body.style-bold .page-banner h1, html:lang(hi) body.style-bold .page-banner h1 { text-transform: none; }
body.style-bold .site-footer { border-top: 6px solid var(--accent); }
body.style-bold .footer-bottom { background: color-mix(in srgb, var(--secondary) 80%, #000); }
@media (min-width: 992px) {
    body.style-bold .hero-v3 .hero-swiper { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
    body.style-bold .hero-v3 .hero-title { font-size: 44px; text-transform: uppercase; letter-spacing: .5px; max-width: 520px; }
    html:lang(mr) body.style-bold .hero-v3 .hero-title, html:lang(hi) body.style-bold .hero-v3 .hero-title { text-transform: none; font-size: 44px; }
    body.style-bold .hero-v3 .hero-pagination { bottom: 50px !important; }
    body.style-bold .page-banner { clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); padding-bottom: 60px; }
}