/**
 * Page Improvements - Better layout and readability
 */

/* CRITICAL: Center all content and fix widths */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wp-site-blocks {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Main content groups - center them */
.wp-block-group.is-layout-constrained,
.wp-block-group.has-global-padding {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.wp-block-post-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Remove excess padding from inner constrained groups */
.wp-block-post-content > .wp-block-group.is-layout-constrained {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* CRITICAL: Fix quick navigation on API docs - don't let it affect layout */
.wp-block-navigation,
nav {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    z-index: 100;
}

.wp-block-navigation .wp-block-navigation__container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: center !important;
}

/* Ensure sections with headings have proper left padding */
.section-bg-charcoal,
.wp-block-group:has(> h2:first-child),
.wp-block-group:has(> h3:first-child) {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

@media (max-width: 781px) {
    .section-bg-charcoal,
    .wp-block-group:has(> h2:first-child),
    .wp-block-group:has(> h3:first-child) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Hero section - Force vertical stacking */
.hero-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.hero-section > * {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero title */
.hero-section .hero-title,
.hero-section h1 {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

/* Hero description */
.hero-section p {
    display: block !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
}

/* Hero buttons - Stack vertically */
.hero-section .wp-block-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
}

.hero-section .wp-block-button {
    width: 100%;
    max-width: 300px;
    display: block;
}

/* Quantum Features - FORCE CENTER ALIGNMENT */
.features-section {
    text-align: center;
}

.features-section .wp-block-columns {
    align-items: stretch !important;
    justify-content: center !important;
}

.features-section .wp-block-column {
    text-align: center !important;
}

.feature-card-inner {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-card-inner h3,
.feature-card-inner p {
    text-align: center !important;
}

.feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Sections - Proper spacing and centering */
.hero-section,
.features-section {
    margin-bottom: 0 !important;
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

/* Content sections - reasonable spacing */
main .wp-block-group {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Footer - Compact and clean */
.wp-block-group.has-navy-to-charcoal-gradient-background {
    padding: 3rem 2rem 2rem !important;
    width: 100%;
    max-width: 100% !important;
}

.footer-list {
    list-style: none !important;
    margin: 0.5rem 0 0 0 !important;
}

.footer-list li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
}

.footer-list a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-list a:hover {
    color: #d4af37;
}

/* API Docs and content pages - Better column widths */
.wp-block-post-content .wp-block-columns,
.wp-block-columns {
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
}

.wp-block-post-content .wp-block-column,
.wp-block-column {
    min-width: 200px !important;
    flex: 1 1 0% !important;
}

/* 2-column layouts */
@media (min-width: 782px) {
    .wp-block-columns:not(:has(> .wp-block-column:nth-child(3))) .wp-block-column {
        flex-basis: calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem) !important;
    }
}

/* 3-column layouts - Better on desktop */
@media (min-width: 782px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))) .wp-block-column {
        flex-basis: calc(33.333% - 1.5rem) !important;
        max-width: calc(33.333% - 1.5rem) !important;
    }
}

/* 4-column layouts - Force 2 columns instead to avoid squeezing */
@media (min-width: 782px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:has(> .wp-block-column:nth-child(4)) .wp-block-column {
        flex-basis: calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem) !important;
        margin-bottom: 2rem !important;
    }
}

/* On very wide screens (1400px+), allow 3 columns for 4+ column layouts */
@media (min-width: 1400px) {
    .wp-block-columns:has(> .wp-block-column:nth-child(4)) .wp-block-column {
        flex-basis: calc(33.333% - 1.5rem) !important;
        max-width: calc(33.333% - 1.5rem) !important;
    }
}

/* Cards - Better padding and readability */
.is-style-premium-card,
.feature-card-inner {
    padding: 2rem !important;
}

.wp-block-group.is-style-premium-card h3 {
    margin-bottom: 1rem !important;
}

.wp-block-group.is-style-premium-card p,
.wp-block-group.is-style-premium-card ul,
.wp-block-group.is-style-premium-card ol {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

/* Lists inside cards */
.is-style-premium-card ul,
.is-style-premium-card ol {
    margin-left: 1.5rem !important;
    margin-top: 1rem !important;
}

.is-style-premium-card li {
    margin-bottom: 0.75rem !important;
}

/* Code blocks */
.wp-block-code {
    padding: 1.5rem !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}

/* Headings spacing */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
}

h1:first-child,
h2:first-child,
h3:first-child {
    margin-top: 0 !important;
}

/* Page title spacing */
.wp-block-post-title {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
}

/* Paragraphs and text blocks */
p {
    margin-bottom: 1rem !important;
}

p:last-child {
    margin-bottom: 0 !important;
}

/* Mobile responsiveness */
@media (max-width: 781px) {
    .wp-site-blocks {
        padding: 0 1rem;
    }

    .hero-section,
    .features-section {
        padding: 3rem 1rem !important;
    }

    .wp-block-group.is-layout-constrained,
    .wp-block-group.has-global-padding {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .wp-block-post-content .wp-block-columns {
        flex-direction: column !important;
    }

    .wp-block-post-content .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem;
    }

    .is-style-premium-card {
        padding: 1.5rem !important;
    }
}

/* Fix skinny columns on API docs */
.wp-block-post-content h4 + .wp-block-list {
    padding-left: 1rem !important;
}

.wp-block-post-content .wp-block-list li {
    line-height: 1.8 !important;
    margin-bottom: 0.5rem !important;
}

/* Table improvements */
table {
    width: 100% !important;
    border-collapse: collapse !important;
}

table td,
table th {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
}

/* Buttons */
.wp-block-buttons {
    margin-top: 2rem !important;
}

.wp-block-button__link {
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
    border-radius: 6px !important;
}