/* SriTrade - Main Styles */

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    color: #222222;
}

/* Header */

.site-header {
    background: #ffffff;
    padding: 18px 6%;
    border-bottom: 1px solid #eeeeee;
}

.header-inner {
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand {
    min-width: 260px;
    }

.brand h1 {
    font-size: 48px;
    line-height: 1;
    color: #8a4f16;
    margin-bottom: 7px;
}

.brand h1 span {
    color: #07583f;
}

.brand p {
    color: #666666;
    font-size: 15px;
    letter-spacing: 0.4px;
}

.site-message {
    flex: 1;
    text-align: center;
}

.sinhala-tagline {
    color: #7a4a21;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.english-tagline {
    color: #444444;
    font-size: 14px;
    font-style: italic;
}

.header-tools {
    min-width: 280px;
}

.social-links {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
}

.social-links a {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #07583f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
}

.search-box {
    display: flex;
}

.search-box input {
    width: 230px;
    padding: 10px 12px;
    border: 1px solid #cccccc;
    border-radius: 6px 0 0 6px;
    outline: none;
}

.search-box button {
    width: 42px;
    border: none;
    background: #07583f;
    color: white;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

/* Main Navigation */
nav {
    background-color: #00543d;
    padding: 0 6%;
    display: flex;
    align-items: center;
    gap: 10px;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 17px 15px;
    display: block;
}

nav a:hover {
    background-color: #0a7657;
}

/* Main Content */
main {
    width: 92%;
    max-width: 1400px;
    margin: 30px auto;
}

main h2 {
    font-size: 28px;
    color: #17212b;
    border-left: 5px solid #159447;
    padding-left: 12px;
    margin-bottom: 20px;
}

main p {
   
    font-size: 18px;
    line-height: 1.6;}
/* SriTrade Logo */
.site-logo {
    width: 220px;
    height: auto;
    display: block;
}
/* Bilingual Navigation */

nav a {
    text-align: center;
}

.nav-sinhala {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #f2c66d;
    margin-bottom: 4px;
    white-space: nowrap;
}

.nav-english {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}
/* Homepage Story Section */

.home-intro {
    text-align: center;
    margin-bottom: 30px;
}

.home-intro h2 {
    font-size: 30px;
    color: #07583f;
    margin-bottom: 5px;
    border-left: none;
    padding-left: 0;
}

.section-subtitle {
    font-size: 18px;
    color: #777777;
}


/* Story Grid */

.story-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}


/* Cards */

.featured-story,
.story-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
}
/* Main Featured Article */
@media (min-width: 769px) {
    .story-grid > .main-featured-story {
        grid-column: 1 / -1;
    }

    .main-featured-story .featured-image img {
        width: 100%;
        height: 380px;
        object-fit: cover;
    }
}

/* Temporary Image Areas */

.story-placeholder {
    height: 280px;
    background: #e5eee9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07583f;
    font-size: 22px;
    font-weight: bold;
}

.small-placeholder {
    height: 180px;
    background: #e5eee9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07583f;
    font-size: 17px;
    font-weight: bold;
}


/* Story Text */

.story-content {
    padding: 22px;
}

.story-category {
    display: block;
    color: #c87819;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.story-content h3 {
    font-size: 22px;
    color: #17212b;
    margin-bottom: 10px;
}

.story-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
}

.story-content a {
    display: inline-block;
    margin-top: 15px;
    color: #07583f;
    font-weight: bold;
    text-decoration: none;
}


/* Mobile */

@media (max-width: 900px) {
    .story-grid {
        grid-template-columns: 1fr;
    }
}
/* Featured Story Image */
.featured-image {
    width: 100%;
    height: 330px;
    overflow: hidden;
    background: #e8f0ec;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 65%;
    display: block;
}
/* Dissanayaka Cleaning Service image */
.business-image {
    height: 240px;
    overflow: hidden;
}

.business-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Individual Article Page */

.article-page {
    max-width: 900px;
    margin: 50px auto 80px;
    padding: 0 25px;
}

.article-category {
    color: #c96b00;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.article-page h1 {
    color: #063f32;
    font-size: 38px;
    line-height: 1.35;
    margin: 0 0 25px;
}

.article-main-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin-bottom: 35px;
}

.article-body {
    max-width: 760px;
    margin: 0 auto;
}

.article-body p {
    font-size: 19px;
    line-height: 1.9;
    margin-bottom: 22px;
}

.article-body h2 {
    color: #065c46;
    font-size: 25px;
    line-height: 1.5;
    margin-top: 35px;
    margin-bottom: 15px;
}

/* Latest Articles Section */

.latest-articles {
    padding: 20px 0 60px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.articles-grid .story-card {
    width: 100%;
}

.articles-grid .business-image {
    height: 300px;
}
.back-home {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 22px;
    background-color: #065c46;
    color: white;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    border-radius: 6px;
}

.back-home:hover {
    background-color: #d47a00;
    color: white;
}
.article-video {
    display: flex;
    justify-content: center;
    margin: 35px 0 45px;
}
.video-series .article-video {
    flex-direction: column;
    align-items: center;
}

.video-series .article-video h3 {
    width: 100%;
    max-width: 600px;
    margin-bottom: 15px;
}
.article-video video {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 12px;
}

.latest-articles .business-image {
    height: 375px;
}

.latest-articles .business-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* =========================
   CATEGORY PAGES
   ========================= */

.category-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 55px 30px 80px;
}

.category-header {
    margin-bottom: 35px;
}

.category-header h1 {
    color: #075f49;
    font-size: 42px;
    margin: 8px 0 12px;
}

.category-header > p:last-child {
    font-size: 19px;
    line-height: 1.7;
    color: #555;
}
.category-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
    gap: 35px;
    align-items: start;
}

.category-sidebar {
    width: 100%;
}
.category-stories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-bottom: 45px;
}

.category-story-card {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.10);
}

.category-story-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.category-story-content {
    padding: 24px;
}

.category-story-content h2 {
    color: #073e34;
    font-size: 25px;
    line-height: 1.45;
    margin: 10px 0 12px;
}

.category-story-content p {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 18px;
}

.category-story-content a {
    color: #006747;
    font-weight: 700;
    text-decoration: none;
}

.category-story-content a:hover {
    text-decoration: underline;
}
.mobile-menu-button {
    display: none;
}

@media (max-width: 800px) {

    .mobile-menu-button {
        display: block;
        width: 100%;
        background: #005c46;
        color: white;
        border: none;
        padding: 14px 20px;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
    }

    nav {
        display: none !important;
    }
nav.mobile-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
}
nav.mobile-open a {
    padding: 10px 15px;
}
    .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.site-logo {
    width: 180px;
}

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

.header-tools {
    align-items: center;
}
    .category-stories {
      grid-template-columns: minmax(0, 1fr);
    }

    .category-header h1 {
        font-size: 34px;
    }
}
.site-footer {
    background: #005c46;
    color: white;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
}

.site-footer h3 {
    font-size: 24px;
    margin: 0 0 8px;
}

.site-footer p {
    margin: 5px 0;
    font-size: 15px;
}
@media (max-width: 800px) {
    html, body {
        width: 100%;
        max-width: 100%;
   }
.site-header {
    padding-left: 0;
    padding-right: 0;
}
    .site-header,
    .header-inner,
    main,
    nav {
        max-width: 100%;
        box-sizing: border-box;
    }
 .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    padding: 20px 15px;
    box-sizing: border-box;
    overflow: hidden;
}

.site-message {
    flex: none;
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.sinhala-tagline,
.english-tagline {
    width: auto;
    max-width: 300px;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
}

.header-tools {
    width: 100%;
    align-items: center;
}

.search-box {
    width: 100%;
    max-width: 340px;
}

.search-box input {
    min-width: 0;
    width: 100%;
}  
.site-message,
.header-tools {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.sinhala-tagline,
.english-tagline {
    font-size: 16px;
    width: auto;
   max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
    overflow-wrap: normal;
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    width: 100%;
}

.search-box {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    box-sizing: border-box;
} 
.brand {
    min-width: 0;
    width: 100%;
    text-align: center;
}
.category-page {
    width: 100%;
    max-width: 100%;
    padding: 45px 10px;
    box-sizing: border-box;
    overflow: hidden;
}
.category-content-layout {
    grid-template-columns: 1fr;
}

.category-sidebar {
    width: 100%;
}
.category-story-content {
    padding: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.articles-grid {
    grid-template-columns: 1fr;
}
.category-stories {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
}

}
.category-story-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* Home page content + future advertising sidebar */

.home-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    gap: 35px;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.home-sidebar {
    padding-top: 55px;
}

.sidebar-promo {
    background: #f7f3e8;
    border: 1px solid #e1d5b8;
    border-radius: 14px;
    padding: 15px;
    text-align: center;
    
}
.sidebar-promo:not(:last-child) {
    margin-bottom: 20px;
}

.sidebar-promo p {
    color: #075f49;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 12px;
}

.sidebar-promo span {
    color: #666;
    font-size: 15px;
    line-height: 1.5;
}
/* Mobile promotional position is hidden on desktop */
.mobile-promo-slot {
    display: none;
}
@media (max-width: 800px) {

    main.home-layout {
        display: block !important;
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .home-main-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .home-sidebar {
        width: 100%;
        max-width: 100%;
        padding-top: 30px;
         box-sizing: border-box;
}   
.mobile-promo-slot {
    display: block;
    width: 100%;
    margin: 30px 0;
}

.home-sidebar {
    display: none;
}

}
.sidebar-promo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
/* About page content blocks */
.about-block {
    background: #f8f6ee;
    border: 1px solid #e5d8b8;
    border-radius: 14px;
    padding: 28px 32px;
    margin: 28px 0;
}
@media (max-width: 800px) {
    .about-block {
        padding: 22px 18px;
        margin: 24px 0;
    }

    .about-block h2 {
        font-size: 28px;
        line-height: 1.3;
    }
}
/* Article Detail Page */

.article-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 30px 80px;
}

.article-page h1 {
    color: #073e34;
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 30px;
}

.article-page img {
    width: 750px;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.article-page > p {
    max-width: 900px;
    color: #444;
    font-size: 20px;
    line-height: 1.7;
    margin: 24px 0 0;
}
/* Smaller advertisements on inside/category pages */
.sidebar-promo {
    max-width: 320px;
    margin: 20px auto;
}

.sidebar-promo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}
/* SriTrade WhatsApp Advertisement Contact */

.advertise-contact {
    background-color: #f0fff4;
    border: 2px solid #25D366;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 18px;
    text-align: center;
}

.advertise-contact h3 {
    color: #14532d;
    font-size: 20px;
    margin-bottom: 10px;
}

.advertise-contact p {
    font-size: 15px;
    margin-bottom: 15px;
}

.advertise-contact a {
    display: inline-block;
    background-color: #25D366;
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.advertise-contact a:hover {
    background-color: #128C7E;
}
/* Keep WhatsApp advertisement box within mobile screen */
@media (max-width: 800px) {
    .mobile-promo-slot {
        box-sizing: border-box;
        min-width: 0;
    }

    .mobile-promo-slot .advertise-contact {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
        padding: 15px 12px;
    }

    .mobile-promo-slot .advertise-contact a {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
/* Keep homepage advertisements within mobile screen */
@media (max-width: 800px) {
    .mobile-promo-slot {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .mobile-promo-slot .sidebar-promo {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-promo-slot .advertise-contact {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}
/* Prevent mobile homepage content from expanding */
@media (max-width: 800px) {
    .home-main-content,
    .mobile-promo-slot {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-promo-slot {
        overflow-wrap: anywhere;
    }
}
/* Allow featured story grid to shrink on mobile */
@media (max-width: 800px) {
    .story-grid {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    .featured-story,
    .story-card {
        min-width: 0;
        max-width: 100%;
    }
}

/* Mobile horizontal overflow containment — SriTrade homepage */
@media (max-width: 800px) {
    html, body {
        overflow-x: hidden;
    }

    main.home-layout {
        min-width: 0;
        overflow-x: clip;
    }

    .home-main-content,
    .mobile-promo-slot,
    .mobile-promo-slot .sidebar-promo,
    .mobile-promo-slot .advertise-contact {
        min-width: 0;
        max-width: 100%;
    }

    .mobile-promo-slot img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* SriTrade mobile layout correction – keep desktop styling unchanged */
@media screen and (max-width: 800px) {
    /* Make the home page a true single-column layout. */
    main.home-layout {
        display: block !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        overflow: visible;
    }

    main.home-layout > .home-main-content {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-main-content > .story-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .home-main-content .featured-story,
    .home-main-content .story-card,
    .home-main-content .story-content {
        min-width: 0;
        max-width: 100%;
    }

    /* Promo blocks must not retain desktop-sized grid tracks. */
    .home-main-content > .mobile-promo-slot {
        display: block !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 30px 0;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    .mobile-promo-slot > .advertise-contact,
    .mobile-promo-slot > .sidebar-promo {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .mobile-promo-slot .advertise-contact {
        padding: 15px 12px;
    }

    .mobile-promo-slot .advertise-contact h3,
    .mobile-promo-slot .advertise-contact p {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .mobile-promo-slot .advertise-contact a {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 12px 8px;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: clamp(13px, 3.5vw, 16px);
        line-height: 1.4;
    }

    .mobile-promo-slot .sidebar-promo img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}
/* Improve Sinhala article readability */

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

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