/* ===========================
   FONTS
=========================== */
@font-face {
    font-family: Inter;
    src: url(../fonts/Inter-Regular.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: Inter Medium;
    src: url(../fonts/Inter-Medium.woff2);
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: Inter SemiBold;
    src: url(../fonts/Inter-SemiBold.woff2);
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: Inter Bold;
    src: url(../fonts/Inter-Bold.woff2);
    font-weight: 700;
    font-display: swap;
}

/* ===========================
   COLOR SYSTEM — BRIFING
=========================== */
:root {
    --blue-main: #0d47a1;
    --blue-light: #1976d2;
    --orange-accent: #ff8f00;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border-light: #e5e7eb;
    --bg-light: #f9fafb;
    --white: #ffffff;
}

/* ===========================
   BASE
=========================== */
body {
    font-family: "Inter", sans-serif;
    background-color: var(--white);
    color: var(--text-main);
}

a {
    color: var(--blue-main);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover {
    color: var(--orange-accent);
}

/* ===========================
   NAV & LINKS
=========================== */
a.nav-link {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}
a.nav-link:hover {
    color: var(--blue-main);
}

a.top-menu-page-link {
    font-size: 11px;
    color: var(--text-muted);
}

/* ===========================
   BUTTONS
=========================== */
.btn-outline-primary {
    border-color: var(--blue-main);
    color: var(--blue-main);
}
.btn-outline-primary:hover {
    background: var(--blue-main);
    color: #fff;
}

.text-primary {
    color: var(--blue-main)!important;
}
.text-bg-primary {
    background: var(--blue-main)!important;
}

/* ===========================
   HEADINGS
=========================== */
h1 { font-size: 1.9rem; font-family: Inter Bold; }
h2 { font-size: 1.6rem; font-family: Inter SemiBold; }
h3 { font-size: 1.3rem; font-family: Inter SemiBold; }
h4 { font-size: 1rem; font-family: Inter SemiBold; }
h5 { font-size: .85rem; }
h6 { font-size: .75rem; }

/* ===========================
   CONTAINERS
=========================== */
.container {
    max-width: 1140px!important;
}
.container-fluid {
    padding: 0!important;
}

/* ===========================
   IMAGES
=========================== */
img.img-fluid.global_news {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 6px;
    background: #e5e7eb;
}
img.img-fluid.featured_news {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    background: #e5e7eb;
}

/* ===========================
   TEXT
=========================== */
.small { font-size: 12px!important; }
.medium { font-size: 14px!important; }

p.description_5 { font-size: 14px; color: var(--text-muted); }
p.description_6 { font-size: 12px; color: var(--text-muted); }

.article-content p {
    font-size: 18px;
    line-height: 1.6;
}

/* ===========================
   BLOCKQUOTE
=========================== */
blockquote p {
    background: var(--bg-light);
    border-left: 4px solid var(--orange-accent);
    padding: 16px 20px;
    border-radius: 4px;
    font-family: Inter Medium;
}

/* ===========================
   SINGLE ARTICLE
=========================== */
.single_article_title {
    font-size: 2.3rem;
    line-height: 1.3;
    font-family: Inter Bold;
}
.single_article_description {
    font-size: 20px;
    color: var(--text-muted);
}

/* ===========================
   SIDEBAR
=========================== */
.sticky-sidebar {
    position: sticky;
    top: 20px;
}

/* ===========================
   LATEST NEWS CARD
=========================== */
.card_l_news {
    max-height: 650px;
    overflow-y: auto;
}
.card_l_news::-webkit-scrollbar {
    width: 3px;
}
.card_l_news::-webkit-scrollbar-thumb {
    background: var(--blue-main);
}

/* ===========================
   OFFCANVAS MENU
=========================== */
.offcanvas-custom {
    top: 80px;
    width: 100%;
    background: var(--white);
    border-radius: 0 0 8px 8px;
}
.category-tag-list h5 {
    color: var(--blue-main);
}

/* ===========================
   BACK TO TOP
=========================== */
#btn-back-to-top {
    background: var(--blue-main);
    color: #fff;
    border-radius: 50%;
}

/* ===========================
   SELECTION
=========================== */
::selection {
    background: var(--orange-accent);
    color: #fff;
}

/* ===========================
   MOBILE
=========================== */
@media (max-width: 768px) {
    h1 { font-size: 1.4rem; }
    .single_article_title {
        font-size: 1.6rem;
    }
}