/* ==========================================================================
   SP Cabins - site-wide additions: sticky header + fixed social tabs
   ========================================================================== */

/* ---------- Sticky header ---------- */
header { transition: background-color .35s ease, box-shadow .35s ease; }
header .logo img { transition: width .35s ease; }
.menutop li a { transition: color .3s ease, padding .35s ease; }

header.sp-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	/* no backdrop-filter and no lasting transform: either one turns the header into the
	   containing block for position:fixed children, which trapped the mobile menu panel */
	background: rgba(246, 244, 238, .98);
	box-shadow: 0 10px 30px -14px rgba(28, 36, 18, .35);
	animation: spHeaderIn .5s cubic-bezier(.2, .7, .2, 1);
}
@keyframes spHeaderIn {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
.admin-bar header.sp-sticky { top: 32px; }
header.sp-sticky .logo img { width: 78px; }
/* top level only: the dropdown links keep their own padding */
header.sp-sticky .menutop > li > a { padding-top: 24px; padding-bottom: 24px; }
header.sp-sticky .menutop li.menu-item-has-children:after { top: 26px; }

/* home: header sits transparent over the video, so switch to dark text once it sticks */
.home header.sp-sticky .menutop > li > a { color: var(--primary); }
.home header.sp-sticky .menutop > li > a:hover,
.home header.sp-sticky .menutop > li.current-menu-item > a { color: var(--secondary); }
.home header.sp-sticky .menutop li.menu-item-has-children:after { color: var(--primary); }

@media (max-width: 991px) {
	/* col-3 + col-10 add up to 13 columns and the old CSS reorders them, which pushed the
	   menu button onto its own row above the logo: keep logo and button on one line */
	header .row { flex-wrap: nowrap; align-items: center; }
	header .row > .col-3 { order: 1; flex: 0 0 auto; width: auto !important; }
	header .row > .col-10 { order: 2; flex: 1 1 auto; width: auto; }
	header.sp-sticky { padding: 6px 0; }
	header.sp-sticky .logo img { width: 64px; }
}
@media (max-width: 782px) {
	.admin-bar header.sp-sticky { top: 46px; }
}
@media (max-width: 600px) {
	/* the admin bar scrolls away on small screens */
	.admin-bar header.sp-sticky { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	header.sp-sticky { animation: none; }
}

/* mobile menu panel lives in <body> (moved by sp-global.js) and must sit above the sticky header */
#rmp-container-573 { z-index: 100000 !important; }
/* leave room on the right so the header's close (hamburger) button stays visible and tappable */
#rmp-container-573 { width: min(330px, calc(100vw - 76px)) !important; max-width: none !important; }
#rmp_menu_trigger-573 { z-index: 100001 !important; }

/* ---------- Fixed social tabs ---------- */
.sp-social {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 998;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sp-social a {
	--sp-w: 48px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 168px;
	height: 48px;
	margin-left: calc(var(--sp-w) - 168px);
	color: #fff !important;
	text-decoration: none;
	border-radius: 0 10px 10px 0;
	box-shadow: 4px 4px 14px -6px rgba(0, 0, 0, .35);
	transition: margin-left .45s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
	animation: spSocialIn .6s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(.4s + var(--sp-i) * .1s);
}
.sp-social a:hover,
.sp-social a:focus-visible { margin-left: 0; filter: brightness(1.06); }
.sp-social-label {
	flex: 1;
	padding-left: 18px;
	font-family: "Schibsted Grotesk", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity .3s ease .05s, transform .45s cubic-bezier(.2, .7, .2, 1);
	white-space: nowrap;
}
.sp-social a:hover .sp-social-label,
.sp-social a:focus-visible .sp-social-label { opacity: 1; transform: none; }
.sp-social-ico {
	width: var(--sp-w);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	color: #fff;
	transition: transform .35s ease;
}
.sp-social a:hover .sp-social-ico { transform: scale(1.12); }
@keyframes spSocialIn {
	from { transform: translateX(-100%); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.sp-social-fb { background: #3b5998; }
.sp-social-li { background: #0a66c2; }
.sp-social-yt { background: #ff0000; }
.sp-social-ig { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%); }

@media (max-width: 767px) {
	.sp-social a { --sp-w: 40px; height: 40px; }
	.sp-social-ico { font-size: 16px; }
}
/* touch screens: no hover, keep the compact icon-only tabs */
@media (hover: none) {
	.sp-social a:hover { margin-left: calc(var(--sp-w) - 168px); }
	.sp-social a:hover .sp-social-label { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-social a { animation: none; transition: none; }
}