/* =============================================================
   SUPERNOVA COMPLIANCE THEME — Design Tokens & Base Styles
   These CSS variables are the color scheme. Elementor's Global
   Colors (Site Settings) should be mapped to these same values
   so the visual editor and the coded base stay in sync.
   ============================================================= */

:root {
    /* Brand / primary palette */
    --sn-color-primary: #1a1a2e;        /* deep navy — headers, footer, dark sections */
    --sn-color-primary-light: #24243e;  /* navy hover / card backgrounds on dark */
    --sn-color-accent: #ff6b35;         /* CTA orange — buttons, highlights, prices */
    --sn-color-accent-dark: #e2551f;    /* accent hover state */
    --sn-color-secondary: #2ec4b6;      /* teal — secondary badges/accents */

    /* Neutrals */
    --sn-color-white: #ffffff;
    --sn-color-offwhite: #f7f7fb;
    --sn-color-border: #e6e6ef;
    --sn-color-text: #1f1f2e;
    --sn-color-text-muted: #6b6b80;

    /* Feedback */
    --sn-color-success: #2ec4b6;
    --sn-color-warning: #ff6b35;

    /* Typography */
    --sn-font-heading: 'Poppins', 'Segoe UI', sans-serif;
    --sn-font-body: 'Inter', 'Segoe UI', sans-serif;

    /* Spacing / radius */
    --sn-radius-sm: 6px;
    --sn-radius-md: 12px;
    --sn-radius-lg: 20px;
    --sn-container-width: 1280px;
    --sn-shadow-card: 0 8px 24px rgba(26, 26, 46, 0.08);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sn-font-body);
    color: var(--sn-color-text);
    background: var(--sn-color-white);
    line-height: 1.6;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sn-font-heading);
    color: var(--sn-color-primary);
    line-height: 1.2;
    margin: 0 0 0.5em;
}

a { color: var(--sn-color-accent); text-decoration: none; }
a:hover { color: var(--sn-color-accent-dark); }

img { max-width: 100%; height: auto; display: block; }

.sn-container {
    max-width: var(--sn-container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Buttons (also exposed as an Elementor Global Style) ---------- */
.sn-btn,
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--sn-radius-sm);
    font-weight: 600;
    font-family: var(--sn-font-heading);
    background: var(--sn-color-accent);
    color: var(--sn-color-white);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.sn-btn:hover,
.elementor-button:hover {
    background: var(--sn-color-accent-dark);
    color: var(--sn-color-white);
    transform: translateY(-1px);
}
.sn-btn--outline {
    background: transparent;
    border: 2px solid var(--sn-color-white);
    color: var(--sn-color-white);
}

/* ---------- Header ---------- */
.sn-site-header {
    background: var(--sn-color-white);
    border-bottom: 1px solid var(--sn-color-border);
    position: sticky;
    top: 0;
    z-index: 999;
}
.sn-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    max-width: var(--sn-container-width);
    margin: 0 auto;
}
.sn-logo img { max-height: 44px; }
.sn-primary-nav ul {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
}
.sn-primary-nav a {
    color: var(--sn-color-text);
    font-weight: 500;
}
.sn-header-cta {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sn-header-phone {
    font-weight: 700;
    color: var(--sn-color-primary);
}

/* ---------- Trust bar ---------- */
.sn-trust-bar {
    background: var(--sn-color-primary);
    color: var(--sn-color-white);
    font-size: 14px;
    padding: 8px 0;
    text-align: center;
}
.sn-trust-bar .sn-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.sn-site-footer {
    background: var(--sn-color-primary);
    color: rgba(255,255,255,0.8);
    padding: 64px 0 24px;
}
.sn-site-footer h4 {
    color: var(--sn-color-white);
    font-size: 16px;
    margin-bottom: 16px;
}
.sn-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}
.sn-site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sn-site-footer ul li { margin-bottom: 10px; }
.sn-site-footer a { color: rgba(255,255,255,0.75); }
.sn-site-footer a:hover { color: var(--sn-color-white); }
.sn-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 48px;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Service / Testimonial / FAQ card defaults ----------
   These classes are used by the custom post type archive templates
   and are also available as re-usable classes inside Elementor
   (via the HTML/Shortcode widget or Custom CSS classes field). */
.sn-card {
    background: var(--sn-color-white);
    border: 1px solid var(--sn-color-border);
    border-radius: var(--sn-radius-md);
    padding: 28px;
    box-shadow: var(--sn-shadow-card);
}
.sn-price-tag {
    display: inline-block;
    color: var(--sn-color-accent);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sn-primary-nav { display: none; }
    .sn-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .sn-footer-grid { grid-template-columns: 1fr; }
    .sn-header-phone { display: none; }
}

/* =============================================================
   HOMEPAGE SECTIONS — used by the imported demo Home page content
   (sample-content.xml) and reusable as CSS classes for any
   Elementor HTML/Shortcode widget or Custom CSS class field.
   ============================================================= */

.sn-section { padding: 72px 0; }
.sn-section--alt { background: var(--sn-color-offwhite); }
.sn-section--dark { background: var(--sn-color-primary); color: rgba(255,255,255,0.85); }
.sn-section--dark h2, .sn-section--dark h3 { color: var(--sn-color-white); }
.sn-section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.sn-eyebrow {
    display: inline-block;
    color: var(--sn-color-accent);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Hero */
.sn-hero {
    background: linear-gradient(135deg, var(--sn-color-primary) 0%, var(--sn-color-primary-light) 100%);
    color: var(--sn-color-white);
    padding: 96px 0 72px;
}
.sn-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}
.sn-hero h1 { color: var(--sn-color-white); font-size: 44px; margin-bottom: 20px; }
.sn-hero p { font-size: 18px; color: rgba(255,255,255,0.8); margin-bottom: 28px; }
.sn-hero-badges { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; font-size: 14px; color: rgba(255,255,255,0.75); }
.sn-hero-price { font-size: 22px; font-weight: 700; color: var(--sn-color-accent); margin-bottom: 16px; display: block; }
.sn-hero-image img { border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-card); }
.sn-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.sn-stat-strip strong { display: block; font-size: 26px; color: var(--sn-color-white); }
.sn-stat-strip span { font-size: 13px; color: rgba(255,255,255,0.7); }

/* Services grid */
.sn-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.sn-service-card img { border-radius: var(--sn-radius-md) var(--sn-radius-md) 0 0; margin: -28px -28px 16px; width: calc(100% + 56px); max-width: none; }
.sn-service-card .sn-btn { margin-top: 12px; }

/* Legal / compliance banner */
.sn-legal-banner {
    background: var(--sn-color-primary);
    color: var(--sn-color-white);
    text-align: center;
    padding: 48px 24px;
    border-radius: var(--sn-radius-lg);
}
.sn-legal-banner strong { color: var(--sn-color-accent); }

/* Icon grid (Why choose us) */
.sn-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
}
.sn-icon-box { text-align: left; }
.sn-icon-box .sn-icon-circle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,107,53,0.12);
    color: var(--sn-color-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

/* Process steps */
.sn-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.sn-process-step { text-align: center; }
.sn-process-number {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--sn-color-accent);
    color: var(--sn-color-white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    margin: 0 auto 16px;
}
.sn-process-step img { border-radius: var(--sn-radius-md); margin-bottom: 16px; }

/* Included checklist */
.sn-checklist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.sn-checklist li { padding-left: 28px; position: relative; }
.sn-checklist li::before {
    content: "✓";
    position: absolute; left: 0; top: 0;
    color: var(--sn-color-secondary);
    font-weight: 700;
}

/* Client logo strip */
.sn-logo-strip { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; opacity: 0.7; margin-top: 32px; }
.sn-logo-strip img { max-height: 36px; width: auto; }

/* Testimonial cards (grid wrapper for the shortcode output) */
.sn-testimonial-grid { }
.sn-testimonial-card .sn-stars { color: var(--sn-color-accent); letter-spacing: 2px; margin-bottom: 8px; }

/* Final CTA */
.sn-cta-bar {
    background: var(--sn-color-accent);
    color: var(--sn-color-white);
    text-align: center;
    padding: 56px 24px;
    border-radius: var(--sn-radius-lg);
}
.sn-cta-bar h2 { color: var(--sn-color-white); }
.sn-cta-bar .sn-btn { background: var(--sn-color-primary); }
.sn-cta-bar .sn-btn:hover { background: var(--sn-color-primary-light); }

@media (max-width: 900px) {
    .sn-hero-grid { grid-template-columns: 1fr; }
    .sn-stat-strip { grid-template-columns: repeat(2, 1fr); }
    .sn-process-grid { grid-template-columns: 1fr; }
    .sn-checklist { grid-template-columns: 1fr; }
}