/* index page styles */

/*  Bootstrap's btn-lg class is designed to make buttons larger and does not have responsive variants, so I need to manually override the button style for smaller screens. */
/* this is for the Lookup button.	
/* Media query for small devices (phones) */
@media (max-width: 576px) {
	.btn-lg {
		padding: .375rem .75rem; /* standard padding for regular btn */
		font-size: 1rem; /* standard font size for regular btn */
		line-height: 1.5; /* standard line height for regular btn */
		border-radius: .25rem; /* standard border radius for regular btn */
	}
}



	/* main page: search by keyword, genre, etc. */
	.disabled-search {
		color: grey;
		pointer-events: none;
		cursor: default;
		text-decoration: none;
		opacity: 0.5; /* 50% opacity */
	}


/* Bootstrap font size utility classes arent working so use CSS on the tagline below. */
/* tagline = The OPEN Standard Book Number on main page. */
/* Default style for small devices (phones) */
.tagline {
	font-size: 16px; /* 16px for phones */
}

/* Media query for large devices */
@media (min-width: 992px) {
	.tagline {
		font-size: 20px; /* larger font size for large screens */
	}
}


/* In the Enter OSBN: input box, make the entire number fit on phones. */
@media (max-width: 576px) {
    .inputval-sm-12 {
        font-size: 16px; /* or whatever size you prefer */
    }
}	

					
		/* SMALL CARD STYLES */
		.card-link { text-decoration:none; }

/*
 * decided to use a placeholder image instead.
	.placeholder-box {
		width: 380px; 
		height: 400px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px; 
	}
*/

	/* SMALL CARD STYLES */
		/* https://www.geeksforgeeks.org/how-to-write-dt-and-dd-element-on-the-same-line-using-css/ */
		.sm-card-biblio > dt { 
			float: left; 
			clear: left;
			display:none; /* we will remove this for the big detail card */
		} 
  
		.sm-card-biblio > dt::after { 
			content: ":";
			margin-right:7px; /* space between : and dd */
		}
		
		.sm-card-biblio > dd::before { 
			content: "\2022"; /* unicode for bullet char */
			margin-right:7px; /* space between : and dd */

		} 
		.sm-card-biblio > dd { 
			margin: 0px; 
			/* padding-bottom: 0.4em; */ /* can this be set with bootstrap? lh-lg, base, sm YES! */
			font-size: 1em;
		} 	


	/* LARGE CARD STYLES */
		/* https://www.geeksforgeeks.org/how-to-write-dt-and-dd-element-on-the-same-line-using-css/ */
		.lg-card-biblio > dt { 
			float: left; 
			clear: left;
			font-weight:normal;
		} 
  
		.lg-card-biblio > dt::after { 
			content: ":";
			margin-right:7px; /* space between : and dd */
		}
		
		.lg-card-biblio > dd::before { 
			/*content: "\2022";*/ /* unicode for bullet char */
			margin-right:7px; /* space between : and dd */

		} 
		.lg-card-biblio > dd { 
			margin: 0px; 
			/* padding-bottom: 0.4em; */ /* can this be set with bootstrap? lh-lg, base, sm YES! */
			font-size: 1em;
		} 	


	/* LARGE CARD STYLES */
/* Custom CSS */
@media (max-width: 576px) {
	.biblio-sm-09 {
		font-size: 0.9em; /* $book_detail['osbn'] in large card */
	}
}