/*
Theme Name: Newsup Child
Description: Child theme for Newsup
Author: Your Name
Template: newsup
Version: 1.0
*/
@import url("../newsup/style.css");

/* Custom CSS for category image table */
.category-header-table {
    border: none;
    margin: 15px 0;
}
.category-header-table td {
    vertical-align: top;
    padding: 10px;
}
.category-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
@media (max-width: 767px) {
    .category-header-table tr {
        display: flex;
        flex-direction: column;
    }
    .category-header-table td {
        width: 100% !important;
        text-align: center;
    }
}
.category-image {
    width: 200px; /* Adjust this value as needed, e.g., 150px for smaller, 250px for larger */
    height: auto;
    border-radius: 8px; /* Optional */
}
.archive-description {
    font-size: 20px; /* Adjust this value to change the font size (e.g., 16px, 1em, 1.2rem) */
    line-height: 1.6; /* Optional: Improves readability; adjust as needed */
}
.archive-description p {
    margin: 0; /* Optional: Removes default margins for tighter spacing */
}
.archive-description a {
    font-size: inherit; /* Ensures links match the description font size */
}

/* === RESPONSIVE YOUTUBE EMBEDS - Consolidated & Strengthened Fix (Feb 2026) === */
/* Targets raw imported iframes with inline width/height (common from WPeMatico) */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtu.be"],
.page-content-single iframe[src*="youtube"],
.single-class iframe[src*="youtube"],
.mg-blog-post-box iframe[src*="youtube"],
.mg-blog-post-box iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
    margin: 1.0em auto !important;
}

/* Force override of inline width/height attributes */
iframe[width][height][src*="youtube"] {
    width: 100% !important;
    height: auto !important;
}

/* Parent wrapper fix (usually <p> from imports) */
.entry-content p > iframe[src*="youtube"],
.page-content-single p > iframe[src*="youtube"],
.mg-blog-post-box p > iframe {
    display: block;
    width: 100%;
}

/* Strong padding-bottom 16:9 fallback (works even when aspect-ratio is ignored) */
.entry-content p:has(> iframe[src*="youtube"]),
.page-content-single p:has(> iframe[src*="youtube"]),
.mg-blog-post-box p:has(> iframe) {
    position: relative !important;
    padding-bottom: 56.25% !important; /* 9/16 = 56.25% for 16:9 */
    height: 0 !important;
    overflow: hidden !important;
    margin: 1.5em auto !important;
	max-width: 96% !important;
}

.entry-content p:has(> iframe[src*="youtube"]) iframe,
.page-content-single p:has(> iframe[src*="youtube"]) iframe,
.mg-blog-post-box p:has(> iframe) iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Extra override for any theme-forced sizes */
.mg-blog-post-box iframe,
.article.page-content-single iframe,
.single.post iframe {
    max-width: 100% !important;
    height: auto !important;
}
/* Push to fuller width if needed - override any container limits */
.mg-blog-post-box,
.page-content-single.small.single,
.entry-content,
.article.page-content-single {
    max-width: 100% !important;  /* Remove any artificial caps from theme */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Lifted video effect – sharp corners (no radius), strong shadow below + right */
.entry-content p:has(> iframe[src*="youtube"]),
.page-content-single p:has(> iframe[src*="youtube"]),
.mg-blog-post-box p:has(> iframe) {
    box-shadow: 
        0 12px 30px rgba(0,0,0,0.28),     /* strong downward lift */
        10px 10px 20px rgba(0,0,0,0.20),  /* emphasized right + bottom-right */
        inset 0 -6px 10px rgba(0,0,0,0.12); /* inner depth/contrast */
    border-radius: 0 !important;           /* ← sharp corners: remove any rounding */
    overflow: hidden;
}
.owl-carousel .owl-item {
    transition: all 0.5s ease;
}
.dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px 0;
    margin-top: 0;
}

.dropdown-menu::-webkit-scrollbar {
    width: 12px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.dropdown-menu li a {
    padding: 8px 20px;
    font-size: 12px;
    white-space: nowrap;
}
.dropdown-menu {
    min-width: 300px; /* Set your desired wider minimum width here - e.g., 300px, 400px, 450px */
    width: auto;
    max-width: 500px; /* Optional cap to prevent excessive spread on very long items */
}

.dropdown-menu li a {
    white-space: nowrap; /* Keeps category names on one line for readability */
}