/* related to the styzlied historical marker page */

.kaushan-script-regular {
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
}

.markermap-wrapper {
  position: relative;
  width: 100%;
}

/* 2. Anchor text to the top inside of the container */
.markermap-overlay-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10; /* Ensures it sits above the map/hotspots */
  text-align: right;
  padding: 1.25rem 1rem;
  
  /* Semi-transparent gradient backdrop so text is always readable over the map art */
  background: rgba(0, 0, 0, 0) 100%;
  color: #ffffff;
  pointer-events: none; /* Allows clicks to pass through empty overlay space straight to the map/hotspots */
}

/* 3. Fluid responsive typography for the overlay */
.markermap-overlay-title h2 {
    font-size: clamp(1.1rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.markermap-overlay-title p {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    margin: 0;
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}


.rustic_map {
  width: fit-content;
  display: block;

  clip-path: polygon(
    2% 2%, 9% 4%, 17% 1%, 26% 3%, 35% 1%, 45% 4%,
    55% 2%, 65% 4%, 75% 1%, 85% 3%, 98% 2%,
    96% 12%, 99% 21%, 97% 31%, 99% 42%, 96% 52%,
    99% 63%, 97% 73%, 99% 84%, 96% 98%,
    87% 96%, 78% 99%, 68% 97%, 58% 99%, 48% 96%,
    38% 99%, 28% 97%, 18% 99%, 8% 96%, 2% 98%,
    4% 88%, 1% 78%, 3% 68%, 1% 57%, 4% 47%,
    1% 37%, 3% 27%, 1% 17%, 4% 9%
  );

  filter: drop-shadow(3px 4px 4px rgba(0,0,0,.25));
}

.history-marker {
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Your actual PNG */
.history-marker img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* Mobile Size: 40px (50% scale) and hide popovers completely */
@media (max-width: 768px) {
  .history-marker {
      width: 40px !important;
      height: 40px !important;
  }
  /* Target both Cloudimage's native class AND Bootstrap's injected popover and ELIMINATE then on mobile */
  .ci-hotspot-popover,
  .popover {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      z-index: -1 !important; /* Force it under the modal just in case */
  }
}
/* 1. Target ANY device where touch is the primary input (Phones, iPads, Touchscreens) */
@media (hover: none), (pointer: coarse) {
  .ci-hotspot-popover {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }
}

/* 2. Fallback for iPad Pros in landscape that aggressively pretend to be desktop Macs (up to 1366px) */
@media (max-width: 1366px) {
  .ci-hotspot-popover {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }
}

/* Ensure popover is beneath Bootstrap's modal (1055) and backdrop (1050) */
/* (This applies to desktops where the popover is still allowed to show) */
.ci-hotspot-popover {
  z-index: 1040 !important; 
}

/* Remove the library's pulse effect */
.history-marker.ci-hotspot-marker--pulse::before,
.history-marker.ci-hotspot-marker--pulse::after {
    display: none !important;
}


.history-marker:hover,
.history-marker:focus,
.history-marker:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.history-marker:hover::before,
.history-marker:hover::after,
.history-marker:focus::before,
.history-marker:focus::after {
  display: none !important;
}

.ci-hotspot-popover {
  visibility:hidden;
}


/* ===================== shrink hotspot icon/button on mobile ================================ */
@media (max-width: 768px) {
  .ci-hotspot-button {
    display: inline-block !important; 
    transform: scale(0.5) !important;
    transform-origin: center center !important;
  }
}

/* ===================== css for the modal popup ================================ */
.modal_subtitle {
    font-weight: bold;
    margin-top:12px;
}
.marker-modal-header {
    background-color:black !important;
}
.marker-modal-title {
    color:white !important; /*font*/
}

.floating-map-label {
    position: relative; 
    top: 20px;
}

/* css relating to modal column layout ================================================== */
/* Ensure image spans the column on all screen sizes */
/* Base for mobile: normal responsive image */
.marker-modal-img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .marker-modal-body {
    /* flex-basis: 0px completely ignores content size and locks to viewport */
    flex: 1 1 0px !important; 
    overflow: hidden;
  }
  
  /* Force the grid to take exactly 100% of the locked body height */
  .marker-modal-body > .container,
  .marker-modal-body .row {
    height: 100%;
  }
  
  .marker-modal-img-col {
    position: relative; /* Turns this column into a rigid bounding box */
  }
  
  .marker-modal-img {
    position: absolute; /* Removes image from document flow so it CANNOT stretch the row */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Safely apply Bootstrap's native gutters so it aligns with your text */
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-top: 1rem; 
    padding-bottom: 1rem;
    
    object-fit: contain;
  }
  
  .marker-modal-text-col {
    height: 100%;
    overflow-y: auto; 
  }
}