:root {
    --farge-ledig: #2e7d32;
    --farge-reservert: #f9a825;
    --farge-utlant: #1565c0;
    --farge-blokkert: #c62828;
    --farge-vedlikehold: #c62828;
    --farge-stengt: #9e9e9e;
    --tekst: #1a1a1a;
    --bakgrunn: #fafafa;
    --kant: #ddd;

    --chart-ink: #14304a;
    --chart-blue: #2f6f94;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--tekst);
    background: var(--bakgrunn);
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--kant);
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--tekst);
}

.site-header__badge {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
}

.site-header__tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.site-header__tekst small {
    font-weight: 400;
    font-size: 0.7rem;
    color: #666;
}

.site-header__lenke {
    font-family: "Spectral", serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--chart-blue);
    text-decoration: none;
    padding-bottom: 0.15rem;
    background-image: linear-gradient(var(--chart-ink), var(--chart-ink));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 1.5px;
    transition: background-size 0.25s ease, color 0.25s ease;
}
.site-header__lenke:hover {
    color: var(--chart-ink);
    background-size: 100% 1.5px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 2rem 0 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--chart-shallow, #c7dce3);
}

.filter-form input, .filter-form select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--chart-blue, #2f6f94);
    background: #fff;
    color: var(--chart-ink, #14304a);
    font-family: inherit;
    font-size: 0.9rem;
}

.filter-form button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--chart-ink, #14304a);
    background: var(--chart-ink, #14304a);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-form__reset {
    color: var(--chart-blue, #2f6f94);
    text-decoration: none;
    font-size: 0.9rem;
}
.filter-form__reset:hover { text-decoration: underline; }

.kajakk-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.kajakk-kort {
    display: block;
    border: 1px solid var(--chart-blue, #2f6f94);
    background: #fff;
    text-decoration: none;
    color: var(--chart-ink, #14304a);
}

.kajakk-kort__foto {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--chart-blue, #2f6f94);
    overflow: hidden;
}
.kajakk-kort__foto img { width: 100%; height: 100%; object-fit: contain; }
.kajakk-kort__foto-tom {
    color: var(--chart-blue, #2f6f94);
    font-family: "Spectral", serif;
    font-style: italic;
    font-size: 0.9rem;
}

.kajakk-kort__innhold { padding: 1rem 1.1rem 1.25rem; }
.kajakk-kort__type { margin: 0 0 0.15rem; color: var(--chart-blue, #2f6f94); font-weight: 600; font-size: 0.85rem; }
.kajakk-kort__navn { font-family: "Spectral", serif; font-weight: 700; font-size: 1.3rem; line-height: 1.15; margin: 0 0 0.15rem; }
.kajakk-kort__lokasjon { font-family: "Spectral", serif; font-style: italic; color: var(--chart-blue, #2f6f94); margin: 0 0 0.75rem; font-size: 0.95rem; }

.kajakk-kort__status { display: flex; align-items: center; gap: 0.5rem; }
.kajakk-kort__markor { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--farge-ledig); }
.kajakk-kort__markor--reservert { background: var(--farge-reservert); }
.kajakk-kort__markor--utlånt { background: var(--farge-utlant); }
.kajakk-kort__markor--vedlikehold { background: var(--farge-blokkert); }

.kajakk-kort__merknad { font-size: 0.85rem; color: var(--chart-blue, #2f6f94); margin: 0.65rem 0 0; }

.status-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #fff;
    background: var(--farge-ledig);
}

.status-badge--reservert { background: var(--farge-reservert); }
.status-badge--utlånt { background: var(--farge-utlant); }
.status-badge--vedlikehold, .status-badge--blokkert { background: var(--farge-blokkert); }
.status-badge--stengt { background: var(--farge-stengt); }

/* ---- Sjøkart: kajakk-detaljer.php ------------------------------------ */

.sjokart {
    --chart-paper: #edf1ec;
    --chart-shallow: #c7dce3;
    --chart-land: #b99b62;
    --chart-hazard: #8a2c66;

    background: var(--chart-paper);
    border: 1px solid var(--chart-blue);
    padding: 2rem;
    color: var(--chart-ink);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.sjokart__tilbake {
    display: inline-block;
    margin-bottom: 1.75rem;
    color: var(--chart-blue);
    text-decoration: none;
    font-size: 0.9rem;
}
.sjokart__tilbake:hover { text-decoration: underline; }

.detaljark {
    display: grid;
    grid-template-columns: minmax(240px, 380px) 1fr;
    gap: 2.5rem;
    align-items: start;
}

.detaljark__foto {
    position: relative;
    border: 1px solid var(--chart-blue);
    background: #fff;
    padding: 0.5rem;
}

.detaljark__foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.detaljark__foto-tom {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chart-blue);
    font-family: "Spectral", serif;
    font-style: italic;
}

.detaljark__kompass {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    color: var(--chart-blue);
    opacity: 0.5;
}

.detaljark__type {
    margin: 0 0 0.25rem;
    color: var(--chart-blue);
    font-weight: 600;
}

.detaljark__navn {
    font-family: "Spectral", serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.05;
    margin: 0 0 0.35rem;
    color: var(--chart-ink);
}

.detaljark__lokasjon {
    font-family: "Spectral", serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--chart-blue);
    margin: 0 0 1.5rem;
}

.detaljark__status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

.detaljark__markor {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--chart-hazard);
    box-shadow: 0 0 0 4px rgba(138, 44, 102, 0.18);
}

.spesifikasjoner {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--chart-shallow);
}

.spesifikasjoner li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--chart-shallow);
}

.spesifikasjoner li span:first-child { color: var(--chart-blue); font-weight: 500; }
.spesifikasjoner li span:last-child { font-weight: 600; text-align: right; }

.detaljark__flere-bilder {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.detaljark__flere-bilder img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border: 1px solid var(--chart-blue);
}

.sjokart-kalender {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--chart-blue);
}

.sjokart-kalender__hode {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sjokart-kalender__hode h2 {
    font-family: "Spectral", serif;
    font-size: 1.6rem;
    margin: 0;
}

.visning-valg { display: flex; gap: 1.5rem; }
.visning-valg a {
    text-decoration: none;
    color: var(--chart-blue);
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
    font-size: 0.95rem;
}
.visning-valg a.aktiv {
    color: var(--chart-ink);
    border-bottom-color: var(--chart-hazard);
    font-weight: 600;
}

.sjokart-grid__nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}
.sjokart-grid__nav a { color: var(--chart-blue); text-decoration: none; font-size: 0.9rem; }
.sjokart-grid__nav a:hover { text-decoration: underline; }
.sjokart-grid__periode { font-family: "Spectral", serif; font-style: italic; font-size: 1.1rem; }

.sjokart-ukedager {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: right;
    padding-right: 0.4rem;
    font-size: 0.75rem;
    color: var(--chart-blue);
    margin-bottom: 0.25rem;
}

.sjokart-dager {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--chart-blue);
    border: 1px solid var(--chart-blue);
}

.sjokart-dag {
    background: #fff;
    aspect-ratio: 1;
    position: relative;
    padding: 0.4rem;
}

.sjokart-dag__tall {
    font-family: "Spectral", serif;
    font-size: 0.85rem;
    float: right;
}

.sjokart-dag::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dag-farge, var(--farge-ledig));
}

.sjokart-dag--reservert { --dag-farge: var(--farge-reservert); }
.sjokart-dag--utlånt { --dag-farge: var(--farge-utlant); }
.sjokart-dag--vedlikehold, .sjokart-dag--blokkert { --dag-farge: var(--farge-blokkert); }
.sjokart-dag--stengt { --dag-farge: var(--farge-stengt); }
.sjokart-dag--stengt .sjokart-dag__tall { opacity: 0.4; }
.sjokart-dag--utenfor { opacity: 0.35; }

.sjokart-uke {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--chart-blue);
    border: 1px solid var(--chart-blue);
}

.sjokart-ukedag {
    background: #fff;
    padding: 0.85rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.sjokart-ukedag__navn { font-family: "Spectral", serif; font-weight: 600; font-size: 0.85rem; }
.sjokart-ukedag__dato { font-size: 0.8rem; color: var(--chart-blue); }

.sjokart-dagkort {
    background: #fff;
    border: 1px solid var(--chart-blue);
    padding: 1.5rem;
}

.sjokart-dagkort__kommentar { font-style: italic; color: var(--chart-blue); }

@media (max-width: 640px) {
    .detaljark { grid-template-columns: 1fr; }
    .sjokart { padding: 1.25rem; }
    .sjokart-ukedag__navn { display: none; }
}