/*
Theme Name: Grankare Child - NNHC Branded
Description: Enhanced NNHC Child Theme with Cluster Care, Subscriptions, Legacy Wall, Portal Embeds, and SEO Schema
Author: Nurturing Nurses HomeCare
Version: 2.0
Template: grankare
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: nnhc
*/

/* ============================================
   NNHC BRAND COLORS
   ============================================
   Primary Purple: #5b2aa6
   Primary Purple Light: #7b4bc6
   Primary Purple Dark: #4a2287
   
   Secondary Gold: #D4A84B
   Secondary Gold Light: #E8C97D
   Secondary Gold Dark: #B8923A
   
   Dark Background: #3d3456 (warm purple-charcoal)
   Light Background: #f8f5fc (soft lavender)
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================ */
:root {
    --nnhc-purple: #5b2aa6;
    --nnhc-purple-light: #7b4bc6;
    --nnhc-purple-dark: #4a2287;
    --nnhc-purple-rgb: 91, 42, 166;
    
    --nnhc-gold: #D4A84B;
    --nnhc-gold-light: #E8C97D;
    --nnhc-gold-dark: #B8923A;
    --nnhc-gold-rgb: 212, 168, 75;
    
    --dark-bg: #3d3456;
    --dark-bg-rgba: #2d2640;
    --dark-bg-lighter: #4d4466;
    --light-bg: #f8f5fc;
    --light-bg-accent: #efe8f7;
    
    --border-color: #5a4d70;
    --dark-overlay-color: rgba(61, 52, 86, 0.85);
    --light-color: #ffffff;
    --drk-txt-color: #2d2640;
    --default-text-color: #5a5a6e;
}

/* ============================================
   ICONS - Purple
   ============================================ */
.elementor-widget-icon-box .elementor-icon,
.elementor-icon,
.elementor-icon i,
.icon-box i,
.feature-icon i,
.service-icon i,
i.ti,
i.bi,
.ti-check,
.ti-arrow-right,
[class*="ti-"],
.check-icon,
.list-icon {
    color: #5b2aa6 !important;
}

svg.elementor-icon,
.elementor-icon svg,
svg path[fill="#61ce70"],
svg path[fill="#61CE70"],
svg path[fill="#36d179"],
svg circle[fill="#61ce70"],
svg circle[fill="#61CE70"] {
    fill: #5b2aa6 !important;
}

svg path[stroke="#61ce70"],
svg path[stroke="#61CE70"],
svg path[stroke="#36d179"] {
    stroke: #5b2aa6 !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary,
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
header a.btn.btn-primary,
header button.btn.btn-primary,
.elementor-button,
.elementor-widget-button .elementor-button,
.e-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
input[type="submit"],
button[type="submit"],
.wp-block-button__link,
.submit-btn,
.theme-btn,
.primary-btn,
[class*="btn-primary"],
.cea-button,
.cea-btn {
    background: #5b2aa6 !important;
    background-color: #5b2aa6 !important;
    border-color: #5b2aa6 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
header a.btn.btn-primary:hover,
.elementor-button:hover,
.elementor-button:focus,
.elementor-widget-button .elementor-button:hover,
.e-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-button__link:hover,
.submit-btn:hover,
.theme-btn:hover,
.primary-btn:hover,
.cea-button:hover,
.cea-btn:hover {
    background: #D4A84B !important;
    background-color: #D4A84B !important;
    border-color: #D4A84B !important;
    color: #ffffff !important;
}

.btn-secondary,
.btn-outline,
.btn-outline-primary,
.outline-btn {
    background: transparent !important;
    border: 2px solid #5b2aa6 !important;
    color: #5b2aa6 !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.outline-btn:hover {
    background: #5b2aa6 !important;
    border-color: #5b2aa6 !important;
    color: #ffffff !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: #5b2aa6;
}

a:hover,
a:focus,
a:active {
    color: #D4A84B;
}

.entry-content a,
.post-content a,
article a:not(.btn):not(.button):not(.elementor-button) {
    color: #5b2aa6;
}

.entry-content a:hover,
.post-content a:hover,
article a:not(.btn):not(.button):not(.elementor-button):hover {
    color: #D4A84B;
}

/* ============================================
   NAVIGATION
   ============================================ */
.main-navigation a:hover,
.primary-menu a:hover,
.header-navbar a:hover,
nav.navbar a:hover,
.nav-menu a:hover,
.menu-item a:hover,
ul.navbar-nav > li > a:hover,
.header-navbar ul.navbar-nav > li:hover > a,
.header-navbar ul.navbar-nav > li.current-menu-item > a,
.header-navbar ul.navbar-nav > li.current_page_item > a {
    color: #D4A84B !important;
}

.dropdown-menu a:hover,
.sub-menu a:hover,
ul.navbar-nav .dropdown-menu li:hover > a {
    color: #D4A84B !important;
    background-color: rgba(91, 42, 166, 0.05) !important;
}

.current-menu-item > a,
.current_page_item > a,
.active > a {
    color: #5b2aa6 !important;
}

/* ============================================
   DARK BACKGROUNDS - SOFTENED
   ============================================ */
.dark-bg,
.bg-dark,
section.dark,
.dark-section,
[class*="dark-bg"],
[data-bg="dark"],
.elementor-section[data-settings*="dark"],
.elementor-section.dark-section,
.footer-dark,
footer.dark,
.site-footer,
footer,
.footer-wrapper,
.footer-top,
.footer-middle,
.footer-bottom,
.footer-widgets,
#footer,
#site-footer {
    background-color: #3d3456 !important;
}

.footer-bottom,
.footer-copyright,
.copyright-area {
    background-color: #2d2640 !important;
}

.header-dark,
.topbar-dark,
.navbar-dark,
.sticky-head.header-sticky {
    background-color: #3d3456 !important;
}

.dark-bg,
.bg-dark,
footer,
.footer-wrapper,
.site-footer,
[class*="dark-bg"] {
    color: #e0dce8 !important;
}

.dark-bg a,
.bg-dark a,
footer a,
.footer-wrapper a,
.site-footer a {
    color: #E8C97D !important;
}

.dark-bg a:hover,
.bg-dark a:hover,
footer a:hover,
.footer-wrapper a:hover,
.site-footer a:hover {
    color: #ffffff !important;
}

/* ============================================
   OVERLAYS
   ============================================ */
.overlay,
.page-title-overlay,
.banner-overlay,
.hero-overlay,
.section-overlay,
[class*="overlay"]::before,
[class*="overlay"]::after,
.elementor-background-overlay {
    background: rgba(61, 52, 86, 0.85) !important;
}

.light-overlay,
.overlay-light {
    background: rgba(91, 42, 166, 0.7) !important;
}

/* ============================================
   PAGE LOADER
   ============================================ */
.page-load-initiate .page-loader:before,
.page-load-end .page-loader:before,
.page-load-initiate .page-loader:after,
.page-load-end .page-loader:after,
.preloader,
.page-loader {
    background: linear-gradient(to right, #5b2aa6 0%, #D4A84B 100%) !important;
}

/* ============================================
   ACCENT COLORS & TEXT
   ============================================ */
.text-primary,
.primary-color,
.accent-color,
.theme-color,
[class*="text-primary"],
.highlight,
.highlight-text {
    color: #5b2aa6 !important;
}

.text-secondary,
.secondary-color,
.gold-text,
.accent-secondary {
    color: #D4A84B !important;
}

.section-subtitle,
.section-tag,
.sub-title,
.subtitle,
.section-title span,
.widget-title span,
.cea-sub-title,
[class*="subtitle"],
[class*="sub-title"] {
    color: #5b2aa6 !important;
}

.star-icon,
.sparkle,
[class*="star"],
[class*="sparkle"],
.ti-star,
.bi-star,
.bi-star-fill {
    color: #D4A84B !important;
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */
.bg-primary,
.primary-bg,
.accent-bg,
[class*="bg-primary"] {
    background-color: #5b2aa6 !important;
}

.bg-secondary,
.secondary-bg,
.gold-bg {
    background-color: #D4A84B !important;
}

.bg-light-accent,
.light-accent-bg,
.bg-soft {
    background-color: #f8f5fc !important;
}

[style*="background-color: #ddf6e4"],
[style*="background:#ddf6e4"],
.light-green-bg {
    background-color: #efe8f7 !important;
}

/* ============================================
   BORDERS
   ============================================ */
.border-primary,
[class*="border-primary"] {
    border-color: #5b2aa6 !important;
}

.border-secondary {
    border-color: #D4A84B !important;
}

.card:hover,
.service-box:hover,
.feature-box:hover,
.icon-box:hover,
[class*="box"]:hover {
    border-color: #5b2aa6 !important;
}

/* ============================================
   CARDS & BOXES
   ============================================ */
.card,
.box,
.service-box,
.feature-box,
.icon-box,
[class*="card"],
[class*="-box"] {
    box-shadow: 0 5px 30px rgba(91, 42, 166, 0.08);
}

.card:hover,
.box:hover,
.service-box:hover,
.feature-box:hover,
.icon-box:hover {
    box-shadow: 0 10px 40px rgba(91, 42, 166, 0.15);
}

/* ============================================
   ICON BOXES & FEATURES
   ============================================ */
.elementor-widget-icon-box .elementor-icon,
.elementor-widget-icon-box .elementor-icon i,
.icon-box .icon,
.icon-box i,
.feature-icon,
.service-icon,
.cea-icon-box .icon,
.cea-icon-box i {
    color: #5b2aa6 !important;
    fill: #5b2aa6 !important;
}

.elementor-widget-icon-box:hover .elementor-icon,
.elementor-widget-icon-box:hover .elementor-icon i,
.icon-box:hover .icon,
.icon-box:hover i,
.feature-icon:hover,
.service-icon:hover {
    color: #D4A84B !important;
    fill: #D4A84B !important;
}

.icon-circle,
.icon-rounded,
.icon-square,
[class*="icon-bg"] {
    background-color: rgba(91, 42, 166, 0.1) !important;
    color: #5b2aa6 !important;
}

.icon-circle:hover,
.icon-rounded:hover,
.icon-square:hover {
    background-color: #5b2aa6 !important;
    color: #ffffff !important;
}

/* ============================================
   COUNTERS & STATS
   ============================================ */
.counter-number,
.stat-number,
.counter-value,
[class*="counter"] .number,
[class*="counter"] span,
[class*="stat"] .number,
.elementor-counter-number,
.odometer-value {
    color: #D4A84B !important;
}

.counter-icon,
.stat-icon {
    color: #5b2aa6 !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress-bar,
.loading-bar,
.skill-bar-fill,
.elementor-progress-bar {
    background: linear-gradient(to right, #5b2aa6, #D4A84B) !important;
}

/* ============================================
   TESTIMONIALS & QUOTES
   ============================================ */
blockquote,
.testimonial-box,
.testimonial-wrapper,
[class*="testimonial"],
[class*="quote"] {
    border-left-color: #5b2aa6 !important;
}

blockquote::before,
.quote-icon,
.testimonial-quote-icon,
.fa-quote-left,
.fa-quote-right,
.ti-quote-left,
.ti-quote-right {
    color: #D4A84B !important;
}

/* ============================================
   TEAM/STAFF SECTION
   ============================================ */
.team-wrapper .team-social a,
.team-member .social a,
.staff-social a {
    color: #5b2aa6 !important;
}

.team-wrapper .team-social a:hover,
.team-member .social a:hover,
.staff-social a:hover {
    background-color: #5b2aa6 !important;
    color: #ffffff !important;
}

/* ============================================
   FORMS
   ============================================ */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.wpcf7-form-control:focus {
    border-color: #5b2aa6 !important;
    box-shadow: 0 0 0 3px rgba(91, 42, 166, 0.15) !important;
    outline: none !important;
}

label.highlight,
.required {
    color: #5b2aa6;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination .current,
.pagination .active,
.pagination li.active a,
.page-numbers.current,
.nav-links .current,
.woocommerce-pagination .current {
    background-color: #5b2aa6 !important;
    border-color: #5b2aa6 !important;
    color: #ffffff !important;
}

.pagination a:hover,
.page-numbers:hover,
.nav-links a:hover {
    background-color: #D4A84B !important;
    border-color: #D4A84B !important;
    color: #ffffff !important;
}

/* ============================================
   SOCIAL ICONS
   ============================================ */
.social-icons a,
.social-links a,
[class*="social"] a,
.footer-social a,
.header-social a {
    color: #5b2aa6 !important;
}

.social-icons a:hover,
.social-links a:hover,
[class*="social"] a:hover,
.footer-social a:hover,
.header-social a:hover {
    color: #ffffff !important;
    background-color: #5b2aa6 !important;
}

.dark-bg .social-icons a,
footer .social-icons a,
.footer-wrapper .social-icons a {
    color: #E8C97D !important;
}

.dark-bg .social-icons a:hover,
footer .social-icons a:hover,
.footer-wrapper .social-icons a:hover {
    color: #ffffff !important;
    background-color: #5b2aa6 !important;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu,
.mobile-nav,
.off-canvas-menu,
.mobile-menu-wrapper,
#mobile-menu {
    background-color: #3d3456 !important;
}

.mobile-menu a,
.mobile-nav a,
.off-canvas-menu a {
    color: #ffffff !important;
}

.mobile-menu a:hover,
.mobile-nav a:hover,
.off-canvas-menu a:hover,
.mobile-menu .current-menu-item > a {
    color: #D4A84B !important;
}

.menu-toggle,
.hamburger,
.mobile-toggle {
    color: #5b2aa6 !important;
}

/* ============================================
   SCROLL TO TOP
   ============================================ */
.scroll-top,
.back-to-top,
#scroll-top,
.scrollup,
[class*="scroll-top"] {
    background-color: #5b2aa6 !important;
    color: #ffffff !important;
}

.scroll-top:hover,
.back-to-top:hover,
#scroll-top:hover {
    background-color: #D4A84B !important;
}

/* ============================================
   WOOCOMMERCE
   ============================================ */
.woocommerce .price,
.woocommerce-Price-amount,
.product .price {
    color: #5b2aa6 !important;
}

.woocommerce .onsale,
.sale-badge,
.product-badge {
    background-color: #D4A84B !important;
    color: #ffffff !important;
}

.woocommerce .star-rating span::before,
.star-rating .filled {
    color: #D4A84B !important;
}

/* ============================================
   ELEMENTOR SPECIFIC
   ============================================ */
.elementor-widget .elementor-icon-list-icon i,
.elementor-widget .elementor-icon-list-icon svg {
    color: #5b2aa6 !important;
    fill: #5b2aa6 !important;
}

.elementor-divider-separator {
    border-color: #5b2aa6 !important;
}

.elementor-tab-title.elementor-active,
.elementor-tab-title:hover {
    color: #5b2aa6 !important;
}

.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-accordion .elementor-tab-title:hover {
    color: #5b2aa6 !important;
}

.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
.elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon {
    color: #5b2aa6 !important;
}

.elementor-toggle .elementor-tab-title.elementor-active {
    color: #5b2aa6 !important;
}

.elementor-headline-dynamic-text {
    color: #D4A84B !important;
}

.elementor-widget-image-box:hover .elementor-image-box-title {
    color: #5b2aa6 !important;
}

/* ============================================
   WIDGETS
   ============================================ */
.widget-title,
.widget .widget-title,
.sidebar .widget-title,
h3.widget-title {
    color: #2d2640;
}

.widget-title::after,
.widget-title::before {
    background-color: #5b2aa6 !important;
}

.widget a:hover,
.sidebar a:hover {
    color: #5b2aa6 !important;
}

.tagcloud a,
.tag-cloud-link {
    background-color: #f8f5fc !important;
    color: #5b2aa6 !important;
}

.tagcloud a:hover,
.tag-cloud-link:hover {
    background-color: #5b2aa6 !important;
    color: #ffffff !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: #D4A84B !important;
}

.breadcrumb .current,
.breadcrumbs .current {
    color: #5b2aa6 !important;
}

/* ============================================
   SELECTION HIGHLIGHT
   ============================================ */
::selection {
    background-color: #5b2aa6;
    color: #ffffff;
}

::-moz-selection {
    background-color: #5b2aa6;
    color: #ffffff;
}

/* ============================================
   GRADIENTS
   ============================================ */
.gradient-bg,
[class*="gradient"],
.gradient-overlay {
    background: linear-gradient(135deg, #5b2aa6 0%, #D4A84B 100%) !important;
}

.gradient-text {
    background: linear-gradient(135deg, #5b2aa6 0%, #D4A84B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   BADGES & LABELS
   ============================================ */
.badge,
.tag,
.label,
.chip {
    background-color: #5b2aa6 !important;
    color: #ffffff !important;
}

.badge-secondary,
.badge-gold {
    background-color: #D4A84B !important;
}

/* ============================================
   LISTS WITH ICONS
   ============================================ */
ul.check-list li::before,
ul.list-check li::before,
.list-icon,
.list-style-icon {
    color: #5b2aa6 !important;
}

/* ============================================
   PRICING TABLES
   ============================================ */
.pricing-table.featured,
.pricing-box.highlighted,
.price-featured {
    border-color: #5b2aa6 !important;
}

.pricing-table .price,
.pricing-box .amount {
    color: #5b2aa6 !important;
}

.pricing-table.featured .price,
.pricing-box.highlighted .amount {
    color: #D4A84B !important;
}

/* ============================================
   ALERTS & NOTICES
   ============================================ */
.alert-primary,
.notice-primary {
    background-color: rgba(91, 42, 166, 0.1) !important;
    border-color: #5b2aa6 !important;
    color: #5b2aa6 !important;
}

/* ============================================
   LOADING SPINNERS
   ============================================ */
.spinner,
.loader,
.loading-spinner {
    border-top-color: #5b2aa6 !important;
}

/* ============================================
   SPECIFIC GREEN COLOR OVERRIDES
   ============================================ */
[style*="color: #61ce70"],
[style*="color:#61ce70"],
[style*="color: #61CE70"],
[style*="color:#61CE70"],
[style*="color: #36d179"],
[style*="color:#36d179"],
[style*="color: #53d078"],
[style*="color:#53d078"] {
    color: #5b2aa6 !important;
}

[style*="background-color: #61ce70"],
[style*="background:#61ce70"],
[style*="background-color: #61CE70"],
[style*="background:#61CE70"],
[style*="background-color: #36d179"],
[style*="background:#36d179"] {
    background-color: #5b2aa6 !important;
}

[style*="border-color: #61ce70"],
[style*="border:#61ce70"],
[style*="border-color: #61CE70"],
[style*="border:#61CE70"] {
    border-color: #5b2aa6 !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 2px solid #5b2aa6 !important;
    outline-offset: 2px;
}

.skip-link:focus {
    background-color: #5b2aa6 !important;
    color: #ffffff !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    a {
        color: #5b2aa6 !important;
    }
    
    .btn-primary {
        background-color: #5b2aa6 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ============================================
   CLUSTER CARE COMPONENTS
   ============================================ */
.nnhc-cluster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.nnhc-cluster-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e0dce8;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(91, 42, 166, 0.06);
}

.nnhc-cluster-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(91, 42, 166, 0.12);
    border-color: #5b2aa6;
}

.cluster-header {
    background: linear-gradient(135deg, #5b2aa6, #4a2287);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cluster-header h3 {
    color: #ffffff !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    margin: 0;
}

.cluster-badge {
    background: #D4A84B;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cluster-body {
    padding: 24px;
}

.cluster-counties {
    font-size: 14px;
    color: #5a5a6e;
    margin: 0 0 12px;
    line-height: 1.6;
}

.cluster-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.cluster-stats span {
    background: #f8f5fc;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #5b2aa6;
}

.cluster-types {
    font-size: 13px;
    color: #8a8a9a;
    margin: 0;
}

.cluster-link {
    display: block;
    padding: 14px 24px;
    border-top: 1px solid #e0dce8;
    font-size: 14px;
    font-weight: 600;
    color: #5b2aa6 !important;
    text-decoration: none;
    transition: background 0.2s;
}

.cluster-link:hover {
    background: #f8f5fc;
    color: #D4A84B !important;
}

/* ============================================
   CLUSTER CARE PAGE - Hero Section
   ============================================ */
.cluster-care-hero {
    background: linear-gradient(160deg, #2d2640 0%, #3d3456 50%, #4a3570 100%);
    padding: 100px 0 80px;
    text-align: center;
}

.cluster-care-hero h1 {
    color: #ffffff !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

.cluster-care-hero .subtitle {
    color: #D4A84B !important;
}

.cluster-how-it-works {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 40px auto 0;
}

.cluster-step {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
}

.cluster-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D4A84B, #E8C97D);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-weight: 800;
    font-size: 14px;
    color: #2d2640;
}

.cluster-step h4 { color: #ffffff !important; font-size: 16px; }
.cluster-step p { color: #b0a8c8; font-size: 13px; line-height: 1.5; }

/* ============================================
   SUBSCRIPTION / MEMBERSHIP PAGES
   ============================================ */
.nnhc-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.nnhc-pricing-card {
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid transparent;
    padding: 36px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
}

.nnhc-pricing-card:hover,
.nnhc-pricing-card.featured {
    border-color: #5b2aa6;
    box-shadow: 0 16px 48px rgba(91, 42, 166, 0.12);
    transform: scale(1.02);
}

.nnhc-pricing-card.featured {
    transform: scale(1.04);
}

.pricing-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #D4A84B, #E8C97D);
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    color: #2d2640;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(91, 42, 166, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.pricing-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    color: #2d2640;
    margin-bottom: 8px;
}

.pricing-amount {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 48px;
    font-weight: 700;
    color: #5b2aa6;
}

.pricing-period {
    font-size: 16px;
    color: #8a8a9a;
}

.pricing-features {
    border-top: 1px solid #e0dce8;
    margin-top: 20px;
    padding-top: 20px;
    text-align: left;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 14px;
    color: #5a5a6e;
}

.pricing-feature .check {
    color: #5b2aa6;
    font-weight: 700;
}

.pricing-cta {
    margin-top: 24px;
}

.pricing-cta .btn {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
}

/* ============================================
   PORTAL EMBED STYLES
   ============================================ */
.nnhc-portal-embed {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(91, 42, 166, 0.1);
    border: 1px solid #e0dce8;
}

.nnhc-portal-embed iframe {
    display: block;
}

/* ============================================
   LEGACY WALL STYLES
   ============================================ */
.legacy-tribute-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.legacy-tribute-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.3s;
}

.legacy-tribute-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
    border-color: #D4A84B;
}

.tribute-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(91, 42, 166, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border: 2px solid rgba(91, 42, 166, 0.3);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    color: #7b4bc6;
}

/* ============================================
   RESPONSIVE - Cluster & Subscription
   ============================================ */
@media (max-width: 768px) {
    .nnhc-cluster-grid { grid-template-columns: 1fr; }
    .nnhc-pricing-grid { grid-template-columns: 1fr; }
    .cluster-how-it-works { grid-template-columns: 1fr 1fr; }
    .legacy-tribute-grid { grid-template-columns: 1fr 1fr; }
    .nnhc-pricing-card.featured { transform: scale(1); }
}

@media (max-width: 480px) {
    .cluster-how-it-works { grid-template-columns: 1fr; }
    .legacy-tribute-grid { grid-template-columns: 1fr; }
}