* {
    box-sizing: border-box;
}
body,html {
  margin: 0;
  padding: 0;
width: 100%;
 position: relative;
 font-family: var(--font-family);
 overflow-x: hidden;
}




:root {
    --primary-color: #7c933c;
    --secondary-color: #b2d84a;
    --darker-color: #5E7422;
    --link-color: rgb(4, 4, 4) ;

--font-family: "Comic Sans MS", "Comic Sans", cursive;
--second--font-family: georgia, serif;

}
/* .navnar {
    background-color: aquamarine;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
} */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* buttton styling time to not get ugly ass buttons */
#menuToggle {
background-color: var(--secondary-color);
margin: 10px var(--darker-color);
border: 2px solid var(--darker-color);
cursor: pointer;
display: inline-block;
font-weight: 700;

 font-size: 30px;
 margin: 0
}

#menuToggle:hover {
  transform: scale(1.1);
  transition: all 0.3s ease;
}



.firstslide {
    display: block;
    /* margin-left: 50px; 
    margin-top: 20px;   */
    border-radius: 15px; /* Optional: makes the dog pic look 'softer' */
}

.row {
    margin-top: 50px; /* Pushes the dog/text columns down away from the big main image */
    display: flex;    /* Better than 'float' for modern sites */
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}








/* Navbar Wrapper */
.navbar-wrapper {
 
  display: flex;
  justify-content: space-between;
  position: fixed;


top: 0;
  width: 100%;
  height: 70px;         /* Forces the 'red thing' to stay this size */
  padding: 0 20px;      /* Vertical padding 0, Horizontal 20px */
  background-color: var(--darker-color);
  display: flex;
  align-items: center;  /* Keeps buttons centered inside the 70px bar */
  justify-content: space-between;
  position: fixed;
  z-index: 999;
  overflow: visible; /* Important for dropdowns to show outside the navbar */


    /* grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid; */

}

.dropdown-list {
/* max-height: 0;
overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background-color: #927517;
    width: 100px;
    display: flex;
   flex-direction: column;
    z-index: 800;
    position: absolute; */
 



max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
  background-color: #463c1c;
  width: 170px;       /* Made it a bit wider for links */
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;          /* Positions it exactly at the bottom of the red bar */
  left: 0;
  z-index: 1001;

}

/* When JS adds this class, the menu expands */
  .dropdown-list.is-open {
    max-height: 300px;   
         /* Large enough to fit all links */
  }

.nav-links {
    list-style: none;
    margin: 0;
    padding-left: 3px;
    
    display: flex;         /* Makes children stay side-by-side */

    
     flex-direction: column;   /* Forces horizontal layout */
    justify-content: center; /* Centers links in the middle */
    gap: 10px;            /* Space between Hjem, Om meg, etc. */

display: flex;
background-color:var(--secondary-color);


  }

  
a:link {
  text-decoration: none; /* Remove default underline */
  color: var(--link-color);

}

.nav-links li {
    margin: 0;   
    padding: 5px;
    padding-bottom: 3px;
        border-left: 3px solid var(--primary-color);

color: var(--link-color);
     border-bottom: 3px solid var(--primary-color);
     font-family: var(--second--font-family);

}

/* 3. Link styling */
.nav-links a {
  color: var(--link-color);

    font-size: 2.5rem;
    text-decoration: solid;
    display: inline-block; /* Essential for padding to work */
}

.nav-links a:hover {
  color: #d17a00;
}



/* Menu Button */
.menu-button {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 20px;
    text-transform: uppercase;

    
  }

.nav-logo {
width: 120px;         /* Make this as big as you want! */
  height: 120px;        /* Keeping it square/circle */
  border-radius: 50%;   /* Makes it a nice circle */
  object-fit: cover;    /* Prevents the logo from stretching weirdly */
  border: 4px solid var(--primary-color);
  background-color: var(--darker-color);

  
}

.prosjekt-knapp {
    position: relative;
    text-align: left;
    z-index: 900;

background-color: var(--secondary-color);
margin: 10px var(--darker-color);
border: 2px solid var(--darker-color);
cursor: pointer;
display: inline-block;
font-weight: 700;

 font-size: 25px;

font-family: var(--second--font-family);

 margin: 0;   
    padding: 5px;
    padding-bottom: 3px;

}

hr {
  border: none; /* Removes the default 3D border effect */
  height: 12px;  /* Sets the initial thickness */
  background-color: gray; /* Sets a default color */
}

.prosjekt-knapp:hover{


  transform: scale(1.1);
  transition: all 0.3s ease;

}

.prosjekt-knapp a:hover {
   font-weight: 1000px;
}


/* .meny-button::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #e51f1f;
} */

.content {
  transition: max-height 0.6s ease-out; /* This creates the sliding effect */
  background-color: var(--primary-color); /* Optional: style as needed */

position: relative; 
  /* Remove max-height: 10% from here, it's strangling your menu */
  display: flex;
  flex-direction: column;

  /* height: 100%; */
}





/*  flex og overwlow på de to kolimne */
/* -----------------------*/

.mainimage {
  background-image: url("src/bilder/Frontpagedog4.webp");
  
  /* 1. Crucial for full width/height */
  width: 100%;
  height: 100vh; /* Changed from 100% to 100vh to fill the screen height */
  
  /* 2. Positioning */
  /* background-position: center; */
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-size: 100% auto;
  
  /* 3. The Culprits - REMOVE OR CHANGE THESE: */
  border: none;      /* Removed border */
  padding: 0;        /* Changed from 50px to 0 */
  
  /* 4. Keep your effects */
  display: block; 

background-position: center 40%; /* Moves the focus of the image further down */

}

@media screen and (max-width: 768px) {
  .mainimage {
    height: 40vh; /* Shorter image area on phones */
    background-position: center; 
  }
  .firstslide {
    /* float: left; */
  }
}
@media screen and (max-width: 390px) {
  .mainimage {
    height: 30vh; /* Shorter image area on phones */
    background-position: center; 
  }
}


header {
    background-color: #f4f3f3;
    opacity: 0.7;
  text-align: center;
    font-weight: bold;

position: absolute;
    width: 400px;
    height: 150px;
    padding: 10px 5px;
right: 0%;
top: 47%;
font-family: var(--second--font-family);

}

@media screen {
  header {
    position: relative; /* Put it back in the normal flow so it doesn't overlap */
    width: 100%;
    height: auto;
    top: 0;
    right: 0;
    padding: 20px;
  }
  
}



.img {
    object-fit: cover;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}


h1 {
    font-size: 50px;
    font-weight: 700;
    color: rgb(16, 51, 7);
    text-shadow: 2px 2px 4px #63b76e;
}

nav {
    background-color: none;
    overflow: hidden;      
             background-color: bisque;
}


main {
    display: flex;
    flex-direction: column;
    background-color: var(--primary-color);
margin-top: 70px;

  }

.column {
    /* float: left; */
    /* width: 50%; */
    height: auto; 
    min-width: 300px;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    padding: 10px;
    flex: 1; /* Makes both columns equal width automatically */
  
background-color: var(--darker-color);
}







  

h2{
   position: relative;
  margin: 0;
  padding: 0;
  font-size: var(--font-size);
  font-weight: 400;
  text-align: center;
  font-style: normal;
  color: aquamarine;
  text-shadow: -1px 0 #5E7422, 0 1px #5E7422, 1px 0 #5E7422, 0 -1px #5E7422, -8px 8px #5E7422, -7px 7px #5E7422, -6px 6px #5E7422, -5px 5px #5E7422, -4px 4px #5E7422, -3px 3px #5E7422, -2px 2px #5E7422, -1px 1px #5E7422;
  align-self: center;
  font-size: 25px;
}



/* row:after {
    content: "";
    display: table;
    clear: both;
} */

footer {
    background-color: var(--darker-color);
    opacity: 0.7;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    width: 100%;
    height: 400px;
    max-height: 400px;
}




/* PASTED FROM AI, inprotent check out if this shi work, media screen query */

/* --- Mobile Styling (Screens smaller than 768px) --- */
@media screen and (max-width: 768px) {
  


  /* 2. Fix the sliding dog image for small screens */
  .firstslide {
    width: 100% !important; /* Make dog fit phone width */
    max-width: 100%;       /* Keep it from getting too huge */
    display: block;
    margin: 0 auto;        /* Center it */
    transform: none !important; /* Animations can be messy on mobile, maybe disable or simplify */
  }

  /* 3. Fix the Header (Welcome text) */
  header {
    position: relative; /* Put it back in the normal flow so it doesn't overlap */
    width: 100%;
    height: auto;
    top: 0;
    right: 0;
    padding: 20px;
  }

  h1 {
    font-size: 30px; /* Smaller text for smaller screens */
  }

  /* 4. Navbar adjustments */
  .nav-logo {
    width: 60px;  /* Smaller logo on mobile */
    height: 60px;
  }

  .navbar-wrapper {
    padding: 0 10px;
  }
}

/* column:nth-child(3) {
    background-color: var(--secondary-color);
    position: absolute;
    width: 600px;
    height: 100%;
}  */