/* =========================================================
  TRE SNEKK – NYTT DESIGN (premium møbelsnekker)
  Drop-in for eksisterende HTML/klasser
========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Wood + stone palette */
  --bg: #f6f3ee;
  --surface: #ffffff;
  --surface-2: rgba(255,255,255,0.72);
  --text: #1c1917;
  --muted: #57534e;

  --wood: #8b5e34;      /* varm tre-tone */
  --wood-2: #a47148;
  --forest: #1f6a4a;    /* diskret "grønn" */
  --accent: #1a73e8;    /* kan brukes på review-header */

  --border: rgba(28,25,23,0.10);

  --radius: 16px;
  --radius-lg: 26px;

  --shadow-sm: 0 8px 22px rgba(28,25,23,0.08);
  --shadow-md: 0 18px 50px rgba(28,25,23,0.12);

  --ring: 0 0 0 4px rgba(139,94,52,0.18);

  --container: 1140px;
}

/* ---------- Base / reset ---------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  font-family: 'Poppins','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  margin: 0;
  color: var(--text);
  background:
   radial-gradient(900px 420px at 15% 0%, rgba(139,94,52,.12), transparent 55%),
   radial-gradient(900px 420px at 85% 0%, rgba(31,106,74,.10), transparent 55%),
   var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-underline-offset: 3px; }

h1,h2,h3,h4{ letter-spacing: -0.02em; }
p{ line-height: 1.7; color: var(--muted); }

/* Fokus (tastatur) */
:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(139,94,52,0.45);
}

/* ---------- Layout helpers ---------- */
.content{
  max-width: var(--container);
  margin: clamp(40px, 10vw, 76px) auto;
  padding: 0 clamp(12px, 5vw, 20px);
  text-align: center;
}

.content h2{
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  margin: 0 0 clamp(20px, 5vw, 34px) 0;
  color: var(--text);
}

/* =========================================================
  HEADER / NAV (premium)
========================================================= */
header{
  position: sticky;
  top: 0;
  z-index: 100;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 12px clamp(16px, 5vw, 120px);

  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(28,25,23,0.08);
  box-shadow: 0 8px 30px rgba(28,25,23,0.06);
}

header a{ text-decoration:none; }

header h1{
  margin:0;
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  color: var(--text);
}

.logo{
  height: clamp(32px, 8vw, 44px);
  width: auto;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(28,25,23,0.10);
}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: clamp(12px, 3vw, 22px);
}

nav a{
  text-decoration:none;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: rgba(28,25,23,0.85);
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}

nav a:hover,
nav a.active{
  background: rgba(139,94,52,0.10);
  color: var(--text);
  transform: translateY(-1px);
}

/* Mobil-knapp */
.menu-toggle{
  display:none;
  background: rgba(139,94,52,0.10);
  border: 1px solid rgba(28,25,23,0.10);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 22px;
  cursor:pointer;
}

/* =========================================================
  HERO (fotofront + treverksfølelse)
========================================================= */
.hero{
  position: relative;
  min-height: clamp(300px, 60vh, 550px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: clamp(60px, 15vw, 110px) clamp(16px, 5vw, 20px);

  background:
   linear-gradient(120deg, rgba(28,25,23,0.76), rgba(28,25,23,0.35)),
   url('bilder/møte-bilde.jpg') center/cover no-repeat;
}

.hero-content{
  max-width: 760px;
  width: 100%;
  z-index: 2;
}

.hero h2{
  margin: 0 0 14px 0;
  font-size: clamp(1.6rem, 4vw, 3.1rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0,0,0,0.45);
}

.hero p{
  margin: 0 0 clamp(16px, 5vw, 28px) 0;
  color: rgba(255,255,255,0.86);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  text-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.photo-credit{
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: rgba(255,255,255,0.80);
  font-size: 0.75rem;
  background: rgba(0,0,0,0.32);
  padding: 6px 10px;
  border-radius: 12px;
}

/* =========================================================
  BUTTONS (wood / premium)
========================================================= */
.btn{
  display:inline-block;
  padding: clamp(10px, 2vw, 12px) clamp(16px, 4vw, 22px);
  border-radius: 14px;
  text-decoration:none;
  font-weight: 700;
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: #fff;

  background: linear-gradient(135deg, var(--wood) 0%, var(--wood-2) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 30px rgba(139,94,52,0.25);

  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(139,94,52,0.32);
  filter: saturate(1.05);
}

.btn-tilbake{
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  box-shadow: 0 14px 30px rgba(28,25,23,0.18);
}

.knapp-rekke{
  display:flex;
  gap: clamp(8px, 2vw, 12px);
  margin-top: clamp(12px, 3vw, 18px);
  flex-wrap: wrap;
  justify-content: center;
}

.knapp-rekke .btn{ 
  flex: 1;
  min-width: 140px;
}

/* =========================================================
  GRID + CARDS (produkter / nyheter / team)
========================================================= */
.produkt-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 80vw, 290px), 1fr));
  gap: clamp(16px, 4vw, 26px);
}

.nyheter-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 80vw, 320px), 1fr));
  gap: clamp(16px, 4vw, 26px);
}

.produkt,
.nyhet,
.team-member,
.survey{
  background: var(--surface-2);
  border: 1px solid rgba(28,25,23,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.produkt,
.team-member{
  padding: clamp(12px, 3vw, 20px);
}

.produkt,
.nyhet,
.team-member{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.produkt:hover,
.nyhet:hover,
.team-member:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,0.88);
  border-color: rgba(139,94,52,0.22);
}

/* Produkter */
.produkt-link{
  text-decoration:none;
  color: inherit;
  display:block;
}

.produkt img{
  width: 88%;
  margin: 4px auto 14px auto;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(28,25,23,0.12);
}

.benk-img{
  height: 270px;
  object-fit: contain;
}

.pris{
  color: var(--forest);
  font-weight: 800;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
}

.stock, .status{
  margin-top: 10px;
  font-weight: 600;
  color: rgba(28,25,23,0.70);
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

/* Nyheter */
.nyhet{
  overflow:hidden;
  text-align:left;
}

.nyhet-bilde{
  width: 100%;
  height: clamp(150px, 40vw, 260px);
  object-fit: cover;
}

.nyhet-tekst{
  padding: 18px;
}

.nyhet h3{
  margin: 0 0 10px 0;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.dato{
  font-size: clamp(0.8rem, 1.5vw, 0.92em);
  color: rgba(28,25,23,0.55);
  margin-top: 10px;
}

/* =========================================================
  OM OSS + TEAM
========================================================= */
.omoss{
  max-width: 920px;
  margin: clamp(40px, 10vw, 76px) auto;
  padding: 0 clamp(12px, 5vw, 20px);
  text-align: left;
  line-height: 1.8;
}

.omoss h2{
  text-align:center;
}

.omoss ul{
  list-style:none;
  padding:0;
  margin: 0;
}

.omoss ul li{
  margin-bottom: 12px;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: rgba(28,25,23,0.78);
}

.team{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 80vw, 240px), 1fr));
  gap: clamp(14px, 4vw, 22px);
  justify-items:center;
  margin-top: 28px;
}

.team-member{
  width: 100%;
  max-width: 320px;
  text-align:center;
}

.team-member h4{
  margin: 6px 0;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.15rem);
}

.team-member p{
  margin: 6px 0;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

/* =========================================================
  KONTAKT
========================================================= */
.kontakt p{ font-size: clamp(0.95rem, 2vw, 1.06rem); }
.kontakt a{ color: var(--text); text-decoration:none; }
.kontakt a:hover{ text-decoration: underline; }

/* =========================================================
  REVIEW HEADER
========================================================= */
.review-header{
  background: linear-gradient(90deg, var(--accent) 0%, rgba(28,25,23,1) 100%);
  color: #fff;
  padding: clamp(20px, 5vw, 34px) clamp(16px, 5vw, 24px) clamp(16px, 5vw, 22px);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(28,25,23,0.22);
  margin: 40px auto 26px auto;
  max-width: 780px;
  text-align:center;
  border: 1px solid rgba(255,255,255,0.12);
}

.review-header h1{
  margin: 0 0 10px 0;
  font-size: clamp(1.6rem, 3.5vw, 2.7rem);
  font-weight: 900;
  letter-spacing: 0.5px;
}

.review-header p{
  margin:0;
  color: rgba(255,255,255,0.86);
  font-size: clamp(0.9rem, 2vw, 1rem);
}

/* =========================================================
  SURVEY (inputs + actions)
========================================================= */
.survey{
  text-align:left;
  max-width: 900px;
  margin: 40px auto;
  padding: clamp(14px, 5vw, 22px);
}

.survey label{
  display:block;
  font-weight:700;
  margin-bottom: 6px;
  color: rgba(28,25,23,0.88);
  font-size: clamp(0.9rem, 2vw, 1rem);
}

.survey .form-row{ margin-bottom: 14px; }

.survey input[type="text"],
.survey input[type="email"],
.survey textarea,
.modal-content input,
.modal-content textarea{
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(28,25,23,0.14);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.survey input:focus,
.survey textarea:focus{
  border-color: rgba(139,94,52,0.35);
  box-shadow: var(--ring);
}

.survey .actions{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.survey .small.muted{
  color: rgba(28,25,23,0.60);
  font-size: clamp(0.8rem, 1.5vw, 0.95em);
}

.survey .required{
  color: #dc2626;
  margin-left: 6px;
}

.survey-success{
  background: rgba(31,106,74,0.10);
  border: 1px solid rgba(31,106,74,0.18);
  padding: 18px;
  border-radius: 14px;
}

/* =========================================================
  PRODUKT-DETALJER + SLIDER + MODEL VIEWER
========================================================= */
.produkt-detaljer{
  display:flex;
  flex-wrap:wrap;
  gap: clamp(16px, 5vw, 26px);
  justify-content:right;
  align-items:flex-start;
  padding: 10px clamp(12px, 5vw, 0);
}

.produkt-info{
  max-width: 520px;
  text-align:left;
  flex: 1;
  min-width: 280px;
}

.produkt-info ul{
  list-style:none;
  padding-left: 0;
}

.produkt-info li{
  padding: 8px 0;
  border-bottom: 1px dashed rgba(28,25,23,0.14);
  color: rgba(28,25,23,0.78);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
}

.slider{
  position: relative;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-width: 280px;
}

.slides{
  position: relative;
  overflow:hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(28,25,23,0.10);
  box-shadow: var(--shadow-sm);
}

.slide{ display:none; }
.slide.active{ display:block; }

.produkt-bilde{
  width: 50%;
  height: clamp(500px, 50vw, 500px);
  object-fit: cover;
  background: rgba(255,255,255,0.90);
}

.egendefinert-img{
  object-fit: contain;
}

model-viewer{
  width: 100%;
  height: clamp(250px, 60vw, 480px);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.90);
}

/* slider arrows */
.prev, .next{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(36px, 8vw, 44px);
  height: clamp(36px, 8vw, 44px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(28,25,23,0.55);
  color: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(18px, 4vw, 24px);
  transition: background .18s ease, transform .18s ease;
}

.prev{ left: 12px; }
.next{ right: 12px; }

.prev:hover, .next:hover{
  background: rgba(28,25,23,0.72);
  transform: translateY(-50%) scale(1.03);
}

.dots{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(28,25,23,0.22);
  cursor:pointer;
}

.dot.active{ background: rgba(139,94,52,0.85); }

.image-wrap{ position: relative; display: inline-block; width:100%; }
.image-wrap .photo-credit{
  position:absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(28,25,23,0.60);
  color: #fff;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
}

/* =========================================================
  SPONSORER
========================================================= */
.sponsorer{
  background: rgba(255,255,255,0.65);
  border-top: 1px solid rgba(28,25,23,0.08);
  padding: clamp(40px, 10vw, 62px) clamp(12px, 5vw, 20px);
}

.sponsorer p{ margin: 10px 0 clamp(20px, 5vw, 36px) 0; }

.sponsor-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap: clamp(16px, 4vw, 26px);
}

.sponsor img{
  width: clamp(140px, 90vw, 210px);
  height:auto;
  border-radius: 16px;
  filter: grayscale(20%);
  opacity: 0.94;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
  box-shadow: 0 14px 44px rgba(28,25,23,0.10);
}

.sponsor img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}

/* =========================================================
  SLIDESHOW
========================================================= */
.slideshow{
  max-width: 1100px;
  margin: clamp(16px, 5vw, 26px) auto 0 auto;
  position: relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(28,25,23,0.10);
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,0.85);
}

.slideshow .slide img{
  width: 100%;
  height: clamp(200px, 60vw, 700px);
  object-fit: cover;
}

/* =========================================================
  HERO SLIDER
========================================================= */
.hero-slider{
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: clamp(250px, 60vw, 800px);
  margin: auto;
  overflow: hidden;
  border-radius: 16px;
}

.slide{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active{
  opacity: 1;
}

video {
  border: clamp(1px, 0.5vw, 2px) solid #333;
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  width: clamp(75%, 90vw, 90%);
  min-height: clamp(150px, 40vh, 300px);
}

/* =========================================================
  MODAL
========================================================= */
.modal{
  display:none;
  position:fixed;
  z-index: 1000;
  left:0; top:0;
  width:100%;
  height:100%;
  background: rgba(28,25,23,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-content{
  background: rgba(255,255,255,0.92);
  max-width: clamp(300px, 90vw, 440px);
  margin: clamp(20px, 10vh, 15%) auto;
  padding: clamp(14px, 4vw, 18px);
  border-radius: var(--radius);
  border: 1px solid rgba(28,25,23,0.10);
  box-shadow: var(--shadow-md);
}

.close{
  float:right;
  font-size: clamp(18px, 4vw, 24px);
  cursor:pointer;
  color: rgba(28,25,23,0.75);
}

/* =========================================================
  FOOTER
========================================================= */
footer{
  background: rgba(255,255,255,0.60);
  border-top: 1px solid rgba(28,25,23,0.08);
  color: rgba(28,25,23,0.68);
  text-align:center;
  padding: clamp(18px, 5vw, 26px) clamp(12px, 5vw, 20px);
  margin-top: clamp(50px, 10vw, 80px);
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

/* =========================================================
  RESPONSIVE
========================================================= */
@media (max-width: 1000px){
  header{ padding: 12px clamp(16px, 4vw, 60px); }
}

@media (max-width: 768px){
  .menu-toggle{ display:block; }

  header{
   position: sticky;
   flex-direction: row;
   justify-content: space-between;
   padding: 12px 16px;
  }

  nav.nav-menu{
   display:none;
   position:absolute;
   top: 68px;
   right: 14px;
   width: 200px;
   background: rgba(255,255,255,0.94);
   border: 1px solid rgba(28,25,23,0.10);
   border-radius: 18px;
   box-shadow: var(--shadow-md);
   padding: 10px;
   text-align:right;
  }

  nav.nav-menu.show{ display:block; }

  nav ul{
   flex-direction: column;
   gap: 8px;
  }

  nav a{
   display:block;
   padding: 12px;
   font-size: 0.95rem;
  }

  .hero{
   min-height: clamp(260px, 50vh, 400px);
   padding: clamp(50px, 10vw, 92px) 16px;
  }

  .nyheter-grid, .produkt-grid, .team{
   grid-template-columns: 1fr !important;
  }

  .slideshow .slide img{ height: clamp(200px, 50vw, 400px); }

  .produkt-bilde, model-viewer{ height: clamp(200px, 50vw, 350px); }
  .produkt-detaljer{ flex-direction: column; align-items:center; }
  
  .hero-slider{
   height: clamp(200px, 50vh, 500px);
  }
}







/* ...existing code... */

/* Responsiv video-container */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio for mobil */
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Desktop-størrelse (PC): Override for skjermer bredere enn 768px */
@media (min-width: 768px) {
  .video-container {
    width: 960px;
    height: 515px;
    padding-bottom: 0; /* Fjern padding for fast størrelse */
  }
}

/* ...existing code... */