/* Bovenbalk */


.app-title {
    font-size: 1.6rem;
    font-weight: 600;
}

.app-subtitle {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Hoofd-layout */

.layout {
    width: 100%;
    margin-block-end: 2rem;
    padding-block-end: 1rem

}

/* Eén grote kaart als geheel */

.card-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    background-color: var(--highlight);
    border-radius: 5px;
    border: var(--border) 1px solid;
    padding: 1.75rem;
    color: var(--text)
}

/* Linker- en rechterkant binnen het geheel */

/*map*/
.map-area,
.weather-area {
    display: flex;
    flex-direction: column;
}

.map-area {
    flex: 1.4;
    padding-right: 0;
    border-inline-end: none;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    h2{
    margin-top: 2rem;
}
}

.weather-area {
    flex: 1;
    background: var(--highlight);
    border-radius: 5px;
    padding-left: 0;

}

.panel-title {
    font-size: 1.2rem;
    font-weight: 600;
}



#map {
    width: 100%;
    flex: 1;
    border-radius: 5px;
    overflow: hidden;
    min-height: 18rem;
}
/*end map*/

/* Weer-app rechts */

.weather-header {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    text-align: center;
}

.weather-intro {
    font-size: 0.95rem;
    color: var(--text)
}

.search {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.search-bar {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.7rem 1rem;
    border-radius: 5px;
    background-color: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
}

.search-bar::placeholder {
    color: var(--text);
}

button {
    color: var(--text);
    border: var(--border) 1px solid;
    border-radius: 5px;
    padding: 0.6rem 0.9rem;
    background-color: var(--bg-light);
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    &:hover {
        background-color: var(--text-muted);
        color: var(--bg);
    }
}

.weather {
    text-align: center;

    padding-bottom: 1rem;
}

/* Loading: inhoud verbergen, alleen tekst tonen */

.weather.loading {
    visibility: hidden;
    max-height: 1.25rem;
    position: relative;
}

.weather.loading::after {
    visibility: visible;
    content: "Laden...";
    color: var(--text);
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 0;
    transform: translateX(-50%);
}

.city {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.temp {
    font-size: 3.1rem;
    font-weight: 600;
    margin: 0.3rem 0;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.icon {
    width: 3.4rem;
    height: 3.4rem;
}

.description {
    font-size: 1.05rem;
    text-transform: capitalize;
}

.humidity,
.wind {
    font-size: 0.95rem;
    margin: 0.2rem 0;
}

/* Footer */

.footer {
    text-align: center;
    padding-bottom: 1.3rem;
    color: var(--text);
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Responsive: onder elkaar op kleinere schermen */

@media (min-width: 768px) {

    .card-layout {
        flex-direction: row;
    }

    .map-area {
        padding-right: 1.5rem;
        border-inline-end: 1px solid  var(--border);
        margin-inline-end: 1.5rem;
        padding-block-end: 0;
        margin-block-end: 0;
    }

    .weather-area {
        padding-left: 1.5rem;

    }

    #map {
        min-height: 24rem;
    }
}