/*
	Created on : 21 jan. 2026
	Author     : CPP konsult, Pontus Pehrson
*/

#preload {
	background-image: url('/images/pehrcon_190x60.png');
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	background-color: #eef1f2;
	-webkit-text-size-adjust: 100%;
}

hr {
	margin: 0;
	border: 0;
	border-top: 1px solid #000;
}

#siteHolder {
	min-width: 320px;
	max-width: 720px;
	margin: auto;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(99, 99, 99, 0.2);
	/* background-image: url('../images/watermark.png'); REMOVE */
	/* background-repeat: repeat-y; REMOVE */
	/* background-position: center 80px; REMOVE */
	/* background-size: 100% auto; REMOVE */
}

#contentSection,
#footerSection {
	display: block;
	z-index: 1;
}

#contentSection { margin: 0 15px; }
#footerSection  { margin-top: 25px; }

#subLogo   { visibility: hidden; }
#printLogo { display: none; }

#menuSection {
	display: table;
	width: 100%;
	padding-bottom: 7px;
	z-index: 1;
}

/* ────────────────────────────────
	Rubriker
──────────────────────────────── */
h1, h2, h3, h4 {
	font-family: Verdana, Tahoma, Segoe, sans-serif;
	cursor: default;
	padding: 0;
	margin: 0;
	font-weight: bold;
}

h1 { font-size: 1.6rem;  line-height: 1.2;  margin: 2rem 0 0.8rem; text-align: center; }
h2 { font-size: 1.35rem; line-height: 1.25; margin: 1.8rem 0 0.7rem; }
h3 { font-size: 1.15rem; line-height: 1.3;  margin: 1.6rem 0 0.6rem; }
h4 { font-size: 1.05rem; line-height: 1.35; margin: 1.4rem 0 0.5rem; font-weight: normal; }

p, span {
	font-size: 1rem;
	cursor: default;
	line-height: 1.4;
}

/* ────────────────────────────────
	Länkar – generellt + innehåll
──────────────────────────────── */
a {
	color: #0070c0;
	text-decoration: none;
	font-size: 1rem;
	white-space: nowrap;
	cursor: pointer;
}

a:hover { text-decoration: none; }

#contentSection p a {
	font-weight: bold;
	transition: color 0.2s ease;
}

#contentSection p a:hover { color: #005ea8; }

a.disable-link {
	pointer-events: none;
	cursor: default;
}

/* ────────────────────────────────
	Textstorlekar & hjälparklasser
──────────────────────────────── */
.text-tiny  { font-size: 0.5rem;  }
.text-small { font-size: 0.75rem; }
.text-big   { font-size: 1.5rem;  }
.text-huge  { font-size: 2rem;    }
.subText    { padding: 0 8px 1px; }

/* ────────────────────────────────
	Meny-länkar & aktiv meny
──────────────────────────────── */
.menuLink1, .menuLink2, .siteLink,
.menuText1, .menuText2, .siteText {
	padding: 4px 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.95rem;
	font-weight: bold;
	text-decoration: none;
	border-radius: 3px;
	display: inline-block;
}

.menuLink1, .menuLink2, .siteLink {
	color: #0070c0;
	background-color: #f0f0f0;
	transition: background-color 0.2s, color 0.2s;
	cursor: pointer;
}

.menuLink1, .menuLink2 { width: 90px; text-align: center; }
.siteLink              { width: 110px; text-align: left; }

.menuLink1:hover, .menuLink2:hover, .siteLink:hover {
	background-color: #0070c0;
	color: #fff;
}

.menuText1, .menuText2, .siteText {
	color: #fff;
	background-color: #005ea8;
	cursor: default;
}

.menuText1, .menuText2 { width: 90px; text-align: center; }
.siteText              { width: 110px; text-align: left; }

/* ────────────────────────────────
	Bilder & overlays
──────────────────────────────── */
.image-container,
.widescreenImage-container {
	position: relative;
	overflow: hidden;
}

.image-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-container img {
	width: 33.33%;
	display: block;
}

.widescreenImage-container {
	width: 100%;
	padding-bottom: 28.125%;
}

.widescreenImage-container img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-overlay,
.widescreenImage-overlay {
	position: absolute;
	inset: 0;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.image-overlay          { background: rgba(0,0,0,0.3);  z-index: 1; }
.widescreenImage-overlay { background: rgba(0,0,0,0.25); z-index: 3; }

.image-container h1,
.image-container h2,
.widescreenImage-container h1,
.widescreenImage-container h2 {
	color: white;
	margin: 0;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.image-container h1,
.widescreenImage-container h1 { text-transform: uppercase; }

.headerContainer {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	text-align: center;
	width: 100%;
}

/* ────────────────────────────────
	Till toppen-knapp
──────────────────────────────── */
#toTop {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	background: rgba(240,240,240,0.8);
	color: #0070c0;
	padding: 15px 20px 0;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	font-size: 36px;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
}

#toTop.visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

#toTop:hover {
	background: rgba(0,112,192,0.8);
	color: white;
}

/* ────────────────────────────────
	Övrigt + melting/puls
──────────────────────────────── */
.mobileHide { display: table-cell; }
figure       { margin: 0; }
.year, .text { vertical-align: top; }
.year        { padding-right: 15px; }

ol, ul {
	margin-left: 5px;
	padding-left: 15px;
	line-height: 1.35;
	cursor: default;
}

ol       { padding-left: 20px; }
ul li    { padding-left: 5px; }

.widescreenImage-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 28.125%;
  perspective: 3000px;
  perspective-origin: 50% 50%;
}

.melting-image {
  position: absolute;
  width: 170%;
  height: 170%;
  left: -35%;
  top: -35%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translate3d(0px, 0, 0px) scale(1.00); /* startposition för alla bilder */
}

.melting-image.pulsing {
  opacity: 1;
  animation: perfect-ellipse 20s linear infinite;
}

.melting-image.pulsing.reverse {
  animation-direction: reverse;
}

@keyframes perfect-ellipse {
  0%, 100%     { transform: translate3d(0px, 0, 0px) scale(1.00); }
  3%           { transform: translate3d(8px, 0, 12px) scale(1.02); }
  6%           { transform: translate3d(15px, 0, 25px) scale(1.04); }
  9%           { transform: translate3d(22px, 0, 40px) scale(1.07); }
  12%          { transform: translate3d(28px, 0, 56px) scale(1.09); }
  15%          { transform: translate3d(33px, 0, 72px) scale(1.11); }
  18%          { transform: translate3d(37px, 0, 88px) scale(1.13); }
  21%          { transform: translate3d(39px, 0, 103px) scale(1.15); }
  24%          { transform: translate3d(40px, 0, 118px) scale(1.17); }
  27%          { transform: translate3d(38px, 0, 131px) scale(1.18); }
  30%          { transform: translate3d(34px, 0, 142px) scale(1.19); }
  33%          { transform: translate3d(28px, 0, 150px) scale(1.20); }
  36%          { transform: translate3d(20px, 0, 155px) scale(1.21); }
  39%          { transform: translate3d(12px, 0, 158px) scale(1.22); }
  42%          { transform: translate3d(5px, 0, 159px) scale(1.22); }
  45%          { transform: translate3d(0px, 0, 160px) scale(1.22); }
  48%          { transform: translate3d(-5px, 0, 159px) scale(1.22); }
  51%          { transform: translate3d(-12px, 0, 158px) scale(1.22); }
  54%          { transform: translate3d(-20px, 0, 155px) scale(1.21); }
  57%          { transform: translate3d(-28px, 0, 150px) scale(1.20); }
  60%          { transform: translate3d(-34px, 0, 142px) scale(1.19); }
  63%          { transform: translate3d(-38px, 0, 131px) scale(1.18); }
  66%          { transform: translate3d(-40px, 0, 118px) scale(1.17); }
  69%          { transform: translate3d(-39px, 0, 103px) scale(1.15); }
  72%          { transform: translate3d(-37px, 0, 88px) scale(1.13); }
  75%          { transform: translate3d(-33px, 0, 72px) scale(1.11); }
  78%          { transform: translate3d(-28px, 0, 56px) scale(1.09); }
  81%          { transform: translate3d(-22px, 0, 40px) scale(1.07); }
  84%          { transform: translate3d(-15px, 0, 25px) scale(1.04); }
  87%          { transform: translate3d(-8px, 0, 12px) scale(1.02); }
  90%          { transform: translate3d(-3px, 0, 5px) scale(1.01); }
  95%, 100%    { transform: translate3d(0px, 0, 0px) scale(1.00); }  /* ~1 sekund paus */
}

.headerCard {
	margin: 0;
	width: 100%;
	background: #f0f0f0;
	border-radius: 8px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.4);
	overflow: hidden;
}

.bannerRow {
	clear: both;
	position: relative;
	width: 100%;
	background: #f0f0f0;
}

.bannerContent {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 4px 0;
}

.divider {
	width: 1px;
	height: 20px;
	background: #0070c0;
	opacity: 0.7;
	margin: 0 4px;
	align-self: center;
}

/* ────────────────────────────────
	Intro-text (desktop vs mobil)
──────────────────────────────── */
.desktopIntroText {
	font-size: 1.2em;
	line-height: 1.5;
	color: white;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	font-weight: bold;
	text-align: center;
	max-width: 95%;
	padding: 0 10px;
}

.mobileIntroSection {
	display: none;
	background: #f8f9fa;
	border-radius: 0 0 8px 8px;
}

.mobileIntroText {
	font-size: 1.1em;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	padding: 15px 10px;
	color: #333;
}

/* ────────────────────────────────
	Footer – länkar, telefon & hover
──────────────────────────────── */

#footerSection strong{
	display:block;
	font-size: 1.05rem;
	color:#444;
	margin-bottom: 10px;
}

.footer-nav{
	text-align:center;
	margin:20px 0 15px;
	padding-top:24px;
	font-size:0.9rem;
	color:#666;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.5em .6em;
}

.footer-nav a{
	display:inline-block;
	padding:.22em .55em;
	border:1px solid #e2eef6;
	border-radius:999px;
	background:#fff;
	color:#666 !important;
	text-decoration:none;
	transition: color .2s ease, border-color .2s ease;
}

.footer-nav a:hover{
	color:#444 !important;
	border-color:#d7e6ef;
	text-decoration:none;
}

.tel-link {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	white-space: nowrap;
}

.footer-contact-line {
	margin: 12px 0 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .5em .6em;
	line-height: 1.45;
	font-size: 1rem;
}

.footer-contact-line .contact-clip {
	white-space: nowrap;
	padding: .28em .65em;
	border: 1px solid #d7e6ef;
	border-radius: 999px;
	background: #fff;
	color: #555;
}

.footer-contact-line .contact-clip a {
	color: inherit !important;
	text-decoration: none !important;
	border-bottom: 1px dotted #bbb;
}

.footer-contact-line .contact-clip a:hover {
	color: #006699 !important;
	border-bottom-style: solid;
}

@media (max-width: 560px) {
	.footer-contact-line {
		gap: .45em .5em;
		font-size: .98rem;
	}
	.footer-contact-line .contact-clip {
		padding: .24em .6em;
	}
}

.footer-nav .tel-link,
#footerSection .tel-link {
	color: #666 !important;
}

.footer-nav .tel-link:hover,
#footerSection .tel-link:hover {
	color: #444 !important;
}

/* ────────────────────────────────
	Print
──────────────────────────────── */
@media print {
	#menuSection, #logotype, #toTop, .bannerRow, .melting-image,
	#bgHeaderImage, .widescreenImage-overlay {
		display: none !important;
	}

	body, #siteHolder {
		background: #fff !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
		max-width: none !important;
	}

	#printLogo {
		display: block !important;
		margin: 0 auto 20px !important;
	}

	.widescreenImage-container {
		padding-bottom: 0 !important;
		height: auto !important;
		margin-bottom: 15px !important;
	}

	.desktopIntroText   { display: none !important; }
	.mobileIntroSection { display: block !important; background: #fff !important; padding: 10px 0 !important; margin: 0 0 20px !important; }
	.mobileIntroText    { color: #000 !important; font-size: 1em !important; padding: 0 10px !important; margin: 0; }

	#footerSection {
		margin: 40px 0 0 !important;
		padding: 20px 0 !important;
		background: #fff !important;
		border-top: 2px solid #006699 !important;
		page-break-inside: avoid;
	}

	.footer-content {
		display: flex !important;
		justify-content: space-between !important;
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 20px;
	}

	.footer-left   { text-align: left;   flex: 1; min-width: 180px; }
	.footer-center { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
	.footer-right  { text-align: right;  flex: 1; min-width: 180px; }

	a { color: #000 !important; text-decoration: none !important; }
	.headerCard { box-shadow: none !important; border-radius: 0 !important; margin-bottom: 20px !important; }
}

/* ────────────────────────────────
	Responsivitet
──────────────────────────────── */
@media only screen and (max-device-width: 480px) {
	.image-container h1,
	.widescreenImage-container h1 { font-size: 2rem; }
	.image-container h2,
	.widescreenImage-container h2 { font-size: 1.2rem; }
}

@media (max-width: 560px) {
	.mobileHide { display: none; }

	.bannerRow     { margin-left: 0; margin-right: 0; }
	.bannerContent { gap: 2px; }
	.divider       { margin: 0 2px; }

	.desktopIntroText   { display: none; }
	.mobileIntroSection { display: block; }
	.mobileIntroText    { font-size: 1em; padding: 10px 5px; }

	.footer-content {
		justify-content: center;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-left,
	.footer-right   { text-align: center; }
	.footer-center  { display: none; }

	#footerSection {
		padding: 24px 12px 32px !important;
	}

	#footerSection br + br { display: none; }
}

@media (max-width: 400px) {
	.bannerContent { gap: 1px; flex-wrap: nowrap; }
	.divider       { height: 16px; margin: 0 1px; }
}

/* Telefon klickbarhet – desktop vs mobil */
@media (min-width: 561px) {
	#footerSection .tel-link {
		pointer-events: none !important;
		cursor: default !important;
	}
}

@media (max-width: 560px) {
	#footerSection .tel-link {
		pointer-events: auto !important;
		cursor: pointer !important;
	}
}

.headerCard {
	margin: 0;
	width: 100%;
	background: #f0f0f0;
	border-radius: 8px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.4);
	overflow: hidden;
}

.bannerRow {
	clear: both;
	position: relative;
	width: 100%;
	background: #f0f0f0;
}

.bannerContent {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 4px 0;
}

.divider {
	width: 1px;
	height: 20px;
	background: #0070c0;
	opacity: 0.7;
	margin: 0 4px;
	align-self: center;
}

/* ────────────────────────────────
	Intro-text (desktop vs mobil)
──────────────────────────────── */
.desktopIntroText {
	font-size: 1.2em;
	line-height: 1.5;
	color: white;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	font-weight: bold;
	text-align: center;
	max-width: 95%;
	padding: 0 10px;
}

.mobileIntroSection {
	display: none;
	background: #f8f9fa;
	border-radius: 0 0 8px 8px;
}

.mobileIntroText {
	font-size: 1.1em;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	padding: 15px 10px;
	color: #333;
}

/* ────────────────────────────────
	Footer – länkar, telefon & hover
──────────────────────────────── */

#footerSection strong{
	display:block;
	font-size: 1.05rem;
	color:#444;
	margin-bottom: 10px;
}

.footer-nav{
	text-align:center;
	margin:20px 0 15px;
	padding-top:24px;
	font-size:0.9rem;
	color:#666;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.5em .6em;
}

.footer-nav a{
	display:inline-block;
	padding:.22em .55em;
	border:1px solid #e2eef6;
	border-radius:999px;
	background:#fff;
	color:#666 !important;
	text-decoration:none;
	transition: color .2s ease, border-color .2s ease;
}

.footer-nav a:hover{
	color:#444 !important;
	border-color:#d7e6ef;
	text-decoration:none;
}

.tel-link {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	white-space: nowrap;
}

.footer-contact-line {
	margin: 12px 0 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .5em .6em;
	line-height: 1.45;
	font-size: 1rem;
}

.footer-contact-line .contact-clip {
	white-space: nowrap;
	padding: .28em .65em;
	border: 1px solid #d7e6ef;
	border-radius: 999px;
	background: #fff;
	color: #555;
}

.footer-contact-line .contact-clip a {
	color: inherit !important;
	text-decoration: none !important;
	border-bottom: 1px dotted #bbb;
}

.footer-contact-line .contact-clip a:hover {
	color: #006699 !important;
	border-bottom-style: solid;
}

@media (max-width: 560px) {
	.footer-contact-line {
		gap: .45em .5em;
		font-size: .98rem;
	}
	.footer-contact-line .contact-clip {
		padding: .24em .6em;
	}
}

.footer-nav .tel-link,
#footerSection .tel-link {
	color: #666 !important;
}

.footer-nav .tel-link:hover,
#footerSection .tel-link:hover {
	color: #444 !important;
}

/* ────────────────────────────────
	Print
──────────────────────────────── */
@media print {
	#menuSection, #logotype, #toTop, .bannerRow, .melting-image,
	#bgHeaderImage, .widescreenImage-overlay {
		display: none !important;
	}

	body, #siteHolder {
		background: #fff !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
		max-width: none !important;
	}

	#printLogo {
		display: block !important;
		margin: 0 auto 20px !important;
	}

	.widescreenImage-container {
		padding-bottom: 0 !important;
		height: auto !important;
		margin-bottom: 15px !important;
	}

	.desktopIntroText   { display: none !important; }
	.mobileIntroSection { display: block !important; background: #fff !important; padding: 10px 0 !important; margin: 0 0 20px !important; }
	.mobileIntroText    { color: #000 !important; font-size: 1em !important; padding: 0 10px !important; margin: 0; }

	#footerSection {
		margin: 40px 0 0 !important;
		padding: 20px 0 !important;
		background: #fff !important;
		border-top: 2px solid #006699 !important;
		page-break-inside: avoid;
	}

	.footer-content {
		display: flex !important;
		justify-content: space-between !important;
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 20px;
	}

	.footer-left   { text-align: left;   flex: 1; min-width: 180px; }
	.footer-center { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
	.footer-right  { text-align: right;  flex: 1; min-width: 180px; }

	a { color: #000 !important; text-decoration: none !important; }
	.headerCard { box-shadow: none !important; border-radius: 0 !important; margin-bottom: 20px !important; }
}

/* ────────────────────────────────
	Responsivitet
──────────────────────────────── */
@media only screen and (max-device-width: 480px) {
	.image-container h1,
	.widescreenImage-container h1 { font-size: 2rem; }
	.image-container h2,
	.widescreenImage-container h2 { font-size: 1.2rem; }
}

@media (max-width: 560px) {
	.mobileHide { display: none; }

	.bannerRow     { margin-left: 0; margin-right: 0; }
	.bannerContent { gap: 2px; }
	.divider       { margin: 0 2px; }

	.desktopIntroText   { display: none; }
	.mobileIntroSection { display: block; }
	.mobileIntroText    { font-size: 1em; padding: 10px 5px; }

	.footer-content {
		justify-content: center;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-left,
	.footer-right   { text-align: center; }
	.footer-center  { display: none; }

	#footerSection {
		padding: 24px 12px 32px !important;
	}

	#footerSection br + br { display: none; }
}

@media (max-width: 400px) {
	.bannerContent { gap: 1px; flex-wrap: nowrap; }
	.divider       { height: 16px; margin: 0 1px; }
}

/* Telefon klickbarhet – desktop vs mobil */
@media (min-width: 561px) {
	#footerSection .tel-link {
		pointer-events: none !important;
		cursor: default !important;
	}
}

@media (max-width: 560px) {
	#footerSection .tel-link {
		pointer-events: auto !important;
		cursor: pointer !important;
	}
}