/* ------------------------------------------------------------------
   Heyrnarstöðin — 2026 design refresh.

   Loaded AFTER custom.css by templates/shaper_helixultimate/index.php, so
   everything here sits on top of the Floox parity layer without editing it.
   custom.css stays the record of "what the old site looked like"; this file
   is the record of "what we changed on purpose". Deleting this one file (and
   its two loader lines) reverts the site to exact parity.

   Scope is deliberately narrow — colour, depth, motion and focus. No layout,
   type scale or spacing changes that would disturb the alignment work in
   custom.css (the -47px form pull and the -19px addon offset in particular).
   ------------------------------------------------------------------ */


/* 1. Tokens
   ---------
   The greens already on the site, named. #3ab54a is the hero slider button,
   and it stays the accent used for focus rings, the scroll-up control and the
   menu underline.

   The site's other green, #5fb157, is the template's link_color parameter. It
   is deliberately NOT redefined here: it stays owned by the template settings
   so inline text links keep following the admin UI rather than this file.

   --hs-grey-btn is the booking form's submit button (see §6). It is the same
   value as --hs-muted but kept as its own token: they mean different things —
   one is a button fill, the other is de-emphasised text — and a future change
   to either should not silently drag the other along. */

:root {
	--hs-green: #3ab54a;
	--hs-green-dark: #2e9a3c;
	--hs-ink: #484848;
	--hs-muted: #909090;

	--hs-grey-btn: #909090;
	--hs-grey-btn-dark: #7a7a7a;

	--hs-shadow-header: 0 1px 3px rgba(23, 23, 23, .06), 0 6px 20px rgba(23, 23, 23, .07);
	--hs-shadow-card: 0 14px 26px rgba(23, 23, 23, .17);
	/* Neutral and quiet at rest; the green-tinted lift is kept for :hover, where
	   a coloured glow reads as feedback rather than decoration. */
	--hs-shadow-btn: 0 2px 6px rgba(23, 23, 23, .14);

	--hs-ease: cubic-bezier(.4, 0, .2, 1);
}

::selection {
	background: rgba(58, 181, 74, .22);
}


/* 2. Accessible focus
   -------------------
   Helix/Bootstrap leave most controls on the UA outline, which the pill-shaped
   fields and buttons swallow visually. :focus-visible keeps this off mouse
   clicks so it never reads as a stray border. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.sppb-btn:focus-visible,
.sp-megamenu-parent a:focus-visible,
#offcanvas-toggler:focus-visible {
	outline: 3px solid var(--hs-green);
	outline-offset: 3px;
}

/* Respect the OS "reduce motion" setting for everything added below. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* 3. Sticky header
   ----------------
   Previously the header was position:absolute at top:0, so it scrolled away
   and never came back — on a site with a 7-item menu and deep sub-pages that
   means scrolling back up to navigate.

   It is now position:fixed. At rest that renders IDENTICALLY to the absolute
   version (both sit at top:0 over the hero), so the home page's transparent
   white-on-slider treatment from custom.css §1–2 is untouched.

   js/custom.js adds .is-stuck once the page is scrolled past the header, which
   is the only state that changes appearance: solid white, slight shadow, and a
   small shrink. The header must go opaque there because on sub-pages the grey
   #909090 menu would otherwise sit over arbitrary page content. */

#sp-header {
	position: fixed;
	transition: background-color .28s var(--hs-ease),
	            box-shadow .28s var(--hs-ease);
}

#sp-header.is-stuck {
	background: #fff;
	box-shadow: var(--hs-shadow-header);
	z-index: 999;
}

/* The shrink is desktop-only. template.css already drops the header to 60px
   below 992px and 50px below 576px, so applying the 66px stuck height there
   would make the header GROW on scroll instead of shrinking. Below 992px the
   stuck state is purely the white background and shadow. */
@media (min-width: 992px) {
	#sp-header {
		transition: height .28s var(--hs-ease),
		            background-color .28s var(--hs-ease),
		            box-shadow .28s var(--hs-ease);
	}

	/*#sp-header.is-stuck {
		height: 66px;
	}*/

	#sp-logo .logo-image,
	#sp-logo .logo-image-phone {
		transition: height .28s var(--hs-ease);
	}

	#sp-header.is-stuck #sp-logo .logo-image,
	#sp-header.is-stuck #sp-logo .logo-image-phone {
		height: 42px;
	}
}

/* Anchor targets must clear the fixed header. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 86px;
}

/* --- home page: undo the over-the-slider white treatment once stuck ---
   custom.css §2 paints the logo, menu and burger white for body.itemid-109.
   Over the now-white stuck header that would be invisible, so each of those
   rules needs a counterpart at higher specificity. The extra #sp-header id in
   these selectors is what wins — no !important needed. */

body.itemid-109 #sp-header.is-stuck #sp-logo .logo-image,
body.itemid-109 #sp-header.is-stuck #sp-logo .logo-image-phone {
	content: url("../../../images/2023/heyrnarst_svart_logo_web.png");
}

body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li > a,
body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li > span {
	color: var(--hs-muted);
}

body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li:hover > a,
body.itemid-109 #sp-header.is-stuck .sp-megamenu-parent > li:focus > a {
	color: var(--hs-ink);
	opacity: 1;
}

body.itemid-109 #sp-header.is-stuck #offcanvas-toggler .burger-icon span {
	background-color: #252525;
}

body.itemid-109 #sp-header.is-stuck .sp-contact-info,
body.itemid-109 #sp-header.is-stuck .sp-contact-info a,
body.itemid-109 #sp-header.is-stuck .icon-top-wrapper i {
	color: var(--hs-ink);
}


/* 4. Menu polish
   --------------
   A colour transition on the top-level items, and an underline that grows from
   the centre on hover — the one piece of decoration added to the nav. It is
   drawn on ::before because custom.css §7 already hides ::after (the caret).

   The ::before is positioned against the LI, not the A: Helix leaves the anchor
   static and sets `position: relative` on the menu item (it has to, for the
   dropdown panels to anchor). So `bottom` here is measured from the bottom of
   the full-height menu item — 80px normally, 66px when stuck — which is why the
   two states need different values. */

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
	transition: color .2s var(--hs-ease), opacity .2s var(--hs-ease);
}

#sp-header .sp-megamenu-parent > li > a::before {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 24px;
	height: 2px;
	background: currentColor;
	opacity: 0;
	transition: left .25s var(--hs-ease), right .25s var(--hs-ease), opacity .25s var(--hs-ease);
}

#sp-header .sp-megamenu-parent > li:hover > a::before,
#sp-header .sp-megamenu-parent > li.active > a::before {
	left: 8px;
	right: 8px;
	opacity: .85;
}

#sp-header.is-stuck .sp-megamenu-parent > li > a::before {
	bottom: 17px;
	/* currentColor is the right choice over the hero (white on the slider), but
	   against the solid white header the brand green reads as an accent rather
	   than a second grey line. */
	background: var(--hs-green);
}

/* Dropdown panels: soften the shadow and let them fade rather than snap. */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	box-shadow: 0 10px 34px rgba(23, 23, 23, .14);
}

/* Submenu items keep the old site's treatment — a colour change on hover and
   nothing else. An earlier revision of this file gave them a tinted green
   hover block (rgba(58,181,74,.09)) with a 6px radius and 7px side margins;
   that was reverted on request, since it read as a different menu rather than
   the old one refreshed. The margins went with it: they existed only to inset
   the tinted block from the panel edge, and they pushed the label from 20px
   to 27px, which is why the items no longer lined up with the old site.

   The colour transition stays. It is motion, not styling — the old site
   snapped between the two colours only because Floox never declared a
   transition on these links, not by design. */

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span {
	transition: color .18s var(--hs-ease);
}


/* 5. Hero slider button
   ---------------------
   The green pill is the <span> inside the link, not the link itself. It had a
   colour transition but no hover state to transition TO, and no depth. */

.sp-slider-btn-text {
	box-shadow: 0 4px 14px rgba(23, 23, 23, .18);
	transition: background-color .3s var(--hs-ease),
	            transform .3s var(--hs-ease),
	            box-shadow .3s var(--hs-ease);
}

.sppb-sp-slider-button:hover .sp-slider-btn-text,
.sppb-sp-slider-button:focus .sp-slider-btn-text {
	background-color: var(--hs-green-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(23, 23, 23, .26);
}

.sppb-sp-slider-button:active .sp-slider-btn-text {
	transform: translateY(0);
}


/* 6. Booking form (Tímapantanir)
   ------------------------------
   The submit button stays on the site's grey, #909090, as it was before the
   refresh — this is a deliberate choice to keep the form quiet rather than
   turn it into the loudest element on the page. (An earlier revision of this
   file moved it onto the hero green; that was reverted.) The hover state is a
   darker step of the same grey, and the shadow is neutral rather than tinted,
   so nothing on the button reads as green.

   Field GEOMETRY is deliberately untouched: custom.css §6 pins width, padding
   and the textarea's height with !important for alignment reasons. Only colour,
   focus and the button's height (raised to a 44px touch target) change here.

   WHY !important, again:
   SP Page Builder renders the addon's own colour settings as an inline <style>
   scoped to generated ids, e.g.
       #sppb-addon-1698313256826 #btn-1698313256826.sppb-btn-custom { … }
   That is two ids and a class. No class-only selector can outrank it, and the
   ids are regenerated whenever the addon is rebuilt in the builder, so they
   cannot be hard-coded here either. custom.css §6 hit the same wall.

   The alternative is to change the colours on the addon itself in the page
   builder — but the booking form appears on the home page AND on every content
   page, so that is an edit per page, stored in the database, and invisible to
   version control. Keeping it here means the whole refresh reverts with one
   file. If these colours are ever set in the builder instead, delete this
   block rather than fighting it. */

.sppb-addon-ajax-contact .sppb-form-control {
	color: var(--hs-ink) !important;
	border: 1px solid transparent !important;
	transition: background-color .2s var(--hs-ease),
	            border-color .2s var(--hs-ease),
	            box-shadow .2s var(--hs-ease);
}

/* #6f6f6f on the #e6e6e6 field reaches ~4.1:1; the old #909090 was ~2.3:1. */
.sppb-addon-ajax-contact .sppb-form-control::placeholder {
	color: #6f6f6f !important;
	opacity: 1;
}

.sppb-addon-ajax-contact .sppb-form-control:focus {
	background-color: #fff !important;
	border-color: var(--hs-green) !important;
	box-shadow: 0 0 0 3px rgba(58, 181, 74, .18) !important;
	outline: none;
}

/* SPPB marks invalid fields with this class (see js/custom.js). It had no
   styling of its own beyond SPPB's default red text. */
.sppb-addon-ajax-contact .sppb-has-field-error {
	border-color: #d64545 !important;
	box-shadow: 0 0 0 3px rgba(214, 69, 69, .15) !important;
}

.sppb-addon-ajax-contact .sppb-btn {
	background-color: var(--hs-grey-btn) !important;
	border-color: var(--hs-grey-btn) !important;
	color: #fff !important;
	min-height: 44px;
	box-shadow: var(--hs-shadow-btn);
	transition: background-color .25s var(--hs-ease),
	            transform .25s var(--hs-ease),
	            box-shadow .25s var(--hs-ease);
}

.sppb-addon-ajax-contact .sppb-btn:hover,
.sppb-addon-ajax-contact .sppb-btn:focus {
	background-color: var(--hs-grey-btn-dark) !important;
	border-color: var(--hs-grey-btn-dark) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(23, 23, 23, .28);
}

.sppb-addon-ajax-contact .sppb-btn:active {
	transform: translateY(0);
	box-shadow: var(--hs-shadow-btn);
}

.sppb-form-validation-error {
	color: #c53030;
	font-weight: 600;
	margin-top: 10px;
}


/* 7. Linked images (the three home-page promo cards)
   --------------------------------------------------
   The cards' rounded corners are baked into the PNGs as transparency, so a
   box-shadow would draw a rectangle behind them — drop-shadow() follows the
   alpha channel and traces the actual rounded shape. */

.sppb-addon-single-image a,
.sppb-addon-image a {
	display: inline-block;
	transition: transform .35s var(--hs-ease), filter .35s var(--hs-ease);
}

.sppb-addon-single-image a:hover,
.sppb-addon-single-image a:focus-visible,
.sppb-addon-image a:hover,
.sppb-addon-image a:focus-visible {
	transform: translateY(-6px);
	filter: drop-shadow(var(--hs-shadow-card));
}


/* 8. Text links
   -------------
   An underline on hover only, offset clear of the descenders. Links that wrap
   an image are excluded — §7 handles those, and an underline would draw a bar
   across the bottom of the picture. */

#sp-main-body a:not(.sppb-btn):not(.sppb-sp-slider-button):not(:has(img)) {
	transition: color .2s var(--hs-ease);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

#sp-main-body a:not(.sppb-btn):not(.sppb-sp-slider-button):not(:has(img)):hover {
	color: var(--hs-green-dark);
	text-decoration: underline;
}


/* 9. Footer
   ---------
   #sp-footer carried no padding at all — the only breathing room came from the
   copyright paragraph's own margins, leaving the bar looking cramped against
   the content above it. */

#sp-footer {
	padding: 5px 0;
	border-top: 1px solid rgba(23, 23, 23, .07);
}

#sp-footer a {
	transition: color .2s var(--hs-ease);
	text-underline-offset: 3px;
}

#sp-footer a:hover {
	color: var(--hs-green-dark);
	text-decoration: underline;
}


/* 10. Back to top
    ---------------
    Was a translucent grey circle (rgba(100,100,100,.4)) that sat almost
    invisible over light content. */

.sp-scroll-up {
	background: var(--hs-green);
	box-shadow: 0 4px 14px rgba(23, 23, 23, .22);
	transition: background-color .25s var(--hs-ease),
	            transform .25s var(--hs-ease),
	            box-shadow .25s var(--hs-ease);
}

.sp-scroll-up:hover,
.sp-scroll-up:focus {
	background: var(--hs-green-dark);
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(23, 23, 23, .3);
}