/*!
 * AoHO CMS - Professional Styling Fixes
 * Reduces excessive spacing and adjusts typography
 */

/* ===== TYPOGRAPHY FIXES ===== */

/* Reduce heading sizes for professional look */
h1, .h1, .display-1, .display-2, .display-3, .display-4 {
    font-size: 2.2rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

h2, .h2 {
    font-size: 1.8rem !important;
    margin-bottom: 0.8rem !important;
}

h3, .h3 {
    font-size: 1.5rem !important;
    margin-bottom: 0.7rem !important;
}

h4, .h4 {
    font-size: 1.25rem !important;
    margin-bottom: 0.6rem !important;
}

h5, .h5 {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
}

h6, .h6 {
    font-size: 1rem !important;
}

/* Paragraph and text sizing */
p, .lead {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.8rem !important;
}

.lead {
    font-size: 1.1rem !important;
}

/* ===== SPACING FIXES ===== */

/* Reduce section padding significantly */
section {
    padding: 2rem 0 !important;
}

.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.pt-5 {
    padding-top: 2rem !important;
}

.pb-5 {
    padding-bottom: 2rem !important;
}

.my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-4 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

.mb-5 {
    margin-bottom: 1.5rem !important;
}

/* Remove extra margins between sections */
section + section {
    margin-top: 0 !important;
}

.container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ===== COLOR FIXES ===== */

/* Ensure text is readable on colored backgrounds */
.hero-banner *,
.hero-content *,
.bg-primary *,
.bg-secondary *,
.bg-gradient * {
    color: #ffffff !important;
}

/* Keep dark text on light backgrounds */
.bg-white *,
.bg-light *,
section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) h1,
section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) h2,
section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) h3,
section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) h4,
section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) h5,
section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) h6 {
    color: #333333 !important;
}

section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) p,
section:not(.hero-banner):not(.bg-primary):not(.bg-secondary) .lead {
    color: #666666 !important;
}

/* Fix button text colors */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-dark {
    color: #ffffff !important;
}

.btn-light,
.btn-outline-primary,
.btn-outline-secondary {
    color: #333333 !important;
}

/* Button hover states */
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-dark:hover,
.btn-info:hover {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

.btn-light:hover {
    color: #ffffff !important;
    background-color: #FF8C00 !important;
    border-color: #FF8C00 !important;
}

.btn-outline-light:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-outline-primary:hover {
    background: #ffc107 !important;
    color: #1B2D46 !important;
    border-color: #ffc107 !important;
}

.btn-outline-secondary:hover {
    color: #ffffff !important;
}

/* ===== CARD AND COMPONENT FIXES ===== */

/* Reduce card spacing */
.card {
    margin-bottom: 1.5rem !important;
}

.card-body {
    padding: 1.25rem !important;
}

.card-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.card-text {
    font-size: 0.95rem !important;
    color: #666666 !important;
}

/* ===== PAGE CONTENT AREA ===== */

.page-content,
.main-content {
    background: #ffffff;
}

.page-body h1,
.page-body h2,
.page-body h3,
.page-body h4,
.page-body h5,
.page-body h6 {
    color: #333333 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

.page-body p {
    color: #666666 !important;
    margin-bottom: 1rem !important;
}

.page-body ul,
.page-body ol {
    margin-bottom: 1rem !important;
    padding-left: 1.5rem !important;
}

.page-body li {
    margin-bottom: 0.5rem !important;
    color: #666666 !important;
}

/* ===== HERO SECTION FIXES ===== */

.hero-banner {
    padding: 5rem 0 !important;
    min-height: 500px !important;
    display: flex !important;
    align-items: center !important;
}

.hero-background {
    min-height: 500px !important;
}

.hero-banner h1 {
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
}

.hero-banner .lead {
    font-size: 1.15rem !important;
    margin-bottom: 1rem !important;
}

.hero-banner p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
    h1, .h1, .display-1, .display-2, .display-3, .display-4 {
        font-size: 1.8rem !important;
    }
    
    h2, .h2 {
        font-size: 1.5rem !important;
    }
    
    section {
        padding: 1.5rem 0 !important;
    }
    
    .hero-banner {
        padding: 3rem 0 !important;
        min-height: 400px !important;
    }
}

/* ===== UTILITY OVERRIDES ===== */

.text-muted {
    color: #999999 !important;
}

.text-white {
    color: #ffffff !important;
}

.text-dark {
    color: #333333 !important;
}

/* Fix container padding */
.container,
.container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Additional spacing controls */
.row {
    margin-bottom: 0 !important;
}

.row + .row {
    margin-top: 1.5rem !important;
}

/* Remove Bootstrap default large spacing */
.mt-5, .my-5 {
    margin-top: 1.5rem !important;
}

.mb-5, .my-5 {
    margin-bottom: 1.5rem !important;
}

.pt-5, .py-5 {
    padding-top: 2rem !important;
}

.pb-5, .py-5 {
    padding-bottom: 2rem !important;
}
