/* =========================================================================
   14-inner.css  —  Inner public pages (banner, breadcrumb, sidebar, content)
   Raiganj University

   Loads LAST in _WebsiteLayout.cshtml, so it overrides earlier sheets at
   equal specificity. No markup or controller logic is changed by this file.

   Every colour is read from the tokens in 01-base.css, with the designer's
   literal value as a fallback so nothing breaks if a token name differs.
   ========================================================================= */

:root {
    --rgu-maroon: var(--maroon, #6E1423);
    --rgu-maroon-dark: var(--maroon-dark, #4E0E19);
    --rgu-gold: var(--gold, #C89B3C);
    --rgu-gold-soft: var(--gold-soft, #E7CE93);
    --rgu-cream: var(--cream, #FBF8F2);
    --rgu-paper: var(--paper, #F4EEE1);
    --rgu-ink: var(--ink, #241B15);
    --rgu-ink-soft: var(--ink-soft, #5B4F42);
    --rgu-line: var(--line, rgba(36, 27, 21, 0.12));
}

/* =========================================================================
   1. Page banner + title
   The h1 currently renders dark against the maroon band. White with the
   same shadow treatment as the home hero fixes the contrast.
   ========================================================================= */

.page-banner {
    position: relative;
    padding: 46px 0 38px;
}

    .page-banner .banner-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(20, 9, 7, 0.30) 0%, rgba(20, 9, 7, 0.10) 45%, rgba(20, 9, 7, 0.55) 100%);
        pointer-events: none;
    }

    .page-banner .container {
        position: relative;
        z-index: 2;
    }

    .page-banner .page-title {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        letter-spacing: -0.01em;
        font-size: clamp(26px, 3.4vw, 40px);
        line-height: 1.12;
        color: #fff;
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
        margin: 0;
    }

        /* Gold rule beneath the title, echoing the section-head treatment on home */
        .page-banner .page-title::after {
            content: "";
            display: block;
            width: 64px;
            height: 3px;
            margin-top: 14px;
            background: var(--rgu-gold);
        }

/* =========================================================================
   2. Breadcrumb
   ========================================================================= */

.breadcrumb-nav {
    margin-top: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(247, 239, 224, 0.55);
}

    .breadcrumb-nav a {
        color: var(--rgu-gold-soft);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        padding-bottom: 1px;
        transition: color .2s ease, border-color .2s ease;
    }

        .breadcrumb-nav a:hover {
            color: #fff;
            border-bottom-color: var(--rgu-gold);
        }

    .breadcrumb-nav span {
        color: rgba(247, 239, 224, 0.40);
    }

        .breadcrumb-nav span.active {
            color: #F7EFE0;
            font-weight: 600;
        }

/* =========================================================================
   3. Sidebar
   Built from the home page's .events-panel: paper ground, hairline border,
   3px maroon top rule.
   ========================================================================= */

.sidebar {
    background: var(--rgu-paper);
    border: 1px solid var(--rgu-line);
    border-top: 3px solid var(--rgu-maroon);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 10px 26px rgba(20, 10, 8, 0.07);
}

.sidebar-header {
    background: linear-gradient(160deg, var(--rgu-maroon), var(--rgu-maroon-dark));
    padding: 16px 20px;
}

    .sidebar-header h4 {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        font-size: 17px;
        line-height: 1.3;
        color: #fff;
        margin: 0;
    }

        .sidebar-header h4 i {
            color: var(--rgu-gold-soft);
        }

.sidebar-menu,
.sidebar-menu .sub-menu,
.sidebar-menu .sub-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sidebar-menu > li {
        border-bottom: 1px solid var(--rgu-line);
    }

        .sidebar-menu > li:last-child {
            border-bottom: none;
        }

    .sidebar-menu a {
        display: block;
        padding: 11px 18px;
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--rgu-ink-soft);
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: background .2s ease, color .2s ease, border-color .2s ease;
    }

        .sidebar-menu a:hover {
            background: rgba(110, 20, 35, 0.06);
            color: var(--rgu-maroon-dark);
            border-left-color: var(--rgu-gold);
        }

        .sidebar-menu a.active,
        .sidebar-menu li.active > a {
            background: rgba(110, 20, 35, 0.10);
            color: var(--rgu-maroon-dark);
            font-weight: 600;
            border-left-color: var(--rgu-maroon);
        }

        .sidebar-menu a i {
            color: var(--rgu-gold);
            font-size: 12px;
        }

        .sidebar-menu a:hover i,
        .sidebar-menu a.active i {
            color: var(--rgu-maroon);
        }

    /* Nested levels: indent and step the type down */
    .sidebar-menu .sub-menu a {
        padding-left: 34px;
        font-size: 13px;
        background: rgba(255, 255, 255, 0.45);
    }

    .sidebar-menu .sub-submenu a {
        padding-left: 50px;
        font-size: 12.5px;
    }

/* Related Links card sits above the main sidebar */
.sidebar-related-links .related-links-nested {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sidebar-related-links .related-links-nested a {
        padding-left: 34px;
        font-size: 13px;
    }

/* =========================================================================
   4. Content area
   ========================================================================= */

.content-area {
    background: #fff;
    border: 1px solid var(--rgu-line);
    border-radius: 14px;
    padding: 30px 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 26px rgba(20, 10, 8, 0.06);
}

/* =========================================================================
   5. Article prose  —  CMS / Summernote HTML
   ========================================================================= */

.article-content {
    font-family: 'Work Sans', sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--rgu-ink);
}

    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5 {
        font-family: 'Fraunces', serif;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--rgu-maroon-dark);
        margin: 28px 0 12px;
        line-height: 1.25;
    }

    .article-content h1 {
        font-size: 27px;
    }

    .article-content h2 {
        font-size: 23px;
    }

    .article-content h3 {
        font-size: 20px;
    }

    .article-content h4 {
        font-size: 17px;
    }

    .article-content h5 {
        font-size: 15.5px;
    }

    .article-content > :first-child {
        margin-top: 0;
    }

    .article-content p {
        margin: 0 0 15px;
    }

    .article-content a {
        color: var(--rgu-maroon);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .article-content a:hover {
            color: var(--rgu-maroon-dark);
        }

    .article-content ul,
    .article-content ol {
        margin: 0 0 15px;
        padding-left: 22px;
    }

    .article-content li {
        margin-bottom: 7px;
    }

    .article-content ul li::marker {
        color: var(--rgu-gold);
    }

    .article-content blockquote {
        margin: 20px 0;
        padding: 14px 20px;
        background: var(--rgu-paper);
        border-left: 3px solid var(--rgu-gold);
        font-family: 'Fraunces', serif;
        font-style: italic;
        color: var(--rgu-ink-soft);
    }

    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        border: 1px solid var(--rgu-line);
    }

    .article-content table {
        width: 100%;
        margin: 20px 0;
        border-collapse: collapse;
        font-size: 14px;
    }

        .article-content table th {
            background: var(--rgu-maroon);
            color: #fff;
            font-weight: 600;
            text-align: left;
            padding: 11px 14px;
            border: 1px solid var(--rgu-maroon-dark);
        }

        .article-content table td {
            padding: 10px 14px;
            border: 1px solid var(--rgu-line);
            vertical-align: top;
        }

        .article-content table tbody tr:nth-child(even) {
            background: var(--rgu-cream);
        }

    /* Wide CMS tables should scroll rather than break the grid */
    .article-content .table-responsive,
    .content-area .table-responsive {
        overflow-x: auto;
    }

/* =========================================================================
   6. Responsive
   ========================================================================= */

@media (max-width: 991.98px) {
    .content-area {
        padding: 24px 20px;
    }
}

@media (max-width: 640px) {
    .page-banner {
        padding: 32px 0 26px;
    }

    .content-area {
        padding: 20px 16px;
        border-radius: 10px;
    }

    .article-content {
        font-size: 15px;
    }

    .sidebar-menu a {
        padding: 12px 16px;
    }
}