/*
 * NFHB Félag: one style ("snid") per existing association-page element.
 *
 * Values are copied from the lab's nfhb-next classes (computed styles measured 2026-10-19).
 * Font weight, like in those classes, is inherited from the page. Breakpoints are Elementor's
 * (tablet ≤1024px, mobile ≤767px). Every class is prefixed nfhb-felag-; nothing global is styled
 * except collapsing a Shortcode widget that holds only this plugin's empty marker.
 *
 *   inngangur    ← nfhb-next-lead               (hero sentence under the title)
 *   meginmal     ← nfhb-next-felag-body         (Um félagið paragraphs, 16px gap)
 *   stadreynd    ← nfhb-next-felag-fact-value   ("í hnotskurn" values, incl. the e-mail link)
 *   merkjatexti  ← nfhb-next-felag-mark-dept    (department under the name on the dark mark)
 *   hvatning     ← nfhb-next-felag-cta-body     (Taktu þátt text, white)
 *   tengill      ← nfhb-next-felag-contact-link (✉ pill under the hero; also social links)
 *   takki        ← nfhb-next-btn + felag-cta-btn (white "Hafa samband →" button)
 *   merki        ← nfhb-next-felag-mark-letter  (big letter on the dark mark, or the logo)
 *   hreinn       – the value only, inheriting everything
 *
 * Every selector starts with ":root" (0,2,0) so it wins over the Elementor kit's element rules
 * such as ".elementor-kit-350 p { margin-block-end: 1.5em }" and ".elementor-kit-350 a { color }"
 * (0,1,1), which the original atomic elements beat with their own two-class selectors.
 */

:root .nfhb-felag-inngangur,
:root .nfhb-felag-meginmal,
:root .nfhb-felag-stadreynd,
:root .nfhb-felag-merkjatexti,
:root .nfhb-felag-hvatning,
:root .nfhb-felag-tengill,
:root .nfhb-felag-merki {
	font-family: "Merriweather Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	padding: 0;
}

:root .nfhb-felag-inngangur {
	max-width: 480px;
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.68;
	color: #084B7F;
}

:root .nfhb-felag-meginmal {
	max-width: 640px;
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #084B7F;
}

:root .nfhb-felag-meginmal > p,
:root .nfhb-felag-meginmal > ul,
:root .nfhb-felag-meginmal > ol {
	margin: 0;
	font: inherit;
	color: inherit;
}

/* The 16px between paragraphs that the about-text container's gap gave the two original paragraphs. */
:root .nfhb-felag-meginmal > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-top: 16px;
}

:root .nfhb-felag-meginmal ul,
:root .nfhb-felag-meginmal ol {
	padding-inline-start: 1.25em;
}

:root .nfhb-felag-meginmal li + li {
	margin-top: 4px;
}

:root .nfhb-felag-meginmal a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #B22F31;
	text-underline-offset: 3px;
}

:root .nfhb-felag-stadreynd {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #084B7F;
	overflow-wrap: anywhere;
}

:root .nfhb-felag-merkjatexti {
	position: relative;
	margin: 6px 0 0;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #FFFFFF;
}

:root .nfhb-felag-hvatning {
	max-width: 560px;
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: #FFFFFF;
}

:root .nfhb-felag-hreinn {
	font: inherit;
	color: inherit;
}

/* Links inside a value look like the original Elementor paragraph links: same colour, no underline. */
:root .nfhb-felag-stadreynd a,
:root .nfhb-felag-tengill a {
	color: inherit;
	text-decoration: none;
}

/* ✉ pill (and social links). */
:root .nfhb-felag-tengill {
	margin: 0;
	padding: 9px 15px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	color: #084B7F;
	border: 1px solid #C9C9C9;
	border-radius: 999px;
	background-color: #FFFFFF;
	box-sizing: border-box;
}

:root .nfhb-felag-tengill:focus-within {
	border-color: #084B7F;
	background-color: rgba(8, 75, 127, 0.06);
}

:root .nfhb-felag-tengill a:focus-visible {
	outline: 3px solid #B22F31;
	outline-offset: 4px;
	border-radius: 999px;
}

:root .nfhb-felag-midlar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .nfhb-felag-midlar > li::marker {
	content: none;
}

/* White "Hafa samband →" button on the dark Taktu þátt block. */
:root .nfhb-felag-takki {
	display: flex; /* a block box like the original flex item, so no line box adds height */
	width: fit-content;
	justify-content: center;
	align-items: center;
	min-height: 45px;
	margin: 0;
	padding: 12px 19px;
	font-family: "Merriweather Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-align: center;
	color: #053253;
	border: 1px solid #FFFFFF;
	border-radius: 5px;
	background-color: #FFFFFF;
	box-sizing: border-box;
	cursor: pointer;
}

:root .nfhb-felag-takki:hover,
:root .nfhb-felag-takki:visited {
	color: #053253;
	text-decoration: none;
}

:root .nfhb-felag-takki:focus {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

:root .nfhb-felag-takki:focus-visible,
:root .nfhb-felag-takki:active {
	color: #FFFFFF;
	background-color: #B22F31;
	border-color: #FFFFFF;
}

/* The big letter on the dark association mark, or the logo in its place. */
:root .nfhb-felag-merki {
	position: relative;
	margin: 0;
	color: #FFFFFF;
}

:root .nfhb-felag-merki--stafur {
	font-size: 190px;
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.05em;
}

:root .nfhb-felag-merki--mynd {
	display: flex;
	align-items: flex-start;
	height: 152px; /* the letter's box: 190px × 0.8 */
}

:root .nfhb-felag-merki__mynd {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	margin: 0;
	object-fit: contain;
	object-position: left top;
}

/* The button's widget must not shrink in the Taktu þátt row (the original button had flex: 0 0 auto). */
:root .elementor-widget-shortcode:has(> .elementor-shortcode > .nfhb-felag-takki) {
	flex: 0 0 auto;
}

/* Nothing to show: hide the Shortcode widget so the container's gap does not leave a hole. */
:root .elementor-widget-shortcode:has(.nfhb-felag-tomt[hidden]) {
	display: none;
}

/* Editor only: which field is empty (never printed for visitors). */
:root .nfhb-felag-tomt--ritill {
	display: inline-block;
	padding: 6px 10px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font: 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	opacity: 0.75;
}

/* Configuration notice (only shown to people who can edit the page). */
:root .nfhb-felag-villa {
	display: inline-block;
	padding: 8px 12px;
	border: 2px solid #B22F31;
	border-radius: 6px;
	background: #FFF5F5;
	color: #5c1012;
	font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 1024px) {
	:root .nfhb-felag-merki--stafur {
		font-size: 150px;
	}

	:root .nfhb-felag-merki--mynd {
		height: 120px;
	}
}

@media (max-width: 767px) {
	:root .nfhb-felag-merki--stafur {
		font-size: 120px;
	}

	:root .nfhb-felag-merki--mynd {
		height: 96px;
	}
}

/*
 * 1.1.0: [nfhb_felag_samfelagsmidlar snid="forsida"]: branded Facebook / Instagram buttons for the
 * NFHB homepage. Same box as the homepage's nfhb-next-btn ("Skoða viðburði" / "Kynnast
 * félögunum"): min-height 45px, padding 12px 19px, 5px radius, 1px border, Merriweather Sans 800
 * 14px / 1.2. Everything here is scoped to .nfhb-felag-forsida; the pills above are unchanged.
 * Alignment: set --nfhb-felag-forsida-justify (e.g. center) on the widget or a parent.
 */
:root .nfhb-felag-forsida {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--nfhb-felag-forsida-justify, flex-start);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .nfhb-felag-forsida > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .nfhb-felag-forsida > li::marker {
	content: none;
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__takki,
:root .nfhb-felag-forsida .nfhb-felag-forsida__takki:visited {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 45px;
	padding: 12px 19px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-family: "Merriweather Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	color: #FFFFFF;
	cursor: pointer;
	transition: box-shadow 0.15s ease, filter 0.15s ease;
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__takki--facebook {
	background: #1877F2;
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__takki--instagram {
	background: #C13584;
	background: linear-gradient(90deg, #833AB4 0%, #C13584 45%, #E1306C 85%, #F77737 100%);
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__takki:hover,
:root .nfhb-felag-forsida .nfhb-felag-forsida__takki:focus-visible {
	color: #FFFFFF;
	text-decoration: none;
	box-shadow: 0 6px 18px 0 rgba(5, 50, 83, 0.18);
	filter: brightness(0.9);
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__takki:focus {
	color: #FFFFFF;
	outline: 3px solid #084B7F;
	outline-offset: 2px;
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__takki:focus:not(:focus-visible) {
	outline: none;
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__takki:active {
	color: #FFFFFF;
	filter: brightness(0.85);
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

:root .nfhb-felag-forsida .nfhb-felag-forsida__texti {
	color: inherit;
}

@media (max-width: 420px) {
	:root .nfhb-felag-forsida > li {
		flex: 1 1 100%;
	}

	:root .nfhb-felag-forsida .nfhb-felag-forsida__takki {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root .nfhb-felag-forsida .nfhb-felag-forsida__takki {
		transition: none;
	}
}

@media (forced-colors: active) {
	:root .nfhb-felag-forsida .nfhb-felag-forsida__takki {
		border-color: ButtonText;
	}
}