/* Visual refresh (2026-10). Loaded last in <head>, after the inline <style> blocks,
   so equal-specificity rules here win over the legacy CSS.
   Mobile-first: the base rules are the phone layout (320px and up);
   the min-width blocks at the end layer on tablet (768px) and desktop. */
:root {
    --ink: #1a1a1a;
    --muted: #6b6b6b;
    --rule: #e3e9e6; /* neutrals carry a hint of the logo green */
    --soft: #f2f6f4;
    --brand: #d42f43; /* logo red #dc364a, one shade deeper so white text on it passes AA */
    --brand-green: #236d59; /* logo green */
    --green-dark: #18493c;
    /* Noto Serif Bengali: the free newspaper standard (BBC Bangla, Kaler Kantho, Jugantor). */
    --font-head: "Noto Serif Bengali", "SolaimanLipiNormal", serif;
    --font-body: "Noto Serif Bengali", "SolaimanLipiNormal", serif;
    --radius: 6px;
}

body {
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
}
a:hover,
a:focus {
    color: var(--brand);
}

/* ---------- Header ---------- */
.header_section {
    border-top: 4px solid var(--brand-green);
}
.masthead_date {
    color: var(--muted);
}
.masthead_date .fa {
    color: var(--brand);
}
.masthead_social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--soft) !important;
    color: #444 !important;
}
.masthead_social a:hover {
    background: var(--brand) !important;
    color: #fff !important;
}
/* Phone bar buttons (search, menu); 40px tap targets. */
.masthead_btn {
    background: transparent;
    color: var(--ink);
    font-size: 20px;
}
.masthead_btn:hover,
.masthead_btn:focus {
    background: var(--soft);
    color: var(--brand);
}

/* Phone category row: plain scrollable text tabs, brand underline on the current one.
   Its legacy <style> sits in <body>, hence the body prefix. */
body .mobile-horizontal-menu {
    background: #fff;
    padding: 0 4px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    scrollbar-width: none;
}
body .mobile-horizontal-menu a {
    padding: 10px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
}
body .mobile-horizontal-menu a:hover,
body .mobile-horizontal-menu a.active {
    background: none;
    color: var(--brand);
    box-shadow: inset 0 -3px 0 var(--brand);
}

/* Main menu (collapsible list on phone, one bar from 768px). */
.menu_section,
.menu_bottom {
    background: #fff;
}
.menu_area .menu_bottom .mainmenu a,
.navbar-default .navbar-nav > li > a {
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 600;
    border-right: 0;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--brand) !important;
    background: transparent;
    box-shadow: inset 0 -3px 0 var(--brand);
}
.menu_area .mainmenu li a:hover,
.menu_area .mainmenu li a:focus,
.mainmenu .collapse ul > li:hover > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: var(--brand);
    background: transparent;
}
.navbar-default .navbar-nav > li > a .caret {
    color: #aaa;
}
.mainmenu .collapse ul ul,
.mainmenu .collapse ul ul.dropdown-menu {
    background: #fff;
    border: 1px solid var(--rule);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}
.menu_area .menu_bottom .mainmenu .dropdown-menu a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: var(--ink) !important;
    font-weight: 400;
    padding: 9px 16px;
    border-bottom: 1px solid var(--soft);
}
.mainmenu .collapse ul ul > li:hover > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    background: var(--soft);
    color: var(--brand) !important;
}
.search-icon i {
    color: var(--ink);
    background: transparent;
}
.search-icon i:hover {
    color: var(--brand);
    background: var(--soft);
}

/* Headline ticker: one slim tinted row, a small brand tag sized to its text.
   The legacy CSS splits it into two bootstrap columns with !important widths. */
.bottom_scrool {
    display: flex;
    align-items: center;
    margin: 12px 15px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--soft);
}
.bottom_scrool > div {
    float: none;
    width: auto;
    padding: 0;
}
.bottom_scrool > div + div {
    flex: 1;
    min-width: 0;
}
.bottom_scrool_1 {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin-right: 12px;
    padding: 2px 10px !important;
    border-radius: 3px;
    background: var(--brand);
    color: #fff;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.bottom_scrool_2 {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none;
}
.bottom_scrool_2 a {
    color: var(--ink);
    font-size: 16px !important;
}
.bottom_scrool_2 .fa-square {
    color: var(--brand);
    font-size: 7px;
    vertical-align: middle;
    margin: 0 8px 0 18px;
}

/* ---------- Sections and headings ---------- */
/* Ad bands: the ad outputs are commented out in the views; hide the empty bands. */
.widget_section {
    display: none;
}
/* One white page with thin rules; two blocks get the brand tint for rhythm. */
.section_two,
.section_three,
.section_five,
.section_six,
.section_seven,
.section_nine,
.section_eleven,
.section_twelve {
    background: #fff;
    border-top: 1px solid var(--rule);
    padding: 20px 0 8px;
}
.section_five,
.section_nine {
    background: var(--soft);
    border-top: 0;
}
/* Section headings (category blocks, sidebar boxes, related news): ink text after a short brand bar. */
.cat_title_one,
.facebook_title,
.sgl-cat-tittle {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0 0 8px;
    margin: 0 0 16px;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 600;
}
.facebook_title,
.sgl-cat-tittle {
    margin-top: 28px;
}
.cat_title_one a {
    background: none;
    padding: 0;
    color: var(--ink);
    font-size: 20px;
    font-weight: 600;
}
.cat_title_one a:after,
.cat_title_one .fa-bars {
    display: none;
}
.cat_title_one a:before,
.facebook_title:before,
.sgl-cat-tittle:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 10px;
    vertical-align: -3px;
    background: var(--brand);
}
.cat_title_one a:hover {
    color: var(--brand);
}

/* ---------- Story lists ---------- */
/* Headline type */
.hadding_01,
.hadding_02,
.hadding_03 {
    padding: 0;
}
.hadding_01 a,
.hadding_02 a,
.hadding_03 a,
.Name-again .sgl-hadding a {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.5;
}
.hadding_01 a {
    font-size: 21px;
}
.hadding_02 a,
.hadding_03 a,
.Name-again .sgl-hadding a {
    font-size: 17px;
}
.hadding_01 a:hover,
.hadding_02 a:hover,
.hadding_03 a:hover,
.Name-again .sgl-hadding a:hover {
    color: var(--brand);
}
/* Every headline slot is clamped, so one long headline (the longest runs 189 characters)
   never breaks a row: 3 lines in rows, cards and lists, 4 in the big slots. The story page h1 is never cut. */
.hadding_01 a,
.hadding_02 a,
.hadding_03 a,
.section_one .overly_hadding_1 a,
.section_one .overly_hadding_2 a,
.Name-again .sgl-hadding a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hadding_01 a,
.section_one .overly_hadding_1 a {
    -webkit-line-clamp: 4;
}

/* Photos: an 8:5 box, the shape of every stored photo (uploads were 500x310), so poster text is not cut.
   Square and portrait uploads show whole on the tint (masthead.js adds .whole). */
.exclisive_news_image img,
.middle_image img,
.image-again img,
.little_img img,
.border_image img,
.section_one .image img {
    display: block;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border: 0;
    padding: 0;
    border-radius: var(--radius);
}
/* A state class: it has to win over every photo-slot rule above. */
img.whole {
    object-fit: contain !important;
}
.exclisive_news_image {
    overflow: hidden;
    border-radius: var(--radius);
}
.exclisive_news_image img:hover {
    transform: none;
}

/* Cards lose their boxes and shadows. */
.exclisive_news,
.middle_image_sec,
.box-shadow,
.Name-again {
    background: none;
    box-shadow: none;
    border-top: 0;
}
.content-padding {
    padding: 10px 0 0;
}
.sec_three_padding {
    padding: 10px 0 0;
}

/* Phone: a row per story, photo on the right; the first story of each block stays big.
   (.hadding_03 marks the small three-up row under জাতীয়, which is not a block lead.) */
.exclisive_news,
.middle_image_sec,
.image-again {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
}
.exclisive_news_image,
.middle_image_sec > .middle_image,
.image-again > a {
    width: 38%;
    flex-shrink: 0;
}
.exclisive_news .content-padding,
.middle_image_sec .content-padding,
.Name-again .sgl-hadding {
    position: static;
    flex: 1;
    padding: 0;
    background: none;
}
.exclisive_news,
.middle_image_sec,
.Name-again {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.row > [class*="col-"]:first-child > .exclisive_news,
.row > [class*="col-"]:first-child > .middle_image_sec:not(:has(.hadding_03)) {
    display: block;
}
.row > [class*="col-"]:first-child > .exclisive_news .exclisive_news_image,
.row > [class*="col-"]:first-child > .middle_image_sec:not(:has(.hadding_03)) .middle_image {
    width: auto;
}
.row > [class*="col-"]:first-child > .exclisive_news .content-padding,
.row > [class*="col-"]:first-child > .middle_image_sec:not(:has(.hadding_03)) .content-padding {
    padding-top: 10px;
}
.row > [class*="col-"]:first-child > .exclisive_news .hadding_02 a,
.row > [class*="col-"]:first-child > .middle_image_sec:not(:has(.hadding_03)) .hadding_02 a {
    font-size: 21px;
    -webkit-line-clamp: 4;
}

/* Thumbnail lists inside category blocks */
.little_img .hadding_02 a {
    font-size: 16px;
}
.border {
    border-top: 1px solid var(--rule);
    padding: 12px 0 0;
    margin-top: 12px;
}
.more_news a {
    padding: 6px 0;
    color: var(--brand-green);
    font-weight: 600;
}
.more_news a:hover {
    color: var(--brand);
}

/* Lead section: headline under the photo; the first story big, the others as rows. */
.section_one .image {
    margin-bottom: 0;
}
.section_one .overly_hadding_1,
.section_one .overly_hadding_2 {
    position: static;
    background: none;
    padding: 10px 0 0 !important;
    margin: 0;
}
.section_one .overly_hadding_1 a,
.section_one .overly_hadding_2 a {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.45;
}
.section_one .overly_hadding_1 a {
    font-size: 22px !important;
}
.section_one .overly_hadding_2 a {
    font-size: 17px !important;
}
.section_one .overly_hadding_1 a:hover,
.section_one .overly_hadding_2 a:hover {
    color: var(--brand);
}
.section_one .Name {
    margin-bottom: 20px;
}
.section_one .overly_section .image {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
}
.section_one .overly_section .image img {
    width: 38%;
    flex-shrink: 0;
}
.section_one .overly_section .overly_hadding_2 {
    flex: 1;
    padding: 0 !important;
}
.section_one .overly_section .Name {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}

/* ---------- Sidebar ---------- */
/* Latest / popular tabs: plain text tabs, brand underline on the open one. */
.tab-header .nav-tabs {
    background: none;
    border-bottom: 1px solid var(--rule);
}
.tab-header .nav-tabs > li > a,
.tab-header .nav-tabs > li > a:hover,
.tab-header .nav-tabs > li.active > a,
.tab-header .nav-tabs > li.active > a:focus,
.tab-header .nav-tabs > li.active > a:hover {
    border: 0;
    background: none;
    padding: 10px 6px;
    color: var(--muted);
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
}
.tab-header .nav-tabs > li.active > a,
.tab-header .nav-tabs > li.active > a:focus,
.tab-header .nav-tabs > li.active > a:hover {
    color: var(--ink);
    box-shadow: inset 0 -3px 0 var(--brand);
}
/* The two tabs sit side by side on phones too (Bootstrap stacks nav-justified below 768px). */
.tab-header .nav-justified {
    display: flex;
}
.tab-header .nav-justified:before,
.tab-header .nav-justified:after {
    display: none;
}
.tab-header .nav-justified > li {
    flex: 1;
}
.tab-header .nav-justified > li > a {
    margin: 0;
    text-align: center;
}
.tab-border {
    border-bottom: 1px solid var(--rule);
    padding: 12px 4px;
    margin: 0;
}
.tab-border .padding {
    padding: 0;
}
.tab-border .fa-arrow-circle-right {
    display: none;
}
/* Prayer times */
.table > tbody > tr > th,
.table > tbody > tr > td {
    font-weight: 400;
    font-size: 15px;
    border-top-color: var(--rule);
}

/* ---------- Single news page ---------- */
/* Reference: Prothom Alo's story page. Crumbs, a bold headline, a byline (reporter, then date),
   a full-bleed photo on phones, then the body at 18px with Bangla-friendly leading. */
.single-cat-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    margin: 4px 0 10px;
    background: none;
}
.single-cat-home,
.single-cat-cate {
    float: none;
    height: auto;
    padding: 0;
    background: none;
    font-size: 15px;
    line-height: 1.6;
}
.single-cat-cate:before {
    content: "›";
    margin: 0 8px;
    color: var(--muted);
    font-size: 15px;
}
.single-cat-home a,
.single-cat-cate a {
    color: var(--brand-green);
    font-size: 15px;
    font-weight: 600;
    padding: 0;
}
.single-title {
    padding: 0;
}
.single-title h1 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
}
.byline {
    padding: 0 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    line-height: 1.6;
}
.byline-name {
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
}
.byline-role {
    color: var(--muted);
    font-size: 15px;
}
.byline-date {
    color: var(--muted);
    font-size: 14px;
}
/* Edge to edge on phones (the column has 15px padding), rounded card from tablet. */
.single-img {
    margin: 0 -15px 20px;
}
.single-img img {
    display: block;
    width: 100%;
}
/* Body copy: 18px on phones, 19px from tablet, generous leading for Bangla conjuncts; ragged right. */
.single-dtls,
.single-dtls p {
    color: #222;
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
}
.single-dtls {
    padding: 0;
}
.single-dtls p {
    margin: 18px 0;
}
/* Rich content from the editor: links, subheads, lists, quotes, photos, video and tables. */
.single-dtls a {
    color: var(--brand-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.single-dtls h2,
.single-dtls h3,
.single-dtls h4 {
    margin: 28px 0 8px;
    color: var(--ink);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
}
.single-dtls ul,
.single-dtls ol {
    margin: 18px 0;
    padding-left: 1.4em;
}
.single-dtls ol {
    list-style-type: bengali; /* ১. ২. ৩. */
}
.single-dtls li {
    margin: 6px 0;
}
.single-dtls blockquote {
    margin: 24px 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--brand);
    color: var(--ink);
    font-size: inherit;
}
.single-dtls blockquote p {
    margin: 0;
}
.single-dtls img,
.single-dtls iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border: 0;
    border-radius: var(--radius);
}
.single-dtls iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}
/* Wide tables scroll inside the column instead of pushing the page sideways. */
.single-dtls table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.6;
}
.single-dtls th,
.single-dtls td {
    padding: 8px 10px;
    border: 1px solid var(--rule);
    vertical-align: top;
}
.single-dtls th {
    background: var(--soft);
}
.single-dtls hr {
    margin: 28px 0;
    border-top: 1px solid var(--rule);
}
/* Share: round brand-coloured icon buttons, as on Prothom Alo. */
.sgl-page-social-title h4 {
    margin: 28px 0 10px;
    padding: 0;
    border: 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
}
.sgl-page-social ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
}
.sgl-page-social ul li {
    margin: 0;
}
.sgl-page-social ul li a,
.sgl-page-social ul li a:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    color: #fff !important;
    font-size: 19px;
}
.sgl-page-social .share-fb {
    background: #1877f2 !important;
}
.sgl-page-social .share-wa {
    background: #25d366 !important;
}
.sgl-page-social .share-in {
    background: #0a66c2 !important;
}
.sgl-page-social .share-print {
    background: #555 !important;
}
.sgl-page-social ul li a:hover {
    opacity: 0.85;
}

/* ---------- Footer: deep brand green, logo knocked out to white ---------- */
.footer_section {
    background: var(--green-dark);
}
.footer_section:before {
    display: none;
}
.ftr-logo img {
    filter: brightness(0) invert(1);
}
.footer-border {
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
.footer_section {
    padding: 28px 0 20px;
}
.footer-border {
    padding: 16px 0;
}
.ftr-logo img {
    max-height: 64px;
    margin: 0 auto;
}
.footer_social {
    padding: 16px 0 0;
}
.footer_social ul {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
}
.footer_social ul li {
    margin: 0;
}
.footer-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-menu ul li a {
    display: block;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
}
.footer-text {
    text-align: center;
}
.footer-editor {
    margin: 0 0 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.footer-contact {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.8;
}
.footer-contact span {
    margin: 0 6px;
    opacity: 0.5;
}
.footer-copy {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-align: center;
}
.footer_section a,
.footer-menu ul li a:hover {
    color: #fff;
}
.footer_social a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: transparent !important;
    color: #fff !important;
    font-size: 15px;
}
.footer_social a:hover {
    border-color: #fff;
    background: #fff !important;
    color: var(--green-dark) !important;
}

/* Back-to-top: small and quiet (jQuery fades it, so display is left alone). */
.scrollToTop {
    padding: 0;
    text-align: center;
    line-height: 38px;
    right: 16px;
    bottom: 20px;
    border: 1px solid var(--rule);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.scrollToTop i.fa {
    position: static;
    display: inline;
    line-height: 38px;
    font-size: 20px;
    color: var(--ink);
}

/* ---------- Tablet and up (768px) ---------- */
@media (min-width: 768px) {
    .menu_section {
        border-top: 1px solid var(--rule);
        border-bottom: 2px solid var(--rule);
    }
    .section_two,
    .section_three,
    .section_five,
    .section_six,
    .section_seven,
    .section_nine,
    .section_eleven,
    .section_twelve {
        padding-top: 24px;
    }
    .cat_title_one,
    .facebook_title,
    .sgl-cat-tittle,
    .cat_title_one a {
        font-size: 21px;
    }
    .hadding_01 a {
        font-size: 22px;
    }
    .hadding_02 a {
        font-size: 18px;
    }

    /* Story lists become cards: photo on top, title clamped to 3 lines so rows stay even. */
    .exclisive_news,
    .middle_image_sec,
    .image-again {
        display: block;
    }
    .exclisive_news_image,
    .middle_image,
    .image-again > a {
        width: auto;
    }
    .exclisive_news .content-padding,
    .middle_image_sec .content-padding {
        padding: 10px 0 0;
    }
    .exclisive_news .content-padding {
        min-height: calc(3 * 1.5em + 10px);
    }
    .Name-again .sgl-hadding {
        padding: 8px 0 0;
    }
    .exclisive_news,
    .middle_image_sec,
    .Name-again {
        margin-bottom: 24px;
        padding-bottom: 0;
        border-bottom: 0;
    }
    .row > [class*="col-"]:first-child > .exclisive_news .hadding_02 a,
    .row > [class*="col-"]:first-child > .middle_image_sec:not(:has(.hadding_03)) .hadding_02 a {
        font-size: 18px;
        -webkit-line-clamp: 3;
    }

    /* Lead section: big story left, 2x2 grid right, a thin rule between. */
    .section_one > .container > .row > .col-sm-6 + .col-sm-6 {
        border-left: 1px solid var(--rule);
    }
    .section_one .overly_section {
        padding-left: 8px;
    }
    .section_one .overly_hadding_1 a {
        font-size: 28px !important;
    }
    .section_one .overly_hadding_2 a {
        font-size: 18px !important;
    }
    .section_one .overly_section .image {
        display: block;
    }
    .section_one .overly_section .image img {
        width: 100%;
    }
    .section_one .overly_section .overly_hadding_2 {
        padding: 10px 0 0 !important;
    }
    .section_one .overly_section .Name {
        margin-bottom: 20px;
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Footer: logo left, social right, text left-aligned. */
    .ftr-logo img {
        margin: 0;
    }
    .footer_social {
        padding: 0;
    }
    .footer_social ul {
        justify-content: flex-end;
    }
    .footer-text,
    .footer-copy {
        text-align: left;
    }

    .single-title h1 {
        font-size: 34px;
        line-height: 1.4;
    }
    .single-img {
        margin: 0 0 24px;
    }
    .single-img img {
        border-radius: var(--radius);
    }
    .single-dtls,
    .single-dtls p {
        font-size: 19px;
    }
}

/* Image skeleton: the 16:9 box is reserved by aspect-ratio, so a tint shows until the photo loads. */
img.wp-post-image {
    background: var(--soft);
}

/* ---------- States ---------- */
/* Short pages (empty category, 404): the footer sits at the bottom of the window, not mid-screen.
   Sticky, not a flex body: in a flex column Bootstrap's auto-margin .container shrinks to its content.
   The footer can only move down, and only as far as the end of <body>, so long pages are untouched. */
body {
    min-height: 100vh;
    min-height: 100svh;
}
.footer_section {
    position: sticky;
    top: 100vh;
}

/* Empty list, no search result, 404: one centred message block. */
.state-box {
    text-align: center;
    padding: 40px 16px 48px;
}
.state-code {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: var(--rule);
    margin: 0 0 12px;
}
.state-box h1 {
    font-size: 24px;
    text-wrap: balance;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
}
.state-box p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 20px;
}
.state-search {
    display: flex;
    max-width: 420px;
    margin: 0 auto 16px;
}
.state-search input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 17px;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}
.state-search button {
    border: 0;
    padding: 0 18px;
    color: #fff;
    background: var(--brand-green);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.state-home {
    font-weight: 600;
    color: var(--brand-green);
}
.state-latest {
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 0 16px;
}
.state-latest h2 {
    font-size: 20px;
    font-weight: 700;
    border-left: 4px solid var(--brand);
    padding-left: 10px;
    margin: 0 0 4px;
}
.state-latest a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-size: 18px;
    line-height: 1.6;
}
.state-latest a:hover {
    color: var(--brand);
}
@media (min-width: 768px) {
    .state-box {
        padding: 72px 16px 56px;
    }
    .state-code {
        font-size: 88px;
    }
    .state-box h1 {
        font-size: 30px;
    }
}