/*!
Theme Name:     Legacy
Theme URI:      https://legacytattooremoval.ca
Description:    Theme for Legacy Tattoo Removal
Author:         Jake
Author URI:     https://jakevan.ca
Template:       jvb-theme
Version:        1.0.1
*/
:root{
	--filter: grayscale(.3) sepia(.4);

	/** Download your Fonts from: https://gwfh.mranftl.com/ **/
	--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
	--heading: 'Josefin Sans', var(--font-base);
	--body: 'Open Sans', var(--font-base);
	--fw-h: 300;
	--fw-h-light: 300;
	--fw-h-bold: 700;
	--fw-b: 500;
	--fw-b-bold: 800;
	--fw-b-light: 300;

	/* Colours
	For best results, generate colours from base colours using: https://uicolors.app/generate/
	or sass darken/lighten by 5%: http://scg.ar-ch.org/
	*/
	--light-0: 239,239,239;     /* #efefef; */
	--light-50: 226,226,226;    /* #e2e2e2; */
	--light-100: 213,213,213;   /* #d5d5d5; */
	--light-200: 201,201,201;   /* #c9c9c9; */

	--dark-0: 21,21,21;         /* #151515; */
	--dark-50: 34,34,34;        /* #222222; */
	--dark-100: 46,46,46;       /* #2e2e2e; */
	--dark-200: 59,59,59;       /* #3b3b3b; */

	--action-0: 255,0,128;      /* #ff0080; */
	--action-50: 255,38,146;    /* #ff2492; */
	--action-100: 255,71,164;   /* #ff47a4; */
	--action-200: 255,107,181;  /* #ff6bb5; */
	--action-contrast: var(--light-0);

	--secondary-0: 214,145,33;  /* #D69121; */
	--secondary-50: 255,196,33; /* #ffc421; */
	--secondary-100: 255,205,68;/* #ffcd44; */
	--secondary-200: 255,215,104;/* #ffd768; */
	--secondary-contrast: var(--light-0);

	--success: 76,175,80;		    /* #4CAF50; */
	--successLight: 234,246,235;    /* #eaf6eb; */
	--successDark: 14,33,15;		/* #0e210f; */

	--warning: 232,167,55;		/* #E8A737; */
	--warningLight: 253,247,238;/* #fdf7ee; */
	--warningDark: 52,35,6;		/* #342306; */

	--error: 183,51,46;		    /* #B7332E; */
	--errorLight: 250,235,234;	/* #faebea; */
	--errorDark: 40,11,10;		/* #280b0a; */
}

body:has(#theme-switcher:checked){
	--action-50: 219,0,110;     /* #db006e; */
	--action-100: 184,0.92;     /* #b8005c; */
	--action-200: 148,0,74;     /* #94004a; */

	--secondary-50: 216,159,0;  /* #d89f00; */
	--secondary-100: 181,133,0; /* #b58500; */
	--secondary-200: 145,106,0; /* #916a00; */
}
/*** FONT START **/
/* open-sans-300 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	src: url('./assets/fonts/open-sans-v44-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-300italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 300;
	src: url('./assets/fonts/open-sans-v44-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-500 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	src: url('./assets/fonts/open-sans-v44-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-500italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 500;
	src: url('./assets/fonts/open-sans-v44-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 800;
	src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* josefin-sans-300 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 300;
	src: url('./assets/fonts/josefin-sans-v34-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/josefin-sans-v34-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* josefin-sans-300italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Josefin Sans';
	font-style: italic;
	font-weight: 300;
	src: url('./assets/fonts/josefin-sans-v34-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/josefin-sans-v34-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* josefin-sans-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Josefin Sans';
	font-style: normal;
	font-weight: 700;
	src: url('./assets/fonts/josefin-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/josefin-sans-v34-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* josefin-sans-700italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Josefin Sans';
	font-style: italic;
	font-weight: 700;
	src: url('./assets/fonts/josefin-sans-v34-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/josefin-sans-v34-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
.home .video-cover.video-cover {
	margin-top: 0;
}
/*** FONT END ***/
.wp-site-blocks > header {
	justify-content: center!important;
}
.scroll-progress .bar {
	background:
		linear-gradient(90deg,
		rgba(var(--action-rgb),.8) 0%,
		rgba(var(--action-rgb),1) 40%,
		rgba(var(--action-rgb),.8) 100%);
	position: relative;

	box-shadow:
		0 0 4px rgba(var(--action-rgb),.9),
		0 0 8px rgba(var(--action-rgb),.7),
		0 0 16px rgba(var(--action-rgb),.4);
}
#theme-switch#theme-switch {
	position: absolute;
	left: 1rem;
}

.fixed.bottom .call {
	width: var(--btn);
	flex: 0 1 var(--btn_);
}

.fixed.bottom li a {
	gap: 1rem;
}

nav.always.always a {
	text-transform: none;
}

.pre-header {
	font-family: var(--heading);
}

.eltrs {
	min-height: 40vh;
	width: 100vw;
	background-color: var(--action-0);
	--justify: center;
	--align: center;
}
.eltrs h2 {
	font-family: var(--body);
	font-weight: var(--fw-h-bold);
	color: var(--action-contrast);
	text-align: center;
	margin: 0;
	font-size: var(--txt-large);
}
.eltrs span:nth-of-type(1) {
	font-size: 2.25em;
	letter-spacing: -.15rem;
}
.eltrs span:nth-of-type(2) {
	line-height: .8;
}
.eltrs span:nth-of-type(3) {
	font-size: 2.2em;
	letter-spacing: -.1rem;
}
.eltrs span {
	display: block;
	line-height: .9;
}

@media (min-width:768px) {
	.eltrs h2 {
		font-size: var(--txt-xx-large);
	}
	.eltrs span:nth-of-type(1) {
		font-size: 2.25em;
		letter-spacing: -.35rem;
	}
	.eltrs span:nth-of-type(2) {
		line-height: .8;
	}
	.eltrs span:nth-of-type(3) {
		font-size: 2.35em;
		letter-spacing: -.25rem;
	}
}

ol.blocky.blocky {
	list-style: none;
	counter-reset: blocky;
	padding: 1rem;
	max-width: none;
}
@media (min-width: 768px) {
	padding: 1rem var(--btn);
}

ol.blocky li {
	counter-increment: blocky;
	--width: 20vw;
	--gap: 25vw;
	min-height: var(--width);
	margin: 4rem auto;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-left: var(--gap);
}

ol.blocky li:nth-of-type(odd)::before,
ol.blocky li:nth-of-type(even)::after {
	content: counter(blocky);
	font-weight: 900;
	font-size: var(--txt-xxx-large);
	height: var(--width);
	width: var(--width);
	/*border: 1rem solid var(--base-200);*/
	background-color: var(--action-0);
	color: var(--action-contrast);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50% 4px 50% 4px;
	border: 4px solid var(--action-200);
	border-left: 0;
	border-top: 0;
	box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}

@media (min-width: 768px) {
	ol.blocky li {
		position: relative;
		display: block;
		padding: 1rem;
	}

	ol.blocky li:nth-of-type(odd) {
		padding-left: var(--gap);
	}
	ol.blocky li:nth-of-type(even) {
		padding-right: var(--gap);
	}

	ol.blocky li:nth-of-type(odd)::before,
	ol.blocky li:nth-of-type(even)::after {
		margin-bottom: 0;
		width: var(--width);
		position: absolute;
		top: 0;
		left: unset;
		border-radius: 0;
		border-width: .5rem;
	}

	ol.blocky li:nth-of-type(odd)::before {
		left: 0;
	}
	ol.blocky li:nth-of-type(even)::after {
		right: 0;
	}
}
/*main > section > * {*/
/*	width: 100%;*/
/*}*/
main > section:nth-of-type(even) {
	background-color: var(--base);
	max-width: 100vw;
	padding: 3rem 0;
}
main > section:nth-of-type(even) > * {
	max-width: var(--content);
	margin-left: auto;
	margin-right: auto;
}
main > section.callout:last-of-type {
	margin-bottom: 0;
}

section.pre-footer {
	min-height: 25vh;
	background-color: var(--secondary-0);
	color: var(--secondary-contrast);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 2rem;
	flex-direction: column;
	gap: 0;
}
.pre-footer p {
	margin: 0;
	text-align: center;
}
.pre-footer ~ footer {
	margin-top: 0;
}
.pre-footer a {
	background-color: var(--secondary-contrast);
	padding: 0 .125rem;
	border-radius: 4px;
}

a{
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--action-0);
}

a::before {
	content: '';
	background-color: rgba(var(--action-rgb), .8);
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	border-radius: 50%;
}

p a:hover {
	text-shadow: 1px 0 10px var(--action-0);
	background-color: transparent!important;
	color: var(--action-contrast)!important;
	border-color:transparent!important;
}
	p a:hover::before {
		opacity: 1;
		filter: blur(1.666em);
		transition: var(--trans-color);
	}



.triangle {
	padding: 2rem 2rem 0;
	--justify: flex-end;
	position: relative;
	background-color: var(--action-0);
	color: var(--action-contrast);
}
.excerpt::after,
.triangle::after {
	content: '';
	position: absolute;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 32px solid transparent;
	border-right: 32px solid transparent;
	border-top: 32px solid var(--action-0);
	clear: both;
}
.excerpt::after {
	left: -1rem;
}
.triangle::after {
	right: 2rem;
}
.triangle.left::after {
	right: unset;
	left: 2rem;
}
.triangle h1 {
	padding-right: 1rem;
	max-width: var(--wide);
	width: max-content;
	word-wrap: break-word;
}

.excerpt {
	position: relative;
	margin-right: 1rem;
	padding: 1rem 15vw 1rem 0;
	border-bottom: 4px solid var(--action-0);
	margin-bottom: 6rem;
	grid-column: full;
	max-width: var(--narrow);
	margin-left: auto;
}
.tldr {
	font-weight: var(--fw-b-bold);
	font-size: var(--txt-large);
	display: inline-block;
	vertical-align: bottom;
	line-height: 1.4;
	/*margin-right: .75rem;*/
	color: var(--action-0);
	position: relative;
	left: -2rem;
	cursor: pointer;
}
.tldr.term {
	font-weight: var(--fw-b-light);
	font-size: var(--txt-medium);
	left: 0;
	color: var(--contrast);
}
.align-full.triangle:has(+.contact) {
	margin-bottom: 0;
	z-index: 1;
}
section.contact.contact {
	gap: 1.5rem;
	margin-top: -.5rem;
	padding-bottom: 2rem;
	background-color: var(--base-100);
	color: var(--contrast-200);
	max-width: none;
}
@media (min-width: 768px) {
	section.contact.contact {
		padding: 2rem 15vw;
	}
}
section.contact .buttons li a,
section.contact .socials a {
	background-color: var(--base-50);
}
section.contact .buttons li a:hover,
section.contact .buttons li a:focus,
section.contact .socials a:hover,
section.contact .socials a:focus {
	background-color: var(--action-0);
}
section.contact.triangle::after {
	border-top-color: var(--base-100);
}
section.contact h2 {
	margin: 2rem 0 0;
	display: flex;
	font-weight: var(--fw-h-bold);
	text-transform: uppercase;
	white-space: nowrap;
	width: 100%;
	line-height: 1;
	gap: 1rem;
	align-items: center;
}
section.contact h2::after {
	content: '';
	height: 2px;
	background-color: var(--contrast-200);
	border-radius: 4px;
	width: 100%;
	position:relative;
	top: -.25rem;
}

section.contact p {
	margin: 0;
	line-height: 1;
	user-select: all;
}
section.contact .buttons {
	margin: 0;
	--height: fit-content;
}
section.contact > .col {
	width: 50%;
}
.pricing p {
	margin:0;
}
.pricing h3 {
	margin: 4rem 0 0 0;
}
.pricing > .group {
	--wrap: wrap;
}
@media (min-width: 768px) {
	.pricing > .group {
		--wrap: nowrap;
	}
	.pricing > .group > .col {
		width: 50%;
	}
}

span.logo .icon-logo-triangle {
	background-color: var(--action-0);
	--w:4rem;
}
span.logo .icon-logo-text-only {
	--w: 8rem;
}
a .icon-logo-text-only {
	background-color: var(--contrast);
}
a:hover .icon-logo-text-only {
	background-color: var(--action-0);
}
span.logo:hover .icon-logo-triangle {

}

.loop {
	max-width: var(--full);
	overflow-x: auto;
	padding: 1rem 0;
	touch-action: pan-x pan-y;
}

.loop .item-grid.item-grid {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	position: relative;
}
.loop .item-grid.item-grid figure {
	margin: 0;
}
.loop .item-grid .item:nth-of-type(odd) figure {
	top: -1rem;
}

.loop .item-grid .item.item {
	width: 50vw;
}

@media (min-width: 768px){
	.loop .item-grid .item.item {
		width: 25vw;
	}
}

.feed.item[data-timeline] .images {
	padding: 0;
}
.feed.item details summary {
	position: relative;
	top: 0;
}

.directory-list .image {
	position: relative;
}
.directory-list .image .icon {
	transform: rotate(90deg);
	--w: 40px;
	color: var(--action-0);
	position: absolute;
	left: calc(50% - 15px);
}
body.progress .term-list li {
	display: flex;
	gap: .5em;
	align-items: center;
}

.timeline.terms {
	width: 100%;
}


.loop .item-grid .progress {
	aspect-ratio: 3/2;
	position: relative;
}

.loop .item-grid .progress figure {
	width: 100%;
	height: 100%;
	display: flex;
	gap: .125rem;
	background-color: var(--action-0);
	position: relative;
}

.loop .item-grid .progress figure span {
	position: absolute;
	width: 50%;
	text-transform: uppercase;
	background-color: rgba(var(--action-rgb),var(--op-4));
	color: var(--action-contrast);
	padding: 0 .25rem;
}

.loop .progress figure img {
	max-width: 50%;
	object-fit: cover;
}

figure .after {
	top: 0;
	right:0;
}

figure .before {
	bottom: 0;
	left: 0;
}

[data-field="goal"] fieldset {
	grid-template-columns: repeat(1, 1fr)!important;
}


blockquote {
	--background: rgb(var(--base-100));
	--border: rgb(var(--action-0));
	line-height: 1.2;
	padding: var(--btn);
	border-radius: 4rem;
	background-color: var(--background);
}

blockquote .content {
	margin: 12px auto;
	max-width: min(680px, 80vw);
	position: relative;
	font-family: var(--heading);
	font-weight: var(--fw-h-bold);
	padding: 3rem 2.5rem;
	border-radius: var(--radius-outer);
	border: 2px solid var(--border);
}

blockquote .content::before,
blockquote .content::after {
	position: absolute;
	content: '';
	left: 50px;
}

blockquote .content::before {
	width: 80px;
	border: 6px solid var(--background);
	bottom: -3px;
	z-index: 2;
}

blockquote .content::after {
	border: 2px solid var(--border);
	border-radius: 0 100% 0 0;
	width: 60px;
	height: 60px;
	bottom: -60px;
	border-bottom: 0;
	border-left: 0;
	z-index: 3;
}

blockquote cite {
	padding: 15px 0 0 12px;
	margin: 0 0 0 150px;
	z-index: 1;
}