/* Hårbaren i Stuvsta — statisk sajt */

:root {
	--color-dark: #1a1a1a;
	--color-light: #ffffff;
	--color-bg: #f7f5f3;
	--color-muted: #666666;
	--color-accent: #2b2b2b;
	--font-heading: "Playfair Display", Georgia, serif;
	--font-body: "Montserrat", "Open Sans", Arial, sans-serif;
	--max-width: 1100px;
	--header-height: clamp(40px, 4.5vw, 52px);
	--color-soft: #f6efe6;
	--color-warm-dark: #6e5a42;
	--color-btn-bg: #ecdfc7;
	--color-btn-border: #c2a476;
	--radius: 12px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Test: Chrome på Android kan sampla den här färgen (synlig vid
	   overscroll/rubber-band-skroll ovanför/nedanför sidans innehåll) för
	   att avgöra hur systemets UI ska färgas. body har fortfarande vit
	   bakgrund så vanliga sektioner utan egen bakgrund ser likadana ut. */
	background: var(--color-dark);
}

html, body {
	/* Skydd mot att t.ex. extrem textzoom får menyraden att skapa horisontell
	   skroll som kan kännas som att sidan "hoppar" i sidled. */
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-dark);
	background: var(--color-light);
	line-height: 1.6;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

h1, h2, h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0 0 0.5em;
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* Header / nav */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	background: rgba(15, 15, 15, 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.site-header .container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
}

.site-header .site-nav {
	/* Aldrig krympa under sitt eget innehåll — det är det som gör att
	   HÅRMENY annars kunde klippas av/hamna utanför skärmen på smala vyer. */
	flex-shrink: 0;
}

.site-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(14px, 4vw, 32px);
	margin: 0;
	padding: 0;
}

.site-nav a {
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	color: var(--color-light);
	font-size: clamp(12px, 1.6vw, 14px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-nav a:hover {
	opacity: 0.75;
}

.site-nav a[aria-current="page"] {
	color: var(--color-soft);
}

/* Hero */

.hero {
	position: relative;
	min-height: 100vh;
	/* 100svh ("small viewport height") istället för 100dvh: dvh ändras live
	   när mobilens adressfält/verktygsfält döljs/visas under skroll, vilket
	   gör att hero-sektionen byter höjd mitt i skrollningen och knuffar
	   allt innehåll under den — det som kändes som att sidan "hoppade".
	   svh är alltid samma (minsta) höjd, så sektionen ligger still. */
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-light);
	overflow: hidden;
}

/* .hero__bg är bara en maskerande ram (klipper till hero-sektionen och
   sköter intro-zoomen). Den faktiska bilden ligger i .hero__bg-image, ett
   eget lager som är lite överstort så att den kan flyttas ett antal pixlar
   utan att kanter syns — dels från mobilens rörelsesensor (--tilt-x/-y),
   dels från skroll-parallaxen (--scroll-y), båda satta i js/main.js.
   Vi använder JS för det här istället för CSS background-attachment:fixed,
   eftersom mobila webbläsare (särskilt Safari på iPhone) struntar i fixed
   vid skroll — JS-varianten fungerar likadant på alla enheter. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.hero__bg-image,
.page-title-hero::before {
	background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
		url("../images/hero.jpg") center center / cover no-repeat;
	transform: translate3d(var(--tilt-x, 0px), calc(var(--tilt-y, 0px) + var(--scroll-y, 0px)), 0);
	transition: transform 0.2s ease-out;
}

.hero__bg-image {
	position: absolute;
	inset: -56px;
}

/* Rubrikfält på undersidor (t.ex. Hårmeny) — samma bakgrundsbild som hero
   på startsidan, men kompakt. Header ligger fixed ovanpå, så vi ger den
   luft i toppen så H1 inte hamnar bakom menyraden. */
.page-title-hero {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--header-height) + 48px);
	padding-bottom: 56px;
	color: var(--color-light);
}

.page-title-hero::before {
	content: "";
	position: absolute;
	inset: -56px;
	z-index: 0;
}

.page-title-hero .container {
	position: relative;
	z-index: 1;
}

.page-title-hero h1 {
	color: var(--color-light);
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 700px;
	padding: 0 24px;
}

.hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	color: var(--color-light);
}

.hero p {
	font-size: 1.15rem;
	margin: 1em 0 1.5em;
}

.hero a.link {
	text-decoration: underline;
}

.btn {
	display: inline-block;
	padding: 12px 30px;
	background: var(--color-btn-bg);
	border: 2px solid var(--color-btn-border);
	color: var(--color-dark);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 14px;
	border-radius: var(--radius);
	transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover {
	background: var(--color-dark);
	color: var(--color-light);
}

.btn-outline {
	background: transparent;
	border: 1px solid var(--color-light);
	color: var(--color-light);
}

.btn-outline:hover {
	background: var(--color-btn-bg);
	color: var(--color-dark);
	border-color: var(--color-btn-border);
}

/* Sections */

section {
	padding: 72px 0;
}

section.alt {
	background: var(--color-bg);
}

section.dark {
	background: var(--color-dark);
	color: var(--color-light);
}

/* Varmare, ljusare variant av den mörka sektionen (t.ex. "Detta kan du göra hos oss") */
section.dark.warm {
	background: var(--color-warm-dark);
}

section.dark h2, section.dark h3 {
	color: var(--color-light);
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-muted);
	margin: 0 0 0.75em;
}

section.dark .eyebrow {
	color: #cfcfcf;
}

.row {
	display: flex;
	gap: 48px;
	align-items: center;
	flex-wrap: wrap;
}

.row > * {
	flex: 1 1 320px;
}

.row.reverse {
	flex-direction: row-reverse;
}

/* Om-oss- och produktbilden lyfter med en djupare, rörlig skugga vid hover. */
.row img {
	border-radius: var(--radius);
	box-shadow: 0 6px 18px rgba(0,0,0,0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.row img:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(0,0,0,0.4);
}

.text-center {
	text-align: center;
}

.lead {
	font-size: 1.1rem;
	max-width: 640px;
	margin: 0 auto;
}

/* Instagram-inbäddningar (6 valda inlägg, hanteras i admin.php).
   Vi kan inte nå in i iframen (annan domän) och dölja enskilda delar av
   Instagrams gränssnitt — men vi kan klippa bort en fast höjd upptill
   (profilrad) och nedtill (gilla/kommentera-rad) genom att låsa höjden på
   .instagram-grid__item och skjuta iframen uppåt med en negativ marginal.
   OBS: höjden på Instagrams rader varierar lite mellan inlägg och beroende
   på om besökaren är inloggad på Instagram eller inte, så de här måtten är
   en uppskattning — kolla live och justera IG_CROP_TOP / .instagram-grid__item
   height nedan om för mycket/lite klipps bort. */

.instagram-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	max-width: 960px;
	margin: 32px auto;
	align-items: start;
}

.instagram-grid__item {
	width: 100%;
	max-width: 410px;
	margin: 0 auto;
	height: 370px;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: 0 6px 18px rgba(0,0,0,0.28);
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.instagram-grid__item:hover {
	transform: scale(1.03);
	box-shadow: 0 18px 36px rgba(0,0,0,0.4);
}

.instagram-grid__item iframe {
	/* position:absolute + top (istället för margin-top) så att det inte
	   spelar någon roll vad Instagram själva sätter för margin på iframen
	   — vi styr positionen helt själva. !important överallt eftersom
	   Instagrams embed.js kan sätta sin egen inline style efter att sidan
	   laddat, och den vinner annars över en vanlig CSS-regel. */
	position: absolute !important;
	top: -58px !important;
	left: 0 !important;
	width: 100% !important;
	border: none !important;
	/* Öka (mer negativt top) för att klippa bort mer upptill av
	   profilraden, minska för att klippa mindre. */
}

/* Info grid (öppettider / hitta hit / boka) */

.info-bg {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
}

.info-bg::before {
	content: "";
	position: absolute;
	inset: -56px;
	z-index: 0;
	background: linear-gradient(rgba(0,0,0,0.57), rgba(0,0,0,0.57)),
		url("../images/info-bg.jpg") center center / cover no-repeat;
	transform: translate3d(var(--tilt-x, 0px), calc(var(--tilt-y, 0px) + var(--scroll-y, 0px)), 0);
	transition: transform 0.2s ease-out;
}

.info-bg .container {
	position: relative;
	z-index: 1;
	width: 100%;
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	text-align: center;
}

.info-card {
	background: var(--color-soft);
	padding-bottom: 24px;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	min-height: 380px;
	display: flex;
	flex-direction: column;
}

.info-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Extra specificitet (.info-grid .info-card) så hover-effekten inte kan
   bli överskriven av [data-animate].is-visible, som info-card också har. */
.info-grid .info-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(0,0,0,0.4);
}

.info-card h3 {
	background: var(--color-dark);
	color: var(--color-light);
	padding: 16px;
	margin: 0 0 24px;
}

.info-card p {
	padding: 0 24px;
	margin: 0.5em 0;
}

/* Prislista */

.price-list {
	max-width: 640px;
	margin: 0 auto;
}

.price-list h3 {
	margin-top: 1.5em;
}

.price-list table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.5em 0 1.5em;
}

.price-list td {
	padding: 10px 0;
	border-bottom: 1px solid #e2e2e2;
}

.price-list td:last-child {
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

.fine-print {
	font-size: 0.9rem;
	color: var(--color-muted);
}

/* Footer */

.site-footer {
	background: var(--color-dark);
	color: #cfcfcf;
	text-align: center;
	padding: 24px 0;
	font-size: 13px;
	line-height: 1.8;
}

.site-footer a {
	color: #cfcfcf;
}

/* Animationer: hero rör sig in vid sidladdning, övrigt kommer in vid skroll */

@media (prefers-reduced-motion: no-preference) {
	.hero__bg {
		/* Bara "backwards", inte "forwards": när introt är klart ska
		   .hero__bg gå tillbaka till transform:none, annars låser den kvar
		   en transform på förälder-elementet och background-attachment:fixed
		   på bilden inuti slutar fungera (se .hero__bg-image nedan). */
		animation: hero-bg-in 1.8s ease-out backwards;
	}

	.hero-content {
		animation: hero-content-in 1.1s ease-out both;
		animation-delay: 0.3s;
	}

	@keyframes hero-bg-in {
		from { opacity: 0; transform: scale(1.08); }
		to   { opacity: 1; transform: scale(1); }
	}

	@keyframes hero-content-in {
		from { opacity: 0; transform: translateY(22px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	[data-animate] {
		opacity: 0;
		transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	}

	[data-animate="up"]    { transform: translateY(36px); }
	[data-animate="left"]  { transform: translateX(-56px); }
	[data-animate="right"] { transform: translateX(56px); }
	[data-animate="zoom"]  { transform: scale(0.9); }

	[data-animate].is-visible {
		opacity: 1;
		transform: none;
	}

	.info-grid > [data-animate]:nth-child(2) { transition-delay: 0.12s; }
	.info-grid > [data-animate]:nth-child(3) { transition-delay: 0.24s; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__bg,
	.hero-content {
		animation: none;
	}

	.hero__bg-image,
	.page-title-hero::before,
	.info-bg::before {
		transition: none;
		transform: none;
	}
}

/* Mobile */

@media (max-width: 640px) {
	.row {
		gap: 24px;
	}
}