/* Reset + global */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Aboreto", cursive;
  font-size: clamp(12px, 1.2vw, 20px);  /* Fluid font size */
  line-height: 1;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* no scrollbars */
  text-transform: none;
  background-color: #d9d9d9; /* A standard, very light gray (or use #EEE) */
}
body {
    /* Set the default text color to dark gray */
    color: #555555; /* A standard dark gray */
}
p, h1, h2, h3, h4, .text, .block p {
    color: inherit; /* This ensures all text elements use the body's color: #333333 */
}
a {
    color:inherit; /* You may want to keep links black or change them to a dark blue/gray */
}

/* Navbar */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20; /* above slideshow */
  padding-top: clamp(20px, 3vw, 30px); /* Fluid padding */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  text-transform: uppercase;
}

.div-bar {
  padding-left: clamp(40px, 5vw, 80px); /* Fluid padding */
  padding-right: clamp(40px, 5vw, 80px);
  flex: 1;
}

.nav-links {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: clamp(6px, 1vw, 12px); /* Fluid gap */
}

/* explicit placement of each nav item:
   allow text to flow by spanning multiple columns */
.nav-links > li:nth-child(1) { grid-column: 1 / span 3; justify-self: start; }
.nav-links > li:nth-child(2) { grid-column: 5 / span 3; justify-self: start; }
.nav-links > li:nth-child(3) { grid-column: 9 / span 2; justify-self: start; }
.nav-links > li:nth-child(4) { grid-column: 11 / span 2; justify-self: end; }

.nav-links a {
  color: inherit;
  text-decoration: none;
  font-size: clamp(12px, 1.2vw, 20px);  /* Fluid font size */
  letter-spacing: clamp(0.5px, 0.1vw, 1px); /* Fluid letter spacing */
  transition: color 0.3s;
}
.nav-links a:hover,
.nav-links a:focus { color: rgb(117,117,117); } 

/* Language toggle button */
.lang-toggle {
  position: fixed;   /* stick to viewport */
  bottom: clamp(20px, 3vw, 30px);      /* Fluid positioning */
  left: clamp(20px, 3vw, 30px);        /* Fluid positioning */
  cursor: pointer;
  font-size: clamp(12px, 1vw, 16px); /* Fluid font size */
  background: rgba(255,255,255,0.6);
  padding: clamp(5px, 0.8vw, 6px) clamp(8px, 1.2vw, 12px); /* Fluid padding */
  border-radius: clamp(6px, 1vw, 8px); /* Fluid border radius */
  user-select: none;
  z-index: 30;
  transition: background 0.3s;
}
.lang-toggle:hover {
  background: rgba(255,255,255,0.9);
}


/* Slideshow container */
.slideshow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
}



@media screen and (max-width: 767px) {
    
    /* --------------------------------------
       1. PADDING AND VERTICAL SPACING (Unified)
       -------------------------------------- */
    .navbar {
      z-index: 20; /* The navbar is here */
      }
    /* Navbar wrapper defines the content start/end horizontal line */
    .div-bar {
        padding-left: 10px; 
        padding-right: 10px;
    }

    /* --------------------------------------
       2. NAVBAR LINKS (Removing padding for precise alignment)
       -------------------------------------- */

    .nav-links {
        grid-template-columns: repeat(24, 1fr);
        gap: 0;
    }
    .nav-links > li:nth-child(1) { grid-column: 1 / span 7; justify-self: start; } 
    .nav-links > li:nth-child(2) { grid-column: 9 / span 5; justify-self: start; }
    .nav-links > li:nth-child(3) { grid-column: 14 / span 6; justify-self: start; } 
    .nav-links > li:nth-child(4) { grid-column: 24 / span 4; justify-self: end; } 

    .nav-links a {
        font-size: 12px;
        letter-spacing: 0.2px;
        white-space: nowrap; 
        /* FIX: REMOVING ALL PADDING ensures the link text starts exactly at the grid line */
        padding-left: 0; 
        padding-right: 0;
        display: inline-block;
    }
  }

  @media screen and (max-width: 365px) {
    .nav-links a {
    font-size: 10px;
    }
  }