/* Hero Section - Enhanced viewport height protection */
#home {
min-height: 50vh;
min-height: 50dvh;
}

/* Landscape fix for mobile */
@media screen and (orientation: landscape) and (max-width: 991.98px) {
#home {
    min-height: 70vh;
    min-height: 70dvh;
}
}



/* === Theme for body and status bar === */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
/* Default: Light theme */
background-color: #f8f9fa;
color: #212529;
}



/* Features heading - Light theme */
.features-heading {
color: #212529;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-top: 0;
}

/* Lead text - Light theme */
.lead-text {
color: #212529;  /* Subtle gray */
}

/* === Card - Light theme === */
.card-theme {
background-color: #ffffff;
border: 1px solid #dee2e6;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}

.icon-theme {
color: #0d6efd;  /* Blue icon */
}

.heading-theme {
color: #212529;
}

.text-theme {
color: #6c757d;
}

/* About section - Day (Light) theme */
.highlight-section {
background-color: #ffffff;
}

.listItem {
color: #212529 !important;
}

.text-white-equivalent {
color: #fff !important;
}

.text-success-equivalent {
color: #212529 !important;
}

.adaptive-gray {
color: #6c757d !important; /* Medium gray - light theme */
}

/* Animal name - Light theme: Bootstrap primary blue */
.animalName {
    color: #0d6efd; /* Bootstrap primary blue */
}

/* When OS is in dark mode */
/* When OS is in dark mode */
/* When OS is in dark mode */
/* When OS is in dark mode */  
/* When OS is in dark mode */
@media (prefers-color-scheme: dark) {

    body {
    background-color: #1C1C1E;
    color: #e9ecef;
    }


    .features-heading {
    color: #e9ecef;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    }

    .lead-text {
    color: #b1b5b9;  /* Lighter gray for dark mode */
    }

    .card-theme {
    background-color: #2d3338;
    border-color: #495057;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.3);
    }

    .icon-theme {
    color: #4dabf7;  /* Lighter blue */
    }

    .heading-theme {
    color: #e9ecef;
    }

    .text-theme {
    color: #b1b5b9;
    }

    .highlight-section {
    background-color: #2d3338;
    }

    .listItem {
    color: #b1b5b9 !important;
    }

    .text-white-equivalent {
    color: #fff !important;
    }

    .text-success-equivalent {
    color: #b1b5b9 !important;
    }

    .adaptive-gray {
    color: #b1b5b9 !important; /* Light gray - dark theme */
    }

    .animalName {
        color: #f29102; /* Your custom orange */
    }

}

}