/* Sintec – generelt designløft.
   Lav specificitet med vilje: Elementor-elementer med egne farver/typografi vinder stadig,
   så eksisterende sider ikke bryder. Slå fra under WooCommerce → Sintec Shop. */

:root {
	--sintec-ink: #16324a;
	--sintec-ink-soft: #4a5b6b;
	--sintec-blue: #1e73be;
	--sintec-blue-dark: #17598f;
	--sintec-accent: #6ec1e4;
	--sintec-bg: #f5f7fa;
	--sintec-line: #e3e8ee;

	/* Bløde, flydende former frem for skarpe kasser */
	--sintec-radius: clamp(12px, 1.4vw, 20px);
	--sintec-radius-sm: 10px;
	--sintec-shadow: 0 1px 2px rgba(22, 50, 74, .05), 0 10px 28px -14px rgba(22, 50, 74, .22);
	--sintec-shadow-lift: 0 2px 6px rgba(22, 50, 74, .07), 0 22px 44px -18px rgba(22, 50, 74, .3);

	/* Flydende mål: skalerer med skærmen i stedet for faste spring */
	--sintec-gutter: clamp(16px, 4vw, 48px);
	--sintec-section: clamp(40px, 6vw, 88px);
	--sintec-gap: clamp(16px, 2.2vw, 30px);
}

/* ---------- Grundlæggende ---------- */

html {
	scroll-behavior: smooth;
}

body {
	/* Blød tonet flade i stedet for en flad grå */
	background-color: var(--sintec-bg);
	background-image:
		radial-gradient(1100px 520px at 108% -6%, rgba(110, 193, 228, .16), transparent 62%),
		radial-gradient(900px 480px at -8% 4%, rgba(30, 115, 190, .09), transparent 60%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(body, p, li, td) {
	line-height: 1.68;
}

::selection {
	background: rgba(110, 193, 228, .35);
}

/* ---------- Typografi ---------- */

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--sintec-ink);
	letter-spacing: -.015em;
	line-height: 1.22;
	text-wrap: balance;
}

:where(h1) {
	font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem);
	font-weight: 700;
}

:where(h2) {
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.05rem);
	font-weight: 650;
}

:where(h3) {
	font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
	font-weight: 650;
}

/* Overskrifter på mørk/farvet baggrund skal blive lyse */
:where([style*="background"], .elementor-element[class*="bg-"]) :where(h1, h2, h3) {
	color: inherit;
}

/* Elementors globale "Primær" (#6EC1E4) bruges både til overskriftstekst og til
   sektionsbaggrunde. Lyseblå tekst på hvid har kontrast 1,9:1 og er svær at læse,
   så variablen overskrives KUN på tekst-widgets – baggrunde beholder deres farve.
   Elementer med egen farve valgt i Elementor er upåvirkede. Kun heading- og
   image-box-widgets: i icon-box bruges samme variabel til selve ikonets
   baggrundsflade, og dér skal farven blive. */
.elementor-widget-heading,
.elementor-widget-image-box {
	--e-global-color-primary: #16324a;
}

/* Icon-box: kun overskriften, så ikonets farvede flade bevares. Elementer med
   egen farve valgt i Elementor har højere specificitet og går forud for denne. */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a,
.elementor-widget-icon-list .elementor-icon-list-text {
	color: #16324a;
}

/* Brødteksten (#7A7A7A) rammer 4,0:1 – lige under grænsen. */
.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
	--e-global-color-text: #55646f;
}

/* Knapperne brugte de samme globale farver: hvid tekst på lysegrøn (#61CE70)
   gav 2,0:1 og på lyseblå 2,0:1. Mørkere nuancer af samme farver retter det
   uden at ændre andre elementer. */
.elementor-widget-button,
.elementor-widget-form {
	--e-global-color-accent: #1f7a3a;
	--e-global-color-primary: #1565a8;
}

/* Cookiebjælken: hvid tekst på grå (4,2:1) → mørk flade. */
#oc_cb_wrapper.fill_grey,
#oc_cb_wrapper {
	background-color: #2f3c47 !important;
}

#oc_cb_wrapper .oc_cb_btn {
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .5);
}

/* Aktivt menupunkt stod i #009FF4 (2,9:1). Webshop-knappen undtages – den er
   blå med hvid tekst og ville ellers blive blå på blå, når man står i shoppen. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item:not(.sintec-menu-shop) > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current_page_item:not(.sintec-menu-shop) > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-ancestor:not(.sintec-menu-shop) > a.mega-menu-link {
	color: #1e73be !important;
}

:where(p) {
	max-width: 74ch;
}

/* ---------- Links ---------- */

/* Kun tekstlinks. Ikon- og billedlinks henter deres farve fra currentColor, og
   en farve her ville gøre fx LinkedIn-ikonet blåt på blå baggrund. */
:where(.entry-content, .site-content) a:not(.button):not([class*="elementor-button"]):not(.wp-block-button__link):not([class*="elementor-icon"]):not(.elementor-social-icon):not([class*="wc-block-components-button"]):not([class*="wc-block-cart__submit"]):not(:has(> svg)):not(:has(> img)):not(:has(> i)) {
	color: var(--sintec-blue);
	text-decoration-color: rgba(30, 115, 190, .35);
	text-underline-offset: .18em;
	transition: color .15s ease, text-decoration-color .15s ease;
}

:where(.entry-content, .site-content) a:not(.button):not([class*="elementor-button"]):not(.wp-block-button__link):not([class*="elementor-icon"]):not(.elementor-social-icon):not(:has(> svg)):not(:has(> img)):not(:has(> i)):hover {
	color: var(--sintec-blue-dark);
	text-decoration-color: currentColor;
}

/* Synligt tastaturfokus overalt */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid rgba(30, 115, 190, .45);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Indholdsflader ---------- */

.site-content .content-area,
.inside-article,
.sidebar .widget,
.comments-area {
	border-radius: var(--sintec-radius);
	box-shadow: var(--sintec-shadow);
	border: 1px solid var(--sintec-line);
}

/* Indholdsfladen får luft, der følger skærmbredden */
.inside-article {
	padding: var(--sintec-gutter) !important;
}

/* Elementor-byggede sider: væk med den hvide kasse omkring hele siden.
   Sektionerne står selv for baggrund og luft, så siden får et åbent,
   moderne udtryk i stedet for et indrammet ark. */
body.elementor-page .inside-article,
body.page-template-elementor_header_footer .inside-article {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 !important;
}

body.elementor-page .site-content,
body.page-template-elementor_header_footer .site-content {
	padding-top: 0;
}

/* Sidens indhold må gerne gå bredere end teksten på store skærme */
body.elementor-page .site-content .content-area,
body.page-template-elementor_header_footer .site-content .content-area {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Elementor-sektioner får luftigere rytme på store skærme */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con > .e-con-inner {
	padding-left: max(0px, calc(var(--sintec-gutter) - 20px));
	padding-right: max(0px, calc(var(--sintec-gutter) - 20px));
}

.sidebar .widget {
	background: #fff;
}

/* Billeder: bløde hjørner, ingen hård kasseskygge */
.entry-content img:not(.mega-menu-logo):not(.avatar),
.elementor-widget-image img,
.wp-block-image img {
	border-radius: var(--sintec-radius);
}

.elementor-widget-image img {
	box-shadow: var(--sintec-shadow);
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}

.elementor-widget-image a:hover img {
	transform: translateY(-3px) scale(1.01);
	box-shadow: var(--sintec-shadow-lift);
}

/* Sektioner med farvet eller billedbaggrund får også bløde hjørner */
.elementor-section:not(.elementor-top-section) > .elementor-container > .elementor-column > .elementor-widget-wrap[style*="background"],
.elementor-widget-wrap[style*="background-color"] {
	border-radius: var(--sintec-radius);
}

/* En lille farveaccent under sidens H1 – bryder det firkantede udtryk */
.elementor-widget-heading h1.elementor-heading-title::after,
.entry-content > h1::after,
.page-header h1::after {
	content: "";
	display: block;
	width: 62px;
	height: 4px;
	margin-top: 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sintec-blue), var(--sintec-accent));
}

.elementor-widget-heading[data-widget_type] h1.elementor-heading-title {
	text-align: inherit;
}

/* ---------- Bevægelse: indhold toner blidt ind ---------- */

.sintec-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
	transition-delay: var(--sintec-delay, 0ms);
	will-change: opacity, transform;
}

.sintec-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Knapper ---------- */

:where(.wp-block-button__link, .button:not(.sintec-menu-shop a), button:not(.mega-toggle-block), input[type="submit"], .wp-element-button) {
	border-radius: 999px;
	padding: 11px 24px;
	font-weight: 600;
	letter-spacing: .01em;
	border: 0;
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

:where(.wp-block-button__link, .button, input[type="submit"]):hover {
	box-shadow: var(--sintec-shadow-lift);
	transform: translateY(-1px);
}

/* Elementor-knapper: kun hjørner og løft, farverne er sidens egne */
.elementor-button {
	border-radius: 999px !important;
	transition: box-shadow .15s ease, transform .15s ease;
}

.elementor-button:hover {
	box-shadow: var(--sintec-shadow-lift);
	transform: translateY(-1px);
}

/* ---------- Formularer ---------- */

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], textarea, select) {
	border: 1px solid var(--sintec-line);
	border-radius: 9px;
	padding: 11px 13px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

:where(input, textarea, select):focus {
	border-color: var(--sintec-blue);
	box-shadow: 0 0 0 3px rgba(30, 115, 190, .14);
	outline: none;
}

/* ---------- Tabeller ---------- */

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	border-radius: var(--sintec-radius);
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--sintec-line);
}

.entry-content th {
	background: #f1f5f9;
	text-align: left;
	font-weight: 650;
	color: var(--sintec-ink);
}

.entry-content th,
.entry-content td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--sintec-line);
}

/* ---------- Sidehoved / sidefod ---------- */

.site-header,
#mega-menu-wrap-primary {
	box-shadow: 0 1px 0 var(--sintec-line), 0 6px 20px -18px rgba(22, 50, 74, .5);
}

/* Menulinjen bliver lidt lavere og lægger en tydeligere skygge, når siden
   rulles – så føles headeren levende frem for en fast bjælke. */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	transition: padding .25s ease, height .25s ease, line-height .25s ease;
}

body.sintec-scrolled #mega-menu-wrap-primary {
	box-shadow: 0 1px 0 var(--sintec-line), 0 10px 26px -16px rgba(22, 50, 74, .55);
}

body.sintec-scrolled #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
	height: 46px !important;
	line-height: 46px !important;
}

body.sintec-scrolled .sintec-menu-shop > a.mega-menu-link {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

body.sintec-scrolled #mega-menu-wrap-primary #mega-menu-primary > li > a.mega-menu-logo img {
	transform: scale(.88);
	transition: transform .25s ease;
}

/* ---------- Sidefod ---------- */

/* Sidefoden fyldte over 370 px med stor tekst og en tung sort bjælke.
   Her er den en let afslutning på siden i stedet for et selvstændigt afsnit. */
.footer-widgets {
	background: transparent;
	padding: clamp(14px, 1.8vw, 24px) 0 0 !important;
	font-size: .8rem;
	line-height: 1.5;
}

.footer-widgets .inside-footer-widgets {
	border-top: 1px solid var(--sintec-line);
	padding-top: clamp(16px, 1.8vw, 24px);
}

.footer-widgets .widget-title,
.footer-widgets .wp-block-heading {
	font-size: .7rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #5c6b78 !important;
	margin-bottom: 7px;
}

.footer-widgets .widget {
	margin-bottom: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.footer-widgets p,
.footer-widgets li {
	font-size: .8rem;
	margin-bottom: 1px;
	line-height: 1.5;
}

/* Kontaktoplysninger sat tæt, så de ikke fylder en hel spalte */
.footer-widgets p {
	margin-top: 0;
	max-width: none;
}

.footer-widgets .widget:last-child p:last-child {
	margin-bottom: 0;
}

/* Sociale ikoner i footeren må gerne være små */
.footer-widgets a[class*="social"],
.footer-widgets .elementor-social-icon {
	width: 30px !important;
	height: 30px !important;
	font-size: 13px !important;
}

.footer-widgets a {
	color: #44586b;
	text-decoration: none;
}

.footer-widgets a:hover {
	color: var(--sintec-blue);
}

/* Bundlinjen: ingen sort blok, bare en diskret afslutning */
.site-info {
	background: transparent !important;
	color: #5c6b78 !important;
	font-size: .74rem;
	padding: 6px 0 16px !important;
}

.site-info a {
	color: #5c6b78;
}

.site-info a:hover {
	color: var(--sintec-blue);
}

/* ---------- Brødkrummer ---------- */

.breadcrumbs,
.woocommerce-breadcrumb {
	font-size: .9em;
	color: #64748b;
}

/* ---------- Mindre bevægelse, hvis brugeren beder om det ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.sintec-reveal {
		opacity: 1;
		transform: none;
	}
}