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

body {
    background-color: #f8f9fa;
    color: var(--dark-charcoal);
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    padding-top: 180px !important;
    overflow-x: hidden;
    /* Prevent horizontal scroll on body */
}

/* Hide Unwanted Header Sections */
.mg-head-detail,
.mg-nav-widget-area-back,
.clearfix,
.mg-headwidget .clearfix {
    display: none !important;
}

header.mg-headwidget {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* FORCING Dark Background on all menu containers */
.mg-menu-full,
.mg-menu-full nav,
.navbar-wp,
.navbar-expand-lg,
.mg-nav-widget-area-back {
    background: var(--dark-charcoal) !important;
    background-color: var(--dark-charcoal) !important;
}

/* --- Desktop Layout (992px and up) --- */
@media (min-width: 992px) {
    .mg-menu-full {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 100%;
        z-index: 9999 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar-wp {
        border-bottom: 4px solid var(--primary-red) !important;
        height: 180px !important;
        display: flex !important;
        align-items: center !important;
        width: 100%;
    }

    .navbar-collapse {
        flex-grow: 1;
        display: flex !important;
        align-items: center !important;
    }

    .navbar-nav {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap;
    }

    .homebtn {
        background: #fff url('http://160.16.204.22/wp-content/uploads/2026/02/re_japan_tsushin_logo_premium_1771067650715.jpg') no-repeat center center !important;
        background-size: contain !important;
        width: 250px !important;
        height: 150px !important;
        text-indent: -9999px !important;
        margin-right: 40px !important;
        display: block !important;
        padding: 0 !important;
        border-radius: 8px !important;
        flex-shrink: 0;
    }

    .single .container {
        max-width: 1200px !important;
        width: 1200px !important;
    }
}

/* Common Nav Styling */
.navbar-wp .nav-link,
.navbar-wp .navbar-nav>li>a {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    padding: 15px 25px !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.navbar-wp .nav-link:hover,
.navbar-wp .navbar-nav>li>a:hover,
.navbar-wp li.active>a {
    color: var(--primary-red) !important;
}

.homebtn span,
.mobilehomebtn span {
    display: none !important;
}

/* --- Mobile Layout (Up to 991px) --- */
@media (max-width: 991px) {
    body {
        padding-top: 100px !important;
    }

    .mg-menu-full {
        position: fixed !important;
        top: 0;
        width: 100%;
        z-index: 9999;
    }

    .navbar-wp {
        padding: 10px 15px !important;
    }

    /* FORCE HIDDEN BY DEFAULT ON MOBILE */
    .navbar-collapse,
    #navbar-wp {
        display: none !important;
        background: var(--dark-charcoal) !important;
        padding: 20px 0;
        width: 100%;
    }

    /* SHOW ONLY WHEN TOGGLED (Bootstrap adds 'show' or 'in' class) */
    .navbar-collapse.show,
    .navbar-collapse.in,
    #navbar-wp.show,
    #navbar-wp.in,
    #navbar-wp.collapse.in,
    #navbar-wp.collapse.show {
        display: block !important;
    }

    .navbar-nav {
        margin: 0 !important;
        float: none !important;
    }

    .navbar-nav li a {
        padding: 15px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff !important;
        display: block;
    }

    .mobilehomebtn {
        background: #fff url('http://160.16.204.22/wp-content/uploads/2026/02/re_japan_tsushin_logo_premium_1771067650715.jpg') no-repeat center center !important;
        background-size: contain !important;
        width: 150px !important;
        height: 80px !important;
        display: block !important;
        margin: 0 auto 10px !important;
        border-radius: 4px;
    }

    .navbar-toggler {
        border-color: #fff !important;
        margin: 10px auto !important;
        display: block !important;
        padding: 10px;
    }

    .navbar-toggler-icon {
        filter: invert(1);
    }
}

/* Widen Content for Single Posts */
.single #content .col-md-8,
.single .mg-has-sidebar .mg-posts-sec-inner {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.single aside#secondary {
    display: none !important;
}

/* Centered & Resized Featured Image */
.single-featured-image {
    display: block !important;
    margin: 40px auto !important;
    max-width: 100% !important;
    /* Changed from 800px to 100% for mobile */
    width: auto !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Article Styling */
.article-container {
    background: #fff;
    padding: 60px 80px !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    line-height: 2.0 !important;
    font-size: 18px !important;
    word-break: break-word;
    /* Prevent long words from breaking layout */
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .article-container {
        padding: 30px 20px !important;
    }
}

.article-container h2 {
    font-size: 1.8em;
    color: #003366;
    background: #f0f4f8;
    padding: 15px 25px;
    border-left: 6px solid var(--primary-red);
    margin-top: 60px;
    margin-bottom: 30px;
}

.article-container h3 {
    font-size: 1.5em;
    color: #333;
    margin-top: 40px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.article-container p {
    margin-bottom: 25px;
}

/* Responsive Table Wrapper */
.article-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    display: block;
    /* Required for horizontal overflow-x */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.article-container th {
    background: #003366;
    color: #fff;
    padding: 15px;
}

.article-container td {
    border: 1px solid #ddd;
    padding: 15px;
}

/* Side-by-Side Layout */
.media-text-wrap {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin: 50px 0;
}

.media-text-content {
    flex: 1;
    min-width: 300px;
    /* Suggest wrap earlier */
}

.media-text-graphic {
    flex: 0 1 400px;
    /* Allow shrinking but target 400px */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.media-text-graphic img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.media-text-graphic .img-caption {
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .media-text-wrap {
        flex-direction: column;
    }

    .media-text-graphic {
        max-width: 100%;
        order: -1;
        margin-left: 0;
        margin-bottom: 30px;
    }
}

/* Hide default theme featured image to avoid duplication with manual insertion */
.mg-blog-post-box>img.wp-post-image,
.mg-blog-post-box>.single-featured-image {
    display: none !important;
}

/* --- Knowledge Box & Knowledge Grid (Article Specific) --- */
.knowledge-box {
    background-color: #f8f9fa;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 30px;
    margin: 40px 0;
    position: relative;
}

.knowledge-box h3 {
    margin-top: 0 !important;
    background: #333 !important;
    color: #fff !important;
    display: inline-block !important;
    padding: 5px 15px !important;
    font-size: 1.2rem !important;
    transform: translateY(-45px) !important;
    border-radius: 4px !important;
    border: none !important;
}

.knowledge-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
}

.knowledge-item h4 {
    color: #d90429 !important;
    font-weight: bold !important;
    border-bottom: 2px solid #ddd !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .article-container {
        padding: 30px 15px !important;
        /* Slightly more compact for small mobile */
    }

    .knowledge-box {
        padding: 25px 15px !important;
        margin: 50px 0 30px !important;
    }

    .knowledge-box h3 {
        transform: translateY(-40px) !important;
        font-size: 1.1rem !important;
        padding: 5px 10px !important;
    }

    .knowledge-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.highlight-box {
    background: #e3f2fd;
    border-left: 5px solid #2196f3;
    padding: 20px;
    margin: 30px 0;
    font-weight: bold;
    color: #0d47a1;
}