* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('/fonts/roboto-slab-v35-latin-300.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('/fonts/roboto-slab-v35-latin-400.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/* martel-300 - devanagari */
@font-face {
  font-display: swap;
  font-family: 'Martel';
  font-style: normal;
  font-weight: 300;
  src: local('☺'), url('/fonts/martel-v11-devanagari-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* martel 400 - devanagari */
@font-face {
  font-display: swap;
  font-family: 'Martel';
  font-style: normal;
  font-weight: 400;
  src: local('☺'), url('/fonts/martel-v11-devanagari-400.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-devanagari-300 - devanagari */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif Devanagari';
  font-style: normal;
  font-weight: 300;
  /* src: url('/fonts/noto-serif-devanagari-v33-devanagari-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  src: local('☺'), url('/fonts/noto-serif-devanagari-v33-devanagari-300.woff2') format('woff2');
}

/* noto-serif-devanagari-regular - devanagari */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Serif Devanagari';
  font-style: normal;
  font-weight: 400;
  /* src: url('/fonts/noto-serif-devanagari-v33-devanagari-400.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  src: local('☺'), url('/fonts/noto-serif-devanagari-v33-devanagari-400.woff2') format('woff2');
}

body {
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  line-height: 1.5;
  color: #666666;

  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the body takes at least the full viewport height */
  user-select: none; /* disable text selection */
  font-size: 18px;
}

/*
 * for changing font size
 */
.font-controls {
  display: flex;
  align-items: flex-end; /* align items at the bottom */

  gap: 10px;             /* Optional: spacing between buttons */
}

.font-controls a {
  margin-right: 1em;
  text-decoration: none;
  color: white;
  cursor: pointer;
  line-height: 0;
  display: inline-block;

  line-height: 1;
}

.font-controls a.active {
  font-weight: bold;
  color: #f4a261;
}

.left-group {
  display: flex;
  align-items: center;
  /*gap: 10px;*/
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #698FB0;
  padding: 20px 20px 10px 10px; /* 20px 20px 10px 10px; */
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 60px;
  margin-top: auto; /* Push the navbar to the bottom */
  font-weight: 300;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-size: 18px;

  display: block;
  width: 100%;
  height: 100%;
}

.nav-links li a:hover {
  color: #f4a261;
}

.nav-links li a.active {
  color: #f4a261;
}

/*** vert menu ***/
.sk-vert-menu {
  position: absolute; /* Take it out of normal flow */
  top: 60px; /* Adjust as needed */
  left: 0px; /* Adjust as needed */
  width: 100%;
  height: calc(100vh - 60px);
  /*background-color: rgba(0, 0, 0, 0.7); Semi-transparent background */
  /*background-color: rgb(129, 165, 177);*/
  background-color: white;
  color: white;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  font-size: 16px;
  z-index: 1000; /* Ensure it is on top */
  display: none; /* Hidden initially */
}

.link-container {
  display: flex; /* Enable flexbox */
  flex-direction: column; /* Arrange the children (links) vertically */
  width: 200px; /* Set the width of the container */
  margin: 0 auto; /* Center the container */
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.link-container hr {
  width: calc(100% - 20px);
  border: none;
  height: 1px;
  background-color: #ccc;
  transform: scaleY(0.5);
  transform-origin: top;
}

/* Style for each link */
.link-container a {
  display: block; /* Make the link a block-level element */
  /* margin-bottom: 10px; Add space between links */
  padding: 10px;
  /*background-color: #4CAF50;*/
  color: black;
  text-decoration: none;
  text-align: left;
  width: 100%; /* Ensure the link fills the container width */
}

a.sk-vert-menu-item {
  color: #f4a261;
}

/* Hover effect for the links
.link-container a:hover {
  background-color: #45a049;
}
*/

.sk-vert-menu.active {
  display: flex;
}

#sk-vert-menu {
  display: none;
}

/*** end vert menu ***/

/* Extra Compact Hamburger Button */
.hamburger-btn {
  display: none;
  width: 20px;
  height: 14px;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  float: right;
  z-index: 2;
  margin: 10px;
}

.hamburger-btn .bar {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
  left: 0;
  transition: all 0.3s ease;
}

.hamburger-btn .bar:nth-child(1) {
  top: 0;
}

.hamburger-btn .bar:nth-child(2) {
  top: 6px;
}

.hamburger-btn .bar:nth-child(3) {
  top: 12px;
}

/* X Transformation (centered and neat) */
.hamburger-btn.open .bar:nth-child(1) {
  transform: rotate(45deg);
  top: 6px;
}

.hamburger-btn.open .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.open .bar:nth-child(3) {
  transform: rotate(-45deg);
  top: 6px;
}
/** end new hamburger */

/* Main content */
main {
  padding: 10px;
  text-align: left;
  flex-grow: 1; /* Ensure the main content fills the remaining space */
  /* color: #4B2E2A; Dark Brown for readable text */
  /*background-color: #f3f3f6;*/
}

/* Footer */
footer {
  background-color: #698FB0;
  color: white;
  text-align: center;
  padding: 8px 0px 0px 0px;
}

.footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.copyright {
  font-size: 18px;
  padding: 0px 0px 5px 0px;
  /* opacity: 0.7; */
}

.colored-heading {
  color: #3498DB;
}

h3 {
  color: #666666; /*#434343;*/
  font-weight: 400;
}

@media (max-width: 768px) {
  .navbar {
    padding: 20px 20px 10px 10px; /* 10px 20px 10px 10px; */
    height: 60px;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #4c9ed9;
    flex-direction: column;
    padding: 15px;
    width: 200px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
  }

  .nav-links.active {
    max-height: 500px;
    opacity: 1;
  }

  .hamburger-btn {
    display: block;
  }

  .sk-vert-menu {
    display: none;
  }
}

.my-ul, .my-ol {
  padding-left: 40px;
  margin-bottom: 1em; /* optional: gives space after the list */
}

/* text stretched in one line and centered */
.stretched_center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.url-no-underline {
  text-decoration: none; /* Removes the underline */
  color: inherit; /* Inherits the text color from the parent */
}

.url-no-underline:hover {
  color: #ff7e5f;
}

/* for numbered list items, e.g used in vocabulary */
.num-list {
  line-height: 2.5;
}

/* for a used in numbered lists, e.g used in vocabulary */
.a-no-deco {
  text-decoration: none;
  color: inherit;
}

.a-no-deco:hover {
  color: #ff7e5f; /* Custom hover color */
}

.sanskrit {
  font-family: 'Martel';
  font-weight: 300;
  line-height: 1.5;
  color: black; /*#717171;*/
}

.tooltip-container {
  cursor: pointer;
}

.tooltip {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: black;
      color: white;
      padding: 12px 16px;
      border-radius: 6px;
      max-width: 90vw;
      width: auto;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: break-word;
      text-align: left;
      line-height: 1.5;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: 1000;
}

.tooltip.active {
  visibility: visible;
  opacity: 1;
}

/*
.hover-text {
  position: relative;
  transition: color 0.3s ease;
}
*/

/* Change text color when hovering */
.hover-text:hover {
  color: red; /* Change text color to red when hovered */
}

/* used in Gita pages */
.gita-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 8px; /* Spacing between columns */
}

.gita-grid-item {
  background-color: #eff2f2; /* #f8f9f9 */
  color: #34495e;
  padding: 8px;
  text-align: left;
  border-radius: 8px;
}

.gita-grid-item-rhs {
  background-color: #e6f2ff; /* #f8f9f9 */
  color: #34495e;
  padding: 8px;
  text-align: left;
  border-radius: 8px;
}

.line_spacing_1p5 {
  line-height: 1.5;
}
/* Responsive: Stack columns when the screen width is less than 768px */
@media (max-width: 768px) {
  .gita-grid-container {
      grid-template-columns: 1fr; /* Single column layout */
  }
}

/*
 * for a floating window; I use this to show
 * chandamama disclaimer among other things
 */
.hover-container {
  position: relative;
  display: inline-block;
}

.hover-trigger {
  text-decoration: none;
  cursor: pointer;
}

.floating-window {
  display: none;
  position: absolute;
  top: 2.5em;
  left: 0;
  width: 400px;
  background-color: #f9f9f9;
  border: 1px solid #aaa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 1000;
  font-size: 1rem;
  border-radius: 8px;
}

.floating-window-centered {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  background-color: #f9f9f9;
  border: 1px solid #aaa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 1001;
  font-size: 1rem;
  border-radius: 8px;
}

.floating-window-centered.visible {
  display: block;
}

.hover-container:hover .floating-window {
  display: block;
}

/*
 * for breadcrumbs
 */
.breadcrumb {
  font-size: 15px;
  margin: 10px 0px 0px 0px;
  overflow-x: auto;
  white-space: nowrap;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0px 0px 0px 10px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: ">"; /* or "/" */
  /*margin: 0 0.5em;*/
  padding: 0px 5px 0px 0px;
  color: #999;
}

.breadcrumb a {
  text-decoration: none;
  color: #0077cc;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.tiny-font {
  font-size: 12px;
}

/*
 * for gear icon settings
 */
.font-controls a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
  cursor: pointer;
  line-height: 1.0;
}

.float-image {
  float: left; /* or right */
  margin: 0px 10px 0px 0px;
  width: 200px;
  border-radius: 10px;
}