/**
 * ABR DESIGN SYSTEM - Block Components
 * Version: 2.0.0
 *
 * Reusable block components for AskBillRingle.com
 * Contains: Cards, Feature Cards, Testimonials, Hero, About, Icons
 */

/* ============================================
   CARD COMPONENTS
   ============================================ */

.abr-card {
    background: var(--abr-white);
    border-radius: var(--abr-radius-xl);
    padding: var(--abr-space-8);
    box-shadow: var(--abr-shadow-md);
    transition: all var(--abr-transition-base);
}

.abr-card:hover {
    box-shadow: var(--abr-shadow-xl);
    transform: translateY(-4px);
}

.abr-feature-card {
    position: relative;
    padding: var(--abr-space-8);
    padding-left: calc(var(--abr-space-8) + 4px); /* Account for left border */
    background: var(--abr-white);
    border-radius: var(--abr-radius-xl);
    border: 1px solid var(--abr-gray-300);
    border-left: 4px solid var(--abr-primary); /* Left highlight - always visible */
    transition: all var(--abr-transition-base);
}

.abr-feature-card:hover {
    border-left-color: var(--abr-accent);
    box-shadow: var(--abr-shadow-xl);
    transform: translateY(-4px);
}

/* Feature card header - icon and title inline */
.abr-feature-card .icon-wrapper {
    display: inline-flex;
    margin-right: var(--abr-space-3);
    vertical-align: middle;
}

.abr-feature-card .abr-h4 {
    display: inline;
    vertical-align: middle;
}

/* ============================================
   TESTIMONIAL COMPONENT
   ============================================ */

.abr-testimonial {
    background: var(--abr-white);
    border-left: 4px solid var(--abr-primary);
    padding: var(--abr-space-8);
    border-radius: var(--abr-radius-lg);
    box-shadow: var(--abr-shadow-md);
}

/* Testimonial author info - FIXED: vertical layout with larger photos */
.testimonial-author {
    display: flex;
    align-items: flex-start;
    gap: var(--abr-space-4);
    margin-top: var(--abr-space-4);
}

/* Testimonial avatar - 96px (doubled from 48px) */
.testimonial-avatar,
.testimonial-avatar img,
figure.testimonial-avatar,
figure.testimonial-avatar img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
    overflow: hidden;
    margin: 0 !important;
}

/* Author info - vertical stack: name then role */
.testimonial-author .wp-block-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
}

.testimonial-name {
    font-weight: var(--abr-weight-semibold);
    font-size: var(--abr-text-base);
    color: var(--abr-dark);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
}

/* Role/company beneath name */
.testimonial-author .abr-text-small {
    margin: 0 !important;
    padding: 2px 0 0 0 !important;
    color: var(--abr-text-muted);
    font-size: var(--abr-text-sm);
    line-height: 1.3;
}

/* ============================================
   STEP NUMBER COMPONENT - SOLID COLOR
   ============================================ */

.abr-step-number {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0033CC; /* Solid Persian Blue - NO gradient */
    color: var(--abr-white);
    border-radius: 50%;
    margin: 0 auto var(--abr-space-4);
}

.abr-step-number p {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--abr-white);
    line-height: 1;
}

/* ============================================
   HERO SECTION - TIGHT SPACING, SOLID COLOR
   ============================================ */

.hero {
    background: #f8fafc; /* Solid light gray - NO gradient */
    padding: 5px 0 var(--abr-space-4) 0; /* 5px top padding as requested */
    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    margin-bottom: var(--abr-space-3); /* Reduced from 6 to 3 */
}

.hero-cta {
    display: flex;
    gap: var(--abr-space-3); /* Reduced from 4 to 3 */
    justify-content: center;
    margin-top: var(--abr-space-4); /* Reduced from 8 to 4 */
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero {
        padding: var(--abr-space-4) 0 var(--abr-space-3) 0; /* Even tighter on mobile */
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
}

/* Strategic Advisor hero - wider text block (25% increase from 700px to 875px) */
.hero .abr-text-lead {
    max-width: 875px !important;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   ICON WRAPPER - SOLID COLOR
   ============================================ */

.icon-wrapper {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0033CC; /* Solid Persian Blue - NO gradient */
    border-radius: var(--abr-radius-lg);
    margin: 0; /* Remove margin - now inline with title */
    flex-shrink: 0;
}

/* Feature card with inline icon and title */
.abr-feature-card .feature-header,
.wp-block-column.abr-feature-card .feature-header {
    display: flex;
    align-items: center;
    gap: var(--abr-space-4);
    margin-bottom: var(--abr-space-4);
}

/* Feature card title - smaller for inline layout */
.abr-feature-card h4,
.wp-block-column.abr-feature-card h4,
.abr-feature-card .abr-h4,
.wp-block-column.abr-feature-card .abr-h4 {
    font-size: var(--abr-text-lg); /* Reduced from 2xl */
    margin: 0 !important;
    line-height: 1.3;
}

/* Dashicons in icon wrapper - smaller for inline layout */
.icon-wrapper .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--abr-white);
}

/* ============================================
   ABOUT SECTION WITH IMAGE
   ============================================ */

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abr-space-16);
    align-items: center;
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: var(--abr-radius-2xl);
    box-shadow: var(--abr-shadow-2xl);
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--abr-space-8);
    }
}

/* ============================================
   CTA SECTION - SOLID PERSIAN BLUE
   ============================================ */

.abr-cta-section {
    background: #0033CC !important; /* Solid Persian Blue - NO gradient */
}

.abr-cta-section .abr-h2 {
    color: var(--abr-white);
}

.abr-cta-section .abr-text-lead {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   WORDPRESS/GUTENBERG BLOCK OVERRIDES
   ============================================ */

/* Override Gutenberg wrapper styles for proper grid display */
.wp-block-columns.abr-grid {
    display: grid;
    flex-wrap: unset;
    margin-bottom: 0;
}

.wp-block-columns.abr-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.wp-block-columns.abr-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.wp-block-columns.abr-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .wp-block-columns.abr-grid-4,
    .wp-block-columns.abr-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wp-block-columns.abr-grid-4,
    .wp-block-columns.abr-grid-3,
    .wp-block-columns.abr-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Remove Gutenberg column flex basis */
.wp-block-columns.abr-grid > .wp-block-column {
    flex-basis: auto !important;
    flex-grow: unset;
}

/* Apply feature card styling to Gutenberg columns */
.wp-block-column.abr-feature-card {
    position: relative;
    padding: var(--abr-space-8);
    padding-left: calc(var(--abr-space-8) + 4px);
    background: var(--abr-white);
    border-radius: var(--abr-radius-xl);
    border: 1px solid var(--abr-gray-300);
    border-left: 4px solid var(--abr-primary); /* Left highlight - always visible */
    transition: all var(--abr-transition-base);
}

.wp-block-column.abr-feature-card:hover {
    border-left-color: var(--abr-accent);
    box-shadow: var(--abr-shadow-xl);
    transform: translateY(-4px);
}

/* Feature card header - icon and title inline (Gutenberg) */
.wp-block-column.abr-feature-card .icon-wrapper {
    display: inline-flex;
    margin-right: var(--abr-space-3);
    vertical-align: middle;
}

.wp-block-column.abr-feature-card .abr-h4 {
    display: inline;
    vertical-align: middle;
}

/* Apply card styling to Gutenberg columns */
.wp-block-column.abr-card {
    background: var(--abr-white);
    border-radius: var(--abr-radius-xl);
    padding: var(--abr-space-8);
    box-shadow: var(--abr-shadow-md);
    transition: all var(--abr-transition-base);
}

.wp-block-column.abr-card:hover {
    box-shadow: var(--abr-shadow-xl);
    transform: translateY(-4px);
}

/* Apply testimonial styling to Gutenberg columns */
.wp-block-column.abr-testimonial {
    background: var(--abr-white);
    border-left: 4px solid var(--abr-primary);
    padding: var(--abr-space-8);
    border-radius: var(--abr-radius-lg);
    box-shadow: var(--abr-shadow-md);
}

/* Apply stat styling to Gutenberg columns - Dashboard Metrics Cards with 3D shadow */
.wp-block-column.abr-stat {
    text-align: center;
    background: var(--abr-white);
    border: 1px solid var(--abr-gray-300);
    border-right: 3px solid var(--abr-gray-500); /* 3D shadow right */
    border-bottom: 3px solid var(--abr-gray-500); /* 3D shadow bottom */
    border-radius: 8px;
    padding: 24px 16px;
}

.wp-block-column.abr-stat .abr-stat-number {
    font-size: var(--abr-text-4xl);
    font-weight: var(--abr-weight-extrabold);
    color: var(--abr-primary);
    line-height: 1;
    margin-bottom: var(--abr-space-2);
}

.wp-block-column.abr-stat .abr-stat-label {
    font-size: var(--abr-text-base);
    color: var(--abr-text-secondary);
    font-weight: var(--abr-weight-medium);
}

/* About section - Full width image container with text overlay */
.about-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: var(--abr-radius-2xl);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 500px;
}

/* About image - takes up left side */
.about-container .about-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--abr-gray-50, #f8fafc);
}

.about-container .about-image-wrapper img,
.about-container figure.about-image img {
    width: 100%;
    height: auto; /* Natural height - display full image */
    object-fit: contain; /* Show entire image without cropping */
    object-position: center top; /* Align to top to show head */
    position: relative; /* Not absolute - let image control height */
    background: var(--abr-gray-50, #f8fafc);
}

/* About content - takes up right side with padding */
.about-container .about-content {
    flex: 1;
    padding: var(--abr-space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--abr-white);
}

/* Reduce spacing above About label */
.about-container .abr-text-tiny,
.about-content .abr-text-tiny {
    margin-top: 0 !important;
    margin-bottom: var(--abr-space-2) !important; /* Reduced by 90% from space-3 */
}

/* About header - minimal top margin */
.about-content .abr-h2 {
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    .about-container {
        flex-direction: column;
        min-height: auto;
    }

    .about-container .about-image-wrapper {
        height: auto;
        min-height: 400px;
        position: relative;
    }

    .about-container .about-image-wrapper img,
    .about-container figure.about-image img {
        position: relative; /* Override absolute for mobile */
        height: auto;
        max-height: 500px;
    }

    .about-container .about-content {
        padding: var(--abr-space-8);
    }
}

/* Legacy about-grid support */
.wp-block-columns.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abr-space-8); /* Reduced gap */
    align-items: center;
}

/* About grid - standard HTML version */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Image column smaller, text column larger */
    gap: var(--abr-space-8);
    align-items: center;
}

/* About image - reduced size by 25% */
.about-grid .about-image,
.about-grid img.about-image {
    max-width: 75%;
    height: auto;
    border-radius: var(--abr-radius-2xl);
    box-shadow: var(--abr-shadow-xl);
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--abr-space-6);
    }
    .about-grid .about-image,
    .about-grid img.about-image {
        max-width: 60%;
        margin: 0 auto;
        display: block;
    }
}

/* Reduce space above About section header */
.wp-block-columns.about-grid .abr-text-tiny {
    margin-bottom: 0.1rem !important; /* 90% reduction */
}

@media (max-width: 1024px) {
    .wp-block-columns.about-grid {
        grid-template-columns: 1fr;
        gap: var(--abr-space-4);
    }
}

/* About image in Gutenberg */
.wp-block-image.about-image img,
figure.about-image img {
    border-radius: var(--abr-radius-2xl);
    box-shadow: var(--abr-shadow-2xl);
}

/* Hero section in Gutenberg - TIGHT SPACING, SOLID COLOR */
.wp-block-group.hero {
    background: #f8fafc !important; /* Solid light gray - NO gradient */
    padding: 5px 0 var(--abr-space-4) 0; /* 5px top padding as requested */
    text-align: center;
}

.wp-block-group.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.wp-block-group.hero-badge {
    margin-bottom: var(--abr-space-6);
    justify-content: center;
}

/* ============================================
   BUTTON SYSTEM - FLAT, CONSISTENT, NO GRADIENTS
   ============================================ */

/* Base button styles for Gutenberg */
.wp-block-button.abr-btn .wp-block-button__link,
.wp-block-button.abr-btn-primary .wp-block-button__link,
.wp-block-button.abr-btn-primary-lg .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abr-space-2);
    font-family: var(--abr-font-heading);
    font-weight: var(--abr-weight-semibold);
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
}

/* Primary Button - FLAT solid blue */
.wp-block-button.abr-btn-primary .wp-block-button__link {
    padding: 12px 24px;
    font-size: 16px;
    background: var(--abr-primary) !important;
    color: var(--abr-white) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 600;
}

.wp-block-button.abr-btn-primary .wp-block-button__link:hover {
    background: var(--abr-primary-dark) !important;
    box-shadow: none !important;
    transform: none;
}

/* Primary Large Button - FLAT solid blue, larger */
.wp-block-button.abr-btn-primary-lg .wp-block-button__link {
    padding: 16px 32px;
    font-size: 16px; /* Readable size that fits button width */
    background: var(--abr-primary) !important; /* FLAT - no gradient */
    color: var(--abr-white) !important;
    border-radius: 8px !important;
    box-shadow: none !important; /* NO shadow/3D effect */
    font-weight: 600;
    transition: all 0.3s ease;
}

.wp-block-button.abr-btn-primary-lg .wp-block-button__link:hover {
    background: var(--abr-primary-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 51, 204, 0.3) !important;
    filter: none;
}

/* Secondary Button - FLAT outline style */
.wp-block-button.abr-btn-secondary .wp-block-button__link {
    padding: 12px 24px;
    font-size: 16px;
    background: transparent !important;
    color: var(--abr-primary) !important;
    border: 2px solid var(--abr-primary) !important;
    border-radius: 8px !important;
    font-weight: 600;
    box-shadow: none !important;
}

.wp-block-button.abr-btn-secondary .wp-block-button__link:hover {
    background: var(--abr-primary) !important;
    color: var(--abr-white) !important;
    box-shadow: none !important;
    transform: none;
}

/* ============================================
   CTA SECTION - SPECIAL BUTTON STYLES
   ============================================ */

.abr-cta-section .wp-block-buttons {
    display: flex;
    gap: var(--abr-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* CTA Primary Button - White background on blue section */
.abr-cta-section .wp-block-button.abr-btn-primary-lg .wp-block-button__link,
.abr-cta-section .wp-block-button .wp-block-button__link.has-white-background-color {
    background: var(--abr-white) !important;
    color: var(--abr-primary) !important;
    padding: 16px 32px;
    font-size: 16px; /* Readable size that fits button width */
    font-weight: 600;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.abr-cta-section .wp-block-button.abr-btn-primary-lg .wp-block-button__link:hover,
.abr-cta-section .wp-block-button .wp-block-button__link.has-white-background-color:hover {
    background: var(--abr-gray-100) !important;
    color: var(--abr-primary-dark) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* CTA Secondary Button - White outline, ALWAYS VISIBLE */
.abr-cta-section .wp-block-button.abr-btn-secondary .wp-block-button__link,
.abr-cta-section .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--abr-white) !important;
    border: 2px solid var(--abr-white) !important;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.abr-cta-section .wp-block-button.abr-btn-secondary .wp-block-button__link:hover,
.abr-cta-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--abr-white) !important;
    color: var(--abr-primary) !important;
    border-color: var(--abr-white) !important;
}

/* Section spacing - DRAMATICALLY REDUCED (90% tighter) */
.wp-block-group.abr-section {
    padding: var(--abr-space-4) 0; /* Reduced to 1rem top/bottom */
}

@media (max-width: 768px) {
    .wp-block-group.abr-section {
        padding: var(--abr-space-3) 0; /* 0.75rem on mobile */
    }

    .wp-block-group.hero {
        padding: var(--abr-space-4) 0 var(--abr-space-3) 0;
    }
}

/* ============================================
   CTA BUTTON WIDTHS - 75% OF METRIC CARDS
   ============================================ */

/* CTA buttons match 75% of metric card width */
.hero-cta .wp-block-button,
.abr-cta-section .wp-block-button {
    width: 75%;
    max-width: 280px;
}

.hero-cta .wp-block-button__link,
.abr-cta-section .wp-block-button__link {
    width: 100%;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-cta .wp-block-button,
    .abr-cta-section .wp-block-button {
        width: 85%;
        max-width: none;
    }
}

/* ============================================
   HORIZONTAL TESTIMONIAL CARDS (No Photos)
   For Strategic Advisor page
   ============================================ */

.testimonial-horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--abr-space-4);
    padding: var(--abr-space-5);
    background: var(--abr-white);
    border-radius: 12px;
    border-left: 4px solid var(--abr-primary);
    box-shadow: var(--abr-shadow-md);
    margin-bottom: var(--abr-space-4);
}

.testimonial-horizontal blockquote {
    flex: 1;
    margin: 0;
    font-style: italic;
    line-height: 1.7;
    color: var(--abr-text);
}

.testimonial-horizontal .testimonial-attribution {
    min-width: 150px;
    text-align: right;
    border-left: 1px solid var(--abr-gray-200);
    padding-left: var(--abr-space-4);
}

.testimonial-horizontal .testimonial-attribution strong {
    display: block;
    color: var(--abr-dark);
    font-weight: var(--abr-weight-semibold);
}

.testimonial-horizontal .testimonial-attribution span {
    font-size: var(--abr-text-sm);
    color: var(--abr-text-muted);
}

@media (max-width: 768px) {
    .testimonial-horizontal {
        flex-direction: column;
    }

    .testimonial-horizontal .testimonial-attribution {
        text-align: left;
        border-left: none;
        border-top: 1px solid var(--abr-gray-200);
        padding-left: 0;
        padding-top: var(--abr-space-3);
        min-width: auto;
        width: 100%;
    }
}

/* ============================================
   FULL-WIDTH PAGE LAYOUT WITH PADDING
   Reusable class for pages that need full-width
   with consistent left/right padding
   ============================================ */

/* Apply to body via Astra page settings or wrapper div */
.abr-page-fullwidth {
    max-width: 100% !important;
    width: 100% !important;
}

/* Main content area - full width with padding */
.abr-page-fullwidth .site-content,
.abr-page-fullwidth .ast-container,
.abr-page-fullwidth .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Override Astra page-builder-template reset (sets padding:0) */
.abr-page-fullwidth.ast-page-builder-template .site-content > .ast-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Remove ALL top/bottom spacing for fullwidth pages */
.abr-page-fullwidth #page,
.abr-page-fullwidth #content,
.abr-page-fullwidth #primary,
.abr-page-fullwidth .content-area,
.abr-page-fullwidth .site-content,
.abr-page-fullwidth .ast-container,
.abr-page-fullwidth .entry-content,
.abr-page-fullwidth article.page,
.abr-page-fullwidth .hentry,
.abr-page-fullwidth .ast-article-single,
.abr-page-fullwidth .site-main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Override Astra inline styles for #primary */
body.abr-page-fullwidth #primary {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Override Astra entry-header margin */
.abr-page-fullwidth .entry-header,
.abr-page-fullwidth header.entry-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove entry-content first/last child margins */
.abr-page-fullwidth .entry-content > *:first-child {
    margin-top: 0 !important;
}
.abr-page-fullwidth .entry-content > *:last-child {
    margin-bottom: 0 !important;
}

/* Sections within full-width pages */
.abr-page-fullwidth section,
.abr-page-fullwidth .wp-block-group,
.abr-page-fullwidth .wp-block-cover {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Containers inside sections - remove double padding */
.abr-page-fullwidth .abr-container,
.abr-page-fullwidth .wp-block-group__inner-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Edge-to-edge backgrounds with padded content */
.abr-page-fullwidth .hero,
.abr-page-fullwidth .abr-cta-section,
.abr-page-fullwidth .top-5-hero {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% + 40px);
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .abr-page-fullwidth .site-content,
    .abr-page-fullwidth .ast-container,
    .abr-page-fullwidth .entry-content,
    .abr-page-fullwidth section,
    .abr-page-fullwidth .wp-block-group {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .abr-page-fullwidth .site-content,
    .abr-page-fullwidth .ast-container,
    .abr-page-fullwidth .entry-content,
    .abr-page-fullwidth section,
    .abr-page-fullwidth .wp-block-group {
        padding-left: 15px;
        padding-right: 15px;
    }

    .abr-page-fullwidth .hero,
    .abr-page-fullwidth .abr-cta-section,
    .abr-page-fullwidth .top-5-hero {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        width: calc(100% + 30px);
    }
}

/* ============================================
   ADVISOR CTA SECTION
   Rectangular, flush with footer, 10px bottom padding
   ============================================ */

.advisor-cta-section {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

.abr-page-fullwidth .advisor-cta-section {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    padding: var(--abr-space-6) 20px 10px 20px;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .abr-page-fullwidth .advisor-cta-section {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        padding: var(--abr-space-6) 15px 10px 15px;
    }
}

/* ============================================
   FOOTER - SINGLE ROW MENU LAYOUT
   ============================================ */

.site-footer .footer-widget-area,
.site-footer .ast-footer-widget-area,
.site-footer nav,
.site-footer .menu,
.ast-small-footer .ast-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: var(--abr-space-4);
}

.site-footer .menu-item,
.ast-small-footer .menu-item {
    display: inline-block !important;
    margin: 0 !important;
}

/* ============================================
   CTA SECTION - FULL VIEWPORT WIDTH (like footer)
   ============================================ */

.abr-cta-section,
.abr-cta-section.wp-block-group {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-radius: 0 !important;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Ensure content inside CTA stays centered */
.abr-cta-section .abr-container {
    max-width: var(--abr-container-xl);
    margin: 0 auto;
    padding: 0 var(--abr-space-6);
}