/* Farger og utseende for muslimer.no */
:root {
  --mork: #0A4D34;
  --gronn: #0F7A4F;
  --mint: #BFF0D4;
  --bakgrunn: #F6FBF8;
  --linje: #D3E5DA;
  --dempet: #3D5A4C;
  --lys-tekst: #DDF3E6;
  --brikke: #E3F2E9;
  --kant: #6F9482;
  --rod: #8A1F11;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bakgrunn); color: var(--mork); font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--gronn); }
a:hover { color: var(--mork); }
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
p { margin: 0; }
.bredde { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.dempet { color: var(--dempet); }
.liten { font-size: 14px; }

/* Topp og bunn */
.topp, .bunn { background: var(--mork); color: #fff; }
.toppinnhold, .bunninnhold { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.bunninnhold { padding-top: 32px; padding-bottom: 32px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-height: 44px; }
.logo:hover { color: #fff; }
.logotekst { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 28px; letter-spacing: 0.01em; }
.logotekst span { color: var(--mint); }
.topp nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topp nav a { color: #fff; text-decoration: none; padding: 10px 14px; }
.topp nav a.aktiv { font-weight: 600; border-bottom: 3px solid var(--mint); }
.bunnlenker { display: flex; flex-wrap: wrap; gap: 24px; }
.bunnlenker a { color: #fff; }

/* Knapper */
.knapp { display: inline-block; font: inherit; font-weight: 600; min-height: 48px; padding: 12px 24px; border: 2px solid var(--gronn); border-radius: 8px; background: var(--gronn); color: #fff; text-decoration: none; cursor: pointer; }
.knapp:hover { background: var(--mork); border-color: var(--mork); color: #fff; }
.knapp.lys, .topp nav a.knapp.lys { background: var(--mint); border-color: var(--mint); color: var(--mork); padding: 8px 18px; min-height: 0; }
.knapp.ramme { background: #fff; color: var(--gronn); }
.knapp.ramme:hover { background: var(--brikke); color: var(--mork); }
.knapp.hvitramme { background: transparent; border-color: #fff; color: #fff; }
.knapp.fare { background: #fff; border-color: var(--rod); color: var(--rod); }

/* Forsidetopp */
.helt { background: var(--mork); color: #fff; }
.heltinnhold { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-top: 48px; padding-bottom: 72px; }
.helttekst { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.helttekst h1 { font-size: clamp(44px, 8vw, 96px); line-height: 0.98; letter-spacing: -0.02em; }
.helttekst h1 span { color: var(--mint); }
.helttekst p { font-size: 20px; max-width: 560px; color: var(--lys-tekst); }
.pille { align-self: flex-start; background: var(--gronn); font-weight: 600; font-size: 15px; padding: 6px 14px; border-radius: 20px; }
.heltknapper { display: flex; flex-wrap: wrap; gap: 12px; }
.heltfigur { flex: 1 1 260px; display: flex; justify-content: center; }
.heltfigur svg { width: 100%; max-width: 360px; height: auto; }
.band { background: var(--mint); color: var(--mork); }
.band div { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 14px; padding-bottom: 14px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px; }

/* Innhold */
main { padding-top: 40px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 32px; }
.filter { display: flex; flex-direction: column; gap: 8px; }
.filtertittel { font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dempet); }
.valg { display: flex; flex-wrap: wrap; gap: 8px; }
.valg a { min-height: 44px; padding: 8px 16px; border: 2px solid #B5CFC0; background: #fff; color: var(--mork); text-decoration: none; font-weight: 500; display: flex; align-items: center; }
.valg.rund a { border-radius: 22px; }
.valg.kant a { border-radius: 8px; }
.valg.rund a.valgt { background: var(--mork); border-color: var(--mork); color: #fff; font-weight: 600; }
.valg.kant a.valgt { background: var(--gronn); border-color: var(--gronn); color: #fff; font-weight: 600; }
.overskriftrad { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* Kort */
.kort, .boks { background: #fff; border: 1px solid var(--linje); border-radius: 12px; }
.kort { display: flex; flex-direction: column; overflow: hidden; }
.boks { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.korttopp { display: flex; gap: 16px; padding: 20px 20px 0; }
.kortkropp { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.datoboks { background: var(--mork); color: #fff; border-radius: 10px; min-width: 68px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.datoboks .ukedag { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mint); font-weight: 600; }
.datoboks .dag { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; }
.datoboks .maaned { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.merkelapp { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gronn); }
.arrangor { font-weight: 500; display: flex; align-items: center; gap: 6px; }
.verifisert { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gronn); color: #fff; font-size: 12px; font-weight: 700; }
.brikker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.brikke { background: var(--brikke); border-radius: 6px; padding: 4px 10px; font-size: 14px; }
.brikke.gul { background: #FBEBC8; }
.brikke.rod { background: #F6D9D2; color: #6B1D0E; }
.merlenke { font-weight: 600; padding-top: 4px; }

/* Skjema */
.todelt { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.todelt > .hoved { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.todelt > aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
fieldset { margin: 0; background: #fff; border: 1px solid var(--linje); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
legend { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; padding: 0 8px; }
.feltrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.felt { display: flex; flex-direction: column; gap: 6px; }
.felt label { font-weight: 600; }
.felt input, .felt select, .felt textarea { font: inherit; min-height: 48px; padding: 10px 14px; border: 2px solid var(--kant); border-radius: 8px; background: #fff; width: 100%; color: var(--mork); }
.felt textarea { resize: vertical; }
.skjult { position: absolute; left: -9999px; }
.avkryss { display: flex; gap: 12px; align-items: flex-start; }
.avkryss input { width: 24px; height: 24px; margin: 2px 0 0; flex-shrink: 0; }
.feil { background: #F6D9D2; color: #6B1D0E; border-radius: 12px; padding: 16px 20px; }
.feil ul { margin: 8px 0 0; padding-left: 20px; }
.ok { background: #D6F0E0; border-radius: 12px; padding: 16px 20px; }
.morkboks { background: var(--mork); color: #fff; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.morkboks ol { margin: 0; padding-left: 20px; color: var(--lys-tekst); display: flex; flex-direction: column; gap: 10px; }
.boks ul { margin: 0; padding-left: 20px; color: var(--dempet); }
.smal { max-width: 720px; }

/* Admin */
.sak { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding: 24px; }
.sak .info { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sak .valgknapper { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.sak .valgknapper .knapp { width: 100%; text-align: center; }
.sak input[type=text] { font: inherit; min-height: 44px; padding: 8px 12px; border: 2px solid var(--kant); border-radius: 8px; width: 100%; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linje); vertical-align: top; }
.tabellboks { overflow-x: auto; border: 1px solid var(--linje); border-radius: 12px; }

/* Stegvise oppskrifter og spørsmål (medlemskapssiden) */
.stegboks h2 { font-size: 24px; }
.steg { margin: 0; padding: 0; list-style: none; counter-reset: steg; display: flex; flex-direction: column; gap: 12px; }
.steg li { counter-increment: steg; display: flex; gap: 14px; align-items: flex-start; font-size: 17px; }
.steg li::before { content: counter(steg); flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--gronn); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mal { background: var(--bakgrunn); border: 1px dashed var(--kant); border-radius: 8px; padding: 16px; white-space: pre-line; margin-top: 12px; }
details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--gronn); }
details.sporsmal { background: #fff; border: 1px solid var(--linje); border-radius: 12px; padding: 4px 20px; }
details.sporsmal summary { color: var(--mork); font-size: 17px; }
details.sporsmal p { padding-bottom: 16px; color: var(--dempet); }
details.sporsmal[open] summary { border-bottom: 1px solid var(--linje); margin-bottom: 12px; }

/* Veiviser (medlemskapssiden) */
.veiviser { display: flex; flex-direction: column; gap: 12px; }
.fremdrift { background: #fff; border: 1px solid var(--linje); border-radius: 12px; padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.fremdriftlinje { height: 6px; background: var(--brikke); border-radius: 3px; overflow: hidden; }
.fremdriftfyll { height: 100%; background: var(--gronn); border-radius: 3px; transition: width 0.3s; }
.fremdrifttekst { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; }
.veiviserkort { background: #fff; border: 1px solid var(--linje); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.veiviserkort h2 { font-size: 26px; }
.valgliste { display: flex; flex-direction: column; gap: 10px; }
.valgkort { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--linje); border-radius: 10px; cursor: pointer; min-height: 60px; }
.valgkort:hover { border-color: var(--kant); }
.valgkort:has(input:checked) { border-color: var(--gronn); background: var(--bakgrunn); }
.valgkort input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--gronn); order: 2; margin-left: auto; }
.valgkort > span { display: flex; flex-direction: column; gap: 2px; }
.veiviserknapper { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--linje); }
.knapp:disabled { background: var(--brikke); border-color: var(--brikke); color: var(--kant); cursor: not-allowed; }
.lenkeknapp { font: inherit; font-weight: 600; background: none; border: 0; color: var(--gronn); cursor: pointer; padding: 10px 0; min-height: 44px; }
.lenkeknapp:hover { color: var(--mork); }

/* Medlemskapsboksen i toppen av forsiden */
.heltkort { flex: 1 1 300px; max-width: 420px; background: var(--gronn); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.heltkort h2 { font-size: 26px; line-height: 1.15; }
.heltkort p { font-size: 16px; color: var(--lys-tekst); max-width: none; }
.heltkort .knapp { margin-top: 4px; }

/* Mobil: menyknapp, kortere topp og mindre overskrift */
.menyknapp { display: none; font: inherit; font-weight: 600; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 8px 16px; min-height: 44px; cursor: pointer; }
@media (max-width: 760px) {
  .menyknapp { display: inline-flex; align-items: center; margin-left: auto; }
  .topp nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; }
  .topp nav.aapen { display: flex; }
  .topp nav a { padding: 12px 4px; border-top: 1px solid rgba(255,255,255,0.15); }
  .topp nav a.aktiv { border-bottom: 0; color: var(--mint); }
  .topp nav a.knapp.lys { margin-top: 12px; border-top: 0; text-align: center; }
  .heltinnhold { padding-top: 32px; padding-bottom: 36px; gap: 28px; }
  .helttekst h1 { font-size: 40px; }
  .helttekst p { font-size: 17px; }
  .heltkort { max-width: none; padding: 22px; }
  .heltknapper { display: none; }
}

/* Mer luft mellom tekst og bokser (gjelder hele siden) */
h1 + p, h1 + .dempet { margin-top: 6px; }
h2 + .rutenett, h2 + .boks, h2 + .tabellboks, h2 + .kort, h2 + .valgliste, h2 + .steg { margin-top: 6px; }
main { gap: 36px; }
.smal { gap: 32px; }
.boks { gap: 14px; }
.rutenett { gap: 24px; }
.valg { gap: 10px; }
.kortkropp { gap: 10px; padding: 18px 20px 22px; }
.korttopp > div:last-child { gap: 6px; }
.merkelapp { margin-bottom: 2px; }
.kort h2, .kort h3 { margin-bottom: 2px; }
.brikker { padding-top: 10px; }
fieldset { gap: 18px; padding: 26px 24px; }
legend { margin-bottom: 4px; }
.felt { gap: 7px; }
details.sporsmal { padding: 8px 20px; }
details.sporsmal p { padding-bottom: 18px; line-height: 1.55; }
.veiviserkort { gap: 20px; padding: 26px 24px; }
.valgkort { padding: 16px 18px; }
.steg { gap: 14px; }
.stegboks h2, .veiviserkort h2 { margin-bottom: 2px; }
.ok, .feil { line-height: 1.55; }
.filter { gap: 10px; }
.morkboks { gap: 14px; }
.tabellboks { margin-top: 4px; }
th, td { padding: 12px 14px; }
@media (max-width: 760px) {
  main { gap: 32px; }
  .smal { gap: 28px; }
}