html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* > p {
  font-size: clamp(1rem, calc(0.5rem + 1vw), 1.2rem);
}
#main-section {
  background-color: #aba6a6;
  margin-top: 10%;
  margin-bottom: 20%;
}
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Sansation", sans-serif;
  box-sizing: border-box;
  background-color: #3b3b4f;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Kanit", sans-serif;
  margin-bottom: 20px;
}

a {
  text-decoration: none;
  color: inherit;
}

::-webkit-scrollbar {
  background-color: transparent;
  width: 0px;
}

.scroll-offset {
  scroll-margin-top: 200px;
}

.logo {
  height: 60px;
  margin-left: 10px;
}

.logo1 {
  height: 75px;
}

.topnav {
  overflow: hidden;
  background-color: whitesmoke;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px 5px #16161d;
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* Hide the links inside the navigation menu (except for logo/home) */
/* Animacija za otvaranje/zatvaranje burger menija */
#myLinks {
  display: flex;
  flex-direction: column;
  align-items: space-evenly;
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  transition: max-height 0.4s ease-out;
}

#myLinks.show {
  max-height: 350px; /* prilagodi visinu po potrebi */
  transition: max-height 0.4s ease-in;
}

.topnav a {
  color: whitesmoke;
  padding-top: 10px;
  padding-bottom: 14px;
  padding-right: 14px;
  padding-left: 0px;
  text-decoration: none;
  font-size: clamp(1.2rem, calc(0.5rem + 1vw), 1.4rem);
  display: block;
  color: #16161d;
}

.topnav a.icon {
  background: whitesmoke;
  display: block;
  position: absolute;
  font-size: 30px;
  margin-right: 5px;
  margin-top: 10px;
  margin-left: 0px;
  right: 0;
  top: 0;
}

#myLinks a {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px 2vw;
  margin: 10px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 97%;
}

#myLinks a:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: crimson;
  transition: 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.main {
  margin: 0;
  padding: 0;
}
.hero {
  height: 80vh;
  background: url("/drveni/media/pocetna.jpg") no-repeat center center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #16161d;
  position: relative;
}

#hero-content {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 100px;
  filter: drop-shadow(0 0 0.75rem white);
  padding: 20px;
  border-radius: 30px;
}

.hero img {
  height: 100px;
  margin-bottom: 20px;
  animation: fadeIn 2s ease-in-out;
}

.hero p {
  font-size: clamp(1.2rem, calc(0.5rem + 1vw), 1.5rem);
  margin-bottom: 20px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
  animation: fadeIn 2s ease-in-out;
}

.rezervacije {
  background: url("/drveni/media/rezervacija.jpg") no-repeat center center/cover;
  background-position: 46% 80%;
  padding: 30vh 20px;
  color: whitesmoke;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}
.rezervacije > div {
  padding: 10px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  filter: drop-shadow(0 0 0.75rem black);
  width: fit-content;
  align-self: center;
  justify-self: center;
}
.meni {
  background: url("/drveni/media/meni.jpg") no-repeat center center/cover;
  background-position-x: 80%;
  background-position-y: 40%;
  color: whitesmoke;
  padding: 30vh 20px;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);

  /* centriranje sadržaja vertikalno i horizontalno */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.meni p {
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
  text-align: center;
}

.meni button {
  margin: 0 auto;
  display: block;
}
/* From Uiverse.io by cssbuttons-io */
button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
  margin: 20px 0 0 34%;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(180, 56%, 62%) 0%,
    hsl(184, 41%, 43%) 8%,
    hsl(189, 57%, 29%) 92%,
    hsl(230, 93%, 11%) 100%
  );
}

.front {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(197, 54%, 49%);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

button:hover {
  filter: brightness(110%);
}

button:hover .front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

button:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

button:hover .shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

button:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

button:focus:not(:focus-visible) {
  outline: none;
}
.onama {
  background-image: url("/drveni/media/meni.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh; /* ili 60vh ako želiš kraću sekciju */
  padding: 10vh 20px;
  color: white;
  background-color: #abafb2;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);

  /* centriranje sadržaja vertikalno i horizontalno */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.onama > * {
  margin: 0;
  max-width: 900px;
}
.onama > div {
  padding: 10px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.459);
  filter: drop-shadow(0 0 0.75rem black);
  width: fit-content;
  align-self: center;
  justify-self: center;
  color: #ffffff;
}

@media (max-width: 768px) {
  .onama {
    padding: 8vh 16px;
    min-height: 50vh;
  }
}
.lokacija {
  background: url("/drveni/media/lokacija.jpg") no-repeat center center/cover;
  padding: 30vh 20px;
  color: whitesmoke;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
}

#lokacija > div {
  background-color: rgba(0, 0, 0, 0.7);
  filter: drop-shadow(0 0 0.75rem black);
  width: fit-content;
  align-self: center;
  justify-self: center;
  padding: 20px;
}

.footer {
  background-color: #16161d;
  color: whitesmoke;
  padding: 5vh 0 10vh 0;
  text-align: center;
  box-shadow: 0 0 10px 5px #16161d;
}
.footer-about {
  font-size: 18px;
  color: gainsboro;
}
.links-text {
  font-size: 18px;
  margin-bottom: 20px;
  color: crimson;
  font-style: none;
}
.footer-content {
  list-style-type: none;
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
}
.footer-links {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #aba6a6;
}
.spacer {
  height: 10vh;
}
section {
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02), 0px 5px 4px rgba(3, 7, 18, 0.03),
    0px 12px 9px rgba(3, 7, 18, 0.05), 0px 20px 15px rgba(3, 7, 18, 0.06),
    0px 32px 24px rgba(3, 7, 18, 0.08);
}
.contact-below {
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-below svg {
  height: 25px;
  fill: whitesmoke;
  transition: 0.3s;
}
.contact-social {
  padding: 5vh 0;
  background-image: url(/drveni/media/background.jpg);
  background-size: contain;
  box-shadow: inset 6px 6px 12px #2b2b2b, inset -6px -6px 12px #606060;
}
.social-buttons {
  box-shadow: 8px 8px 36px #2b2b2b, -8px -8px 36px #606060;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/drveni/media/foreground.jpg);
  background-size: contain;
  max-width: fit-content;
  padding: 15px 100px;
  border-radius: 5em;
}

.social-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 10px;
  background-color: #fff;
  box-shadow: 0px 0px 4px #00000027;
  transition: 0.3s;
}

.social-button:hover {
  background-color: #f2f2f2;
  box-shadow: 0px 0px 6px 3px #00000027;
}

.social-buttons svg {
  transition: 0.3s;
  height: 30px;
}

.facebook {
  background-color: #3b5998;
}

.facebook svg {
  fill: #f2f2f2;
}

.facebook:hover svg {
  fill: #3b5998;
}

.github {
  background-color: #333;
}

.github svg {
  width: 25px;
  height: 25px;
  fill: #f2f2f2;
}

.github:hover svg {
  fill: #333;
}

.linkedin {
  background-color: #0077b5;
}

.linkedin svg {
  fill: #f2f2f2;
}

.linkedin:hover svg {
  fill: #0077b5;
}

.instagram {
  background-color: #c13584;
}

.instagram svg {
  fill: #f2f2f2;
}

.instagram:hover svg {
  fill: #c13584;
}

#lokacija > div {
  background-color: none;
  filter: none;
  padding: 10px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lokacija-dugme {
  background-color: crimson;
  box-sizing: border-box;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px;

  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02), 0px 3px 4px rgba(3, 7, 18, 0.03),
    0px 8px 9px rgba(3, 7, 18, 0.05), 0px 13px 15px rgba(3, 7, 18, 0.06),
    0px 21px 24px rgba(3, 7, 18, 0.08);
}
.lokacija-dugme:hover {
  background-image: linear-gradient(45deg, #c8936b, whitesmoke);
  cursor: pointer;
  padding: 10px;
  color: #16161d;
  animation: fadeinbutton 0.5s;
}

@keyframes fadeinbutton {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 784px) {
  .meni {
    background: url("/drveni/media/meni.jpg");
  }
  .logo-main {
    height: clamp(15vw, calc(20vh + 2vw), 40vw);
  }
  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .footer-links {
    display: none;
  }
  .top-section p {
    font-size: 2rem;
    margin: 0 20px 0 20px;
  }
  .show > .footer {
    overflow: scroll;
  }
  .meni p {
    max-width: 600px;
    margin: 0 0 30px 0%;
  }
  .meni > * {
    margin: 0 0 10% 0;
  }
  button {
    margin: 20px 0 0 0%;
  }
  .onama {
    padding: 10vh 20px 50vh 20px;
  }

  .hero p {
    font-size: clamp(1.5rem, calc(0.5rem + 1vw), 2rem);
  }
  * > p {
    font-size: clamp(1.5rem, calc(0.5rem + 1vw), 2rem);
  }
  * > h2 {
    font-size: clamp(2rem, calc(1rem + 2vw), 3rem);
  }
  .hero,
  .rezervacije,
  .meni,
  .onama,
  .lokacija {
    background-size: cover !important;
    background-position: center !important;
    min-height: 40vh;
    padding: 8vh 8vw;
    box-sizing: border-box;
  }

  .hero img {
    height: 60px;
    margin-bottom: 12px;
  }

  .hero p,
  .rezervacije p,
  .meni p,
  .onama p,
  .lokacija p {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  .rezervacije > div,
  #lokacija > div {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .meni p {
    max-width: 100%;
    margin: 0 0 16px 0;
  }

  .onama {
    padding: 8vh 8vw 20vh 8vw;
    background-size: cover !important;
    background-position: center !important;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .spacer {
    height: 5vh;
  }

  .social-buttons {
    padding: 10px 10vw;
    border-radius: 3em;
    max-width: 100vw;
    gap: 12px;
  }

  .social-button {
    width: 40px;
    height: 40px;
    margin: 0 6px;
  }

  .social-buttons svg {
    height: 22px;
  }
}

.image-general {
  display: none;
  background-image: url(media/npk.jpg);
}

@media screen and (max-width: 500px) and (max-height: 500px) {
  .image-general {
    display: flex;
    height: 100vh;
    width: 100vw;
    animation: fadeIn 1s ease-in-out;
    background-size: cover;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
  }
}