/* =========================================
   ICSJ CLEAN PROFESSIONAL UI
   Optimized Version
========================================= */


/* =========================================
   GLOBAL
========================================= */

body{
    font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

    background:#FFFFFF;

    color:#111827;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a,
button,
input{
    transition:0.25s ease;
}

/* =========================================
   TOPBAR
========================================= */

.icsj-topbar{

    background:#000000;

    height:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 16px;

    font-size:11px;
}

/* Links */
.icsj-topbar a{

    color:#FFFFFF !important;

    text-decoration:none;

    margin-right:12px;

    line-height:1;
}

/* Hover */
.icsj-topbar a:hover{

    color:#00AEEF !important;
}


/* =========================================
   HEADER
========================================= */

#headerNavigationContainer{

    background:rgba(10,42,58,0.96) !important;

    border:none !important;

    border-radius:0 !important;

    margin-bottom:0 !important;

    min-height:52px !important;

    position:sticky;

    top:0;

    z-index:9999;

    width:100%;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    box-shadow:0 2px 8px rgba(0,0,0,0.08);

    transition:0.25s ease;
}

/* Container */
#headerNavigationContainer .container-fluid{

    max-width:1400px;

    margin:auto;

    padding-left:14px;

    padding-right:14px;
}

/* Navbar header */
.navbar-header{

    display:flex;

    align-items:center;

    min-height:52px;
}

/* Remove bootstrap border */
.navbar-default{

    border:none !important;
}


/* =========================================
   LOGO
========================================= */

.navbar-brand{

    padding-top:0 !important;

    padding-bottom:0 !important;

    padding-left:0 !important;

    padding-right:10px !important;

    margin:0 !important;

    height:auto !important;

    display:flex;

    align-items:center;
}

/* Logo image */
.navbar-brand img{

    max-height:30px !important;

    width:auto;

    position:relative;

    top:-8px;
}


/* =========================================
   USER MENU
========================================= */

#navigationUser{

    padding-top:0;

    margin-bottom:0;
}

/* User links */
#navigationUser a{

    color:#FFFFFF !important;

    font-size:11px;

    padding:2px 8px !important;

    opacity:0.9;

    line-height:1.1;
}

/* Hover */
#navigationUser a:hover{

    color:#00AEEF !important;
}


/* =========================================
   MAIN NAVIGATION
========================================= */

#main-navigation{

    display:flex;

    align-items:center;

    margin-top:0;
}

/* Nav item */
#main-navigation > li{

    display:flex;

    align-items:center;
}

/* Navigation links */
#main-navigation > li > a{

    color:#FFFFFF !important;

    font-size:13px !important;

    font-weight:500;

    padding:5px 10px !important;

    line-height:1.1;

    transition:0.25s ease;
}

/* Hover */
#main-navigation > li > a:hover{

    color:#00AEEF !important;

    background:transparent !important;
}

/* Active */
#main-navigation > .active > a{

    background:transparent !important;

    color:#00AEEF !important;
}


/* =========================================
   SEARCH BOX
========================================= */

.pkp_search{

    margin-top:0;
}

/* Search input */
.pkp_search input{

    background:#FFFFFF !important;

    border:none !important;

    border-radius:7px;

    height:28px !important;

    padding:0 10px;

    color:#111827 !important;

    min-width:145px;

    font-size:11px;

    box-shadow:none !important;
}

/* Placeholder */
.pkp_search input::placeholder{

    color:#6B7280;
}

/* Search button */
.pkp_search button{

    background:#0078D4 !important;

    border:none !important;

    border-radius:7px;

    color:white !important;

    height:28px !important;

    padding:0 10px;

    font-size:11px;
}

/* Hover */
.pkp_search button:hover{

    background:#00AEEF !important;
}


/* =========================================
   MOBILE MENU
========================================= */

.navbar-toggle{

    border:none !important;

    margin-top:8px !important;

    margin-bottom:0 !important;

    margin-right:0 !important;
}

/* Hamburger */
.navbar-toggle .icon-bar{

    background:white !important;
}

/* Collapse */
.navbar-collapse{

    border:none !important;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width:768px){

    .icsj-topbar{

        display:none;
    }

    #headerNavigationContainer{

        min-height:48px !important;
    }

    .navbar-header{

        min-height:48px;
    }

    .navbar-brand img{

        max-height:26px !important;
    }

    #main-navigation{

        margin-top:0;

        flex-direction:column;

        align-items:flex-start;
    }

    #main-navigation > li{

        width:100%;
    }

    #main-navigation > li > a{

        width:100%;

        padding:9px 0 !important;
    }

    .pkp_search{

        margin-top:8px;

        width:100%;
    }

    .pkp_search input{

        min-width:100%;
    }

}

/* =========================================
   CONTENT AREA
========================================= */

.pkp_structure_content{

    margin-top:25px;

    max-width:1400px;
}

/* Main content */
.pkp_structure_main{

    padding-right:28px;
}

/* Sidebar */
.pkp_structure_sidebar{

    padding-left:18px;
}


/* =========================================
   ARTICLE LIST
========================================= */

.obj_article_summary{

    margin-bottom:28px;

    padding-bottom:20px;

    border-bottom:1px solid #F1F5F9;
}

/* Title */
.obj_article_summary h3 a{

    color:#0A1F44 !important;

    font-size:22px !important;

    font-weight:700;

    line-height:1.45;
}

/* Hover */
.obj_article_summary h3 a:hover{

    color:#0057D9 !important;
}

/* Meta */
.obj_article_summary .meta{

    color:#6B7280;

    font-size:13px;
}

/* Description */
.obj_article_summary .description{

    font-size:14px;

    line-height:1.7;
}


/* =========================================
   CURRENT ISSUE
========================================= */

.current_issue{

    background:#FFFFFF;

    border-radius:18px;

    padding:22px;

    border:1px solid #E5E7EB;

    box-shadow:0 4px 14px rgba(0,0,0,0.05);
}


/* =========================================
   MORE FROM ICS JOURNALS
========================================= */

.ics-more-journals{

    display:flex;

    flex-direction:column;

    gap:14px;
}

/* Card */
.ics-issue-card{

    background:#FFFFFF;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #E5E7EB;

    box-shadow:0 3px 10px rgba(0,0,0,0.05);

    transition:0.3s ease;
}

/* Hover */
.ics-issue-card:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 18px rgba(0,0,0,0.10);
}

/* Link */
.ics-issue-card a{

    text-decoration:none;

    color:inherit;

    display:block;
}

/* Layout */
.ics-issue-row{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px;
}

/* Image */
.ics-issue-row img{

    width:60px !important;

    height:auto;

    border-radius:8px;

    object-fit:cover;

    flex-shrink:0;
}

/* Text */
.ics-issue-info{

    flex:1;
}

/* Title */
.ics-issue-info h4{

    margin:0 0 4px 0;

    font-size:14px;

    line-height:1.4;

    color:#0A1F44;

    font-weight:700;
}

/* Date */
.ics-issue-info p{

    margin:0;

    font-size:12px;

    color:#6B7280;
}


/* =========================================
   EDITORIAL BOARD
========================================= */

.ics-editorial-board{

    display:flex;

    flex-direction:column;

    gap:20px;
}

/* Card */
.ics-editor-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:16px;

    padding:16px;

    box-shadow:0 4px 12px rgba(0,0,0,0.05);

    transition:0.3s ease;
}

/* Hover */
.ics-editor-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* Image */
.ics-editor-card img{

    width:95px;

    height:95px;

    object-fit:cover;

    border-radius:14px;

    flex-shrink:0;

    border:3px solid #F1F5F9;
}

/* Content */
.ics-editor-content{

    flex:1;
}

/* Name */
.ics-editor-content h3{

    margin:0 0 8px 0;

    font-size:18px;

    font-weight:700;

    color:#0A1F44;
}

/* Affiliation */
.ics-editor-affiliation{

    font-size:13px;

    line-height:1.7;

    color:#2563EB;

    font-weight:600;

    margin-bottom:10px;
}

/* About */
.ics-editor-about{

    font-size:13px;

    line-height:1.7;

    color:#4B5563;
}


/* =========================================
   CUSTOM MENU BLOCK
========================================= */

.ics-menu-block{

    display:flex;

    flex-direction:column;

    gap:12px;
}

/* Item */
.ics-menu-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:12px;

    text-decoration:none !important;

    box-shadow:0 3px 10px rgba(0,0,0,0.05);

    transition:0.3s ease;
}

/* Hover */
.ics-menu-item:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,0.08);

    border-color:#0057D9;
}

/* Icon */
.ics-menu-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0057D9,#00AEEF);

    border-radius:12px;

    font-size:18px;

    color:white;

    flex-shrink:0;
}

/* Title */
.ics-menu-text h4{

    margin:0 0 4px 0;

    font-size:14px;

    font-weight:700;

    color:#0A1F44;
}

/* Desc */
.ics-menu-text p{

    margin:0;

    font-size:12px;

    color:#6B7280;

    line-height:1.5;
}


/* =========================================
   EMAIL ALERT
========================================= */

.ics-email-alert{

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:22px;

    box-shadow:0 6px 18px rgba(0,0,0,0.06);

    max-width:420px;
}

/* Title */
.ics-email-alert h2{

    margin-top:0;

    margin-bottom:14px;

    font-size:28px;

    line-height:1.2;

    font-weight:800;

    color:#0A1F44;
}

/* Desc */
.ics-email-alert p{

    font-size:15px;

    line-height:1.7;

    color:#374151;

    margin-bottom:18px;
}

/* Input */
.ics-email-alert input{

    width:100%;

    padding:12px 14px;

    border:1px solid #D1D5DB;

    border-radius:10px;

    font-size:14px;

    margin-bottom:16px;

    background:white;

    box-sizing:border-box;
}

/* Focus */
.ics-email-alert input:focus{

    outline:none;

    border-color:#0057D9;

    box-shadow:0 0 0 4px rgba(0,87,217,0.12);
}

/* Button */
.ics-email-alert button{

    width:100%;

    background:#0A3D91;

    color:white;

    border:none;

    border-radius:10px;

    padding:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;
}

/* Hover */
.ics-email-alert button:hover{

    background:#0057D9;

    transform:translateY(-2px);
}


/* =========================================
   FOOTER
========================================= */

.icsj-footer{

    background:#050505 !important;

    color:#FFFFFF !important;

    padding:45px 55px 22px;

    margin-top:60px;

    width:100%;
}

/* Grid */
.icsj-footer-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    margin-bottom:35px;
}

/* Column */
.icsj-footer-column{

    display:flex;

    flex-direction:column;
}

/* Title */
.icsj-footer-column h3{

    font-size:15px;

    font-weight:700;

    margin-bottom:16px;

    color:#FFFFFF !important;

    letter-spacing:1px;
}

/* Links */
.icsj-footer-column a{

    color:#E5E7EB !important;

    text-decoration:none;

    margin-bottom:12px;

    line-height:1.6;

    font-size:14px;
}

/* Hover */
.icsj-footer-column a:hover{

    color:#00AEEF !important;

    transform:translateX(4px);
}

/* Bottom */
.icsj-footer-bottom{

    border-top:1px solid rgba(255,255,255,0.12);

    padding-top:24px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:35px;
}

/* Logo */
.icsj-footer-logo{

    font-size:48px;

    font-weight:800;

    letter-spacing:4px;

    color:#FFFFFF !important;

    line-height:1;
}

/* Text */
.icsj-footer-copy{

    max-width:700px;

    color:#E5E7EB !important;

    line-height:1.7;

    font-size:13px;
}

/* Paragraph */
.icsj-footer-copy p{

    margin:0 0 10px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media screen and (max-width:992px){

    .icsj-footer-grid{

        grid-template-columns:repeat(2,1fr);
    }

}

@media screen and (max-width:768px){

    /* Topbar */
    .icsj-topbar{

        display:none;
    }

    /* Header */
    .navbar-brand img{

        max-height:46px !important;

        top:-2px;
    }

    /* Nav */
    #main-navigation{

        margin-top:0;

        flex-direction:column;

        align-items:flex-start;
    }

    /* Navigation links */
    #main-navigation > li > a{

        padding:12px 0 !important;
    }

    /* Search */
    .pkp_search input{

        min-width:100%;
    }

    /* Sidebar */
    .pkp_structure_sidebar{

        padding-left:0;
    }

    /* Footer */
    .icsj-footer{

        padding:35px 20px;
    }

    .icsj-footer-grid{

        grid-template-columns:1fr;

        gap:30px;
    }

    .icsj-footer-bottom{

        flex-direction:column;
    }

    .icsj-footer-logo{

        font-size:36px;
    }

    /* Editorial */
    .ics-editor-card{

        flex-direction:column;

        align-items:center;

        text-align:center;
    }

    .ics-editor-card img{

        width:85px;

        height:85px;
    }

    /* Email alert */
    .ics-email-alert h2{

        font-size:22px;
    }

}

/* =========================================
   ICSJ FOCUS & SCOPE
========================================= */

.icsj-focus-scope{

    max-width:1200px;

    margin:auto;
}

/* Header */
.icsj-focus-header{

    background:linear-gradient(
        135deg,
        #0A2A3A,
        #0057D9
    );

    border-radius:22px;

    padding:40px;

    margin-bottom:35px;

    color:white;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* Title */
.icsj-focus-header h2{

    margin-top:0;

    margin-bottom:18px;

    font-size:36px;

    font-weight:800;

    letter-spacing:-0.5px;
}

/* Description */
.icsj-focus-header p{

    margin:0;

    font-size:16px;

    line-height:1.9;

    opacity:0.95;
}

/* Category */
.icsj-scope-category{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:28px;

    margin-bottom:24px;

    box-shadow:0 4px 14px rgba(0,0,0,0.04);

    transition:0.3s ease;
}

/* Hover */
.icsj-scope-category:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* Category Title */
.icsj-scope-category h3{

    margin-top:0;

    margin-bottom:22px;

    font-size:22px;

    font-weight:700;

    color:#0A1F44;

    position:relative;
}

/* Underline */
.icsj-scope-category h3:after{

    content:"";

    width:60px;

    height:4px;

    background:#00AEEF;

    border-radius:20px;

    display:block;

    margin-top:10px;
}

/* Tags Container */
.icsj-scope-tags{

    display:flex;

    flex-wrap:wrap;

    gap:14px;
}

/* Tag */
.icsj-scope-tags span{

    background:#F1F5F9;

    color:#0A1F44;

    padding:12px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    transition:0.25s ease;

    border:1px solid transparent;
}

/* Hover */
.icsj-scope-tags span:hover{

    background:#0057D9;

    color:white;

    transform:translateY(-2px);

    border-color:#0057D9;
}

/* =========================================
   RESPONSIVE
========================================= */

@media screen and (max-width:768px){

    .icsj-focus-header{

        padding:28px;
    }

    .icsj-focus-header h2{

        font-size:28px;
    }

    .icsj-focus-header p{

        font-size:15px;
    }

    .icsj-scope-category{

        padding:22px;
    }

    .icsj-scope-category h3{

        font-size:20px;
    }

    .icsj-scope-tags{

        gap:10px;
    }

    .icsj-scope-tags span{

        font-size:13px;

        padding:10px 14px;
    }

}

/* =========================================
   ICSJ VISITOR MAP
========================================= */

.ics-visitor-map{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:24px;

    box-shadow:0 4px 14px rgba(0,0,0,0.05);

    text-align:center;

    margin-top:20px;
}

/* Title */
.ics-visitor-map h3{

    margin-top:0;

    margin-bottom:12px;

    font-size:20px;

    font-weight:700;

    color:#0A1F44;
}

/* Description */
.ics-visitor-map p{

    font-size:14px;

    line-height:1.7;

    color:#6B7280;

    margin-bottom:20px;
}

/* Image */
.ics-visitor-map img{

    width:100%;

    max-width:100%;

    border-radius:14px;

    border:1px solid #E5E7EB;

    transition:0.3s ease;
}

/* Hover */
.ics-visitor-map img:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

/* =========================================
   ICSJ PURE CSS TABS
========================================= */

/* Hide radio buttons */
.icsj-tabs input[type="radio"]{

    display:none;
}

/* =========================================
   TAB BUTTONS
========================================= */

.icsj-tab-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:30px;
}

/* Labels */
.icsj-tab-buttons label{

    background:#F1F5F9;

    padding:14px 22px;

    border-radius:999px;

    font-size:15px;

    font-weight:600;

    color:#0A1F44;

    cursor:pointer;

    transition:0.25s ease;
}

/* Hover */
.icsj-tab-buttons label:hover{

    background:#DCEBFF;
}

/* =========================================
   ACTIVE TAB BUTTON
========================================= */

#tab1:checked ~ .icsj-tab-buttons label[for="tab1"],
#tab2:checked ~ .icsj-tab-buttons label[for="tab2"],
#tab3:checked ~ .icsj-tab-buttons label[for="tab3"],
#tab4:checked ~ .icsj-tab-buttons label[for="tab4"]{

    background:#0057D9;

    color:white;

    box-shadow:0 6px 18px rgba(0,87,217,0.18);
}

/* =========================================
   TAB CONTENT
========================================= */

.icsj-tab-content{

    display:none;

    animation:fadeTab 0.3s ease;
}

/* Active content */
#tab1:checked ~ .content1,
#tab2:checked ~ .content2,
#tab3:checked ~ .content3,
#tab4:checked ~ .content4{

    display:block;
}

/* Animation */
@keyframes fadeTab{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================
   COI BOX
========================================= */

.icsj-coi-box{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:26px;

    box-shadow:0 4px 14px rgba(0,0,0,0.05);
}

/* Title */
.icsj-coi-box h3{

    margin-top:0;

    color:#0A1F44;
}

/* =========================================
   MOBILE
========================================= */

@media screen and (max-width:768px){

    .icsj-tab-buttons{

        flex-direction:column;
    }

    .icsj-tab-buttons label{

        width:100%;
    }

}

/* =========================================
   EDITORIAL GRID
========================================= */

.ics-editorial-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

    gap:24px;
}

/* =========================================
   PREMIUM STICKY HEADER
========================================= */

#headerNavigationContainer{

    position:sticky;

    top:0;

    z-index:9999;

    width:100%;

    background:rgba(10,42,58,0.96) !important;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:0 4px 18px rgba(0,0,0,0.08);

    transition:0.3s ease;
}

/* =========================================
   ICSJ JOURNAL METRICS
========================================= */

.icsj-metrics{

    margin-top:40px;

    margin-bottom:40px;
}

/* Header */
.icsj-metrics-header{

    margin-bottom:30px;

    text-align:center;
}

/* Title */
.icsj-metrics-header h2{

    margin-top:0;

    margin-bottom:12px;

    font-size:32px;

    font-weight:800;

    color:#0A1F44;
}

/* Description */
.icsj-metrics-header p{

    font-size:15px;

    color:#6B7280;

    line-height:1.8;

    max-width:700px;

    margin:auto;
}

/* =========================================
   GRID
========================================= */

.icsj-metrics-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:22px;
}

/* =========================================
   CARD
========================================= */

.icsj-metric-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:28px 20px;

    text-align:center;

    box-shadow:0 4px 14px rgba(0,0,0,0.05);

    transition:0.3s ease;
}

/* Hover */
.icsj-metric-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 24px rgba(0,0,0,0.08);

    border-color:#0057D9;
}

/* Number */
.icsj-metric-number{

    font-size:36px;

    font-weight:800;

    color:#0057D9;

    line-height:1.1;

    margin-bottom:10px;
}

/* Label */
.icsj-metric-label{

    font-size:14px;

    color:#4B5563;

    line-height:1.6;

    font-weight:500;
}

/* =========================================
   MOBILE
========================================= */

@media screen and (max-width:768px){

    .icsj-metrics-header h2{

        font-size:26px;
    }

    .icsj-metric-number{

        font-size:28px;
    }

}