:root {

    /* clr = color */
    --clr-bg: #f5f5f5;
    --clr-text: #413F45;
    --clr-hr: #BD1622;
    --clr-acc: #E6DCBF;

    /* ff = font family */
    --ff-family: 'Raleway', Helvetica, sans-serif;

    /* fs = font size */
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-body: 1.5rem;

    /* ls = letter spacing */
    --ls-generel: .05rem;

    /* lh = line height */
    --lh-generel: 1.3rem
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: var(--ls-general);
    line-height: var(--lh-generel);
    color: var(--clr-text);
    text-decoration: none;
    font-family: var(--ff-family);
}

body {
    background-color: var(--clr-bg);
}

/* ---------- HEADER + NAVBAR START ------------ */

/* Nav med button elementer... start */

/* .logo-img {
  height: 65px;
} */

/* .top-nav{
  display: grid;
  grid-template-columns: repeat(5, 150px);
  justify-content: space-around;
  align-items: center;
  grid-gap: 10px;
  height: 100px;
  text-align:center;
  font-family: "raleway", sans-serif;
  font-weight: 400;
  font-style: normal;
} */

/* .top-nav a{
  padding-top: 10px;
  transition: 0.4s;
  text-decoration: none;
  text-align:center;
  width: 100px;
} */

/* .navbar {
  color: #413f45;
  padding: 16px;
  font-size: 16px;
  border: none;
} */


/* .button:hover {
  background-color: #e6dcbf;
  border-radius: 35px;
  cursor: pointer;
} */


/* .button {
    color: #413f45;
    padding: 0 8px;
    font-size: 16px;
    height: 50px;
    border: none;
    background-color:#f5f5f5 ;
    font-family: "raleway", sans-serif;
    font-weight: 400;
    font-style: normal;
} */

/* Nav med button elementer... end */


/* Ny navbar start */

.top-nav {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  height: 80px;
}

.logo-wrapper,
.logo-wrapper a,
.login-wrapper,
.login-wrapper a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-img {
  width: 65px;
}

.login-icon {
  width: 40px;
  padding: 5px 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-link {
  padding: 5px 8px;
}

.nav-link:hover,
.login-icon:hover {
  background-color: var(--clr-acc);
  border-radius: 35px;
}

/* Ny navbar end */


div[data-hero-wrapper] {
  filter: opacity(50%);
}

img[data-hero-img] {
  width: 100%;
}

/* ---------- HEADER + NAVBAR END ------------ */

/* ---------- MAIN START ------------ */

main {
    text-align: center;

    /* TEST */

    /* background-image: url(../img/form-texture-1x.png);
    background-position: 0 400px;
    background-size: 100%;
    background-repeat: no-repeat; */
}

/* ---------- MAIN END ------------ */

/* ------------ GENEREL START ------------ */

p[data-body], h1[data-h1-forside], h2[data-h2-forside] {
    width: 75%;
    margin: 30px auto;
}

/* ---------- GENEREL END ------------ */


/*----------- SKJULT OVERLAY MÅLTID ----------------*/

div[data-overlay-maaltidskasse] {
  display: none;
  /* midlertidig width og height til der kommer content i */
  width: 100%;
  height: 150%;
  /* midlertidig width og height til der kommer content i */
  margin: 50px 100px;
  padding: 50px 100px;
}

/*----------- SKJULT OVERLAY MÅLTID ----------------*/


/* ------------OPSKRIFTER ----------- */

article {
  margin: 150px 0;
}

article[data-forside-opskrifter] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(250px,700px));
    justify-content: center;
    grid-template-areas: 
    "opskriftOverskrift opskriftOverskrift"
    "opskriftBody opskriftImg"
    "opskriftBtn opskriftBtn";
}

h2[data-h2-opskrifter] {
    grid-area: opskriftOverskrift;
}

p[data-p-opskrift] {
    grid-area: opskriftBody;
    align-self: center;
    text-align: start;
    width: 300px;
}

img[data-forside-ramen] {
    width: 400px;
    transform: rotate(180deg);
    clip-path: circle(50% at 50% 50%);
    grid-area: opskriftImg;
    justify-self: center;
}

a[data-btn-opskrift] {
    grid-area: opskriftBtn;
}


/*----------- SKJULT OVERLAY MÅLTID ----------------*/

div[data-overlay-opskrifter] {
  display: none;
  /* midlertidig width og height til der kommer content i */
  width: 100%;
  height: 150%;
  /* midlertidig width og height til der kommer content i */
  margin: 50px 100px;
  padding: 50px 100px;
}

/*----------- SKJULT OVERLAY MÅLTID ----------------*/

/* ------------- INFOGRAPHIC ------------- */

img[data-infographic-forside] {
    width: 50%;
    margin: 40px 0;
}

/* ------------- HR -------------- */

hr[data-hr] {
    border: 2px solid var(--clr-hr);
    width: 90%;
    margin: 30px auto;
}

/* ------------- FOOTER -------------- */

footer {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 300px));
    justify-content: space-between;
    grid-template-areas: 
    "contact . bowl"
    ". copyright .";
}

.contact-footer {
    grid-area: contact;
    margin-left: 15%;
}

.bowl-footer {
    grid-area: bowl;
    justify-self: end;
    margin-right: 15%;
}

.copy-footer {
    grid-area: copyright;
    text-align: center;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 15px 0;
}

img[data-contact-icon] {
    width: 35px;
}

img[data-footer-bowl] {
    width: 150px;
    /* transform: rotate(20deg); */
}

/* ------------------ BUTTON STYLING --------------------*/

/* div[data-btn] {
    width: 200px;
    padding: 5px 20px;
    border-radius: 35px;
    background-color: #413F45;
    color: white;
    margin: 40px auto;
    font-size: 20px;
    border: none;
    box-shadow: 10px black;
}

div[data-btn]:hover {
    cursor:pointer;
} */

a[data-btn] {
  display: block;
  width: 200px;
  padding: 5px 20px;
  border-radius: 35px;
  background-color: #413F45;
  color: white;
  margin: 100px auto;
  font-size: 20px;
  border: none;
  box-shadow: 10px black;
}

a[data-btn]:hover {
  /* Behøver ikke en cursor property da det nu er et <a> tag og ikke en div, den kunne måske godt skifte farve ved hover */
  cursor:pointer;
}


/* --------------- SLIDER STYLING ---------------- */

/* PRODUCTS */

  .maaltids-kasse-slider-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .slider-container {
    display: flex;
    align-items: center;
  }
  
  .product {
    position: relative;
    overflow: hidden;
    /* width var originalt 60% */
    width: 80%;
    margin: auto;
  }
  
  .product-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
  }
  
  .product-container::-webkit-scrollbar {
    display: none;
  }
  
  .product-card {
    flex: 0 0 auto;
    width: 33%;
  }
  
  .product-image {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 35px;
    width: 80%;
    /* margin er sat til 10 px, aå man kan se skyggen */
    /* margin var 4px originalt*/
    margin: 10px;
    /* Test - box-shadow og bag-color tilføjet */
    box-shadow: 0 1px 10px var(--clr-text);
    background-color: #fff;
  }
  
  .product-thumb {
    height: 300px;
    width: 250px;
  }
  
  .pre-btn,
  .nxt-btn {
    border: none;
    width: 9vw;
    height: 100%;
  
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 8;
    background: none;
  }
  
  .pre-btn {
    left: 0;
    transform: rotate(180deg);
  }
  
  .nxt-btn {
    right: 0;
  }
  
  .pre-btn img,
  .nxt-btn img {
    opacity: 0.2;
  }
  
  .pre-btn:hover img,
  .nxt-btn:hover img {
    opacity: 1;
  }
  

  /* Dette er nu tilføjet data attributten data-btn 
  og fremgår her, i CSS filen, som div[data-btn] */

  /* .alle-kasser-btn {
    padding: 5px 20px;
    border-radius: 35px;
    background-color: #413F45;
    color: white;
    margin: 40px;
    font-size: 20px;
    border: none;
    box-shadow: 10px black;
  } */