/*
 Theme Name: GeneratePress Child
 Theme URI: https://generatepress.com/
 Description: A child theme for GeneratePress.
 Author: Tory McBroom
 Author URI: STEMCalculators.com
 Template: generatepress
 Version: 1.0.0
*/

h2 {
	font-size: 32px
}
h3 {
	font-size: 28px
}
ol, ul {
    margin: 0 0 1.5em 2em;
}

/* Math Styling */
math, mrow, mi, mo, mn, mfrac {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
math {
	margin-bottom: 1rem;
}
math miv {
	font-style: italic;
	margin:5px
}
math mn, math mi {
	font-style: italic;
	margin:2px
}

/* Spacing utilities */
.mb-0 {
	margin-bottom:0;
}
.mb-1 {
	margin-bottom:.25rem;
}
.mb-3 {
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

/* Containers */
.separate-containers .inside-article {
    padding: 15px 40px;
}

/* Header */
.inside-header {
    padding: 15px 40px;
}

/* Contact Form Honey Pot */
.visually-hidden {
    position: absolute;
    left: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.size-hidden {
    height: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 1.063rem;
    background-color: #fff;
    margin-bottom: 0;
    padding: 20px 40px
}
.category .breadcrumbs {
    padding: 0 0 20px 0
}
.breadcrumbs a {
    color: #0073aa;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs div[itemprop="itemListElement"] {
    display: inline;
}

/* Homepage */
.calc-cat-button {
	background-color: inherit;
	transition: filter 0.3s ease, transform 0.3s ease;
}
.calc-cat-button:hover {
	filter: brightness(1.1);
}
.calc-cat-button a:hover {
	color: #fff
}
.home-slogan .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.home-slogan .wp-block-image img {
    height: auto;
    flex-shrink: 0; 
}
.home-slogan p {
    margin: 0;
}
.site-main .home-slogan  .wp-block-group__inner-container {
    padding: 0 0 40px 0;
}
.home-slogan .wp-block-image .alignleft {
	display:flex;
	margin:0;
	width:50px
}
.home-slogan p {
	font-weight:500
}
.homepage-all-posts .wp-block-columns {
    gap: 10px;
}

/* categories */
.category h2.entry-title {
	font-size: 24px
}
.category div.entry-summary {
	margin-top: 0.5em;
}
.separate-containers .page-header {
    padding: 20px 40px;
}
.category .entry-title a {
    color: var(--accent);
}
.site-main article.post {
	margin-bottom:0
}

/* Download App Page */
#pwa-install-button { 
	padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    border-radius: 25px;
    width: 100%;
    max-width: 250px;
}
.page-id-149 .wp-block-image .alignleft {
    margin: .25em 1em .25em 0;
}
.app-name {
	margin-bottom: 0;
}
.app-quick-description {
	font-size: 16px;
    color: #595959;
}

/* Calculator Styling */
.card {
  background-color: #f8f9fa; /* Light gray background */
  border: 1px solid #ddd;
  border-radius: .25rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.card-body {
  padding: 1rem;
}

.card-header h1 {
  font-size: 1.25rem;
  font-weight: 500;
}
.card-header {
  padding: .75rem 1.25rem;
  background-color: #e9ecef;
  border-bottom: 1px solid #ddd;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  font-weight: 500;
  text-align: center;	
}

.form-label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 500;
}

.form-control {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.stem-calculator input[type="text"],
.stem-calculator input[type="number"],
.stem-calculator textarea,
.stem-calculator select {
    background-color: #fff
}
.stem-calculator .visual-rep {
	text-align: center;
}
.stem-calculator .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.stem-calculator .input-group input.form-control,
.stem-calculator .input-group select.form-control {
    flex: 1;
    margin-right: 10px;
    border-radius: 0;
    padding: 10px 15px;
    max-width: 100%;
}
.stem-calculator .input-group select.unit-selector,
.stem-calculator .input-group select.output-unit-selector,
.stem-calculator .input-group select.calculation-type-selector {
    flex: 0 0 150px; /* Adjust the width as needed */
    max-width: 150px;
}
.btn {
  display: inline-block;
  width: 100%;
  padding: .5rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  background-color: #0d6efd;
  border: 1px solid #0d6efd;
  border-radius: .25rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.result-container {
  margin-top: 1rem;
}
.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.bg-light {
  background-color: #f8f9fa;
}
.favorite-wrapper {
    text-align: center; /* Center-align the button */
    display: block; /* Ensure the button is treated as a block element for centering */
	margin-top: 15px
}
.favorite-heart {
    display: inline-flex; /* Inline-flex ensures it stays inline but aligns content inside */
    align-items: center; /* Vertically center heart and text */
    gap: 8px; /* Space between heart and text */
    background: none; /* Remove default button background */
    border: none; /* Remove button border */
    cursor: pointer; /* Pointer cursor for better UX */
    font-size: 16px; /* Adjust font size */
    color: #333; /* Default text color */
    text-align: center; /* Ensures button content is centered */
}
.favorite-heart .heart-icon {
    font-size: 20px; /* Larger size for the heart icon */
}
button.favorite-heart:hover {
    color: #0073aa; /* Optional: Hover effect */
	background-color: unset;
}
button.favorite-heart:focus {
	color:#333;
	background-color: unset;
}

/* Favorites Page */
.favorites-table {
    width: 100%;
    border-collapse: collapse; /* Remove space between table cells */
}
.favorites-table td {
    padding: 10px;
    vertical-align: middle;
}
.favorites-table td:first-child {
    text-align: left; /* Align title to the left */
}
.favorites-table td:last-child {
    text-align: center; /* Center the trash can */
}
.favorites-table td {
    border-bottom: 1px solid #ddd; /* Add border for rows */
}
.favorites-table td:not(:last-child) {
    border-right: none; /* Remove right border for title cell */
}
.favorites-table td:last-child {
    border-left: none; /* Remove left border for trash can cell */
	text-align:right
}
#loginform label {
    display: block;
    margin-bottom: 3px;
}
.dragging-helper {
    border: 1px solid #ddd; /* Match your table's border style */
    background-color: #fff; /* Optional: Match table row background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for better visibility */
}
.dragging-helper td {
    border-top: 1px solid #ddd; /* Ensure top border is visible */
    border-left: 1px solid #ddd; /* Ensure left border is visible */
}
#favorites-info {
    width: 100%;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 40px;
}

/* General Form Styling */
.auth-form .auth-form-inner {
    display: flex;
    flex-direction: column;
}
.auth-form .form-group {
    margin-bottom: 1em;
}
.auth-form .form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.auth-form #loginform p {
    font-weight: bold;
	margin-bottom: 1em;
}
.auth-form #loginform p label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
}
.auth-form .form-input,
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"] {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.auth-form .form-error {
    color: red;
    font-size: 0.9em;
    margin-top: 0.5em;
}
.auth-form .form-button,
.auth-form input[type="submit"] {
    padding: 0.75em 1.5em;
    font-size: 1em;
    color: #fff;
    background-color: #0073aa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: block;
}
.auth-form .form-button:hover,
.auth-form input[type="submit"]:hover {
    background-color: #005d8b;
}
.auth-form .form-link,
.auth-form a {
    color: #0073aa;
}
.auth-form .form-link:hover,
.auth-form a:hover {
    text-decoration: underline;
}

/* Footer */
.footer-bar p {
	margin-bottom: 0
}

@media (max-width: 910px) {
	.site-content {
        flex-direction: column;
    }
    .container .site-content .content-area {
        width: auto;
    }
	.is-left-sidebar.sidebar, .is-right-sidebar.sidebar {
        width: auto;
        order: initial;
    }
    #main {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 782px) {
	.homepage-all-posts .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 15px;
    }
	.homepage-all-posts :where(.wp-block-columns) {
		margin-bottom: 10px;
	}
}

@media (max-width: 768px) {
    .site-logo img {
        width: 180px;
        height: auto
    }
	
}

@media (max-width: 600px) {
    .stem-calculator .input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .stem-calculator .input-group input.form-control {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .stem-calculator .input-group select.unit-selector,
    .stem-calculator .input-group select.output-unit-selector,
    .stem-calculator .input-group select.calculation-type-selector {
        flex: 1;
        max-width: 100%;
    }
}