/*
 Theme Name:   GeneratePress - Child
 Theme URI:    https://generatepress.com
 Description:  Includes theme style tweaks, custom properties, some global styles, and style overrides for popular plugins.
 Author:       Dave Warfel
 Author URI:   https://escapecreative.com
 Template:     generatepress
 Version:      1.0
*/

/* TABLE OF CONTENTS
---------------------------------/
00. Custom Properties
01. Theme Specific
02. Defaults
03. Sections
04. Grid
05. Typography
06. Media – Images, Videos, Embeds, etc.
07. Buttons
08. Header
09. Main Navigation
10. Forms (specific form plugin)
11. Carousels/Sliders
12. Comments
X. Relavanssi (Search)
X. SimpleTOC
X. RankMath SEO - FAQ block
X. SearchWP
X. SwiperJS
98. Utilities / Helpers
99. Animations
--------------------------------*/

/* 00. Custom Properties
----------------------------------- */
:root {
	/* TYPOGRAPHY */
	/* FONT-FAMILY */
	--font-body: var(--gp-font--manrope);
	--font-display: var(--gp-font--manrope);
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--font-playful: var(--gp-font--fuzzy-bubbles);

	/* FONT WEIGHT */
	/* adjust based on the fonts used */
	--font-light: 300;
	--font-normal: 500;
	--font-medium: 500;
	--font-bold: 700;
	--font-black: 800;

	/* FONT-SIZE */
	/* use clamp() generator: https://www.fluid-type-scale.com/ */
	--text-sm: clamp(0.92rem, 0.02vi + 0.88rem, 0.95rem);
	--text-base: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
	--text-md: clamp(1.25rem, 0.51vi + 1rem, 1.41rem);
	--text-lg: clamp(1.5rem, 0.89vi + 1.04rem, 1.76rem);
	--text-xl: clamp(1.65rem, 1.41vi + 1.07rem, 2.2rem);
	--text-2xl: clamp(1.75rem, 2.08vi + 1.08rem, 2.75rem);
	--text-3xl: clamp(2.1rem, 2.97vi + 1.06rem, 3.43rem);
	--text-4xl: clamp(2.1rem, 4.12vi + 1rem, 4.29rem);

	/* LINE-HEIGHT */
	/* adjust based on the fonts used */
	--leading-xs: 1.1;
	--leading-sm: 1.2;
	--leading-md: 1.4;
	--leading-lg: 1.55;
	--leading-xl: 1.7;

	/* LETTER-SPACING */
	/* adjust based on the fonts used */
/* 	--tracking-xs: -0.05em;
	--tracking-s: -0.025em;
	--tracking-m: 0em;
	--tracking-l: 0.04em;
	--tracking-xl: 0.07em;
	--tracking-xxl: 0.1em; */

	/* SPACING */

	/* For block padding, gap, etc. - https://utopia.fyi/space/calculator/ */
	--space-3xs: clamp(0.25rem, 0.2255rem + 0.1087vi, 0.3125rem); /* 4px → 5px */
	--space-2xs: clamp(0.5rem, 0.4511rem + 0.2174vi, 0.625rem); /* 8px → 10px */
	--space-xs: clamp(0.75rem, 0.6766rem + 0.3261vi, 0.9375rem); /* 12px → 15px */
	--space-s: clamp(1rem, 0.9022rem + 0.4348vi, 1.25rem); /* 16px → 20px */
	--space-m: clamp(1.5rem, 1.3533rem + 0.6522vi, 1.875rem); /* 24px → 30px */
	--space-l: clamp(2rem, 1.8043rem + 0.8696vi, 2.5rem); /* 32px → 40px */
	--space-xl: clamp(3rem, 2.7065rem + 1.3043vi, 3.75rem); /* 48px → 60px */
	--space-2xl: clamp(4rem, 3.6087rem + 1.7391vi, 5rem); /* 64px → 80px */
	--space-3xl: clamp(6rem, 5.413rem + 2.6087vi, 7.5rem); /* 96px → 120px */
	
	/* Block padding for .section
	 * Based on min/max viewport widths of 360px → 1280px
	 * https://chrisburnell.com/clamp-calculator/ */
	--space-section-xs: clamp(1.5rem, 1.353rem + 0.652vi, 1.875rem); /* 24px → 30px */
	--space-section-sm: clamp(2.5rem, 2.207rem + 1.304vi, 3.25rem); /* 40px → 52px */
	--space-section-md: clamp(3.125rem, 2.391rem + 3.261vi, 5rem); /* 50px → 80px */
	--space-section-lg: clamp(4rem, 3.12rem + 3.913vi, 6.25rem); /* 64px → 100px */
	--space-section-xl: clamp(5.25rem, 3.978rem + 5.652vi, 8.5rem); /* 84px → 136px */
	
	/* Inline padding for .section
	 * Based on min/max viewport widths of 360px → 1280px
	 * https://chrisburnell.com/clamp-calculator/ */
	--space-section-inline: clamp(0.875rem, 0.288rem + 2.609vi, 2.375rem); /* 14px → 38px */

	/* Container Width: --gb-container-width (Default: 1200px) */
	/* For classes .section-narrow, .section-narrow-xs, .section-wide, .section-wide-xl */
	--container-width-xs: calc( var(--gb-container-width) * .55 ); /* .section-narrow-xs - 660px */
	--container-width-sm: calc( var(--gb-container-width) * .75 ); /* .section-narrow - 900px */
	--container-width-lg: calc( var(--gb-container-width) * 1.1 ); /* .section-wide - 1320px */
	--container-width-xl: calc( var(--gb-container-width) * 1.25 ); /* .section-wide-xl 1500px */

	/* ASPECT RATIOS */
	--aspect-square: 1 / 1;
	--aspect-landscape: 16 / 9;
	--aspect-portrait: 9 / 16;

	/* RADIUS */
	--radius-2xs: 0.125rem;
	--radius-xs: 0.25rem;
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;
	--radius-xl: 1.375rem;
	--radius-2xl: 1.75rem;
	
	/* SHADOWS */
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-s: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-m: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-l: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	
	/* could add --shadow-flat-* for hard shadows with zero blur */

	/* BLUR */
	--blur-xs: 4px;
	--blur-s: 8px;
	--blur-m: 12px;
	--blur-l: 16px;
	--blur-xl: 24px;
	
	/* FOCUS */
	--focus-width: 2px;
	--focus-color: #000;

} /* :root */

/* 01. Theme Specific
------------------------------ */
.site-wrapper {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
}

/* 02. Defaults
------------------------------ */
html {
	scroll-behavior: smooth;
/* 	scroll-padding-top: ; */
}

body {
	font-family: var(--font-body);
	font-weight: 500;
/* 	color: ; */
}

/* CODE */
code, kbd, tt, var {
	font-family: var(--font-mono);
}
pre {
	/* only include if site needs it */
}
pre code {
	padding: 0;
	background: transparent;
	border: 0;
}

/* LINKS */
/* style here bc when in Customizer, they are hard to override with GB */
a {
	color: var(--color-site-primary-2);
}
a:is(:hover, :focus) {
	color: var(--color-site-primary-2);
	text-decoration: underline;
}

:is(h2, h3, h4, h5, h6) a {
	font-weight: inherit;
}

/* Remove default <button> styles from GP */
button {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
}

/* LISTS */
/* Adjust spacing for multi-level lists */
ol :is(ol, ul),
ul :is(ol, ul) {
	margin-top: 10px;
}

/* TEXT */

/* Remove bottom margin from last <p> */
p:last-child:last-of-type {
	margin-bottom: 0;
}

/* TABLES */
thead th, th {
	/* background: #222;
	color: #fff; */
	text-align: inherit;
}
table.striped tr:nth-child(odd) {
	background: #f4f4f4;
}


/* 03. Sections
------------------------------ */
/* All sections must contain an inner section */
.section-inner {
	max-width: var(--gb-container-width);
	margin-inline: auto;
}


/* 04. Grid
------------------------------ */
/* Set a default gap for all variations of grid-* */
[class^="grid-"] {
	gap: var(--space-m);
}


/* 05. Typography
------------------------------ */
p, li, span, div, blockquote {
	text-wrap: pretty; /* prevent orphans */
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin-bottom: 0.5rem;
	font-family: var(--font-display);
	font-weight: var(--font-bold);
	line-height: 1.15;
	letter-spacing: -0.06rem;
	text-wrap: pretty;
}
h1, .h1 {
	font-size: var(--text-3xl);
	font-weight: var(--font-black);
	letter-spacing: -0.15rem;
}
h2, .h2 {
	font-size: var(--text-2xl);
	letter-spacing: -0.12rem;
}
h3, .h3 {
	font-size: var(--text-xl);
}
h4, .h4 {
	font-size: var(--text-lg);
}
h5, .h5 {
	font-size: var(--text-md);
}
h6, .h6 {
	font-size: var(--text-base);
	font-weight: var(--font-black);
	letter-spacing: -0.03rem;
}

@media (max-width: 768px) {
	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
		letter-spacing: -0.06rem;
	}
}

.single-post :is(h2, h3, h4, h5, h6) {
	margin-top: var(--space-m);
}

.single-post .box-header {
	margin: 0;
}

/* LISTS */
ul, ol {
	margin-left: 1.75rem;
}

/* BLOCKQUOTES */
blockquote {
	padding: 10px;
	border: 0;
	font-family: var(--font-playful);
	font-size: var(--text-md);
	font-weight: bold;
	font-style: normal;
	letter-spacing: -0.03rem;
	color: var(--color-site-accent-3);
}


/* 06. Media
------------------------------ */
img {
	/* max-width: 100%; & height: auto; are in GP CSS */
	width: auto;
	vertical-align: middle;
	font-style: italic;
	shape-margin: 1rem;
}
.wp-block-image {
	margin-bottom: var(--space-m);
}

.wp-block-embed.is-type-video iframe,
/* AdThrive/Raptive Video Embeds */
.raptive-player-position,
.raptive-player-video {
	border-radius: var(--radius-lg);
}
/* AdThrive/Raptive Video Embeds */
.adthrive-collapse-player {
	width: 100%;
	padding: 0 !important;
	border: 0;
}

/* Blog Post Images */
.post-content img {
	border-radius: var(--radius-lg);
}
.post-content .rounded-asymmetrical {
	border-radius: 1rem 4.5rem 1rem 4.5rem;
}

/* Author Bios */
.author-bio-box img {
	border-radius: 50%;
}
.author-bio-box :is(h2, h3, h4, h5, h6) {
	margin: 0;
}


/* X. Masks
------------------------------ */
/* .mask-image {
	mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 1000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3CclipPath id=%22a%22%3E%3Cpath fill=%22currentColor%22 d=%22M827 603.5Q747 707 666 845t-212.5 50.5Q322 808 288 698.5T238 494q-16-95 30.5-205T440 154.5q125-24.5 274.5 8t171 185Q907 500 827 603.5Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path=%22url(%23a)%22%3E%3Cpath d=%22M827 603.5Q747 707 666 845t-212.5 50.5Q322 808 288 698.5T238 494q-16-95 30.5-205T440 154.5q125-24.5 274.5 8t171 185Q907 500 827 603.5Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	mask-size: cover;
	mask-repeat: no-repeat;
	mask-position: center;
} */

.image-blob::before,
.image-blob::after {
	border-radius: 25% 75% 54% 46% / 55% 25% 75% 45%;
}




/* 07. Buttons
------------------------------ */
/* General button styles that apply to all button types.
 * Specific styles for each button type are global styles in GB. */
.btn-cta,
.btn-dark,
.btn-light,
.btn-outline-dark,
.btn-outline-light,
.btn-outline-cta,
.btn-ghost-dark,
.btn-ghost-light,
.comment-form input[type="submit"], /* Comment Form "Submit" */
.swp-button, /* SearchWP */
.infusion-submit button[type="submit"] /* Keap Form Embeds */ {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-width: fit-content;
	padding: 0.8rem var(--space-s);
	border-radius: var(--radius-xs);
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	transition: all 0.125s ease-in-out 0s;
}
.btn-cta:is(:hover, :focus),
.btn-dark:is(:hover, :focus),
.btn-light:is(:hover, :focus),
.btn-outline-dark:is(:hover, :focus),
.btn-outline-light:is(:hover, :focus),
.btn-ghost-dark:is(:hover, :focus),
.btn-ghost-light:is(:hover, :focus),
.swp-button:is(:hover, :focus),
.comment-form input[type="submit"]:is(:hover, :focus) {
	text-decoration: none !important;
}
@media (max-width: 550px) {
	.btn-cta,
	.btn-dark,
	.btn-light,
	.btn-outline-dark,
	.btn-outline-light,
	.btn-ghost-dark,
	.btn-ghost-light,
	.comment-form input[type="submit"] {
		width: 100%;
		min-height: 52px;
		font-size: 105%;
	}
}

/* Comment Form "Submit" Button */
.comment-form input[type="submit"] {
	background: var(--color-site-accent-3);
	color: var(--white);
}
.comment-form input[type="submit"]:is(:hover, :focus) {
	background: var(--color-site-primary-3);
	color: var(--white);
}

/* Keap Form Buttons */
.infusion-submit button[type="submit"] {
	background: var(--color-site-cta-1);
	color: var(--white);
}
.infusion-submit button[type="submit"]:is(:hover, :focus) {
	background: var(--color-site-cta-2);
	color: var(--white);
}
/* SearchWP buttons */
.searchwp-form .swp-button {
	background: var(--black);
	color: var(--white);
}
.searchwp-form .swp-button:is(:hover, :focus) {
	background: var(--color-site-base-4);
	color: var(--white);
}


/* 08. Header
------------------------------ */


/* 09. Main Navigation
------------------------------ */
.header-main-nav .gb-menu-item,
.footer-link-list a,
.copyright-container :is(a, button) {
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
/* .gb-sub-menu .gb-menu-item:hover {
	text-decoration: none;
	text-underline-offset: 0;
	text-decoration-thickness: 0;
} */


/* 10. Forms
------------------------------ */


/* 11. Carousels/Sliders
------------------------------ */


/* 12. Comments
------------------------------ */
/* Hide auto-output. I've added the comments area using the WP "Comments" block in the GP Element template. */
.comments-area {
	display: none;
}

.wp-block-comment-template {
	margin: 0;
}

.wp-block-comments-title {
	margin-bottom: var(--space-l);
}

.wp-block-comment-template .wp-block-columns {
	margin: 0;
	padding: 8px;
}

.wp-block-comment-template .comment {
	margin-bottom: var(--space-s);
	padding: var(--space-s);
	background: var(--white);
	border: 1px solid var(--black);
	border-radius: var(--radius-lg);
	box-shadow: 1px 1px 0 0 var(--black);
}
.wp-block-comment-template .bypostauthor {
	background: #f6f1fa;
	border: 3px solid var(--color-site-primary-2);
	box-shadow: 2px 2px 0 0 var(--color-site-primary-2);
}

.wp-block-comment-author-name {
	font-size: var(--text-lg) !important;
	font-weight: 700;
	font-family: var(--font-playful);
	color: var(--color-site-accent-3);
	line-height: 1.1;
	letter-spacing: -0.03rem;
}
.wp-block-comment-author-name a {
	color: var(--color-site-accent-3);
}
.wp-block-comment-date {
	font-size: var(--text-base) !important;
	font-weight: 600;
	color: var(--color-site-base-3);
	line-height: 1;
}
.wp-block-comment-date a {
	color: var(--color-site-base-3);
}

.wp-block-comment-content {
	margin-top: var(--space-m);
}

/* COMMENT FORM */
.wp-block-post-comments-form .comment-reply-title {
	margin-bottom: var(--space-s);
}

.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"] {
	background: var(--white);
	border-radius: var(--radius-md);
}
.wp-block-post-comments-form textarea:is(:focus, :focus-visible),
.wp-block-post-comments-form input:is(:focus, :focus-visible) {
	border-color: var(--color-site-primary-2);
	box-shadow:
		2px 2px 0 0 var(--color-site-primary-2),
		0 0 0 1px var(--color-site-primary-2);
	outline: none;
}


/* X. Relavanssi (Search)
------------------------------ */

/* Live Ajax Search Results - Container */
.relevanssi-live-search-results-showing {
	width: 300px !important;
	top: 150px !important;
	left: calc(50% - 150px) !important;
}
@media (max-width: 767px) {
	.relevanssi-live-search-results-showing {
		top: 125px !important;
	}
}
/* Live Ajax Search Results - Results */
body .relevanssi-live-search-result p {
	padding: 0;
	margin: 0;
	font-size: 90%;
	line-height: 1.3;
}
body .relevanssi-live-search-result a {
	padding: var(--space-2xs);
	white-space: normal;
}
.relevanssi-live-search-result a:is(:hover, :focus) {
	background: var(--color-site-primary-1);
}


/* X. SimpleTOC
------------------------------ */


/* X. RankMath SEO - FAQ block
------------------------------ */


/* X. SearchWP
------------------------------ */
form.searchwp-form input.swp-input--search {
	border-radius: var(--radius-xs);
}


/* X. SmartSlider 3
------------------------------ */
/* Simple Image Slider */
.ss-image-slider .n2-ss-slide {
	border-radius: var(--radius-lg) !important;
}

/* Single Testimonial Slider */
.ss-testimonial-slider .n2-ss-text b,
.ss-testimonial-slider .n2-ss-text strong {
	padding-inline: 4px;
	background: #fcf2d3;
}
.ss-testimonial-avatar .n2-ss-item-content {
	padding-block: 1px; /* create space for img box-shadow */
}
.ss-testimonial-avatar img {
	padding: 2px !important;
	border: 1px solid var(--black) !important;
	border-radius: 100vw !important;
	box-shadow: 1px 1px 0 0 var(--black) !important;
	aspect-ratio: 1;
	object-fit: cover;
}


/* X. SwiperJS
------------------------------ */

/* Set up custom properties to override defaults in swiper-bundle.min.css */
.swiper {
	/* Pagination */
    --swiper-pagination-color: var(--black);
    --swiper-pagination-left: auto;
    --swiper-pagination-right: 8px;
    --swiper-pagination-bottom: 8px;
    --swiper-pagination-top: auto;
    --swiper-pagination-fraction-color: inherit;
    --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
    --swiper-pagination-progressbar-size: 4px;
    --swiper-pagination-bullet-size: 14px;
    --swiper-pagination-bullet-width: 14px;
    --swiper-pagination-bullet-height: 14px;
    --swiper-pagination-bullet-inactive-color: var(--black);
    --swiper-pagination-bullet-inactive-opacity: 0.15;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 5px;
    --swiper-pagination-bullet-vertical-gap: 5px;

    /* Navigation */
    --swiper-navigation-size: 40px;
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 10px;
    --swiper-navigation-color: #000;
}

/* Pagination */
.swiper .swiper-pagination {
	position: static;
	width: unset;
	margin: 0;
}

/* Navigation */
.swiper .swiper-button {
	position: static;
	inset: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--swiper-navigation-size);
	height: var(--swiper-navigation-size);
	margin: 0;
	padding: 0;
	cursor: pointer;
}
.swiper .swiper-button svg {
	width: calc(var(--swiper-navigation-size) / 2);
	height: calc(var(--swiper-navigation-size) / 2);
}

/* Apply styles only to swiper image galleries (.swiper-images) */
.swiper-images img {
	border-radius: 1.75rem 4rem;
}

/* Logo Carousel */
.swiper-logo-carousel {
	mask-image: linear-gradient( to right,
    transparent 0%,
    white 10%,
    white 90%,
    transparent 100%
  );
}
.swiper-logo-carousel .swiper-wrapper {
	transition-timing-function: linear;
	align-items: center;
}
.swiper-logo-carousel .swiper-slide {
	width: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
}
.swiper-logo-carousel img {
	max-width: 300px;
}


/* 98. Utilities / Helpers
------------------------------ */
.sr-only:not(:focus):not(:active) {
	clip-path: inset(50%);
	clip: rect(0 0 0 0);
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* CLICKABLE CARDS w/ Accessibility
 * Add .clickable-parent to the parent card and place an <a> inside.
 * https://automaticcss.com/docs/clickable-parent/
 */
.clickable-parent {
	position: relative;
}
.clickable-parent:focus-within {
	/* add focus styles to parent */
	box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}
.clickable-parent:focus-within :focus {
	/* remove focus styles on the <a> */
	box-shadow: none;
	outline: none;
}

.clickable-parent a:before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}



/* TEXT */
[class^="line-limit"] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-limit-2 {
	-webkit-line-clamp: 2;
}
.line-limit-3 {
	-webkit-line-clamp: 3;
}

.text-pretty {
	text-wrap: pretty; /* prevent orphans */
}
.text-balance {
	text-wrap: balance; /* balance lines */
}


/* 99. Animations
------------------------------ */
/* Couldn't get this to work so switched to SwiperJS. OK to delete. */
@keyframes marquee-horizontal {
	to {
		/* 2rem equals the column gap between items */
		transform: translateX( calc(-100% - 2rem) );
	}
}

.marquee-horizontal {
	mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}
.marquee-horizontal__inner {
	animation: marquee-horizontal 32s linear infinite;
}