/* ============================================
   TYPOGRAPHY & SPACING SYSTEM
   Consistent typography and spacing throughout
   ============================================ */

/* Base Typography */
body {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings - Consistent spacing */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--primary-dark);
}

h1 {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.25rem;
    margin-bottom: 0.875rem;
}

h5 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

h6 {
    font-size: 1rem;
    margin-bottom: 0.625rem;
}

/* Paragraphs - Consistent spacing */
p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    line-height: 1.7;
    color: var(--gray-dark);
}

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

/* Lists - Consistent spacing */
ul, ol {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    line-height: 1.7;
}

ul li, ol li {
    margin-bottom: 0.625rem;
    line-height: 1.7;
}

ul li:last-child, ol li:last-child {
    margin-bottom: 0;
}

/* Section Spacing - Consistent padding */
section {
    padding: 60px 0 !important;
}

section:first-of-type {
    padding-top: 40px !important;
}

section:last-of-type {
    padding-bottom: 80px !important;
}

/* Override inline padding styles for consistency */
section[style*="padding"] {
    padding: 60px 0 !important;
}

section.services {
    padding: 60px 0 !important;
}

/* Container spacing within sections */
section .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Content blocks - Consistent spacing */
.content-block {
    margin-bottom: 2.5rem;
}

.content-block:last-child {
    margin-bottom: 0;
}

.content-block h2,
.content-block h3,
.content-block h4 {
    margin-bottom: 1rem;
}

.content-block p {
    margin-bottom: 1.25rem;
}

.content-block p:last-child {
    margin-bottom: 0;
}

/* Text blocks with consistent spacing */
.text-block {
    line-height: 1.7;
}

.text-block p {
    margin-bottom: 1.25rem;
}

.text-block p:last-child {
    margin-bottom: 0;
}

.text-block + .text-block {
    margin-top: 2rem;
}

/* Cards - Consistent internal spacing */
.card,
.service-card,
.product-card,
.benefit-card {
    padding: 2rem;
}

.card h3,
.service-card h3,
.benefit-card h3 {
    margin-bottom: 1rem;
}

.card p,
.service-card p,
.benefit-card p {
    margin-bottom: 1rem;
}

.card p:last-child,
.service-card p:last-child,
.benefit-card p:last-child {
    margin-bottom: 0;
}

/* Grid items - Consistent spacing */
.grid-item,
.service-card,
.product-card {
    margin-bottom: 0;
}

/* Two-column layouts - Consistent spacing */
.two-column-grid {
    gap: 3rem !important;
    align-items: start;
}

.two-column-grid[style*="gap"] {
    gap: 3rem !important;
}

.two-column-grid > * {
    padding: 2rem !important;
}

.two-column-grid > *[style*="padding"] {
    padding: 2rem !important;
}

.two-column-grid h2,
.two-column-grid h3 {
    margin-bottom: 1rem;
}

.two-column-grid p {
    margin-bottom: 1.25rem;
}

.two-column-grid p:last-child {
    margin-bottom: 0;
}

.two-column-grid ul,
.two-column-grid ol {
    margin-bottom: 1.25rem;
}

.two-column-grid ul:last-child,
.two-column-grid ol:last-child {
    margin-bottom: 0;
}

/* Feature cards - Consistent spacing */
.feature-card-row {
    gap: 2rem;
}

.feature-card-row .feature-card {
    padding: 1.75rem;
}

.feature-card-row h3 {
    margin-bottom: 0.875rem;
}

.feature-card-row p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.feature-card-row p:last-child {
    margin-bottom: 0;
}

/* Service cards - Consistent spacing */
.service-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service-card h3 {
    margin-bottom: 0.75rem;
}

.service-card p {
    margin-bottom: 1rem;
    flex-grow: 1;
}

.service-card ul {
    margin-bottom: 1rem;
}

.service-card ul:last-child {
    margin-bottom: 0;
}

/* Info sections - Consistent spacing */
.info-section,
.game-info-section {
    padding: 2rem 0;
    margin-bottom: 2rem;
}

.info-section:last-child,
.game-info-section:last-child {
    margin-bottom: 0;
}

.info-section h3,
.game-info-section h3 {
    margin-bottom: 1rem;
}

.info-section p,
.game-info-section p {
    margin-bottom: 1.25rem;
}

.info-section p:last-child,
.game-info-section p:last-child {
    margin-bottom: 0;
}

/* Hero section text - Consistent spacing */
.hero-text h1 {
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-subtitle p {
    margin-bottom: 1rem;
}

.hero-subtitle p:last-child {
    margin-bottom: 0;
}

/* Review cards - Consistent spacing */
.review-card {
    padding: 1.5rem;
    gap: 1rem;
}

.review-card .review-score {
    margin-bottom: 0.5rem;
}

.review-card .review-source {
    line-height: 1.6;
}

/* Response sections - Consistent spacing */
.response-section {
    padding: 2.5rem 0;
}

.response-content {
    gap: 1.5rem;
}

.response-card {
    padding: 1.75rem;
}

.response-card h3 {
    margin-bottom: 0.875rem;
}

.response-card p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.response-card p:last-child {
    margin-bottom: 0;
}

/* Convenience list - Consistent spacing */
.convenience-list {
    gap: 1.25rem;
}

.convenience-list li {
    padding: 1.5rem;
    margin-bottom: 0;
}

.convenience-list li p {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.convenience-list li p:last-child {
    margin-bottom: 0;
}

/* Prevent crowded text - minimum spacing */
p + p {
    margin-top: 1.25rem;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p {
    margin-top: 1rem;
}

/* Lists after headings */
h2 + ul,
h2 + ol,
h3 + ul,
h3 + ol {
    margin-top: 1rem;
}

/* Text blocks - ensure breathing room */
.text-block p + p {
    margin-top: 1.25rem;
}

/* Cards - ensure internal spacing */
.card > *:not(:last-child),
.service-card > *:not(:last-child),
.benefit-card > *:not(:last-child) {
    margin-bottom: 1rem;
}

/* Fix crowded inline styles - ensure minimum spacing */
div[style*="padding"] p,
div[style*="padding"] h2,
div[style*="padding"] h3 {
    margin-bottom: 1rem;
}

div[style*="padding"] p:last-child {
    margin-bottom: 0;
}

/* Ensure spacing in grid layouts */
.grid-item p,
.grid-item h3 {
    margin-bottom: 1rem;
}

.grid-item p:last-child {
    margin-bottom: 0;
}

/* Fix crowded text in two-column grids */
.two-column-grid p {
    margin-bottom: 1.25rem;
}

.two-column-grid p:last-child {
    margin-bottom: 0;
}

.two-column-grid h2,
.two-column-grid h3 {
    margin-bottom: 1rem;
}

/* Fix spacing in lists */
ul li,
ol li {
    margin-bottom: 0.625rem;
    padding-left: 0.5rem;
}

ul li:last-child,
ol li:last-child {
    margin-bottom: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }
    
    h2 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    h3 {
        font-size: 1.375rem;
        margin-bottom: 0.875rem;
    }
    
    p {
        margin-bottom: 1rem;
        line-height: 1.6;
    }
    
    section {
        padding: 40px 0 !important;
    }
    
    section[style*="padding"] {
        padding: 40px 0 !important;
    }
    
    .card,
    .service-card,
    .product-card,
    .benefit-card {
        padding: 1.5rem !important;
    }
    
    .two-column-grid {
        gap: 2rem !important;
    }
    
    .two-column-grid > * {
        padding: 1.5rem !important;
    }
    
    .info-section,
    .game-info-section {
        padding: 1.5rem 0;
        margin-bottom: 1.5rem;
    }
}