/* ihlen.net – felles stilark */

/* ---------- Fonter (latin-delsett) ---------- */
@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Philosopher"; font-weight: 400; font-display: swap; src: url(../fonts/philosopher-400.woff2) format("woff2"); }
@font-face { font-family: "Philosopher"; font-weight: 700; font-display: swap; src: url(../fonts/philosopher-700.woff2) format("woff2"); }
@font-face { font-family: "Marmelad"; font-weight: 400; font-display: swap; src: url(../fonts/marmelad-400.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 100 900; font-display: swap; src: url(../fonts/montserrat-var.woff2) format("woff2"); }

:root {
    --navy: #1C244B;
    --navy-hover: #324A6D;
    --blue: #4054B2;
    --bright-blue: #0000ff;
    --plum: #9B405D;
    --footer-bg: #B7D9F0;
    --muted: #808080;
    --max: 1600px;
}

/* ---------- Grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background: #fff;
    color: #000;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5;
}
main { flex: 1; width: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3, h4 { line-height: 1.2; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }

.button {
    display: inline-block;
    padding: 12px 24px;
    background: var(--blue);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font: inherit;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}
.button:hover { filter: brightness(1.15); }
.muted { color: var(--muted); }

/* ---------- Topp og bunn ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 30px;
    margin: 0;
    padding: 15px 5%;
    list-style: none;
}
.main-nav a {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: var(--navy);
    text-decoration: none;
    padding: 5px 0;
    border-bottom: 1px solid transparent;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--navy-hover); border-bottom-color: var(--navy-hover); }

.site-footer { background: var(--footer-bg); text-align: center; padding: 4px 16px; }

/* ---------- Gerhard: tre horisontale deler ---------- */
.page-gerhard main { display: flex; flex-direction: column; }
.page-gerhard .hero {
    position: relative;
    flex: 1 1 0;
    min-height: 140px;
    justify-content: center;
    align-items: flex-start;
    padding-top: 1rem;
    padding-bottom: 3.5rem;
}
.page-gerhard .cards {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 1.5rem max(16px, calc((100% - var(--max)) / 2));
    background: url(../images/desert.png) center / cover;
}
.page-gerhard .cards .card .button {
    margin-top: 0;
    min-height: 140px;
    padding: 0.75rem 1rem;
}
.page-gerhard .bottom-band {
    flex: 1 1 0;
    min-height: 100px;
    background: url(../images/stormvar.png) center / cover;
}
.hero-audio {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 240px;
    height: 30px;
}

/* ---------- Forside ---------- */
.landing {
    padding: 2rem 5%;
    min-height: 300px;
    background: url(../images/utsikt-peffbu.jpg) center / cover;
    text-align: center;
}
.landing h1 { margin: 0; font-size: 39px; font-weight: 600; color: var(--bright-blue); }

.hero {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem 5%;
    background: url(../images/svalbard.png) center / cover;
}
.hero-portrait { width: 238px; flex-shrink: 0; }
.hero-text { flex: 1; text-align: center; }
.hero-text h1 { margin: 0 0 1rem; font-size: 39px; font-weight: 600; color: var(--bright-blue); }
.hero-text p { margin: 15px; font-family: "Philosopher", sans-serif; font-size: 25px; }
.hero-text .hero-small { font-size: 14px; font-family: Helvetica, Arial, sans-serif; }

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: var(--max);
    margin: 0 auto;
    padding: 2rem 16px;
}
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-3 .card .button { margin-top: 1rem; }
.card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card img { width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.cards-portrait .card img { max-width: 270px; aspect-ratio: 3 / 4; }
.cards-portrait .card .button { max-width: 270px; }
.card p { flex: 1; font-family: "Philosopher", sans-serif; font-size: 17px; color: var(--blue); }
.card .button { width: 100%; max-width: 320px; min-height: 68px; display: flex; align-items: center; justify-content: center; }


/* ---------- Profesjonelt ---------- */
.cv {
    display: grid;
    grid-template-columns: 57fr 43fr;
    gap: 0 30px;
    max-width: var(--max);
    margin: 50px auto 30px;
    padding: 10px 30px 30px;
    border: 5px solid var(--blue);
}
.cv-name {
    grid-column: 1 / -1;
    margin: 20px 0 0;
    font-family: "Philosopher", sans-serif;
    font-size: 49px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}
.cv h2 { font-family: "Philosopher", sans-serif; font-size: 40px; font-weight: 400; color: var(--blue); }
.cv h3 {
    margin: 2rem 0 1rem;
    font-family: "Marmelad", sans-serif;
    font-size: 26px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--blue);
}
.cv h4 { margin: 0 0 .5rem; font-family: "Marmelad", sans-serif; font-size: 19px; font-weight: 700; color: var(--plum); }
.cv-col .cv-years { margin: 2.6rem 0 .4rem; font-family: "Marmelad", sans-serif; font-size: 15px; color: var(--blue); }

.cv-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cv-col {
    padding: 0 40px 40px 0;
    border-right: 3px solid var(--blue);
    text-align: right;
    font-family: Arial, sans-serif;
    font-size: 15px;
    letter-spacing: .5px;
}
.cv-col p { margin: 0; line-height: 1.8; }
.cv-col h3:first-child { margin-top: 0; }
.cv-col a { color: #000; text-decoration: none; }
.cv-col-center { text-align: center; }

.cv-knowledge p { font-size: 15px; }
.link-list { padding: 0; list-style: none; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .6px; }
.link-list li { margin-bottom: .8rem; }
.link-list .muted { display: block; font-weight: 400; color: #666699; }

/* ---------- Familiens sider og innlogging ---------- */
.family main { font-family: "Montserrat", sans-serif; font-weight: 200; }
.family-title {
    margin: 0;
    padding: 5% 5% 1rem;
    font-size: 65px;
    font-weight: 200;
    text-align: center;
    text-transform: uppercase;
}
.family-title b { font-weight: 600; }

.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 5%; }
.topic-group { min-width: 0; }
.topic {
    position: relative;
    height: 320px;
    overflow: hidden;
}
.slides {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slide { display: flex; flex-direction: column; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; scroll-snap-align: start; }
.slide img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; display: block; }
.slide figcaption { flex: 0 0 auto; padding: 6px 12px; text-align: center; font-size: 15px; }
.cv-rule { margin: 2rem 0 1.5rem; border: 0; border-top: 1px solid #000; }
.cv-gallery { max-width: 720px; }
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.carousel-btn:hover { background: #fff; }
.carousel-play {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 40px;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.carousel-play:hover { background: #fff; }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
.topic-title { margin: 0 0 .5rem; font-size: 22px; font-weight: 400; text-align: center; text-transform: uppercase; }

.songs { max-width: 760px; margin: 0 auto; padding: 2rem 16px 3rem; }
.songs h2 { font-size: 35px; font-weight: 200; text-align: center; text-transform: uppercase; border-bottom: 1px solid #000; padding-bottom: .5rem; }
.songs ul { padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.songs li { margin-bottom: .6rem; font-size: 18px; }
.songs a { color: #000; }

.song { max-width: 700px; margin: 0 auto; padding: 2rem 16px 3rem; }
.song h1 { font-size: 35px; font-weight: 200; text-transform: uppercase; }
.song p { margin: 0 0 1.4rem; font-size: 17px; font-weight: 400; }
.song a { color: #000; }

.login { max-width: 400px; margin: 4rem auto; padding: 0 16px; text-align: center; }
.login form { display: grid; gap: 1rem; text-align: left; }
.login label { display: grid; gap: .3rem; }
.login input { padding: 10px; font: inherit; border: 1px solid #aaa; border-radius: 3px; }
.login .check { display: flex; align-items: flex-start; gap: .5rem; }
.login .check input { margin: .25rem 0 0; }
/* Bekreftelsen vises først når «Husk meg» er krysset av (sjekkes også på serveren) */
.login .own-device { display: none; margin-left: 1.5rem; font-size: .9em; }
.login form:has([name="remember"]:checked) .own-device { display: flex; }
.form-error { color: #c00; }

/* ---------- Mobil / nettbrett ---------- */
@media (max-width: 1024px) {
    .cards, .cards-3 { grid-template-columns: repeat(2, 1fr); }
    .cv { grid-template-columns: 1fr; margin-inline: 16px; padding-inline: 20px; }
}
@media (max-width: 767px) {
    .hero { flex-direction: column; align-items: center; }
    .hero-text h1 { font-size: 28px; }
    .hero-text p { font-size: 20px; }
    .cards, .cards-3, .topics, .cv-columns { grid-template-columns: 1fr; }
    .cv-name { font-size: 34px; }
    .cv h2 { font-size: 30px; }
    .family-title { font-size: 40px; }
    .songs ul { columns: 1; }
}

/* ---------- Julesanger ---------- */
.back-link { padding: 1rem 5% 0; margin: 0; }
.songs-hero { padding: 1rem 5% 0; text-align: center; }
.songs-hero img { margin-inline: auto; max-width: 100%; max-height: 360px; object-fit: contain; }
.songs-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 2rem 5% 3rem; margin: 0; }
.songs-link .button { font-family: Helvetica, Arial, sans-serif; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; min-width: 240px; min-height: 68px; }

.song .back-link { padding: 0; }
.song-actions { margin: 0 0 1.4rem; }
.song-actions .button { font-family: Helvetica, Arial, sans-serif; font-weight: 400; }

/* ---------- Utskrift ---------- */
@media print {
    .site-header, .site-footer, .skip-link, .song .back-link, .song-actions { display: none; }
    body { max-width: none; min-height: 0; display: block; }
    .family main { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
    .song { padding: 0; }
    .song h1 { font-size: 26pt; font-weight: 400; text-align: center; }
    .song p { font-size: 14pt; line-height: 1.5; break-inside: avoid; }
}