/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */
#kontakt-section > div > main > div > div > div, #custom-page-section > div > main > div > div > div {
	width: 99% !important;
}

.kontakt-section {
  padding: 10px !important;
  max-width: 99% !important;
  margin-top: 25px !important;
}
.kontakt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.kontakt-card {
  background: #fff !important;
  border-radius: 10px;
  padding: 20px;
  margin: 5px !important;
	height: 170px;
  color: #0A4D68;
	margin-right: 10px;
}

.kontakt-card h3 {
  color: #004b87; /* Same as Kalender heading */
  margin-bottom: 10px;
}

.protected-content { display: none !important; }
.logged-in .protected-content { display: block !important; }



@media (max-width: 768px) {
  .kontakt-card {
    flex: 1 1 100%;
  }
}

/* === CONTAINER === */
.kalender-container {
  display: flex;
  margin: 30px 15px 0 auto !important;
  padding: 0;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
}

/* === LEFT SIDEBAR === */
.kalender-post-list {
  flex: 1 1 300px;
  max-width: 350px;
  background-color: #0A4D68;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center the list */
  height: 70vh;
  overflow-y: auto;
  border-right: 2px solid #ffffff22; /* optional right border */
	box-sizing: border-box;
    padding-right: 0;
}

.kalender-post-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.kalender-post-list li {
	width: 100%;
	border-bottom: 1px solid #ffffff33; /* horizontal separator */
    padding: 0 10px 0 10px; /* remove inner padding to avoid shrinking line */
    margin: 0;
}

/* === LINKS === */
.kalender-post-list a {
  	color: #ffffff;
  	font-weight: 600;
  	text-decoration: none;
  	transition: all 0.3s ease;
	display: block;
	padding: 12px 0; /* move padding to <a> */
	padding-left: 16px; /* optional: indent text */
}

.kalender-post-list a i {
  margin-right: 10px;
  color: #ffffff;
}


/* === RIGHT CONTENT AREA === */
#kalender-post-content {
  flex: 1;
  background: #ffffff;
  color: #103040;
  padding: 30px;
  font-size: 16px;
  line-height: 1.7;
  height: 70vh;
  overflow-y: auto;
  box-sizing: border-box;
}

/* === FADE-IN EFFECT === */
#kalender-post-content.fade-in {
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.kalender-post-list a.active {
  color: #FFD700;
  font-weight: 700;
}
.kalender-post-list a.active i {
  color: #FFD700;
}


/* === RESPONSIVE === */
@media (max-width: 768px) {
  .kalender-container {
    flex-direction: column;
  }

  .kalender-post-list {
    width: 100%;
    height: auto;
  }

  #kalender-post-content {
    padding: 20px;
    height: auto;
  }
}


.custom-inner-box,
.logos-box-wrapper,
.custom-links-row,
.kalender-container,
.custom-links-section,
.kontakt-section {
  background-color: #0A4D68 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
}

.avia-section {
  padding: 0 !important;
}

html, body {
  background: linear-gradient(to bottom, #e0f7fa, #cceef5, #e0f7fa) !important;
  height: 100%;
  margin: 0;
  padding: 0;
}

.av-section-color-overlay, 
.container_wrap,
#main,
#wrap_all,
.footer-page-content{
  background-color: transparent !important;
}

/* === MAIN SECTIONS === */
#top .av-section-color:nth-of-type(1) {
  margin-top: 5px !important;
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

#av_section_2 {
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.custom-links-section {
  padding: 10px !important;
  max-width: 99% !important;
}
.custom-section-2 > div {
  margin: 10px auto 0 auto !important;
  padding: 0px !important;
  max-width: 99% !important;
}

#top .custom-section {
  min-height: calc(100vh - 140px); /* Adjust based on logo section height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#top .custom-section .headline-rotator-section {
  flex-grow: 1;
}

/* TOPBAR */
.custom-section > div {
  margin: 10px auto 0 auto !important;
  padding: 0px !important;
  max-width: 99% !important;
}

 .custom-section > div > main {
  padding: 10px !important;
}

.custom-inner-box {
  height: 100px !important;
  margin: 0px auto 0 auto !important;
  margin-right: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
}


.custom-inner-box .icon-left,
.custom-inner-box .icon-right {
  font-size: 32px;
}

.custom-inner-box .center-text {
  text-align: center;
  flex: 1;
  font-size: 20px;
}

.logo-box {
  width: 95px;
  height: 95px;
  transform: scale(1) !important;
  background-color: #f8fbfc !important; /* Soft white with blue tint */
  border-radius: 12px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Logo images */
.logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/*
.logo-box:hover {
transform: scale(0.9) !important;
}
*/
.center-text {
  flex: 1;
  padding: 0 20px;
}


/* Title styling */
.center-text .title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Email link styling */
.center-text .email a {
  font-size: 20px;
  color: #fff;
  text-decoration: underline;
}

/* NAVBAR */
.custom-links-row {
  margin: 25px auto 0 auto !important;
  margin-right: 15px !important;
  height: 50px !important;
  display: flex !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  align-items: center !important;
}

.link-column {
  flex: 0 0 5.28% !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.link-column a {
  position: relative !important;
  display: inline-block !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  padding: 10px 0px !important;
  transition: color 0.3s ease !important;
}

/* Animated underline effect under each link */
.link-column a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 5px !important; /* distance from text */
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  width: 100% !important;
  height: 3px !important;
  background-color: #ffffff !important;
  transition: transform 0.3s ease !important;
  border-radius: 2px !important;
}

.link-column a:hover::after {
  transform: translateX(-50%) scaleX(1) !important;
}

.link-icon {
  background-color: #ffffff !important;
  color: #20506A !important;
  border-radius: 50% !important;
  padding: 5px !important;
  font-size: 12px !important;
  margin-right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) !important;
}

/* SLIDEEER*/
#metaslider_1350.flexslider .slides {
animation: infiniteloop_custom_1350 112000ms linear infinite !important;
}
@keyframes infiniteloop_custom_1350 {
    0% {
        transform: translateX(0);
        visibility: visible;
    }
    100% {
        transform: translateX(calc(-405px * 10));
        visibility: visible;
    }
}



#metaslider_container_1350,
#metaslider_container_923 {
  overflow: visible !important;
}

.flex-viewport {
  overflow: visible !important;
}

.flex-viewport {
  padding: 15px;
}
#metaslider-id-1350,
#metaslider-id-923 {
  width: 110% !important;
}

.metaslider img {
  border-radius: 5px;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(1.05) contrast(1.1) drop-shadow(2px 4px 6px rgba(0,0,0,0.15));
  transition: filter 0.3s ease;
}

.metaslider img:hover {
  filter: brightness(1.15) contrast(1.2) drop-shadow(3px 6px 8px rgba(0,0,0,0.25));
}

/* LOGGAR */
.logos-box-wrapper {
  overflow-x: auto !important;
  margin: 0 auto 0 auto !important;
}

.logos-box {
  min-width:  100% !important;
  padding: 10px 20px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.logos-box img {
  width: 100px !important;
  height: 100px !important;
  object-fit: contain !important;
  border-radius: 15px !important;
  background-color: white !important;
  padding: 5px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.3s ease !important;
}

.logos-box img:hover {
  transform: scale(1.05) !important;
}


.headline-rotator-section {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Base style for headline rotator */
.headline-rotator-section .av-rotator-container-inner {
  font-size: 36px !important;
  line-height: 1.2 !important;
  padding: 10px 0 !important;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tablet / zoomed-in screens */
@media only screen and (max-width: 1024px) {
  .headline-rotator-section .av-rotator-container-inner {
    font-size: 28px !important;
  }
}

/* Mobile or high-scaling environments */
@media only screen and (max-width: 767px) {
  .headline-rotator-section .av-rotator-container-inner {
    font-size: 22px !important;
    padding: 5px 0 !important;
  }

  .headline-rotator-section {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
}



/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}



/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
	.custom-inner-box,
	.links-row {
		transform: scale(0.85) !important;
		transform-origin: top center !important;
	}

	.center-text {
		font-size: 1rem !important;
	}

	.links-row a {
		font-size: 0.8rem !important;
		padding: 3px !important;
	}
  .kalender-container {
    flex-direction: column;
    padding: 10px;
  }

  .kalender-post-list {
    max-width: 100%;
    border-right: none;
    border-bottom: 2px solid #103040;
    padding-right: 0;
    padding-bottom: 15px;
    height: auto;
  }

  #kalender-post-content {
    height: auto;
  }
}