/*
 Theme Name:   Sacred Soul Alignment Child
 Theme URI:    https://sacredsoulalignment.com
 Description:  Divi 4 child theme for Sacred Soul Alignment - energy healing and spiritual transformation
 Author:       Erik
 Template:     Divi
 Version:      1.6.5
 Text Domain:  ssa-child
*/


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* --- Primary Palette --- */
    --ssa-purple:        #675980;
    --ssa-purple-light:  #8a7ba0;
    --ssa-purple-dark:   #4e4363;

    --ssa-teal:          #266a7b;
    --ssa-teal-light:    #3a8d9e;
    --ssa-teal-dark:     #1a4e5b;

    --ssa-rose:          #983566;
    --ssa-rose-light:    #b84d82;
    --ssa-rose-dark:     #76284f;

    --ssa-gold:          #d8a93c;
    --ssa-gold-light:    #e4c06a;
    --ssa-gold-dark:     #b88c2a;

    --ssa-teal-bright:   #05a1b8;
    --ssa-teal-bright-light: #2abdd1;
    --ssa-teal-bright-dark:  #048999;

    --ssa-mauve:         #916089;
    --ssa-mauve-light:   #ab7ea4;
    --ssa-mauve-dark:    #73496c;

    --ssa-teal-pale:       #8fdbe8;
    --ssa-teal-pale-light: #bce9f1;

    /* --- Neutrals --- */
    --ssa-cream:         #efe2d3;
    --ssa-cream-light:   #f5ebe1;
    --ssa-black:         #000000;
    --ssa-white:         #ffffff;

    /* --- Typography Scale (fluid clamp) --- */
    --ssa-text-xs:       clamp(0.6875rem, 0.625rem + 0.2vw, 0.75rem);       /* 11-12px */
    --ssa-text-sm:       clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);       /* 13-14px */
    --ssa-text-base:     clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);    /* 15-17px */
    --ssa-text-md:       clamp(1.0625rem, 0.975rem + 0.35vw, 1.25rem);      /* 17-20px */
    --ssa-text-lg:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);            /* 20-24px */
    --ssa-text-xl:       clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);           /* 24-30px */
    --ssa-text-2xl:      clamp(1.875rem, 1.55rem + 1.3vw, 2.5rem);          /* 30-40px */
    --ssa-text-3xl:      clamp(2.25rem, 1.8rem + 1.8vw, 3.125rem);          /* 36-50px */
    --ssa-text-display:  clamp(2.75rem, 2.1rem + 2.6vw, 4rem);              /* 44-64px */

    /* --- Spacing Scale (fluid clamp) --- */
    --ssa-space-3xs:     clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);         /* 4-6px */
    --ssa-space-2xs:     clamp(0.375rem, 0.3rem + 0.25vw, 0.5rem);          /* 6-8px */
    --ssa-space-xs:      clamp(0.5rem, 0.4rem + 0.35vw, 0.75rem);           /* 8-12px */
    --ssa-space-sm:      clamp(0.75rem, 0.6rem + 0.5vw, 1rem);              /* 12-16px */
    --ssa-space-md:      clamp(1rem, 0.8rem + 0.8vw, 1.5rem);               /* 16-24px */
    --ssa-space-lg:      clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);            /* 24-36px */
    --ssa-space-xl:      clamp(2rem, 1.5rem + 2vw, 3rem);                   /* 32-48px */
    --ssa-space-2xl:     clamp(3rem, 2.2rem + 3vw, 4.5rem);                 /* 48-72px */
    --ssa-space-3xl:     clamp(4rem, 3rem + 4vw, 6rem);                     /* 64-96px */

    /* --- Shadows --- */
    --ssa-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
    --ssa-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.1);
    --ssa-shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);

    /* --- Transitions --- */
    --ssa-ease:          cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* ==========================================================================
   2. SCROLL ANIMATIONS
   ========================================================================== */

.ssa-animate-ready {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.ssa-animate-ready.ssa-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays (applied via JS per row) */
.ssa-stagger-1 { transition-delay: 0ms; }
.ssa-stagger-2 { transition-delay: 120ms; }
.ssa-stagger-3 { transition-delay: 240ms; }
.ssa-stagger-4 { transition-delay: 360ms; }
.ssa-stagger-5 { transition-delay: 480ms; }
.ssa-stagger-6 { transition-delay: 600ms; }

@media (prefers-reduced-motion: reduce) {
    .ssa-animate-ready {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================================================
   3. HERO SECTION ENTRANCE ANIMATION
   Add "ssa-hero" to the hero section's CSS Class field in Divi.
   Children animate in on page load with a staggered fade-up.
   ========================================================================== */

@keyframes ssa-hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ssa-hero .et_pb_text,
.ssa-hero .et_pb_heading,
.ssa-hero .et_pb_button_module_wrapper,
.ssa-hero .et_pb_image,
.ssa-hero .et_pb_code,
.ssa-hero .et_pb_blurb,
.ssa-hero .ssa-hero-animate {
    animation: ssa-hero-fade-up 0.7s ease-out both;
}

.ssa-hero .et_pb_row .et_pb_column > *:nth-child(1) { animation-delay: 0.1s; }
.ssa-hero .et_pb_row .et_pb_column > *:nth-child(2) { animation-delay: 0.25s; }
.ssa-hero .et_pb_row .et_pb_column > *:nth-child(3) { animation-delay: 0.4s; }
.ssa-hero .et_pb_row .et_pb_column > *:nth-child(4) { animation-delay: 0.55s; }
.ssa-hero .et_pb_row .et_pb_column > *:nth-child(5) { animation-delay: 0.7s; }

@media (prefers-reduced-motion: reduce) {
    .ssa-hero .et_pb_text,
    .ssa-hero .et_pb_heading,
    .ssa-hero .et_pb_button_module_wrapper,
    .ssa-hero .et_pb_image,
    .ssa-hero .et_pb_code,
    .ssa-hero .et_pb_blurb,
    .ssa-hero .ssa-hero-animate {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   4. NAVIGATION
   Add "ssa-nav-lift" to the Divi Menu module's CSS Class field.
   ========================================================================== */

.ssa-nav-lift .et-menu-nav li a {
    display: inline-block;
    transition: transform 0.3s var(--ssa-ease), color 0.3s var(--ssa-ease) !important;
}

.ssa-nav-lift .et-menu-nav li a:hover {
    transform: translateY(-3px) !important;
    color: var(--ssa-teal-bright) !important;
}

.ssa-nav-lift .et-menu-nav li.current-menu-item > a,
.ssa-nav-lift .et-menu-nav li.current_page_item > a {
    color: var(--ssa-teal-bright) !important;
}

/* Dropdown menus */
.ssa-nav-lift .et-menu-nav li ul.sub-menu {
    border-top: 2px solid var(--ssa-gold);
    box-shadow: var(--ssa-shadow-md);
}

.ssa-nav-lift .et-menu-nav li ul.sub-menu li a:hover {
    color: var(--ssa-teal-bright) !important;
    background-color: var(--ssa-cream-light) !important;
    transform: none !important;
}

/* Mobile menu adjustments */
@media (max-width: 980px) {
    .ssa-nav-lift .et-menu-nav li a:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssa-nav-lift .et-menu-nav li a {
        transition: color 0.3s var(--ssa-ease) !important;
    }

    .ssa-nav-lift .et-menu-nav li a:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   5. BLOG MODULE & POST STYLING
   ========================================================================== */

/* --- Blog grid cards (equal-height flex layout) --- */
.et_pb_blog_grid .et_pb_post {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--ssa-shadow-sm);
    transition: transform 0.3s var(--ssa-ease), box-shadow 0.3s var(--ssa-ease);
    background: var(--ssa-white);
}

.et_pb_blog_grid .et_pb_post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Uniform image containers */
.et_pb_blog_grid .et_pb_post .entry-featured-image-url,
.et_pb_blog_grid .et_pb_image_container {
    display: block;
    overflow: hidden;
    height: 200px;
    border-radius: 12px 12px 0 0;
}

.et_pb_blog_grid .et_pb_post .entry-featured-image-url img,
.et_pb_blog_grid .et_pb_image_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ssa-ease);
}

.et_pb_blog_grid .et_pb_post:hover .entry-featured-image-url img,
.et_pb_blog_grid .et_pb_post:hover .et_pb_image_container img {
    transform: scale(1.05);
}

/* Post content area - flex column to push Read More to bottom */
.et_pb_blog_grid .et_pb_post .post-content-inner,
.et_pb_blog_grid .et_pb_post .post-content,
.et_pb_blog_grid .et_pb_post_content {
    padding: var(--ssa-space-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Post titles in blog grid */
.et_pb_blog_grid .et_pb_post .entry-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
}

.et_pb_blog_grid .et_pb_post .entry-title,
.et_pb_blog_grid .et_pb_post .entry-title a {
    color: var(--ssa-purple);
    transition: color 0.25s var(--ssa-ease);
    text-decoration: none;
}

.et_pb_blog_grid .et_pb_post .entry-title a:hover {
    color: var(--ssa-teal-bright);
}

/* Meta info (date, author, category) */
.et_pb_blog_grid .et_pb_post .post-meta,
.et_pb_blog_grid .et_pb_post .post-meta a,
.single-post .post-meta,
.single-post .post-meta a {
    color: var(--ssa-mauve);
    font-size: var(--ssa-text-xs);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.et_pb_blog_grid .et_pb_post .post-meta a:hover,
.single-post .post-meta a:hover {
    color: var(--ssa-teal-bright);
}

/* Category tags */
.et_pb_blog_grid .et_pb_post .post-categories a,
.single-post .post-categories a {
    color: var(--ssa-teal);
    text-decoration: none;
    transition: color 0.25s var(--ssa-ease);
}

.et_pb_blog_grid .et_pb_post .post-categories a:hover,
.single-post .post-categories a:hover {
    color: var(--ssa-teal-bright);
}

/* Excerpt text - clamp to 3 lines */
.et_pb_blog_grid .post-content p,
.et_pb_blog_grid .et_pb_post .post-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Read more" as a gold pill button */
.et_pb_blog_grid .et_pb_post .more-link,
.et_pb_blog_grid .et_pb_post a.more-link {
    display: inline-block;
    align-self: flex-start;
    background: var(--ssa-gold);
    color: var(--ssa-white) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 22px;
    border-radius: 999px;
    transition: transform 0.3s var(--ssa-ease),
                box-shadow 0.3s var(--ssa-ease),
                background 0.3s var(--ssa-ease);
    margin-top: auto;
}

.et_pb_blog_grid .et_pb_post .more-link:hover,
.et_pb_blog_grid .et_pb_post a.more-link:hover {
    background: linear-gradient(135deg, var(--ssa-gold-light), var(--ssa-gold));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(216, 169, 60, 0.35);
    color: var(--ssa-white) !important;
}

/* --- Single post content --- */
.single-post .entry-content a {
    color: var(--ssa-teal-bright);
    text-decoration: underline;
    text-decoration-color: rgba(5, 161, 184, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.25s var(--ssa-ease);
}

.single-post .entry-content a:hover {
    text-decoration-color: var(--ssa-teal-bright);
}

/* Blockquotes */
.single-post .entry-content blockquote,
.et_pb_text blockquote {
    border-left: 3px solid var(--ssa-gold);
    margin: var(--ssa-space-lg) 0;
    padding: var(--ssa-space-md) var(--ssa-space-lg);
    background: var(--ssa-cream-light);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: var(--ssa-purple-dark);
}

.single-post .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Post images */
.single-post .entry-content img {
    border-radius: 6px;
    height: auto;
}

/* Post headings */
.single-post .entry-content h2 {
    color: var(--ssa-purple);
    margin-top: var(--ssa-space-xl);
    margin-bottom: var(--ssa-space-sm);
}

.single-post .entry-content h3 {
    color: var(--ssa-teal);
    margin-top: var(--ssa-space-lg);
    margin-bottom: var(--ssa-space-xs);
}

.single-post .entry-content h4 {
    color: var(--ssa-mauve);
    margin-top: var(--ssa-space-md);
    margin-bottom: var(--ssa-space-xs);
}

/* Lists in posts */
.single-post .entry-content ul,
.single-post .entry-content ol {
    padding-left: var(--ssa-space-lg);
    margin-bottom: var(--ssa-space-md);
}

.single-post .entry-content li {
    margin-bottom: var(--ssa-space-2xs);
}

/* Code in posts */
.single-post .entry-content code {
    background: var(--ssa-cream);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

.single-post .entry-content pre {
    background: var(--ssa-cream);
    padding: var(--ssa-space-md);
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: var(--ssa-space-md);
}

/* Post navigation */
.single-post .post-nav-link a {
    color: var(--ssa-purple);
    text-decoration: none;
    transition: color 0.25s var(--ssa-ease);
}

.single-post .post-nav-link a:hover {
    color: var(--ssa-teal-bright);
}

/* Blog reduced motion */
@media (prefers-reduced-motion: reduce) {
    .et_pb_blog_grid .et_pb_post {
        transition: none;
    }

    .et_pb_blog_grid .et_pb_post:hover {
        transform: none;
    }

    .et_pb_blog_grid .et_pb_post .entry-featured-image-url img,
    .et_pb_blog_grid .et_pb_image_container img {
        transition: none;
    }

    .et_pb_blog_grid .et_pb_post:hover .entry-featured-image-url img,
    .et_pb_blog_grid .et_pb_post:hover .et_pb_image_container img {
        transform: none;
    }

    .et_pb_blog_grid .et_pb_post .more-link,
    .et_pb_blog_grid .et_pb_post a.more-link {
        transition: background 0.2s ease !important;
    }

    .et_pb_blog_grid .et_pb_post .more-link:hover,
    .et_pb_blog_grid .et_pb_post a.more-link:hover {
        transform: none;
    }
}


/* ==========================================================================
   6. BACK TO TOP BUTTON
   ========================================================================== */

.ssa-back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ssa-purple);
    color: var(--ssa-cream-light);
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.35s var(--ssa-ease),
                visibility 0.35s var(--ssa-ease),
                transform 0.35s var(--ssa-ease),
                background-color 0.25s var(--ssa-ease),
                box-shadow 0.25s var(--ssa-ease);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(103, 89, 128, 0.3);
}

.ssa-back-to-top.ssa-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ssa-back-to-top:hover {
    background: var(--ssa-gold);
    color: var(--ssa-black);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(216, 169, 60, 0.4);
}

.ssa-back-to-top svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

@media (max-width: 600px) {
    .ssa-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }

    .ssa-back-to-top svg {
        width: 18px;
        height: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssa-back-to-top {
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .ssa-back-to-top.ssa-visible {
        transform: none;
    }

    .ssa-back-to-top:hover {
        transform: none;
    }
}


/* ==========================================================================
   7. GLOBAL LINK STYLES
   ========================================================================== */

a {
    color: var(--ssa-teal-bright);
    transition: color 0.25s var(--ssa-ease);
}

a:hover {
    color: var(--ssa-teal-bright-dark);
}


/* ==========================================================================
   8. UTILITY HELPERS
   ========================================================================== */

/* Section background helpers (apply via Divi CSS Class) */
.ssa-bg-cream {
    background-color: var(--ssa-cream) !important;
}

.ssa-bg-cream-light {
    background-color: var(--ssa-cream-light) !important;
}

.ssa-bg-purple {
    background-color: var(--ssa-purple) !important;
}

.ssa-bg-teal {
    background-color: var(--ssa-teal) !important;
}


/* ==========================================================================
   9. BUTTONS
   Apply btn-gold, btn-purple, btn-teal, btn-rose, btn-outline, btn-teal2,
   btn-teal3, btn-purple2, btn-light, btn-gradient-teal, or btn-gradient-rose
   via the CSS Class field on Divi Button modules.
   ========================================================================== */

/* --- Base shared styles for all custom buttons ---
   Uses body .et_pb_button.btn-* to beat Divi defaults on both
   the frontend AND inside the builder. */
body .et_pb_button.btn-gold,
body .et_pb_button.btn-purple,
body .et_pb_button.btn-teal,
body .et_pb_button.btn-rose,
body .et_pb_button.btn-outline,
body .et_pb_button.btn-outline-teal,
body .et_pb_button.btn-teal2,
body .et_pb_button.btn-teal3,
body .et_pb_button.btn-purple2,
body .et_pb_button.btn-light,
body .et_pb_button.btn-gradient-teal,
body .et_pb_button.btn-gradient-rose {
    font-size: 16.8px !important;
    padding: 17.6px 38.4px !important;
    border-radius: 50px !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    border: 2px solid transparent !important;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Beat Divi's icon-padding rules that use .et_button_no_icon selectors */
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-gold,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-purple,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-teal,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-rose,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-outline,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-outline-teal,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-teal2,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-teal3,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-purple2,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-light,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-gradient-teal,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-gradient-rose,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-gold,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-purple,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-teal,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-rose,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-outline,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-outline-teal,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-teal2,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-teal3,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-purple2,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-light,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-gradient-teal,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-gradient-rose {
    padding: 17.6px 38.4px !important;
}

/* Same for hover state */
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-gold:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-purple:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-teal:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-rose:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-outline:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-outline-teal:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-teal2:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-teal3:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-purple2:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-light:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-gradient-teal:hover,
.et_button_no_icon.et_button_icon_visible .et_pb_button.btn-gradient-rose:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-gold:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-purple:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-teal:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-rose:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-outline:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-outline-teal:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-teal2:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-teal3:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-purple2:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-light:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-gradient-teal:hover,
.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button.btn-gradient-rose:hover {
    padding: 17.6px 38.4px !important;
}

/* Hide Divi's default arrow on all custom buttons */
body .et_pb_button.btn-gold::after,
body .et_pb_button.btn-purple::after,
body .et_pb_button.btn-teal::after,
body .et_pb_button.btn-rose::after,
body .et_pb_button.btn-outline::after,
body .et_pb_button.btn-outline-teal::after,
body .et_pb_button.btn-teal2::after,
body .et_pb_button.btn-teal3::after,
body .et_pb_button.btn-purple2::after,
body .et_pb_button.btn-light::after,
body .et_pb_button.btn-gradient-teal::after,
body .et_pb_button.btn-gradient-rose::after {
    display: none !important;
}

/* --- Gold (primary CTA) --- */
body .et_pb_button.btn-gold {
    background: var(--ssa-gold) !important;
    color: var(--ssa-white) !important;
}

body .et_pb_button.btn-gold:hover {
    background: var(--ssa-gold-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(216, 169, 60, 0.3) !important;
    color: var(--ssa-white) !important;
}

/* --- Purple --- */
body .et_pb_button.btn-purple {
    background: var(--ssa-purple) !important;
    color: var(--ssa-cream-light) !important;
}

body .et_pb_button.btn-purple:hover {
    background: var(--ssa-purple-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(103, 89, 128, 0.3) !important;
    color: var(--ssa-cream-light) !important;
}

/* --- Teal --- */
body .et_pb_button.btn-teal {
    background: var(--ssa-teal) !important;
    color: var(--ssa-cream-light) !important;
}

body .et_pb_button.btn-teal:hover {
    background: var(--ssa-teal-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(38, 106, 123, 0.3) !important;
    color: var(--ssa-cream-light) !important;
}

/* --- Rose --- */
body .et_pb_button.btn-rose {
    background: var(--ssa-rose) !important;
    color: var(--ssa-cream-light) !important;
}

body .et_pb_button.btn-rose:hover {
    background: var(--ssa-rose-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(152, 53, 102, 0.3) !important;
    color: var(--ssa-cream-light) !important;
}

/* --- Outline (for dark backgrounds) --- */
body .et_pb_button.btn-outline {
    background: transparent !important;
    color: var(--ssa-cream-light) !important;
    border-color: var(--ssa-cream-light) !important;
}

body .et_pb_button.btn-outline:hover {
    background: rgba(245, 235, 225, 0.12) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(245, 235, 225, 0.2) !important;
    color: var(--ssa-cream-light) !important;
    border-color: var(--ssa-cream-light) !important;
}

/* --- Outline teal (for light/cream backgrounds) --- */
body .et_pb_button.btn-outline-teal {
    background: transparent !important;
    color: var(--ssa-teal) !important;
    border-color: var(--ssa-teal) !important;
}

body .et_pb_button.btn-outline-teal:hover {
    background: rgba(38, 106, 123, 0.08) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(38, 106, 123, 0.2) !important;
    color: var(--ssa-teal-dark) !important;
    border-color: var(--ssa-teal-dark) !important;
}

/* --- Teal 2 (bright teal) --- */
body .et_pb_button.btn-teal2 {
    background: var(--ssa-teal-bright) !important;
    color: var(--ssa-cream-light) !important;
}

body .et_pb_button.btn-teal2:hover {
    background: var(--ssa-teal-bright-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(5, 161, 184, 0.3) !important;
    color: var(--ssa-cream-light) !important;
}

/* --- Teal 3 (pale teal, pops on dark backgrounds) --- */
body .et_pb_button.btn-teal3 {
    background: var(--ssa-teal-pale) !important;
    color: var(--ssa-teal-dark) !important;
}

body .et_pb_button.btn-teal3:hover {
    background: var(--ssa-teal-pale-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(143, 219, 232, 0.35) !important;
    color: var(--ssa-teal-dark) !important;
}

/* --- Purple 2 (mauve) --- */
body .et_pb_button.btn-purple2 {
    background: var(--ssa-mauve) !important;
    color: var(--ssa-cream-light) !important;
}

body .et_pb_button.btn-purple2:hover {
    background: var(--ssa-mauve-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(145, 96, 137, 0.3) !important;
    color: var(--ssa-cream-light) !important;
}

/* --- Light (solid light background, for dark sections) --- */
body .et_pb_button.btn-light {
    background: var(--ssa-cream-light) !important;
    color: var(--ssa-purple-dark) !important;
}

body .et_pb_button.btn-light:hover {
    background: var(--ssa-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    color: var(--ssa-purple-dark) !important;
}

/* --- Gradient: dark teal to light teal, left to right ---
   background-size is doubled and shifted on hover instead of using a static
   two-color fill, giving a sweep effect on hover.

   Divi's own default button background-color still sits underneath these
   rules (we only ever override background-image, never background-color).
   With a transparent border and a large border-radius, the browser's
   anti-aliased corner clip doesn't line up pixel-for-pixel with that
   transparent border ring, so Divi's default color bleeds through as a
   thin, crooked halo right at the curve, most visibly mid-transition on
   hover. Fixing it needs three things together: a solid background-color
   fallback that matches the gradient (so nothing foreign can ever show),
   background-clip/origin forced to border-box so the gradient itself
   paints under the border instead of stopping at its inner edge, and
   overflow:hidden as a hard clip so no sub-pixel seam can escape regardless
   of the above. */
body .et_pb_button.btn-gradient-teal {
    background-color: var(--ssa-teal) !important;
    background-image: linear-gradient(90deg, var(--ssa-teal) 0%, var(--ssa-teal-light) 50%, var(--ssa-teal) 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    background-repeat: no-repeat !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
    border-color: transparent !important;
    overflow: hidden !important;
    color: var(--ssa-cream-light) !important;
    transition: background-position 0.6s var(--ssa-ease), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

body .et_pb_button.btn-gradient-teal:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(38, 106, 123, 0.35) !important;
    border-color: transparent !important;
    color: var(--ssa-cream-light) !important;
}

/* --- Gradient: teal to purple to rose, left to right ---
   Mirrored (teal-purple-rose-purple-teal) at 200% width so the visible
   half at rest reads as a clean teal-to-rose diagonal, and hover slides
   to the mirrored second half for a seamless sweep with no hard cut. */
body .et_pb_button.btn-gradient-rose {
    background-color: var(--ssa-teal) !important;
    background-image: linear-gradient(90deg, var(--ssa-teal) 0%, var(--ssa-purple) 25%, var(--ssa-rose) 50%, var(--ssa-purple) 75%, var(--ssa-teal) 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    background-repeat: no-repeat !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
    border-color: transparent !important;
    overflow: hidden !important;
    color: var(--ssa-cream-light) !important;
    transition: background-position 0.6s var(--ssa-ease), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

body .et_pb_button.btn-gradient-rose:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(152, 53, 102, 0.35) !important;
    border-color: transparent !important;
    color: var(--ssa-cream-light) !important;
}

/* --- Button reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    body .et_pb_button.btn-gold,
    body .et_pb_button.btn-purple,
    body .et_pb_button.btn-teal,
    body .et_pb_button.btn-rose,
    body .et_pb_button.btn-outline,
    body .et_pb_button.btn-outline-teal,
    body .et_pb_button.btn-teal2,
    body .et_pb_button.btn-teal3,
    body .et_pb_button.btn-purple2,
    body .et_pb_button.btn-light,
    body .et_pb_button.btn-gradient-teal,
    body .et_pb_button.btn-gradient-rose {
        transition: background 0.2s ease, box-shadow 0.2s ease !important;
    }

    body .et_pb_button.btn-gold:hover,
    body .et_pb_button.btn-purple:hover,
    body .et_pb_button.btn-teal:hover,
    body .et_pb_button.btn-rose:hover,
    body .et_pb_button.btn-outline:hover,
    body .et_pb_button.btn-outline-teal:hover,
    body .et_pb_button.btn-teal2:hover,
    body .et_pb_button.btn-teal3:hover,
    body .et_pb_button.btn-purple2:hover,
    body .et_pb_button.btn-light:hover,
    body .et_pb_button.btn-gradient-teal:hover,
    body .et_pb_button.btn-gradient-rose:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   10. GLOBAL CONTENT FIXES
   ========================================================================== */

body {
    overflow-x: hidden;
}

/* Superscript */
sup {
    font-size: 0.6em;
    vertical-align: super;
    bottom: 0;
}

/* Remove extra whitespace below post content */
.entry-content {
    margin-bottom: 0 !important;
}

/* List spacing in content areas */
.entry-content ul li {
    line-height: 1.5;
    margin-bottom: 0.75em;
}

.entry-content ol li,
ol li {
    margin-bottom: 16px;
}

/* Divi's built-in back-to-top arrow (gold to match brand) */
.et_pb_scroll_top.et-pb-icon {
    background-color: var(--ssa-gold);
    border-radius: 2px;
}