/* ==========================================================
   FREELANEWS — UNIVERSAL PUBLIC SHELL
   Header / navigation / footer only.
   Loaded LAST on every public page.
   ========================================================== */

html,
body {
    max-width: 100%;
}


.fn-site-header,
.fn-exact-footer {
    box-sizing: border-box;

    width: 100%;
}


.fn-site-header *,
.fn-exact-footer *,
.fn-site-header *::before,
.fn-site-header *::after,
.fn-exact-footer *::before,
.fn-exact-footer *::after {
    box-sizing: border-box;
}


/* Desktop masthead */

.fn-masthead {
    width: 100% !important;

    background: #fff !important;
}


.fn-masthead-inner {
    display: flex !important;

    width:
        min(
            calc(100% - 30px),
            1140px
        ) !important;

    min-height: 110px !important;

    margin: 0 auto !important;

    padding:
        14px 0 !important;

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

    gap: 36px !important;
}


.fn-logo {
    display: block !important;

    width: 250px !important;
    max-width: 250px !important;

    flex:
        0 0
        250px !important;
}


.fn-logo img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
}


.fn-header-ad {
    display: block !important;

    width: 100% !important;
    max-width: 728px !important;

    margin-left: auto !important;
}


.fn-header-ad img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
}


/* Navigation */

.fn-nav-wrap {
    position: relative !important;

    z-index: 80 !important;

    width: 100% !important;

    border-top:
        1px solid #e7e7e7 !important;

    border-bottom:
        3px solid #111 !important;

    background: #fff !important;
}


.fn-nav-inner {
    display: flex !important;

    width:
        min(
            calc(100% - 30px),
            1140px
        ) !important;

    min-height: 49px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    align-items: center !important;
}


.fn-main-nav {
    display: flex !important;

    min-width: 0 !important;

    flex: 1 !important;
}


.fn-main-nav a {
    display: flex !important;

    min-height: 49px !important;

    padding:
        0 11px !important;

    align-items: center !important;

    color: #222 !important;

    background:
        transparent !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    text-transform:
        uppercase !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


.fn-main-nav a:hover,
.fn-main-nav a.is-active {
    background:
        #e4313b !important;

    color:
        #fff !important;
}


.fn-search-toggle {
    width: 42px !important;
    height: 42px !important;

    border: 0 !important;

    background:
        transparent !important;

    color:
        #111 !important;
}


/* Footer */

.fn-exact-footer {
    width: 100% !important;

    margin: 0 !important;

    background:
        #171717 !important;

    color:
        #aaa !important;
}


.fn-exact-footer-main {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 42px !important;

    width:
        min(
            calc(100% - 30px),
            1140px
        ) !important;

    max-width:
        1140px !important;

    margin:
        0 auto !important;

    padding:
        52px 0
        45px !important;
}


.fn-exact-footer-about,
.fn-exact-footer-popular,
.fn-exact-footer-recent {
    min-width: 0 !important;

    width: 100% !important;
}


.fn-exact-footer-logo {
    display: block !important;

    width: 190px !important;
    max-width: 100% !important;

    height: auto !important;

    margin-bottom:
        20px !important;
}


.fn-exact-footer-about p {
    width: 100% !important;
    max-width: 350px !important;

    margin:
        0 0
        20px !important;

    color:
        #aaa !important;

    font-size:
        12px !important;

    line-height:
        1.7 !important;
}


.fn-exact-signature {
    display: block !important;

    width: 150px !important;
    max-width: 100% !important;

    height: auto !important;

    margin-bottom:
        15px !important;
}


.fn-exact-socials {
    display: flex !important;

    gap: 7px !important;

    margin-bottom:
        24px !important;
}


.fn-exact-firstbank {
    display: block !important;

    width: 250px !important;
    max-width: 100% !important;
}


.fn-exact-firstbank img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
}


.fn-exact-footer-title {
    margin:
        0 0
        20px !important;

    color:
        #fff !important;

    font-size:
        16px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;
}


.fn-live-popular-image {
    display: block !important;

    width: 100% !important;

    aspect-ratio:
        16 / 10 !important;

    overflow:
        hidden !important;
}


.fn-live-popular-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit:
        cover !important;
}


.fn-live-popular-title h3 {
    font-size:
        15px !important;

    line-height:
        1.35 !important;
}


.fn-shell-small-post {
    display: grid !important;

    grid-template-columns:
        88px
        minmax(0, 1fr) !important;

    gap:
        11px !important;

    align-items:
        start !important;

    margin-bottom:
        14px !important;
}


.fn-shell-small-image {
    display: block !important;

    width: 88px !important;
    height: 64px !important;

    overflow:
        hidden !important;
}


.fn-shell-small-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit:
        cover !important;
}


.fn-shell-small-post h4 {
    margin:
        0 0
        4px !important;

    font-size:
        12px !important;

    line-height:
        1.35 !important;
}


.fn-exact-footer-bottom {
    width: 100% !important;

    border-top:
        1px solid #2d2d2d !important;

    background:
        #111 !important;
}


.fn-exact-footer-bottom > .fn-container {
    display: flex !important;

    width:
        min(
            calc(100% - 30px),
            1140px
        ) !important;

    min-height:
        55px !important;

    margin:
        0 auto !important;

    padding: 0 !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        20px !important;
}


.fn-exact-footer-bottom p,
.fn-exact-footer-bottom nav a {
    color:
        #888 !important;

    font-size:
        9px !important;
}


/* ==========================================================
   TABLET + MOBILE UNIVERSAL SHELL
   ========================================================== */

@media (max-width: 820px) {

    body {
        overflow-x:
            hidden !important;
    }

    .fn-masthead-inner {
        width: 100% !important;

        min-height:
            76px !important;

        padding:
            11px 18px !important;

        justify-content:
            center !important;
    }

    .fn-logo {
        width:
            170px !important;

        max-width:
            170px !important;

        flex:
            0 0
            170px !important;
    }

    .fn-header-ad {
        display:
            none !important;
    }

    .fn-nav-inner {
        width: 100% !important;

        min-height:
            46px !important;

        padding:
            0 12px !important;

        justify-content:
            space-between !important;
    }

    .fn-main-nav {
        display:
            none !important;
    }

    .fn-mobile-toggle {
        display:
            grid !important;

        width:
            42px !important;

        height:
            42px !important;

        padding:
            10px !important;

        align-content:
            center !important;

        gap:
            5px !important;

        border: 0 !important;

        background:
            transparent !important;
    }

    .fn-mobile-toggle span {
        display:
            block !important;

        width:
            22px !important;

        height:
            2px !important;

        background:
            #222 !important;
    }

    .fn-search-toggle {
        display:
            block !important;
    }

    .fn-mobile-drawer {
        position:
            fixed !important;

        z-index:
            1001 !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        display:
            block !important;

        width:
            min(
                330px,
                86vw
            ) !important;

        padding-bottom:
            30px !important;

        overflow-y:
            auto !important;

        transform:
            translateX(-105%) !important;

        background:
            #fff !important;

        transition:
            transform .28s ease !important;
    }

    .fn-mobile-drawer.is-open {
        transform:
            translateX(0) !important;
    }

    .fn-drawer-overlay {
        position:
            fixed !important;

        z-index:
            1000 !important;

        inset:
            0 !important;

        display:
            block !important;

        visibility:
            hidden !important;

        opacity:
            0 !important;

        background:
            rgba(0,0,0,.55) !important;
    }

    .fn-drawer-overlay.is-open {
        visibility:
            visible !important;

        opacity:
            1 !important;
    }


    /* Footer becomes one proper mobile column */

    .fn-exact-footer-main {
        display:
            flex !important;

        flex-direction:
            column !important;

        width: 100% !important;

        max-width:
            560px !important;

        gap:
            38px !important;

        padding:
            40px 20px !important;
    }

    .fn-exact-footer-about {
        order:
            1 !important;
    }

    .fn-exact-footer-popular {
        order:
            2 !important;
    }

    .fn-exact-footer-recent {
        order:
            3 !important;
    }

    .fn-exact-footer-about p {
        max-width:
            100% !important;
    }

    .fn-exact-firstbank {
        width:
            250px !important;

        max-width:
            100% !important;
    }

    .fn-exact-footer-bottom > .fn-container {
        display:
            block !important;

        width: 100% !important;

        padding:
            18px 20px !important;
    }

    .fn-exact-footer-bottom p {
        margin:
            0 0
            12px !important;
    }

    .fn-exact-footer-bottom nav {
        display:
            flex !important;

        flex-wrap:
            wrap !important;

        gap:
            8px
            13px !important;
    }

}


@media (max-width: 560px) {

    .fn-masthead-inner {
        min-height:
            68px !important;
    }

    .fn-logo {
        width:
            145px !important;

        max-width:
            145px !important;

        flex-basis:
            145px !important;
    }

    .fn-nav-wrap {
        border-bottom-width:
            2px !important;
    }

    .fn-exact-footer-main {
        padding:
            34px 18px !important;

        gap:
            34px !important;
    }

    .fn-exact-footer-logo {
        width:
            165px !important;
    }

    .fn-exact-footer-about p {
        font-size:
            12px !important;

        line-height:
            1.65 !important;
    }

    .fn-live-popular-title h3 {
        font-size:
            15px !important;
    }

    .fn-shell-small-post {
        grid-template-columns:
            88px
            minmax(0, 1fr) !important;
    }

    .fn-shell-small-post h4 {
        font-size:
            12px !important;
    }

}


/* ==========================================================
   UNIVERSAL ACCESSIBLE SKIP LINK
   Invisible normally; visible only for keyboard focus.
   ========================================================== */

.fn-accessible-skip,
.fn-skip,
.skip-link {
    position: fixed !important;

    z-index: 999999 !important;

    top: 8px !important;
    left: -9999px !important;

    width: auto !important;
    height: auto !important;

    overflow: hidden !important;

    padding: 9px 13px !important;

    background: #111 !important;
    color: #fff !important;

    font-size: 12px !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
}

.fn-accessible-skip:focus,
.fn-skip:focus,
.skip-link:focus {
    left: 8px !important;

    overflow: visible !important;
}


/* ==========================================================
   LEGACY PUBLIC STATUS CLEANUP
   ========================================================== */

#status:empty,
.status:empty,
.fn-article-loading:empty {
    display: none !important;
}


/* ==========================================================
   UNIVERSAL ACCESSIBLE SKIP LINK
   Invisible normally; visible only for keyboard focus.
   ========================================================== */

.fn-accessible-skip,
.fn-skip,
.skip-link {
    position: fixed !important;

    z-index: 999999 !important;

    top: 8px !important;
    left: -9999px !important;

    width: auto !important;
    height: auto !important;

    overflow: hidden !important;

    padding: 9px 13px !important;

    background: #111 !important;
    color: #fff !important;

    font-size: 12px !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
}

.fn-accessible-skip:focus,
.fn-skip:focus,
.skip-link:focus {
    left: 8px !important;

    overflow: visible !important;
}


/* ==========================================================
   LEGACY PUBLIC STATUS CLEANUP
   ========================================================== */

#status:empty,
.status:empty,
.fn-article-loading:empty {
    display: none !important;
}