/* ====== Trade Tomte Light Theme (Tabs only, no spaces) ====== */
:root{
	--bg:#f8fafc; /* nästan vit */
	--surface:#ffffff; /* kort och paneler */
	--surface-2:#f1f5f9; /* svag bakgrund */
	--border:#e2e8f0;
	--muted:#475569; /* text sekundär */
	--text:#0f172a; /* text primär */
	--brand:#f97316; /* orange */
	--brand-2:#fb923c;
	--ok:#16a34a;
	--warn:#d97706;
	--shadow:0 6px 18px rgba(15,23,42,.08);

	/* Footer (dark) */
	--footer-bg:#0f172a;
	--footer-text:#e5e7eb;
	--footer-muted:#cbd5e1;
	--footer-border:rgba(255,255,255,.12);
}

html,body{height:100%}
*{box-sizing:border-box}
body{
	margin:0;
	font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
	background:
		radial-gradient(1200px 800px at 80% -10%,rgba(251,146,60,.10),transparent),
		linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	color:var(--text);
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
header{
	position:sticky;top:0;z-index:40;
	backdrop-filter:saturate(1.1) blur(8px);
	background:rgba(255,255,255,.75);
	border-bottom:1px solid var(--border);
}
.nav{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:64px;
}
.brand{
	display:flex;
	align-items:center;
	gap:.75rem;
	font-weight:700;
	color:var(--text);
	margin-right:2rem; /* luft mellan loggan och länkar */
}
.brand-logo{
	width:32px;height:32px;border-radius:10px;
	background:linear-gradient(135deg,var(--brand),var(--brand-2));
	display:inline-flex;align-items:center;justify-content:center;
	box-shadow:0 8px 24px rgba(249,115,22,.25);
}
.brand-name{
	letter-spacing:.4px;
}
nav{
	display:flex;
	align-items:center;
	gap:1rem;
	min-width:0;
	flex:1;
	justify-content:flex-end;
}
nav ul{
	align-items:center;
	gap:1rem;
	list-style:none;
	margin:0;
	padding:0;
	white-space:nowrap;
}
.nav a{color:var(--text);opacity:.85}
.nav a:hover{opacity:1}
.menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.25rem}

/* ====== Header auth controls ====== */
nav ul.auth{
	display:flex;
	align-items:center;
	gap:.5rem;
	margin:0;
	padding:0;
	list-style:none;
}
nav ul.auth li{list-style:none}
.nav-divider{color:var(--muted);opacity:.6;padding:0 .25rem}
.header-primary-btn,
.header-secondary-btn{
	appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	cursor:pointer;
	font-weight:700;
	border-radius:10px;
	padding:.55rem 1rem;
	line-height:1;
	transition:transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
	user-select:none;
	white-space:nowrap;
}
.header-primary-btn{
	background:linear-gradient(135deg,var(--brand),var(--brand-2));
	color:#fff !important;
	border:0;
	box-shadow:0 3px 10px rgba(249,115,22,.25);
}
.header-primary-btn:hover{box-shadow:0 6px 16px rgba(249,115,22,.28)}
.header-primary-btn:active{transform:translateY(1px)}
.header-primary-btn:focus-visible{outline:2px solid rgba(249,115,22,.45);outline-offset:2px}
.header-secondary-btn{
	background:var(--surface-2);
	color:var(--text) !important;
	border:1px solid var(--border);
	box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.header-secondary-btn:hover{background:#eef2f6}
.header-secondary-btn:active{transform:translateY(1px)}
.header-secondary-btn:focus-visible{outline:2px solid rgba(2,6,23,.2);outline-offset:2px}
.header-primary-btn[aria-disabled="true"],
.header-secondary-btn[aria-disabled="true"]{opacity:.6;pointer-events:none}

/* Hero */
.hero{padding:80px 0}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);padding:.35rem .6rem;border-radius:999px;color:var(--muted);font-size:.85rem;background:var(--surface)}
.badge .dot{width:8px;height:8px;background:var(--ok);border-radius:999px;box-shadow:0 0 0 6px rgba(22,163,74,.12)}
.h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:.75rem 0 1rem;font-weight:800;color:var(--text)}
.lead{font-size:1.08rem;color:var(--muted);max-width:60ch}
.cta{display:flex;gap:.75rem;margin-top:1.25rem}
.btn{appearance:none;border:0;padding:.85rem 1rem;border-radius:14px;cursor:pointer;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#ffffff;box-shadow:0 10px 22px rgba(249,115,22,.25)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text)}

.overview-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.kpi{background:var(--surface-2);border:1px solid var(--border);padding:1rem;border-radius:12px}
.kpi h4{margin:0 0 .25rem;font-size:.9rem;color:var(--muted)}
.kpi p{margin:0;font-size:1.35rem;font-weight:800;color:var(--text)}

/* Sections */
.section{padding:64px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--surface);border:1px solid var(--border);padding:1rem;border-radius:16px;box-shadow:var(--shadow)}
.card h3{margin:.25rem 0 .5rem;color:var(--text)}
.card p{color:var(--muted)}

/* Subtil julkänsla (neutral & professionell): diskreta snöprickar */
body::before{
	content:"";
	position:fixed;inset:0;pointer-events:none;z-index:-1;
	background-image:
		radial-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
		radial-gradient(rgba(249,115,22,.05) 1px, transparent 1px);
	background-size:24px 24px, 36px 36px;
	background-position:0 0, 12px 12px;
}

/* ====== Footer (dark) – layout + typografi (scoped till #contact) ====== */
#contact{
	padding:48px 0;
	background:var(--footer-bg);
	color:var(--footer-text);
	border-top:1px solid var(--footer-border);
}
#contact p{
	color:var(--footer-muted);
	margin:.25rem 0 0;
	line-height:1.5;
}
#contact a{
	color:var(--brand);
	text-decoration:none;
	display:block; /* stabil baseline + större klickyta */
	line-height:1.35;
}
#contact a:hover{text-decoration:underline}

#contact li{
	padding: 5px;
}

/* Footer grid */
#contact .footer-grid{
	display:grid;
	grid-template-columns:1.2fr 2fr;
	gap:2rem;
	align-items:start;
}

/* Footer brand */
#contact .footer-brand{
	display:flex;
	flex-direction:column;
	gap:.35rem;
	align-items:flex-start;
	text-align:left;
}
#contact .footer-brand .brand-logo{
	width:36px;height:36px;border-radius:10px;
	display:inline-flex;align-items:center;justify-content:center;
	background:linear-gradient(135deg,var(--brand),var(--brand-2));
	box-shadow:0 8px 24px rgba(249,115,22,.25);
}
#contact .footer-brand strong{
	color:#fff;
	font-size:1.05rem;
	line-height:1.35;
}

/* Footer link columns */
#contact .footer-nav{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.5rem;
}
#contact .footer-nav .col{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:.5rem;
	text-align:left;
}
#contact .footer-heading{
	margin:0 0 .5rem;
	color:#fff;
	font-size:1rem;
	line-height:1.35;
	font-weight:700;
}
#contact .footer-links{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	flex-direction:column;
	gap:.45rem;
	width:100%;
}
#contact .footer-links li{margin:0;padding:0;display:block;width:100%}
#contact .footer-links a{
	width:100%;
	text-align:left;
	color:var(--footer-muted);
	padding:.6rem 0;
	min-height:44px;
}

/* Långa ord bryter snyggt utan att rucka layouten */
#contact .footer-nav a,
#contact .footer-brand p{
	overflow-wrap:anywhere;
	word-break:normal;
}

/* ====== Keyframes ====== */
@keyframes tt-slide-down{
	from{opacity:0;transform:translateY(-6px)}
	to{opacity:1;transform:translateY(0)}
}

/* ====== Responsive ====== */
@media (max-width:960px){
	/* Layout-sektioner */
	.hero-grid{grid-template-columns:1fr}
	.cards{grid-template-columns:1fr}
	.kpis{grid-template-columns:1fr}

	/* Header: mobilmeny */
	header .nav{position:relative}
	.brand{margin-right:0}
	.menu-btn{
		display:inline-block;
		margin-left:auto;
		padding:.5rem .75rem;
		line-height:1;
	}
	header nav{
		position:absolute;
		top:64px;left:0;right:0;
		display:none;
		background:var(--surface);
		border-top:1px solid var(--border);
		box-shadow:var(--shadow);
		padding:16px 20px calc(16px + env(safe-area-inset-bottom));
		z-index:50;
	}
	header nav.open{
		display:block;
		animation:tt-slide-down .16s ease-out;
	}
	header nav ul{
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		gap:.5rem;
		margin:0;
		padding:0;
		list-style:none;
		white-space:normal;
		width:100%;
	}
	header nav ul#menu li{width:100%}
	header nav ul#menu li + li{border-top:1px solid var(--border)}
	header nav ul#menu a{
		display:block;
		width:100%;
		padding:.85rem 0;
		min-height:44px;
	}
	header nav ul.auth{
		gap:.5rem;
		margin-left:0;
		margin-top:12px;
		padding-top:12px;
		border-top:1px solid var(--border);
		width:100%;
	}
	header nav ul.auth li{width:100%}
	header nav ul.auth .nav-divider{display:none}
	header nav ul.auth .header-btn{
		display:block;
		width:100%;
		text-align:center;
		padding:.9rem 1rem;
		border-radius:10px;
	}
	header nav ul.auth a:not(.header-btn){
		display:block;
		padding:.85rem 0;
		min-height:44px;
	}

	/* Footer: 100% bredd i en kolumn */
	#contact .footer-grid{grid-template-columns:1fr;gap:1.25rem}
	#contact .footer-nav{grid-template-columns:1fr;gap:1rem;width:100%}
	#contact .footer-nav .col{width:100%}
	#contact .footer-links{width:100%}
	#contact .footer-links a{width:100%}
}

/* ====== Desktop header menu layout fix ====== */
@media (min-width:961px){
	/* Återställ nav till desktop-läge */
	header nav{
		position:static;
		padding:0;
		box-shadow:none;
		border:0;
		display:flex;
		align-items:center;
		gap:1rem;
	}

	/* Länkarna sida-vid-sida i en rad */
	header nav > ul{
		display:flex;
		flex-direction:row !important;
		align-items:center;
		gap:1rem;
		white-space:nowrap;
		width:auto;
	}

	/* Meny till vänster, auth till höger */
	header nav > ul#menu{margin-right:auto}
	header nav > ul.auth{margin-left:1.25rem}

	/* Se till att li/a inte tvingar kolumn/stor höjd på desktop */
	header nav li{display:block}
	header nav a{
		display:inline-block;
		padding:0;
		min-height:0;
	}
}

/* ====== Fix: centrera text i auth-knappar på mobil ====== */
@media (max-width:960px){
	/* Behåll flex-centrering för våra nya knappklasser */
	header nav ul.auth .header-primary-btn,
	header nav ul.auth .header-secondary-btn{
		display:inline-flex;      /* återställ från ev. block */
		justify-content:center;
		align-items:center;
		width:100%;
		text-align:center;
		padding:.9rem 1rem;
		min-height:44px;
	}

	/* Valfritt: andra auth-länkar (om några) får block-stil */
	header nav ul.auth a:not(.header-primary-btn):not(.header-secondary-btn){
		display:block;
		padding:.85rem 0;
		min-height:44px;
	}
}

/* ====== Language switch ====== */
.lang-switch{
	display:flex;
	align-items:center;
	gap:.5rem;
	margin:0;
	padding:0;
	list-style:none;
}
.lang-switch .lang-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:2.25rem;
	padding:.4rem .6rem;
	border:1px solid var(--border);
	border-radius:999px;
	background:var(--surface);
	color:var(--text);
	font-weight:700;
	line-height:1;
	text-decoration:none;
	opacity:.9;
}
.lang-switch .lang-btn:hover{opacity:1}
.lang-switch .lang-btn.is-active{
	border-color:transparent;
	background:linear-gradient(135deg,var(--brand),var(--brand-2));
	color:#fff;
	box-shadow:0 3px 10px rgba(249,115,22,.25);
}

/* Mobil: fullbredd & separat block i drop-panelen */
@media (max-width:960px){
	.lang-switch{
		width:100%;
		margin-top:12px;
		padding-top:12px;
		border-top:1px solid var(--border);
		gap:.5rem;
	}
	.lang-switch .lang-btn{
		flex:1 1 auto;              /* två knappar delar raden */
		text-align:center;
		padding:.75rem 1rem;
		min-height:44px;
	}
}

/* ====== Language dropdown (button style, softer) ====== */
.lang-switch-holder{
	display:flex;
	align-items:center;
	gap:.75rem;
	margin:0 0 0 1rem;
	padding:0;
	list-style:none;
	white-space:nowrap;
}

.lang-dropdown{
	margin:0;
	display:inline-flex;
	align-items:center;
	gap:.5rem;
}

.lang-label{
	color:var(--muted);
	font-size:.9rem;
	font-weight:600;
	letter-spacing:.2px;
	line-height:1;
}

/* Select som knapp (inte pill) */
.lang-dropdown select{
	appearance:none;
	border:1px solid var(--border);
	background:var(--surface-2); /* mjukare, inte kritvit */
	color:var(--text);
	font-weight:600;
	border-radius:10px; /* inte pill */
	padding:.6rem .9rem; /* tydlig knappkänsla */
	line-height:1;
	box-shadow:0 1px 2px rgba(15,23,42,.06); /* mycket mild skugga */
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.lang-dropdown select:hover{
	background:var(--surface);
}

.lang-dropdown select:focus{
	outline:0;
	border-color:rgba(249,115,22,.35); /* brand-tonad kant */
	box-shadow:0 0 0 3px rgba(249,115,22,.12); /* mjuk focus-ring */
}

.lang-dropdown select:active{
	background:#fff; /* lätt feedback vid tryck */
}

/* Mobil: label ovanför + fullbredd; lite mer padding */
@media (max-width:960px){
	.lang-switch-holder{
		width:100%;
		margin:12px 0 0 0;
		padding-top:12px;
		border-top:1px solid var(--border);
	}
	.lang-dropdown{
		display:block;
		width:100%;
	}
	.lang-label{
		display:block;
		margin:0 0 .5rem 0;
	}
	.lang-dropdown select{
		display:block;
		width:100%;
		padding:.9rem 1rem;
		min-height:44px;
		border-radius:12px; /* lite rundare för touch, men inte pill */
	}
}

/* ====== Language dropdown: option hover + mobilbredd ====== */

/* 1) Mjukare option-färger (ersätter turkos) */
.lang-dropdown select{
	background:var(--surface-2);
	color:var(--text);
}
.lang-dropdown select option{
	background:var(--surface);
	color:var(--text);
}
.lang-dropdown select option:hover,
.lang-dropdown select option:focus,
.lang-dropdown select option:checked
.lang-dropdown select option:selected
{
	background:#eef2f6; /* mjuk grå hover/vald rad */
	color:var(--text);
}

/* OBS: vissa mobila/iOS-webbläsare ignorerar option:hover – då används systemets valfärg. */

/* 2) Mobil: gör Language + dropdown 100% bredd i panelen */
@media (max-width:960px){
	header nav .lang-switch-holder{
		display:flex;
		flex-direction:column;
		align-items:stretch;
		width:100%;
		margin:12px 0 0 0;
		padding-top:12px;
		border-top:1px solid var(--border);
	}
	header nav .lang-switch-holder > li{width:100%}
	header nav .lang-dropdown{display:block;width:100%}
	header nav .lang-label{display:block;margin:0 0 .5rem 0}
	header nav .lang-dropdown select{
		display:block;
		width:100%;
		padding:.9rem 1rem;
		min-height:44px;
		border-radius:12px; /* lite rund för touch */
	}
}

/* Desktop-fint: håll den kompakt intill menyn */
@media (min-width:961px){
	.lang-switch-holder{
		display:inline-flex;
		align-items:center;
		gap:.75rem;
		margin-left:1rem;
	}
	.lang-dropdown{
		display:inline-flex;
		align-items:center;
		gap:.5rem;
	}
	.lang-dropdown select{
		border-radius:10px; /* mer knappkänsla, mindre rund än pill */
		padding:.6rem .9rem;
		border:1px solid var(--border);
		box-shadow:0 1px 2px rgba(15,23,42,.06);
	}
	.lang-dropdown select:hover{background:var(--surface)}
	.lang-dropdown select:focus{
		outline:0;
		border-color:rgba(249,115,22,.35);
		box-shadow:0 0 0 3px rgba(249,115,22,.12);
	}
}

/* ====== Selected option-färg i dropdownlistan ====== */
.lang-dropdown select option:checked{
	background:#eef2f6 !important;	/* mjuk grå */
	color:var(--text) !important;
}

/* Vissa motorer kräver ett "bakgrund + gradient"-hack vid focus */
.lang-dropdown select:focus > option:checked{
	background:#eef2f6 linear-gradient(0deg,#eef2f6,#eef2f6) !important;
}

/* Bonus: hover-rad i dropdown (stöds ej överallt) */
.lang-dropdown select option:hover{
	background:#eef2f6;
	color:var(--text);
}

/* Själva selectens "displayade" rad (inte listan) */
.lang-dropdown select{
	background:var(--surface-2);
	color:var(--text);
}

.brand-name a {
	text-decoration: none;
}