/*
 * Apply a consistent base style across all pages.  The body background uses the
 * same deep blue used on the Altai page.  We also remove default margins and
 * paddings, set a sans‑serif font, and hide overflowing content by default so
 * maps fill the viewport cleanly.  These rules ensure even pages like
 * index.html inherit the unified look without requiring inline styles.
 */
body{
    margin: 0;
    padding: 0;
    background-color: #004d9b;
    font-family: sans-serif;
    overflow: hidden;
}

img{
    width: 100%;
    height: auto;
    overflow: hidden;
}


svg{
    overflow: hidden;
    width: 100%;
    height: auto;
}


/*
 * The index page embeds a large SVG representing the entire region.  We want
 * this SVG to scale with the width of the viewport while maintaining its
 * aspect ratio.  By setting height to auto and allowing overflow, we avoid
 * cropping or hiding parts of the map.  These rules override the previous
 * fixed viewport sizing that caused the map to disappear.
 */
/*
 * Wrapper for the region map on the index page.  We deliberately omit fixed
 * width and height values to preserve the SVG’s intrinsic dimensions.  The map
 * may extend beyond the viewport, allowing the user to pan around without it
 * being scaled down on mobile devices.  The touch-action property disables
 * the browser’s native touch handling so our custom pan logic can take over.
 */
.svg-wrapper {
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}
.svg-wrapper svg {
    /* Use the SVG’s natural size; do not force scaling to the viewport */
    width: auto;
    height: auto;
    transform-origin: 0 0;
    transition: transform 0s;
}

/* Change cursor when dragging the map */
.svg-wrapper.grabbing {
    cursor: grabbing;
}



.altai {
    color: #ef88b5;
    transition: color .3s;

}
.altai:hover{
    color: #ce5589;
}





.samar{
    color: #6d91c6;
    transition: color .3s;

}
.samar:hover{
    color: #4570b1;
}






.kurchum{
    color: #009035;
    transition: color .3s;

}

.kurchum:hover{
    color:#035521;
}






.deep{
    color:  #e30016;
    transition: color .3s;
}

.deep:hover{
    color: #b90618;
}






.ridder{
    color:   #bf0072;
    transition: color .3s;
}

.ridder:hover{
    color:  #880554;
}






.ulansky{
    color:  #9edbf4;
    transition: color .3s;
}

.ulansky:hover{
    color:  #7ac1dd;
}





.kathon{
    color:  #009b99;
    transition: color .3s;
}
.kathon:hover{
    color: #047270;
}






.markakol{
    color: #dce281;
    transition: color .3s;
}
.markakol:hover{
    color: #b1b850;
}






.zaisan{
    color: #f07c00;
    transition: color .3s;
}
.zaisan:hover{
    color: #e6a561;
}






.akzhar{
    color: #FFCB00;
    transition: color .3s;
}
.akzhar:hover{
    color: #caa71b;
}




.shemonaiha{
    color: #7d4993;
    transition: color .3s;
}
.shemonaiha:hover{
    color: #67337e;
}




.ulken{
    color: #b1c900;
    transition: color .3s;
}
.ulken:hover{
    color: #9aad08;
}




.oskemen{
    color: #ffec00;
    transition: color .3s;
}
.oskemen:hover{
    color:  #85803f;
}






/* Курчум */




.maraldy{
    color: #009035;
    transition: color .3s;
}
/* .maraldy:hover{
    color:  #036427;
} */





.balykshy{
    color: #E30016;
    transition: color .3s;
}
/* .balykshy:hover{
    color:  #a80717;
} */




.kuigan{
    color: #ffec00;
    transition: color .3s;
}
/* .kuigan:hover{
    color:  #b3a707;
} */





.blue{
    color: #102a83;
    transition: color .3s;
}
/* .blue:hover{
    color:  #0a2066;
} */





.green{
    color: #a6c500;
    transition: color .3s;
}
/* .green:hover{
    color:  #5c6b09;
} */




.pink{
    color: #e30079;
    transition: color .3s;
}
/* .pink:hover{
    color:  #a5075b;
} */


.cyan{
    color: #009ee0;
    transition: color .3s;
}
/* .cyan:hover{
    color:  #076d99;
} */

/* ======================================================================
   Unified styling for the interactive map pages

   The following rules bring consistency across all of the region pages.
   Buttons and menus are styled to match the design used on the Altai
   example.  A consistent background, font, and container sizing are
   established here so individual pages no longer need to define them
   inline.  These rules are defined after the existing colour classes
   so they take precedence where appropriate.
   ====================================================================== */

/* Base page styles */
body {
  /* use the deep blue tone from the main map as the page background */
  background-color: #004d9b;
  font-family: sans-serif;
  overflow: hidden;
  /* Reset default margin and padding so pages fill the viewport without gaps */
  margin: 0;
  padding: 0;
}

/* Ensure the primary map container fills the viewport and allows panning */
#map-container {
  position: relative;
  /* Do not force a viewport-sized box; let the SVG retain its natural dimensions */
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

#map-container.grabbing {
  cursor: grabbing;
}

/* When embedding SVGs via <object>, this element is used */
#svgMap {
  /* Preserve the intrinsic dimensions of the embedded SVG.  Do not scale it to
     the container; allow panning to reveal off‑screen portions. */
  width: auto;
  height: auto;
  transform-origin: 0 0;
  transition: transform 0s;
}

/* Back button styling.  Support both #back-button (used by most pages)
   and #back-btn (used by the Altai page). */
#back-button,
#back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 4px;
  color: #004d9b;
  font-weight: bold;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

/* Menu toggle button */
#menu-toggle {
  position: fixed;
  top: 60px;
  left: 20px;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 8px 12px;
  border-radius: 4px;
  color: #004d9b;
  font-weight: bold;
  cursor: pointer;
}

/* The container for the list of PDF links.  Hidden by default */
#link-menu {
  position: fixed;
  top: 100px;
  left: 20px;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 4px;
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  color: #004d9b;
}

/* Remove bullets and spacing from the link list */
#link-menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Spacing between individual link items */
#link-menu li {
  margin: 4px 0;
}

/* Style for links inside the menu */
#link-menu a {
  color: #003e7e;
  text-decoration: underline;
}

#link-menu a:hover {
  text-decoration: none;
}

/* When a page toggles the .open class on the link menu,
   ensure the menu is shown.  Some pages use 'linkMenu.classList.toggle("open")' instead of
   directly adjusting the style property. */
#link-menu.open {
  display: block;
}