/*
 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, 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,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;
}

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

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

tr:hover {
    color: #3c4858;
    background-color: #f8f9fa;
}

.site-header {
	background-color: #f8fdfa;
}

.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: transparent;
}

.sticky-enabled .main-navigation.is_stuck {
    background-color: #ffffff;
    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);
}

.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-5);
    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);
}

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);
}

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;
}

 /* End GeneratePress Site CSS */

/*** 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-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;
}




/* Style for the default Rank Math Table of Contents (TOC) */
#rank-math-toc {
    margin: 20px 0;
    padding: 10px;
    background-color: var(--base-2);
    border: none;
    border-radius: 1px;
    box-shadow: 0px 1px 3px 1px rgba(60, 64, 67, 0.15);
}

#rank-math-toc p {
    margin: 0;
    padding: 15px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    color: var(--contrast-2);
    text-transform: uppercase;
	font-size: 14px;
    letter-spacing: 1.25px;
    font-weight: 500;
}

#rank-math-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#rank-math-toc ul.active {
    display: block;
}

#rank-math-toc ul li {
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px solid #eaeaea;
}

#rank-math-toc ul li:last-child {
    border-bottom: none;
}

#rank-math-toc ul li a {
    text-decoration: none;
    transition: color 0.3s ease;
}