/* =============================================================
   styles.css — Jona Netsman Trädgårdsdesign
   Merged from startsida-godkand.html + projektsida-godkand.html
   ============================================================= */

/* ===== TYPSNITT ===== */
@font-face {
  font-family: engravers;
  src: url(fonts/engravers.woff2) format("woff2"),
       url(fonts/engravers.woff) format("woff");
  font-weight: 400;
  font-display: swap;
}

/* ===== DESIGN-TOKENS ===== */
:root {
  --guld: #b19a65;
  --guld-mork: #907843;
  --guld-ljus: #d3bc87;
  --guld-champagne: #f3e7c3;
  --text: #3a3a3a;
  --meta: #969696;
  --gra: #f6f6f6;
  --salvia: #e1e2de;
  --linje: #ebebeb;
  --serif: Georgia, 'Times New Roman', serif;
  --eng: engravers, 'Trebuchet MS', sans-serif;
}

/* ===== RESET / BAS ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Georgia används som body-font (per spec) */
body { font-family: var(--serif); color: var(--text); background: #fff; }
.eng { font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.18em; }

/* ===== HEADER / NAV ===== */
/* Startsida: transparent → scrolled */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 26px 5%; transition: background .3s, padding .3s; }
header.scrolled { background: rgba(255,255,255,.96); padding: 12px 5%; box-shadow: 0 1px 12px rgba(0,0,0,.07); }
header .logo { display: block; width: 243px; height: 58px; background-color: #fff; -webkit-mask: url(/images/jona_logo.svg) center / contain no-repeat; mask: url(/images/jona_logo.svg) center / contain no-repeat; filter: drop-shadow(0 1px 5px rgba(0,0,0,.3)); transition: width .3s, height .3s, background-color .3s; }
header.scrolled .logo { width: 168px; height: 40px; background-color: var(--guld); filter: none; }
/* Projektsida: alltid scrolled-läge (ingen hero) */
header.kompakt { background: rgba(255,255,255,.97); padding: 12px 5%; box-shadow: 0 1px 12px rgba(0,0,0,.07); }
header.kompakt .logo { width: 168px; height: 40px; background-color: var(--guld); filter: none; }
nav { display: flex; gap: 34px; }
nav a { text-decoration: none; font-size: 15px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
nav a:hover { color: var(--guld); }
header.scrolled nav a,
header.kompakt nav a { color: var(--guld); text-shadow: none; }
header.scrolled nav a:hover,
header.kompakt nav a:hover { color: var(--text); }

/* ===== HERO: FULLSKÄRM ===== */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero img.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: heroFade 24s infinite; }
.hero img.slide:first-child { animation: none; opacity: 1; }
/* Per-slide animation-delay sätts av script.js (Task 6) — inga nth-child-regler här */
@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1) }
  6%   { opacity: 1 }
  27%  { opacity: 1; transform: scale(1.045) }
  33%  { opacity: 0; transform: scale(1.05) }
  100% { opacity: 0 }
}
.hero .veil { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,0) 28%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.52)); }
.hero .tagline { position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center; }
.hero .tagline .kick { display: flex; align-items: center; justify-content: center; gap: 18px; font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.34em; font-size: 19px; color: var(--guld-champagne); text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6); margin-bottom: 20px; }
.hero .tagline .kick::before,
.hero .tagline .kick::after { content: ''; width: 44px; height: 2px; background: var(--guld-ljus); box-shadow: 0 1px 5px rgba(0,0,0,.5); }
.hero .tagline h1 { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: clamp(34px, 5.2vw, 66px); line-height: 1.12; color: #fff; text-shadow: 0 3px 22px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.4); max-width: 22ch; margin: 0 auto; }
.hero .tagline .bar { width: 54px; height: 2px; background: var(--guld); margin: 22px auto 0; box-shadow: 0 1px 6px rgba(0,0,0,.4); }
.hero .arrow { display: block; margin: 26px auto 0; color: #fff; font-size: 26px; text-decoration: none; animation: bob 2.2s infinite; opacity: .9; }
@keyframes bob {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(10px) }
}

/* ===== SEKTIONSRUBRIK ===== */
.shead { text-align: center; padding-top: 84px; margin-bottom: 48px; }
.shead .t { font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.22em; font-size: 26px; color: var(--text); }
.shead .bar { width: 54px; height: 2px; background: var(--guld); margin: 16px auto 0; }

/* ===== PROJEKT (startsida) ===== */
#projekt { background: var(--gra); padding-bottom: 90px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0 5%; }
/* .pmark är <a> i Task 4 → display:block + color:inherit + text-decoration:none */
.pmark { display: block; color: inherit; text-decoration: none; position: relative; outline: 1px solid var(--guld); outline-offset: -1.1em; transition: outline-offset .35s ease; cursor: pointer; overflow: hidden; }
.pmark:hover { outline-offset: 0; }
.pmark:focus-visible { outline-offset: 0; }
.pmark img { width: 100%; aspect-ratio: 845/684; object-fit: cover; display: block; }
/* Hover: bilden tonas ner */
.dim { position: absolute; inset: 0; background: rgba(40,38,33,0); transition: background .35s ease; }
.pmark:hover .dim { background: rgba(40,38,33,.45); }
/* Hover: "Visa" stiger fram i mitten */
.pvisa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.pmark:hover .pvisa { opacity: 1; transform: translateY(0); }
.pvisa span { color: #fff; font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.3em; font-size: 17px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.pvisa i { display: block; width: 34px; height: 2px; background: var(--guld); }
/* Centrerad vit text i mitten av rutan, ingen vit bakgrund — tonas bort vid hover så "VISA" stiger fram */
.plabel { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 0 1em 1.4em; color: #fff; font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 2px 20px rgba(0,0,0,.6); transition: transform .35s ease, opacity .35s ease; }
.pmark:hover .plabel { transform: translateY(16px); opacity: 0; }

/* ===== TJÄNSTER: stor bild + stor text ===== */
#tjanster { padding-bottom: 90px; }
.tj { display: flex; min-height: 62vh; }
.tj .img { flex: 1.15; background-size: cover; background-position: 50% 50%; }
.tj .txt { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 7vh 7%; }
.tj.rev { flex-direction: row-reverse; }
.tj .txt .k { font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.2em; font-size: 21px; color: var(--guld); }
.tj .txt h3 { font-family: 'Fraunces', serif; font-weight: 300; font-size: 30px; margin: 18px 0 14px; }
.tj .txt p { font-size: 16.5px; line-height: 1.75; color: #555; max-width: 46ch; }
.tj .txt p + p { margin-top: 14px; }
.tj .txt .pris { margin-top: 16px; font-size: 15px; color: var(--text); }
.cta { display: inline-block; width: max-content; background: var(--guld); color: #fff; font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; padding: 15px 30px; margin-top: 26px; text-decoration: none; transition: background .25s; }
.cta:hover { background: var(--guld-mork); }

/* ===== OM: exakt som idag ===== */
#om { background-color: var(--salvia); background-image: url('images/blommor_bg.svg'); background-repeat: no-repeat; background-position: 0% 100%; padding-bottom: 0; }
#om .intro { max-width: 880px; margin: 0 auto; padding: 0 5%; font-size: 16px; line-height: 1.85; color: var(--text); }
#om .intro h3,
#om .halva h3 { font-family: 'Fraunces', serif; font-weight: 300; font-size: 26px; margin-bottom: 18px; text-align: center; }
#om .intro p + p { margin-top: 14px; }
#om .anfang::first-letter { color: var(--guld); font-family: var(--serif); font-size: 64px; float: left; line-height: 48px; padding-right: 10px; }
#om .tva { display: flex; margin-top: 60px; align-items: stretch; }
#om .halva { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6vh 6% 9vh; font-size: 16px; line-height: 1.85; }
#om .halva h3 { text-align: left; }
#om .halva blockquote { font-family: var(--serif); font-style: italic; color: #55534d; margin-top: 16px; border-left: 2px solid var(--guld); padding-left: 16px; }
#om .foto { flex: 1; background: url('images/jona.jpg') 100% 50% no-repeat; background-size: contain; min-height: 64vh; }

/* ===== OMDÖMEN ===== */
#omdomen { background: var(--gra); padding-bottom: 90px; }
.ogrid { display: flex; gap: 18px; padding: 0 7%; }
.okort { flex: 1; background: #fff; border: 1px solid var(--linje); padding: 30px; }
.okort .stj { color: var(--guld); font-size: 17px; letter-spacing: 3px; }
.okort p { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.7; margin-top: 14px; color: var(--text); }
.okort .vem { font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--guld); margin-top: 18px; }

/* ===== KONTAKT ===== */
#kontakt { padding-bottom: 90px; }
.form { max-width: 640px; margin: 0 auto; padding: 0 5%; display: flex; flex-direction: column; gap: 14px; }
.form .rad { display: flex; gap: 14px; }
/* Georgia-stack i formulärfälten */
.form input,
.form select,
.form textarea { width: 100%; border: 1px solid #d9d4c8; padding: 15px 16px; font-size: 15px; font-family: var(--serif); color: var(--text); background: #fff; }
.form textarea { height: 130px; resize: vertical; }
.form .cta { align-self: center; border: none; cursor: pointer; }

/* ===== FOOTER ===== */
footer { background: var(--guld); text-align: center; padding: 96px 5% 80px; }
footer img.flogo { max-width: 40%; height: 84px; }
.frad { display: flex; justify-content: center; gap: 70px; margin-top: 40px; align-items: center; }
.frad .et { font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: rgba(255,255,255,.85); }
.frad .v { color: #fff; font-size: 16px; margin-top: 6px; font-family: var(--serif); }
.frad a { color: #fff; text-decoration: none; }
footer .cr { margin-top: 44px; font-size: 12px; color: rgba(255,255,255,.75); }
/* Projektsida-footer: något kompaktare (klass sätts av Task 4) */
footer.kompakt { padding: 80px 5% 64px; }
footer.kompakt img.flogo { height: 72px; }
footer.kompakt .frad { margin-top: 34px; }
footer.kompakt .cr { margin-top: 38px; }

/* ===== PROJEKTSIDA: SLIDER ===== */
.pslider { position: relative; margin-top: 64px; height: 64vh; min-height: 420px; overflow: hidden; }
.pslider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: fade 15s infinite; }
/* Per-slide animation-delay: nth-child(1){0s} nth-child(2){5s} nth-child(3){10s} behålls — projektsidan har alltid 3 bilder */
.pslider img:nth-child(1) { animation-delay: 0s; }
.pslider img:nth-child(2) { animation-delay: 5s; }
.pslider img:nth-child(3) { animation-delay: 10s; }
@keyframes fade {
  0%   { opacity: 0 }
  8%   { opacity: 1 }
  33%  { opacity: 1 }
  41%  { opacity: 0 }
  100% { opacity: 0 }
}

/* ===== PROJEKTSIDA: ARTIKEL ===== */
.artikel { max-width: 780px; margin: 0 auto; padding: 56px 5% 44px; }
.artikel h1 { font-family: var(--eng); font-weight: 400; font-size: 28px; color: var(--text); text-align: center; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.5; }
.artikel .bar { width: 54px; height: 2px; background: var(--guld); margin: 18px auto 34px; }
.artikel p { font-size: 16.5px; line-height: 1.9; }
.artikel p + p { margin-top: 16px; }
.artikel .anfang::first-letter { color: var(--guld); font-family: var(--serif); font-size: 84px; float: left; line-height: 58px; padding-right: 10px; padding-top: 4px; }

/* ===== PROJEKTSIDA: GALLERI ===== */
.galleri { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1380px; margin: 0 auto; padding: 0 3% 60px; }
.galleri figure { margin: 0; overflow: hidden; cursor: pointer; }
.galleri figure.full { grid-column: 1 / -1; }
.galleri figure.full img { aspect-ratio: 21/9; }
.galleri img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; aspect-ratio: 3/2; }
.galleri figure:hover img { transform: scale(1.04); }

/* ===== PROJEKTSIDA: BLADDRA (föregående/nästa) ===== */
.bladdra { display: flex; justify-content: space-between; align-items: stretch; max-width: 1380px; margin: 0 auto; padding: 30px 3% 90px; gap: 24px; border-top: 1px solid var(--linje); }
.bladdra a { text-decoration: none; color: var(--text); max-width: 520px; flex: 1; display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: transparent; transition: all .3s; }
.bladdra a img { width: 150px; aspect-ratio: 845/684; object-fit: cover; display: block; outline: 1px solid var(--guld); outline-offset: -7px; transition: outline-offset .3s, transform .3s; }
.bladdra a:hover img { outline-offset: 0; transform: scale(1.03); }
.bladdra a .et { font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; color: var(--guld); display: block; margin-bottom: 12px; }
.bladdra a .titel { font-family: var(--eng); text-transform: uppercase; letter-spacing: 0.14em; font-size: 15px; line-height: 1.6; color: var(--text); transition: color .3s; display: block; }
.bladdra a:hover .titel { color: var(--guld); }
.bladdra a.prev { border-left: 2px solid var(--guld); }
.bladdra a.next { border-right: 2px solid var(--guld); text-align: right; flex-direction: row-reverse; }
.bladdra a.prev:hover { border-left: 10px solid var(--guld); background: #faf9f7; }
.bladdra a.next:hover { border-right: 10px solid var(--guld); background: #faf9f7; }

/* ===== MEDIA: MOBIL (max-width 900px) ===== */
@media (max-width: 900px) {
  /* Portfolio-grid: 1 kolumn */
  .pgrid { grid-template-columns: 1fr; }

  /* Tjänster: stackas vertikalt */
  .tj,
  .tj.rev { flex-direction: column; }
  .tj .img { min-height: 40vw; flex: none; width: 100%; }

  /* Om-sektionen: halvorna stackas */
  #om .tva { flex-direction: column; }
  #om .foto { min-height: 50vw; background-position: center; background-size: cover; }

  /* Omdömen: stackas */
  .ogrid { flex-direction: column; }

  /* Bladdra: stackas */
  .bladdra { flex-direction: column; }
  .bladdra a { max-width: 100%; }

  /* Nav → kompaktering (gap+strl); staplad header hanteras av <640px-blocket nedan */
  nav { gap: 18px; }
  nav a { font-size: 13px; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  /* FIX 1: säkerställ att sliders inte förblir tomma */
  .hero img.slide:first-child, .pslider img:first-child { opacity: 1; }
  /* FIX 4: ingen smooth scroll */
  html { scroll-behavior: auto; }
}

/* ===== MEDIA: STAPLAD HEADER (max-width 640px) ===== */
@media (max-width: 640px) {
  header { flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 12px; }
  header .logo { width: 143px; height: 34px; }
  header.scrolled .logo, header.kompakt .logo { width: 126px; height: 30px; }
  nav { gap: 14px; }
  nav a { font-size: 12px; letter-spacing: 0.14em; }
  .form .rad { flex-direction: column; }

  /* Footer: tre kolumner på samma rad, rubriker i linje, mer luft i kanterna */
  footer { padding-left: 7%; padding-right: 7%; }
  .frad { gap: clamp(16px, 5vw, 30px); align-items: flex-start; }
  .frad .et { font-size: 11px; letter-spacing: 0.12em; }
  .frad .v { font-size: 14px; white-space: nowrap; }
}