/*
Theme Name: Floorplan
Theme URI: https://floorplan.se
Description: Floorplan child theme – 360°-fotografering & virtuella turer i Norrbotten
Author: Jonas Lundström
Author URI: https://floorplan.se
Template: hello-elementor
Version: 1.0.2
License: GNU General Public License v3 or later
Text Domain: floorplan
*/

/* =============================================
   SMOOTH SCROLL – GSAP ScrollSmoother
   ScrollSmoother lägger själv till position:fixed
   via JS – inga CSS-regler här som kan låsa sidan
   ============================================= */

/* =============================================
   DESIGN TOKENS – ändra här, gäller överallt
   ============================================= */
:root {
	--fp-black:       #0D0D0D;
	--fp-white:       #FFFFFF;
	--fp-accent:      #22C55E;   /* Tech-grön – matchar logotypen */
	--fp-accent-dark: #16A34A;
	--fp-grey-light:  #F5F5F5;
	--fp-grey-mid:    #888888;
	--fp-grey-dark:   #333333;

	--fp-font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--fp-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

	--fp-radius:      6px;
	--fp-shadow:      0 4px 24px rgba(0,0,0,.12);
	--fp-transition:  .25s ease;
}

/* =============================================
   RESET / BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: var(--fp-font-body);
	color: var(--fp-black);
	background: var(--fp-white);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--fp-accent);
	text-decoration: none;
	transition: color var(--fp-transition);
}
a:hover { color: var(--fp-accent-dark); }

img { max-width: 100%; height: auto; }

/* =============================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================= */

/* Se till att Elementor-sektioner kan gå full bredd */
.elementor-section.elementor-section-stretched {
	left: 0 !important;
	width: 100% !important;
}

/* =============================================
   TYPOGRAFI
   ============================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--fp-font-heading);
	font-weight: 700;
	line-height: 1.15;
	color: var(--fp-black);
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }

p { line-height: 1.7; }

/* =============================================
   KNAPPAR (Elementor-klass-matching)
   ============================================= */
.elementor-button,
.fp-btn {
	display: inline-block;
	padding: .75rem 1.75rem;
	background: var(--fp-accent);
	color: var(--fp-white) !important;
	border-radius: var(--fp-radius);
	font-weight: 600;
	letter-spacing: .03em;
	transition: background var(--fp-transition), transform var(--fp-transition);
	border: none;
	cursor: pointer;
}
.elementor-button:hover,
.fp-btn:hover {
	background: var(--fp-accent-dark);
	transform: translateY(-1px);
}

.fp-btn-outline {
	background: transparent;
	border: 2px solid var(--fp-accent);
	color: var(--fp-accent) !important;
}
.fp-btn-outline:hover {
	background: var(--fp-accent);
	color: var(--fp-white) !important;
}

/* =============================================
   HEADER – undersidor: mörk bakgrund
   ============================================= */
.elementor-location-header {
	background: var(--fp-black);
	box-shadow: 0 1px 12px rgba(0,0,0,.3);
}

/* Menytext vit mot mörk bakgrund */
.elementor-location-header a,
.elementor-location-header .elementor-item {
	color: var(--fp-white) !important;
}
.elementor-location-header a:hover,
.elementor-location-header .elementor-item:hover {
	color: var(--fp-accent) !important;
}

/* Hamburger-ikon vit på mobil */
.elementor-location-header .elementor-menu-toggle svg path,
.elementor-location-header .elementor-menu-toggle svg rect {
	fill: var(--fp-white);
}

/* =============================================
   HEADER LAYOUT – desktop: logo centrerad, nav under
   ============================================= */
@media (min-width: 769px) {
	/* Container: kolumn istället för rad */
	.elementor-location-header .e-con {
		flex-direction: column !important;
		align-items: center !important;
		padding-top: 1rem;
		padding-bottom: 0;
		gap: 0 !important;
	}

	/* Logo: full bredd, centrerad */
	.elementor-location-header .elementor-widget-theme-site-logo,
	.elementor-location-header .elementor-widget-image {
		width: 100% !important;
		max-width: 100% !important;
		text-align: center;
		padding-bottom: 0.75rem;
	}

	/* Nav: full bredd, centrera menyposterna */
	.elementor-location-header .elementor-widget-nav-menu {
		width: 100% !important;
		max-width: 100% !important;
	}
	.elementor-location-header .elementor-nav-menu {
		justify-content: center !important;
	}

	/* Dölj hamburger-knappen på desktop (visas av Elementor ändå inte) */
	.elementor-location-header > .e-con > .e-button-base {
		display: none !important;
	}
}

/* =============================================
   HEADER – startsidan: transparent overlay mot video
   Inte sticky – scrollar bort med sidan
   ============================================= */

/* Täck alla möjliga element som kan ha vit bakgrund */
body.home .elementor-location-header,
body.home .elementor-location-header > .e-con,
body.home .elementor-location-header > .elementor-section,
body.home .elementor-location-header .e-con,
body.home .elementor-location-header .elementor-section,
body.home .elementor-location-header .elementor-container,
body.home .elementor-location-header .elementor-element,
body.home .elementor-location-header .elementor-element:not(.elementor-motion-effects-element-type-background) {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

body.home header.elementor-68.elementor-location-header,
body.home .elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Menytext vit mot den mörka video-bakgrunden */
body.home .elementor-location-header a,
body.home .elementor-location-header .elementor-item {
	color: var(--fp-white) !important;
}
body.home .elementor-location-header a:hover,
body.home .elementor-location-header .elementor-item:hover {
	color: var(--fp-accent) !important;
}

/* Hamburger-ikon vit på mobil */
body.home .elementor-location-header .elementor-menu-toggle svg path,
body.home .elementor-location-header .elementor-menu-toggle svg rect {
	fill: var(--fp-white);
}

/* =============================================
   HERO (startsida)
   ============================================= */
.fp-hero {
	min-height: 90vh;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.fp-hero__iframe-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.fp-hero__iframe-wrap iframe {
	width: 100%;
	height: 100%;
	border: none;
	pointer-events: none;  /* aktiveras vid klick */
}
.fp-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(13,13,13,.75) 0%, rgba(13,13,13,.3) 100%);
}
.fp-hero__content {
	position: relative;
	z-index: 1;
	color: var(--fp-white);
}

/* =============================================
   PRISKALKYLATOR
   ============================================= */
.fp-calculator {
	background: var(--fp-grey-light);
	border-radius: 12px;
	padding: 2.5rem;
	box-shadow: var(--fp-shadow);
}

.fp-calculator label {
	display: block;
	font-weight: 600;
	margin-bottom: .35rem;
	font-size: .9rem;
}

.fp-calculator input[type="range"] {
	width: 100%;
	accent-color: var(--fp-accent);
}

.fp-calculator select,
.fp-calculator input[type="number"],
.fp-calculator input[type="text"] {
	width: 100%;
	padding: .6rem .9rem;
	border: 1.5px solid #ddd;
	border-radius: var(--fp-radius);
	font-size: 1rem;
	transition: border-color var(--fp-transition);
}
.fp-calculator select:focus,
.fp-calculator input:focus {
	outline: none;
	border-color: var(--fp-accent);
}

.fp-calculator__result {
	background: var(--fp-black);
	color: var(--fp-white);
	border-radius: 8px;
	padding: 1.5rem 2rem;
	margin-top: 1.5rem;
}

.fp-calculator__price {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--fp-accent);
}

/* =============================================
   GALLERI / PORTFOLIO
   ============================================= */
.fp-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
}

.fp-gallery-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16/9;
	cursor: pointer;
}
.fp-gallery-item img,
.fp-gallery-item iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.fp-gallery-item:hover img { transform: scale(1.04); }

.fp-gallery-item__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
	opacity: 0;
	transition: opacity var(--fp-transition);
	display: flex;
	align-items: flex-end;
	padding: 1.25rem;
	color: var(--fp-white);
}
.fp-gallery-item:hover .fp-gallery-item__overlay { opacity: 1; }

/* =============================================
   BRANSCHKORT (tjänster)
   ============================================= */
.fp-service-card {
	background: var(--fp-white);
	border-radius: 10px;
	padding: 2rem;
	box-shadow: var(--fp-shadow);
	transition: transform var(--fp-transition), box-shadow var(--fp-transition);
	border-top: 4px solid var(--fp-accent);
}
.fp-service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0,0,0,.16);
}

/* =============================================
   PRISPAKETEN (tabell-stil)
   ============================================= */
.fp-pricing-table {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.fp-pricing-card {
	border: 2px solid var(--fp-grey-light);
	border-radius: 12px;
	padding: 2rem 1.5rem;
	text-align: center;
	transition: border-color var(--fp-transition), transform var(--fp-transition);
}
.fp-pricing-card.featured {
	border-color: var(--fp-accent);
	transform: scale(1.03);
}
.fp-pricing-card__price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--fp-accent);
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer,
#site-footer {
	background: var(--fp-black);
	color: rgba(255,255,255,.7);
	padding: 3rem 0 1.5rem;
}
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: var(--fp-white); }

/* =============================================
   UTILITIES
   ============================================= */
.fp-section { padding: 5rem 0; }
.fp-section--dark {
	background: var(--fp-black);
	color: var(--fp-white);
}
.fp-section--grey { background: var(--fp-grey-light); }

.fp-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.fp-text-accent { color: var(--fp-accent); }
.fp-badge {
	display: inline-block;
	background: var(--fp-accent);
	color: var(--fp-white);
	padding: .2rem .7rem;
	border-radius: 99px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* =============================================
   HERO VIDEO – overlay & scroll-reveal
   ============================================= */

/* Overlay skapas och kontrolleras av smooth-scroll.js (#fp-hero-overlay) */
/* Elementor video-bakgrund ska ligga under allt annat */
.fp-hero-video-section .elementor-background-video-container {
	z-index: 0;
}

/* =============================================
   BOLDZ-INSPIRERAD TYPOGRAFI & EFFEKTER
   ============================================= */

/* Stor display-rubrik för hero */
.fp-display {
	font-size: clamp(3.5rem, 9vw, 9rem);
	font-weight: 800;
	line-height: 1.0;
	letter-spacing: -0.03em;
}

/* Grön accent-text */
.fp-accent-text {
	color: var(--fp-accent);
}

/* Overline / eyebrow-text */
.fp-eyebrow {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--fp-accent);
	margin-bottom: 1rem;
	display: block;
}

/* Stats / siffror */
.fp-stat {
	text-align: center;
	padding: 2rem 1rem;
}
.fp-stat__number {
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 800;
	color: var(--fp-accent);
	line-height: 1;
	letter-spacing: -0.03em;
}
.fp-stat__label {
	font-size: .85rem;
	color: rgba(255,255,255,.5);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-top: .5rem;
}

/* Stats-rad separator */
.fp-stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #111;
	border-top: 1px solid rgba(255,255,255,.06);
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.fp-stats-row .fp-stat + .fp-stat {
	border-left: 1px solid rgba(255,255,255,.06);
}

/* Feature-kort (mörkt tema) */
.fp-feature-card {
	padding: 2.5rem 2rem;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	background: rgba(255,255,255,.02);
	transition: border-color var(--fp-transition), transform var(--fp-transition);
}
.fp-feature-card:hover {
	border-color: var(--fp-accent);
	transform: translateY(-4px);
}
.fp-feature-card__icon {
	width: 48px;
	height: 48px;
	margin-bottom: 1.5rem;
	color: var(--fp-accent);
}
.fp-feature-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--fp-white);
	margin-bottom: .75rem;
}
.fp-feature-card__text {
	color: rgba(255,255,255,.55);
	font-size: .95rem;
	line-height: 1.7;
}

/* Process-steg */
.fp-step {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}
.fp-step__number {
	font-size: 4rem;
	font-weight: 800;
	color: var(--fp-accent);
	line-height: 1;
	min-width: 3rem;
	opacity: .3;
}
.fp-step__content h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: .5rem;
}
.fp-step__content p {
	color: var(--fp-grey-mid);
	font-size: .95rem;
}

/* Bransch-grid (mörkt) */
.fp-industry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: .75rem;
}
.fp-industry-item {
	padding: 1.25rem 1.5rem;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 8px;
	color: rgba(255,255,255,.7);
	font-weight: 500;
	font-size: .95rem;
	transition: all var(--fp-transition);
	display: flex;
	align-items: center;
	gap: .75rem;
}
.fp-industry-item:hover {
	background: rgba(34,197,94,.08);
	border-color: var(--fp-accent);
	color: var(--fp-white);
}
.fp-industry-item::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--fp-accent);
	border-radius: 50%;
	flex-shrink: 0;
}

/* Hero CTA-knappar */
.fp-hero-cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}

/* Divider med gradient */
.fp-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--fp-accent), transparent);
	opacity: .3;
	margin: 0;
}

/* =============================================
   RESPONSIVT
   ============================================= */
@media (max-width: 768px) {
	.fp-stats-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.fp-stats-row .fp-stat:nth-child(3) {
		border-left: none;
	}

	.fp-gallery-grid {
		grid-template-columns: 1fr;
	}
	.fp-pricing-table {
		grid-template-columns: 1fr;
	}
	.fp-pricing-card.featured {
		transform: none;
	}
	.fp-calculator {
		padding: 1.5rem;
	}
}