﻿/* =========================================
   NAIJAHOOD CORE PLUGIN STYLES
   ========================================= */

/* ===== SCOPED RESET (Applied to all plugin shortcodes) ===== */
#nh-hero *,
#nh-categories *,
#nh-latest *,
#nh-cta *,
#nh-footer *,
#nh-guides *,
#nh-single-page *,
#nh-hero *::before,
#nh-categories *::before,
#nh-latest *::before,
#nh-cta *::before,
#nh-footer *::before,
#nh-guides *::before,
#nh-single-page *::before,
#nh-hero *::after,
#nh-categories *::after,
#nh-latest *::after,
#nh-cta *::after,
#nh-footer *::after,
#nh-guides *::after,
#nh-single-page *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

#nh-hero a,
#nh-categories a,
#nh-latest a,
#nh-cta a,
#nh-footer a,
#nh-guides a,
#nh-single-page a {
    text-decoration: none !important;
    color: inherit !important;
}

#nh-hero ul,
#nh-hero ol,
#nh-categories ul,
#nh-categories ol,
#nh-latest ul,
#nh-latest ol,
#nh-cta ul,
#nh-cta ol,
#nh-footer ul,
#nh-footer ol,
#nh-guides ul,
#nh-guides ol,
#nh-single-page ul,
#nh-single-page ol {
    list-style: none !important;
}

#nh-hero button,
#nh-categories button,
#nh-latest button,
#nh-cta button,
#nh-footer button,
#nh-guides button,
#nh-single-page button {
    cursor: pointer !important;
    border: none !important;
    font-family: inherit !important;
    background: transparent !important;
}

/* Material Symbols Adjustments */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* =========================================
   HERO SECTION ([nh_hero_dynamic])
   ========================================= */
#nh-hero {
    font-family: 'Inter', sans-serif !important;
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    min-height: 100vh !important;
    padding: 100px 20px 80px !important;
    color: #f5f8f7 !important;
    line-height: 1.5 !important;
}

/* Background Image */
#nh-hero .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    background-image: url('https://images.unsplash.com/photo-1531482615713-2afd69097998?w=1600&auto=format&fit=crop&q=80') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
}

/* Dark Overlay */
#nh-hero .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(150deg,
            rgba(17, 24, 21, 0.93) 0%,
            rgba(17, 24, 21, 0.82) 50%,
            rgba(11, 218, 132, 0.08) 100%);
    z-index: 1 !important;
}

/* Animated blobs for depth */
#nh-hero .hero-blob {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(90px) !important;
    opacity: 0.13 !important;
    z-index: 2 !important;
    animation: nhHeroBlobFloat 9s ease-in-out infinite alternate !important;
}

#nh-hero .hero-blob-1 {
    width: 560px !important;
    height: 560px !important;
    background: radial-gradient(circle, #0bda84, #059652) !important;
    top: -120px !important;
    left: -120px !important;
    animation-delay: 0s !important;
}

#nh-hero .hero-blob-2 {
    width: 420px !important;
    height: 420px !important;
    background: radial-gradient(circle, #0bda84, #06b86e) !important;
    bottom: -100px !important;
    right: -80px !important;
    animation-delay: 4s !important;
}

#nh-hero .hero-blob-3 {
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, #f5f8f7, #d1fae5) !important;
    top: 45% !important;
    right: 8% !important;
    opacity: 0.05 !important;
    animation-delay: 6s !important;
}

@keyframes nhHeroBlobFloat {
    0% {
        transform: translate(0, 0) scale(1) !important;
    }

    100% {
        transform: translate(28px, 28px) scale(1.07) !important;
    }
}

/* ===== CONTENT WRAPPER ===== */
#nh-hero .hero-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Heading (REDUCED) */
#nh-hero .hero-heading {
    font-size: clamp(1.6rem, 3.9vw, 2.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    color: #f5f8f7 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.7px !important;
}

#nh-hero .hero-heading .highlight {
    color: #0bda84 !important;
    -webkit-text-fill-color: #0bda84 !important;
}

/* ===== SEARCH BOX (SMALLER + CLEANER) ===== */
#nh-hero .search-card {
    background: #f5f8f7 !important;
    border-radius: 16px !important;
    padding: 7px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(11, 218, 132, 0.12) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: stretch !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#nh-hero .search-field {
    flex: 1 1 150px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 14px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1.5px solid #e4ede9 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    min-width: 130px !important;
}

#nh-hero .search-field:focus-within {
    border-color: #0bda84 !important;
    box-shadow: 0 0 0 3px rgba(11, 218, 132, 0.13) !important;
    background: #fff !important;
}

#nh-hero .search-field svg,
#nh-hero .search-field .material-symbols-outlined {
    /* Support both */
    flex-shrink: 0 !important;
    color: #9ab5ab !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}

#nh-hero .search-field input,
#nh-hero .search-field select {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    color: #111815 !important;
    font-weight: 500 !important;
    width: 100% !important;
    cursor: pointer !important;
}

#nh-hero .search-field input::placeholder {
    color: #a8c0b8 !important;
    font-weight: 400 !important;
}

#nh-hero .field-divider {
    width: 1px !important;
    background: #dde8e4 !important;
    align-self: stretch !important;
    margin: 6px 0 !important;
}

/* Search Button (SMALLER) */
#nh-hero .search-btn {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    background: #0bda84 !important;
    color: #111815 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 4px 18px rgba(11, 218, 132, 0.38) !important;
    white-space: nowrap !important;
    letter-spacing: 0.1px !important;
}

#nh-hero .search-btn:hover {
    background: #09c275 !important;
    box-shadow: 0 6px 24px rgba(11, 218, 132, 0.52) !important;
    transform: translateY(-1px) !important;
}

#nh-hero .search-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(11, 218, 132, 0.3) !important;
}

#nh-hero .search-btn svg,
#nh-hero .search-btn .material-symbols-outlined {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px !important;
}

/* Subtext */
#nh-hero .hero-subtext {
    font-size: clamp(13.5px, 1.6vw, 15.5px) !important;
    color: rgba(245, 248, 247, 0.55) !important;
    margin-bottom: 34px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== POPULAR SEARCHES ===== */
#nh-hero .popular-searches {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
}

#nh-hero .popular-label {
    font-size: 12.5px !important;
    color: rgba(245, 248, 247, 0.42) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    margin-right: 2px !important;
}

#nh-hero .popular-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: rgba(245, 248, 247, 0.05) !important;
    border: 1px solid rgba(245, 248, 247, 0.12) !important;
    border-radius: 100px !important;
    color: rgba(245, 248, 247, 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#nh-hero .popular-tag svg {
    width: 13px !important;
    height: 13px !important;
    opacity: 0.65 !important;
    flex-shrink: 0 !important;
}

/* ===== TRUST SPACER & BADGES ===== */
#nh-hero .trust-spacer {
    height: 70px !important;
    width: 100% !important;
}

#nh-hero .trust-badges {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
    margin-top: 0 !important;
}

#nh-hero .trust-badge {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 14px 30px !important;
}

#nh-hero .trust-divider {
    width: 1px !important;
    height: 34px !important;
    background: rgba(245, 248, 247, 0.1) !important;
    flex-shrink: 0 !important;
}

#nh-hero .trust-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#nh-hero .trust-icon-wrap.green {
    background: rgba(11, 218, 132, 0.12) !important;
}

#nh-hero .trust-icon-wrap.white {
    background: rgba(245, 248, 247, 0.08) !important;
}

#nh-hero .trust-icon-wrap.muted {
    background: rgba(245, 248, 247, 0.06) !important;
}

#nh-hero .trust-icon-wrap svg {
    width: 19px !important;
    height: 19px !important;
}

#nh-hero .trust-icon-wrap.green svg {
    color: #0bda84 !important;
}

#nh-hero .trust-icon-wrap.white svg {
    color: rgba(245, 248, 247, 0.8) !important;
}

#nh-hero .trust-icon-wrap.muted svg {
    color: rgba(245, 248, 247, 0.6) !important;
}

#nh-hero .trust-text h4 {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #f5f8f7 !important;
    line-height: 1.2 !important;
}

#nh-hero .trust-text p {
    font-size: 11.5px !important;
    color: rgba(245, 248, 247, 0.42) !important;
    margin-top: 2px !important;
    line-height: 1.35 !important;
}

/* ===== HERO SHAKE ANIMATION ===== */
@keyframes nhHeroShake {

    0%,
    100% {
        transform: translateX(0) !important;
    }

    20% {
        transform: translateX(-8px) !important;
    }

    40% {
        transform: translateX(8px) !important;
    }

    60% {
        transform: translateX(-5px) !important;
    }

    80% {
        transform: translateX(5px) !important;
    }
}

/* ===== RESPONSIVE HERO ===== */
@media (max-width: 768px) {
    #nh-hero {
        min-height: 100svh !important;
        padding: 80px 16px 60px !important;
    }

    #nh-hero .search-card {
        flex-direction: column !important;
    }

    #nh-hero .field-divider {
        display: none !important;
    }

    #nh-hero .search-field {
        flex: 1 1 auto !important;
    }

    #nh-hero .search-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 13px !important;
    }

    #nh-hero .trust-badge {
        padding: 10px 18px !important;
    }

    #nh-hero .trust-divider {
        display: none !important;
    }

    #nh-hero .trust-badges {
        flex-direction: column !important;
        gap: 8px !important;
    }

    #nh-hero .trust-spacer {
        height: 50px !important;
    }
}

@media (max-width: 480px) {
    #nh-hero .hero-heading {
        font-size: 1.75rem !important;
    }

    #nh-hero .popular-tag {
        font-size: 12px !important;
        padding: 5px 11px !important;
    }

    #nh-hero .trust-spacer {
        height: 40px !important;
    }
}


/* =========================================
   CATEGORIES SECTION ([nh_categories_dynamic])
   ========================================= */
#nh-categories {
    font-family: 'Inter', sans-serif !important;
    padding: 6rem 1.5rem !important;
    background: white !important;
    color: #111815 !important;
    line-height: 1.5 !important;
}

#nh-categories .max-w-7xl {
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#nh-categories .categories-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem !important;
}

#nh-categories .categories-header h2 {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
}

#nh-categories .categories-header p {
    color: #64748b !important;
}

#nh-categories .btn-view-all {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 700 !important;
    color: #0bda84 !important;
    background: none !important;
    font-size: inherit !important;
}

#nh-categories .btn-view-all .material-symbols-outlined {
    transition: transform 0.2s !important;
}

#nh-categories .btn-view-all:hover .material-symbols-outlined {
    transform: translateX(4px) !important;
}

/* Asymmetric Grid */
#nh-categories .asymmetric-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 180px !important;
    gap: 1.5rem !important;
}

#nh-categories .grid-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 1rem !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

#nh-categories .grid-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px -15px rgba(11, 218, 132, 0.15) !important;
}

#nh-categories .grid-item img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s !important;
}

#nh-categories .grid-item:hover img {
    transform: scale(1.1) !important;
}

#nh-categories .grid-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent) !important;
}

#nh-categories .grid-text {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 1.5rem !important;
    color: white !important;
}

#nh-categories .grid-text h3 {
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
}

#nh-categories .grid-text p {
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
}

#nh-categories .grid-text-lg h3 {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
}

#nh-categories .grid-text-lg p {
    font-size: 0.875rem !important;
}

#nh-categories .grid-text-lg {
    padding: 2rem !important;
}

/* NYSC Special Card */
#nh-categories .grid-nysc {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 1rem !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

#nh-categories .grid-nysc:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px -15px rgba(11, 218, 132, 0.15) !important;
}

#nh-categories .grid-nysc img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    transition: transform 0.7s !important;
}

#nh-categories .grid-nysc:hover img {
    transform: scale(1.1) !important;
}

#nh-categories .grid-nysc-bg {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(11, 218, 132, 0.65) !important;
    z-index: 2 !important;
}

#nh-categories .grid-nysc-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1rem !important;
    color: #ffffff !important;
}

#nh-categories .grid-nysc-content .material-symbols-outlined {
    font-size: 2.25rem !important;
    margin-bottom: 0.5rem !important;
}

#nh-categories .grid-nysc-content h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
}

#nh-categories .grid-nysc-content p {
    font-size: 10px !important;
    font-weight: 500 !important;
    opacity: 0.8 !important;
}

/* Responsive Grid */
@media (min-width: 768px) {
    #nh-categories .categories-header {
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
    }

    #nh-categories .asymmetric-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    #nh-categories .grid-jobs {
        grid-column: span 2 !important;
    }

    #nh-categories .grid-training {
        grid-column: span 2 !important;
    }
}

/* ===== SALARY/PRICE STYLING FOR FEED ===== */
#nh-latest .feed-price {
    font-weight: 900 !important;
    font-size: 1.125rem !important;
    color: #0bda84 !important;
    white-space: nowrap !important;
}


/* =========================================
   LATEST OPPORTUNITIES + FEATURED
   ([nh_latest_opportunities_dynamic])
   ========================================= */
#nh-latest {
    font-family: 'Inter', sans-serif !important;
    padding: 6rem 1.5rem !important;
    background: #f5f8f7 !important;
    color: #111815 !important;
    line-height: 1.5 !important;
}

#nh-latest .latest-inner {
    max-width: 80rem !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4rem !important;
}

#nh-latest .latest-feed {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}

#nh-latest .latest-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#nh-latest .latest-header h2 {
    font-size: 1.875rem !important;
    font-weight: 900 !important;
}

#nh-latest .latest-header p {
    color: #64748b !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
}

#nh-latest .btn-filter {
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    color: #111815 !important;
}

#nh-latest .feed-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

#nh-latest .feed-item {
    background: white !important;
    padding: 1.5rem !important;
    border-radius: 1rem !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.3s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
}

#nh-latest .feed-item:hover {
    border-color: rgba(11, 218, 132, 0.3) !important;
    box-shadow: 0 20px 25px -5px rgba(11, 218, 132, 0.05) !important;
    transform: translateY(-4px) !important;
}

#nh-latest .feed-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 0.75rem !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#nh-latest .feed-icon .material-symbols-outlined {
    color: #94a3b8 !important;
}

#nh-latest .feed-item:hover .feed-icon .material-symbols-outlined {
    color: #0bda84 !important;
}

#nh-latest .feed-body {
    flex: 1 !important;
}

#nh-latest .feed-tags {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

#nh-latest .feed-tag {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background: rgba(11, 218, 132, 0.1) !important;
    color: #0bda84 !important;
}

#nh-latest .feed-date {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

#nh-latest .feed-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: #111815 !important;
}

#nh-latest .feed-item:hover .feed-title {
    color: #0bda84 !important;
}

#nh-latest .feed-subtitle {
    font-size: 0.875rem !important;
    color: #64748b !important;
}

#nh-latest .btn-view {
    background: #0bda84 !important;
    color: #111815 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Sidebar & Carousel */
#nh-latest .sidebar {
    width: 100% !important;
}

#nh-latest .sidebar-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    position: sticky !important;
    top: 100px !important;
    /* Sticky sidebar */
}

#nh-latest .featured-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#nh-latest .featured-header h3 {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
}

#nh-latest .featured-nav {
    display: flex !important;
    gap: 8px !important;
}

#nh-latest .featured-nav-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

#nh-latest .featured-nav-btn:hover {
    background: #0bda84 !important;
    color: #111815 !important;
    border-color: #0bda84 !important;
}

#nh-latest .featured-carousel {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

#nh-latest .featured-track {
    display: flex !important;
    transition: transform 0.5s ease-in-out !important;
}

#nh-latest .featured-card {
    min-width: 100% !important;
    background: #111815 !important;
}

#nh-latest .featured-img {
    height: 12rem !important;
    position: relative !important;
    overflow: hidden !important;
}

#nh-latest .featured-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s !important;
}

#nh-latest .featured-card:hover .featured-img img {
    transform: scale(1.05) !important;
}

#nh-latest .featured-badge {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: #0bda84 !important;
    color: #111815 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

#nh-latest .featured-body {
    padding: 1.5rem !important;
    color: white !important;
}

#nh-latest .featured-body h4 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

#nh-latest .featured-body p {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
}

#nh-latest .btn-featured {
    width: 100% !important;
    background: white !important;
    color: #111815 !important;
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
}

#nh-latest .btn-featured:hover {
    background: #0bda84 !important;
}

@media (min-width: 768px) {
    #nh-latest .feed-item {
        flex-direction: row !important;
        align-items: center !important;
    }
}

@media (min-width: 1024px) {
    #nh-latest .latest-inner {
        flex-direction: row !important;
    }

    #nh-latest .latest-feed {
        width: 66.666% !important;
    }

    #nh-latest .sidebar {
        width: 33.333% !important;
    }
}

/* =========================================
   GUIDES SECTION ([nh_guides_dynamic])
   ========================================= */
#nh-guides {
    font-family: 'Inter', sans-serif !important;
    padding: 6rem 1.5rem !important;
    background: #0f172a !important;
    color: white !important;
    line-height: 1.5 !important;
}

#nh-guides .max-w-7xl {
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#nh-guides .guides-header {
    margin-bottom: 3rem !important;
}

#nh-guides .guides-header h2 {
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    margin-bottom: 1rem !important;
}

#nh-guides .guides-header p {
    color: #94a3b8 !important;
}

#nh-guides .guides-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}

#nh-guides .guide-card {
    cursor: pointer !important;
    display: block !important;
}

#nh-guides .guide-img {
    aspect-ratio: 4/5 !important;
    overflow: hidden !important;
    border-radius: 1rem !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
}

#nh-guides .guide-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s !important;
}

#nh-guides .guide-card:hover .guide-img img {
    transform: scale(1.1) !important;
}

#nh-guides .guide-badge {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: white !important;
}

#nh-guides .guide-card h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
    transition: color 0.2s !important;
    color: white !important;
}

#nh-guides .guide-card:hover h3 {
    color: #0bda84 !important;
}

#nh-guides .guide-card p {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    margin-bottom: 1rem !important;
}

#nh-guides .guide-link {
    color: #0bda84 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid rgba(11, 218, 132, 0.3) !important;
    padding-bottom: 0.25rem !important;
}

@media (min-width: 768px) {
    #nh-guides .guides-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* =========================================
   CTA & NEWSLETTER ([nh_cta_newsletter])
   ========================================= */
#nh-cta {
    font-family: 'Inter', sans-serif !important;
    padding: 6rem 1.5rem !important;
    background: #f5f8f7 !important;
    color: #111815 !important;
    line-height: 1.5 !important;
    scroll-margin-top: 8rem !important;
}

#nh-cta .cta-inner {
    max-width: 80rem !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}

#nh-cta .cta-contribute {
    flex: 1 !important;
    background: #0bda84 !important;
    border-radius: 2.5rem !important;
    padding: 3rem !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#nh-cta .cta-contribute h2 {
    font-size: 1.875rem !important;
    font-weight: 900 !important;
    color: #111815 !important;
    margin-bottom: 1rem !important;
}

#nh-cta .cta-contribute p {
    color: rgba(17, 24, 21, 0.8) !important;
    font-weight: 500 !important;
    margin-bottom: 2rem !important;
}

#nh-cta .btn-submit {
    display: inline-block !important;
    background: #111815 !important;
    color: white !important;
    padding: 1rem 2rem !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    transition: transform 0.2s !important;
    width: fit-content !important;
}

#nh-cta .btn-submit:hover {
    transform: scale(1.05) !important;
}

#nh-cta .cta-newsletter {
    flex: 1 !important;
    background: #0f172a !important;
    border-radius: 2.5rem !important;
    padding: 3rem !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#nh-cta .cta-newsletter h2 {
    font-size: 1.875rem !important;
    font-weight: 900 !important;
    color: white !important;
    margin-bottom: 1rem !important;
}

#nh-cta .cta-newsletter p {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin-bottom: 2rem !important;
}

#nh-cta .newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

#nh-cta .newsletter-form input {
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    color: white !important;
    font-size: 1rem !important;
    outline: none !important;
    transition: box-shadow 0.2s !important;
}

#nh-cta .newsletter-form input::placeholder {
    color: #64748b !important;
}

#nh-cta .newsletter-form input:focus {
    box-shadow: 0 0 0 2px #0bda84 !important;
}

#nh-cta .btn-subscribe {
    background: #0bda84 !important;
    color: #111815 !important;
    padding: 1rem 2rem !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    transition: filter 0.2s !important;
}

#nh-cta .btn-subscribe:hover {
    filter: brightness(1.1) !important;
}

@media (min-width: 768px) {
    #nh-cta .newsletter-form {
        flex-direction: row !important;
    }

    #nh-cta .cta-inner {
        flex-direction: row !important;
    }
}

/* =========================================
   FOOTER SECTION ([nh_footer])
   ========================================= */
#nh-footer {
    font-family: 'Inter', sans-serif !important;
    background: #111815 !important;
    color: white !important;
    padding: 6rem 1.5rem 3rem !important;
    line-height: 1.5 !important;
}

#nh-footer .footer-inner {
    max-width: 80rem !important;
    margin: 0 auto !important;
}

#nh-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    margin-bottom: 5rem !important;
}

#nh-footer .footer-brand {
    grid-column: span 2 !important;
}

#nh-footer .footer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 2rem !important;
}

#nh-footer .footer-logo-icon {
    background: #0bda84 !important;
    padding: 0.375rem !important;
    border-radius: 0.5rem !important;
}

#nh-footer .footer-logo-icon .material-symbols-outlined {
    color: #111815 !important;
    display: block !important;
}

#nh-footer .footer-logo-text {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.025em !important;
}

#nh-footer .footer-brand>p:first-of-type {
    color: #94a3b8 !important;
    max-width: 24rem !important;
    line-height: 1.625 !important;
    margin-bottom: 1rem !important;
}

#nh-footer .footer-brand>p:last-of-type {
    color: #64748b !important;
    font-size: 0.875rem !important;
    line-height: 1.625 !important;
    margin-bottom: 2rem !important;
}

#nh-footer .footer-col h5 {
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    color: white !important;
}

#nh-footer .footer-col ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
}

#nh-footer .footer-col a {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
    transition: color 0.2s !important;
    text-decoration: none !important;
}

#nh-footer .footer-col a:hover {
    color: #0bda84 !important;
}

#nh-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    font-size: 0.875rem !important;
    color: #64748b !important;
}

@media (min-width: 768px) {
    #nh-footer .footer-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    #nh-footer .footer-brand {
        grid-column: span 2 !important;
    }

    #nh-footer .footer-bottom {
        flex-direction: row !important;
        justify-content: space-between !important;
    }
}

/* ===== APPLY BUTTON TEXT (for feed items with apply link) ===== */
#nh-latest .btn-apply-text {
    color: #0bda84 !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    background: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin-left: auto !important;
    margin-top: 0.25rem !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
}

#nh-latest .btn-apply-text .material-symbols-outlined {
    font-size: 0.875rem !important;
}

#nh-latest .btn-apply-text:hover {
    color: #09c275 !important;
}

#nh-latest .feed-action {
    text-align: right !important;
}


/* =========================================
   GLOBAL RESPONSIVE ADJUSTMENTS
   ========================================= */
@media (max-width: 768px) {

    /* Reduce top/bottom padding on mobile */
    #nh-categories,
    #nh-latest,
    #nh-guides,
    #nh-cta {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Reduce font sizes for section headers */
    #nh-categories h2,
    #nh-latest h2,
    #nh-guides h2,
    #nh-cta h2 {
        font-size: 1.75rem !important;
    }
}