/* ===========================================================================
   Kalenderen — månedsbilder i admin (kalender-bilder.php), velgeren
   (kalender-bilde-velg.php) og den offentlige sida (kalender.php).

   Alt som har med skjema, kort, knapper og meldinger å gjøre kommer fra
   mjf.css. Her står bare det kalenderen trenger.

   ⚠️ HELE BREDDEN. Ingen max-width i rem/ch på tekst eller sider (Mortens
   grunnregel for mjf.no). Rutenettet av månedskort fyller bredden og
   brytes etter hvor mange som får plass.

   ⚠️ INGEN INLINE STIL I MARKUPEN: CSP-en er `style-src 'self'`.
   =========================================================================== */

.side.kalb { max-width: none; }

.kalb__sammendrag { margin: 0 0 1.25rem; }

/* --- De 13 rutene ----------------------------------------------------------- */

.kalb__rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
}

.kalb__kort { margin: 0; min-width: 0; }
.kalb__kort h2 { margin: 0 0 .75rem; }

.kalb__bilde img { display: block; width: 100%; height: auto; border: 1px solid var(--ramme); }

.kalb__tom {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--bakgrunn);
  border: 1px dashed var(--ramme);
  color: var(--dempet);
}

.kalb__status { margin: .75rem 0; font-size: .95rem; }

/* Tre nivåer, og alle har tekst: fargen er en støtte, ikke eneste bærer. */
.kalb__dpi { font-family: var(--tallfont); font-size: .85rem; }
.kalb__dpi--bra   { color: var(--ok-kant); }
.kalb__dpi--greit { color: var(--tekst); }
.kalb__dpi--lav   { color: var(--feil-kant); font-weight: 600; }

.kalb__ok     { color: var(--ok-kant); }
.kalb__mangler { color: var(--feil-kant); font-weight: 600; }

.kalb__tekstskjema { margin: .75rem 0; }
.kalb__tekstskjema .felt { margin-bottom: .6rem; }

.kalb__knapper { margin: .75rem 0; display: flex; flex-wrap: wrap; gap: .5rem; }

.kalb__opplasting { margin: .75rem 0; }
.kalb__opplasting summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.kalb__opplasting form { margin-top: .75rem; }
.kalb__opplasting .felt input[type="file"] { padding: .35rem 0; border: 0; background: none; }

.kalb__fjern { margin: .75rem 0 0; }

/* --- Bygging av PDF-en ------------------------------------------------------------ */

.kalb__bygg { margin: 0 0 1.25rem; }
.kalb__bygg h2 { margin-top: 0; }
.kalb__problemer { margin: .25rem 0 .75rem 1.25rem; padding: 0; }
.kalb__problemer li { margin: .15rem 0; }
.kalb__byggskjema .felt { margin: .5rem 0 0; }

/* ===========================================================================
   Den offentlige sida: kalender.php. `.kalk` er sida, `.kalm` er månedstabellen.

   ⚠️ TABELLEN ER EN TABELL OGSÅ PÅ TELEFON. Under 820 px skjules bare det som ikke får plass
   (arrangementnavn og helligdagsnavn i cellene); dagtallet og en prikk blir, og alt som er skjult
   står igjen i listene under tabellen. Skjult tekst bruker klipp-teknikken (.kalm__skjult), ikke
   display:none, så en skjermleser får det samme som øyet.
   =========================================================================== */

.kalk .dempet { color: var(--dempet); }

.kalm__skjult {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.kalk__hode {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.5rem; margin-bottom: 1rem;
}
.kalk__hode h1 { margin: 0; }
.kalk__rediger-rad { display: flex; flex-wrap: wrap; gap: .5rem; }

.kalk__aar { margin-bottom: .75rem; }
.kalk .aarsrad.kalk__maaneder { margin-bottom: 1.5rem; }
.kalk__maaneder a b { color: var(--mjf-mork); font-weight: 600; }
.kalk__maaneder a[aria-current] { background: var(--mjf); border-color: var(--mjf); color: #fff; }
.kalk__maaneder a[aria-current] b { color: rgba(255, 255, 255, .85); }

.kalk__pdf p { margin: .5rem 0 0; }
.kalk__pdf .hjelp { margin-left: .5rem; }

.ingen-treff { margin: 1.5rem 0; }

/* --- Listen ----------------------------------------------------------------- */

.kalk__gruppe { margin: 0 0 2rem; }

.kalk__maaned {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .25rem 1rem; margin: 0 0 .75rem;
}
.kalk__somkalender { font-family: var(--brodtekst); font-size: .85rem; font-weight: 400; }

.kalk__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}

.kalk__kort { margin: 0; min-width: 0; display: grid; gap: 1rem; }
.kalk__medplakat { grid-template-columns: 6.5rem minmax(0, 1fr); }

.kalk__plakat img { display: block; width: 100%; height: auto; border: 1px solid var(--ramme); }

.kalk__tekst { min-width: 0; }
.kalk__tekst p { margin: 0 0 .35rem; }

.kalk__dato { font-family: var(--tallfont); font-size: .85rem; color: var(--mjf-mork); }
.kalk__avsluttet { color: var(--dempet); }

.kalk__navn { margin: 0 0 .4rem; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }

.kalk__merker { display: flex; flex-wrap: wrap; gap: .35rem; }
.kalk__merke {
  padding: .05rem .5rem; border: 1px solid var(--ramme); background: var(--bakgrunn);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
}
.kalk__merke--land { background: var(--mjf-100); border-color: var(--mjf-200); }

.kalk__sted { font-weight: 600; }
.kalk__detalj { font-size: .92rem; }
.kalk__kilde { font-size: .92rem; overflow-wrap: anywhere; }
.kalk__rediger { margin-top: .6rem; }

/* Passerte arrangementer: dempet, ikke borte. «Avsluttet» står som tekst, så fargen er en støtte. */
.kalk__over { background: var(--bakgrunn); }
.kalk__over .kalk__navn { color: var(--dempet); }
.kalk__over .kalk__plakat img { filter: grayscale(1); opacity: .75; }

.kalk__tips p { margin-bottom: 0; }

/* --- Måneden --------------------------------------------------------------------- */

.kalk__mtopp { margin: 0 0 1.25rem; display: grid; gap: 1rem; align-items: start; }

.kalk__bilde { margin: 0; }
.kalk__bilde img { display: block; width: 100%; height: auto; border: 1px solid var(--ramme); }
.kalk__bilde figcaption { margin-top: .35rem; }

.kalk__minfo { margin: 0; }
.kalk__minfo p { margin: 0 0 .75rem; }
.kalk__minfo p:last-child { margin-bottom: 0; }
.kalk__mnav { display: flex; flex-wrap: wrap; gap: .5rem; }

.kalm {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  background: var(--flate); border: 1px solid var(--ramme);
  margin: 0 0 .75rem;
}
/* Overskriften over tabellen er h1 på sida; teksten her er for skjermlesere. */
.kalm caption {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.kalm th {
  padding: .4rem .25rem; background: var(--bakgrunn);
  border: 1px solid var(--ramme); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.kalm th abbr { text-decoration: none; }
.kalm th.kalm__uke { width: 2.75rem; color: var(--dempet); font-family: var(--tallfont); font-weight: 400; }
.kalm tbody th.kalm__uke { text-transform: none; font-size: .8rem; }

.kalm td {
  position: relative; height: 6.5rem; padding: .3rem .4rem .35rem;
  border: 1px solid var(--ramme); vertical-align: top; overflow: hidden;
}
.kalm__utenfor { background: var(--bakgrunn); }

.kalm__tall { display: block; font-family: var(--overskrift); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.kalm__navn { display: block; font-size: .72rem; line-height: 1.25; color: var(--dempet); overflow-wrap: anywhere; hyphens: auto; }

.kalm__rod { background: #fdf6f5; }
.kalm__rod .kalm__tall, .kalm__navn--rod { color: var(--feil-kant); }

/* I dag: en ramme innenfor cellen, ikke bare en farge. */
.kalm__idag { box-shadow: inset 0 0 0 2px var(--mjf); }

/* Flaggdag: et lite rødt kvadrat øverst til høyre, som på veggkalenderen. Teksten er skjult, kvadratet er synlig. */
.kalm__flagg {
  position: absolute; top: .4rem; right: .4rem; width: .6rem; height: .6rem;
  background: var(--feil-kant);
}
.kalm__eksempel { display: inline-block; width: .6rem; height: .6rem; background: var(--feil-kant); vertical-align: baseline; }

.kalm__arr { list-style: none; margin: .3rem 0 0; padding: 0; }
.kalm__arr li { margin: 0 0 .15rem; }
.kalm__arr a {
  display: block; padding: .1rem .3rem; font-size: .72rem; line-height: 1.25;
  background: var(--mjf-100); border-left: 3px solid var(--mjf);
  color: var(--mjf-hover); text-decoration: none; overflow-wrap: anywhere; hyphens: auto;
}
.kalm__arr a:hover { background: var(--mjf-200); }

.kalm__prikk { display: none; }

.kalm__tegn { margin: 0 0 1.5rem; }

.kalk__merkedager ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .35rem 1.5rem;
}
.kalk__merkedager li b { display: inline-block; min-width: 2.2rem; font-family: var(--tallfont); font-weight: 400; }

@media (min-width: 900px) {
  .kalk__mtopp--medbilde { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
}

/* --- Smal skjerm: dagtall og prikk --------------------------------------------------
   Under 820 px er en rute under 100 px bred, og et ord som «Intermodellbau» brytes midt i. Da er dagtall og en prikk
   bedre enn avkortet tekst. Grensa er målt, ikke valgt: ved 820 px er teksten akkurat bred nok. (Samme tall som
   topplinja i mjf.css, så sida skifter oppsett på ett sted.) */

@media (max-width: 819px) {
  .kalm th.kalm__uke { width: 2.25rem; }
  .kalm td { height: 4.5rem; padding: .3rem .15rem; text-align: center; }

  /* Navnet står i listen under; i cellen blir det en tekst bare for skjermlesere. */
  .kalm__navn {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .kalm__arr { display: none; }
  .kalm__prikk {
    display: block; width: .55rem; height: .55rem; margin: .25rem auto 0;
    border-radius: 50%; background: var(--mjf);
  }
  .kalm__flagg { top: .25rem; right: .25rem; width: .5rem; height: .5rem; }
}

@media (max-width: 639px) {
  .kalm th { font-size: .7rem; letter-spacing: 0; }
  .kalm th.kalm__uke { width: 2rem; }
  .kalm td { height: 3.4rem; padding: .25rem .1rem; }
  .kalm__tall { font-size: 1rem; }
  .kalm__prikk { width: .5rem; height: .5rem; margin-top: .2rem; }
  .kalm__flagg { top: .2rem; right: .2rem; width: .45rem; height: .45rem; }

  .kalk__medplakat { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* Tastaturfokus på arrangementene i rutene: synlig, og innenfor cellen. */
.kalm__arr a:focus-visible { outline: 2px solid var(--mjf); outline-offset: -2px; }

/* ===========================================================================
   Arrangementene i admin: kalender-rediger.php. `.kalr` er sida.

   Skjema, kort, knapper og meldinger kommer fra mjf.css. Her står bare listen, de to
   verktøykortene og tosporsskjemaet.
   =========================================================================== */

.side.kalr { max-width: none; }

.kalr__verktoy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
  margin: 0 0 1.5rem;
}
.kalr__verktoy .kort { margin: 0; }

.kalr__importliste { margin: .25rem 0 1rem; padding-left: 1.2rem; }

.kalr__aar { margin: 1.5rem 0 .5rem; }

.kalr__sammendrag {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: 0 0 1rem;
}

/* --- Lista ------------------------------------------------------------------ */

.kalr__tabell { overflow-x: auto; margin: 0 0 1.5rem; }
.kalr__tabell .tabell { background: var(--flate); border: 1px solid var(--ramme); }
.kalr__tabell .tabell th[scope="row"] {
  text-align: left; font-size: .95rem; color: inherit; font-weight: 600;
}
.kalr__tabell .tabell td, .kalr__tabell .tabell th { vertical-align: middle; }
.kalr__over td, .kalr__over th { color: var(--dempet); }
.kalr__mini img { display: block; width: 3rem; height: auto; border: 1px solid var(--ramme); }

/* --- Skjemaet ------------------------------------------------------------------ */

.kalr__skjema { display: grid; gap: 1.25rem; align-items: start; margin: 0 0 1.25rem; }
.kalr__skjema .kort { margin: 0; }
.kalr__side { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.kalr__felter { min-width: 0; }

.kalr__to { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }

.kalr__knapper { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }

.kalr__plakat img { display: block; width: 100%; height: auto; border: 1px solid var(--ramme); }
.kalr__plakat .felt input[type="file"] { padding: .35rem 0; border: 0; background: none; }

/* Felt Claude eller koden ikke er sikre på: en rød ramme og en tekst, så fargen ikke er eneste bærer. */
.felt--usikker input, .felt--usikker select { border-color: var(--feil-kant); outline: 2px solid var(--feil-kant); outline-offset: -1px; }
.kalr__sjekk { color: var(--feil-kant); font-weight: 600; }
.kalr__usikkert { margin: .35rem 0 0; padding-left: 1.2rem; }

.kalr__forkast { margin: 0 0 1.25rem; }

.kalr__slett { margin-top: 1.5rem; }
.kalr__slett summary { cursor: pointer; font-weight: 600; color: var(--feil-kant); }
.kalr__slett[open] summary { margin-bottom: .75rem; }

@media (min-width: 900px) {
  .kalr__skjema { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
}

.felt label .kalr__krav { display: inline; font-weight: 400; color: var(--dempet); }

/* Lista kan rulle sidelengs på telefon: den skal kunne nås og rulles med tastaturet, med synlig fokus. */
.kalr__tabell:focus-visible { outline: 2px solid var(--mjf); outline-offset: 2px; }

/* Raden som ble lagret nå: lett farget, og teksten «lagret nå» sier det til dem som ikke ser fargen. */
.kalr__tabell tr.kalr__uthevet td, .kalr__tabell tr.kalr__uthevet th { background: var(--mjf-100); }
.kalr__lagretna { color: var(--mjf-mork); }

/* Det tomme live-området for «leser plakaten» skal ikke ta plass før skriptet fyller det. */
.kalr__leser:empty { margin: 0; }