/* Import Google Fonts - Simplified to just Didact Gothic and Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Didact Gothic&display=swap');

/* Base Typography */
html {
  /* Remove scroll-behavior: smooth; */
}

body {
  margin: 0;
  font-family: 'Didact Gothic', sans-serif; /* Simple, clean font for body text */
  font-weight: 300; /* Lighter weight for body text */
  background-color: #111;
  color: #f5f5f5;
  overflow-x: hidden;
  line-height: 1.6;
  
  /* Remove these scroll-snapping properties:
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; */
}

/* Headers Typography - Now using Didact Gothic instead of Codystar */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Didact Gothic', sans-serif;
  font-weight: 700; /* Bold weight for headers */
  letter-spacing: 1px;
  margin-top: 0;
}

/* Adjust specific header sizes */
h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.8rem;
}

h3 {
  font-size: 2rem;
}

/* Links Typography */
a {
  font-family: 'Didact Gothic', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Navigation specific typography */
.nav-links a {
  font-family: 'Didact Gothic', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.2rem;
}

.logo a {
  font-family: 'Didact Gothic', sans-serif; /* Changed from Codystar to Didact Gothic */
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 2px;
}

/* CTA buttons */
.cta, button {
  font-family: 'Didact Gothic', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Product detail page adjustments */
.product-detail-info h1 {
  font-size: 3rem;
}

.product-detail-info h2 {
  font-size: 2.2rem;
}

/* Responsive typography adjustments */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  .logo a {
    font-size: 1.5rem;
  }
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem 2%; /* Use percentage for padding for nav itself */
  z-index: 1000;
  min-height: 8vh;
  border-bottom: 1px solid white;
}

.logo a {
  color: #f5f5f5;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5rem;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  list-style: none;
  width: 40%;
  padding: 0;
  margin: 0;
}

.nav-links a {
  color: #f5f5f5;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1px;
}

.nav-links li {
  opacity: 1;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background-color: #f5f5f5;
  margin: 5px;
  transition: all 0.3s ease;
}


/* General Section Styling (Outer Full-Width Wrapper) */
section {
  height: 100vh; /* Fixed height instead of min-height */
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  padding: 0; /* Remove padding that might affect height calculation */
  overflow-y: auto; /* Allow scrolling within sections if content is too tall */
}

/* Inner Content Container (Constrained Width and Centered) */
.content-container {
  width: 100%;
  max-width: 1000px; /* This is where the content width constraint now lives */
  margin: 0 auto;   /* Centers this container within the full-width section */
  padding: 0 2rem;  /* Horizontal padding for the content */
  box-sizing: border-box;
  text-align: center; /* Default text alignment for content within */
  /* If a section's content needs to be taller than the container,
     this container will grow. Flex properties on parent 'section' will center it. */
}

section h2 {
  margin-top: 0; /* Already centered by section's align-items: center if it's the first child of content-container */
  font-size: 2.5rem;
  margin-bottom: 1.5rem; /* Add some space below section titles */
}

/* Hero Section Specifics */
.hero {
  /* The background properties remain on .hero (the section tag) for full-width background */
  background: url('Bilder/cover_1.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  background-attachment: fixed;
  /* Padding on .hero itself is mostly vertical now, horizontal is on .content-container */
  padding-top: 8rem; /* Adjust as needed to push content down from nav */
  padding-bottom: 4rem;
}

.hero .content-container {
  /* Specific overrides for hero's content container if needed */
  /* For example, if you want hero text to be wider or narrower than other sections */
  /* text-align: center; is inherited */
}

.hero h1 {
  font-size: 3rem;
  margin: 0 0 1rem 0;
}

.hero p {
  font-family: 'Didact Gothic', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  font-weight: normal; /* Add this to ensure it's not using bold */
}

.cta {
  margin-top: 1rem;
  background: #fff;
  color: #000;
  padding: 0.8rem 1.5rem;
  border: none;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

/* Products Section */
#produkter .products-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%; /* Grid takes full width of its parent (.content-container) */
  /* max-width is now handled by .content-container */
  margin-top: 2rem;
}

#produkter .product {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: calc((100% - 3rem) / 3); /* (100% - 2 * gap) / 3 items */
  background-color: #1c1c1c;
  padding: 1.5rem;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
}

#produkter .product img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
}

#produkter .product .product-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

#produkter .product .product-info h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  color: #e0e0e0;
}

#produkter .product .product-info p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #b0b0b0;
}

#produkter .product .product-info h3 a {
  text-decoration: none;
  color: inherit; /* Inherit color from h3 */
  transition: color 0.3s ease;
}

#produkter .product .product-info h3 a:hover {
  color: #fff; /* Or a highlight color */
}

.product-read-more {
  display: inline-block;
  margin-top: 0.75rem;
  color: #8bf; /* A link color */
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
}

.product-read-more:hover {
  text-decoration: underline;
  color: #abdeff;
}

/* Funksjoner and Bruk Sections (Lists) */
#funksjoner ul,
#bruk ul {
  list-style: none;
  padding: 0;
  text-align: center; /* Align list items to the left for readability */
  display: inline-block; /* To allow text-align:center on parent .content-container to work for the ul block */
  margin-top: 1rem; /* Add some space above the list */
}

#funksjoner li,
#bruk li {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* Kontakt Section */
#kontakt p {
  margin: 0.5rem 0;
}

#kontakt a {
  color: #8bf;
}

/* Footer */
.footer {
  height: auto; /* Footer can be shorter */
  min-height: 10vh; /* But still take up reasonable space */
  scroll-snap-align: end; /* Snap to the end of the footer */
  text-align: center; /* This will center the .content-container if it's narrower */
  padding: 1rem 0; /* Vertical padding on the footer itself */
  background: #000;
  color: #aaa;
  font-size: 0.9rem;
  border-top: 1px solid gray;
  width: 100%; /* Ensure footer is full width */
}

.footer .content-container {
  /* .content-container rules (max-width, margin:auto, padding: 0 2rem) apply here too */
  /* text-align: center; is inherited */
}

/* --- Responsive Styles --- */
@media screen and (max-width: 992px) { /* Tablet and larger mobile */
  .content-container {
    /* max-width: 90%; /* Optionally make content slightly wider on tablets */
    /* padding: 0 1.5rem; /* Adjust horizontal padding */
  }

  #produkter .products-grid {
    flex-wrap: wrap;
    justify-content: space-around;
  }

  #produkter .product {
    flex-basis: calc((100% - 1.5rem) / 2); /* Two columns */
    margin-bottom: 1.5rem;
  }
}

@media screen and (max-width: 992px) { /* Changed from 768px to 992px */
  body {
    overflow-x: hidden;
  }

  .nav-links {
    position: absolute;
    right: 0px;
    height: calc(100vh - 8vh);
    top: 8vh;
    background-color: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 60%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
    padding-top: 5vh;
    box-shadow: -5px 0px 15px rgba(0,0,0,0.2);
  }

  .nav-links li {
    opacity: 0;
    margin: 1rem 0;
  }

  .nav-links.nav-active {
    transform: translateX(0%);
  }

  .hamburger {
    display: block;
  }

  .toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .toggle .line2 {
    opacity: 0;
  }
  .toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }

  /* Move these styles from the 768px media query to here if needed */
  section {
    padding: 4rem 0;
    background-attachment: scroll;
  }

  .content-container {
    padding: 0 1rem;
  }

  .hero {
    background-attachment: scroll;
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1.2rem;
  }

  section h2 {
    font-size: 2rem;
  }
}

/* Keyframes for Nav Link Fade-in Animation */
@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* --- Product Detail Page Styles --- */

/* General styling for the main content area of a product detail page */
.product-detail-page {
  /* This ensures the page content starts below the fixed navbar */
  /* We use a section inside, so section's padding will handle nav clearance */
}

.product-detail-section {
  min-height: calc(100vh - 8vh); /* Attempt to fill viewport height minus nav */
  /* padding-top and padding-bottom are inherited from general 'section' styles,
     which should be sufficient to clear the nav and provide spacing.
     Adjust if necessary. e.g., padding-top: 10vh; */
  display: flex; /* Already on section, ensures content-container is centered */
  align-items: flex-start; /* Align content container to the top of the section */
  padding-top: calc(8vh + 4rem); /* 8vh for nav + extra space */
  padding-bottom: 4rem;
}

.product-detail-section .content-container {
  text-align: left; /* Override general text-align:center for content-container */
  /* max-width can be larger for product detail pages if desired */
  /* max-width: 1100px; */
}

.product-detail-layout {
  display: flex;
  flex-direction: row;
  gap: 2.5rem; /* Space between image and info */
  align-items: flex-start; /* Align items to the top of their respective columns */
}

.product-detail-image {
  flex: 1 1 40%; /* Grow, shrink, basis: 40% of the width */
  max-width: 400px; /* Max width for the image container */
}

.product-detail-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.product-detail-info {
  flex: 1 1 60%; /* Grow, shrink, basis: 60% of the width */
}

.product-detail-info h1 {
  font-size: 2.8rem;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #f0f0f0;
}

.product-detail-info h2 {
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #e0e0e0;
  border-bottom: 1px solid #444;
  padding-bottom: 0.25rem;
}

.product-detail-info p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: #ccc;
}

.product-detail-info ul {
  list-style: disc; /* Use standard bullets for specs */
  margin-left: 1.5rem; /* Indent list */
  padding-left: 0.5rem;
  margin-bottom: 1.5rem;
  color: #bbb;
}

.product-detail-info ul li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.product-detail-cta {
  margin-top: 2rem;
  display: inline-block; /* To respect padding and margin */
}


/* Responsive adjustments for Product Detail Page */
@media screen and (max-width: 800px) { /* Adjust breakpoint as needed */
  .product-detail-layout {
    flex-direction: column; /* Stack image and info vertically */
    align-items: center; /* Center items when stacked */
  }

  .product-detail-image {
    flex-basis: auto; /* Reset flex-basis */
    width: 80%; /* Adjust width for stacked layout */
    max-width: 350px; /* Max width for image on mobile */
    margin-bottom: 2rem; /* Space below image when stacked */
  }

  .product-detail-info {
    flex-basis: auto; /* Reset flex-basis */
    width: 100%;
    text-align: center; /* Center text when stacked */
  }

  .product-detail-info h1 {
    font-size: 2.2rem;
  }
  .product-detail-info h2 {
    font-size: 1.5rem;
  }
  .product-detail-info p,
  .product-detail-info ul li {
    font-size: 1rem;
  }

  .product-detail-info ul {
    text-align: left; /* Keep list items left-aligned even if container is centered */
    display: inline-block; /* Allows centering of the ul block */
  }
}

/* Full-width background images for all sections */

/* General section background properties */
section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Add a semi-transparent overlay for better text readability */
section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Adjust opacity as needed */
  z-index: 0;
}

/* Ensure content appears above the overlay */
section .content-container {
  position: relative;
  z-index: 1;
}

/* Hero section - already has a background */
.hero {
  /* Existing background properties are fine */
  /* background: url('Bilder/IMG_5024.jpg') no-repeat center center; */
  /* background-size: cover; */
}

/* Oversikt section */
#oversikt {
  background-image: url('Bilder/2.jpg');
}

/* Funksjoner section */
#funksjoner {
  background-image: url('Bilder/3.jpg');
}

/* Produkter section */
#produkter {
  background-image: url('Bilder/produkter-bg.jpg');
}

/* Bruk section */
#bruk {
  background-image: url('Bilder/4.jpg');
}

/* Kontakt section */
#kontakt {
  background-image: url('Bilder/kontakt-bg.jpg');
}

/* Product detail pages */
.product-detail-section {
  background-image: url('Bilder/product-detail-bg.jpg');
}

/* Adjust overlay opacity for specific sections if needed */
#produkter::before {
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for product grid readability */
}

/* Footer doesn't need a background image, but we'll ensure it's styled consistently */
.footer {
  position: relative;
  background-color: #000; /* Keep solid background */
}
.footer a {
  color: #aaa; /* Footer link color */
  font-family: 'Roboto', sans-serif;
} 

/* Override section height and scroll behavior for product detail pages */
.product-detail-page section {
  height: auto; /* Override the fixed 100vh height */
  min-height: auto; /* Override the min-height constraint */
  scroll-snap-align: none; /* Disable scroll snapping */
  padding-top: 80px; /* Add specific padding to clear the navbar */
  overflow-y: visible; /* Allow content to flow naturally */
}

/* Ensure the product detail section has proper spacing */
.product-detail-section {
  padding: 100px 0 60px; /* Top padding to clear navbar, bottom for spacing */
}

/* Make sure the content container in product pages has proper spacing */
.product-detail-section .content-container {
  padding-top: 0; /* Reset any inherited padding */
}

/* Ensure the body doesn't enforce scroll snapping on product pages */
body.product-page {
  scroll-snap-type: none; /* Disable scroll snapping on product pages */
  height: auto; /* Allow natural height */
  overflow-y: auto; /* Allow natural scrolling */
}

/* Product detail page fixes */

/* Fix content being hidden under navbar */
.product-detail-page {
  padding-top: 80px; /* Add padding to the main wrapper to clear navbar */
}

.product-detail-section {
  height: auto !important; /* Force override any height constraints */
  min-height: auto !important; /* Force override any min-height */
  scroll-snap-align: none; /* Disable scroll snapping */
  padding: 40px 0 60px; /* Adjust padding (top, sides, bottom) */
}

/* Fix oversized footer */
.product-page .footer {
  height: auto !important; /* Override any height setting */
  min-height: auto !important; /* Override any min-height setting */
  padding: 10px 0; /* Reasonable padding for footer */
}

/* Ensure content containers have proper spacing */
.product-detail-section .content-container {
  padding: 0 2rem; /* Add horizontal padding */
  margin-top: 0; /* Reset any top margin */
}

/* Override any scroll-snap settings for product pages */
body.product-page {
  scroll-snap-type: none !important; /* Force disable scroll snapping */
  height: auto !important; /* Allow natural height */
  overflow-y: auto !important; /* Allow natural scrolling */
}

/* Ensure the navbar doesn't overlap content */
.product-page nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Complete removal of snapping for product pages */

/* Target the product page body specifically */
body.product-page {
  /* Reset all scroll-snap properties */
  scroll-snap-type: none !important;
  overflow-y: auto !important;
  height: auto !important;
}

/* Reset all section properties that affect snapping */
.product-page section,
.product-page .footer {
  scroll-snap-align: none !important;
  height: auto !important;
  min-height: auto !important;
}

/* Fix the spacing for product detail pages */
.product-detail-page {
  padding-top: 80px; /* Clear the navbar */
}

.product-detail-section {
  padding: 40px 0 60px; /* Comfortable spacing */
}

/* Ensure footer has appropriate size */
.product-page .footer {
  padding: 30px 0;
}

/* Modify the existing media query for mobile devices */
@media screen and (max-width: 768px) {
  /* Make products full width on mobile */
  #produkter .products-grid {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem; /* Add padding at the top to prevent cutoff */
  }

  #produkter .product {
    flex-basis: auto;
    width: 100%; /* Change from 90% to 100% for full width */
    max-width: 100%; /* Remove max-width constraint */
    margin-bottom: 2rem; /* Add bottom margin for spacing */
  }
  
  /* Fix for section padding to prevent content from being cut off */
  #produkter {
    padding-top: 6rem; /* Increase top padding to prevent cutoff */
    padding-bottom: 4rem;
  }
  
  /* Ensure the section has enough height for all content */
  section {
    min-height: 100vh; /* Use min-height instead of fixed height */
    height: auto; /* Allow section to grow with content */
  }
}

/* Add specific styling for the produkter section to ensure proper spacing */
#produkter .content-container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Ensure the section transitions properly */
@media screen and (max-width: 768px) {
  /* Adjust section heights and padding for mobile */
  section {
    padding: 60px 0; /* Increase overall padding */
  }
  
  /* Specific adjustment for produkter section */
  #produkter {
    padding-top: 80px; /* Extra padding at top to prevent cutoff */
  }
}