/* General styles for the website */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.card-img,
.card-img-top {
    object-fit: cover;
}

.card {
    margin: 0.5rem;
}

.card-img-overlay { /* Säätää kortteja etusivulla sekä tuotesivulla */
    background-color: rgba(0, 0, 0, 0.2); /* Tämä lisää hieman tummennusta kuvaan jolloin teksti näkyy paremmin */
}

.plant-boxes {
    margin: 0;
}

.info-text {
    margin-bottom: 1rem;
}

.card-title {
    font-size: clamp(0.7em, 3vw, 1.1em); /* Better balance between fitting and readability */
    white-space: nowrap; /* Prevent words from breaking */
    color: #F6F8F5 !important;
    text-shadow: 
        1px 1px 4px rgba(0, 0, 0, 1),
        2px 2px 10px rgba(0, 0, 0, 0.95) !important; /* Layered shadow for strong visibility */
}

.card-text {
    color: #F6F8F5 !important;
    font-size: clamp(0.7em, 1.5vw, 1.2em);
}

@media (max-width: 375px) {
    .card-img-overlay .btn {
        display: none; /* Piilottaa napin */
    }
}

.hero-section {
    position: relative; /* Varmista, että hero-section on positionoitu */
}

.hero-content {
    pointer-events: none;
}

.intro-box {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    max-width: 350px; /* Suuremmilla näytöillä max-width on 350px */
    transform: translateY(-50%);
    pointer-events: auto;
}

@media (max-width: 500px) {
    .intro-box {
        top: 50%;
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
        transform: translateY(-50%);
    }
}


/* Override Bootstrap button hover colors */
.btn-outline-light:hover {
    background-color: #2F5E42 !important;
    border-color: #2F5E42 !important;
    color: #F6F8F5 !important;
}

.btn-outline-secondary:hover {
    background-color: #2F5E42 !important;
    border-color: #2F5E42 !important;
    color: #F6F8F5 !important;
}

.product-title { /* Sivujen pääotsikoiden tyyli */
    font-size: clamp(2rem, 5vw, 4rem); /* Fontin koko on vähintään 2rem, enintään 4rem ja skaalautuu 5vw mukaan */
    text-align: center; /* Teksti keskitetään */  
    color: #F6F8F5 !important;
    text-shadow: 
        1px 1px 4px rgba(0, 0, 0, 1),
        2px 2px 10px rgba(0, 0, 0, 0.95) !important; /* Layered shadow for strong visibility */
}