/* 
 * Responsive Layout Fixes
 * Ensures proper layout on all screen sizes
 */

/* Prevent horizontal scrolling - targeted (not universal *) to avoid breaking FullCalendar */
body, .container, .row, section, .card, img, .btn, .form-control, .form-select {
    max-width: 100%;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

/* Prevent horizontal overflow at the body level */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

.container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (min-width: 992px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (min-width: 1200px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Fix row overflow */
.row {
    margin-left: -20px;
    margin-right: -20px;
    max-width: calc(100% + 40px);
}

.row > * {
    padding-left: 20px;
    padding-right: 20px;
}

/* Ensure sections don't cause overflow */
.section {
    overflow-x: hidden;
}

/* Prevent card overflow - use class-based exclusion instead of :has()
   which is unsupported on older Android browsers. */
.pricing-card,
.testimonial-card {
    max-width: 100%;
    overflow: hidden;
}

/* Cards should clip overflow but NOT the calendar or mobile slot containers */
.card {
    max-width: 100%;
}

#desktop-calendar-container {
    overflow: visible;
}

/* Fix image sizing */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fix icon sizing */
.fas, .far, .fab {
    max-width: none;
}

/* Responsive tables - exclude FullCalendar tables */
table:not(.fc table):not(.fc-scrollgrid) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Fix button wrapping */
.btn {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    word-wrap: break-word;
}

.btn i {
    flex-shrink: 0;
}

/* Ensure proper spacing on mobile */
@media (max-width: 767px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    h1 {
        font-size: 1.875rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.625rem !important;
        line-height: 1.3 !important;
    }
    
    /* Prevent button overflow */
    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    
    /* Stack buttons on very small screens */
    .d-flex.flex-wrap.gap-3 {
        gap: 0.75rem !important;
    }
    
    .d-flex.flex-wrap > .btn {
        width: 100%;
        margin-bottom: 0.75rem;
        white-space: normal;
    }
    
    .d-flex.flex-wrap > .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Reduce icon size on mobile */
    .fas, .far {
        max-width: 100%;
    }
    
    /* Fix hero spacing on mobile */
    .hero {
        padding-top: 2.5rem !important;
        padding-bottom: 2rem !important;
        min-height: 400px !important;
    }
    
    /* Reduce card padding on mobile */
    .card-body {
        padding: 1.25rem !important;
    }
    
    .pricing-card {
        padding: 1.5rem !important;
    }
}

/* Fix pricing card heights */
.pricing-card {
    display: flex;
    flex-direction: column;
}

.pricing-card .btn {
    margin-top: auto;
}

/* Ensure proper z-index stacking */
.navbar {
    z-index: 1030;
}

.flash-messages {
    z-index: 1050;
}

.modal {
    z-index: 1060;
}

/* Fix form elements */
.form-control,
.form-select {
    max-width: 100%;
    width: 100%;
}

/* Fix small text contrast */
small,
.small,
.form-text {
    color: var(--text-muted) !important;
}

/* Better contrast for contact info */
.footer-contact li,
.card-body small {
    color: var(--text-muted);
}

/* FullCalendar layout protection - undo global constraints on internal elements */
.fc {
    max-width: 100%;
    overflow: visible;
}

.fc *,
.fc table,
.fc td,
.fc th,
.fc col,
.fc colgroup,
.fc .fc-scrollgrid,
.fc .fc-scrollgrid-section,
.fc .fc-scrollgrid-section > td,
.fc .fc-timegrid-col,
.fc .fc-timegrid-body,
.fc .fc-daygrid-body,
.fc .fc-scroller,
.fc .fc-scroller-harness,
.fc .fc-view-harness {
    max-width: none;
}

.fc table {
    display: table;
    width: 100%;
}

.fc thead {
    display: table-header-group;
}

.fc tbody {
    display: table-row-group;
}

.fc tr {
    display: table-row;
}

.fc td,
.fc th {
    display: table-cell;
}

.fc colgroup {
    display: table-column-group;
}

.fc col {
    display: table-column;
}

/* Fix footer spacing */
.footer {
    width: 100%;
    max-width: 100vw;
}

/* Ensure proper list alignment */
ul, ol {
    max-width: 100%;
}

.pricing-features {
    width: 100%;
}

/* Fix accordion */
.accordion {
    max-width: 100%;
}

.accordion-button {
    white-space: normal;
    text-align: left;
}

/* Fix button group spacing */
.btn-group .btn,
.d-flex .btn {
    margin: 0.25rem;
}

/* Ensure consistent section padding */
.section {
    padding-left: 0;
    padding-right: 0;
}

/* Fix icon box sizing to prevent overlap */
.icon-box {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

/* Fix testimonial card spacing */
.testimonial-card {
    margin-bottom: 1.5rem;
}

/* Better mobile spacing for cards in rows */
@media (max-width: 991px) {
    .row.g-4 > [class*="col-"] {
        margin-bottom: 1.5rem;
    }
    
    .row.g-4 > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

/* Fix pricing badge positioning */
.pricing-badge {
    display: inline-block;
    margin-bottom: 1rem;
}

/* Ensure proper spacing in hero buttons */
.hero .d-flex.flex-wrap {
    gap: 1rem;
}

@media (max-width: 767px) {
    .hero .d-flex.flex-wrap {
        gap: 0.75rem;
    }
    
    .hero .btn {
        width: 100%;
    }
}

/* Fix gradient CTA cards */
.card[style*="gradient"] {
    overflow: hidden;
}

.card[style*="gradient"] .card-body {
    padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
    .card[style*="gradient"] .card-body {
        padding: 3rem 2rem;
    }
}

/* Better spacing for form rows */
.form-row,
.row.g-3,
.row.g-4 {
    margin-bottom: 0;
}

/* Fix pricing features list spacing */
.pricing-features li {
    word-break: break-word;
}

/* Ensure proper margin on last elements */
.section:last-child {
    margin-bottom: 0;
    padding-bottom: 3rem;
}

/* Fix flash message positioning on mobile */
@media (max-width: 767px) {
    .flash-messages {
        width: 95%;
        top: 70px;
    }
}

/* Better contrast for small/helper text */
small,
.small,
.form-text {
    color: var(--text-muted) !important;
}

/* Ensure good contrast for small text in cards and contact info */
.card small.text-muted,
.card .text-muted.mb-0 + small,
.testimonial-card .text-muted {
    color: #B8BDC5 !important;
}

/* Extra contrast for very small secondary text */
small.text-muted {
    color: #C5CAD0 !important;
}

/* Fix text-muted elements that need better contrast */
.text-muted {
    color: var(--text-muted) !important;
}

.card-body .text-muted {
    color: #B8BDC5 !important;
}

/* Fix testimonials empty state text */
.card-body h3 {
    color: var(--text-light) !important;
}

.card-body p.text-muted {
    color: #C5CAD0 !important;
}

/* Fix all headings in cards to be visible */
.card h2,
.card h3,
.card h4,
.card h5,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5 {
    color: var(--text-light) !important;
}

/* Ensure section headings on dark backgrounds are visible */
.bg-dark-custom h2,
.bg-dark-custom h3,
.bg-dark-custom h4 {
    color: var(--text-light) !important;
}