/* === Menu end-line fix overrides (applied globally) === */
nav li:last-child,
.menu li:last-child,
.nav li:last-child,
.header-menu li:last-child,
nav ul > li:last-child,
header nav ul > li:last-child,
.navbar ul > li:last-child {
  border-right: none !important;
  border-left: none !important;
}

/* Hide any separator pseudo-element on the last item */
nav li:last-child::after,
.menu li:last-child::after,
.nav li:last-child::after,
.header-menu li:last-child::after,
nav ul > li:last-child::after,
header nav ul > li:last-child::after,
.navbar ul > li:last-child::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0 !important;
}
/* === End overrides === */


/* === v101: Center Tools/Alati and its submenu items in responsive menu === */
@media (max-width: 860px){
  .nav-dropdown{
    width: 100%;
  }
  .nav-dropdown > .has-caret{
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .nav-dropdown .nav-menu{
    width: 100%;
    text-align: center;
  }
  .nav-dropdown .nav-sub{
    display: block;
    margin: 4px auto;
    text-align: center;
  }
}
/* === end v101 === */


/* === v102: Ensure mobile menu is fully scrollable & language switcher visible === */
@media (max-width: 899.98px){
  header.menu-open #site-menu{
    max-height: calc(100vh - var(--header-h) - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep dropdown menus within the panel flow on mobile (safety) */
  .nav-dropdown .nav-menu{
    position: static !important;
    width: 100%;
  }
}
/* === end v102 === */


/* === v103: Style language switcher with a square/boxed look === */
.lang-switch, .lang-switch a, .lang-switch button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border:1px solid var(--accent);
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  text-decoration:none;
  transition: all .2s ease;
}
.lang-switch:hover, .lang-switch a:hover, .lang-switch button:hover{
  background: rgba(255,255,255,0.12);
  color:#fff;
}
/* Ensure spacing inside responsive menu */
@media (max-width: 899.98px){
  .lang-switch{ width:100%; text-align:center; margin-top:8px; }
}
/* === end v103 === */


/* === v103: Language switcher boxed style === */
header .lang-switch{
  display: inline-block;
  padding: 6px 12px !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px; /* soft square */
  text-decoration: none;
  line-height: 1.1;
  background: transparent;
  color: var(--text) !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
header .lang-switch:hover,
header .lang-switch:focus-visible{
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  box-shadow: 0 0 12px rgba(0, 246, 255, 0.35);
  text-shadow: 0 0 6px rgba(0, 246, 255, 0.4);
}
@media (max-width: 899.98px){
  /* keep it centered nicely in the mobile panel */
  header .lang-switch{ margin: 6px auto 0; display: inline-block; }
}
/* === end v103 === */


/* === v104: Persist header — fix disappearing after scroll === */
/* Some ancestors can break position:sticky (overflow/transform). Force fixed instead. */
header.sticky{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 200000 !important; /* above content & effects */
  background: var(--bg, rgba(10,12,20,.98)); /* keep header solid */
}

/* Ensure page content never hides under the fixed header */
main{ padding-top: var(--header-h) !important; }

/* Mobile menu panel already accounts for header height; keep it below header */
@media (max-width: 899.98px){
  #site-menu{
    top: calc(var(--header-h) + 8px) !important;
  }
}
/* === end v104 === */


/* === v105: Balance content spacing below header === */
/* Ensure consistent padding so content is not too close to the sticky header */
main, .content, body > section:first-of-type{
  padding-top: calc(var(--header-h) + 40px) !important;
}

/* On mobile, give a bit more breathing room below header */
@media (max-width: 899.98px){
  main, .content, body > section:first-of-type{
    padding-top: calc(var(--header-h) + 24px) !important;
  }
}
/* === end v105 === */


/* === v105: Consistent top spacing below fixed header (desktop + mobile) === */
/* Footer uses ~40px vertical padding; mirror a similar feel at the top. */
:root{ --content-top-gap: 40px; }
@media (max-width: 899.98px){
  :root{ --content-top-gap: 48px; } /* a tad extra on small screens */
}

/* Ensure the main content sits comfortably below the fixed header */
main{
  padding-top: calc(var(--header-h) + var(--content-top-gap)) !important;
}

/* Avoid unexpected collapsed margins on the very first section */
.section:first-of-type, section:first-of-type{
  margin-top: 0 !important;
  padding-top: min(2vh, 16px); /* tiny cushion inside the first section */
}
/* === end v105 === */


/* === v106: Refine language switcher button in responsive menu === */
@media (max-width: 899.98px){
  header .lang-switch{
    display: inline-block !important;
    width: auto !important;
    padding: 6px 12px !important;
    margin: 12px auto 0 !important;
    border-radius: 10px !important;
  }
}
/* === end v106 === */


/* === v106: Compact language switcher on mobile (match desktop) === */
@media (max-width: 899.98px){
  header .lang-switch{
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    align-self: center !important;
    padding: 6px 12px !important;   /* same as desktop */
    margin: 8px auto 0 !important;  /* centered inside panel */
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Prevent generic mobile nav rules from stretching it */
  #site-menu a.lang-switch{
    display: inline-flex !important;
  }
}
/* === end v106 === */



body{
  /* Dark top -> transparent -> show site background */
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.75) 15%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0) 45%) ,
              var(--site-bg, url('/assets/img/bg-texture.jpg')) no-repeat center top / cover;
  background-attachment: fixed;
  background-color: #000; /* fallback */
}
/* Ensure sections remain transparent to let blend show */
main, section, .section{
  background: transparent !important;
}
/* === end v107 === */

/* === v109: Full-page background (Option 1) === */
/* Apply the textured/nice background to the entire page, not just lower half */
body{
  background: var(--site-bg, url('/assets/img/bg-texture.jpg')) no-repeat center top / cover;
  background-attachment: fixed;
  background-color: #000; /* fallback */
}
main, section, .section{
  background: transparent !important;
}
/* === end v109 === */


/* === v110: Show background layers on home pages only === */
/* Only when .bg-layers exists (home pages), let it be visible behind content */
body:has(.bg-layers){
  background: transparent !important; /* reveal .bg-layers visuals */
}
/* Keep the layer in the back */
.bg-layers{ z-index: -1; pointer-events: none; }
/* Sections transparent so the layered bg is visible */
body:has(.bg-layers) main, 
body:has(.bg-layers) section, 
body:has(.bg-layers) .section{
  background: transparent !important;
}
/* === end v110 === */


/* === v112: Global dark box style for cards (match home page look) === */
.card, .card.pad{
  background: color-mix(in oklab, var(--panel, #0b0f1c) 92%, #0000) !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.4) !important;
}
/* === end v112 === */


/* === v112: Global card look to match home page === */
.card{
  background: var(--card) !important;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  padding: 24px !important;
}
.card.pad{
  background: color-mix(in oklab, var(--panel, #0b0f1c) 88%, transparent) !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 16px !important;
  padding: 20px !important;
}
/* Subtle glass hover for interactive cards (optional, gentle) */
.card a:hover, .card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,.45) !important;
  transition: box-shadow .2s ease;
}
/* === end v112 === */


/* === v113: Symmetrical bottom spacing on responsive === */
@media (max-width: 899.98px){
  main{
    padding-bottom: var(--content-top-gap) !important;
  }
}
/* === end v113 === */