/*==================================================
UTME2027.ONLINE
Version: 3.0
Clean Frontend Stylesheet
==================================================*/


/*==================================================
RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size:16px;
    line-height:1.7;

    color:#1F2937;
    background:#F5F7F6;

    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
    border:0;
}

a{
    color:#043B35;
    text-decoration:none;
}

a:hover{
    color:#022A26;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
    border:0;
    background:none;
}

ul{
    list-style:none;
}

table{
    width:100%;
    border-collapse:collapse;
}

hr{
    border:0;
    border-top:1px solid #E5E7EB;
    margin:40px 0;
}


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

a,
button{
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        opacity .2s ease;
}


/*==================================================
LAYOUT
==================================================*/

.container{
    width:94%;
    max-width:1200px;
    margin:0 auto;
}

main{
    padding:40px 0 60px;
}


/*==================================================
TYPOGRAPHY
==================================================*/

h1{
    font-size:42px;
    line-height:1.25;
    color:#111827;
    margin-bottom:20px;
}

h2{
    font-size:32px;
    line-height:1.3;
    color:#111827;
    margin-bottom:18px;
}

h3{
    font-size:24px;
    line-height:1.4;
    color:#111827;
    margin-bottom:15px;
}

h4{
    font-size:20px;
    margin-bottom:12px;
}

p{
    margin-bottom:18px;
    color:#4B5563;
}

small{
    color:#6B7280;
}


/*==================================================
UTILITY
==================================================*/

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

.text-right{
    text-align:right;
}

.mt-20{
    margin-top:20px;
}

.mt-30{
    margin-top:30px;
}

.mt-40{
    margin-top:40px;
}

.mb-20{
    margin-bottom:20px;
}

.mb-30{
    margin-bottom:30px;
}

.mb-40{
    margin-bottom:40px;
}

.visually-hidden{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}


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

.site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    background:#FFFFFF;
    border-bottom:1px solid #E5E7EB;
    z-index:1000;
}


/*==================================================
TOP BAR
==================================================*/

.top-bar{
    background:#043B35;
    color:#FFFFFF;
    font-size:14px;
}

.top-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:42px;
    gap:20px;
}

.top-inner a{
    color:#FFFFFF;
}

.top-inner a:hover{
    text-decoration:underline;
}

.top-bar-tagline{
    min-width:0;
}

.top-bar-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
}

.top-search-link{
    display:inline-flex;
    align-items:center;
    min-height:28px;
}


/*==================================================
TOP SOCIAL LINKS
==================================================*/

.top-social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-height:28px;
    padding:4px 9px;

    border:1px solid rgba(255,255,255,.22);
    border-radius:6px;

    color:#FFFFFF !important;

    font-size:12px;
    font-weight:600;
    line-height:1;

    background:rgba(255,255,255,.06);
}

.top-social-link svg{
    width:15px;
    height:15px;
    flex-shrink:0;
    fill:currentColor;
}

.top-social-link:hover{
    color:#FFFFFF !important;
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.4);
    text-decoration:none !important;
}


/*==================================================
WHATSAPP ATTENTION
==================================================*/

.top-social-whatsapp{
    animation:
        headerSocialShake 3.5s ease-in-out infinite;

    transform-origin:center;
}

@keyframes headerSocialShake{

    0%,
    78%,
    100%{
        transform:rotate(0deg);
    }

    80%{
        transform:rotate(-4deg);
    }

    82%{
        transform:rotate(4deg);
    }

    84%{
        transform:rotate(-3deg);
    }

    86%{
        transform:rotate(3deg);
    }

    88%{
        transform:rotate(0deg);
    }
}


/*==================================================
TELEGRAM ATTENTION
==================================================*/

.top-social-telegram{
    animation:
        headerTelegramPulse 3.5s ease-in-out infinite;
}

@keyframes headerTelegramPulse{

    0%,
    78%,
    100%{
        transform:scale(1);
    }

    82%{
        transform:scale(1.06);
    }

    86%{
        transform:scale(1);
    }
}

.top-social-youtube{
    opacity:.95;
}


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

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:78px;

    position:relative;
}

.site-logo{
    flex-shrink:0;
}

.site-logo a{
    display:block;

    font-size:38px;
    font-weight:800;

    color:#043B35;

    letter-spacing:-1px;
}

.site-logo a:hover{
    color:#043B35;
}


/*==================================================
DESKTOP NAVIGATION
==================================================*/

.main-nav{
    display:flex;
    align-items:center;
    gap:30px;
}

.main-nav a{
    display:block;

    padding:28px 0;

    font-size:15px;
    font-weight:600;

    color:#1F2937;

    border-bottom:3px solid transparent;
    white-space:nowrap;
}

.main-nav a:hover{
    color:#043B35;
    border-color:#043B35;
}


/*==================================================
DESKTOP CATEGORY NAVIGATION
==================================================*/

.desktop-categories{
    display:flex;
    align-items:center;
    gap:26px;

    min-width:0;
}

.desktop-categories a{
    display:block;

    padding:28px 0;

    font-size:15px;
    font-weight:600;

    color:#1F2937;

    white-space:nowrap;

    border-bottom:3px solid transparent;
}

.desktop-categories a:hover{
    color:#043B35;
    border-color:#043B35;
}

.desktop-categories a.active{
    color:#043B35;
    border-color:#043B35;
}


/*==================================================
CATEGORY COUNT
==================================================*/

.nav-category-count{
    margin-left:5px;
    color:#6B7280;
    font-size:13px;
}


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

.menu-toggle{
    display:none;

    align-items:center;
    justify-content:center;

    width:52px;
    height:52px;

    flex-shrink:0;

    border:1px solid #E2E8F0;
    border-radius:10px;

    background:#FFFFFF;
    color:#334155;

    padding:0;
}

.menu-toggle:hover{
    background:#F8FAFC;
    border-color:#CBD5E1;
}

.menu-toggle-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;
    line-height:1;

    color:#334155;
}


/*==================================================
MOBILE CATEGORY OVERLAY
==================================================*/

.mobile-category-overlay{
    position:fixed;
    inset:0;

    background:rgba(15,23,42,.48);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    z-index:1090;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}

.mobile-category-overlay.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/*==================================================
MOBILE CATEGORY DRAWER
==================================================*/

.mobile-category-drawer{
    position:fixed;

    top:0;
    left:0;

    width:330px;
    max-width:88vw;

    height:100vh;
    height:100dvh;

    background:#FFFFFF;

    z-index:1100;

    display:flex;
    flex-direction:column;

    box-shadow:
        8px 0 30px rgba(0,0,0,.16);

    transform:translateX(-105%);

    visibility:hidden;

    transition:
        transform .32s cubic-bezier(.22,.61,.36,1),
        visibility .32s ease;
}

.mobile-category-drawer.is-open{
    transform:translateX(0);
    visibility:visible;
}


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

.mobile-category-drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    min-height:92px;

    padding:18px 20px;

    border-bottom:1px solid #E5E7EB;

    background:#FFFFFF;

    flex-shrink:0;
}

.mobile-category-drawer-title{
    display:block;

    color:#043B35;

    font-size:22px;
    line-height:1.25;
    font-weight:800;
}

.mobile-category-drawer-subtitle{
    display:block;

    margin-top:3px;

    color:#94A3B8;

    font-size:13px;
    line-height:1.4;
}


/*==================================================
DRAWER CLOSE BUTTON
==================================================*/

.mobile-category-close{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    flex-shrink:0;

    border-radius:8px;

    color:#64748B;

    font-size:32px;
    font-weight:300;
    line-height:1;
}

.mobile-category-close:hover{
    background:#F1F5F9;
    color:#043B35;
}


/*==================================================
DRAWER NAVIGATION
==================================================*/

.mobile-category-list{
    flex:1;

    overflow-y:auto;
    overflow-x:hidden;

    padding:16px 14px 24px;

    -webkit-overflow-scrolling:touch;
}

.mobile-category-list a{
    display:flex;
    align-items:center;

    gap:12px;

    width:100%;
    min-height:52px;

    padding:12px 14px;
    margin-bottom:4px;

    border-radius:9px;

    color:#334155;

    font-size:16px;
    font-weight:500;
}

.mobile-category-list a:hover{
    background:#F1F7F5;
    color:#043B35;
}

.mobile-category-list a.active{
    background:#E7F3F0;
    color:#043B35;
    font-weight:700;
}

.mobile-category-link-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:22px;
    min-width:22px;

    color:#94A3B8;

    font-size:19px;
    line-height:1;
}

.mobile-category-list a:hover .mobile-category-link-icon,
.mobile-category-list a.active .mobile-category-link-icon{
    color:#043B35;
}


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

.mobile-category-drawer-footer{
    flex-shrink:0;

    padding:14px 20px 20px;

    border-top:1px solid #E5E7EB;

    background:#FFFFFF;
}

.mobile-category-drawer-footer a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:46px;

    padding:10px 16px;

    border:1px solid #043B35;
    border-radius:7px;

    color:#043B35;

    font-size:14px;
    font-weight:700;
}

.mobile-category-drawer-footer a:hover{
    background:#043B35;
    color:#FFFFFF;
}


/*==================================================
BREADCRUMB
==================================================*/

.breadcrumb{
    font-size:14px;
    margin-bottom:25px;
}

.breadcrumb a{
    color:#043B35;
}

.breadcrumb span{
    color:#6B7280;
}


/*==================================================
HOME LAYOUT
==================================================*/

.home-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        320px;

    gap:35px;

    align-items:start;
}

.main-content{
    min-width:0;
}

.sidebar{
    position:sticky;
    top:115px;
}


/*==================================================
SECTION TITLES
==================================================*/

.section-title{
    font-size:30px;
    margin-bottom:25px;
    color:#111827;
}


/*==================================================
HERO
==================================================*/

.hero{
    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:12px;

    overflow:hidden;

    margin-bottom:40px;
}

.hero-image{
    width:100%;
    height:auto;
    display:block;
}

.hero-content{
    padding:30px;
}

.hero-tag{
    display:inline-block;

    background:#043B35;
    color:#FFFFFF;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;
    font-weight:700;

    letter-spacing:.5px;
    text-transform:uppercase;

    margin-bottom:18px;
}

.hero-title{
    font-size:36px;
    line-height:1.3;

    margin-bottom:18px;
}

.hero-title a{
    color:#111827;
}

.hero-title a:hover{
    color:#043B35;
}

.hero-excerpt{
    font-size:18px;
    color:#4B5563;
    margin-bottom:20px;
}

.hero-meta{
    font-size:14px;
    color:#6B7280;
}


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

.news-grid{
    display:grid;

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

    gap:25px;
}


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

.news-card{
    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:12px;

    overflow:hidden;

    transition:
        box-shadow .25s ease,
        transform .25s ease;
}

.news-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);
}

.news-image-wrap{
    overflow:hidden;
}

.news-image{
    width:100%;
    height:220px;

    object-fit:cover;

    transition:transform .35s ease;
}

.news-card:hover .news-image{
    transform:scale(1.05);
}

.news-body{
    padding:22px;
}

.news-title{
    font-size:22px;
    margin-bottom:14px;
    line-height:1.4;
}

.news-title a{
    color:#111827;
}

.news-title a:hover{
    color:#043B35;
}

.news-excerpt{
    color:#4B5563;
    margin-bottom:18px;
}

.news-meta{
    display:flex;

    justify-content:space-between;
    align-items:center;

    font-size:14px;
    color:#6B7280;

    border-top:1px solid #E5E7EB;

    padding-top:16px;
}


/*==================================================
PAGINATION
==================================================*/

.pagination{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    width:100%;

    margin:35px 0 10px;

    flex-wrap:wrap;
}

.pagination-pages{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    flex-wrap:wrap;
}

.pagination-link{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:42px;
    height:42px;

    padding:0 13px;

    border:1px solid #D9E2DF;

    border-radius:7px;

    background:#FFFFFF;

    color:#043B35;

    font-size:14px;
    font-weight:600;

    line-height:1;

    white-space:nowrap;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.pagination-link:hover{
    background:#F0F7F5;

    border-color:#043B35;

    color:#043B35;

    text-decoration:none;

    transform:translateY(-1px);
}

.pagination-active{
    background:#043B35;

    border-color:#043B35;

    color:#FFFFFF !important;

    cursor:default;
}

.pagination-active:hover{
    background:#043B35;

    border-color:#043B35;

    color:#FFFFFF !important;

    transform:none;
}

.pagination-disabled{
    background:#F8FAFC;

    border-color:#E5E7EB;

    color:#9CA3AF;

    cursor:not-allowed;

    pointer-events:none;
}

.pagination-ellipsis{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:30px;
    height:42px;

    color:#6B7280;

    font-size:15px;
    font-weight:600;
}

.pagination-prev,
.pagination-next{
    gap:6px;
}


/*==================================================
PAGINATION — MOBILE
==================================================*/

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

    .pagination{
        gap:6px;

        margin:30px 0 5px;
    }

    .pagination-pages{
        gap:5px;
    }

    .pagination-link{
        min-width:38px;
        height:38px;

        padding:0 10px;

        border-radius:6px;

        font-size:13px;
    }

    .pagination-ellipsis{
        min-width:24px;
        height:38px;

        font-size:13px;
    }

}


/*==================================================
PAGINATION — SMALL MOBILE
==================================================*/

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

    .pagination{
        gap:5px;

        margin-top:25px;
    }

    .pagination-pages{
        gap:4px;
    }

    .pagination-link{
        min-width:36px;
        height:36px;

        padding:0 8px;

        font-size:12px;
    }

    .pagination-prev,
    .pagination-next{
        padding:0 9px;
    }

    .pagination-ellipsis{
        min-width:20px;
        height:36px;

        font-size:12px;
    }

}


/*==================================================
QUICK ACCESS
==================================================*/

.quick-grid{
    display:grid;

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

    gap:18px;

    margin:30px 0 45px;
}

.quick-card{
    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:10px;

    padding:22px 18px;

    text-align:center;
}

.quick-card:hover{
    border-color:#043B35;
}

.quick-card h3{
    font-size:18px;
    margin:0;
    color:#111827;
}


/*==================================================
SIDEBAR
==================================================*/

.sidebar section,
.article-sidebar section{
    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:10px;

    padding:22px;

    margin-bottom:25px;
}

.sidebar h2,
.article-sidebar h2{
    font-size:22px;
    margin-bottom:18px;
}

.sidebar input,
.article-sidebar input{
    width:100%;
}

.sidebar li,
.article-sidebar li{
    padding:12px 0;
    border-bottom:1px solid #E5E7EB;
}

.sidebar li:last-child,
.article-sidebar li:last-child{
    border-bottom:none;
}


/*==================================================
ARTICLE LAYOUT
==================================================*/

.article-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        320px;

    gap:35px;

    align-items:start;
}

.article-main{
    min-width:0;
}

.article-sidebar{
    position:sticky;
    top:110px;
}


/*==================================================
CATEGORY LAYOUT
==================================================*/

.category-layout{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        320px;

    gap:35px;

    align-items:start;
}

.category-hero{
    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:12px;

    padding:35px;

    margin-bottom:35px;
}

.category-count{
    color:#6B7280;
    margin-top:15px;
}


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

.btn{
    display:inline-block;

    padding:12px 22px;

    background:#043B35;
    color:#FFFFFF;

    border:1px solid #043B35;
    border-radius:6px;

    font-size:15px;
    font-weight:600;

    text-align:center;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.btn:hover{
    background:#022A26;
    border-color:#022A26;
    color:#FFFFFF;
}

.btn-outline{
    background:#FFFFFF;
    color:#043B35;
}

.btn-outline:hover{
    background:#043B35;
    color:#FFFFFF;
}


/*==================================================
FORMS
==================================================*/

input,
textarea,
select{
    width:100%;

    padding:12px 14px;

    border:1px solid #D1D5DB;
    border-radius:6px;

    background:#FFFFFF;
    color:#111827;

    outline:none;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#043B35;
}

textarea{
    resize:vertical;
    min-height:140px;
}


/*==================================================
TABLES
==================================================*/

table{
    background:#FFFFFF;
}

th{
    background:#043B35;
    color:#FFFFFF;

    text-align:left;

    padding:14px;
}

td{
    padding:14px;

    border-bottom:1px solid #E5E7EB;
}

tr:nth-child(even){
    background:#F8FAFC;
}


/*==================================================
ARTICLE PAGE
==================================================*/

.article-page{
    margin:0 auto;

    width:100%;

    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:12px;

    padding:35px;
}

.article-page h1{
    margin-bottom:20px;

    font-size:42px;
    line-height:1.25;
}

.article-meta{
    display:flex;

    flex-wrap:wrap;

    gap:25px;

    align-items:center;

    margin-bottom:30px;

    color:#6B7280;

    font-size:15px;
}

.article-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}


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

.article-header{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        180px;

    gap:25px;

    align-items:center;

    margin-bottom:30px;
}

.article-header-content{
    min-width:0;
}

.article-header h1{
    margin:0 0 16px;
}

.article-header-image{
    width:180px;
    height:120px;

    overflow:hidden;

    border-radius:8px;
}

.article-header-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}


/*==================================================
ARTICLE AUTHOR
==================================================*/

.article-author{
    display:flex;

    align-items:center;

    gap:10px;

    margin-top:4px;
}

.article-author-avatar{
    display:block;

    width:36px;
    height:36px;

    flex:0 0 36px;

    overflow:hidden;

    border-radius:50%;
}

.article-author-avatar img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.article-author-details{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:4px 6px;
}

.article-author-label{
    color:#6B7280;
    font-size:13px;
}

.article-author-name{
    color:#043B35;
    font-size:14px;
    font-weight:700;
}

.article-author-position{
    color:#6B7280;
    font-size:12px;
}


/*==================================================
AUTHOR BOX
==================================================*/

.author-box{
    display:block;
    margin-top:40px;
}

.author-title-row{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:8px;
}

.author-title-row h2{
    margin:0;

    font-size:22px;
    line-height:1.3;

    color:#111827;
}

.author-avatar{
    width:48px;
    height:48px;

    flex:0 0 48px;

    overflow:hidden;

    border-radius:50%;
}

.author-avatar img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.author-position{
    margin-left:60px;
    margin-bottom:15px;

    color:#6B7280;
    font-size:14px;
}


/*==================================================
AUTHOR PROFILE PAGE
==================================================*/

.author-profile{
    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:40px;

    padding:30px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:12px;
}

.author-photo{
    width:140px;
    height:140px;

    flex:0 0 140px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #F1F5F9;
}

.author-profile-meta{
    min-width:0;
}

.author-profile-meta h1{
    margin:0 0 8px;

    font-size:36px;
    line-height:1.25;
}

.author-profile-meta p{
    margin-bottom:10px;
}

.author-profile-meta p:last-child{
    margin-bottom:0;
}


/*==================================================
ARTICLE CONTENT
==================================================*/

.content{
    font-size:18px;
    line-height:1.9;
    color:#374151;
}

.content p{
    margin-bottom:22px;
}

.content h2{
    margin-top:45px;
    margin-bottom:18px;
    font-size:30px;
}

.content h3{
    margin-top:35px;
    margin-bottom:15px;
    font-size:24px;
}

.content ul,
.content ol{
    margin:20px 0 25px 25px;
}

.content ul{
    list-style:disc;
}

.content ol{
    list-style:decimal;
}

.content li{
    margin-bottom:12px;
}

.content img{
    margin:30px auto;
    border-radius:8px;
}

.content table{
    margin:30px 0;
}

.content blockquote{
    background:#F8FAFC;

    border-left:5px solid #043B35;

    padding:20px;

    margin:30px 0;

    font-style:italic;
}

.content code{
    background:#F1F5F9;

    padding:2px 5px;

    border-radius:4px;
}


/*==================================================
TABLE OF CONTENTS
==================================================*/

.table-of-contents{
    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-left:4px solid #043B35;

    padding:20px;

    border-radius:8px;

    margin:30px 0;
}

.table-of-contents h2{
    margin-top:0;
    font-size:20px;
}

.table-of-contents ol{
    margin:15px 0 0;
    padding-left:20px;
}

.table-of-contents li{
    margin:8px 0;
}

.table-of-contents a{
    color:#043B35;
    text-decoration:none;
}

.table-of-contents a:hover{
    text-decoration:underline;
}


/*==================================================
ARTICLE NAVIGATION
==================================================*/

.article-navigation{
    display:flex;

    justify-content:space-between;

    gap:30px;

    margin:45px auto;
}

.article-prev,
.article-next{
    flex:1;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:10px;

    padding:22px;
}

.article-next{
    text-align:right;
}

.article-prev small,
.article-next small{
    display:block;

    margin-bottom:10px;

    color:#6B7280;
}

.article-prev a,
.article-next a{
    font-weight:700;
    color:#111827;
}

.article-prev a:hover,
.article-next a:hover{
    color:#043B35;
}


/*==================================================
RELATED ARTICLES
==================================================*/

.related-grid{
    display:grid;

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

    gap:25px;

    margin-top:30px;
}

.related-card{
    background:#FFFFFF;

    border:1px solid #E5E7EB;
    border-radius:10px;

    overflow:hidden;

    transition:
        box-shadow .25s ease,
        transform .25s ease;
}

.related-card:hover{
    box-shadow:
        0 10px 25px rgba(0,0,0,.08);

    transform:translateY(-3px);
}

.related-image{
    width:100%;
    height:180px;

    object-fit:cover;
}

.related-title{
    padding:18px 18px 10px;

    font-size:20px;
}

.related-title a{
    color:#111827;
}

.related-title a:hover{
    color:#043B35;
}

.related-excerpt{
    padding:0 18px;
    color:#6B7280;
}

.related-card .btn-read{
    display:inline-block;

    margin:18px;

    color:#043B35;

    font-weight:600;
}


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

.site-footer{
    margin-top:70px;

    background:#043B35;

    color:#FFFFFF;

    padding:60px 0 30px;
}

.footer-grid{
    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1.3fr;

    gap:50px;

    align-items:start;
}

.footer-column{
    min-width:0;
}

.site-footer h3{
    font-size:18px;
    line-height:1.4;

    margin:0 0 18px;

    color:#FFFFFF;
}

.site-footer p{
    color:#D1FAE5;
}

.footer-about p{
    max-width:430px;
    line-height:1.7;
}

.site-footer ul{
    list-style:none;

    margin:0;
    padding:0;
}

.site-footer li{
    margin-bottom:10px;
}

.site-footer a{
    color:#FFFFFF;
}

.site-footer a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}


/*==================================================
FOOTER SOCIAL LINKS
==================================================*/

.footer-social-links{
    display:flex;

    flex-wrap:wrap;

    gap:9px;
}

.footer-social-link{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    min-height:36px;

    padding:7px 10px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:7px;

    background:rgba(255,255,255,.06);

    color:#FFFFFF !important;

    font-size:13px;
    font-weight:600;

    text-decoration:none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.footer-social-link:hover{
    background:rgba(255,255,255,.13);

    border-color:rgba(255,255,255,.35);

    transform:translateY(-1px);

    text-decoration:none !important;
}

.footer-social-link svg{
    width:17px;
    height:17px;

    flex-shrink:0;

    fill:currentColor;
}


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

.footer-disclaimer{
    max-width:850px;

    margin:20px auto 0;

    text-align:center;
}

.footer-disclaimer strong{
    display:block;

    margin-bottom:6px;

    color:#FFFFFF;

    font-size:13px;
    font-weight:700;
}

.footer-disclaimer p{
    margin:0;

    color:#BFE3D7;

    font-size:12px;
    line-height:1.7;
}


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

.footer-bottom{
    margin-top:35px;

    padding-top:25px;

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

    text-align:center;
}

.footer-important-pages{
    display:flex;

    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:7px 18px;

    margin-bottom:15px;
}

.footer-important-pages a{
    color:#D1FAE5;

    font-size:13px;
    font-weight:500;

    text-decoration:none;
}

.footer-important-pages a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}

.copyright{
    margin:0;

    color:#D1FAE5;

    font-size:14px;
    line-height:1.6;

    text-align:center;
}


/*==================================================
CHANNEL PROMOTION
==================================================*/

.mobile-channel-promo{
    display:block;
}

.mobile-channel-promo-inner{
    width:94%;
    max-width:1200px;

    margin:0 auto;

    padding:10px 0;
}

.mobile-channel-promo-heading{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    margin-bottom:3px;

    color:#043B35;

    font-size:12px;
    font-weight:800;

    line-height:1.3;

    text-transform:uppercase;

    letter-spacing:.4px;
}

.mobile-channel-promo-dot{
    width:7px;
    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:#16A34A;

    box-shadow:
        0 0 0 4px rgba(22,163,74,.12);

    animation:
        channelDotPulse 2s ease-in-out infinite;
}

@keyframes channelDotPulse{

    0%,
    100%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.25);
        opacity:.7;
    }
}

.mobile-channel-promo-subtitle{
    margin-bottom:8px;

    color:#64748B;

    font-size:10px;
    line-height:1.4;

    text-align:center;
}

.mobile-channel-promo-buttons{
    display:flex;

    align-items:stretch;
    justify-content:center;

    gap:10px;
}

.mobile-channel-button{
    position:relative;

    display:flex;
    align-items:center;

    min-height:46px;

    width:100%;
    max-width:300px;

    padding:7px 11px;

    border-radius:8px;

    color:#FFFFFF !important;

    text-decoration:none !important;

    overflow:hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.mobile-channel-button:hover{
    color:#FFFFFF !important;

    text-decoration:none !important;

    transform:translateY(-1px);
}

.mobile-channel-whatsapp{
    background:#16A34A;

    box-shadow:
        0 3px 10px rgba(22,163,74,.18);

    animation:
        mobileWhatsAppAttention 4s ease-in-out infinite;
}

.mobile-channel-whatsapp:hover{
    background:#15803D;

    box-shadow:
        0 5px 14px rgba(22,163,74,.25);
}

@keyframes mobileWhatsAppAttention{

    0%,
    82%,
    100%{
        transform:translateY(0);
    }

    84%{
        transform:translateY(-2px);
    }

    86%{
        transform:translateY(0);
    }
}

.mobile-channel-telegram{
    background:#229ED9;

    box-shadow:
        0 3px 10px rgba(34,158,217,.18);

    animation:
        mobileTelegramAttention 4s ease-in-out infinite;

    animation-delay:.5s;
}

.mobile-channel-telegram:hover{
    background:#168AC0;

    box-shadow:
        0 5px 14px rgba(34,158,217,.25);
}

@keyframes mobileTelegramAttention{

    0%,
    82%,
    100%{
        transform:translateY(0);
    }

    84%{
        transform:translateY(-2px);
    }

    86%{
        transform:translateY(0);
    }
}

.mobile-channel-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:31px;
    height:31px;

    flex-shrink:0;

    margin-right:8px;

    border-radius:50%;

    background:rgba(255,255,255,.16);
}

.mobile-channel-icon svg{
    width:17px;
    height:17px;

    fill:currentColor;
}

.mobile-channel-button-text{
    display:flex;

    flex-direction:column;

    min-width:0;

    flex:1;
}

.mobile-channel-button-text strong{
    display:block;

    overflow:hidden;

    color:#FFFFFF;

    font-size:11px;
    font-weight:800;

    line-height:1.25;

    white-space:nowrap;

    text-overflow:ellipsis;
}

.mobile-channel-button-text small{
    display:block;

    margin-top:1px;

    color:rgba(255,255,255,.85);

    font-size:9px;
    font-weight:600;

    line-height:1.2;
}

.mobile-channel-arrow{
    display:flex;

    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    flex-shrink:0;

    margin-left:5px;

    border-radius:50%;

    background:rgba(255,255,255,.14);

    color:#FFFFFF;

    font-size:16px;

    line-height:1;
}


/*==================================================
HOMEPAGE EMPTY STATE
==================================================*/

.homepage-empty-state{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    width:100%;

    min-height:260px;

    margin:25px 0;

    padding:40px 30px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:10px;

    text-align:center;

    box-sizing:border-box;
}

.homepage-empty-icon{
    display:flex;

    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    margin-bottom:18px;

    border-radius:50%;

    background:#F0F7F5;

    color:#0B6B5F;
}

.homepage-empty-icon svg{
    width:28px;
    height:28px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.homepage-empty-state h2{
    margin:0 0 8px;

    color:#1F2937;

    font-size:20px;
    font-weight:700;

    line-height:1.35;
}

.homepage-empty-state p{
    max-width:560px;

    margin:0;

    color:#6B7280;

    font-size:14px;
    line-height:1.7;
}


/*==================================================
404
==================================================*/

.error-page{
    text-align:center;
    padding:80px 20px;
}

.error-page h1{
    font-size:72px;
    color:#043B35;
}

.error-page p{
    margin:20px 0 30px;
}


/*==================================================
DESKTOP CHANNEL PROMOTION
==================================================*/

@media screen and (min-width:901px){

    .mobile-channel-promo{
        display:block;

        background:transparent;

        border:0;

        width:94%;
        max-width:1200px;

        margin:0 auto;
    }

    .mobile-channel-promo-inner{
        width:100%;
        max-width:none;

        margin:0;

        padding:7px 0;

        display:flex;

        justify-content:flex-end;

        align-items:center;
    }

    .mobile-channel-promo-heading,
    .mobile-channel-promo-subtitle{
        display:none;
    }

    .mobile-channel-promo-buttons{
        display:flex;

        align-items:center;
        justify-content:flex-end;

        gap:7px;
    }

    .mobile-channel-button{
        width:auto;
        max-width:none;

        min-height:34px;

        padding:5px 9px;

        border-radius:6px;
    }

    .mobile-channel-icon{
        width:23px;
        height:23px;

        margin-right:5px;
    }

    .mobile-channel-icon svg{
        width:14px;
        height:14px;
    }

    .mobile-channel-button-text strong{
        font-size:10px;
    }

    .mobile-channel-button-text small{
        display:none;
    }

    .mobile-channel-arrow{
        width:17px;
        height:17px;

        margin-left:4px;

        font-size:14px;
    }

}


/*==================================================
TABLET
==================================================*/

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

    .desktop-categories{
        gap:18px;
    }

    .main-nav{
        gap:20px;
    }

    .main-nav a,
    .desktop-categories a{
        font-size:14px;
    }

    .site-logo a{
        font-size:32px;
    }

}


/*==================================================
LAYOUT TABLET
==================================================*/

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

    .home-layout,
    .article-layout,
    .category-layout{
        grid-template-columns:1fr;
    }

    .sidebar,
    .article-sidebar{
        position:static;
    }

    .quick-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


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

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

    .top-inner{
        min-height:38px;
        font-size:13px;

        gap:10px;
    }

    .top-bar-tagline{
        min-width:0;

        flex:1;

        overflow:hidden;

        white-space:nowrap;

        text-overflow:ellipsis;
    }

    .top-bar-right{
        flex-shrink:0;
        gap:6px;
    }

    .top-search-link{
        display:none;
    }

    .top-social-link{
        min-width:30px;

        width:30px;
        height:30px;

        padding:0;

        border-radius:50%;
    }

    .top-social-link span{
        display:none;
    }

    .top-social-link svg{
        width:16px;
        height:16px;
    }

    .header-inner{
        min-height:68px;
    }

    .menu-toggle{
        display:flex;
        order:3;
    }

    .menu-toggle[aria-expanded="true"]{
        color:#022A26;
    }

    .site-logo{
        flex:1;

        display:flex;

        justify-content:center;

        order:2;

        min-width:0;

        padding:0 12px;
    }

    .site-logo a{
        font-size:28px;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;
    }

    .main-nav{
        display:none;
    }


    /*----------------------------------------------
    CHANNEL PROMOTION
    ----------------------------------------------*/

    .mobile-channel-promo{
        display:block;

        background:#FFFFFF;

        border-bottom:1px solid #E5E7EB;
    }

    .mobile-channel-promo-inner{
        padding:13px 0 14px;
    }

    .mobile-channel-promo-heading{
        font-size:13px;
    }

    .mobile-channel-promo-subtitle{
        font-size:11px;

        margin-bottom:10px;
    }

    .mobile-channel-promo-buttons{
        display:grid;

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

        gap:8px;
    }

    .mobile-channel-button{
        max-width:none;

        min-height:52px;

        padding:8px 10px;

        border-radius:8px;
    }

    .mobile-channel-icon{
        width:34px;
        height:34px;

        margin-right:8px;
    }

    .mobile-channel-icon svg{
        width:19px;
        height:19px;
    }

    .mobile-channel-button-text strong{
        font-size:12px;
    }

    .mobile-channel-button-text small{
        font-size:10px;
    }

    .mobile-channel-arrow{
        width:22px;
        height:22px;

        font-size:18px;
    }


    /*----------------------------------------------
    HOMEPAGE EMPTY STATE
    ----------------------------------------------*/

    .homepage-empty-state{
        min-height:230px;

        margin:20px 0;

        padding:32px 20px;

        border-radius:8px;
    }

    .homepage-empty-icon{
        width:52px;
        height:52px;

        margin-bottom:15px;
    }

    .homepage-empty-icon svg{
        width:25px;
        height:25px;
    }

    .homepage-empty-state h2{
        font-size:18px;
    }

    .homepage-empty-state p{
        font-size:13px;
        line-height:1.65;
    }

}


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

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

    main{
        padding:30px 0 45px;
    }

    .news-grid{
        grid-template-columns:1fr;
    }

    .hero-title{
        font-size:30px;
    }

    .quick-grid{
        grid-template-columns:1fr;
    }

    .news-meta{
        flex-direction:column;

        align-items:flex-start;

        gap:6px;
    }

    .article-page{
        padding:22px 18px;
        border-radius:9px;
    }

    .article-page h1{
        font-size:30px;
        line-height:1.3;
    }

    .article-meta{
        gap:10px 18px;
        font-size:13px;
    }

    .article-header{
        grid-template-columns:
            minmax(0,1fr)
            110px;

        gap:14px;

        align-items:start;

        margin-bottom:25px;
    }

    .article-header h1{
        margin-bottom:11px;

        font-size:26px;

        line-height:1.3;
    }

    .article-header-image{
        width:110px;
        height:75px;

        border-radius:6px;
    }

    .article-meta{
        gap:7px 12px;
        font-size:12px;
    }

    .article-author-avatar{
        width:32px;
        height:32px;

        flex-basis:32px;
    }

    .author-box{
        padding:20px;
        margin-top:30px;
    }

    .author-title-row{
        gap:10px;
    }

    .author-avatar{
        width:42px;
        height:42px;

        flex-basis:42px;
    }

    .author-title-row h2{
        font-size:20px;
    }

    .author-position{
        margin-left:52px;
    }

    .author-profile{
        gap:18px;

        padding:22px;

        margin-bottom:30px;
    }

    .author-photo{
        width:110px;
        height:110px;

        flex-basis:110px;
    }

    .author-profile-meta h1{
        font-size:28px;
    }

    .article-navigation{
        flex-direction:column;
        gap:15px;
    }

    .article-next{
        text-align:left;
    }

    .related-grid{
        grid-template-columns:1fr;
    }

    .content{
        font-size:17px;
        line-height:1.85;
    }

    .content h2{
        font-size:26px;
    }

    .content h3{
        font-size:22px;
    }


    /*----------------------------------------------
    FOOTER
    ----------------------------------------------*/

    .site-footer{
        margin-top:50px;
        padding:45px 0 25px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-column{
        text-align:left;
    }

    .site-footer h3{
        font-size:17px;
        margin-bottom:13px;
    }

    .footer-about p{
        max-width:none;
    }

    .footer-social-links{
        justify-content:flex-start;
    }

    .footer-bottom{
        text-align:center;
    }

    .footer-important-pages{
        justify-content:center;
        text-align:center;
    }

    .copyright{
        text-align:center;
    }

    .footer-disclaimer{
        text-align:center;
    }

}


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

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

    .site-logo a{
        font-size:24px;
    }

    .top-bar{
        font-size:12px;
    }

    .top-inner{
        min-height:38px;
    }

    .top-bar-right{
        gap:5px;
    }

    .top-social-link{
        width:28px;
        height:28px;

        min-height:28px;
    }

    .top-social-link svg{
        width:15px;
        height:15px;
    }

    .menu-toggle{
        font-size:13px;
    }

    .menu-toggle-icon{
        font-size:24px;
    }

    .mobile-category-drawer{
        width:310px;
        max-width:88vw;
    }

    .mobile-category-drawer-header{
        min-height:84px;
        padding:16px;
    }

    .mobile-category-drawer-title{
        font-size:20px;
    }

    .mobile-category-list{
        padding:12px 10px 20px;
    }


    /*----------------------------------------------
    CHANNEL PROMOTION
    ----------------------------------------------*/

    .mobile-channel-promo-inner{
        padding:11px 0 12px;
    }

    .mobile-channel-promo-heading{
        font-size:12px;
    }

    .mobile-channel-promo-subtitle{
        font-size:10px;
        margin-bottom:8px;
    }

    .mobile-channel-promo-buttons{
        gap:6px;
    }

    .mobile-channel-button{
        min-height:48px;
        padding:7px 8px;
        border-radius:7px;
    }

    .mobile-channel-icon{
        width:30px;
        height:30px;
        margin-right:6px;
    }

    .mobile-channel-icon svg{
        width:17px;
        height:17px;
    }

    .mobile-channel-button-text strong{
        font-size:11px;
    }

    .mobile-channel-button-text small{
        font-size:9px;
    }

    .mobile-channel-arrow{
        width:19px;
        height:19px;
        font-size:16px;
    }


    /*----------------------------------------------
    ARTICLE
    ----------------------------------------------*/

    .article-header{
        grid-template-columns:
            minmax(0,1fr)
            95px;

        gap:11px;
    }

    .article-header h1{
        font-size:22px;
    }

    .article-header-image{
        width:95px;
        height:65px;
    }


    /*----------------------------------------------
    AUTHOR PROFILE
    ----------------------------------------------*/

    .author-profile{
        gap:15px;
        padding:18px;
    }

    .author-photo{
        width:90px;
        height:90px;

        flex-basis:90px;

        border-width:3px;
    }

    .author-profile-meta h1{
        font-size:23px;
    }

    .author-profile-meta p{
        font-size:14px;
    }


    /*----------------------------------------------
    HOMEPAGE EMPTY
    ----------------------------------------------*/

    .homepage-empty-state{
        min-height:210px;
        padding:28px 17px;
    }

    .homepage-empty-state h2{
        font-size:17px;
    }

    .homepage-empty-state p{
        font-size:12px;
    }


    /*----------------------------------------------
    FOOTER
    ----------------------------------------------*/

    .site-footer{
        padding:40px 0 22px;
    }

    .footer-grid{
        gap:26px;
    }

    .footer-social-link{
        min-height:34px;

        padding:6px 9px;

        font-size:12px;
    }

    .footer-social-link svg{
        width:16px;
        height:16px;
    }

    .footer-important-pages{
        gap:7px 14px;
    }

    .footer-important-pages a{
        font-size:12px;
    }

    .copyright{
        font-size:13px;
    }

    .footer-disclaimer p{
        font-size:11px;
        line-height:1.65;
    }

}


/*==================================================
VERY SMALL MOBILE
==================================================*/

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

    .mobile-channel-promo-subtitle{
        display:none;
    }

    .mobile-channel-promo-inner{
        padding:9px 0;
    }

    .mobile-channel-button{
        min-height:46px;
    }

    .mobile-channel-icon{
        width:28px;
        height:28px;

        margin-right:5px;
    }

    .mobile-channel-button-text strong{
        font-size:10px;
    }

}


/*==================================================
REDUCE MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    .top-social-whatsapp,
    .top-social-telegram,
    .mobile-channel-promo-dot,
    .mobile-channel-whatsapp,
    .mobile-channel-telegram{
        animation:none;
    }

}