/* =========================================================
   HISTORIEFABRIKKEN – FINAL CLEAN CSS
   Harmoniseret typografi, spacing og kortlayout
   med justeret topmenu og ny font (Inter)
   ========================================================= */

/* ---------- Google Font (husk i HTML-head) ----------
<link href="https://fonts.googleapis.com/css2?family=Blinker:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
------------------------------------------------------ */

/* ---------- Design tokens ---------- */
:root{
  /* Farver */
  --hf-bg: #f6f3ed;
  --hf-text: #2e251c;
  --hf-primary: #761f0b;
  --hf-primary-600: #7e2c19;
  --hf-brown: #f1d4b3;
  --hf-brown-light: #f7e8d6;

  /* Typografi & radius */
  --hf-font-heading: 'Blinker', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hf-font-copy: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hf-radius: 10px;

  /* Spacing */
  --hf-xs: .5rem;
  --hf-s: .75rem;
  --hf-m: 1rem;
  --hf-l: 1.5rem;
  --hf-xl: 2rem;
  --hf-2xl: 3rem;

  /* Navbar heights */
  --nav-height-mobile: 72px;
  --nav-height-desktop: 96px;
}

/* ---------- Base ---------- */
html, body { height: 100%; }
body{
  font-family: var(--hf-font-copy);
  font-size: 16px;
  line-height: 1.6;
  color: var(--hf-text);
  background: #fff;
}
body {
  background: var(--hf-bg);
}

/* Gør plads under fixed navbar */
body.drone-back{
  padding-top: var(--nav-height-mobile);
}
@media (min-width: 992px){
  body.drone-back{ padding-top: var(--nav-height-desktop); }
}

/* Links */
a{ color: var(--hf-primary); text-decoration: none; }
a:hover{ color: var(--hf-primary-600); text-decoration: underline; }

/* ---------- Navbar ---------- */
#mainNav.navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(120%) blur(4px);
  transition: background .25s ease, box-shadow .25s ease;
  min-height: var(--nav-height-mobile);
}
#mainNav .navbar-brand img{
  height: 56px;
  width: auto;
}
#mainNav .navbar-nav .nav-link{
  font-family: var(--hf-font-heading);
  font-size: 18px;
  color: var(--hf-text) !important;
  padding: .75rem 1rem;
  line-height: 1.2;
}
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .active .nav-link{
  text-decoration: underline !important;
}
@media (min-width: 992px){
  #mainNav.navbar{ min-height: var(--nav-height-desktop); }
  #mainNav .navbar-brand img{ height: 60px; }
  #mainNav .navbar-nav{ padding-right: 1rem; }
}

/* ---------- Typografi ---------- */
h1, h2, h3{
  font-family: var(--hf-font-heading);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 var(--hf-s) 0;
  word-break: break-word;
  hyphens: auto;
}
h1{ font-size: 2.4rem; margin-bottom: var(--hf-m); }
h2{ font-size: 1.6rem; }
h3{ font-size: 1.125rem; }

p{ margin-bottom: 1em; }

/* ---------- Film-intro (H1 + subtext) ---------- */
.film-title{
  font-family: var(--hf-font-heading);
  font-weight: 800;
  margin-bottom: var(--hf-xs);
}
.film-subtext{
  font-family: var(--hf-font-copy);
  font-size: 1.1875rem; /* 19px */
  line-height: 1.55;
  letter-spacing: .005em;
  opacity: .98;
  color: var(--hf-text);
  margin-bottom: var(--hf-l);
}
@media (min-width: 992px){
  .film-subtext{ font-size: 1.3125rem; } /* 21px */
}
/* Neutraliser bootstrap lead */
.lead{ font-size: inherit; font-weight: 400; }

/* ---------- Sektioner ---------- */
.page-section{ padding: var(--hf-2xl) 0; }
.film-rail-section{ margin: var(--hf-2xl) 0; position: relative; overflow: hidden; }

/* Sektionstitel */
.rail-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hf-m); margin-bottom: var(--hf-s);
}
.rail-title{
  font-family: var(--hf-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--hf-text);
  margin: 0;
  letter-spacing: -.01em;
}

/* ---------- Filmrails ---------- */
.film-rail{
  display: flex !important;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--hf-m);
  padding: .25rem 0 .5rem;
  -webkit-overflow-scrolling: touch;
}
.film-rail::-webkit-scrollbar{ height: 8px; }
.film-rail::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 4px; }

.rail-item{
  flex: 0 0 280px;
  scroll-snap-align: start;
}
@media (max-width: 575.98px){
  .rail-item{ flex-basis: 240px; }
}

/* Fade i højre side */
.film-rail-section::after{
  content: "";
  position: absolute;
  top: 2.2rem; bottom: 0; right: 0;
  width: 60px;
  background: linear-gradient(to left, var(--hf-bg), rgba(246,243,237,0));
  pointer-events: none;
  transition: opacity .2s ease;
}
.film-rail-section.is-end::after{ opacity: 0; }

/* ---------- Cards (filmoversigt) ---------- */
.stream-card{
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--hf-radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.stream-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Billedbaggrund */
.stream-bg{
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
}

/* Tekstoverlay */
.stream-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 70%);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Kort-typografi */
.stream-title{
  font-family: var(--hf-font-copy);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 992px){
  .stream-title{ font-size: 1.125rem; }
}
.stream-subtext{
  font-family: var(--hf-font-copy);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.45;
  margin-top: .25rem;
  opacity: .95;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Diverse elementer ---------- */
.breadcrumb{
  display: flex; flex-wrap: nowrap; white-space: nowrap;
  gap: 0; background: transparent; padding: 0; margin-bottom: var(--hf-xs);margin-top: .35rem; 
  font-size: .95rem; color: #6c757d;
}
.breadcrumb a{ color: var(--hf-primary); }
.breadcrumb-item + .breadcrumb-item::before{
  content: "/"; color: #999; padding: 0 .35rem;
}

/* Kolonnelister */
.columns-2{ column-count: 2; column-gap: var(--hf-2xl); }
.columns-2 li{ margin-bottom: .5rem; }
@media (max-width: 767.98px){
  .columns-2{ column-count: 1; }
}

/* ---------- Knappalette ---------- */
.btn-primary{
  background: var(--hf-primary);
  border-color: var(--hf-primary);
}
.btn-primary:hover{
  background: var(--hf-primary-600);
  border-color: var(--hf-primary-600);
}

/* ---------- Hero/video ---------- */
header.masthead{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: transparent;
}
header.masthead > .video-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.2);
}
header.masthead .container{
  position: relative;
  z-index: 2;
}
/* === UI finjusteringer 2025-10 === */

/* 1. Større nav-links */
#mainNav .navbar-nav .nav-link {
  font-size: 19px;
  font-weight: 700;
  padding: 0.9rem 1.25rem;
  letter-spacing: 0.01em;
}

/* 2. Bedre læsbarhed på stream-titler */
.stream-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 70%);
}
.stream-title,
.stream-subtext {
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
}

/* 3. Mindre linjeafstand på undertekst */
.stream-subtext {
  line-height: 1.35;
  opacity: 1;
}
.stream-title {
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
/* --- Nav-links: endelig vinder --- */
#mainNav .navbar-nav .nav-item .nav-link {
  font-size: 19px;         /* din ønskede størrelse */
  font-weight: 700;
  padding: 0.9rem 1.25rem;
  letter-spacing: 0.01em;
}
/* --- FOOTER --- */
.site-footer {
  background: var(--hf-brown-light);
  color: var(--hf-text);
  font-family: var(--hf-font-copy);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 2.5rem 0 1.5rem;
  border-top: 1px solid rgba(0,0,0,.05);
}

.site-footer a {
  color: var(--hf-text);
  text-decoration: none;
  transition: color .2s ease;
}
.site-footer a:hover {
  color: var(--hf-primary);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.footer-right a {
  display: inline-block;
  margin-left: 1.25rem;
  font-weight: 600;
}

.footer-bottom {
  font-size: 0.85rem;
  opacity: .7;
}
/* --- Højrejusteret footer --- */
.site-footer {
  text-align: right;
}

.footer-grid {
  justify-content: flex-end;
}

.footer-left,
.footer-right,
.footer-bottom {
  text-align: right;
  width: 100%;
}

.footer-right a {
  margin-left: 1.25rem;
  margin-right: 0;
}


.partner-list {
  list-style: none;
  padding: 0;
  margin: 0;

  column-gap: 2rem;
}

/* Mobil */
@media (max-width: 575px) {
  .partner-list {
    column-count: 1;
  }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
  .partner-list {
    column-count: 2;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .partner-list {
    column-count: 3;
  }
}

.partner-list li {
  break-inside: avoid;
  margin-bottom: .4rem;
}
.image-rotator {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;   /* justér fx 4/3 eller 16/9 */
  overflow: hidden;
}

.image-rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.image-rotator img.active {
  opacity: 1;
}

/* Sektionen skal være position:relative for overlay-pile */
.film-rail-section {
  position: relative;
}

/* STORE PIL-SYMBOLER – UDEN CIRKEL */
.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 140px;          /* justér efter smag */
  font-weight: 300;
  cursor: pointer;
  z-index: 10;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Placering */
.rail-arrow-next {
  right: 4px;
}

.rail-arrow-prev {
  left: 4px;
}

/* Hover-effekt */
.rail-arrow:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.05);
}

/* Mobil: lidt mindre, så de ikke stjæler billedet */
@media (max-width: 576px) {
  .rail-arrow {
    font-size: 75px;
  }
}
/* Skjul horisontal scrollbar men bevar scroll */
.film-rail {
  -ms-overflow-style: none;   /* IE/Edge */
  scrollbar-width: none;      /* Firefox */
}

.film-rail::-webkit-scrollbar {
  display: none;              /* Chrome/Safari */
}

/* Ekstra luft under den faste menu KUN på "Om Historiefabrikken"-siden */
.has-fixed-nav--about {
  padding-top: 1115rem;  /* justér efter smag */
}

/* Mobil – menuen er højere, så der skal lidt mere luft til */
@media (max-width: 576px) {
  .has-fixed-nav--about {
    padding-top: 7rem;
  }
}
/* Ekstra luft under den faste menu KUN på "Om Historiefabrikken"-siden */
body.page-om-historiefabrikken main.section--compact {
  padding-top: 3rem !important;
}

/* Mobil: navbar er højere, så vi giver lidt ekstra luft */
@media (max-width: 768px) {
  body.page-om-historiefabrikken main.section--compact {
    padding-top: 4rem !important;
  }
}