/* =========================================================
   Sitaramji Ganorkar Junior College of Science
   NAAC-Ready Design System
   Concept: "The Ledger" — a science college's academic register
   reimagined as a public accreditation record. Navy for institutional
   trust, brass for the seal/insignia, paper for the register page.
   ========================================================= */

:root {
    /* ---- Color tokens ---- */
    --ink: #16294B;          /* primary navy — header, nav, headings */
    --ink-dark: #0B1526;     /* near-black navy — footer, deep panels */
    --brass: #B3862C;        /* seal / accent gold */
    --brass-light: #D8AF5C;  /* brass hover / highlight */
    --maroon: #7A1F2B;       /* sparing academic accent — badges, alerts */
    --paper: #F7F4EA;        /* warm paper background */
    --paper-dim: #EFEADA;    /* recessed paper panels */
    --slate: #49546B;        /* muted body copy */
    --line: #DCD4BC;         /* hairline rule on paper */
    --line-dark: rgba(255,255,255,.12);
    --white: #FFFFFF;

    /* ---- Type ---- */
    --font-display: 'Lora', 'Georgia', serif;
    --font-body: 'Work Sans', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--slate);
    background: var(--paper);
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brass); }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass);
    font-weight: 600;
}

.fw-medium { font-weight: 600 !important; }
.fw-semi-bold { font-weight: 700 !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   TOP UTILITY BAR — transparency & statutory quick-access
   ========================================================= */
.util-bar {
    background: var(--ink-dark);
    color: #C9D0DE;
    font-family: var(--font-mono);
    font-size: 12.5px;
    border-bottom: 1px solid var(--line-dark);
}

.util-bar a {
    color: #C9D0DE;
    padding: 8px 14px;
    display: inline-block;
    border-right: 1px solid var(--line-dark);
    transition: color .2s;
}

.util-bar a:first-child { border-left: 1px solid var(--line-dark); }
.util-bar a:hover { color: var(--brass-light); }

.grade-chip {
    background: var(--brass);
    color: var(--ink-dark);
    font-weight: 700;
    padding: 8px 16px;
    letter-spacing: .04em;
}

/* =========================================================
   MASTHEAD — institution identity band
   ========================================================= */
.masthead {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 22px 0;
}

.masthead .seal {
    width: 100px;
    height: 100px;
    flex: 0 0 auto;
    font-family: cambria;
}

.masthead .group-name {
    font-family: cambria;
    font-size: 15px;
    letter-spacing: .12em;
    font-weight:700px;
    color: var(--maroon);
}

.masthead h1 {
    font-size:40px;
    margin: 2px 0 4px;
}

.masthead .address {
    font-size: 15px;
    color: var(--slate);
    font-family: cambria;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.navbar.site-nav {
    background: var(--ink) !important;
    padding: 0;
    font-family: cambria;
}

.site-nav .navbar-nav .nav-link {
    color: #E7EAF2;
    font-family: cambria;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 18px 16px !important;
    border-bottom: 3px solid transparent;
}

.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link.active {
    color: var(--brass-light);
    border-bottom-color: var(--brass);
}

.site-nav .dropdown-menu {
    background: var(--white);
    border: none;
    border-top: 3px solid var(--brass);
    border-radius: 0;
    box-shadow: 0 14px 30px rgba(11,21,38,.18);
    padding: 8px 0;
}

.site-nav .dropdown-item {
    font-size: 13.5px;
    padding: 9px 20px;
    color: var(--ink);
}

.site-nav .dropdown-item:hover {
    background: #16294B;
    color: #fff;
}

.site-nav .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 6px;
    font-size: 11px;
}

@media (min-width: 992px) {
    .site-nav .nav-item .dropdown-menu {
        display: block;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: .25s ease;
    }
    .site-nav .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.navbar-toggler { border-color: var(--line-dark); }
.navbar-toggler-icon {
    filter: invert(1);
}

/* =========================================================
   HERO — statement + accreditation seal, no photography needed
   ========================================================= */
/* Hero Slider */

.hero-slider{
    border-radius:24px;
    /*overflow:hidden;*/
    /*border:1px solid rgba(255,255,255,.15);*/
    /*box-shadow:*/
    /*    0 20px 50px rgba(0,0,0,.35),*/
    /*    0 0 0 1px rgba(255,255,255,.05);*/
    /*background:#111;*/
}

.hero-slider .carousel-inner{
    /*border-radius:24px;*/
}

.hero-slider img{
    width:100%;
    height:530px;
    object-fit:cover;
    transition:transform .8s ease;
}

.hero-slider .carousel-item.active img{
    transform:scale(1.05);
}

.hero-slider::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.35),
        rgba(0,0,0,0)
    );
    pointer-events:none;
}

.hero-slider .carousel-indicators{
    margin-bottom:18px;
}

.hero-slider .carousel-indicators button{
    width:10px;
    height:10px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.45);
}

.hero-slider .carousel-indicators .active{
    background:#d4af37;
    width:30px;
    border-radius:20px;
}

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{
    width:12%;
}

.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background-color:rgba(0,0,0,.45);
    backdrop-filter:blur(6px);
    background-size:50%;
}

@media (max-width:991px){

.hero-slider{
    margin-top:30px;
}

.hero-slider img{
    height:320px;
}

}

@media (max-width:576px){

.hero-slider img{
    height:240px;
}

}

/* =========================================================
   TRANSPARENCY / QUICK ACCESS STRIP
   ========================================================= */
.quick-access { background: var(--paper-dim); border-bottom: 1px solid var(--line); }

.quick-access .qa-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 14px;
    border-right: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    font-family: cambria;
}

.quick-access .qa-item:last-child { border-right: none; }

.quick-access .qa-item i {
    font-size: 18px;
    color: var(--maroon);
    flex: 0 0 auto;
}

.quick-access .qa-item:hover i,
.quick-access .qa-item:hover { color: var(--brass); }

/* =========================================================
   NOTICE TICKER
   ========================================================= */
.notice-band {
    background: var(--ink);
    color: var(--white);
    display: flex;
    align-items: center;
    font-family: cambria;
}

.notice-tag {
    background: var(--maroon);
    color: var(--white);
   font-family: cambria;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 10px 18px;
    flex: 0 0 auto;
}

.notice-track-wrap { overflow: hidden; flex: 1 1 auto; }

.notice-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: ticker 32s linear infinite;
    padding: 11px 0;
}

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

.notice-track span { font-size: 13.5px; }
.notice-track span b { color: var(--brass-light); font-weight: 600; margin-right: 6px; }

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section { padding: 78px 0; }
.section-alt { background: var(--paper-dim); }

.section-head { max-width: 620px; margin-bottom: 46px; }
.section-head h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 8px; }
.section-head p { color: var(--slate); margin-top: 10px; }

/* =========================================================
   NAAC CRITERIA LEDGER — signature element
   ========================================================= */
.ledger {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 1px 0 var(--line);
}

.ledger-row {
    display: grid;
    grid-template-columns: 96px 1fr 200px 44px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 20px 22px;
    gap: 18px;
    transition: background .2s;
    text-decoration: none;
}

.ledger-row:last-child { border-bottom: none; }

.ledger-row:hover { background: var(--paper-dim); }

.ledger-row .criterion-no {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--maroon);
    border: 1px solid var(--maroon);
    padding: 6px 0;
    text-align: center;
    letter-spacing: .04em;
}

.ledger-row .criterion-title { color: var(--ink); font-weight: 600; font-size: 16px; }
.ledger-row .criterion-title small { display: block; font-weight: 400; color: var(--slate); font-size: 13px; margin-top: 3px; }

.ledger-row .criterion-meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--slate);
    text-align: right;
}

.ledger-row .criterion-arrow {
    color: var(--brass);
    font-size: 16px;
    text-align: right;
}

@media (max-width: 767.98px) {
    .ledger-row { grid-template-columns: 60px 1fr 30px; }
    .ledger-row .criterion-meta { display: none; }
}

/* =========================================================
   CARDS — generic paper-panel component
   ========================================================= */
.panel {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 30px;
    height: 100%;
}

.panel .icon-mark {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--brass-light);
    font-size: 20px;
    margin-bottom: 18px;
}

.panel h5 { font-size: 17px; margin-bottom: 8px; }
.panel p { font-size: 14px; color: var(--slate); margin-bottom: 0; }

/* Governance / committee tiles */
.committee-tile {
    border: 1px solid var(--line);
    background: var(--white);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    height: 100%;
}

.committee-tile i { color: var(--maroon); font-size: 22px; margin-top: 3px; }
.committee-tile h6 { margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.committee-tile p { font-size: 13px; color: var(--slate); margin-bottom: 0; }

/* IQAC report list */
.doc-list { border-top: 1px solid var(--line); }
.doc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.doc-row .doc-name { color: var(--ink); font-weight: 600; }
.doc-row .doc-name small { display: block; font-weight: 400; color: var(--slate); font-size: 12.5px; }
.doc-row a { font-family: var(--font-mono); font-size: 12px; color: var(--maroon); text-transform: uppercase; letter-spacing: .04em; }
.doc-row a:hover { color: var(--brass); }

/* Program cards */
.program-card {
    background: var(--ink);
    color: #DCE1EC;
    padding: 32px 26px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.program-card::after {
    content: "";
    position: absolute;
    right: -30px; top: -30px;
    width: 120px; height: 120px;
    border: 1px solid rgba(216,175,92,.25);
    border-radius: 50%;
}
.program-card .tag { font-family: var(--font-mono); font-size: 11px; color: var(--brass-light); text-transform: uppercase; letter-spacing: .1em; }
.program-card h4 { color: var(--white); margin: 10px 0 12px; font-size: 21px; }
.program-card ul { padding-left: 18px; margin: 0; font-size: 13.5px; color: #B9C2D6; }
.program-card li { margin-bottom: 4px; }

/* Stats band */
.stat-band { background: var(--ink-dark); color: var(--white); }
.stat-band .stat { text-align: center; padding: 34px 10px; border-right: 1px solid var(--line-dark); }
.stat-band .stat:last-child { border-right: none; }
.stat-band .stat .figure { font-family: var(--font-mono); font-size: 34px; font-weight: 700; color: var(--brass-light); }
.stat-band .stat .cap { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #97A2BE; margin-top: 4px; }

/* Voices / testimonial-style */
.voice-card {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 28px;
    height: 100%;
}
.voice-card .avatar-mark {
    width: 46px; height: 46px;
    background: var(--maroon);
    color: var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.voice-card p.quote { font-style: italic; color: var(--ink); font-size: 15px; }
.voice-card .who { font-size: 13px; color: var(--slate); margin-top: 12px; }
.voice-card .who b { color: var(--ink); }

.testimonial-carousel .owl-item .voice-card { margin: 6px; }

/* CTA band */
.cta-band {
    background: var(--brass);
    color: var(--ink-dark);
}
.cta-band h3 { color: var(--ink-dark); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 12px 26px;
    transition: .25s;
}

.btn-ink { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.btn-ink:hover { background: var(--ink-dark); color: var(--white); }

.btn-brass { background: var(--brass); color: var(--ink-dark); border: 1px solid var(--brass); }
.btn-brass:hover { background: var(--brass-light); color: var(--ink-dark); }

.btn-outline-paper { background: transparent; color: var(--ink-dark); border: 1px solid var(--ink-dark); }
.btn-outline-paper:hover { background: var(--ink-dark); color: var(--white); }

.btn-outline-line { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.5); }
.btn-outline-line:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0; display: flex; align-items: center; justify-content: center;
    border-radius: 0; text-transform: none;
}
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }

.back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 99; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--ink-dark); color: #B9C2D6;font-family: cambria }
.site-footer h6.col-title {
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.site-footer a { color: #B9C2D6; }
.site-footer a:hover { color: var(--brass-light); }
.site-footer .btn-link {
    display: block; margin-bottom: 8px; padding: 0;
    text-align: left; font-size: 13.5px; text-transform: none; font-weight: 400;
}
.site-footer .btn-link::before {
    content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 8px; color: var(--brass);
}
.site-footer .btn-social {
    width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.2); color: #DCE1EC;
}
.site-footer .btn-social:hover { border-color: var(--brass); color: var(--brass-light); }
.site-footer .copyright { border-top: 1px solid var(--line-dark); padding: 20px 0; font-size: 12.5px; }

/* Spinner */
#spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; background: var(--paper) !important; }
#spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }
#spinner .spinner-border { color: var(--ink) !important; }

/* Section title legacy helper kept for compatibility */
.section-title { position: relative; display: inline-block; text-transform: uppercase; }