html {
	scroll-behavior: smooth;
	container-type: scroll-state;
  container-name: scroller;
}

.to-top {
	position: fixed;
	bottom: 23px;
	right: 23px;
	translate: 80px 0;
  transition: all 0.4s ease, border-color 0.4s ease;
}

@container scroller scroll-state(scrollable: top) {
  .to-top {
    translate: 0 0;
  }
}


.to-top {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	cursor: pointer;
}

.to-top img {
	width: 50px;
}

.to-top:hover {
	border-color: solid black;
}

/*bolded words in Tamil verses*/
.verse b {
    color: currentColor;
    font-weight: 600 !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


audio {
    display: block; /* Makes positioning easier */
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f1f1f1 !important;
}


.search-box p {
    display: flex;
    align-items: center;
    margin: 2px 0; /* tighter spacing between rows */
    flex-wrap: wrap;
}

.search-box label {
    min-width: 70px; /* keeps left alignment consistent */
    font-family: Montserrat, sans-serif;
    font-size: 1.0em;
    margin-right: 3px; /* tighter space between label and dropdown */
	margin-left: 10px; /* tighter space between label and dropdown */
}

.search-box select,
.search-box input[type="search"] {
    font-size: 1em;
    margin-right: 3px; /* reduce space between controls */
}

#tbSearch {
    font-family: "Tamil Bible", serif;
    font-size: 1.3em;
    width: 120px; /* smaller field for mobile */
    padding: 2px 4px;
}

.search-box input[type="submit"],
.search-box input[type="button"] {
    font-family: Montserrat, sans-serif;
    font-weight: bold;
    padding: 2px 6px;
    font-size: 0.9em;
    margin-right: 3px;
}

.ref {
    color: #0052cc;
    font-family: "Tamil Bible";
    font-size: 1.0em;
    font-weight: 100;
    text-decoration: none;
}

/* English Scripture reference wrapper and link */
span.eng-ref, span.eng-ref a.eng-ref-link {
    font-family: Montserrat, Segoe UI Semibold, sans-serif;  
    font-size: 0.9em;
    font-weight: 500 !important;  
    color: #0052cc !important; 
    text-decoration: none;
    -webkit-font-smoothing: antialiased;  
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale; 
}

/* Hover underline */
span.eng-ref a.eng-ref-link:hover {
    text-decoration: underline;
}

/* Slightly larger font on mobile screens */
@media (max-width: 768px) {
    span.eng-ref, span.eng-ref a.eng-ref-link {
        font-size: 0.95em;
    }
}