/* CSS fixes for the website */
/* Global Font Adjustments for Better Readability */
:root {
  /* Add a softer white for text */
  --text-white: rgba(255, 255, 255, 0.95);
  --text-white-secondary: rgba(255, 255, 255, 0.85);
  --text-white-muted: rgba(255, 255, 255, 0.7);
}

/* Apply softer white text across the site */
[data-theme="dark"] body,
[data-theme="dark"] .nav-link,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] .form-label,
.page-header,
.hero,
.cta-section,
footer {
  color: var(--text-white);
}

/* Secondary text elements */
[data-theme="dark"] .text-light,
[data-theme="dark"] .page-description,
[data-theme="dark"] .footer-description,
.page-description,
.footer-description {
  color: var(--text-white-secondary);
}

/* More muted elements */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .footer-bottom,
.footer-bottom {
  color: var(--text-white-muted);
}

/* Add subtle text shadow to improve readability on dark backgrounds */
.page-header h1,
.page-header .page-title,
.hero h1,
.hero .hero-title,
.cta-section h2,
.cta-section .cta-title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Slightly increase font weight for better contrast */
[data-theme="dark"] p,
[data-theme="dark"] li,
.page-header p,
.hero p,
.cta-section p {
  font-weight: 400;
}

/* Better contrast for interactive elements */
.cta-button-secondary {
  background-color: rgba(255, 255, 255, 0.25);
}

/* Fix for expandable package features */
.package-feature.collapsible {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    background-color: rgba(30, 41, 59, 0.5);
}

.feature-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: rgba(30, 41, 59, 0.7);
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

.feature-header:hover {
    background-color: rgba(30, 41, 59, 0.9);
}

.feature-header .feature-icon {
    margin-right: 1rem;
    color: var(--orange);
}

.feature-header .feature-title {
    flex: 1;
    margin-bottom: 0;
}

.expand-icon {
    transition: transform 0.3s;
}

.package-feature.active .expand-icon {
    transform: rotate(180deg);
}

.feature-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: 
        max-height 0.3s ease,
        opacity 0.3s ease,
        padding 0.3s ease,
        visibility 0.3s ease;
    padding: 0 1rem;
}

.package-feature.active .feature-content {
   max-height: 500px;
   opacity: 1;
   visibility: visible;
   padding: 1rem;
}

/* Fix SVG sizing in package displays */
.package-svg {
    width: 200px !important;
    height: 200px !important;
    margin-left: 2rem;
}

@media (max-width: 992px) {
    .package-svg {
        width: 160px !important;
        height: 160px !important;
        margin-left: 0;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) {
    .package-svg {
        width: 140px !important;
        height: 140px !important;
    }
}

/* Fix package buttons */
.package-buttons .cta-button {
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* Hide stray elements that might appear on the side */
body > .nav-link,
body > .mobile-nav-item {
    display: none !important;
}

/* Fix for mobile navigation */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--card);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 99;
    padding: 0.75rem 0;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: block;
    }
}