/*
Theme Name: Fairplay Lightweight
Theme URI: https://example.com/
Author: Fairplay
Description: Lightweight responsive Fairplay information theme.
Version: 2.0.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fairplay-lightweight
*/
:root{--bg:#101010;--panel:#191919;--panel2:#242424;--text:#f5f5f5;--muted:#c5c5c5;--orange:#ff7a00;--green:#0b9f2d;--line:#3b3b3b;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.wrap{width:min(calc(100% - 32px),var(--max));margin:auto}.site-header{background:#050505;border-bottom:1px solid #262626;position:sticky;top:0;z-index:50}.header-inner{min-height:72px;display:flex;align-items:center;gap:22px}.brand img{width:122px;height:auto}.main-nav{display:flex;gap:8px;align-items:center;flex:1;justify-content:center}.main-nav a{border:1px solid #2e6b39;border-radius:5px;padding:7px 12px;font-size:12px;font-weight:700;text-transform:uppercase}.main-nav a:hover{border-color:var(--orange);color:#ffb26b}.header-actions{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:5px;padding:10px 18px;font-size:12px;font-weight:800;text-transform:uppercase;cursor:pointer}.btn-orange{background:var(--orange);color:#fff}.btn-green{background:var(--green);color:#fff}.menu-toggle{display:none;background:none;border:1px solid #555;color:#fff;padding:8px 10px;border-radius:5px}.hero{padding:38px 0 28px;text-align:center;background:#000}.hero h1{max-width:900px;margin:0 auto 10px;font-size:clamp(28px,4vw,44px);line-height:1.12}.hero p{max-width:850px;margin:0 auto 18px;color:#ddd}.hero-media{max-width:820px;margin:22px auto 0}.hero-media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px}.section{padding:38px 0}.section h2{font-size:27px;line-height:1.2;margin:0 0 12px;border-bottom:2px solid var(--orange);padding-bottom:7px}.section h3{font-size:20px}.section p{color:#ddd}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 28px}.feature-card{background:#3a3a3a;border:1px solid #8a4c1c;border-radius:9px;padding:20px;text-align:center}.feature-card h3{margin:8px 0 2px;font-size:16px}.feature-card p{margin:0;color:#ccc;font-size:13px}.feature-icon{width:50px;height:50px;object-fit:contain;margin:auto}.info-table{width:100%;border-collapse:collapse;background:#2b2b2b}.info-table th,.info-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #444;font-size:14px}.info-table th{background:#d66c10}.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.split.reverse>div:first-child{order:2}.split-media img{width:100%;border-radius:9px;object-fit:cover}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:linear-gradient(145deg,#333,#4a3a32);border-radius:10px;overflow:hidden;border:1px solid #555}.card img{width:100%;aspect-ratio:3/2;object-fit:cover}.card-body{padding:17px}.eyebrow{color:#ff9c4a;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.breadcrumb{padding:12px 0;background:#151515;border-bottom:1px solid #262626}.breadcrumb .wrap{font-size:13px;color:#bbb}.breadcrumb a{color:#ff9c4a}.page-banner{background:#0a0a0a;padding:34px 0 26px}.page-banner-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:35px;align-items:center}.page-banner h1{font-size:clamp(30px,4vw,46px);line-height:1.1;margin:0 0 10px}.page-banner p{color:#ddd}.banner-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px}.banner-image img.portrait{width:auto;max-width:100%;height:auto;max-height:560px;aspect-ratio:auto;object-fit:contain;margin:auto}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px}.article-content{min-width:0}.article-content h2{margin-top:35px}.article-content ul{padding-left:22px;color:#ddd}.article-content li{margin:6px 0}.sidebar{position:sticky;top:94px;align-self:start;height:max-content;min-width:0}.sidebar-box{background:#1a1a1a;border:1px solid #363636;border-radius:9px;padding:18px;margin-bottom:18px}.sidebar-box h3{margin-top:0;border-bottom:2px solid var(--orange);padding-bottom:7px}.sidebar-list{list-style:none;padding:0;margin:0}.sidebar-list li{border-bottom:1px solid #333;padding:8px 0}.sidebar-list a:hover{color:#ff9c4a}.post-meta{font-size:13px;color:#aaa}.blog-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px}.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.post-card{background:#191919;border:1px solid #353535;border-radius:9px;overflow:hidden}.post-card img{aspect-ratio:3/2;object-fit:cover}.post-card-body{padding:18px}.post-card h2{font-size:20px;margin:0 0 8px;border:0}.single-post img.featured{width:100%;max-height:520px;object-fit:cover;border-radius:9px;margin-bottom:25px}.site-footer{background:#050505;border-top:1px solid #292929;padding:45px 0 90px;margin-top:35px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}.footer-links{display:grid;grid-template-columns:repeat(1,1fr);gap:7px;font-size:14px}.footer-links a:hover{color:#ff9c4a}.sticky-cta{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;box-shadow:0 5px 25px #000}.whatsapp{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;background:#20c66a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:23px;z-index:81;box-shadow:0 5px 20px #000}.notice{background:#292929;border-left:3px solid var(--orange);padding:16px 18px;border-radius:6px}.pagination{margin-top:25px}.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}.pagination a,.pagination span{padding:7px 11px;background:#222;border:1px solid #444;border-radius:5px}.pagination .current{background:var(--orange)}@media(max-width:900px){.main-nav,.header-actions{display:none}.menu-toggle{display:block;margin-left:auto}.header-inner{min-height:64px}.main-nav.open{display:flex;position:absolute;left:0;right:0;top:64px;background:#090909;padding:12px 16px;flex-direction:column;align-items:stretch;border-bottom:1px solid #333}.main-nav.open a{text-align:center}.feature-grid{grid-template-columns:repeat(2,1fr)}.page-banner-inner,.content-layout,.blog-grid,.split{grid-template-columns:1fr}.sidebar{position:static}.posts{grid-template-columns:1fr}.split.reverse>div:first-child{order:initial}.footer-grid{grid-template-columns:1fr 1fr}.banner-image{order:-1}}@media(max-width:560px){.wrap{width:min(calc(100% - 22px),var(--max))}.hero{padding-top:26px}.feature-grid,.footer-grid{grid-template-columns:1fr}.section{padding:28px 0}.sticky-cta{bottom:10px;width:calc(100% - 90px)}.whatsapp{right:12px;bottom:13px}.page-banner{padding:25px 0}.page-banner h1{font-size:30px}.hero-media img{aspect-ratio:4/3}.banner-image img{aspect-ratio:4/3}.footer-links{grid-template-columns:1fr 1fr}}



/* =========================================================
   FINAL RESPONSIVE + STICKY SIDEBAR FIX
   Desktop: sidebar sticky
   Mobile: sidebar normal/static
   ========================================================= */

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
}

iframe,
video {
    display: block;
}

table {
    max-width: 100%;
}

/* Main container */
.wrap {
    width: min(1120px, calc(100% - 32px));
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 9990;
    width: 100%;
}

.header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.brand {
    flex: 0 0 auto;
    min-width: 0;
}

.brand img {
    width: 122px;
    height: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 7px;
}

.main-nav a {
    white-space: nowrap;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.menu-toggle {
    display: none;
}

/* =========================================================
   CONTENT + SIDEBAR
   ========================================================= */

.content-layout,
.blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: start;
}

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

.sidebar {
    position: sticky;
    top: 92px;
    align-self: start;
    height: max-content;
    min-width: 0;
}

.sidebar-box {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sidebar-list {
    min-width: 0;
}

.sidebar-list a {
    overflow-wrap: anywhere;
}

/* =========================================================
   GENERAL RESPONSIVE SAFETY
   ========================================================= */

.hero h1,
.page-banner h1,
.section h2,
.section h3,
.article-content h2,
.article-content h3,
.post-card h2 {
    overflow-wrap: anywhere;
}

.article-content,
.article-content p,
.article-content li {
    overflow-wrap: anywhere;
}

.article-content pre,
.article-content code {
    max-width: 100%;
    overflow-x: auto;
}

.info-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.info-table {
    width: 100%;
}

.cards,
.feature-grid,
.posts {
    min-width: 0;
}

.card,
.feature-card,
.post-card {
    min-width: 0;
}

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

@media (max-width: 1050px) {

    .wrap {
        width: min(100% - 28px, 1000px);
    }

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

    .brand img {
        width: 108px;
    }

    .main-nav {
        gap: 4px;
    }

    .main-nav a {
        padding: 6px 8px;
        font-size: 10px;
    }

    .header-actions .btn {
        padding: 8px 10px;
        font-size: 10px;
    }

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

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

    .content-layout,
    .blog-grid {
        grid-template-columns: minmax(0, 1fr) 270px;
        gap: 24px;
    }

    .page-banner-inner {
        gap: 24px;
    }

    .split {
        gap: 24px;
    }

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

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

@media (max-width: 900px) {

    .site-header {
        position: sticky;
        top: 0;
        z-index: 9990;
    }

    .header-inner {
        min-height: 64px;
        position: relative;
        gap: 10px;
    }

    .brand {
        flex: 0 0 auto;
    }

    .brand img {
        width: 104px;
        height: auto;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 40px;
        margin-left: auto;
        padding: 0;
        cursor: pointer;
        background: transparent;
        color: #fff;
        border: 1px solid #555;
        border-radius: 5px;
    }

    .header-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 5px;
    }

    .header-actions .btn {
        padding: 8px 10px;
        font-size: 10px;
        white-space: nowrap;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 14px;
        background: #050505;
        border-top: 1px solid #262626;
        border-bottom: 1px solid #262626;
        box-shadow: 0 12px 25px rgba(0,0,0,.35);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 7px;
    }

    /* Supports both the supplied JS and the original theme JS */
    .main-nav.mobile-open,
    .main-nav.open {
        display: flex;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 11px 12px;
        text-align: left;
        font-size: 12px;
        white-space: normal;
    }

    /* All two-column layouts become one column */
    .content-layout,
    .blog-grid,
    .page-banner-inner,
    .split {
        grid-template-columns: 1fr;
    }

    .content-layout,
    .blog-grid {
        gap: 28px;
    }

    /* IMPORTANT: sidebar is NOT sticky on mobile */
    .sidebar {
        position: static !important;
        top: auto !important;
        align-self: auto !important;
        width: 100%;
        height: auto;
    }

    .sidebar-box {
        width: 100%;
    }

    .page-banner-inner {
        gap: 20px;
    }

    .split.reverse > div:first-child {
        order: initial;
    }

    .banner-image {
        order: initial;
    }

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

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

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

    .hero {
        padding: 28px 0 24px;
    }

    .hero h1 {
        font-size: clamp(27px, 7vw, 38px);
    }

    .page-banner {
        padding: 28px 0 24px;
    }

    .page-banner h1 {
        font-size: clamp(28px, 7vw, 40px);
    }

    .section {
        padding: 32px 0;
    }

    .section h2 {
        font-size: 24px;
    }

    .single-post img.featured,
    .post-card img,
    .card img,
    .hero-media img,
    .banner-image img,
    .split-media img {
        width: 100%;
        height: auto;
    }

    .info-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

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

@media (max-width: 700px) {

    .wrap {
        width: calc(100% - 28px);
        max-width: none;
    }

    body {
        font-size: 15px;
        line-height: 1.65;
    }

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

    .brand img {
        width: 100px;
    }

    .header-actions .btn {
        padding: 7px 9px;
        font-size: 9px;
    }

    .menu-toggle {
        flex-basis: 40px;
        width: 40px;
        height: 38px;
    }

    .main-nav {
        max-height: calc(100vh - 62px);
    }

    .feature-grid,
    .cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card {
        padding: 17px 15px;
    }

    .card-body,
    .post-card-body {
        padding: 15px;
    }

    .split {
        gap: 22px;
    }

    .page-banner-inner {
        gap: 18px;
    }

    .article-content h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-top: 30px;
    }

    .article-content h3 {
        font-size: 18px;
    }

    .article-content ul,
    .article-content ol {
        padding-left: 20px;
    }

    .sidebar-box {
        padding: 16px;
        margin-bottom: 15px;
    }

    .breadcrumb .wrap {
        width: calc(100% - 28px);
        font-size: 12px;
    }

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

    .footer-links {
        grid-template-columns: 1fr;
    }

    /* Keep floating controls inside the viewport */
    .sticky-cta {
        bottom: 12px !important;
        max-width: calc(100vw - 90px) !important;
        min-width: 140px;
    }

    .whatsapp {
        right: 12px !important;
        bottom: 12px !important;
        width: 50px;
        height: 50px;
    }
}

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

@media (max-width: 560px) {

    .wrap {
        width: calc(100% - 22px);
    }

    .header-inner {
        min-height: 60px;
        gap: 7px;
    }

    .brand img {
        width: 92px;
    }

    .header-actions {
        gap: 4px;
    }

    .header-actions .btn {
        padding: 7px 8px;
        font-size: 8px;
    }

    .menu-toggle {
        flex-basis: 38px;
        width: 38px;
        height: 37px;
    }

    .main-nav {
        max-height: calc(100vh - 60px);
        padding: 10px 11px;
    }

    .main-nav a {
        padding: 10px 11px;
        font-size: 11px;
    }

    .hero {
        padding: 24px 0 20px;
    }

    .hero h1,
    .page-banner h1 {
        font-size: 28px;
    }

    .hero p,
    .page-banner p {
        font-size: 13px;
    }

    .section {
        padding: 27px 0;
    }

    .section h2 {
        font-size: 21px;
    }

    .page-banner {
        padding: 24px 0 20px;
    }

    .article-content h2 {
        font-size: 20px;
    }

    .article-content h3 {
        font-size: 17px;
    }

    .sidebar-box {
        padding: 14px;
    }

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

    .sticky-cta {
        max-width: calc(100vw - 82px) !important;
        min-width: 135px;
        padding: 10px 15px !important;
        font-size: 12px !important;
    }

    .whatsapp {
        right: 10px !important;
        bottom: 10px !important;
        width: 47px;
        height: 47px;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    a {
        overflow-wrap: anywhere;
    }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .wrap {
        width: calc(100% - 18px);
    }

    .header-inner {
        gap: 5px;
    }

    .brand img {
        width: 84px;
    }

    .header-actions .btn {
        padding: 6px 6px;
        font-size: 8px;
    }

    .menu-toggle {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .hero h1,
    .page-banner h1 {
        font-size: 25px;
    }

    .sticky-cta {
        max-width: calc(100vw - 78px) !important;
        min-width: 125px;
        padding: 9px 13px !important;
        font-size: 11px !important;
    }

    .whatsapp {
        right: 9px !important;
        bottom: 9px !important;
        width: 44px;
        height: 44px;
    }
}

/* =========================================================
   FAIRPLAY LIGHTWEIGHT — CONSOLIDATED RESPONSIVE CSS
   Desktop: sticky sidebar
   Tablet/mobile: normal-flow sidebar
   No duplicate responsive rules
   ========================================================= */

/* Global sizing and overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

.wrap {
    width: min(calc(100% - 32px), var(--max));
    margin-left: auto;
    margin-right: auto;
}

/* Main desktop content layout */
.content-layout,
.blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 34px;
}

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

.content-layout > *,
.blog-grid > * {
    min-width: 0;
}

/* Desktop sidebar — intentionally sticky */
.sidebar {
    position: sticky;
    top: 94px;
    align-self: start;
    height: max-content;
    min-width: 0;
}

/* Tablet */
@media (max-width: 1050px) {
    .header-inner {
        min-height: 68px;
        gap: 14px;
    }

    .brand {
        flex: 0 0 auto;
    }

    .brand img {
        width: 110px;
    }

    .main-nav {
        gap: 5px;
    }

    .main-nav a {
        padding: 7px 9px;
        font-size: 11px;
    }

    .header-actions {
        flex: 0 0 auto;
    }

    .header-actions .btn {
        padding: 9px 12px;
        font-size: 11px;
    }

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

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

    .content-layout,
    .blog-grid {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 24px;
    }

    .page-banner-inner {
        gap: 24px;
    }

    .split {
        gap: 24px;
    }

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

/* Mobile header */
@media (max-width: 800px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 9990;
    }

    .header-inner {
        min-height: 64px;
        position: relative;
        gap: 12px;
    }

    .brand img {
        width: 108px;
        height: auto;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        padding: 12px 14px;
        background: #050505;
        border-top: 1px solid #262626;
        border-bottom: 1px solid #262626;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 7px;
        box-shadow: 0 12px 25px rgba(0,0,0,.35);
    }

    .main-nav.mobile-open {
        display: flex;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 11px 12px;
        text-align: left;
        font-size: 12px;
    }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin-left: auto;
        cursor: pointer;
    }

    .header-actions {
        gap: 6px;
    }

    .header-actions .btn {
        padding: 8px 11px;
        font-size: 10px;
    }

    /* Sidebar is NOT sticky on mobile/tablet */
    .sidebar {
        position: static !important;
        top: auto !important;
        align-self: auto;
        width: 100%;
        height: auto;
    }
}

/* General mobile */
@media (max-width: 700px) {
    body {
        font-size: 15px;
        line-height: 1.65;
    }

    .wrap {
        width: calc(100% - 28px);
        max-width: none;
    }

    .section {
        padding: 30px 0;
    }

    .section h2 {
        font-size: 23px;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .section h3 {
        font-size: 18px;
    }

    .hero {
        padding: 28px 0 24px;
    }

    .hero h1 {
        font-size: clamp(26px, 8vw, 36px);
        line-height: 1.15;
        margin-bottom: 12px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-media {
        margin-top: 18px;
    }

    .hero-media img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
        border-radius: 8px;
    }

    .feature-grid,
    .cards,
    .posts {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        gap: 12px;
    }

    .feature-card {
        padding: 18px 15px;
    }

    .cards {
        gap: 14px;
    }

    .card img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .card-body,
    .post-card-body {
        padding: 15px;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .split.reverse > div:first-child {
        order: initial;
    }

    .split-media,
    .split-media img {
        width: 100%;
    }

    .split-media img {
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .page-banner {
        padding: 26px 0 24px;
    }

    .page-banner-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .page-banner h1 {
        font-size: clamp(27px, 8vw, 38px);
        line-height: 1.15;
    }

    .page-banner p {
        font-size: 14px;
    }

    .banner-image {
        width: 100%;
    }

    .banner-image img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .banner-image img.portrait {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    /* One-column content on mobile */
    .content-layout,
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .article-content {
        width: 100%;
        min-width: 0;
    }

    .article-content h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-top: 30px;
    }

    .article-content h3 {
        font-size: 18px;
    }

    .article-content p {
        font-size: 15px;
    }

    .article-content ul,
    .article-content ol {
        padding-left: 20px;
    }

    /* Sidebar remains normal flow on mobile */
    .sidebar {
        position: static !important;
        top: auto !important;
        width: 100%;
        height: auto;
    }

    .sidebar-box {
        width: 100%;
        padding: 16px;
        margin-bottom: 15px;
    }

    .post-card img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .post-card h2 {
        font-size: 19px;
        line-height: 1.35;
    }

    .single-post img.featured {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .breadcrumb {
        padding: 9px 0;
    }

    .breadcrumb .wrap {
        width: calc(100% - 28px);
        font-size: 12px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .info-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .info-table th,
    .info-table td {
        font-size: 13px;
        padding: 8px;
    }

    .btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    a {
        overflow-wrap: anywhere;
    }

    /* Mobile sticky CTA / WhatsApp */
    .sticky-cta {
        left: 50% !important;
        bottom: 14px !important;
        max-width: calc(100vw - 92px) !important;
    }

    .whatsapp {
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .wrap {
        width: calc(100% - 24px);
    }

    .header-inner {
        min-height: 60px;
        gap: 8px;
    }

    .brand img {
        width: 96px;
    }

    .header-actions {
        gap: 5px;
    }

    .header-actions .btn {
        padding: 7px 9px;
        font-size: 9px;
    }

    .menu-toggle {
        min-width: 38px;
        min-height: 38px;
        padding: 7px 8px;
    }

    .hero {
        padding: 24px 0 20px;
    }

    .hero h1 {
        font-size: 27px;
    }

    .hero p {
        font-size: 13px;
    }

    .section {
        padding: 26px 0;
    }

    .section h2 {
        font-size: 21px;
    }

    .page-banner {
        padding: 23px 0 20px;
    }

    .page-banner h1 {
        font-size: 27px;
    }

    .page-banner p {
        font-size: 13px;
    }

    .feature-card {
        padding: 16px 13px;
    }

    .card-body,
    .post-card-body {
        padding: 14px;
    }

    .article-content h2 {
        font-size: 20px;
    }

    .article-content h3 {
        font-size: 17px;
    }

    .sidebar-box {
        padding: 14px;
    }

    .sticky-cta {
        bottom: 12px !important;
        max-width: calc(100vw - 82px) !important;
    }

    .whatsapp {
        right: 10px !important;
        bottom: 10px !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .wrap {
        width: calc(100% - 20px);
    }

    .brand img {
        width: 88px;
    }

    .header-actions .btn {
        padding: 6px 7px;
        font-size: 8px;
    }

    .menu-toggle {
        min-width: 36px;
    }

    .hero h1,
    .page-banner h1 {
        font-size: 25px;
    }

    .section h2 {
        font-size: 20px;
    }

    .sticky-cta {
        min-width: 140px !important;
        max-width: calc(100vw - 90px) !important;
        padding: 10px 15px !important;
        font-size: 12px !important;
    }

    .whatsapp {
        right: 10px !important;
        bottom: 10px !important;
        width: 46px !important;
        height: 46px !important;
    }
}