/**
Theme Name:   Web Funda
Theme URI:    https://www.codeboss.in/web-funda
Description:  A Twenty Twenty-One child theme 
Author:       Sumit Surai
Author URI:   https://www.sumitsurai.com
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonewebfunda
**/

/* Variables */
:root {
	
	/* Font Size */
	--global--font-size-base: 1.25rem;
	--global--font-size-xs: 1rem;
	--global--font-size-sm: 1.125rem;
	--global--font-size-md: 1.25rem;
	--global--font-size-lg: 1rem;
	--global--font-size-lg-big:1.6rem;
	--global--font-size-xl: 2.25rem;
	--global--font-size-xxl: 4rem;
	--global--font-size-xxxl: 5rem;
	--global--font-size-page-title: var(--global--font-size-xl);
	--global--letter-spacing: normal;
	
	/* Headings */
	--heading--font-family: var(--global--font-primary);
	--heading--font-size-h6: var(--global--font-size-xs);
	--heading--font-size-h5: var(--global--font-size-sm);
	--heading--font-size-h4: var(--global--font-size-lg);
	--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
	--heading--font-size-h2: var(--global--font-size-xl);
	--heading--font-size-h1: var(--global--font-size-page-title);
	--heading--letter-spacing-h6: 0.05em;
	--heading--letter-spacing-h5: 0.05em;
	--heading--letter-spacing-h4: var(--global--letter-spacing);
	--heading--letter-spacing-h3: var(--global--letter-spacing);
	--heading--letter-spacing-h2: var(--global--letter-spacing);
	--heading--letter-spacing-h1: var(--global--letter-spacing);
	--heading--line-height-h6: var(--global--line-height-heading);
	--heading--line-height-h5: var(--global--line-height-heading);
	--heading--line-height-h4: var(--global--line-height-heading);
	--heading--line-height-h3: var(--global--line-height-heading);
	--heading--line-height-h2: var(--global--line-height-heading);
	--heading--line-height-h1: var(--global--line-height-page-title);
	--heading--font-weight: normal;
	--heading--font-weight-page-title: 300;
	--heading--font-weight-strong: 600;
	
	/* Header */
	--branding--color-text: var(--global--color-primary);
	--branding--color-link: var(--global--color-primary);
	--branding--color-link-hover: var(--global--color-secondary);
	--branding--title--font-family: var(--global--font-primary);
	--branding--title--font-size: var(--global--font-size-lg);
	--branding--title--font-size-mobile: var(--global--font-size-lg-big);
	--branding--title--font-weight: normal;
	--branding--title--text-transform: none;
	--branding--description--font-family: var(--global--font-secondary);
	--branding--description--font-size: var(--global--font-size-sm);
	--branding--description--font-family: var(--global--font-secondary);
	--branding--logo--max-width: 150px;
	--branding--logo--max-height: 150px;
	--branding--logo--max-width-mobile: 300px;
	--branding--logo--max-height-mobile: 300px;
	
	/* Forms */
	--form--font-family: var(--global--font-secondary);
	--form--font-size: var(--global--font-size-sm);
	--form--line-height: .75;
	--form--color-text: var(--global--color-dark-gray);
	--form--color-ranged: var(--global--color-secondary);
	--form--label-weight: 500;
	--form--border-color: var(--global--color-secondary);
	--form--border-width: 3px;
	--form--border-radius: 15px;
	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
	
	/* Buttons */
	--button--color-text: var(--global--color-background);
	--button--color-text-hover: var(--global--color-secondary);
	--button--color-text-active: var(--global--color-secondary);
	--button--color-background: var(--global--color-secondary);
	--button--color-background-active: var(--global--color-background);
	--button--font-family: var(--global--font-primary);
	--button--font-size: var(--global--font-size-base);
	--button--font-weight: 500;
	--button--line-height: .75;
	--button--border-width: 3px;
	--button--border-radius: 15px;
	--button--padding-vertical: 15px;
	--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
}

.site-header{
	display:block;
}

.logo-n-branding{
	max-width:50%;
	min-width:300px;
	float:left;
}

.site-header > .site-logo{
	max-width: 50%;
	min-width: 300px;
	text-align:left;
	border-bottom:none;
}

.site-branding:last-child{
	text-align:left;
	margin-left:-5px;
	margin-top:-20px;
}

.primary-navigation > div > .menu-wrapper{
	justify-content:flex-end;
}

.page-header{
	padding-bottom:10px;
	padding-top:20px;
}
.no-results.not-found > *:first-child{
	margin-bottom:50px;
}

@media only screen and (min-width: 822px) {
	.site-header {
		padding-top: calc(1 * var(--global--spacing-vertical));
		padding-bottom:10px;
	}
}

@media only screen and (max-width: 481px) {
	.site-branding:last-child{
		margin-top:-30px;
	}
	
	.site-header.has-logo.has-title-and-tagline.has-menu .site-branding {
		max-width: 100%;
		margin-left:20px;
	}
}

@media only screen and (min-width: 482px){
	.site-header {
		padding-bottom: 10px;
	}
}

@media only screen and (max-width: 405px) {
	body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu{
		margin-left:-40px;
	}
}

@media only screen and (max-width: 370px) {
	body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu{
		margin-left:-60px;
	}
}

@media only screen and (max-width: 345px) {
	body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu{
		margin-left:-80px;
	}
}

.top-search{
	clear:both;
}

.top-search label{
	display:none;
}

.site .button, button, input[type=submit], input[type=reset], .wp-block-search .wp-block-search__button, .wp-block-button .wp-block-button__link, .wp-block-file a.wp-block-file__button{
	height:35px;
	padding:5px 10px;
}

input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], .site textarea{
	height:35px;
}