/* ==========================================================================
   1. CORE VARIABLES & GLOBAL DESIGN TOKENS
   ========================================================================== */
:root {
    --navy-blue: #0A1931;       
    --dark-navy: #000C24;       
    --accent-red: #D2143A;      
    --subtle-blue: #F4F7FC;     
    --pure-white: #FFFFFF;     
    --serif-heading: 'Cormorant Garamond', 'Times New Roman', Times, serif;
    --sans-body: 'Inter', system-ui, -apple-system, sans-serif;
}
body{
    font-family:var(--sans-body);
    color:#1E293B;
    background:#FAFCFF;
    line-height:1.7;
}
h1,h2,h3,h4,h5,h6{
    line-height:1.25;
}
/* Typography Utility Mappings */
.font-cinzel { font-family: var(--serif-heading); }
.font-sans { font-family: var(--sans-body); }
.font-xs { font-size: 0.875rem !important; }
.italic-xs { font-style: italic; }
.leading-tight { line-height: 1.15; }
.tracking-wide { letter-spacing: 0.07rem; }
.tracking-wider { letter-spacing: 0.08rem; }

/* Global Brand Background & Text Colors */
.bg-navy { background-color: var(--navy-blue) !important; }
.bg-dark-blue { background-color: var(--dark-navy) !important; }
.text-navy { color: var(--navy-blue) !important; }

.max-width-xl { max-width: 860px; }
.z-index-10 { z-index: 10; }
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* ==========================================================================
   2. REFINED ACADEMIC NAVBAR LAYOUT SYSTEM
   ========================================================================== */
.navbar {
    border-bottom: 2px solid var(--subtle-blue);
    z-index: 1030;
}

.navbar-logo {
    height: 85px;
    width: auto;
    object-fit: contain;
    display: block;
}


.custom-nav-links {
    gap: 1rem;          
}

.custom-nav-links .nav-link {
    font-size: 0.92rem !important;
    letter-spacing: 0.035rem;
    color: #475569 !important; 
    padding: 0.4rem 0 !important;
    position: relative;
    transition: color 0.2s ease-in-out;
    font-weight: 500;
}

/* Animated Underline Effect exclusively for standard single links */
.custom-nav-links .nav-link:not(.dropdown-toggle):not(.btn-submit-nav):not(.btn-contact-nav)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent-red);
    transition: width 0.2s ease-in-out;
}

.custom-nav-links .nav-link:not(.dropdown-toggle):not(.btn-submit-nav):not(.btn-contact-nav):hover::after,
.custom-nav-links .nav-link:not(.dropdown-toggle):not(.btn-submit-nav):not(.btn-contact-nav).active::after {
    width: 100%;
}

.custom-nav-links .nav-link:hover,
.custom-nav-links .nav-link.active {
    color: var(--accent-red) !important;
}

/* ==========================================================================
   3. PERFECT DROPDOWN ARCHITECTURE & RIGHT CARET INDICATOR
   ========================================================================== */
.custom-nav-links .dropdown-toggle{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

/* Force completely remove underline layout artifacts on dropdown elements */
.custom-nav-links .dropdown-toggle::after {
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
}

/* Generates right-side triangle symbol (Matches image_0a3224.jpg exactly) */
.custom-nav-links .dropdown-toggle::after {
    display: inline-block !important;
    content: "" !important;
    margin-left: 0.35em !important;
    vertical-align: 0.18em !important;
    border-top: 0.33em solid !important;
    border-right: 0.28em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.28em solid transparent !important;
    opacity: 0.75;
    transition: transform 0.2s ease-in-out;
}

/* ==========================================
   Bootstrap Dropdown (Desktop + Mobile)
========================================== */

.dropdown-menu{
    display:none;
    border:0;
    padding:10px 0;
    border-radius:4px;
    box-shadow:0 10px 30px rgba(0,12,36,.08);
}

/* Bootstrap adds .show automatically */
.dropdown-menu.show{
    display:block;
}

/* Desktop hover support */
@media (min-width:1200px){

    .custom-nav-links .nav-item.dropdown:hover>.dropdown-menu{
        display:block;
        margin-top:15px;
    }

    .custom-nav-links .nav-item.dropdown:hover>.nav-link::after{
        transform:rotate(180deg);
    }
}

/* Mobile */
@media (max-width:1199.98px){

    .dropdown-menu{
        position:static !important;
        width:100%;
        float:none;
        margin:0;
        border:0;
        border-left:2px solid #dc3545;
        border-radius:0;
        box-shadow:none;
        background:#f8fafc;
    }

    .dropdown-menu.show{
        display:block;
    }

    .dropdown-item{
        white-space:normal;
        padding:.75rem 1rem;
    }
}


/* ==========================================================================
   6. MOBILE RESPONSIVE NAVBAR
   ========================================================================== */

.active-item {
    background-color: rgba(10,25,49,.05) !important;
    color: #dc3545 !important;
    font-weight: 700;
}


@media (max-width:1199.98px){

    .navbar{
        padding-top:.75rem;
        padding-bottom:.75rem;
    }

    .navbar-brand{
        max-width:75%;
    }

    .navbar-logo{
        max-height:55px;
        width:auto;
    }

    .custom-nav-links{
        padding-top:1rem;
        padding-bottom:.5rem;
    }

    .custom-nav-links .nav-item{
        width:100%;
        border-bottom:1px solid rgba(0,0,0,.05);
    }

    .custom-nav-links .nav-link{
        display:block;
        width:100%;
        padding:.85rem 0 !important;
        white-space:normal;
        word-break:break-word;
    }

    .navbar .dropdown-menu{
        position:static !important;
        width:100%;
        border:0;
        border-left:2px solid #dc3545;
        border-radius:0;
        box-shadow:none;
        background:#f8fafc;
        margin-top:.25rem;
    }

    .navbar .dropdown-item{
        white-space:normal;
        padding:.75rem 1rem;
    }

    .btn-submit-nav{
        display:block;
        width:100%;
        text-align:center;
        margin-top:.75rem;
    }
}

@media (max-width:767.98px){

    .top-bar{
        text-align:center;
    }

    .top-bar .container{
        gap:.5rem;
    }

    .top-links a{
        display:block;
        margin:.35rem 0 !important;
    }

    .navbar-brand{
        max-width:70%;
    }

    .navbar-logo{
        max-height:48px;
    }
}

@media (max-width:575.98px){

    .navbar-brand{
        max-width:68%;
    }

    .navbar-logo{
        max-height:42px;
    }

    .navbar-toggler i{
        font-size:1.8rem !important;
    }
}
/* ==========================================================================
   4. INTERACTIVE ACTIONS & BUTTON CONSTRAINTS
   ========================================================================== */
.btn-contact-nav {
    border: 1.5px solid var(--navy-blue);
    padding: 0.4rem 1rem !important;
    border-radius: 4px;
    color: var(--navy-blue) !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-contact-nav:hover {
    background-color: var(--navy-blue);
    color: #ffffff !important;
}

.custom-nav-links .btn-submit-nav {
    background-color: var(--accent-red) !important;
    border: 1px solid var(--accent-red) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    margin-left: 0.5rem !important;
    box-shadow: 0 4px 10px rgba(210, 20, 58, 0.15);
    transition: all 0.2s ease-in-out !important;
}

.custom-nav-links .btn-submit-nav:hover {
    background-color: #B00E2F !important;
    border-color: #B00E2F !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(210, 20, 58, 0.3) !important;
    transform: translateY(-1px);
}

.custom-nav-links .btn-submit-nav i {
    font-size: 0.85rem !important;
    line-height: 1 !important;
}

/* ==========================================================================
   5. PROFILE LAYOUT PANELS & INTERNALS
   ========================================================================== */
.hero-banner .lead{
    font-size:1.08rem;
    line-height:1.7;
    max-width:760px;
}
.hero-banner {
    background: linear-gradient(135deg, rgba(5, 19, 41, 0.35) 0%, rgba(13, 35, 71, 0.35) 100%), 
                url('http://localhost/sentriva_home/assets/images/sentriva-publishers.jpg');
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    min-height: 420px;
    position: relative;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(0, 12, 36, 0.9) 30%, rgba(10, 25, 49, 0.4) 100%);
    z-index: 1;
}

.article-card { transition: transform 0.2s ease; }
.article-card:hover { transform: translateY(-3px); }

.btn-accent {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--pure-white);
    border-radius: 3px;
}
.btn-accent:hover { background-color: #B00E2F; color: white;}
.btn-outline-navy { border-color: var(--navy-blue); color: var(--navy-blue); }
.btn-outline-navy:hover { background-color: var(--navy-blue); color: white; }
.btn-xs { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
.border-white-10 { border-color: rgba(255, 255, 255, 0.1) !important; }

.footer-links a {
    transition: padding-left 0.2s ease, color 0.2s ease;
}
.footer-links a:hover {
    color: var(--pure-white) !important;
    padding-left: 5px;
}

.back-to-publisher-link {
    color: #64748B !important; 
    font-size: 0.72rem !important;
    border-right: 1px solid #E2E8F0;
    padding-right: 1.25rem !important;
    margin-right: 0.5rem;
}

@media (max-width: 991.98px) {
    .back-to-publisher-link {
        border-right: none;
        padding-right: 0 !important;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}
/*
.journal-hero-logo {
    max-height: 65px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); 
    background:url('<?php echo $final_hero_url;?>') center/cover;

}*/

/* Dynamic Hero Background Mapping Target */
section.hero-banner[data-hero-bg] {
    background-image: var(--hero-url);
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.horizontal-divider-danger { width: 50px; height: 3px; }
.nested-card-title { font-size: 1rem !important; font-weight: 700;}
.nested-card-paragraph { font-size: 0.95rem !important; line-height:1.65;}
.latest-article-card-heading { font-size: 0.88rem !important; line-height: 1.4 !important; }

/* Interface Input Forms & Dashboard Assets */
.tracking-input-field {
    border: 1px solid #E2E8F0 !important;
    font-family: var(--font-interface) !important;
    font-size: 0.9rem !important;
    color: #1E293B !important;
    padding: 0.65rem 0.85rem !important;
    background-color: #FFFFFF !important;
    transition: all 0.2s ease-in-out !important;
}

.tracking-input-field:focus {
    border-color: var(--accent-red) !important;
    box-shadow: 0 0 0 3px rgba(210, 20, 58, 0.1) !important;
    outline: 0 !important;
}

.alert-success { background-color: #F0FDF4 !important; border-left: 4px solid #16A34A !important; color: #166534 !important; }
.alert-danger { background-color: #FEF2F2 !important; border-left: 4px solid #DC2626 !important; color: #991B1B !important; }
.table th { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.06rem !important; color: #0A1931 !important; }
.table td { font-size: 0.8rem !important; padding-top: 1rem !important; padding-bottom: 1rem !important; }
.border-hover-danger { transition: all 0.2s ease-in-out; }
.border-hover-danger:hover { border-color: var(--accent-red) !important; background-color: #FFF5F5 !important; color: var(--accent-red) !important; }
.bg-danger-subtle { background-color: #FEF2F2 !important; color: #991B1B !important; }
.bg-success-subtle { background-color: #F0FDF4 !important; color: #166534 !important; }

.border-hover-danger:hover {
    border-color: #DC3545 !important;
    transform: translateY(-1px);
}
.transition-all {
    transition: all 0.2s ease-in-out;
}
.min-vh-50 {
    min-height: 50vh;
}
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.core-mandate{
    background-color: #f7f9fc; border-color: #e9ecef !important;
}
.cta-button:hover, .widget-select-button:hover{
background-color: #000C24;
}
.btn-sm{
    font-size:0.85rem;
}


/*.journal-hero{

background: linear-gradient(135deg, rgba(5, 19, 41, 0.35) 0%, rgba(13, 35, 71, 0.35) 100%), 
                url('http://localhost/sentriva_home/assets/images/sentriva-publishers.jpg');
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    min-height: 420px;
    position: relative;

padding:120px 0;

}*/
.journal-hero{
    min-height:650px;
    display:flex;
    align-items:center;
}
.hero-overlay{

position:absolute;

inset:0;

background:rgba(6,18,40,.2);

}

.journal-info-card{

background:#fff;

padding:35px;

border-radius:15px;

box-shadow:0 20px 60px rgba(0,0,0,.15);

}

.info-item{

display:flex;

justify-content:space-between;

padding:14px 0;

border-bottom:1px solid #ececec;

}

.journal-stats{

background:#0b2343;

padding:50px 0;

}

.stat-card{

background:#fff;

padding:35px;

text-align:center;

border-radius:12px;

transition:.3s;

height:100%;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card i{

font-size:40px;

color:#dc3545;

margin-bottom:20px;

}

.scope-card{

background:#fff;

padding:35px;

border-radius:15px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.scope-item{

padding:12px 0;

border-bottom:1px solid #eee;

}

.scope-item i{

color:#dc3545;

margin-right:10px;

}

.feature-box{

background:#fff;

padding:25px;

border-radius:12px;

margin-bottom:25px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.feature-box i{

font-size:35px;

color:#dc3545;

margin-bottom:15px;

display:block;

}

.section-title{

letter-spacing:2px;

font-size:13px;

color:#dc3545;

font-weight:700;

text-transform:uppercase;

}


.article-card{
background:#fff;
border-radius:15px;
padding:30px;
height:100%;
transition:.3s;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.article-card:hover{
transform:translateY(-8px);
}

.article-type{
display:inline-block;
background:#dc3545;
color:#fff;
padding:5px 12px;
border-radius:30px;
font-size:12px;
margin-bottom:20px;
}

.article-footer{
display:flex;
justify-content:space-between;
margin-top:25px;
padding-top:20px;
border-top:1px solid #eee;
}

.publish-box,
.metric-box,
.editor-card,
.issue-cover{
background:#fff;
padding:35px;
border-radius:15px;
text-align:center;
box-shadow:0 15px 35px rgba(0,0,0,.05);
height:100%;
transition:.3s;
}

.publish-box:hover,
.metric-box:hover,
.editor-card:hover,
.issue-cover:hover{
transform:translateY(-6px);
}

.publish-box i,
.editor-card i,
.issue-cover i{
font-size:45px;
color:#dc3545;
margin-bottom:20px;
display:block;
}

.metric-box h2{
font-size:42px;
color:#dc3545;
font-weight:700;
}