/* ============================
     TOP UTILITY BAR
     ============================ */
  .kl-utilbar {
    /* background: #002E6E; */
	background: #4a0d14;
	color: #fff;
    font-size: .875rem; 
	line-height: 40px; 
	min-height: 40px;
    padding: 0 .75rem;
	border-bottom: 1px solid rgba(255,255,255,.08);
    overflow-x: auto; /* prevent wrapping */
  }
  
  .kl-utilbar .util-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap; /* keep all items in one row */
  }
  
  .kl-utilbar a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 0 .35rem;
    opacity: .95;
    white-space: nowrap; /* don't break inside a link */
  }
  
  .kl-utilbar a:hover {
    text-decoration: underline;
	opacity: 1;
  }
  
  .kl-util-sep {
    width:1 px;
	height: 18px;
	background: rgba(255,255,255,.25);
	margin:0 .35rem;
	display:inline-block;
  }

  /* Make utility bar smaller on phones */
  @media (max-width: 575.98px){
    .kl-utilbar{
      font-size:.65rem; 
      line-height:26px; 
      min-height:26px; 
      padding:0 .45rem;
    }
	
    .kl-utilbar .util-wrap{gap:.35rem;}
    .kl-util-sep{height:12px;margin:0 .25rem;}
  }

  /* ============================
     SHRINKABLE MAIN NAVBAR (blue)
     ============================ */
  .kl-navbar {
    position: sticky;
	top: 0;
	z-index: 1030;
    /* background: #034EA2; */
	background: #8c1c2c;
	border-bottom: 4px solid #023E82;
    min-height: 64px;
	padding: 0 .75rem;
    transition: min-height .25s ease,padding .25s ease;
  }
  .navbar-brand {
    display: flex;
	align-items: center;
	margin-right: 1rem;
	padding: .35rem 0;
	}
	
  .klanen-logo{
    height:100px; width:auto; display:block;
    margin-bottom:-24px; /* hangs below blue bar */
    transition:height .25s ease,margin .25s ease;
  }
  
  .kl-brand-title{
    margin-left:.75rem; color:#fff; line-height:1; font-weight:800;
    font-size:2.25rem; position:relative; top:6px;
    transition:font-size .25s ease, top .25s ease;
    white-space:nowrap;
  }

  /* Right icons */
  .form-inline .form-control{border-radius:999px;border:0;padding:.35rem .8rem;height:34px}
  .btn.btn-outline-light{border-color:rgba(255,255,255,.7);color:#fff;height:34px;padding:.25rem .7rem}
  .btn.btn-outline-light:hover{background:rgba(255,255,255,.12)}
  .navbar-toggler{border:0;padding:.25rem .4rem}
  .navbar-toggler .navbar-toggler-icon{filter:brightness(200%)}

  /* ============================
     WHITE SUB NAV (red items)
     ============================ */
  .kl-subnav {
    background: #fff;
	border-bottom: 1px solid rgba(0,0,0,.08);
  }
  
  .kl-subnav .nav {
    display: flex;
	justify-content: flex-start;
	gap: 2rem;
    padding: .7rem 0;
	margin: 0;
  }
  
  .kl-subnav .nav-link {
    color: #E4032E;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .2px;
    text-decoration: none;
	position: relative;
	font-size: .95rem;
    padding: .5rem .75rem;
	border-radius: 4px;
	transition: all .2s ease;
    white-space: nowrap;
  }
  
  .kl-subnav .nav-link:hover {
    /* background: #034EA2; */
	background: #8c1c2c;
	color: #fff;
	text-decoration:none;
  }
  
  .kl-subnav .kl-active {
    /* background: #034EA2; */
	background: #8c1c2c;
	color:#fff;
	border-radius:4px;
  }
  
  .kl-subnav .kl-active:after {
    display:none;
  }

  /* ============================
     SHRUNK STATE (on scroll)
     ============================ */
  .kl-navbar.kl-shrink{min-height:56px}
  .kl-navbar.kl-shrink .klanen-logo{height:64px;margin-bottom:-8px}
  .kl-navbar.kl-shrink .kl-brand-title{font-size:1.6rem; top:2px}

  /* ============================
     RESPONSIVE TWEAKS
     ============================ */
  /* Tablets and down: make red menu visible as a horizontal scroller; show smaller wordmark/logo */
  @media (max-width: 991.98px){
    .kl-navbar{min-height:56px}
    .klanen-logo{height:72px;margin-bottom:-14px}
    .kl-brand-title{font-size:1.6rem; top:2px}
    .kl-subnav .nav{gap:1rem; padding:.55rem 0}
    .kl-subnav{overflow-x:auto}
    .kl-subnav .nav{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch}
  }

  /* Phones: even smaller logo + wordmark, tighter red menu; keep it visible (scrollable) */
  @media (max-width: 575.98px){
    .klanen-logo{height:56px;margin-bottom:-6px}
    .kl-brand-title{font-size:1.15rem; top:1px; margin-left:.5rem}
    .form-inline{display:none !important;}              /* hide search box on small phones */
    .kl-subnav .nav{gap:.5rem; padding:.45rem 0}
    .kl-subnav .nav-link{font-size:.85rem; padding:.4rem .55rem}
  }

  /* Very narrow devices: allow hiding wordmark if cramped */
  @media (max-width: 360px){
    .kl-brand-title{display:none}
  }
  /* Smooth touch scrolling on iOS */
	.kl-utilbar { -webkit-overflow-scrolling: touch; }

/* On phones: left-align so the first item ("Øst") is visible */
@media (max-width: 575.98px) {
  .kl-utilbar .util-wrap {
    justify-content: flex-start;  /* was flex-end on desktop */
  }
}


  /* ============================
     OFFCANVAS
     ============================ */
  .offcanvas-menu {
    position: fixed;
	top: 0;
	right: -320px;
	width: 320px;
	height: 100%;
    /* background: #034EA2; */
	background: #8c1c2c;
	box-shadow: -3px 0 12px rgba(0,0,0,.5);
	transition: right .3s ease-in-out;
	z-index: 1050;
	padding: 1rem;
	overflow-y: auto;
  }
  .offcanvas-menu.show{right:0}
  .offcanvas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1040;display:none}
  .offcanvas-backdrop.show{display:block}
  .offcanvas-menu .nav-link{color:#fff}
  .offcanvas-menu .nav-link:hover{color:#e6f0ff}
  .offcanvas-menu .section-title{text-transform:uppercase;color:rgba(255,255,255,.7);font-size:.75rem;font-weight:700;margin:1rem 0 .25rem}

.mt-2 a {
  color: #8c1c2c;
}

.mt-2 a:hover {
  color: #8c1c2c;
  text-decoration: underline;
}

.mb-1 a {
  color: #8c1c2c;
}

.mb-1 a:hover {
  color: #8c1c2c;
  text-decoration: underline;
}

.sidebar-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.next-games {
  text-align: center;
}

.next-games-title {
  font-weight: 800;
  color: #E4032E;
  text-transform: uppercase;
  border-bottom: 3px solid #E4032E;
  padding-bottom: .25rem;
  margin-bottom: 1rem;
  display: inline-block;
}

.next-games-section {
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  margin-bottom:1rem;
}

.next-games-section h6 {
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.next-games a {
  color: inherit;
  text-decoration: none;
}

.next-games a:hover {
  text-decoration: underline;
}

.next-games ul, .next-games li, .next-games table, .next-games iframe, .next-games div {
  margin-left: auto;
  margin-right: auto;
}

.next-games ul, .next-games li {
  list-style: none!important;
  padding-left: 0;
}

.tickets-title {
  font-weight: 800;
  color: #E4032E;
  text-transform: uppercase;
  border-top: 3px solid #E4032E;
  padding-top: .5rem;
  text-align: center;
  margin-bottom: .75rem;
}

.ticket-btn {
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  background: #034EA2;
  color: #fff;
  padding: .9rem .75rem;
  border-radius: .6rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
}

.ticket-btn:hover {
  text-decoration: none;
  filter: brightness(1.05);
}

.some-title {
  font-weight: 800;
  color: #E4032E;
  text-transform: uppercase;
  border-top: 3px solid #E4032E;
  padding-top: .5rem;
  text-align: center;
  margin-bottom:.5rem;
}

.some-lead {
  text-align: center;
  margin-bottom: 1rem;
}

.some-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

.some-btn {
  width: 88px;
  height: 88px;
  background: #034EA2;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s ease-in-out, filter .08s ease-in-out;
}

.some-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.some-btn svg {
  width: 48px;
  height: 48px;
  fill: #fff;
  display: block;
}