/* Site-wide fonts: Inter for text, Poppins for all headings (h1–h6) */
body { font-family: var(--font-sans, "Inter"), sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, "Poppins"), sans-serif; }
.elementor :is(h1, h2, h3, h4, h5, h6) em { font-family: inherit; }
/* Linked headings (e.g. a title linking to its post): the link keeps the heading's font instead of the default link font */
.elementor :is(h1, h2, h3, h4, h5, h6) .e-heading-link-base { font-family: inherit; }

/* ==========================================================
   Pixeltokig — site-wide CSS that Elementor V4 styles cannot express.
   Colours and fonts reference the Elementor global variables
   (Site Settings → Variables), so a rebrand there updates these too.
   ========================================================== */

/* In-page anchors land below the floating header */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Italic accent word inside headings, e.g. "Det här <em>gör</em> vi" */
.elementor em {
	font-family: var(--font-serif), sans-serif;
	font-style: italic;
	font-weight: 400;
	color: var(--blue);
}

/* Hero: the navigation tab is "cut out" of the image — curved inner corners */
#topp-meny::before,
#topp-meny::after {
	content: '';
	position: absolute;
	width: 1.25rem;
	height: 1.25rem;
	background: radial-gradient(circle at 100% 100%, transparent 1.25rem, var(--ink) calc(1.25rem + 0.5px));
	pointer-events: none;
}
#topp-meny::before { top: 100%; left: 0; }
#topp-meny::after { top: 0; left: 100%; }

/* ---------- Contact form (Gravity Forms, Orbital theme) — brand styling ---------- */
/* Map Gravity Forms' theme variables to the Elementor global variables */
#kontakt .gform_wrapper.gform-theme--orbital {
	--gf-color-primary: var(--ink-3);
	--gf-color-primary-contrast: var(--white);
	--gf-color-primary-darker: var(--blue);
	--gf-color-in-ctrl: var(--field);
	--gf-color-in-ctrl-contrast: var(--ink);
	--gf-color-in-ctrl-dark: var(--line-strong);
	--gf-color-in-ctrl-primary: var(--blue-dark);
	--gf-color-out-ctrl-dark: var(--ink);
	--gf-color-out-ctrl-light: var(--line-strong);
	--gf-ctrl-border-color: var(--line-strong);
	--gf-ctrl-label-color-primary: var(--ink);
	--gf-ctrl-label-color-req: var(--blue);
	--gf-radius: 6px;
	--gf-font-family-base: var(--font-sans), sans-serif;
	--gf-field-gap-y: 1.25rem;
	--gf-label-req-gap: 0.2rem;
	margin: 0;
	font-family: var(--font-sans), sans-serif;
}
#kontakt .gform_wrapper .gform_required_legend { display: none; } /* English "indicates required fields" legend */
#kontakt .gform_wrapper .gfield_label {
	margin: 0 0 0.5rem 0;
	font-family: var(--font-sans), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink);
}
#kontakt .gform_wrapper .gfield_required,
#kontakt .gform_wrapper .gfield_required_asterisk { margin-left: 0; color: var(--blue); font-weight: 500; }
#kontakt .gform_wrapper input[type="text"],
#kontakt .gform_wrapper input[type="email"],
#kontakt .gform_wrapper input[type="tel"],
#kontakt .gform_wrapper select,
#kontakt .gform_wrapper textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background-color: var(--field);
	box-shadow: none;
	font-family: var(--font-sans), sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
	transition: border-color 0.2s, box-shadow 0.2s;
}
#kontakt .gform_wrapper textarea { min-height: 9.5rem; resize: vertical; }
#kontakt .gform_wrapper ::placeholder { color: var(--stone); opacity: 0.7; }
#kontakt .gform_wrapper input:focus,
#kontakt .gform_wrapper select:focus,
#kontakt .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--blue-dark);
	box-shadow: 0 0 0 2px rgba(10, 106, 142, 0.3);
}
/* Validation */
#kontakt .gform_wrapper .gfield_error input,
#kontakt .gform_wrapper .gfield_error select,
#kontakt .gform_wrapper .gfield_error textarea { border-color: #DC2626; }
#kontakt .gform_wrapper .gfield_error .gfield_label { color: var(--ink); }
#kontakt .gform_wrapper .gfield_validation_message,
#kontakt .gform_wrapper .validation_message {
	margin: 0.375rem 0 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-sans), sans-serif;
	font-size: 0.875rem;
	color: #B91C1C;
}
#kontakt .gform_wrapper .gform_validation_errors {
	margin: 0 0 1.25rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid #FCA5A5;
	border-radius: 0.75rem;
	background-color: #FEF2F2;
	box-shadow: none;
}
#kontakt .gform_wrapper .gform_validation_errors .gform_submission_error {
	margin: 0;
	font-family: var(--font-sans), sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: #B91C1C;
}
#kontakt .gform_wrapper .gform_validation_errors .gform-icon { display: none; }
/* Submit button */
#kontakt .gform_wrapper .gform_footer { margin: 0.25rem 0 0 0; padding: 0; }
#kontakt .gform_wrapper .gform_footer input[type="submit"],
#kontakt .gform_wrapper .gform_button {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--ink-3);
	box-shadow: none;
	font-family: var(--font-sans), sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	color: var(--white);
	cursor: pointer;
	transition: background-color 0.2s;
}
#kontakt .gform_wrapper .gform_footer input[type="submit"]:hover,
#kontakt .gform_wrapper .gform_footer input[type="submit"]:focus,
#kontakt .gform_wrapper .gform_button:hover,
#kontakt .gform_wrapper .gform_button:focus { background-color: var(--blue); color: var(--white); }
/* Confirmation message after submit */
#kontakt .gform_confirmation_message {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background-color: var(--bone-2);
	font-family: var(--font-sans), sans-serif;
	font-size: 0.875rem;
	color: var(--ink);
}
/* ---------- Blog: Loop Grid pagination ---------- */
.elementor-widget-loop-grid .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 3rem;
	font-family: var(--font-sans), sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
}
.elementor-widget-loop-grid .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:hover,
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:focus { border-color: var(--blue); background-color: var(--blue); color: var(--white); }
.elementor-widget-loop-grid .elementor-pagination .page-numbers.current { border-color: var(--ink); background-color: var(--ink); color: var(--white); }
.elementor-widget-loop-grid .elementor-pagination span.page-numbers.prev,
.elementor-widget-loop-grid .elementor-pagination span.page-numbers.next { color: var(--stone); opacity: 0.5; } /* disabled on first/last page */
/* ---------- Single post: article body typography ---------- */
.elementor-widget-theme-post-content { font-family: var(--font-sans), sans-serif; font-size: 1.125rem; line-height: 1.75; color: var(--ink-2, var(--ink)); }
.elementor-widget-theme-post-content > *:first-child { margin-top: 0; }
.elementor-widget-theme-post-content p { margin: 0 0 1.4em; }
.elementor-widget-theme-post-content p:first-of-type::first-letter {
	float: left;
	margin: 0.08em 0.6rem 0 0;
	font-family: var(--font-serif), sans-serif;
	font-style: italic;
	font-size: 4.25em;
	line-height: 0.85;
	color: var(--blue);
}
.elementor-widget-theme-post-content h2 {
	position: relative;
	margin: 2.4em 0 0.75em;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-family: var(--font-heading), sans-serif;
	font-size: 1.75rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.elementor-widget-theme-post-content h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 3rem;
	height: 2px;
	background-color: var(--blue);
}
.elementor-widget-theme-post-content strong { font-weight: 700; color: var(--ink); }
.elementor-widget-theme-post-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol { margin: 0 0 1.6em; padding: 1.25rem 1.5rem 1.25rem 2.75rem; border-radius: 1rem; background-color: var(--bone-2); }
.elementor-widget-theme-post-content li { margin: 0.35em 0; padding-left: 0.25rem; }
.elementor-widget-theme-post-content li::marker { color: var(--blue); font-weight: 700; }
@media (max-width: 767px) {
	.elementor-widget-theme-post-content { font-size: 1.0625rem; }
	.elementor-widget-theme-post-content h2 { font-size: 1.5rem; }
}

/* ---------- Project categories as chips ([px_projektkategorier] in a Shortcode widget with class px-chiplista) ----------
   The wrappers are removed from layout so each chip sits directly in the card's tag row, like the original chip paragraphs. */
.px-chiplista,
.px-chiplista > .elementor-widget-container,
.px-chiplista .elementor-shortcode { display: contents; }
/* Same values as the "chip" global class (Elementor only prints a global class on pages where an atomic element uses it) */
.px-chiplista .chip {
	display: block;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background-color: var(--white);
	font-family: var(--font-sans), sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
}
/* On the white single-project page the chips get the light beige fill */
[data-elementor-type="single-post"] .px-chiplista .chip { background-color: var(--bone-2); }
/* ---------- Homepage projects loop (Projektlista → Projekt loop layout 18dd78eb) ----------
   Every card comes from one loop template; the last card keeps its slightly smaller bottom padding on desktop, as before. */
@media (min-width: 1025px) {
	.elementor-element-18dd78eb > [role="listitem"]:last-child > .e-con { padding-bottom: 0.7rem; }
}
/* ---------- SVG from an SCF field ([px_svg_falt] in a Shortcode widget with class px-svgfalt) ----------
   Sized like the atomic SVG widget it stands in for; the icon inherits the surrounding text colour. */
.elementor .px-svgfalt { width: 1.5rem; height: 1.5rem; margin: 0 !important; --kit-widget-spacing: 0px; flex: none; }
.px-svgfalt > .elementor-widget-container,
.px-svgfalt .elementor-shortcode { display: contents; }
.px-svgfalt svg { display: block; }
/* ---------- Project gallery (Basic Gallery widget, images from SCF "projekt_galleri") ---------- */
.px-projektgalleri .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; }
.px-projektgalleri .gallery-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.px-projektgalleri .gallery-icon { overflow: hidden; border-radius: 1rem; }
.px-projektgalleri .gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 0 !important; border-radius: 1rem; transition: transform 0.5s; }
.px-projektgalleri .gallery-item a:hover img { transform: scale(1.04); }
.px-projektgalleri .gallery br { display: none; }
@media (max-width: 1024px) { .px-projektgalleri .gallery { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 767px) { .px-projektgalleri .gallery { grid-template-columns: 1fr; } }
/* A project without gallery images hides the whole "Fler bilder" section */
section:has(.px-projektgalleri):not(:has(.gallery-item)) { display: none; }
/* ---------- Empty SCF fields: no leftover boxes ----------
   A quote block whose quote field is empty disappears (project cards, client card on project pages),
   and an empty avatar circle is not shown. */
.elementor .e-con:has(> .citat-text:empty) { display: none; }
.elementor .avatar:empty { display: none; }