/* Container */
.container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
}

/* Section */
.section {
    padding: var(--spacing-section) 0;
}

.section--dark {
    background-color: var(--color-bg-primary);
}

.section--card {
    background-color: var(--color-bg-card);
}

.section--alt {
    background-color: var(--color-bg-card-alt);
}

/* =========================================================================
   Light Section - White/gray backgrounds with dark text
   Used on pages where source site has light content areas
   (practice-areas, reviews, blog, in-the-news, etc.)
   ========================================================================= */

.section--light {
    background-color: var(--color-light-bg);
    color: var(--color-light-text-primary);
}

.section--light-alt {
    background-color: var(--color-light-bg-alt);
    color: var(--color-light-text-primary);
}

/* Light section text overrides */
.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4,
.section--light h5,
.section--light h6,
.section--light-alt h1,
.section--light-alt h2,
.section--light-alt h3,
.section--light-alt h4,
.section--light-alt h5,
.section--light-alt h6 {
    color: var(--color-light-text-primary);
}

.section--light p,
.section--light-alt p {
    color: var(--color-light-text-secondary);
}

.section--light .section-label,
.section--light-alt .section-label {
    color: var(--color-accent);
}

.section--light .section-title,
.section--light-alt .section-title {
    color: var(--color-light-text-primary);
}

.section--light .section-subtitle,
.section--light-alt .section-subtitle {
    color: var(--color-light-text-muted);
}

.section--light .text-muted,
.section--light-alt .text-muted {
    color: var(--color-light-text-muted);
}

.section--light .text-secondary,
.section--light-alt .text-secondary {
    color: var(--color-light-text-secondary);
}

/* Light section cards */
.section--light .card,
.section--light-alt .card {
    background-color: var(--color-light-bg);
    border-color: var(--color-light-border);
}

.section--light .card:hover,
.section--light-alt .card:hover {
    border-color: var(--color-light-border-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section--light .card-title,
.section--light .card-title a,
.section--light-alt .card-title,
.section--light-alt .card-title a {
    color: var(--color-light-text-primary);
}

.section--light .card-title a:hover,
.section--light-alt .card-title a:hover {
    color: var(--color-accent);
}

.section--light .card-text,
.section--light-alt .card-text {
    color: var(--color-light-text-secondary);
}

/* Light section accordion/FAQ */
.section--light .accordion-item,
.section--light-alt .accordion-item {
    background-color: var(--color-light-bg-alt);
    border-color: var(--color-light-border);
}

.section--light .accordion-item.is-active,
.section--light-alt .accordion-item.is-active {
    border-color: rgba(194, 109, 40, 0.3);
}

.section--light .accordion-trigger,
.section--light-alt .accordion-trigger {
    color: var(--color-light-text-primary);
}

.section--light .accordion-body,
.section--light-alt .accordion-body {
    color: var(--color-light-text-secondary);
}

/* Light section forms */
.section--light .form-input,
.section--light .form-select,
.section--light .form-textarea,
.section--light-alt .form-input,
.section--light-alt .form-select,
.section--light-alt .form-textarea {
    background-color: var(--color-light-bg-alt);
    border-color: var(--color-light-border-hover);
    color: var(--color-light-text-primary);
}

.section--light .form-label,
.section--light-alt .form-label {
    color: var(--color-light-text-secondary);
}

/* Light section related links */
.section--light .related-links li,
.section--light-alt .related-links li {
    border-bottom-color: var(--color-light-border);
}

.section--light .related-links a,
.section--light-alt .related-links a {
    color: var(--color-light-text-secondary);
}

.section--light .related-links a:hover,
.section--light-alt .related-links a:hover {
    color: var(--color-accent);
}

/* Light section pagination */
.section--light .pagination .page-numbers,
.section--light-alt .pagination .page-numbers {
    color: var(--color-light-text-secondary);
    background-color: var(--color-light-bg);
    border-color: var(--color-light-border);
}

.section--light .pagination .page-numbers:hover,
.section--light-alt .pagination .page-numbers:hover {
    border-color: var(--color-light-border-hover);
    color: var(--color-light-text-primary);
}

.section--light .pagination .page-numbers.current,
.section--light-alt .pagination .page-numbers.current {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-primary);
}

/* Light section btn-outline override */
.section--light .btn-outline,
.section--light-alt .btn-outline {
    color: var(--color-light-text-primary);
    border-color: var(--color-light-text-primary);
}

.section--light .btn-outline:hover,
.section--light-alt .btn-outline:hover {
    background-color: var(--color-light-text-primary);
    color: var(--color-text-primary);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.section-label {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

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

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

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

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-between {
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    align-items: flex-start;
}

.flex-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.gap-xl {
    gap: var(--spacing-xl);
}

/* Content Layout */
.content-area {
    padding: var(--spacing-section) 0;
}

.content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-2xl);
    align-items: start;
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-accent {
    color: var(--color-accent);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-secondary {
    color: var(--color-text-secondary);
}

/* Spacing Utilities */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

/* Narrow container — FAQ sections, etc. */
.narrow-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Page content wrapper — default page template */
.page-content-wrapper {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero actions centering utility */
.hero-actions.justify-center {
    justify-content: center;
}

/* Hero actions used outside hero (CTA sections) */
.section .hero-actions {
    margin-top: var(--spacing-xl);
}

/* Posts Grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}