/*
Theme Name: TCF
Description: A custom child theme created by <a href="http://www.estlanddesign.com">Estland Design</a> in Harrisonburg.
Version: 1.0
Author: Estland
Author URI: https://estland.us
Template: enfold
*/

/**********************************************************
=TOC (Table Of Contents)
/**********************************************************

TOC (Table Of Contents)
Reference
Imports/Includes
Debug
Fonts
Spacing fixes
Forms
Buttons
Header
Menu (Desktop)
Menu (Mobile)
Footer
Components:
- Testimonials
- Tabs
- Cards
- Backgrounds
- Lines
- Blogroll
- Tiles
Global Styles
Special Pages

/**********************************************************
=Reference
/**********************************************************

/* Media breakpoints / screen sizes /*
Phone:     ~499px
Smartphone: 500px~
Tablet:     768px~
Desktop:    990px~
Widescreen: 1200px~

/**********************************************************
=Imports/Includes (Must Be First In Stylesheet To Work)
**********************************************************/

/* Colors & Variables */
@import url('styles/variables.css');

/* Resets */
@import url('styles/resets.css');

/**********************************************************
=Font imports/includes (imports must be first)
**********************************************************/

/* Adobe fonts */
@import url('https://use.typekit.net/qkz0swh.css');

/* Example font face from a local file /*
@font-face {
	font-family: 'ExampleFont';
	font-display: swap;
	font-weight: bold;
	font-style: normal;
	src:
		url('/wp-content/themes/enfold-child-estland/fonts/ExampleFont-Bold.ttf') format('truetype'),
		url('/wp-content/themes/enfold-child-estland/fonts/ExampleFont-Bold.woff') format('woff'),
		url('/wp-content/themes/enfold-child-estland/fonts/ExampleFont-Bold.woff2') format('woff2'),
		url('/wp-content/themes/enfold-child-estland/fonts/ExampleFont-Bold.otf') format('opentype');
}

/**********************************************************
=Debug
/*********************************************************/

/* Debug box shadow: change min width or comment out to disable */
/*@media( min-width:1px ) {
	#top { box-shadow: inset 0 0 1rem 0 pink; background-clip: content-box; }
	#top * > * { box-shadow: inset 0 0 1rem 0 red; }
	#top * > * > * { box-shadow: inset 0 0 1rem 0 orange; }
	#top * > * > * > * { box-shadow: inset 0 0 1rem 0 yellow; }
	#top * > * > * > * > * { box-shadow: inset 0 0 1rem 0 green; }
	#top * > * > * > * > * > * { box-shadow: inset 0 0 1rem 0 blue; }
	#top * > * > * > * > * > * > * { box-shadow: inset 0 0 1rem 0 indigo; }
	#top * > * > * > * > * > * > * > * { box-shadow: inset 0 0 1rem 0 violet; }
}*/

/**********************************************************
=Fonts
/*********************************************************/

/* Headings */
#top h1,
#top h2,
#top h3,
#top h4,
#top h5 {
	color: var(--brown);
	font-family: var(--family--attention);
	font-weight: var(--weight--medium);
}

/* Bold strings within headings */
#top :is(h1,h2,h3,h4,h5) strong {
	color: var(--black);
}
#top .est-text--on-dark :is(h1,h2,h3,h4,h5) strong {
	color: var(--white);
}

/* Alternate H4 */
#top h3:has(+ h1),
#top h3:has(+ h2),
#top .est-h4 h2,
#top .est-h4 h3 {
	background: var(--green--lighter);
	color: var(--white);
	display: inline-block;
	font-family: var(--family--alternate);
	font-size: var(--size--h4);
	font-weight: var(--weight--bold);
	line-height: 1;
	padding: var(--padding--smaller) var(--padding--small);
	text-transform: uppercase;
}
#top h3:has(+ h1),
#top h3:has(+ h2) {
	margin-bottom: calc( ( -1 * var(--padding--small) ) + var(--padding--smaller) ); /* use calculation b/c JS replaces H3 with P */
}

/* Basic text */
p {
	color: var(--brown);
}

/* Big text for callouts */
.est-text--attention p {
	font-family: var(--family--attention);
	font-size: var(--size--h3);
	font-weight: var(--weight--regular);
	line-height: 1.2;
}

/* Lists */
.avia_textblock li {
	color: var(--grey);
}
/* List items with bold text */
#main .avia_textblock li strong { /* keep under #main so doesn't affect navigation */
	color: var(--black);
}
#main .est-text--on-dark .avia_textblock li strong { /* keep under #main so doesn't affect navigation */
	color: var(--white);
}

/* Links */
#top a {
	color: var(--green--light);
	font-weight: var(--weight--bold);
}
#top a:where(:hover,:focus-visible) {
	color: var(--green--lighter);
}
/* Links in headers */
:is(h1,h2,h3,h4,h5,h6) a {
	color: inherit;
	font-weight: inherit;
}
:is(h1,h2,h3,h4,h5,h6) a:where(:hover,:focus-visible) {
	color: var(--green);
}

/**********************************************************
=Spacing fixes
/*********************************************************/

/**********************************************************
=Forms
/*********************************************************/

/**********************************************************
=Buttons
/*********************************************************/

/**********************************************************
=Buttons
/*********************************************************/

#top#top .avia-button, /* standard button */
#top#top .gform_button, /* form button */
#top#top .gform-button, /* form button */
#top#top .more-link, /* read more link in blogroll */
#top#top a.est-button, /* manually-applied class on link */
#top#top .est-button a { /* manually-applied class on other element */
	text-transform: uppercase;
}

/* Form buttons only */
#top#top .gform_wrapper button,
#top#top .gform_wrapper [type="submit"],
#top#top .gform_wrapper .avia-button {
	margin-inline: auto; /* make centered in forms */
}

/* Button with only arrow */
.est-button--arrow {
	--button__arrow: 3rem;
	--button__margin: 0.5rem;
}
.est-button--arrow .avia-button,
.est-button--arrow .glide__arrow {
	transition: margin 0.2s ease-in-out;
}
#top#top#top .est-button--arrow .avia-button,
.est-button--arrow .glide__arrow { /* override resets */
	margin-right: var(--button__margin); /* give artificial margin so we make sure no elements move when button widens */
}
.est-button--arrow .avia-button:where(:hover,:focus-visible),
.est-button--arrow .glide__arrow:where(:hover,:focus-visible) {
	--button__arrow: 3.5rem;
	--button__margin: 0;
}
#top#top#top .est-button--arrow .more-link {
	font-size: 0;
}
.est-button--arrow .avia_iconbox_title,
#top#top .est-button--arrow .glide__arrow::after,
#top .est-button--arrow .more-link::after {
	background: currentcolor;
	content: "" !important;
	height: var(--size--input);
	mask-image:
		url("/wp-content/themes/enfold-child-estland/images/est-icon--arrow-head.svg"),
		url("/wp-content/themes/enfold-child-estland/images/est-icon--arrow-line.svg");
	mask-position:
		right center,
		center;
	mask-repeat: no-repeat;
	mask-size:
		auto 100%,
		100%;
	display: block !important;
	overflow: hidden;
	transition: width 0.2s ease-in-out;
	white-space: nowrap;
	width: var(--button__arrow);
}
/* Fix sliders with arrow buttons */
.est-button--arrow {
	--pagination__background: transparent;
	--pagination__border: var(--brown);
	--pagination__color: var(--brown);
	--pagination__background--hover: var(--brown);
	--pagination__border--hover: var(--brown);
	--pagination__color--hover: var(--white);
	--pagination__padding: var(--padding--input);
}
#top#top .est-button--arrow .glide__arrow::after {
	background: var(--pagination__color);
}
#top#top .est-button--arrow .glide__arrow:where(:hover,:focus-visible)::after {
	background: var(--pagination__color--hover);
}
/* Hide circled arrows from arrow buttons */
#top .est-button--arrow .avia-button::after {
	display: none;
}

/**********************************************************
=Header
/*********************************************************/

/* This import should be replaced with code on a real build */
@import url('./styles/snippets/snippet-header.css');

/**********************************************************
=Navigation (Desktop Menu)
/*********************************************************/

/**********************************************************
=Menu (Mobile)
/*********************************************************/

/**********************************************************
=Footer
/*********************************************************/

/**********************************************************
=Backgrounds
**********************************************************/

/* Green background row */
.est-bg--green {
	--bg__color: var(--green);
}

/* Beige gradient */
.est-bg--beige {
	--bg__color: transparent;
	background: linear-gradient( to bottom, var(--white), var(--beige) );
}

/**********************************************************
=Lines
/*********************************************************/

:root {
	--line--thick: 1rem;
}

/**********************************************************
=Blogroll
/*********************************************************/

/* Blogroll container */
#top .av-alb-blogposts {
	gap: var(--padding--normal);
}
/* Individual blog in blogroll */
#top .av-alb-blogposts .post-entry {
	--blog__padding: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}
/* Image */
#top#top .av-alb-blogposts .big-preview {
	height: 250px;
	margin-bottom: var(--padding--normal);
	position: relative;
}
#top#top .av-alb-blogposts .big-preview::after {
	background: var(--green--lighter);
	border-radius: var(--radius--large);
	bottom: 0;
	content: "";
	height: var(--line--thick);
	left: 50%;
	position: absolute;
	transform: translate( -50%, 50% );
	width: calc( 100% + var(--padding--smaller) );
}
#top#top .av-alb-blogposts img {
	border-radius: var(--radius--normal) var(--radius--normal) 0 0;
}
/* Blogroll text */
#top#top .av-alb-blogposts .entry-content-header {
	flex-direction: column-reverse;
}
#top .av-alb-blogposts * {
	text-align: left;
}
#top .av-alb-blogposts .entry-content-header * {
	line-height: 1;
}
#top#top .av-alb-blogposts .post-title {
	font-size: var(--size--h3);
}
#top .av-alb-blogposts .post-meta-infos {
	color: var(--brown);
	font-size: var(--size--s);
}
/* Blogroll button */
#top#top .av-alb-blogposts .read-more-link {
	margin-top: var(--padding--small);
}

/**********************************************************
=Sliders (Glide)
**********************************************************/

/* This import should be replaced with code on a real build */
@import url('./styles/snippets/snippet-sliders.css');

/**********************************************************
=Cards
**********************************************************/

/* This import should be replaced with code on a real build */
@import url('./styles/snippets/snippet-cards.css');

/**********************************************************
=Tabs
**********************************************************/

/* This import should be replaced with code on a real build */
/*@import url('./styles/snippets/snippet-tabs--top.css');*/
/*@import url('./styles/snippets/snippet-tabs--left.css');*/

/**********************************************************
=Global Styles
**********************************************************/

#top .est-doc .post-entry {
	border: 1px solid var(--grey);
	padding: var(--padding--normal);
}

/**********************************************************
=Special Pages
**********************************************************/