/*
  Theme Name: Folken Child
  Description: Child theme til redesign af programlisten og eventsiden. Bygger på Play - Folken.
  Template: Folken-theme
  Version: 1.0.0
  Text Domain: folken-child
*/

/* Farver: næsten sort og næsten hvid i stedet for helt sort og hvid, så
   tekst på mørk baggrund er roligere at læse (Jesper 2026-10-14). */
:root {
  --fk-black: #121212;
  --fk-black-raised: #1e1e1e;
  --fk-on-dark: #f2f2f2;
  --fk-text-on-dark: #c8c8c8;
  --fk-muted-on-dark: #a8a8a8;
  --fk-ink: #141414;
  --fk-radius: 6px;
  --fk-font-head: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fk-font-body: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Fint korn, så fladerne ligner trykt papir (tegnes af browseren, ingen billedfil) */
  --fk-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fk-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body,
.topbar li a {
  color: var(--fk-ink);
}
body {
  background-color: #f1f1f1;
}
body,
.topbar {
  background-image: var(--fk-grain-dark);
}
.bg-grey1 {
  background-color: var(--fk-black);
}
.sitefooter {
  background-image: var(--fk-grain-light);
}
.negative,
.negative a {
  color: var(--fk-on-dark);
}
.sitefooter ul li a {
  border-right-color: var(--fk-on-dark);
}

/* Afrundede hjørner på kort, billeder, knapper og felter på hele sitet */
.event-list .fk-event,
.fk-show__image,
.fk-show__info,
.fk-show__cta,
.fk-show__tag,
.fk-artist__media img,
.fk-artist__video,
.fk-artist__label,
.fk-artist__links a,
.fk-gallery img,
.fk-page__image,
.fk-faq,
.fk-hours__card,
.fk-notice,
.fk-newsletter__input,
.fk-history__search input,
.fk-newsletter .fk-newsletter__button,
.fk-404__actions .fk-404__button {
  border-radius: var(--fk-radius);
}
/* Skrifter (2026-10-14): Schibsted Grotesk til overskrifter og menu, Karla til
   al anden tekst. Filerne ligger i fonts/ (ingen kald til Google). Skift skrift
   ved at ændre --fk-font-head/--fk-font-body og filerne nedenfor. */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/karla-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/karla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body,
.filter-nav li,
.accordion .ac-title,
body input,
body button,
body select,
body textarea {
  font-family: var(--fk-font-body);
}
h1,
h2,
h3,
h4,
.h1,
.h2,
.topbar li a,
.show-all a,
.show-all a:link,
.fk-show-bar__title {
  font-family: var(--fk-font-head);
}

/* Regler flyttet fra "Ekstra CSS" i WordPress (2026-10-14), så de ligger i temaet.
   De bruges stadig af forælderens skabeloner (fx nyhedslisten og forsidebanneret). */
.topbar {
  margin-bottom: 50px;
}
.topbanner {
  display: none;
}
.attachment img {
  width: auto;
}
.list-item .image {
  position: relative;
  width: 100%;
  padding-top: 15%;
  background-size: cover;
  background-position: center;
}
.grid h2 {
  font-size: 30px;
}
b,
strong {
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  html {
    margin-bottom: 0;
  }
  .sitefooter {
    position: static;
  }
}

/* ---------------------------------------------------------------
   Programlisten (linticket/short-list.php)
   .list-item, .event-list, .button og .filter-nav kræves af
   js/script.js. Forælderens regler for dem nulstilles her.
   --------------------------------------------------------------- */

/* Kun listevisning: gittervalget skjules */
.filter-nav .list-types {
  display: none;
}
.event-list.boxes {
  margin-left: 0;
}

/* Programsiden får samme luft over og under filteret. */
body:has(.filter-nav) .topbar {
  margin-bottom: 40px;
}

/* Kategorifilter: tekstlinks på alle skærme (forælderens rulleliste bruges
   ikke). Den valgte kategori er understreget med grønt, som i menuen.
   På mobil står de på én række, som man kan stryge til siden. */
.filter-nav {
  margin-bottom: 0;
}
.filter-nav select {
  display: none;
}
.filter-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-bottom: 40px;
}
.filter-nav li {
  margin: 0;
}
.filter-nav li a {
  color: var(--fk-ink);
}
.filter-nav li a span,
.filter-nav li:hover span,
.filter-nav li.selected span {
  margin: 0;
  padding: 8px 0;
  background: none;
  font-size: 18px;
  white-space: nowrap;
  transition: none;
}
.filter-nav li a span:after {
  content: none;
}
@media (hover: hover) {
  .filter-nav li:hover span {
    text-decoration: underline 4px #c6c6c6;
    text-underline-offset: 8px;
  }
}
.filter-nav li.selected span {
  text-decoration: underline 4px #40d48d;
  text-underline-offset: 8px;
}
.filter-nav a:focus {
  outline: none;
}
.filter-nav a:focus-visible {
  outline: 2px solid var(--fk-ink);
  outline-offset: 4px;
}
@media (max-width: 767px) {
  /* Linkene får 4px ekstra luft til fingeren; luften udenom bliver 4px
     mindre, så teksten står samme sted som på store skærme. */
  body:has(.filter-nav) .topbar {
    margin-bottom: 36px;
  }
  /* Rækken toner ud til højre, så man kan se, at der er flere. Den ekstra
     plads til sidst gør, at den sidste kategori kan strøges fri af toningen. */
  .filter-nav ul {
    flex-wrap: nowrap;
    gap: 24px;
    margin-bottom: 36px;
    padding-right: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 40px);
    mask-image: linear-gradient(to left, transparent, #000 40px);
  }
  .filter-nav ul::-webkit-scrollbar {
    display: none;
  }
  .filter-nav li a span,
  .filter-nav li:hover span,
  .filter-nav li.selected span {
    padding: 12px 0;
  }
}

/* Programmet som gitter: 3 kort i bredden på store skærme, 2 på mellemstore
   og 1 på mobil. Hvert kort har billedet (3:2) øverst og teksten under. */
.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px 32px;
}

/* Ét arrangement */
.event-list .fk-event {
  display: flex;
  flex-direction: column;
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--fk-black);
  color: var(--fk-on-dark);
  cursor: pointer;
}
.fk-event__image {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
/* Grøn nuance over billedet ved mus over kortet, som i det oprindelige design */
.fk-event:hover:has(.fk-event__image)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  aspect-ratio: 3 / 2;
  background: rgba(0, 136, 71, 0.3);
  pointer-events: none;
}
/* Teksten ligger over billedet, så billedets zoom ved mus over ikke dækker den */
.fk-event__body {
  display: flex;
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 18px 20px 20px;
  background: inherit;
}
.fk-event .fk-event__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.fk-event__title a {
  color: var(--fk-on-dark);
  text-decoration: none;
}
.fk-event:hover .fk-event__title a,
.fk-event__title a:focus-visible {
  text-decoration: underline;
}
.fk-event__teaser {
  display: -webkit-box;
  margin: 10px 0 0;
  overflow: hidden;
  color: var(--fk-text-on-dark);
  font-size: 16px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* Dato og tid står over navnet */
.fk-event__meta {
  display: flex;
  flex-wrap: wrap;
  order: -1;
  gap: 6px 22px;
  margin: 0 0 10px;
  font-size: 16px;
}
.fk-event__date::before,
.fk-event__time::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.fk-event__date {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.fk-event__time {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* Knappen er et lille venstrestillet mærke med afrundet ramme, som genrerne på
   eventsiden. Rammens farve viser status: grå = kjøp og les mer, orange = få
   igjen, rød = utsolgt. Ved mus over kortet fyldes mærket med farven. */
.fk-event .button {
  align-self: flex-start;
  margin: 0 20px 20px;
  padding: 6px 12px;
  border: 1px solid #9b9b9b;
  color: var(--fk-on-dark);
  font-size: 15px;
  font-weight: 700;
}
.fk-event .button:before,
.fk-event .button:after {
  content: none;
}
.fk-event--few .button {
  border-color: #f39200;
}
.fk-event--soldout .button {
  border-color: #b3001b;
}
.fk-event:hover .button,
.fk-event .button:focus-visible {
  border-color: #008847;
  background: #008847;
}
.fk-event--few:hover .button,
.fk-event--few .button:focus-visible {
  border-color: #f39200;
  background: #f39200;
  color: var(--fk-ink);
}
.fk-event--soldout:hover .button,
.fk-event--soldout .button:focus-visible {
  border-color: #b3001b;
  background: #b3001b;
}

@media (max-width: 667px) {
  .event-list {
    gap: 24px;
  }
  .fk-event__body {
    padding: 16px;
  }
  .fk-event .button {
    margin: 0 16px 16px;
  }
}

/* ---------------------------------------------------------------
   Eventsiden (linticket/show-template.php)
   --------------------------------------------------------------- */

/* Eventsiden: headerens sorte streg går direkte over i den sorte top */
body:has(.fk-show) .topbar {
  margin-bottom: 0;
}
.fk-show {
  padding: 28px 0 64px;
  background: var(--fk-black) var(--fk-grain-light);
  color: var(--fk-on-dark);
}
.fk-show__crumbs {
  margin: 0 0 20px;
  font-size: 14px;
}
.fk-show__crumbs a {
  color: var(--fk-on-dark);
}
.fk-show__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.fk-show__tag {
  padding: 4px 10px;
  border: 1px solid #9b9b9b;
  font-size: 13px;
}
/* Den store overskrift på eventsiden og de almindelige sider */
.fk-show .fk-show__title,
.fk-page-top .fk-page-top__title {
  max-width: 900px;
  margin: 0;
  color: var(--fk-on-dark);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
}
.fk-show__top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 36px;
}
.fk-show__image {
  flex: 2 1 560px;
  width: auto;
  min-width: 0;
  object-fit: cover;
}
.fk-show__info {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 24px;
  padding: 28px;
  background: var(--fk-black-raised);
}
.fk-show__facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 24px;
  margin: 0;
  font-size: 16px;
}
.fk-show__facts dt {
  color: var(--fk-muted-on-dark);
}
.fk-show__facts dd {
  margin: 0;
  font-weight: 700;
}
/* "eller med verge" efter aldersgrænsen */
.fk-show__note {
  font-weight: 400;
}
.fk-show__note a {
  color: #40d48d;
}
:is(.fk-show, .fk-show-bar) .fk-show__cta {
  display: block;
  margin: auto 0 0;
  padding: 23px 0;
  background: #008847;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
:is(.fk-show, .fk-show-bar) a.fk-show__cta:hover,
:is(.fk-show, .fk-show-bar) a.fk-show__cta:focus-visible {
  background: #006d39;
}
:is(.fk-show, .fk-show-bar) .fk-show__cta--few {
  background: #f39200;
  color: var(--fk-ink);
}
:is(.fk-show, .fk-show-bar) a.fk-show__cta--few:hover,
:is(.fk-show, .fk-show-bar) a.fk-show__cta--few:focus-visible {
  background: #c27400;
}
:is(.fk-show, .fk-show-bar) .fk-show__cta--soldout {
  background: #b3001b;
}
:is(.fk-show, .fk-show-bar) a.fk-show__cta--soldout:hover,
:is(.fk-show, .fk-show-bar) a.fk-show__cta--soldout:focus-visible {
  background: #8f0016;
}
.fk-show__resale {
  margin: -12px 0 0;
  font-size: 14px;
}
.fk-show__resale a {
  color: #40d48d;
}

@media (max-width: 667px) {
  .fk-show {
    padding: 20px 0 32px;
  }
  .fk-show .fk-show__title {
    font-size: 32px;
    line-height: 1.1;
  }
  .fk-show__top {
    gap: 0;
    margin-top: 20px;
  }
  .fk-show__info {
    padding: 20px 16px;
  }
}

/* Eventsiden: intro, artistblokke, galleri og bundbjælke */
.fk-intro {
  max-width: 760px;
  padding: 56px 0 16px;
  font-size: 19px;
  line-height: 1.6;
}
.fk-artist {
  max-width: 760px;
  padding: 48px 0;
  border-top: 1px solid #c6c6c6;
}
/* Billede eller video står over bandnavnet */
.fk-artist__media {
  margin-bottom: 24px;
}
.fk-artist__media img {
  display: block;
  height: auto;
}
.fk-artist__video {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.fk-artist__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.fk-artist__text {
  font-size: 17px;
  line-height: 1.6;
}
.fk-artist__label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 10px;
  background: var(--fk-black);
  color: var(--fk-on-dark);
  font-size: 13px;
  font-weight: 700;
}
.fk-artist .fk-artist__name {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
}
.fk-artist__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.fk-artist__links a {
  padding: 10px 16px;
  border: 2px solid var(--fk-ink);
  color: var(--fk-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.fk-artist__links a:hover,
.fk-artist__links a:focus-visible {
  background: var(--fk-black);
  color: var(--fk-on-dark);
}
.fk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 48px 0;
  border-top: 1px solid #c6c6c6;
}
.fk-gallery img {
  display: block;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.fk-show-bar {
  margin-top: 48px;
  padding: 36px 0;
  background: var(--fk-black) var(--fk-grain-light);
  color: var(--fk-on-dark);
}
.fk-show-bar .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.fk-show-bar__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}
.fk-show-bar__when {
  margin: 4px 0 0;
  color: var(--fk-text-on-dark);
}
.fk-show-bar .fk-show__cta {
  width: 220px;
  margin: 0;
}

@media (max-width: 667px) {
  .fk-intro {
    padding-top: 32px;
    font-size: 17px;
  }
  .fk-artist {
    padding: 32px 0;
  }
  .fk-artist__media {
    margin-bottom: 16px;
  }
  .fk-artist .fk-artist__name {
    font-size: 28px;
  }
  .fk-artist__links a {
    padding: 12px 14px;
  }
  .fk-show-bar .fk-show__cta {
    width: 100%;
  }
}
/* Headeren har samme højde på alle skærmbredder, så indholdet ikke hopper:
   mellemstore skærme får lidt smallere menupunkter, så menuen kan være på
   én linje, og med menuknappen får logo-rækken samme højde som menuen. */
@media (min-width: 861px) and (max-width: 1100px) {
  .topbar .main-nav li span {
    padding: 21px 10px;
    font-size: 16px;
  }
}
@media (max-width: 860px) {
  .topbar {
    padding-top: 39px;
  }
  .topbar > .content {
    padding-bottom: 9px;
  }
}

/* Kontaktoplysningerne i menuen vises kun i mobilmenuen. */
.fk-menu-contact {
  display: none;
}

/* ---------------------------------------------------------------
   Mobilmenu (forældertemaets menu under 861px). js/script.js sætter
   klassen .open på .main-nav, når man trykker på menuknappen.
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Den åbne menu dækker hele skærmen med en sort flade; menuknappen (krydset)
     ligger ovenpå, og siden bagved kan ikke scrolles imens. */
  html:has(.main-nav.open) {
    overflow: hidden;
  }
  .topbar .main-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow-y: auto;
    padding: 110px 24px 40px;
    border-top: 0;
    background: var(--fk-black) var(--fk-grain-light);
  }
  .topbar .main-nav.open {
    display: flex;
    flex-direction: column;
  }
  .topbar .mobile-menu {
    position: relative;
    z-index: 101;
  }
  .fk-menu-contact {
    display: block;
    margin-top: auto;
    padding-top: 48px;
    color: var(--fk-text-on-dark);
    font-size: 17px;
    line-height: 1.5;
  }
  .fk-menu-contact a {
    color: inherit;
  }
  .fk-menu-contact a:is(:hover, :focus, :active) {
    color: #40d48d;
  }
  .fk-menu-contact__social {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
  }
  .topbar .main-nav ul {
    text-align: left;
  }
  .topbar .main-nav li + li {
    border-top: 1px solid rgb(255 255 255 / 0.15);
  }
  .topbar .main-nav li a {
    color: var(--fk-on-dark);
  }
  .topbar .main-nav li span,
  .topbar .main-nav li span:hover,
  .topbar .main-nav li.current-menu-item span {
    padding: 18px 0;
    background: none;
    font-size: 30px;
    line-height: 1.15;
  }
  .topbar .main-nav li span:after {
    content: none;
  }
  .topbar .main-nav li.current-menu-item span {
    text-decoration: underline 4px #40d48d;
    text-underline-offset: 8px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .topbar .main-nav.open {
      transition: opacity 0.25s;
    }
    @starting-style {
      .topbar .main-nav.open {
        opacity: 0;
      }
    }
  }

  /* Menuknappen (header.php) tegnes med tre lige lange streger og bliver til
     et kryds, mens menuen er åben. */
  .topbar .hamburger {
    display: block;
    position: relative;
    width: 35px;
    height: 35px;
  }
  .topbar .hamburger::before,
  .topbar .hamburger::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 2px;
    width: 31px;
    height: 3px;
    background: var(--fk-ink);
  }
  .topbar .hamburger::before {
    box-shadow: 0 10px var(--fk-ink), 0 20px var(--fk-ink);
  }
  .topbar .hamburger::after {
    display: none;
  }
  .topbar:has(.main-nav.open) .hamburger::before,
  .topbar:has(.main-nav.open) .hamburger::after {
    display: block;
    top: 16px;
    box-shadow: none;
    background: var(--fk-on-dark);
    transform: rotate(45deg);
  }
  .topbar:has(.main-nav.open) .hamburger::after {
    transform: rotate(-45deg);
  }
}

/* ---------------------------------------------------------------
   Almindelige sider (page.php)
   --------------------------------------------------------------- */
body:has(.fk-page-top) .topbar {
  margin-bottom: 0;
}
.fk-page-top {
  padding: 28px 0 48px;
  background: var(--fk-black) var(--fk-grain-light);
  color: var(--fk-on-dark);
}
.fk-page-top__ingress {
  max-width: 760px;
  margin-top: 20px;
  color: var(--fk-text-on-dark);
  font-size: 20px;
  line-height: 1.5;
}
.fk-page-top__date {
  margin: 12px 0 0;
  color: var(--fk-muted-on-dark);
  font-size: 15px;
}
.fk-page__content .fk-page__image {
  display: block;
  width: 100%;
  margin-bottom: 32px;
}
.fk-page-top__ingress p {
  margin: 0;
  line-height: inherit;
}
.fk-page {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 64px;
}
.fk-page .fk-page__nav-title {
  margin: 0 0 12px;
  font-size: 20px;
}
.fk-page--single {
  grid-template-columns: minmax(0, 760px);
}
.fk-page__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fk-page__nav li + li {
  border-top: 1px solid #c6c6c6;
}
.fk-page__nav a {
  display: block;
  padding: 12px 0;
  color: var(--fk-ink);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) {
  .fk-page__nav a:hover {
    text-decoration: underline 4px #c6c6c6;
    text-underline-offset: 8px;
  }
}
.fk-page__nav .current_page_item > a {
  text-decoration: underline 4px #40d48d;
  text-underline-offset: 8px;
}

/* Sidens tekst fra WordPress */
.fk-page__content {
  font-size: 18px;
  line-height: 1.6;
}
.fk-page__content > :first-child {
  margin-top: 0;
}
.fk-page__content p {
  margin: 0 0 1em;
  line-height: inherit;
}
.fk-page__content h2 {
  margin: 1.6em 0 0.5em;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}
.fk-page__content h3 {
  margin: 1.4em 0 0.4em;
  font-size: 22px;
  font-weight: 700;
}
.fk-page__content a {
  color: #006d39;
  text-decoration: underline;
}
.fk-page__content a:hover {
  color: var(--fk-ink);
}
.fk-page__content img {
  max-width: 100%;
  height: auto;
}
.fk-page__content ul,
.fk-page__content ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

/* FAQ: [Accordion] som <details>, uden animation */
.fk-faq {
  margin-bottom: 8px;
  border-bottom: 1px solid #c6c6c6;
  background: #fff;
}
.fk-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.fk-faq summary::-webkit-details-marker {
  display: none;
}
.fk-faq summary::after {
  content: "+";
  font-size: 24px;
  line-height: 1;
}
.fk-faq[open] summary::after {
  content: "\2013";
}
.fk-faq__answer {
  padding: 0 20px 18px;
}
.fk-faq__answer > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .fk-page-top {
    padding: 20px 0 32px;
  }
  .fk-page-top .fk-page-top__title {
    font-size: 32px;
    line-height: 1.1;
  }
  .fk-page-top__ingress {
    font-size: 17px;
  }
  .fk-page {
    display: block;
    padding-top: 24px;
    padding-bottom: 40px;
  }
  /* Undermenuen som tekstlinks på én række, ligesom programfilteret */
  .fk-page__nav {
    margin-bottom: 24px;
  }
  .fk-page__nav ul {
    display: flex;
    gap: 24px;
    padding-right: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 40px);
    mask-image: linear-gradient(to left, transparent, #000 40px);
  }
  .fk-page__nav ul::-webkit-scrollbar {
    display: none;
  }
  .fk-page__nav li + li {
    border-top: 0;
  }
  .fk-page__nav a {
    font-size: 18px;
    white-space: nowrap;
  }
  .fk-page__content {
    font-size: 17px;
  }
  .fk-page__content h2 {
    font-size: 24px;
  }
  .fk-page__content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ---------------------------------------------------------------
   Informasjon (page-om-folken.php): emnelinje øverst, der bliver
   hængende og kan stryges sidelæns, og et emne pr. H2.
   --------------------------------------------------------------- */
.fk-topics {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid #c6c6c6;
  background: #f1f1f1 var(--fk-grain-dark);
}
/* Når man er logget ind, stopper linjen under WordPress' administrationslinje
   (32px, 46px på smalle skærme; under 601px ruller administrationslinjen med væk). */
.admin-bar .fk-topics {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .fk-topics {
    top: 46px;
  }
}
@media (max-width: 600px) {
  .admin-bar .fk-topics {
    top: 0;
  }
}
.fk-topics ul {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.fk-topics ul::-webkit-scrollbar {
  display: none;
}
.fk-topics a {
  display: block;
  padding: 16px 0 12px;
  border-bottom: 4px solid transparent;
  color: var(--fk-ink);
  font-family: var(--fk-font-head);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.fk-topics a:is(:hover, :focus, :active, :visited) {
  color: var(--fk-ink);
}
/* Emnet man er ved (sat af js/fk-topics.js), ligesom programfilteret */
.fk-topics a[aria-current] {
  border-bottom-color: #40d48d;
}
@media (prefers-reduced-motion: no-preference) {
  .fk-topics a {
    transition: border-color 0.25s;
  }
}
@media (hover: hover) {
  .fk-topics a:not([aria-current]):hover {
    border-bottom-color: #c6c6c6;
  }
}
.fk-info {
  max-width: 760px;
  padding: 16px 0 48px;
  font-size: 18px;
  line-height: 1.6;
}
.fk-info__intro,
.fk-info__topic {
  padding: 32px 0;
}
/* Emnet lander under emnelinjen, når man hopper til det */
.fk-info__topic {
  scroll-margin-top: 60px;
}
.fk-info__topic + .fk-info__topic {
  border-top: 1px solid #c6c6c6;
}
.fk-info h2 {
  margin: 0 0 16px;
  font-size: 30px;
}
@media (max-width: 767px) {
  /* På mobil én række, der kan stryges, ligesom programfilteret */
  .fk-topics ul {
    flex-wrap: nowrap;
    padding-right: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 40px);
    mask-image: linear-gradient(to left, transparent, #000 40px);
  }
  .fk-info {
    font-size: 17px;
  }
  .fk-info h2 {
    font-size: 24px;
  }
}

/* ---------------------------------------------------------------
   Konserthistorikk (page-konserthistorikk.php): år for år med samme
   emnelinje som Informasjon og et søgefelt.
   --------------------------------------------------------------- */
.fk-topics--years ul {
  column-gap: 18px;
}
.fk-history {
  max-width: 760px;
  padding: 32px 0 48px;
}
.fk-history [hidden] {
  display: none;
}
.fk-history__search label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}
.fk-history__search input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--fk-ink);
  background: #fff;
  color: var(--fk-ink);
  font-size: 18px;
}
.fk-history__year {
  padding-top: 32px;
  scroll-margin-top: 60px;
}
.fk-history h2 {
  margin: 0 0 8px;
  font-size: 30px;
}
.fk-history h2 span {
  color: #6b6b6b;
  font-family: var(--fk-font-body);
  font-size: 16px;
  font-weight: 400;
}
.fk-history ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fk-history li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #d6d6d6;
  font-size: 17px;
  line-height: 1.4;
}
.fk-history time {
  color: #6b6b6b;
  white-space: nowrap;
}
.fk-history__empty,
.fk-history__text {
  padding-top: 32px;
}

/* ---------------------------------------------------------------
   Åpningstider (page-apningstider.php)
   --------------------------------------------------------------- */
.fk-notice {
  max-width: 760px;
  margin-top: 24px;
  padding: 16px 20px;
  background: #40d48d;
  color: var(--fk-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.fk-notice p {
  margin: 0;
  line-height: inherit;
}
.fk-notice p + p {
  margin-top: 8px;
}
.fk-hours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding-top: 48px;
  padding-bottom: 64px;
}
.fk-hours__intro {
  grid-column: 1 / -1;
}
.fk-hours__card {
  padding: 24px;
  background: #fff;
  font-size: 18px;
  line-height: 1.6;
}
.fk-hours__card :is(h1, h2, h3, h4) {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}
.fk-hours__card p {
  margin: 0 0 0.6em;
  line-height: inherit;
}
.fk-hours__card > :last-child {
  margin-bottom: 0;
}
.fk-hours__card a {
  color: #006d39;
}

@media (max-width: 767px) {
  .fk-notice {
    font-size: 17px;
  }
  .fk-hours {
    padding-top: 24px;
    padding-bottom: 40px;
  }
}

/* ---------------------------------------------------------------
   404 (404.php, også for arrangementer der ikke findes)
   --------------------------------------------------------------- */
.fk-404__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin: 32px 0 0;
}
.fk-404__actions .fk-404__button {
  padding: 18px 28px;
  background: #008847;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.fk-404__actions .fk-404__button:hover,
.fk-404__actions .fk-404__button:focus-visible {
  background: #006d39;
}
.fk-404__actions .fk-404__link {
  color: var(--fk-on-dark);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   Nyhetsbrev ([Nyhetsbrev] i functions.php)
   --------------------------------------------------------------- */
.fk-newsletter {
  max-width: 560px;
  margin: 24px 0;
  font-family: var(--fk-font-body);
  white-space: normal;
}
.fk-newsletter__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}
.fk-newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fk-newsletter__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 16px;
  border: 2px solid var(--fk-ink);
  background: #fff;
  color: var(--fk-ink);
  font-size: 18px;
}
.fk-newsletter .fk-newsletter__button {
  flex: 0 0 auto;
  padding: 16px 28px;
  border: 0;
  background: #008847;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.fk-newsletter .fk-newsletter__button:hover,
.fk-newsletter .fk-newsletter__button:focus-visible {
  background: #006d39;
}
.fk-newsletter .fk-newsletter__note {
  margin: 12px 0 0;
  font-size: 15px;
}
@media (max-width: 767px) {
  .fk-newsletter .fk-newsletter__button {
    flex-basis: 100%;
  }
}

/* Videoer, der venter på samtykke (Complianz): sort flade med korn og grøn knap
   i stedet for Complianz' grå billede, som Complianz sætter med !important. Uden
   Complianz' skygge og fade-in; artistvideoer får samme størrelse som videoen (16:9). */
div.cmplz-blocked-content-container[class*="cmplz-placeholder-"] {
  box-shadow: none;
  animation: none;
  background: var(--fk-black) var(--fk-grain-light) !important;
}
.fk-artist__video.cmplz-blocked-content-container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice {
  width: auto !important;
  max-width: min(80%, 360px) !important;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--fk-radius);
  background: #008847;
  color: #fff;
  font-family: var(--fk-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.cmplz-blocked-content-container .cmplz-blocked-content-notice:is(:hover, :focus-visible) {
  background: #006d39;
}

/* Tilmeldingsboks under programmet og på eventsiderne */
.fk-signup {
  margin: 64px 0 24px;
  padding: 32px;
  border-radius: var(--fk-radius);
  background: var(--fk-black) var(--fk-grain-light);
  color: var(--fk-text-on-dark);
}
.fk-signup .fk-signup__title {
  margin: 0;
  color: var(--fk-on-dark);
  font-size: 28px;
  line-height: 1.2;
}
.fk-signup .fk-newsletter {
  margin: 20px 0 0;
}
.fk-signup .fk-newsletter__input {
  border-color: transparent;
  background: var(--fk-on-dark);
}
.fk-signup .fk-newsletter__note a {
  color: inherit;
}
.fk-signup .fk-newsletter__note a:is(:hover, :focus, :active) {
  color: #40d48d;
}
/* På eventsiden står boksen med lige meget luft over og under (48px),
   uanset om teksten slutter med en artistblok, galleriet eller almindelig tekst. */
.fk-show + section .fk-signup {
  margin: 48px 0 0;
}
.fk-show + section :is(.fk-intro, .fk-artist, .fk-gallery):has(+ .fk-signup) {
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .fk-signup {
    padding: 24px 20px;
  }
}

/* ---------------------------------------------------------------
   Lidt liv i programkortene
   --------------------------------------------------------------- */
/* Ved mus over løfter kortet sig lidt, og billedet zoomer en anelse ind.
   Kun med mus og kun hvis den besøgende ikke har slået "reducer bevægelse" til. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .event-list .fk-event {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .event-list .fk-event:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
  }
  .fk-event__image {
    transition: transform 0.3s ease;
  }
  .fk-event:hover .fk-event__image {
    transform: scale(1.02);
  }
}