/* weer-css.css */
:root{
    --bg: #000000;
    --card: #0c0c0c;
    --text: #e8eef5;
    --muted:#a6b0bb;
    --accent: #ffffff;
    --ok:#22c55e;
    --warn:#f59e0b;
    --err:#ef4444;
    --border: #2d2d2d;
}
@media (prefers-color-scheme: light){
    :root{
        --bg:#f6f7f9; --card:#ffffff; --text:#0c1116; --muted:#5b6773; --accent:#2563eb; --border:#e5e7eb;
    }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}
a{color:var(--accent); text-decoration:none}

.wrap{max-width:900px; margin:0 auto; padding:24px}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.brand{
    font-weight:600;
    letter-spacing:.2px;
}

.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px}

.grid{display:grid; grid-template-columns:1.2fr .8fr; gap:20px}
@media (max-width: 720px){ .grid{ grid-template-columns:1fr; } }

.headline{display:flex; align-items:center; gap:14px}
.headline img{width:72px; height:72px}

.advice{font-size:1.25rem; font-weight:700}
.advice.ok{color:var(--ok)}
.advice.no{color:var(--warn)}

.temp-row{display:flex; flex-wrap:wrap; gap:12px; align-items:baseline}
.temp-now{font-size:2.5rem; font-weight:800}
.temp-max{font-size:1.1rem; color:var(--muted)}

.meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:8px}
.meta div{background:transparent; border:1px dashed var(--border); border-radius:12px; padding:10px}
.meta small{display:block; color:var(--muted)}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--border)}
.pill.bad{border-color:var(--warn)}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
button{cursor:pointer; border-radius:12px; border:1px solid var(--border); padding:10px 14px; background:transparent; color:var(--text)}
button:hover{border-color:var(--accent)}
.locatieKnop{font-weight:600}

.updated{color:var(--muted)}

.skeleton{position:relative; overflow:hidden; background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04)); border-radius:8px}
.skeleton{height:16px}
.s1{width:60%}
.s2{width:70%}
.s3{width:80%}

.error{border:1px solid var(--err); color:var(--err); background:color-mix(in oklab, var(--err) 12%, transparent); padding:12px 14px; border-radius:12px; margin-top:10px}

.beer{margin-top:8px}

ul.details{list-style:none; padding:0; margin:10px 0 0 0}
ul.details li{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border)}
ul.details li:last-child{border-bottom:0}

.muted{color:var(--muted)}
/* --- Fix: force textkleur in UI-elementen --- */
/* forceer zichtbare tekst in de card */
.card, .card * { color: var(--text); }
.pill { color: var(--text); }
ul.details li span:first-child { color: var(--text); }
ul.details li span.muted { color: var(--muted); }


/* optioneel: als er ergens span { font-size:0 } o.i.d. staat in globale CSS */
ul.details span { font-size: inherit; }

/* zorg dat emoji’s/icoon niet alles verdringen */
.headline img { display: inline-block; }
/* forceer zichtbare tekst in de card */
.search { position: relative; margin-left: .75rem; }
.search input {
    padding: .5rem .6rem;
    border: 1px solid #ddd; border-radius: 999px;
    min-width: 220px;
}

.suggestions li {
    padding: .55rem .7rem; cursor: pointer;
}
.suggestions li:hover, .suggestions li:focus {
    background: #f7f7f7; outline: none;
}
@media (max-width: 900px) {
    .search input { min-width: 160px; }
}
/* Zoekveld + knop layout */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 600px) {
    .row {
        flex-direction: column; /* Onder elkaar */
        align-items: stretch;   /* Volle breedte */
    }

    .search input {
        width: 100%;
        font-size: 1rem;
    }

    .locatieKnop {
        width: 100%;
        padding: 0.7rem;
        font-size: 1.1rem;
        text-align: center;
    }
}
.suggestions {
    display: none; /* standaard verborgen */
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: .5rem;
    background: #fff;
    color: black;
    max-height: 240px;
    overflow: auto;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.suggestions.show {
    display: block; /* alleen zichtbaar als er iets te tonen is */
}