/**
 * GOODMUNITY - Blue Theme CSS v3.0
 *
 * Features:
 * - BLUE color scheme
 * - Logo IMAGE in header
 * - "You missed" section styled to match footer
 * - Long MEGA MENU footer (5 columns)
 * - Hides ALL old theme elements
 *
 * INSTRUCTIONS:
 * 1. Go to WordPress Admin → Appearance → Customize → Additional CSS
 * 2. DELETE ALL existing CSS
 * 3. Paste this ENTIRE file
 * 4. Click "Publish"
 */

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ============================================
   BLUE THEME CSS VARIABLES
   ============================================ */
:root {
    /* Primary Blue Colors */
    --gm-primary: #2563EB;
    --gm-primary-dark: #1D4ED8;
    --gm-primary-light: #3B82F6;

    /* Dark Blues for backgrounds */
    --gm-secondary: #0F172A;
    --gm-accent: #1E293B;
    --gm-dark: #020617;

    /* Light colors */
    --gm-white: #FFFFFF;
    --gm-light-gray: #F1F5F9;
    --gm-border: #E2E8F0;

    /* Text colors */
    --gm-text: #334155;
    --gm-text-light: #94A3B8;
    --gm-text-muted: rgba(255, 255, 255, 0.6);
}

/* ============================================
   HIDE ALL OLD THEME ELEMENTS - CRITICAL
   ============================================ */

/* Hide OLD Newsup/NewsTwenty theme header */
header.flavor-flavor-main-head,
.flavor-flavor-header,
.bs-pinning-wrapper,
.mg-headertwo-area,
.mg-headerthree-area,
.mg-header-wrapper,
.mg-main-header,
.mg-headermain-area,
.mg-nav-widget-area,
.flavor-flavor-nav-area,
.bs-header,
.flavor-flavor-top-header,
.flavor-flavor-wrapper-header,
.flavor-flavor-menu-area,
#flavor-flavor-nav,
header.flavor-flavor,
.mg-top-area,
.flavor-flavor-topbar,
.flavor-flavor-top-bar,
.flavor-flavor-breaking-news,
.flavor-flavor-top-menu,
.flavor-flavor-bottom-menu {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Hide ALL old footer elements */
.flavor-flavor-footer,
.mg-footer-widget-area,
.mg-footer-area,
.mg-copyright-area,
.flavor-flavor-copyright,
footer.flavor-flavor,
.flavor-flavor-site-footer,
.flavor-flavor-footer-wrapper,
#flavor-flavor-footer,
.bs-footer,
.site-info,
.flavor-flavor-site-info {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Hide theme references - "Theme: Newsup by Themeansar" */
a[href*="themeansar.com"],
a[href*="themeansar"],
*[class*="themeansar"] {
    display: none !important;
}

/* Hide "Theme: NewsTwenty. Proudly powered by WordPress" */
a[href*="wordpress.org"],
*[class*="theme-info"],
*[class*="site-info"] {
    display: none !important;
}

/* Hide the ENTIRE old footer contentinfo that has Themeansar */
body > footer:has(a[href*="themeansar"]),
body > contentinfo:has(a[href*="themeansar"]),
footer:has(.site-info),
contentinfo:has(a[href*="wordpress.org"]) {
    display: none !important;
}

/* Force hide specific text patterns */
*:has(> a[href*="themeansar"]):not(.gm-footer):not(.gm-footer-column) {
    display: none !important;
}

/* Hide scroll back to top old link */
body > a[href="https://goodmunity.com/"]:last-of-type {
    display: none !important;
}

/* Hide the "Scroll back to top" link */
a[href="https://goodmunity.com/"]:last-child:not(.gm-logo):not(.gm-footer-column a) {
    display: none !important;
}

/* ============================================
   HIDE OLD THEME FOOTER LOGO - CRITICAL
   ============================================ */

/* Hide ANY logo in old theme footer areas */
footer:not(.gm-footer) img,
footer:not(.gm-footer) .custom-logo,
footer:not(.gm-footer) .site-logo,
footer:not(.gm-footer) .footer-logo,
footer:not(.gm-footer) [class*="logo"],
.mg-footer-widget-area img,
.mg-footer-area img,
.flavor-flavor-footer img,
.site-info img,
.mg-copyright-area img,
#flavor-flavor-footer img {
    display: none !important;
}

/* Hide the entire old theme footer section that contains logo */
footer:not(.gm-footer):not(.gm-mega-footer) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* More aggressive footer logo hiding */
body > footer:not(.gm-footer) {
    display: none !important;
}

/* Hide footer widgets area with logo */
.footer-widget-area,
.footer-widgets,
.mg-footer-widget-sec,
.flavor-flavor-footer-widget,
.flavor-flavor-footer-top {
    display: none !important;
}

/* Hide site branding in footer */
footer .site-branding,
footer .custom-logo-link,
footer .site-title,
footer .site-description {
    display: none !important;
}

/* ============================================
   TRENDING TOP BAR - BLUE THEME
   ============================================ */
.gm-topbar {
    background: linear-gradient(135deg, var(--gm-secondary) 0%, var(--gm-accent) 100%) !important;
    padding: 10px 20px !important;
    position: relative !important;
    z-index: 99998 !important;
}

.gm-topbar-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.gm-trending-label {
    background: var(--gm-primary) !important;
    color: white !important;
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-trending-ticker {
    flex: 1 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
}

.gm-trending-ticker-inner {
    display: flex !important;
    animation: gm-ticker-scroll 45s linear infinite !important;
}

.gm-trending-ticker-inner:hover {
    animation-play-state: paused !important;
}

.gm-trending-ticker a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 0 35px !important;
    white-space: nowrap !important;
    transition: color 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-trending-ticker a:hover {
    color: var(--gm-primary-light) !important;
}

.gm-topbar-social {
    display: flex !important;
    gap: 5px !important;
    margin-left: 20px !important;
}

.gm-topbar-social a {
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gm-topbar-social a:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

@keyframes gm-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================
   MAIN HEADER - BLUE THEME
   ============================================ */
.gm-header,
header.gm-header,
#gm-header {
    background: var(--gm-white) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    transition: all 0.3s ease !important;
}

.gm-header.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

.gm-header-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
}

/* Logo Image */
.gm-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.gm-logo-img {
    max-height: 45px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Navigation */
.gm-nav {
    display: flex !important;
    align-items: center !important;
}

.gm-nav-list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
}

.gm-nav-item {
    position: relative !important;
}

.gm-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 10px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gm-secondary) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.gm-nav-link svg {
    opacity: 0.5 !important;
    transition: transform 0.3s ease !important;
}

.gm-nav-item:hover .gm-nav-link svg {
    transform: rotate(180deg) !important;
}

.gm-nav-link:hover {
    color: var(--gm-primary) !important;
    background: rgba(37, 99, 235, 0.06) !important;
}

/* Mega Menu - Blue Theme */
.gm-mega-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
    padding: 25px !important;
    width: auto !important;
    min-width: 580px !important;
    max-width: 720px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 100000 !important;
    pointer-events: none !important;
    border-top: 3px solid var(--gm-primary) !important;
    box-sizing: border-box !important;
}

.gm-nav-item.has-mega:hover .gm-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* Position adjustments for edge menus */
.gm-nav-item.has-mega:first-child .gm-mega-menu {
    left: 0 !important;
    transform: translateX(0) translateY(10px) !important;
}

.gm-nav-item.has-mega:first-child:hover .gm-mega-menu {
    transform: translateX(0) translateY(0) !important;
}

.gm-nav-item.has-mega:last-child .gm-mega-menu,
.gm-nav-item.has-mega:nth-last-child(2) .gm-mega-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(10px) !important;
}

.gm-nav-item.has-mega:last-child:hover .gm-mega-menu,
.gm-nav-item.has-mega:nth-last-child(2):hover .gm-mega-menu {
    transform: translateX(0) translateY(0) !important;
}

.gm-mega-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 10px solid transparent !important;
    border-bottom-color: var(--gm-primary) !important;
}

/* Arrow position for first menu */
.gm-nav-item.has-mega:first-child .gm-mega-menu::before {
    left: 40px !important;
    transform: translateX(0) !important;
}

/* Arrow position for last menus */
.gm-nav-item.has-mega:last-child .gm-mega-menu::before,
.gm-nav-item.has-mega:nth-last-child(2) .gm-mega-menu::before {
    left: auto !important;
    right: 40px !important;
    transform: translateX(0) !important;
}

.gm-mega-menu-grid {
    display: grid !important;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(160px, 1.2fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

.gm-mega-menu-column h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #2563EB !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.gm-mega-menu-column ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gm-mega-menu-column li {
    margin-bottom: 6px !important;
}

.gm-mega-menu-column a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    padding: 5px 0 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.gm-mega-menu-column a:hover {
    color: #2563EB !important;
    transform: translateX(5px) !important;
    background: transparent !important;
}

/* Consistent link colors in mega menu */
.gm-mega-menu-column ul li a {
    color: #334155 !important;
}

.gm-mega-menu-column ul li a:hover {
    color: #2563EB !important;
}

/* Featured Post in Mega Menu */
.gm-mega-featured {
    background: #F1F5F9 !important;
    padding: 15px !important;
    border-radius: 10px !important;
    margin: -5px !important;
    min-width: 160px !important;
    max-width: 200px !important;
}

.gm-mega-featured h4 {
    color: #2563EB !important;
    border-bottom-color: #E2E8F0 !important;
}

.gm-featured-label {
    display: inline-block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #2563EB !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
    background: transparent !important;
}

.gm-featured-post {
    display: block !important;
    text-decoration: none !important;
}

.gm-featured-post img {
    width: 100% !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
}

.gm-featured-post h5 {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #0F172A !important;
    transition: color 0.3s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    background: transparent !important;
}

.gm-featured-post:hover h5 {
    color: #2563EB !important;
}

/* Ensure consistent styling for featured post link */
.gm-featured-post {
    display: block !important;
    text-decoration: none !important;
    background: transparent !important;
}

.gm-featured-post:hover {
    background: transparent !important;
}

/* Header Right Section */
.gm-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.gm-search-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--gm-light-gray) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    color: var(--gm-secondary) !important;
    padding: 0 !important;
}

.gm-search-toggle svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--gm-secondary) !important;
    stroke-width: 2 !important;
    fill: none !important;
    display: block !important;
}

.gm-search-toggle:hover {
    background: var(--gm-primary) !important;
    color: white !important;
}

.gm-search-toggle:hover svg {
    stroke: white !important;
}

.gm-subscribe-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 22px !important;
    background: linear-gradient(135deg, var(--gm-primary) 0%, var(--gm-primary-dark) 100%) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
}

.gm-subscribe-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
    color: white !important;
}

/* Mobile Menu Toggle */
.gm-mobile-toggle {
    display: none !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--gm-light-gray) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

.gm-mobile-toggle span {
    width: 22px !important;
    height: 2px !important;
    background: var(--gm-secondary) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

/* ============================================
   SEARCH OVERLAY - BLUE THEME
   ============================================ */
.gm-search-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.97) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(10px) !important;
}

.gm-search-overlay.active {
    display: flex !important;
}

.gm-search-overlay-close {
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    width: 50px !important;
    height: 50px !important;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 28px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.gm-search-overlay-close:hover {
    border-color: var(--gm-primary-light) !important;
    color: var(--gm-primary-light) !important;
    transform: rotate(90deg) !important;
}

.gm-search-overlay-inner {
    width: 100% !important;
    max-width: 700px !important;
    padding: 0 20px !important;
    text-align: center !important;
}

.gm-search-overlay-inner h3 {
    color: white !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 30px !important;
}

.gm-search-form {
    display: flex !important;
    position: relative !important;
}

.gm-search-input {
    width: 100% !important;
    padding: 22px 70px 22px 25px !important;
    font-size: 18px !important;
    background: white !important;
    border: none !important;
    border-radius: 14px !important;
    outline: none !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-search-submit {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--gm-primary) !important;
    border: none !important;
    border-radius: 10px !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease !important;
}

.gm-search-submit:hover {
    background: var(--gm-primary-dark) !important;
}

.gm-search-suggestions {
    margin-top: 20px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
}

.gm-search-suggestions span {
    margin-right: 10px !important;
}

.gm-search-suggestions a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    padding: 5px 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    margin: 0 5px !important;
    transition: all 0.3s ease !important;
}

.gm-search-suggestions a:hover {
    background: var(--gm-primary) !important;
    color: white !important;
}

/* ============================================
   "YOU MISSED" SECTION - STYLED TO MATCH FOOTER
   ============================================ */

/* Target the "You missed" section - typically the last content section before footer */
.flavor-flavor-you-missed,
.mg-sec-missed,
.you-missed-section,
section.flavor-flavor:last-of-type,
.mg-posts-sec:last-of-type,
.flavor-flavor-you-missed-sec {
    background: var(--gm-secondary) !important;
    padding: 50px 0 !important;
    margin-bottom: 0 !important;
}

/* "You missed" section container */
.flavor-flavor-you-missed .container,
.mg-sec-missed .container,
section.flavor-flavor:last-of-type .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* "You missed" heading */
.flavor-flavor-you-missed h2,
.mg-sec-missed h2,
.you-missed-section h2,
section.flavor-flavor:last-of-type > h2,
.mg-posts-sec:last-of-type h2 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: white !important;
    margin-bottom: 30px !important;
    padding-bottom: 15px !important;
    border-bottom: 3px solid var(--gm-primary) !important;
    display: inline-block !important;
}

/* Article cards in "You missed" section */
.flavor-flavor-you-missed article,
.mg-sec-missed article,
section.flavor-flavor:last-of-type article {
    background: var(--gm-accent) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.flavor-flavor-you-missed article:hover,
.mg-sec-missed article:hover,
section.flavor-flavor:last-of-type article:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
}

/* Article titles in "You missed" */
.flavor-flavor-you-missed article h3,
.flavor-flavor-you-missed article h4,
.mg-sec-missed article h3,
.mg-sec-missed article h4,
section.flavor-flavor:last-of-type article h3,
section.flavor-flavor:last-of-type article h4 {
    color: white !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
}

/* Article titles hover */
.flavor-flavor-you-missed article a:hover h3,
.flavor-flavor-you-missed article a:hover h4,
.mg-sec-missed article a:hover h3,
section.flavor-flavor:last-of-type article a:hover h3 {
    color: var(--gm-primary-light) !important;
}

/* Article meta in "You missed" */
.flavor-flavor-you-missed .mg-blog-meta,
.flavor-flavor-you-missed .entry-meta,
.mg-sec-missed .mg-blog-meta,
section.flavor-flavor:last-of-type .mg-blog-meta {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Grid layout for "You missed" articles */
.flavor-flavor-you-missed .row,
.mg-sec-missed .row,
section.flavor-flavor:last-of-type .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
}

@media (max-width: 1024px) {
    .flavor-flavor-you-missed .row,
    .mg-sec-missed .row,
    section.flavor-flavor:last-of-type .row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .flavor-flavor-you-missed .row,
    .mg-sec-missed .row,
    section.flavor-flavor:last-of-type .row {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   MEGA FOOTER - BLUE THEME (5 COLUMNS)
   ============================================ */
.gm-footer,
footer.gm-footer,
.gm-mega-footer {
    background: var(--gm-dark) !important;
    color: white !important;
    padding: 0 !important;
}

.gm-footer-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Footer Mega Grid - 5 Columns */
.gm-footer-mega-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 40px !important;
    padding: 60px 0 50px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.gm-footer-column h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 0 25px 0 !important;
    position: relative !important;
    padding-bottom: 12px !important;
}

.gm-footer-column h4::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 30px !important;
    height: 2px !important;
    background: var(--gm-primary) !important;
}

.gm-footer-column ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gm-footer-column li {
    margin-bottom: 12px !important;
}

.gm-footer-column a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-footer-column a:hover {
    color: white !important;
    padding-left: 5px !important;
}

/* Newsletter Column */
.gm-footer-newsletter p {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.6 !important;
    margin: 0 0 20px 0 !important;
}

.gm-newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.gm-newsletter-form input {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: white !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.gm-newsletter-form input:focus {
    border-color: var(--gm-primary) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.gm-newsletter-form button {
    width: 100% !important;
    padding: 14px !important;
    background: var(--gm-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-newsletter-form button:hover {
    background: var(--gm-primary-dark) !important;
    transform: translateY(-2px) !important;
}

.gm-newsletter-form button:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Newsletter Success/Error Messages */
.gm-newsletter-message {
    padding: 10px 15px !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    font-family: 'Inter', sans-serif !important;
    animation: gm-fade-in 0.3s ease !important;
}

.gm-newsletter-success {
    background: #10B981 !important;
    color: white !important;
}

.gm-newsletter-error {
    background: #EF4444 !important;
    color: white !important;
}

@keyframes gm-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer Social Icons */
.gm-footer-social {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.gm-footer-social a {
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
}

.gm-footer-social a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    transform: translateY(-3px) !important;
    padding-left: 0 !important;
}

/* Footer Bottom */
.gm-footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 25px 0 !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.gm-footer-copyright {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-footer-legal {
    display: flex !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
}

.gm-footer-legal a {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-footer-legal a:hover {
    color: white !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
    .gm-footer-mega-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .gm-footer-newsletter {
        grid-column: span 3 !important;
        max-width: 400px !important;
    }
}

@media (max-width: 1024px) {
    .gm-nav {
        display: none !important;
    }

    .gm-mobile-toggle {
        display: flex !important;
    }

    .gm-logo-img {
        max-height: 38px !important;
    }
}

@media (max-width: 768px) {
    .gm-topbar {
        display: none !important;
    }

    .gm-subscribe-btn {
        display: none !important;
    }

    .gm-logo-img {
        max-height: 32px !important;
    }

    .gm-footer-mega-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
        padding: 40px 0 30px !important;
    }

    .gm-footer-newsletter {
        grid-column: span 2 !important;
    }

    .gm-footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
    }

    .gm-footer-legal {
        justify-content: center !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .gm-footer-mega-grid {
        grid-template-columns: 1fr !important;
    }

    .gm-footer-newsletter {
        grid-column: span 1 !important;
    }

    .gm-footer-social {
        justify-content: center !important;
    }
}

/* ============================================
   ADMIN BAR OFFSET
   ============================================ */
body.admin-bar .gm-header,
body.admin-bar header.gm-header,
body.admin-bar #gm-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .gm-header,
    body.admin-bar header.gm-header,
    body.admin-bar #gm-header {
        top: 46px !important;
    }
}

/* ============================================
   ADDITIONAL BLUE THEME ACCENTS
   ============================================ */

/* Article category tags - Default (light background) */
a[href*="/category/"] {
    color: var(--gm-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

/* Category tags on DARK backgrounds - WHITE text */
/* "You missed" section and similar dark sections */
.flavor-flavor article a[href*="/category/"],
article[style*="background"] a[href*="/category/"],
*[class*="dark"] a[href*="/category/"],
*[class*="black"] a[href*="/category/"],
*[style*="background: #"] a[href*="/category/"],
*[style*="background:#"] a[href*="/category/"],
.mg-posts-sec a[href*="/category/"],
.mg-sec-top-post a[href*="/category/"],
.mg-widget a[href*="/category/"],
.flavor-flavor-widget a[href*="/category/"],
.flavor-flavor-top-stories a[href*="/category/"],
.flavor-flavor-you-missed a[href*="/category/"],
section.flavor-flavor a[href*="/category/"],
div.flavor-flavor a[href*="/category/"] {
    
    padding: 4px 10px !important;
    border-radius: 4px !important;
}

/* Category tags in footer - WHITE */
.gm-footer a[href*="/category/"],
footer a[href*="/category/"],
.gm-footer-column a[href*="/category/"] {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    padding: 0 !important;
}

.gm-footer a[href*="/category/"]:hover,
footer a[href*="/category/"]:hover,
.gm-footer-column a[href*="/category/"]:hover {
    color: white !important;
}

/* Links on hover */
article a:hover h2,
article a:hover h3,
article a:hover h4 {
    color: var(--gm-primary) !important;
}

/* Pagination links */
nav.pagination a,
.nav-links a {
    color: var(--gm-primary) !important;
}

nav.pagination a:hover,
.nav-links a:hover {
    background: var(--gm-primary) !important;
    color: white !important;
}

/* ============================================
   "YOU MISSED" SECTION - DARK BACKGROUND STYLES
   ============================================ */

/* Style category tags in "You missed" section specifically */
/* The section has dark image overlays so text should be white */



/* ============================================
   NEWSLETTER POPUP MODAL
   ============================================ */
.gm-newsletter-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    padding: 20px !important;
}

.gm-newsletter-popup.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.gm-newsletter-popup-content {
    background: white !important;
    border-radius: 16px !important;
    padding: 40px !important;
    max-width: 420px !important;
    width: 100% !important;
    position: relative !important;
    text-align: center !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(20px) scale(0.95) !important;
    transition: transform 0.3s ease !important;
}

.gm-newsletter-popup.active .gm-newsletter-popup-content {
    transform: translateY(0) scale(1) !important;
}

.gm-newsletter-popup-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 32px !important;
    height: 32px !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 20px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}

.gm-newsletter-popup-close:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

.gm-newsletter-popup-icon {
    margin-bottom: 20px !important;
}

.gm-newsletter-popup-icon svg {
    width: 48px !important;
    height: 48px !important;
}

.gm-newsletter-popup-content h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 10px 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-newsletter-popup-content > p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 25px 0 !important;
    line-height: 1.6 !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-newsletter-popup-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.gm-newsletter-popup-form input[type="email"] {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
    background: #f8fafc !important;
}

.gm-newsletter-popup-form input[type="email"]:focus {
    outline: none !important;
    border-color: var(--gm-primary) !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.gm-newsletter-popup-form button {
    width: 100% !important;
    padding: 14px 20px !important;
    background: var(--gm-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.gm-newsletter-popup-form button:hover {
    background: var(--gm-primary-dark) !important;
    transform: translateY(-2px) !important;
}

.gm-newsletter-popup-privacy {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
}

/* Responsive for newsletter popup */
@media (max-width: 768px) {
    .gm-newsletter-popup-content {
        padding: 30px 20px !important;
        margin: 10px !important;
    }

    .gm-newsletter-popup-content h3 {
        font-size: 20px !important;
    }
}

/* ============================================
   HIDE OLD THEME ELEMENTS (MINIMAL)
   ============================================ */

/* Hide duplicate footer content after our custom footer */
.gm-footer ~ footer:not(.gm-footer),
.gm-mega-footer ~ footer:not(.gm-mega-footer) {
    display: none !important;
}