/* General - layout */
:root {
	--valid-color:#8AC74C; /* { readonly: true } */
	--invalid-color: #F34039; /* { readonly: true } */
	--highlight-color: #0066EE; /* { readonly: true } */
	
	--lt-fnt-big: var(--primary); /* { friendly: 'Light Theme Big Title Color', group: 'Colors' } */
	--lt-fnt-co: var(--text); /* { friendly: 'Light Theme Callout Title Color', group: 'Colors' } */
	--lt-fnt-k: var(--inner-bg-alt); /* { friendly: 'Light Theme Title Kicker Color', group: 'Colors' } */
	
	--lt-fnt-1: var(--primary); /* { friendly: 'Light Theme Title 1 Color', group: 'Colors' } */
	--lt-fnt-2: var(--secondary); /* { friendly: 'Light Theme Title 2 Color', group: 'Colors' } */
	--lt-fnt-3: var(--text); /* { friendly: 'Light Theme Title 3 Color', group: 'Colors' } */
	--lt-fnt-4: var(--primary); /* { friendly: 'Light Theme Title 4 Color', group: 'Colors' } */
	--lt-fnt-5: var(--text); /* { friendly: 'Light Theme Title 5 Color', group: 'Colors' } */
	--lt-fnt-6: var(--text); /* { friendly: 'Light Theme Title 6 Color', group: 'Colors' } */
	--lt-fnt-itm: var(--text); /* { friendly: 'Light Theme Title Item Color', group: 'Colors' } */
	--lt-fnt-nt: var(--text); /* { friendly: 'Light Theme Title Note Color', group: 'Colors' } */
	
	--lt-fnt-qte: var(--primary); /* { friendly: 'Light Theme Review Quote Color', group: 'Colors' } */
	--lt-fnt-atr: var(--text); /* { friendly: 'Light Theme Review Author Color', group: 'Colors' } */
	--lt-fnt-phn: var(--primary); /* { friendly: 'Light Theme Phone Number Color', group: 'Colors' } */
	--lt-frm-lbl: var(--text); /* { friendly: 'Light Theme Form Label Color', group: 'Colors' } */
	
	--lt-flr-hdr-clr:  var(--accent); /* { friendly: 'Light Theme Header Flair Color', group: 'Colors' } */
	--lt-bdr-clr: var(--text); /* { friendly: 'Light Theme Border Color', group: 'Colors' } */
	
	--dk-fnt-big: var(--text-alt); /* { friendly: 'Dark Theme Big Title Color', group: 'Colors' } */
	--dk-fnt-co: var(--text-alt); /* { friendly: 'Dark Theme Callout Title Color', group: 'Colors' } */
	--dk-fnt-k: var(--accent-alt); /* { friendly: 'Dark Theme Title Kicker Color', group: 'Colors' } */
	
	--dk-fnt-1: var(--text-alt); /* { friendly: 'Dark Theme Title 1 Color', group: 'Colors' } */
	--dk-fnt-2: var(--text-alt); /* { friendly: 'Dark Theme Title 2 Color', group: 'Colors' } */
	--dk-fnt-3: var(--text-alt); /* { friendly: 'Dark Theme Title 3 Color', group: 'Colors' } */
	--dk-fnt-4: var(--text-alt); /* { friendly: 'Dark Theme Title 4 Color', group: 'Colors' } */
	--dk-fnt-5: var(--text-alt); /* { friendly: 'Dark Theme Title 5 Color', group: 'Colors' } */
	--dk-fnt-6: var(--text-alt); /* { friendly: 'Dark Theme Title 6 Color', group: 'Colors' } */
	--dk-fnt-itm: var(--text-alt); /* { friendly: 'Dark Theme Title Item Color', group: 'Colors' } */
	--dk-fnt-nt: var(--text-alt); /* { friendly: 'Dark Theme Title Note Color', group: 'Colors' } */
	
	--dk-fnt-qte: var(--text-alt); /* { friendly: 'Dark Theme Review Quote Color', group: 'Colors' } */
	--dk-fnt-atr: var(--text-alt); /* { friendly: 'Dark Theme Review Author Color', group: 'Colors' } */
	--dk-fnt-phn: var(--text-alt); /* { friendly: 'Dark Theme Phone Number Color', group: 'Colors' } */	
	--dk-frm-lbl: var(--text-alt); /* { friendly: 'Dark Theme Form Label Color', group: 'Colors' } */
	
	--dk-flr-hdr-clr: var(--accent-alt); /* { friendly: 'Dark Theme Header Flair Color', group: 'Colors' } */
	--dk-bdr-clr: var(--text-alt); /* { friendly: 'Dark Theme Border Color', group: 'Colors' } */

}

/* Light Colors */
@scope ( .lt-bg, .dk-bg :is(.ulk-bg, .alt-bg) ) to (.lt-bg .ulk-bg) {
	
	:scope {
		--background: var(--main-bg);
		--inner-theme: var(--inner-bg);
		
		--blt-clr: var(--buttons);
		--text-color: var(--text);
		--link-color: var(--link);
		--link-hover: var(--text);
		
		--arrw-clr: var(--text-alt);
		--arrw-bg: var(--buttons);
		
		--fnt-t-big: var(--lt-fnt-big);
		--fnt-t-co: var(--lt-fnt-co);
		--fnt-t-k: var(--lt-fnt-k);
		
		--fnt-t-1: var(--lt-fnt-1);
		--fnt-t-2: var(--lt-fnt-2);
		--fnt-t-3: var(--lt-fnt-3);
		--fnt-t-4: var(--lt-fnt-4);
		--fnt-t-5: var(--lt-fnt-5);
		--fnt-t-6: var(--lt-fnt-6);
		--fnt-t-itm: var(--lt-fnt-itm);
		--fnt-t-nt: var(--lt-fnt-nt);
		
		--fnt-qte: var(--lt-fnt-qte);
		--fnt-atr: var(--lt-fnt-atr);
		--fnt-phn: var(--lt-fnt-phn);
		--frm-lbl: var(--lt-frm-lbl);
		
		--flr-hdr-clr: var(--accent);
		
		--bdr-clr: var(--lt-bdr-clr);
	}
	
	&.alt-bg {
		--background: var(--inner-bg);
		--inner-theme: var(--main-bg);
	}
	
	.ulk-bg, .alt-bg {
		--text-color: var(--text-alt);
		--link-color: var(--link-alt);
	}
	
	.ulk-bg {
		--inner-theme: var(--inner-bg-alt);
	}
	
	.alt-bg {
		--inner-theme: var(--main-bg-alt);
	}
	
	.wht-bg {
		--color: var(--text);
		--inner-theme: var(--white);
	}
	
	.clr-swp {
		--link-color: var(--text-color);
		--link-hover: var(--link);
	}
	
	.btn-clr {
		--background: var(--buttons);
		--text-color: var(--text-alt);
		
		&.active {
			--background: var(--main-bg-alt);
			--text-color: var(--text-alt);
		}
		
		@media (hover: hover) and (pointer: fine) {
			&:is(a:hover,a:focus-visible),
			a:is(:hover,:focus-visible) {
				--background: var(--main-bg-alt);
				--text-color: var(--text-alt);
				--link-hover: var(--text-color);
			}
		}
	}
	
	.clr-pry {
		--text-color: var(--primary);
	}
	
	.clr-sec {
		--text-color: var(--secondary);
	}
	
	.clr-acc{
		--text-color: var(--accent);
	}
	
	.clr-lnk {
		--text-color: var(--link);
	}
	
	.clr-txt {
		--text-color: var(--text);
	}
	
	.clr-blk {
		--text-color: var(--black);
	}
	
	.clr-wht {
		--text-color: var(--white);
	}
}

/* Dark Colors */
@scope ( .dk-bg, .lt-bg :is(.ulk-bg, .alt-bg) ) to (.dk-bg .ulk-bg) {
	
	:scope {
		--background: var(--main-bg-alt);
		--inner-theme: var(--inner-bg-alt);
		
		--blt-clr: var(--text-alt);
		--text-color: var(--text-alt);
		--link-color: var(--link-alt);
		--link-hover: var(--text-alt);
		
		--arrw-clr: var(--secondary);
		--arrw-bg: var(--main-bg);
		
		--fnt-t-big: var(--dk-fnt-big);
		--fnt-t-co: var(--dk-fnt-co);
		--fnt-t-k: var(--dk-fnt-k);
		
		--fnt-t-1: var(--dk-fnt-1);
		--fnt-t-2: var(--dk-fnt-2);
		--fnt-t-3: var(--dk-fnt-3);
		--fnt-t-4: var(--dk-fnt-4);
		--fnt-t-5: var(--dk-fnt-5);
		--fnt-t-6: var(--dk-fnt-6);
		--fnt-t-itm: var(--dk-fnt-itm);
		--fnt-t-nt: var(--dk-fnt-nt);
		
		--fnt-qte: var(--dk-fnt-qte);
		--fnt-atr: var(--dk-fnt-atr);
		--fnt-phn: var(--dk-fnt-phn);
		--frm-lbl: var(--dk-frm-lbl);
		
		--flr-hdr-clr: var(--accent-alt);
		
		--bdr-clr: var(--dk-bdr-clr);
	}
	
	&.alt-bg {
		--background: var(--inner-bg-alt);
		--inner-theme: var(--main-bg-alt);
	}
	
	.ulk-bg, .alt-bg {
		--text-color: var(--text);
		--link-color: var(--link);
		
		.btn-clr {
			
			@media (hover: hover) and (pointer: fine) {
				&:is(a:hover,a:focus-visible),
				a:is(:hover,:focus-visible) {
					--background: var(--main-bg-alt);
					--text-color: var(--text-alt);
					--link-hover: var(--text-color);
				}
			}
		}
	}
	
	.ulk-bg {
		--inner-theme: var(--inner-bg);
	}
	
	.alt-bg {
		--inner-theme: var(--main-bg);
	}
	
	.wht-bg {
		--color: var(--text);
		--inner-theme: var(--white);
	}
	
	.clr-swp {
		--link-color: var(--text-color);
		--link-hover: var(--link-alt);
	}
	
	.btn-clr {
		--background: var(--buttons);
		--text-color: var(--text-alt);
		
		&.active {
			--background: var(--main-bg);
			--text-color: var(--text);
		}
		
		@media (hover: hover) and (pointer: fine) {
			&:is(a:hover,a:focus-visible),
			a:is(:hover,:focus-visible) {
				--background: var(--main-bg);
				--text-color: var(--text);
				--link-hover: var(--text-color);
			}
		}
	}
	
	.clr-pry {
		--text-color: var(--primary-alt);
	}
	
	.clr-sec {
		--text-color: var(--secondary-alt);
	}
	
	.clr-acc{
		--text-color: var(--accent-alt);
	}
	
	.clr-lnk {
		--text-color: var(--link-alt);
	}
	
	.clr-txt {
		--text-color: var(--text-alt);
	}
	
	.clr-blk {
		--text-color: var(--black);
	}
	
	.clr-wht {
		--text-color: var(--white);
	}
}

.dk-bg .bg-bx.lk-bg {
	background-color: transparent;
	
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.10);
        z-index: -1;
	}
}

section header > *:first-child + em {
    margin-top: var(--g-cnt-ttl-ttl-m);
    display: block;
}

/* Apply It */
:where(.lt-bg, .dk-bg) {
	
	background-color: var(--background);
	color: var(--text-color);

	.bg-bx:not(.no-bg,.bdr-bg) {
		background-color: var(--inner-theme);
		color: var(--text-color);
		
		.bg-bx {
			--inner-theme: var(--background);
		}
	}
	
	a, button, .fake-lnk {
		color: var(--link-color);
	}
	
	.fake-lnk {
    	transition: color var(--g-trn-sp) var(--g-trn-tf) 0s;
	}
	
	:where( h1, h2, h3, h4, h5, h6, [class*='fnt_']:not(a), header > *:first-child:not(a), header > *:nth-child(2):not(p), ) {
		color: var(--title-color);
	}
	
	.fnt_t-big {
		--title-color: var(--fnt-t-big);
	}
	
	.fnt_t-sb {
		--title-color: var(--fnt-t-sb);
	}
	
	.fnt_t-co {
		--title-color: var(--fnt-t-co);
	}
	
	:where(h1 > em, .fnt_t-k) {
		--title-color: var(--fnt-t-k);
	}
	
	h1,
	.fnt_t-1,
	header > *:first-child:not( a, [class*='fnt_t'] ),
	.cnt-stl:not(.xpnd) > :first-child:is( h1, h2, h3, h4, h5, h6 ) {
		--title-color: var(--fnt-t-1);
	}
	
	h2,
	.fnt_t-2,
	header > *:nth-child(2):not(p),
	.cnt-stl:not(.xpnd) > :nth-child(2):is( h2, h3, h4, h5, h6 ) {
		--title-color: var(--fnt-t-2);
	}
	
	h3, .fnt_t-3 {
		--title-color: var(--fnt-t-3);
	}
	
	h4, .fnt_t-4 {
		--title-color: var(--fnt-t-4);
	}
	
	.cnt-stl li:has(> h4:only-child)::marker {
		color: var(--fnt-t-4);
	}
	
	h5, .fnt_t-5 {
		--title-color: var(--fnt-t-5);
	}
	
	h6, .fnt_t-6, .fnt_t-nt {
		--title-color: var(--fnt-t-6);
	}
	
	.fnt_t-itm {
		--title-color: var(--fnt-t-itm);
	}
	
	.fnt_qte {
		--title-color: var(--fnt-qte);
	}
	
	.fnt_atr {
		--title-color: var(--fnt-atr);
	}
	
	[href^=tel]:not([class*="btn"]) {
		--link-color: var(--fnt-phn);
		--link-hover: var(--fnt-phn);
	}
	
	.cnt-stl ul li:before {
		background-color: var(--blt-clr);
	}
	
	.tag:not(:has(a)), .tag a {
		--tag-border-opacity: .3;
		border-color: hsl(from var(--text-color) h s l / var(--tag-border-opacity));
		border-width: 1px;
        border-style: solid;
	}
	
	.btn-clr {
		background-color: var(--background);
		color: var(--text-color);
	}
	
	[class*="clr"] {
		color: var(--text-color);
		
		&.clr-btn {
			--text-color: var(--buttons);
		}
	}
	
	[data-role="arrows"] button:not(.button) {
		color: var(--link-color);
	}
	
	[data-role="arrows"] button.button {
		color: var(--arrw-clr);
		background-color: var(--arrw-bg);
	}
	
	@media (hover: hover) and (pointer: fine) {
		
		a:is(:hover, :focus-visible),
		[data-role="arrows"] button:not(.button):is(:hover, :focus-visible),
		.fake-lnk:is(:hover, :focus-visible) {
			color: var(--link-hover);
		}
		
		[data-role="arrows"] button.button:is(:hover, :focus-visible) {
			opacity: .4;
		}
	}
}

.transparent-bg {
	background-color: transparent;
	box-shadow: none;
}