/*
Theme Name: SumAssured Unified NextGen (GeneratePress Child)
Theme URI: https://sumassured.in/
Description: 100% Symmetrical Next-Generation GeneratePress Child Theme for SumAssured.in. Unifies the Header, Navigation, Footer, Card Architecture, Sidebar Forms, Blog Archive, Single Posts, Pillar Pages, and Homepage under one cohesive 2026 Fintech Design System.
Author: SumAssured.in
Author URI: https://sumassured.in/
Template: generatepress
Version: 4.2.0
Text Domain: sumassured-unified
*/

/* ==========================================================================
   1. UNIFIED 2026 FINTECH DESIGN TOKENS
   ========================================================================== */

:root {
    /* Core Brand Tokens */
    --sa-brand-dark: #0B132B;       /* Deep Obsidian Navy */
    --sa-brand-surface: #141E38;    /* Surface Navy for banners/footers */
    --sa-brand-primary: #0F172A;    /* Slate Black for headings */

    /* Interactive & Accent Tokens */
    --sa-teal: #00B4D8;             /* Electric Ocean Teal */
    --sa-teal-light: #E0F7FA;       /* Soft Cyan Glow */
    --sa-teal-hover: #0096C7;

    --sa-coral: #FF5A36;            /* Radiant High-Conversion Coral */
    --sa-coral-hover: #E04826;
    --sa-coral-soft: #FFF2EE;

    --sa-emerald: #10B981;          /* Trust Green */
    --sa-emerald-soft: #ECFDF5;

    --sa-amber: #F59E0B;            /* Warm Caution Gold */
    --sa-amber-soft: #FFFBEB;

    /* Neutral & Canvas Layers */
    --sa-bg: #F8FAFC;               /* Crisp Cloud White Canvas */
    --sa-surface: #FFFFFF;          /* Pure White Card Layer */
    --sa-surface-subtle: #F1F5F9;   /* Soft Secondary Fill */
    --sa-border: #E2E8F0;           /* Crisp Hairline Border */
    --sa-border-strong: #CBD5E1;

    /* Typography Palette */
    --sa-text-main: #334155;        /* Slate Body Text */
    --sa-text-heading: #0F172A;     /* Deep Ink Headings */
    --sa-text-muted: #64748B;       /* Secondary Muted Text */
    --sa-text-light: #94A3B8;

    /* Modern Radii & Elevations */
    --sa-radius-xs: 8px;
    --sa-radius-sm: 12px;
    --sa-radius-md: 18px;
    --sa-radius-lg: 22px;
    --sa-radius-full: 9999px;

    --sa-shadow-subtle: 0 2px 6px rgba(11, 19, 43, 0.04);
    --sa-shadow-card: 0 6px 24px -4px rgba(11, 19, 43, 0.06), 0 2px 6px -1px rgba(11, 19, 43, 0.03);
    --sa-shadow-hover: 0 20px 36px -6px rgba(11, 19, 43, 0.12), 0 8px 16px -4px rgba(11, 19, 43, 0.05);

    /* Layout Widths */
    --sa-max-width-desktop: 1280px;
    --sa-blog-reading-width: 900px;
}

/* ==========================================================================
   2. GLOBAL RESET & GENERATEPRESS DEFAULT CLEANUP
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--sa-bg) !important;
    color: var(--sa-text-main) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
    line-height: 1.7;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Ensure native GP header/footer never appear to break symmetry */
.site-header,
#site-navigation,
#mobile-header,
.site-info,
.footer-widgets {
    display: none !important;
}

.site-footer,
.sa-footer {
    display: block !important;
}

.sa-container {
    width: min(var(--sa-max-width-desktop), calc(100% - 40px));
    margin: 0 auto;
}

@media (max-width: 800px) {
    .sa-container {
        width: calc(100% - 24px) !important;
    }
}

/* ==========================================================================
   3. UNIFIED GLOBAL HEADER & DROPDOWN NAVIGATION (ALL PAGES)
   ========================================================================== */

.sa-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sa-border);
    box-shadow: 0 2px 14px rgba(11, 19, 43, 0.04);
}

.sa-header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sa-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sa-brand:hover {
    transform: scale(1.02);
}

.sa-logo {
    display: block;
    width: 185px;
    height: 54px;
    object-fit: contain;
    object-position: left center;
}

/* Desktop Navigation - Strictly Single Line & Symmetrical */
.sa-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.sa-nav ul.sa-primary-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px;
}

.sa-nav ul.sa-primary-menu > li {
    position: relative;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

.sa-nav ul.sa-primary-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sa-brand-dark) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    padding: 9px 14px;
    border-radius: var(--sa-radius-xs);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.sa-nav ul.sa-primary-menu > li > a:hover,
.sa-nav ul.sa-primary-menu > li.current-menu-item > a,
.sa-nav ul.sa-primary-menu > li.current-menu-ancestor > a {
    color: var(--sa-coral) !important;
    background: var(--sa-coral-soft);
}

/* Automatic Dropdown Chevron Indicator on Parent Menu Items */
.sa-nav ul.sa-primary-menu > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.sa-nav ul.sa-primary-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(-135deg);
    margin-top: 2px;
}

/* Desktop Submenu Dropdown */
.sa-nav ul.sa-primary-menu .sub-menu {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);
    box-shadow: var(--sa-shadow-hover);
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Invisible hover bridge so cursor doesn't lose hover between link and dropdown */
.sa-nav ul.sa-primary-menu .sub-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.sa-nav ul.sa-primary-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sa-nav ul.sa-primary-menu .sub-menu li {
    width: 100%;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sa-nav ul.sa-primary-menu .sub-menu li a {
    display: block;
    padding: 10px 18px;
    color: var(--sa-brand-dark) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.sa-nav ul.sa-primary-menu .sub-menu li a:hover {
    background: var(--sa-teal-light);
    color: var(--sa-teal-hover) !important;
    padding-left: 22px;
}

/* Mobile Toggle Button */
.sa-menu-toggle {
    display: none;
    background: var(--sa-surface-subtle) !important;
    border: 1px solid var(--sa-border) !important;
    color: var(--sa-brand-dark) !important;
    padding: 8px 14px !important;
    border-radius: var(--sa-radius-xs) !important;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

.sa-menu-icon { font-size: 22px; line-height: 1; }
.sa-menu-close { display: none; font-size: 22px; line-height: 1; }

/* Responsive Mobile Menu Drawer (<= 860px) */
@media (max-width: 860px) {
    .sa-logo {
        width: 155px;
        height: 46px;
    }

    .sa-menu-toggle {
        display: inline-flex !important;
    }

    .sa-nav {
        position: relative !important;
    }

    .sa-nav > ul.sa-primary-menu {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(340px, calc(100vw - 24px)) !important;
        background: var(--sa-surface) !important;
        border: 1px solid var(--sa-border) !important;
        border-radius: var(--sa-radius-md) !important;
        box-shadow: 0 20px 45px rgba(11, 19, 43, 0.18) !important;
        padding: 8px 0 !important;
        z-index: 999999 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    .sa-nav.menu-open > ul.sa-primary-menu {
        display: flex !important;
    }

    .sa-nav .sa-primary-menu > li {
        width: 100% !important;
        border-bottom: 1px solid var(--sa-surface-subtle);
    }

    .sa-nav .sa-primary-menu > li:last-child {
        border-bottom: none;
    }

    .sa-nav .sa-primary-menu > li > a {
        display: flex !important;
        justify-content: space-between;
        width: 100% !important;
        padding: 13px 20px !important;
        font-size: 15.5px !important;
        border-radius: 0 !important;
    }

    .sa-nav .sa-primary-menu .sub-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: var(--sa-bg) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 4px 0 !important;
    }

    .sa-nav .sa-primary-menu li.submenu-open > .sub-menu {
        display: block !important;
    }

    .sa-nav .sa-primary-menu .sub-menu li a {
        padding: 10px 20px 10px 34px !important;
        white-space: normal !important;
    }

    .sa-nav.menu-open .sa-menu-icon { display: none !important; }
    .sa-nav.menu-open .sa-menu-close { display: inline-block !important; }
}

/* ==========================================================================
   4. UNIFIED GLOBAL FOOTER (ALL PAGES: HOME, BLOG, POSTS, PILLARS)
   ========================================================================== */

.sa-footer {
    background: var(--sa-brand-dark);
    color: #94A3B8;
    padding: 64px 0 32px;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sa-footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr;
    gap: 48px;
}

.sa-footer h3 {
    color: #FFFFFF !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin: 0 0 18px !important;
}

.sa-footer p,
.sa-footer li {
    font-size: 14.5px;
    line-height: 1.7;
    color: #94A3B8;
}

.sa-footer a {
    color: #CBD5E1 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, padding-left 0.15s ease;
}

.sa-footer a:hover {
    color: var(--sa-teal) !important;
}

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

.sa-footer li {
    margin-bottom: 10px;
}

.sa-footer-bottom {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13.5px;
    color: #64748B;
    text-align: center;
}

@media (max-width: 800px) {
    .sa-footer {
        padding: 44px 0 28px;
        margin-top: 40px;
    }
    .sa-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .sa-footer-bottom {
        text-align: left;
    }
}

/* ==========================================================================
   5. SYMMETRICAL BLOG ARCHIVE, CATEGORY HERO & POST CARDS
   Matches Homepage Card Elevation, Radii, Badges & Buttons
   ========================================================================== */

/* Archive Hero Header Banner */
.sa-archive-hero {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--sa-bg) 100%);
    border-bottom: 1px solid var(--sa-border);
    padding: 3.2rem 0 2.6rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.sa-archive-hero h1 {
    font-size: clamp(2rem, 3.8vw, 2.85rem) !important;
    font-weight: 850 !important;
    color: var(--sa-brand-dark) !important;
    letter-spacing: -0.03em;
    margin: 0 auto 0.65rem !important;
    max-width: 820px;
}

.sa-archive-hero p,
.sa-archive-desc p {
    font-size: 1.08rem;
    color: var(--sa-text-muted);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.65;
}

/* Hide redundant GP archive page-header since we render .sa-archive-hero */
.archive .page-header,
.blog .page-header {
    display: none !important;
}

/* Desktop Container & Content-Sidebar Proportions (Wider Blog Display) */
@media (min-width: 992px) {
    #page.grid-container,
    .grid-container,
    .separate-containers .site-content > .grid-container {
        max-width: var(--sa-max-width-desktop) !important;
        width: calc(100% - 40px) !important;
        margin: 0 auto !important;
    }

    .site-content .content-area {
        width: 68.5% !important;
    }

    .site-content #right-sidebar {
        width: 31.5% !important;
        padding-left: 28px !important;
    }

    .separate-containers .inside-right-sidebar {
        margin-top: 0 !important;
    }

    .separate-containers .site-main {
        margin: 0 !important;
    }
}

/* Blog Archive Cards (.blog, .archive, .search) */
body.blog.separate-containers .inside-article,
body.archive.separate-containers .inside-article,
body.search.separate-containers .inside-article {
    background: var(--sa-surface) !important;
    border: 1px solid var(--sa-border) !important;
    border-top: 4px solid var(--sa-teal) !important;
    border-radius: var(--sa-radius-md) !important;
    padding: 36px 40px !important;
    margin-bottom: 28px !important;
    box-shadow: var(--sa-shadow-card) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    position: relative;
    overflow: hidden;
}

/* Alternating Coral/Teal Top Accents on Blog Cards (Like Homepage Bento) */
body.blog.separate-containers article:nth-child(odd) .inside-article,
body.archive.separate-containers article:nth-child(odd) .inside-article {
    border-top-color: var(--sa-coral) !important;
}

body.blog.separate-containers .inside-article:hover,
body.archive.separate-containers .inside-article:hover,
body.search.separate-containers .inside-article:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-hover) !important;
}

/* Archive Post Titles */
body.blog .entry-title,
body.archive .entry-title,
body.search .entry-title {
    font-size: clamp(1.45rem, 2.4vw, 1.85rem) !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
}

body.blog .entry-title a,
body.archive .entry-title a,
body.search .entry-title a {
    color: var(--sa-brand-dark) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

body.blog .entry-title a:hover,
body.archive .entry-title a:hover,
body.search .entry-title a:hover {
    color: var(--sa-coral) !important;
}

/* Featured Image inside Blog Cards & Single Posts */
.post-image img,
.featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--sa-radius-sm) !important;
    box-shadow: var(--sa-shadow-subtle);
    display: block;
}

.post-image,
.featured-image {
    margin: 18px 0 22px !important;
}

/* Transform "Read more" link into a Modern Symmetrical Pill Button */
a.read-more,
.entry-summary a.read-more {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 18px;
    background: var(--sa-coral-soft);
    color: var(--sa-coral) !important;
    font-size: 0.9rem;
    font-weight: 750;
    border-radius: var(--sa-radius-xs);
    text-decoration: none !important;
    border: 1px solid rgba(255, 90, 54, 0.2);
    transition: all 0.2s ease;
}

a.read-more::after {
    content: "→";
    font-weight: 800;
    transition: transform 0.2s ease;
}

a.read-more:hover {
    background: var(--sa-coral);
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

a.read-more:hover::after {
    transform: translateX(3px);
}

/* Archive Footer Meta (Categories, Tags, Comments) as Clean Badges */
footer.entry-meta {
    margin-top: 22px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--sa-surface-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 0.85rem !important;
    color: var(--sa-text-muted);
}

footer.entry-meta a {
    color: var(--sa-brand-dark) !important;
    background: var(--sa-surface-subtle);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

footer.entry-meta a:hover {
    background: var(--sa-teal-light);
    color: var(--sa-teal-hover) !important;
}

/* Modern Symmetrical Pagination (1 2 ... 15 Next ->) */
.paging-navigation {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    margin-top: 12px !important;
}

.paging-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.paging-navigation .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    background: var(--sa-surface);
    color: var(--sa-brand-dark) !important;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-xs);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: var(--sa-shadow-subtle);
    transition: all 0.2s ease;
}

.paging-navigation .page-numbers.current {
    background: var(--sa-brand-dark);
    color: #FFFFFF !important;
    border-color: var(--sa-brand-dark);
}

.paging-navigation a.page-numbers:hover {
    background: var(--sa-coral);
    color: #FFFFFF !important;
    border-color: var(--sa-coral);
    transform: translateY(-2px);
}

/* ==========================================================================
   6. SINGLE BLOG POST & PAGE SYMMETRY
   ========================================================================== */

body.single-post.separate-containers .inside-article,
body.page.separate-containers .inside-article {
    background: var(--sa-surface) !important;
    border: 1px solid var(--sa-border) !important;
    border-top: 4px solid var(--sa-coral) !important;
    border-radius: var(--sa-radius-md) !important;
    padding: 44px 48px !important;
    box-shadow: var(--sa-shadow-card) !important;
}

/* Post Header Date & Author Strip */
.entry-header .entry-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: var(--sa-surface-subtle);
    padding: 6px 14px;
    border-radius: var(--sa-radius-full);
    font-size: 0.86rem !important;
    font-weight: 600;
    color: var(--sa-text-muted) !important;
    margin-top: 6px;
    margin-bottom: 10px;
}

.entry-header .entry-meta a {
    color: var(--sa-coral) !important;
    font-weight: 700;
    text-decoration: none !important;
}

.entry-header .entry-meta a:hover {
    color: var(--sa-brand-dark) !important;
    text-decoration: underline !important;
}

/* Article Headings (H1 - H4) */
.entry-title,
.entry-content h1,
.wp-block-post-content h1 {
    font-size: clamp(1.75rem, 3vw, 2.2rem) !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    color: var(--sa-brand-dark) !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.entry-content h2,
.wp-block-post-content h2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    color: var(--sa-brand-dark) !important;
    border-left: 5px solid var(--sa-coral) !important;
    padding-left: 15px !important;
    margin-top: 38px !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.015em;
}

.entry-content h3,
.wp-block-post-content h3 {
    font-size: 21px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
    color: var(--sa-teal-hover) !important;
    margin-top: 28px !important;
    margin-bottom: 12px !important;
}

.entry-content h4,
.wp-block-post-content h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-top: 22px !important;
    margin-bottom: 10px !important;
}

.entry-content p {
    color: var(--sa-text-main);
    font-size: 17.5px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.entry-content a {
    color: var(--sa-coral);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.entry-content a:hover {
    color: var(--sa-brand-dark);
}

.entry-content strong {
    color: var(--sa-brand-dark);
}

/* ==========================================================================
   7. SYMMETRICAL SIDEBAR WIDGETS, SUBSCRIBE FORM & SEARCH BOX
   Matches Screenshot 084348.jpg Sidebar Elements
   ========================================================================== */

.widget-area .widget {
    background: var(--sa-surface) !important;
    border: 1px solid var(--sa-border) !important;
    border-top: 4px solid var(--sa-brand-dark) !important;
    border-radius: var(--sa-radius-md) !important;
    padding: 26px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--sa-shadow-card) !important;
}

.widget-area .widget:first-child {
    border-top-color: var(--sa-coral) !important;
}

.widget-area .widget-title,
.widget-area .widget h2,
.widget-area .widget h3 {
    color: var(--sa-brand-dark) !important;
    font-size: 18.5px !important;
    font-weight: 800 !important;
    margin: 0 0 16px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--sa-teal) !important;
}

/* Form Labels & Inputs inside Sidebar (First Name, Last Name, Email, Search) */
.widget-area label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sa-brand-dark);
    margin-bottom: 6px;
}

.widget-area input[type="text"],
.widget-area input[type="email"],
.widget-area input[type="url"],
.widget-area input[type="search"],
.widget-area select,
.widget-area textarea {
    width: 100%;
    background: var(--sa-bg) !important;
    border: 1.5px solid var(--sa-border) !important;
    border-radius: var(--sa-radius-xs) !important;
    padding: 11px 14px !important;
    font-size: 0.95rem !important;
    color: var(--sa-brand-dark) !important;
    margin-bottom: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.widget-area input[type="text"]:focus,
.widget-area input[type="email"]:focus,
.widget-area input[type="search"]:focus {
    outline: none !important;
    background: #FFFFFF !important;
    border-color: var(--sa-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15) !important;
}

/* Sidebar Subscribe & Submit Buttons */
.widget-area input[type="submit"],
.widget-area button[type="submit"],
.widget-area .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sa-coral) 0%, var(--sa-coral-hover) 100%) !important;
    color: #FFFFFF !important;
    font-size: 0.95rem !important;
    font-weight: 750 !important;
    padding: 11px 22px !important;
    border: none !important;
    border-radius: var(--sa-radius-xs) !important;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 90, 54, 0.25);
    transition: all 0.2s ease;
}

.widget-area input[type="submit"]:hover,
.widget-area button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 90, 54, 0.35);
}

/* Search Block / Widget inside Sidebar */
.widget-area .wp-block-search__inside-wrapper,
.widget-area .search-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.widget-area .wp-block-search__input,
.widget-area .search-field {
    margin-bottom: 0 !important;
    flex: 1;
}

.widget-area .wp-block-search__button,
.widget-area .search-submit {
    background: var(--sa-brand-dark) !important;
    box-shadow: none !important;
    padding: 0 18px !important;
}

.widget-area .wp-block-search__button:hover,
.widget-area .search-submit:hover {
    background: var(--sa-coral) !important;
}

/* ==========================================================================
   8. HOMEPAGE BENTO GRID & INTERACTIVE DUAL-SLIDER HLV CARD
   ========================================================================== */

.sa-fresh-wrap {
    padding-bottom: 2rem;
}

.sa-bound {
    max-width: var(--sa-max-width-desktop);
    margin: 0 auto;
    padding: 0 20px;
}

.sa-hero-split {
    padding: 4.5rem 0 3.5rem;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
}

.sa-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--sa-teal-light);
    color: #0369A1;
    font-size: 0.84rem;
    font-weight: 750;
    padding: 0.38rem 1rem;
    border-radius: var(--sa-radius-full);
    margin-bottom: 1.25rem;
    border: 1px solid rgba(0, 180, 216, 0.25);
}

.sa-pill-dot {
    width: 8px;
    height: 8px;
    background: var(--sa-coral);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--sa-coral);
}

.sa-hero-left h1 {
    font-size: clamp(2.25rem, 4.3vw, 3.45rem) !important;
    font-weight: 850 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.035em;
    color: var(--sa-brand-dark) !important;
    margin: 0 0 1.25rem !important;
}

.sa-hero-left h1 span.teal-highlight {
    color: var(--sa-teal);
}

.sa-hero-left h1 span.coral-highlight {
    color: var(--sa-coral);
}

.sa-hero-left p {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--sa-text-muted);
    margin-bottom: 2rem;
    max-width: 560px;
}

.sa-hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.sa-btn-primary {
    background: linear-gradient(135deg, var(--sa-coral) 0%, var(--sa-coral-hover) 100%) !important;
    color: #FFFFFF !important;
    font-weight: 750 !important;
    padding: 0.9rem 1.85rem !important;
    border-radius: var(--sa-radius-sm) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 22px rgba(255, 90, 54, 0.28);
    transition: all 0.25s ease;
}

.sa-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 90, 54, 0.38);
}

.sa-btn-outline {
    background: var(--sa-surface) !important;
    color: var(--sa-brand-dark) !important;
    border: 1.5px solid var(--sa-border-strong) !important;
    font-weight: 700 !important;
    padding: 0.9rem 1.7rem !important;
    border-radius: var(--sa-radius-sm) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.sa-btn-outline:hover {
    border-color: var(--sa-teal) !important;
    color: var(--sa-teal-hover) !important;
    background: var(--sa-teal-light) !important;
}

/* Interactive HLV Card */
.sa-quick-calc-card {
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-top: 5px solid var(--sa-coral);
    border-radius: var(--sa-radius-lg);
    padding: 2.2rem 2rem;
    box-shadow: var(--sa-shadow-card);
    position: relative;
}

.sa-calc-badge {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--sa-coral);
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}

.sa-calc-title {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--sa-brand-dark) !important;
    margin: 0 0 0.4rem !important;
}

.sa-calc-desc {
    font-size: 0.88rem;
    color: var(--sa-text-muted);
    margin-bottom: 1.4rem;
}

.sa-slider-group {
    margin-bottom: 1.25rem;
}

.sa-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--sa-brand-dark);
    margin-bottom: 0.5rem;
}

.sa-slider-labels span.val-highlight {
    color: var(--sa-coral);
    font-weight: 850;
}

.sa-range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--sa-border);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.sa-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sa-teal);
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(11, 19, 43, 0.25);
    cursor: pointer;
}

.sa-calc-result-box {
    background: var(--sa-bg);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);
    padding: 1.15rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.sa-calc-result-box span.lbl {
    font-size: 0.86rem;
    color: var(--sa-text-muted);
    font-weight: 600;
}

.sa-calc-result-box span.res-num {
    font-size: 1.55rem;
    font-weight: 850;
    color: var(--sa-brand-dark);
}

.sa-calc-link-btn {
    display: block;
    text-align: center;
    background: var(--sa-brand-dark);
    color: #FFFFFF !important;
    font-size: 0.92rem;
    font-weight: 750;
    padding: 0.88rem;
    border-radius: var(--sa-radius-xs);
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.sa-calc-link-btn:hover {
    background: var(--sa-coral);
    transform: translateY(-1px);
}

/* Bento Section */
.sa-section-header {
    text-align: center;
    margin: 4.5rem 0 2.5rem;
}

.sa-section-header h2 {
    font-size: 2.1rem !important;
    font-weight: 850 !important;
    color: var(--sa-brand-dark) !important;
    margin: 0 0 0.4rem !important;
}

.sa-section-header p {
    color: var(--sa-text-muted);
    font-size: 1.05rem;
    margin: 0;
}

.sa-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.sa-bento-card {
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-lg);
    padding: 2.1rem;
    box-shadow: var(--sa-shadow-card);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
}

.sa-bento-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sa-shadow-hover);
    border-color: var(--sa-teal);
}

.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }

.card-lic {
    background: linear-gradient(135deg, #FFFFFF 65%, var(--sa-coral-soft) 100%);
    border-top: 4px solid var(--sa-coral);
}

.card-calculators {
    background: linear-gradient(135deg, #FFFFFF 65%, var(--sa-teal-light) 100%);
    border-top: 4px solid var(--sa-teal);
}

.sa-card-top-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--sa-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.icon-bg-coral { background: var(--sa-coral-soft); color: var(--sa-coral); }
.icon-bg-teal  { background: var(--sa-teal-light); color: var(--sa-teal-hover); }
.icon-bg-navy  { background: var(--sa-surface-subtle); color: var(--sa-brand-dark); }

.sa-bento-card h3 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: var(--sa-brand-dark) !important;
    margin: 0 0 0.6rem !important;
}

.sa-bento-card p {
    font-size: 0.96rem;
    color: var(--sa-text-muted);
    line-height: 1.65;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.sa-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.94rem;
    font-weight: 750;
    color: var(--sa-brand-dark);
    transition: gap 0.2s ease, color 0.2s ease;
}

.sa-bento-card:hover .sa-card-action {
    gap: 0.75rem;
    color: var(--sa-coral);
}

.sa-quick-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.sa-quick-tags span {
    font-size: 0.78rem;
    background: var(--sa-surface-subtle);
    color: var(--sa-brand-dark);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-weight: 650;
}

/* Umbrella Brand Banner */
.sa-brand-banner {
    margin-top: 4.5rem;
    background: linear-gradient(135deg, var(--sa-brand-dark) 0%, var(--sa-brand-surface) 100%);
    border-radius: var(--sa-radius-lg);
    padding: 3.2rem 2.8rem;
    color: #FFFFFF;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2.5rem;
    align-items: center;
    box-shadow: var(--sa-shadow-hover);
}

.sa-brand-banner h3 {
    font-size: 1.9rem !important;
    font-weight: 850 !important;
    color: #FFFFFF !important;
    margin: 0 0 0.6rem !important;
}

.sa-brand-banner h3 span {
    color: var(--sa-teal);
}

.sa-brand-banner p {
    color: #CBD5E1;
    font-size: 1.02rem;
    line-height: 1.68;
    margin: 0;
}

.sa-trust-points {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sa-point {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.96rem;
    color: #F1F5F9;
}

.sa-point svg {
    color: var(--sa-teal);
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .sa-hero-split {
        grid-template-columns: 1fr;
        padding: 3rem 0 2rem;
        gap: 2.5rem;
    }
    .span-7, .span-5, .span-4 {
        grid-column: span 12;
    }
    .sa-brand-banner {
        grid-template-columns: 1fr;
        padding: 2.2rem 1.6rem;
    }
}

/* ==========================================================================
   9. REUSABLE ARTICLE CALLOUTS, TABLES & STAT CARDS
   ========================================================================== */

.sa-key-takeaway {
    margin: 28px 0;
    padding: 22px 24px;
    background: linear-gradient(135deg, var(--sa-teal-light) 0%, #FFFFFF 100%);
    border: 1px solid rgba(0, 180, 216, 0.35);
    border-left: 5px solid var(--sa-teal);
    border-radius: var(--sa-radius-sm);
}

.sa-key-takeaway .sa-box-title {
    margin: 0 0 8px;
    color: #0369A1;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sa-info-box {
    margin: 26px 0;
    padding: 20px 22px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-left: 5px solid #0284C7;
    border-radius: var(--sa-radius-sm);
}

.sa-warning-box {
    margin: 26px 0;
    padding: 20px 22px;
    background: var(--sa-amber-soft);
    border: 1px solid #FDE68A;
    border-left: 5px solid var(--sa-amber);
    border-radius: var(--sa-radius-sm);
}

.sa-danger-box {
    margin: 26px 0;
    padding: 20px 22px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 5px solid #EF4444;
    border-radius: var(--sa-radius-sm);
}

.sa-success-box {
    margin: 26px 0;
    padding: 20px 22px;
    background: var(--sa-emerald-soft);
    border: 1px solid #A7F3D0;
    border-left: 5px solid var(--sa-emerald);
    border-radius: var(--sa-radius-sm);
}

.sa-agent-tip,
.sa-customer-tip {
    margin: 28px 0;
    padding: 21px 23px;
    background: var(--sa-surface-subtle);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);
}

.sa-agent-tip .sa-box-title {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    background: var(--sa-brand-dark);
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sa-customer-tip .sa-box-title {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    background: var(--sa-coral);
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sa-table-wrap {
    width: 100%;
    margin: 28px 0;
    overflow-x: auto;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);
}

.sa-comparison-table,
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sa-surface);
    font-size: 0.95rem;
}

.sa-comparison-table th,
.entry-content table th {
    padding: 14px 16px;
    background: var(--sa-brand-dark);
    color: #FFFFFF;
    font-weight: 750;
    text-align: left;
}

.sa-comparison-table td,
.entry-content table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--sa-border);
}

.sa-comparison-table tbody tr:nth-child(even),
.entry-content table tbody tr:nth-child(even) {
    background: #F8FAFC;
}

.sa-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 30px 0;
}

.sa-stat-card {
    padding: 24px 18px;
    text-align: center;
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-sm);
    box-shadow: var(--sa-shadow-subtle);
}

.sa-stat-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--sa-coral);
    font-size: 1.7rem;
}

/* Pillar & Forms Page Widths */
body.sa-pillar-layout .sa-content-inner,
body.sa-forms-layout .sa-content-inner {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
}

body.sa-pillar-layout .sa-content,
body.sa-forms-layout .sa-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 44px 0 64px;
}

/* ==========================================================================
   10. MOBILE SCREEN REAL-ESTATE MAXIMIZER (<= 768px)
   Edge-to-Edge Reading & Unindented Lists
   ========================================================================== */

@media (max-width: 768px) {
    body.single-post.separate-containers #page,
    body.single-post.separate-containers .site-content,
    body.single-post.separate-containers .site-content > .grid-container,
    body.separate-containers #page,
    body.separate-containers .site-content,
    body.separate-containers .site-content > .grid-container,
    body.single-post.separate-containers .content-area,
    body.single-post.separate-containers .site-main,
    body.separate-containers .content-area,
    body.separate-containers .site-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.single-post.separate-containers .site-main > article,
    body.single-post.separate-containers .inside-article,
    body.page.separate-containers .inside-article {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 18px 15px !important;
        box-sizing: border-box !important;
    }

    body.blog.separate-containers .inside-article,
    body.archive.separate-containers .inside-article,
    body.search.separate-containers .inside-article {
        width: calc(100% - 20px) !important;
        margin: 0 auto 18px !important;
        padding: 22px 16px !important;
        border-radius: var(--sa-radius-sm) !important;
    }

    .entry-content ul,
    .entry-content ol {
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style-position: inside !important;
    }

    .entry-content ul > li,
    .entry-content ol > li {
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 8px;
    }

    .entry-content {
        font-size: 16.5px !important;
        line-height: 1.72 !important;
    }

    .entry-content h1, .entry-title { font-size: 25px !important; line-height: 1.26 !important; }
    .entry-content h2 { font-size: 21.5px !important; line-height: 1.3 !important; }
    .entry-content h3 { font-size: 19px !important; line-height: 1.35 !important; }
    .entry-content h4 { font-size: 17px !important; }

    .sa-bound {
        padding: 0 12px !important;
    }

    .sa-stat-grid {
        grid-template-columns: 1fr;
    }

    .widget-area .widget {
        width: calc(100% - 20px) !important;
        margin: 0 auto 18px !important;
        padding: 20px 16px !important;
    }
}

/* Defensive rules for Page ID 5973 & 5992 */
.page-id-5992 ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* ==========================================================================
   CRITICAL MOBILE CONTAINER & PADDING MAXIMIZER (<= 800px)
   ========================================================================== */
@media only screen and (max-width: 800px) {

    /* 1. Strip ALL outer margins, paddings & width limits on GeneratePress wrappers */
    html body,
    html body #page,
    html body #page.site,
    html body #page.grid-container,
    html body .grid-container,
    html body .site-content,
    html body .site-content > .grid-container,
    html body .content-area,
    html body #primary,
    html body .site-main,
    html body #main,
    html body .site-main > article,
    html body article.post,
    html body article.page,
    html body.separate-containers #page,
    html body.separate-containers .site-content,
    html body.separate-containers .site-main,
    html body.one-container .site-content,
    html body.one-container .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Remove the card box, side borders, shadow, and heavy padding on mobile posts */
    html body .inside-article,
    html body.separate-containers .inside-article,
    html body.single-post .inside-article,
    html body.single .inside-article,
    html body.page .inside-article,
    html body.one-container .inside-article {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px 10px !important; /* Only 10px side padding for maximum text width */
        border: none !important;
        border-top: 3px solid #FF5A36 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #FFFFFF !important;
        box-sizing: border-box !important;
    }

    /* 3. Ensure entry-content and any custom wrapper DIVs inside posts don't add extra side padding */
    html body .entry-content,
    html body .entry-header,
    html body .entry-meta,
    html body .sa-content,
    html body .sa-content-inner,
    html body .wp-block-group,
    html body .wp-block- group__inner-container,
    html body .entry-content > .wp-block-group,
    html body .entry-content > div[class*="container"],
    html body .entry-content > div[class*="wrapper"],
    html body .entry-content > div[class*="content"],
    html body .entry-content > section {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 4. Make Table of Contents box sleek and wide on mobile */
    html body #ez-toc-container,
    html body div#ez-toc-container,
    html body .ez-toc-v2_0_69,
    html body .lwptoc,
    html body .lwptoc_i,
    html body .wp-block-rank-math-toc-block {
        width: 100% !important;
        max-width: 100% !important;
        margin: 14px 0 !important;
        padding: 12px 12px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    html body #ez-toc-container ul,
    html body #ez-toc-container ol,
    html body .ez-toc-list {
        padding-left: 4px !important;
        margin-left: 0 !important;
    }

    /* 5. Unindent all lists on mobile so bullets don't waste horizontal space */
    html body .entry-content ul,
    html body .entry-content ol {
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style-position: inside !important;
    }

    html body .entry-content li {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}