/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

:root {
	--brand-color-blue-1:#004482;
	--brand-color-blue-2:#01599c;
	--brand-color-blue-3:#002f53;
	--site-button-padding:12px 24px;
	--site-border-width:1px solid black;
}
select {
  background-color: darkgray; /* Desired background color for the main select box */
  color: white;               /* Text color */
  border: 1px solid #ccc;    /* Optional: customize the border */
  padding: 5px;              /* Optional: adjust padding */
}
/* Margins */
.my-2 {
	margin-top:2%;
}
.my-5 {
	margin-top:5%;
}

/* Fonts and Colors */
.smallest-font {
	font-size:0.95rem;
}
.h1-hero {
	font-size:clamp(2rem,3vw,5rem) !important;
	color:var(--brand-color-blue-1);
}
.h2-hero {
	font-size:clamp(1.5rem,2.5vw,3rem) !important;
	text-transform:capitalize;
}
.brand-blue-1 {
	color:var(--brand-color-blue-1);
}
.text-center {
	text-align:center;
}
.text-capitalize {
	text-transform:capitalize;
}
.text-uppercase {
	text-transform:uppercase;
}
.product_subtitle {
	font-size:clamp(1.5rem,2.5vw,2.5rem)
}
/* Flex and Grid */

.site-flex {
	display:flex;
	gap:2%;
}
.site-flex-wrap {
	flex-wrap:wrap;
}
.site-flex-justify-center {
	justify-content:center;
}

.site-flex-align-center {
	align-items:center;
}
.site-flex-column {
	flex-direction:column;
}

.site-grid {
	display:grid;
	gap:2%;
}
.site-grid-responsive {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.site-grid-column-2 {
	grid-template-columns: repeat(2,1fr);
}

.site-grid-column-3 {
	grid-template-columns: repeat(3,1fr);
}
.site-grid-column-1-2 {
	grid-template-columns: 1fr 2fr;
}
.product-inner .woocommerce-badge.forthcoming-badge {
	position:absolute;
	top:0;
	left:0;
}
.product-inner .woocommerce-LoopProduct-link img {
	width:100%;
}
@media (max-width:996px) {
	.site-grid-column-1-2 {
		grid-template-columns:1fr;
	}
}
.site-caution-blue {
	padding:3%;
	border-radius:20px;
	background:white;
	border-left:5px solid var(--brand-color-blue-2);
	margin-bottom:10%;
	color:var(--brand-color-blue-1);
	
}
/* WooCommerce */
.woocommerce.content-full-width div.product div.summary {
	background:white;
	padding:3%;
	border-radius:20px;
}
/* Styling for Forthcoming/Disabled Button */
.forthcoming-disabled {
    /* Visually dim the button */
    opacity: 0.6 !important;
    
    /* Change the cursor to indicate it's not clickable */
    cursor: not-allowed !important; 
    
    /* Ensure it doesn't change color on hover/active */
    pointer-events: none;
}

/* For themes that use a hover effect on the main button class */
.button.forthcoming-disabled:hover,
.single_add_to_cart_button.forthcoming-disabled:hover {
    /* Keep background/text color the same on hover */
    background-color: inherit !important; 
    color: inherit !important;
}
/*Buttons */

.site-primary-btn {
	padding:var(--site-button-padding);
	background:var(--brand-color-blue-1);
	color:white;
	text-transform:capitalize;
	width:clamp(300px,100%,350px);
	border-radius:20px;
}
.site-primary-btn:hover {
	background:var(--brand-color-blue-2);
}
.site-primary-btn i {
	margin-left:2%;
}
.button-secondary {
	padding:6px 12px;
	border:none;
}

/*Containers */
.site-container {
	max-width:1200px;
	margin:auto;
}
.site-sub-container {
	width:clamp(300px,100%,600px);
	margin:auto;
}
.site-section {
	padding-top:2%;
	padding-bottom:2%;
}

/* Cards */

#hero-cards .site-cards > article {
	padding:10%;
	background:white;
	border-radius:10px;
}
#hero-info {
	padding:5%;
	background:var(--brand-color-blue-3);
	color:white;
	border-radius:20px;
} 

.hero-info-cards h3,
.hero-info-cards h4{
	color:white;
	text-transform:capitalize;
}
.hero-info-cards aside {
	padding:10%;
	border:1px solid var(--brand-color-blue-2);
	border-radius:10px;
}
.hero-info-cards h2 {
	font-size:1.5rem;
	padding:var(--site-button-padding);
	background:darkgray;
	color:var(--brand-color-blue-1);
	border-radius:15px;
}


/* About Us Page */

#WhoAreWe {
	background:var(--brand-color-blue-1);
	border-radius:20px;
	color:white;
}
#WhoAreWe h2 {
	color:white;
}
#WhoAreWe article {
	padding:10%;
}

#WhoAreWe aside {
	background:linear-gradient(45deg, var(--brand-color-blue-1),var(--brand-color-blue-3));
	display:flex;
	justify-content:center;
	align-items:center;
}
#WhoAreWe article figure {
	background:var(--brand-color-blue-2);
	padding:3px 6px;
	border-radius:5px;
	border:1px solid white;
	text-transform:capitalize;
}
#WhatWeDo.section {
  padding: 5%;
  background: white;
  border-radius: 20px;
  margin: 5% 0;
  box-shadow: 0px 0px 20px -18px;
}
#WhatWeDo h3 {
	text-transform:capitalize;
}
#WhatWeDo.section .site-cards > article {
	padding:5%;
	background:white;
	border-radius:15px;
	box-shadow:0px 0px 20px -18px;
}
#WhyFeelFirst.section {
	padding:5%;
	background:linear-gradient(45deg,var(--brand-color-blue-1),var(--brand-color-blue-3));
	color:white;
	border-radius:20px;
}
#WhyFeelFirst.section h2, #WhyFeelFirst.section h3 {
	color:white;
}
#WhyFeelFirst.section h3 {
	text-transform:capitalize;
}
#WhyFeelFirst.section .site-cards > article {
	padding:5%;
	background:linear-gradient(45deg, var(--brand-color-blue-2),var(--brand-color-blue-1));
	border-radius:15px;
}

#JoinUs.section > .site-cards > article {
	background:var(--brand-color-blue-1);
	padding-bottom:10%;
	border-radius:20px;
	overflow:hidden;
}

#JoinUs.section > .site-cards > article > header {
	background:white;
	padding:3%;
	border-radius:20px;
}

#JoinUs.section > .site-cards > article > header >h3 {
	text-transform:capitalize;
}
#JoinUs.section > .site-cards > article > header > i {
	background:var(--brand-color-blue-3);
	padding:3%;
	border-radius:10px;
	color:white;
	font-size:2rem;
	margin-bottom:5%;
}
#JoinUs.section > .site-cards > aside {
	padding:5%;
	background:white;
	border-radius:20px;
}
#JoinUs.section > .site-cards > aside > i {
	padding:3%;
	background:var(--brand-color-blue-1);
	border-radius:15px;
	color:white;
	font-size:2rem;
	margin-bottom:3%;
}
#JoinUs.section > .site-cards > aside > h3 {
	text-transform:capitalize;
}
#JoinUs.section > .site-cards .icon-card-text {
	display:flex;
	justify-content:space-between;
	align-items:start;
	gap:5%;
}
#JoinUs.section > .site-cards .icon-card-text h3, 
#JoinUs.section > .site-cards .icon-card-text h4 {
	margin:0;
	text-transform:capitalize;
}
#JoinUs.section > .site-cards .icon-card-text > i {
	padding:2%;
	background:var(--brand-color-blue-2);
	border-radius:15px;
	color:white;
}
/* Publish With Us */

#WhatLookingFor .site-cards > article {
	padding:10%;
	background:white;
	border-radius:15px;
}
#WhatLookingFor h3 {
	text-transform:capitalize;
}
#PublishWithUs .site-submission-guidelines-card {
	background:white;
	border-radius:20px;
}
#PublishWithUs .site-submission-guidelines-card > article {
	padding:2% 5%;	
}
#PublishWithUs .site-submission-guidelines-card > article > header > h3 {
	text-transform:capitalize;
}
#PublishWithUs .site-submission-guidelines-card > article > header, #PublishWithUs .site-submission-guidelines-card > article li {
	display:flex;
	gap:2%;
	align-items:center;
}
#PublishWithUs .site-submission-guidelines-card > article ul {
	list-style:none;
}
#PublishWithUs .site-submission-guidelines-card > article ul li > p, #PublishWithUs .site-submission-guidelines-card > article > header > h3 {
	margin:0;
}
#phps-form-container article {
	background:white;
	padding:5%;
	border-radius:20px;
	margin-bottom:5%;
}
/* Container */
.author-profile-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 10px;
}

/* Author Header */
.author-header {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.author-name {
    margin-top: 0;
    font-size: 2.5rem;
    color: #333;
}

.author-affiliation {
    display: inline-block;
    background-color: #0073aa;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.author-bio {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #555;
}

/* Books Grid */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.book-card {
    text-align: center;
    transition: transform 0.2s;
}

.book-card:hover {
    transform: translateY(-5px);
}

.book-cover img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 4px;
}

.book-title {
    font-size: 1.2rem;
    margin-top: 15px;
    color: #333;
    text-decoration: none;
}
/* Footer */
#footer-widgets h4 {
	color:white;
}
#footer-widgets .site-subscription-form > input {
	border-radius:10px;
	margin-top:2%;
}
#footer-widgets .site-subscription-form > input{
	color:white;
}
#footer-widgets .site-subscription-form > button {
	margin-top:5%;
}

/*Misc */
.outofstock-badge {
	display:none !important;
}

/* Badges */
/* Style for the badge container */
.woocommerce-badge.forthcoming-badge {
    /* Visuals */
    background-color: var(--brand-color-blue-3); /* Light Blue */
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 4px;
    text-transform: uppercase;
	display:flex;
	justify-content:center;
	position:absolute;
	z-index:999;
	width:100%;
	
    
}

/* Ensure the parent product element is positioned relative for absolute positioning to work */
.products .product {
    position: relative;
}

/* Styling for the SINGLE PRODUCT page */
/* You may want it to appear inline with the title/price */
.single-product .forthcoming-badge {
    position: relative; /* Change from absolute to relative to keep it in the flow */
    margin-right: 15px; /* Add some spacing */
    display: inline-block;
}

/* Reposive Classes */
@media (max-width:996px) {
	.site-grid-column-2, .site-grid-column-3  {
		grid-template-columns:1fr;
	}
}