/*
 Theme Name:   GP Custom
 Theme URI:    https://clickdigit.com
 Description:  Customized GeneratePress theme.
 Author:       Afsal Rahim
 Author URI:   https://afsal.me
 Template:     generatepress
 Version:      0.1
*/

/* ========== TABLE OF CONTENTS ========== 

0. Variables
1. Theme Tweaks
2. GeneratePress Site CSS
3. RankMath CSS

======================================== */

/*** 1. VARIABLES ***/

:root {
	--headline-font: 'Nunito', sans-serif, -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	--body-font: 'Nunito', sans-serif, -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --fs-body: clamp(1rem, calc(0.96rem + 0.21vw), 1.125rem);
    --fs-headline-body-xl: clamp(1.27rem, calc(1.15rem + 0.59vw), 1.62rem);
    --fs-headline-body-l: clamp(1.13rem, calc(1.05rem + 0.38vw), 1.35rem);
    --fs-headline-body-s: clamp(0.89rem, calc(0.87rem + 0.08vw), 0.94rem);
    --fs-headline-body-xs: clamp(0.78rem, calc(0.79rem + -0.01vw), 0.79rem);
}

/*** 1. THEME TWEAKS ***/

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-weight: 400;
    font-size: var(--fs-body);
}
body, button, .gb-button, input, select, textarea {
    font-family: var(--body-font);
}

p {
    font-size: var(--fs-body);
    font-family: var(--body-font);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	font-family: var(--headline-font);
}

a,button, .gb-button, input {
    transition: color .1s ease-in-out,background-color .1s ease-in-out;
}

a {
    text-decoration: none;
}

::selection {
    background: rgba(109,199,122,0.9);
    color: #ffffff; /* Optional: Set text color for better contrast */
}

::-moz-selection { /* Firefox */
    background: rgba(109,199,122,0.9);
    color: #ffffff; /* Optional: Set text color for better contrast */
}

a.generate-back-to-top {
    transition: all .5s ease;
    border-radius: 6px;
    background-color: var(--contrast-5);
}

a.generate-back-to-top:hover {
    background-color: var(--contrast-6);
}

.wp-block-search__inside-wrapper button {
    padding: 8px 15px;
}

input[type="search"]:focus {
    color: var(--contrast-4);
}

tr:hover {
    color: #3c4858;
    background-color: var(--base-4);
}

.site-header {
	background-color: var(--base-4);
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a {
    background-color: transparent !important;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 24px;
    text-transform: uppercase;
    padding-left: 15px;
    padding-right: 15px
}

.main-navigation, .main-navigation ul ul {
    background-color: var(--base-4);
}

.sticky-enabled .main-navigation.is_stuck {
    background-color: var(--base-4);
    z-index: 10;
}

.nav-float-right #site-navigation {
    padding-right: 3rem;
}

.main-navigation .menu-bar-items {
    margin-left: 1rem;    
}

.main-navigation .menu-bar-items a span {
    transition: transform 0.3s ease-in-out;
    padding: 10px;
    color: var(--accent);
    border: 1px solid var(--base-3);
    background: linear-gradient(45deg, transparent, rgba(109, 199, 122, .15));
    border-radius: 50% !important;
}

.main-navigation .menu-bar-items a span:hover {
    transform: scale(1.2);
}

.main-navigation .main-nav ul li a, .main-navigation .main-nav ul ul li a {
    font-size: 13px;
}

.site-logo img {
    transition: transform 0.3s ease-in-out;
}

.site-logo img:hover {
    transform: scale(1.1);
}

.key-feature .icon {
    background: linear-gradient(45deg, transparent, rgba(109, 199, 122, .15));
    height: 45px;
    width: 45px;
    line-height: 45px;
}

.elevate {
    box-shadow: 0px 0.125rem 0.25rem rgba(0,0,0,0.08),0px 0.25rem 1.5rem rgba(0,0,0,0.08)
}

.emboss {
	border-radius: 0.5rem;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 0.0625rem 0.0625rem, rgba(0, 0, 0, 0.04) 0px 0.125rem 0.125rem, rgba(0, 0, 0, 0.04) 0px 0.25rem 0.25rem, rgba(0, 0, 0, 0.04) 0px 0.5rem 0.5rem, rgba(0, 0, 0, 0.04) 0px 0.75rem 0.75rem;
    background-color: rgb(255, 255, 255);
}

.box-shadow {
	box-shadow: 0px 0px 35px -13px rgba(0,36,72,0.4);
}

.breadcrumb-container, .featuredimage-container {
    padding: 0 1.5rem;
}

.breadcrumb-container {
    z-index: 9;
}

.nav-links .page-numbers {
    transition: transform 0.3s ease-in-out;
    color: var(--accent);
    border: 1px solid var(--base-2);
    box-shadow: 0 0 3px rgba(60, 72, 88, .15);
    border-radius: 6px;
    padding: .5rem 1.5rem;
    font-size: 14px;
    font-weight: 700;
}

span.page-numbers.current, span.page-numbers.dots, span.page-numbers.current:hover, span.page-numbers.dots:hover  {
    color: var(--contrast-4);
    background: var(--base);
}

.nav-links .page-numbers:hover {
    background-color: var(--contrast);
    color: var(--base-3);
}

.site-footer, .site-footer .site-info  {
    background-color: var(--contrast-6);
    color: rgba(255,255,255,.5);
    font-size: 14px;
}

.site-footer a:hover, .site-footer .site-info a:hover {
    color: #FFFFFF;
}

/* Sidebars*/
@media (max-width: 768px) {
	.widget-area.is-right-sidebar {
	margin-top: 80px;
	}
} 

/*** 2. GENERATEPRESS SITE CSS ***/
body {
    background-color: var(--base-3);
}

.gb-button, button, html input[type="button"],input[type="reset"],input[type="submit"],a.button,a.wp-block-button__link:not(.has-background) {
    color: #ffffff;
    background-color: var(--accent);
}

.gb-button:hover, button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,a.button:hover,button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,a.button:focus,a.wp-block-button__link:not(.has-background):active,a.wp-block-button__link:not(.has-background):focus,a.wp-block-button__link:not(.has-background):hover {
    color: #ffffff;
    background-color: #3f4047;
}

.wp-block-button__link {
    border-radius: 4px;
    display: block;
    padding: 13px 24px 11px;
    text-align: center;
}

/**
.main-navigation a {
	letter-spacing: 1px;
}

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
	color: var(--accent);
	border: 3px;
	border-style: solid;
	line-height: 36px;
	border-radius: 2px;
	margin-left: 20px;
	transition: all 0.6s ease 0s;
}

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover {
	color: var(--accent-hover);
}

.main-navigation, .sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23);
}
**/

.drop-shadow {
	box-shadow: 0px 0px 20px rgba(200, 200, 200, 0.2);
}

.round-top-corners img {
	border-radius: 8px 8px 0px 0px;
}

.entry-content img {
    padding: 1rem;
}

 /* End GeneratePress Site CSS */
 
 
.section-cards {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #F5F5F5;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 2em;
}

.section-cards:hover {
    box-shadow: 0px 0px 17px 5px rgba(0, 0, 0, 0.08);
}


/* Container for the benefit cards */
.benefits-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Adjust the gap between cards as needed */
}

/* Individual benefit card styling */
.benefit-card {
    flex: 1 1 calc(25% - 20px); /* 4 cards in a row with a gap */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 10px;
    background: #fff;
    transition: transform 0.3s ease;
}

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

/* Ensures all cards have the same height */
.benefit-card-content {
    flex-grow: 1;
}

/* Media queries for responsiveness */
@media (max-width: 1200px) {
    .benefit-card {
        flex: 1 1 calc(33.333% - 20px); /* 3 cards in a row */
    }
}

@media (max-width: 900px) {
    .benefit-card {
        flex: 1 1 calc(50% - 20px); /* 2 cards in a row */
    }
}

@media (max-width: 600px) {
    .benefit-card {
        flex: 1 1 100%; /* 1 card in a row */
    }
}


/*** 3. RANKMATH CSS ***/

/**
.rank-math-breadcrumb a, .rank-math-breadcrumb span {
	font-size: smaller;
	text-transform: uppercase;
	font-size: 12px;
    letter-spacing: 1.25px;
    font-weight: 500;
}
.rank-math-breadcrumb span {
    color: var(--contrast-2);
}



@media (min-width: 1024px) {
 .rank-math-breadcrumb a, .rank-math-breadcrumb span {
    font-size: 14px;
 }
}
**/


/* Rank Math CSS */

.rank-math-breadcrumb .rank-math-breadcrumb p {
    letter-spacing: .5px;
    padding: 8px 24px;
    display: block
}

.rank-math-breadcrumb p, .rank-math-breadcrumb span {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    padding-left: 0;
    display: inline-block;
    color: var(--contrast-4);
}

.rank-math-breadcrumb p {
    box-shadow: 0 0 3px rgba(60,72,88,.15);
    border-radius: 6px;
    background-color: rgba(255,255,255,1);
    padding: .5rem 1.5rem;
}


.rank-math-breadcrumb .separator {
    padding: 0 .4rem;
}



#rank-math-toc {
    margin: 1em 0;
    padding: 1em;
    background-color: var(--base-2);
    border: none;
    box-shadow: 0px 1px 3px 1px rgba(60, 64, 67, 0.15);
}

#rank-math-toc p {
    color: var(--contrast-2);
    letter-spacing: 1.25px;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 0.5em;
    font-weight: 800;
}

.wp-block-rank-math-toc-block {
	position:relative;
}

.wp-block-rank-math-toc-block h2 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position:relative;
    margin-bottom: 0;
}
.wp-block-rank-math-toc-block h2:before {
	display:inline-block;
	content: "";
        width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #000000;
	margin-right: 8px;
}

.wp-block-rank-math-toc-block nav{
	padding: 10px 10px 0px 10px;
	max-height: 0;
	overflow:hidden;
}
.wp-block-rank-math-toc-block input:checked+h2~nav {
	max-height: 100vh;
	overflow:visible;
}