@font-face {
    font-family: 'CSMJ';
    src: url('./fonts/Chosun_Myeongjo.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CSGT'; 
    src: url('./fonts/Chosun_Gothic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

div#cover-blogs, div.offcanvas-body, div.tab-content, div#vicinity-list, div#lookup div.modal-body, div#pictorial div.modal-body, div#accordion-family, div#help figure.text-end, div#help div.accordion, div#interpretation div.modal-body, div#chatbot div.modal-body {
  font-family: 'CSMJ'
}

div.card-body p.text-end, small > span.text-primary, div#aboretum .card-body p.card-text, div.offcanvas button, p small span {
  font-family: var(--bs-body-font-family); 
}

body, div.modal, div.modal-dialog, div.offcanvas, div.collapse, div.offcanvas-body, input, textarea {
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Apply to the element you want to hide the scrollbar on */
.hide-scrollbar {
  /* **1. For Firefox** */
  scrollbar-width: none;
  
  /* **2. For Internet Explorer/Edge (older versions)** */
  -ms-overflow-style: none;
  
  /* Optional: Ensure scrolling is enabled (default is often 'auto') */
  overflow-x: scroll; /* Or overflow-y/overflow: scroll */
}

/* **3. For Chrome, Safari, and Opera (WebKit browsers)** */
/* Targets the actual scrollbar element */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* OR you can set width/height to 0 */
  /* width: 0; */ 
  /* height: 0; */
}

/* for sticking tab button on top */
ul.sticky-top {
  top: 1.98rem;
}

/* for sticking map on top */
div.sticky-top {
  top: 4.6rem;
}

/* adjust the speed of content collapsing when menu is clicked */ 
main > div.collapsing {
  transition: none;
  /* transition: height 0.15s ease; */
}

/* hide scorllbar of iframe for chrome, safari, opera */
iframe::-webkit-scrollbar {
  display: none;
}

/* hide scorllbar of iframe for Explorer and Edge */
iframe {
  -ms-overflow-style: none;
  height: calc(100vh - 6rem);
}

.badge {
  --bs-badge-font-size: 0.85em;
}

/* reponsive map for supiami */
.supiami-map {
  /* Set a base width, for example, 100% of its parent */
  width: 100%;
  aspect-ratio: 4 / 3; /* Example aspect ratio (width / height) */
  max-height: calc(100vh * 0.4);
  display: flex; /* To center content if needed */
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pictorial-content {
  text-indent: -0.3rem;
}

.pictorial-slider-progress {
  background: #ccc;
}

.pictorial-slider-progress-bar {
  background: #fd7e14;
  height: 2px;
  transition: width 400ms ease;
  width: 0;
}

.lookup-body {
  max-height: calc(100vh - 0.5rem - 7.2rem); 
}

.pictorial-body {
  height: calc(100vh - 0.5rem - 9.8rem); 
}

#chat-window h3 {
  font-size: 1.25rem !important;
}

#chat-window h4 {
  font-size: 1.20rem !important;
}

#chat-window {
    overflow-y: auto;
    background-color: #f8f9fa;
}
/* Smooth bubble styling */
.chat-bubble {
    max-width: 75%;
    border-radius: 15px;
}

@media (max-width: 576px) { /* small */
  .chatbot-body {
    min-height: calc(100vh * 0.8);
    max-height: calc(100vh * 0.87);
  }
}

@media (min-width: 576px) { /* small */
  .lookup-body {
    max-height: calc(100vh - 1.75rem - 8.5rem);
  }
  .pictorial-body {
    max-height: calc(100vh - 1.75rem - 11.2rem);
  }
  .chatbot-body {
    min-height: calc(100vh * 0.8);
    max-height: calc(100vh * 0.87);
  }
}

@media (min-width: 992px) { /* large */
  .pictorial-body {
    max-height: calc(100vh - 1.75rem - 11.2rem);
  }
  .chatbot-body {
    min-height: calc(100vh * 0.75);
    max-height: calc(100vh * 0.75);
  }
}