/* Vefmundur – site customisations on top of the Unfold template */

/* ---------- Keep page width stable ----------
   Opening the modal menu sets body overflow:hidden; without a reserved gutter the scrollbar
   disappears, the page gets wider and the hero slider resizes ("jumps"). */
html {
	scrollbar-gutter: stable;
}

/* ---------- Modal (main) menu: underline instead of strike-through for hover/active ---------- */
#modal-menu .sp-megamenu-parent > li > a:before,
#modal-menu .sp-megamenu-parent > li > span:before {
	top: auto !important;
	bottom: -4px;
}

/* template uses overflow:scroll, which shows empty scrollbars on Windows; only scroll when needed */
#sp-header.header-with-modal-menu.classic-layout .modal-menu-inner > div {
	overflow-x: hidden;
	overflow-y: auto;
}

/* ---------- Hero slideshow (Forsíða) ---------- */
.sp-slider.vm-hero-slider {
	border-radius: 20px;
	overflow: hidden;
}
.vm-hero-slider .sp-item .sp-background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .15) 100%);
}
.vm-hero-slider .sp-slider-content-align-left {
	max-width: 920px;
	padding-top: 60px;
}
.vm-hero-slider .vm-slide-kicker {
	letter-spacing: .08em;
	text-transform: uppercase;
}
.vm-hero-slider .vm-slide-text {
	max-width: 620px;
	color: rgba(255, 255, 255, .9) !important;
}
.vm-hero-slider .sppb-sp-slider-button {
	display: inline-block;
	margin: 0 12px 12px 0;
	text-decoration: none;
}
.vm-hero-slider .sppb-sp-slider-button .sp-slider-btn-text {
	display: inline-block;
	padding: 16px 32px;
	border: 1px solid #fff;
	font-weight: 600;
	line-height: 20px;
	transition: background-color .3s, color .3s, border-color .3s;
}
.vm-hero-slider .vm-btn-primary .sp-slider-btn-text {
	background: var(--sppb-color-primary, #CFDB4B);
	border-color: var(--sppb-color-primary, #CFDB4B);
	color: #000 !important;
}
.vm-hero-slider .vm-btn-outline .sp-slider-btn-text {
	background: transparent;
	color: #fff !important;
}
.vm-hero-slider .sppb-sp-slider-button:hover .sp-slider-btn-text {
	background: #fff;
	border-color: #fff;
	color: #000 !important;
}
@media (min-width: 768px) {
	/* keep the text clear of the prev/next arrows */
	.vm-hero-slider .sp-slider-content-align-left {
		padding-left: 70px;
		padding-right: 70px;
	}
}
@media (max-width: 767px) {
	.sp-slider.vm-hero-slider {
		border-radius: 14px;
	}
	.vm-hero-slider .sp-slider-content-align-left {
		padding-top: 90px;
	}
	.vm-hero-slider .sppb-sp-slider-button .sp-slider-btn-text {
		padding: 13px 22px;
	}
	.vm-hero-slider .sp-nav-control {
		display: none;
	}
}

/* ---------- Image galleries (Fyrri verk) ---------- */
.vm-gallery .sppb-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vm-gallery .sppb-gallery::before,
.vm-gallery .sppb-gallery::after {
	display: none;
}
.vm-gallery .sppb-gallery li {
	float: none;
	width: auto;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
}
.vm-gallery .sppb-gallery li a {
	display: block;
}
.vm-gallery .sppb-gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s ease;
}
.vm-gallery .sppb-gallery li:hover img {
	transform: scale(1.05);
}
.vm-center-btn {
	margin-top: 40px;
}
@media (max-width: 991px) {
	.vm-gallery .sppb-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}
@media (max-width: 575px) {
	.vm-gallery .sppb-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Footer contact line ---------- */
.vm-footer-contact {
	margin-top: 24px;
	font-size: 15px;
}
.vm-footer-contact p {
	margin: 0;
}
.vm-footer-contact a {
	color: inherit;
}
.vm-footer-contact .vm-sep {
	margin: 0 8px;
	opacity: .5;
}

/* ---------- Header button: readable on white pages ---------- */
#sp-header .sppb-btn.header-btn {
	color: #000 !important;
	border-color: #000 !important;
}
#sp-header .sppb-btn.header-btn:hover {
	color: #000 !important;
	background: var(--sppb-color-primary, #CFDB4B) !important;
	border-color: var(--sppb-color-primary, #CFDB4B) !important;
}

/* ---------- Team cards (Um okkur) ---------- */
.vm-team-card .vm-team-email {
	font-size: 15px;
	color: inherit;
	opacity: .65;
	text-decoration: none;
}
.vm-team-card .vm-team-email:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ---------- Contact info boxes ---------- */
.sppb-addon-text-block a[href^="mailto:"],
.sppb-addon-text-block a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
	word-break: break-word;
}
.sppb-addon-text-block a[href^="mailto:"]:hover,
.sppb-addon-text-block a[href^="tel:"]:hover {
	text-decoration: underline;
}

/* ---------- Native Joomla article / category views (Fréttir) ---------- */
.com-content #sp-main-body {
	padding-top: 70px;
	padding-bottom: 100px;
}
.com-content .article-details,
.com-content .blog {
	max-width: 1110px;
	margin-left: auto;
	margin-right: auto;
}
.com-content .article-details .header-wrap {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.com-content .article-details .article-full-image {
	float: none;
	width: 100%;
}
/* always fill the content width, also for smaller (old) images such as 1000px ones */
.com-content .article-details .article-full-image img {
	display: block;
	width: 100%;
	height: auto;
}
.com-content .article-details [itemprop="articleBody"] {
	font-size: 17px;
	line-height: 1.75;
}
.com-content .article-details blockquote {
	margin: 32px 0;
	padding: 8px 0 8px 24px;
	border-left: 4px solid var(--sppb-color-primary, #CFDB4B);
	font-size: 19px;
}
@media (max-width: 767px) {
	.com-content #sp-main-body {
		padding-top: 40px;
		padding-bottom: 60px;
	}
}

/* ---------- Header on top of the home page hero ----------
   Only from 768px up: below that the template docks the header as a white bar at the bottom of the screen. */
@media (min-width: 768px) {
	.vm-home #sp-header .logo-image {
		filter: brightness(0) invert(1);
	}
	.vm-home #sp-header .sppb-btn.header-btn {
		color: #fff !important;
		border-color: #fff !important;
	}
	.vm-home #sp-header .sppb-btn.header-btn:hover {
		color: #000 !important;
		background: var(--sppb-color-primary, #CFDB4B) !important;
		border-color: var(--sppb-color-primary, #CFDB4B) !important;
	}
}