/* Approved Promvella color system, September 2026.
 * Color/presentation only: typography, dimensions, layout and breakpoints
 * remain owned by style.css and clone-theme.css. Do not copy preview type.
 * Cool = navigation/actions; warm = savings, highlights and promotional CTAs.
 */
:root {
    --promvella-navy: #00102d;
    --promvella-deep: #00235f;
    --promvella-royal: #004fc4;
    --promvella-blue: #007deb;
    --promvella-electric: #00a8ff;
    --promvella-gold: #ffb300;
    --promvella-orange: #ff8500;
    --promvella-red: #ff3b0a;
    --promvella-warm-ink: #a94300;
    --promvella-warm-tint: #fff7e8;
    --primary: #004fc4;
    --primary-dark: #00102d;
    --primary-light: #e5f3ff;
    --accent: #ff8500;
    --accent-dark: #a94300;
    --bg-cream: #f4f9ff;
    --bg-light: #eef7ff;
    --text-dark: #00102d;
    --text-light: #4b5f7a;
    --clone-surface: #ffffff;
    --clone-surface-muted: #f0f7ff;
    --clone-border: #cfe2f5;
}

/* White behind the official logo; blue navigation with a warm gold edge. */
.main-header { background: rgba(255, 255, 255, .97); }
.main-nav a:hover { background: var(--promvella-warm-tint); color: var(--promvella-warm-ink); }
.topbar { background: var(--promvella-navy); }
.topbar-social a:hover { color: var(--promvella-navy); background: var(--promvella-gold); border-color: var(--promvella-gold); }
.category-bar {
    background: linear-gradient(100deg, var(--promvella-deep), var(--promvella-royal) 58%, var(--promvella-blue));
    border-bottom-color: var(--promvella-gold);
}
.category-nav a { color: #fff; }
.category-nav a:hover { background: var(--promvella-deep); color: var(--promvella-gold); }
.cta-button,
.hero-buttons .btn-primary,
.about-cta .btn-primary {
    background: linear-gradient(105deg, var(--promvella-orange), var(--promvella-red));
    border-color: var(--promvella-orange);
    color: var(--promvella-navy);
    box-shadow: 0 8px 20px rgba(255, 133, 0, .2);
}
.cta-button:hover,
.hero-buttons .btn-primary:hover,
.about-cta .btn-primary:hover {
    background: linear-gradient(105deg, var(--promvella-gold), var(--promvella-orange));
    border-color: var(--promvella-orange);
    color: var(--promvella-navy);
}

.hero-banner {
    background: radial-gradient(circle at 88% 10%, rgba(0, 168, 255, .2), transparent 24%),
        radial-gradient(circle at 7% 95%, rgba(255, 133, 0, .2), transparent 27%),
        linear-gradient(135deg, #fff 0%, #eef8ff 58%, #fff7ea 100%);
}
.hero-banner::before { background: radial-gradient(circle, rgba(255, 179, 0, .18), transparent 67%); }
.hero-badge { color: var(--promvella-warm-ink); background: var(--promvella-warm-tint); border-color: #f5cb93; }
.section-badge { color: var(--promvella-royal); background: #eaf6ff; border-color: #acd8f6; }
.hero-title .highlight,
.section-title .highlight { color: #c65300; }
.hero-title .highlight::after,
.section-title .highlight::after { background: linear-gradient(90deg, var(--promvella-gold), var(--promvella-red)); }
.stat-card { border-color: #ffd89a; }
.stat-card::before { background: linear-gradient(90deg, var(--promvella-gold), var(--promvella-orange)); }
.stat-card .stat-number { color: var(--promvella-royal); }
.stat-card:last-child .stat-number { color: var(--promvella-warm-ink); }
.featured-image { border-color: #add9fa; background: linear-gradient(135deg, var(--promvella-deep), var(--promvella-blue)); }

/* Predictable warm / cool / warm feature accents; light surfaces dominate. */
.features-section { background: linear-gradient(180deg, #fff, #fffaf0); }
.feature-card { border-color: #cfe2f5; box-shadow: inset 0 4px 0 var(--promvella-electric), var(--clone-shadow-sm); }
.feature-card:nth-child(3n + 1) { background: linear-gradient(165deg, #fff, #fff7e9); border-color: #f5d9ae; box-shadow: inset 0 4px 0 var(--promvella-gold), var(--clone-shadow-sm); }
.feature-card:nth-child(3n) { background: linear-gradient(165deg, #fff, #fff2e7); border-color: #f5ceb0; box-shadow: inset 0 4px 0 var(--promvella-orange), var(--clone-shadow-sm); }
.feature-icon,
.feature-card:hover .feature-icon { color: #fff; background: linear-gradient(135deg, var(--promvella-royal), var(--promvella-blue)); }
.feature-card:nth-child(3n + 1) .feature-icon { color: var(--promvella-navy); background: linear-gradient(135deg, var(--promvella-gold), var(--promvella-orange)); }
.feature-card:nth-child(3n) .feature-icon { color: var(--promvella-navy); background: linear-gradient(135deg, var(--promvella-orange), var(--promvella-red)); }
.feature-card:hover { border-color: var(--promvella-orange); }
.blogs-section { background: linear-gradient(180deg, #eef8ff, #fff8ed); }
.blog-card:nth-child(2n) { border-color: #ffd89a; }
.blog-card:nth-child(2n + 1) { border-color: #aadfff; }
.blog-card:hover { border-color: var(--promvella-orange); }
.blog-category { color: var(--promvella-navy); background: var(--promvella-gold); }
.blog-meta i { color: var(--promvella-warm-ink); }
.blog-link { color: var(--promvella-royal); }
.blog-card:nth-child(2n) .blog-link,
.blog-link:hover,
.blog-card:hover .blog-title { color: var(--promvella-warm-ink); }
.btn-view-all { color: var(--promvella-warm-ink); background: var(--promvella-warm-tint); box-shadow: inset 0 0 0 1px var(--promvella-orange); }
.btn-view-all:hover { color: var(--promvella-navy); background: var(--promvella-gold); }
.faqs-section { background: #f4f9ff; }
.faq-item.active,
.faq-item:hover { border-color: #eda653; }
.faq-question:hover { background: var(--promvella-warm-tint); }
.faq-icon { color: var(--promvella-warm-ink); }
.about-section { background: linear-gradient(120deg, #fff, #f8fcff 55%, #fff7eb); }
.about-stats-box { background: linear-gradient(135deg, var(--promvella-deep), var(--promvella-royal)); box-shadow: inset 0 -4px 0 var(--promvella-orange), var(--clone-shadow-md); }
.about-stat-number { color: #fff; }
.about-stat-label { color: #fff !important; }
.about-badge-float { color: var(--promvella-navy); background: var(--promvella-gold); }
.about-badge-float i { color: var(--promvella-navy); }
.about-feature-icon { color: var(--promvella-warm-ink); background: var(--promvella-warm-tint); }
.about-feature-item:nth-child(2n) .about-feature-icon { color: var(--promvella-royal); background: var(--primary-light); }

/* A strong blue-to-warm moment leads deliberately into a light footer.
 * The existing form panel gets a navy scrim for white-text contrast. */
.newsletter-section {
    background: radial-gradient(circle at 88% 18%, rgba(0, 168, 255, .36), transparent 24%),
        radial-gradient(circle at 8% 85%, rgba(255, 179, 0, .25), transparent 28%),
        linear-gradient(112deg, var(--promvella-deep), var(--promvella-royal) 46%, var(--promvella-orange));
}
.newsletter-title, .newsletter-description, .newsletter-privacy { color: #fff; }
.newsletter-icon { background: var(--promvella-gold); border-color: var(--promvella-gold); color: var(--promvella-navy); }
.newsletter-form-wrapper { background: rgba(0, 16, 45, .82); border-color: rgba(255, 179, 0, .6); }
.newsletter-input-group { background: #fff; border-color: #fff; }
.newsletter-input-icon { color: var(--promvella-royal); }
.newsletter-submit { color: var(--promvella-navy); background: linear-gradient(110deg, var(--promvella-gold), var(--promvella-orange)); }
.newsletter-submit:hover { color: var(--promvella-navy); background: var(--promvella-orange); }
.main-footer { background: linear-gradient(135deg, #fff, #eff8ff 65%, #fff7ea); color: var(--promvella-navy); border-top-color: var(--promvella-gold); }
.footer-logo, .footer-title { color: var(--promvella-navy); }
.footer-tagline { color: var(--promvella-royal); }
.footer-menu a { color: var(--promvella-deep); }
.footer-menu a:hover, .footer-copyright a:hover { color: var(--promvella-warm-ink); }
.footer-menu a::before { background: var(--promvella-orange); }
.footer-content, .footer-bottom { border-color: #cfe4f8; }
.footer-disclosure { background: #fff; border-color: #d2e7f8; border-left-color: var(--promvella-orange); }
.footer-disclosure p, .footer-copyright { color: #4b5f7a; }
.footer-disclosure i { color: var(--promvella-warm-ink); }
.footer-copyright a { color: var(--promvella-royal); }

/* Interior actions stay blue; promotions use warm accents. */
.contact-submit, .store-button, .coupon-btn, .copy-code-btn { background: var(--promvella-royal); color: #fff; }
.contact-submit:hover, .store-button:hover, .coupon-btn:hover, .copy-code-btn:hover { background: var(--promvella-deep); color: #fff; }
.btn-secondary { border-color: var(--promvella-orange); color: var(--promvella-warm-ink); }
.btn-secondary:hover, .modal-shop-btn { color: var(--promvella-navy); background: var(--promvella-gold); border-color: var(--promvella-gold); }
.modal-shop-btn:hover { color: var(--promvella-navy); background: var(--promvella-orange); }
.filter-btn.active, .filter-btn:hover, .category-btn.active, .category-btn:hover { background: var(--promvella-royal); border-color: var(--promvella-royal); color: #fff; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--promvella-blue); box-shadow: 0 0 0 4px rgba(0, 168, 255, .18); }
.pagination-wrapper nav[role="navigation"] a:hover,
.pagination-wrapper nav[role="navigation"] span[aria-current="page"] > span { background: var(--promvella-royal); border-color: var(--promvella-royal); color: #fff; }
.pagination-wrapper nav[role="navigation"] a:focus-visible { outline-color: var(--promvella-orange); }
body .meta-item i, body .recent-post-title:hover { color: var(--promvella-warm-ink); }

@media (max-width: 768px) {
    .hero-banner { background: radial-gradient(circle at 88% 4%, rgba(0, 168, 255, .18), transparent 36%), radial-gradient(circle at 8% 80%, rgba(255, 179, 0, .18), transparent 34%), linear-gradient(160deg, #fff, #eef8ff 60%, #fff7ea); }
    .newsletter-section { background: linear-gradient(150deg, var(--promvella-deep), var(--promvella-royal) 58%, var(--promvella-orange)); }
}

@media (max-width: 768px) {
    html {
        overflow-x: visible;
        overflow-y: visible;
    }
}