/*
 Theme Name:     LCI Web Theme
 Theme URI:      https://lci.ca.gov/
 Description:    A LCI Core child theme.
 Author:         Webmaster
 Author URI:     https://lci.ca.gov/
 Template:       lci-core
 Version:        1.0.0
 License:        GPLv2 or later
 License URI:    http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:    lci-web-theme
*/
/* CSS Document - LCI styles that overwrite the template CSS code*/
:root
	{
	/* Display-0 */
	--display-0-xs: 400 2.00rem/2.500rem 'Merriweather', Georgia, serif;
	--display-0-md: 700 2.50rem/3.00rem 'Merriweather', Georgia, serif;
	--display-0-lg: 700 3.00rem/3.375rem 'Merriweather', Georgia, serif;
	/* Display-1 */
	--display-1-xs: 400 1.875rem/2.250rem 'Merriweather', Georgia, serif;
	--display-1-md: 400 2.250rem/2.500rem 'Merriweather', Georgia, serif;
	--display-1-lg: 400 2.500rem/3.000rem 'Merriweather', Georgia, serif;
	/* Display-2 */
	--display-2-xs: 400 1.75rem/2.00rem 'Merriweather', Georgia, serif;
	--display-2-md: 400 2.00rem/2.25rem 'Merriweather', Georgia, serif;
	--display-2-lg: 400 2.25rem/2.50rem 'Merriweather', Georgia, serif;
	/* Display-3 */
	--display-3-xs: 400 1.500rem/1.875rem 'Merriweather', Georgia, serif;
	--display-3-md: 400 1.625rem/2.000rem 'Merriweather', Georgia, serif;
	--display-3-lg: 400 1.875rem/2.250rem 'Merriweather', Georgia, serif;
	/* Display-4 */
	--display-4-xs: 700 1.25rem/1.750rem 'Merriweather', Georgia, serif;
	--display-4-md: 400 1.50rem/1.875rem 'Merriweather', Georgia, serif;
	--display-4-lg: 400 1.50rem/1.875rem 'Merriweather', Georgia, serif;
	/* Display-5 */
	--display-5-xs: 700 1.125rem/1.50rem 'Merriweather', Georgia, serif;
	--display-5-lg: 400 1.125rem/1.50rem 'Merriweather', Georgia, serif;
		
	/* text-0 */
	--text-0-xs: 400 1.250rem/2.25rem 'Roboto', Verdana, sans-serif;
	--text-0-lg: 400 1.500rem/2.50rem 'Roboto', Verdana, sans-serif;
	/* text-1 */
	--text-1-xs: 400 1.125rem/2.00rem 'Roboto', Verdana, sans-serif;
	--text-1-lg: 400 1.250rem/2.25rem 'Roboto', Verdana, sans-serif;
	/* text-2 */
	--text-2-xs: 400 0.875rem/1.250rem 'Roboto', Verdana, sans-serif;
	--text-2-md: 400 1.000rem/1.625rem 'Roboto', Verdana, sans-serif;
	/* text-3 */
	--text-3-xs: 400 0.875rem/1.125rem 'Roboto', Verdana, sans-serif;
	--text-3-md: 400 1.000rem/1.250rem 'Roboto', Verdana, sans-serif;
	/* text-4 */
	--text-4-xs: 400 0.750rem/1.125rem 'Roboto', Verdana, sans-serif;
	--text-4-md: 400 0.850rem/1.250rem 'Roboto', Verdana, sans-serif;
		

--gray-50:  rgba(242,242,243,1);
--gray-100: #dcdcde;
--gray-200: #c3c4c7;
--gray-300: #acafb3;
--gray-400: #7E828A;
--gray-500: #656970;
--gray-600: #60646B;
--gray-700: #50575e;
--gray-800: #3c434a;
--gray-900: #2c3338;
		
--text-black:  #171F21; /*rgba(23,31,33,1)*/
--background-white: rgba(252,252,252,1); /*#FCFCFC*/
	}
/* END VARIABLES */

body {
	font-family: 'Roboto', Verdana, sans-serif;
	color: #171F21;
	background-color: var(--background-white,#FCFCFC);
}
.main-content {
	background-color: var(--background-white,#FCFCFC);
}

/* Display-0 */
.page-header h1 {
	/*
	--display-0-xs: 400 2.00rem/2.500rem 'Merriweather', Georgia, serif;
	--display-0-md: 700 2.50rem/3.00rem 'Merriweather', Georgia, serif;
	--display-0-lg: 700 3.00rem/3.375rem 'Merriweather', Georgia, serif;
	*/
	font: 400 2.00rem/2.500rem 'Merriweather', Georgia, serif;
	@media (min-width: 768px) { 
		font:  700 2.50rem/3.00rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 992px) { 
		font: 700 3.00rem/3.375rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 1280px) { 
		
	}		
}
/* Display-1 */
h1, .h1 {
	/*
	--display-1-xs: 400 1.875rem/2.250rem 'Merriweather', Georgia, serif;
	--display-1-md: 400 2.250rem/2.500rem 'Merriweather', Georgia, serif;
	--display-1-lg: 400 2.500rem/3.000rem 'Merriweather', Georgia, serif;
	*/
	font: 400 1.875rem/2.250rem 'Merriweather', Georgia, serif;
	letter-spacing: -0.1px;
	margin: 0 0 2rem;
	
	& small {
		color: #656970;
		display: block;
		z-index: 1;		
	}
	
	@media (min-width: 768px) { 
		font:  400 2.250rem/2.500rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 992px) { 
		font: 400 2.500rem/3.000rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 1280px) { 
		
	}	
}
/* Display-2 */
h2:not(.h1, .h0, .h3, .h4, .h5), .h2	{
	/*
	--display-2-xs: 400 1.75rem/2.00rem 'Merriweather', Georgia, serif;
	--display-2-md: 400 2.00rem/2.25rem 'Merriweather', Georgia, serif;
	--display-2-lg: 400 2.25rem/2.50rem 'Merriweather', Georgia, serif;
	 */
	font: 400 1.75rem/2.00rem 'Merriweather', Georgia, serif;
	position: relative;
	margin: 2rem 0 1rem;
	letter-spacing: -0.05px;
	&::after {
		content: " ";
		height: 2px;
		width: 100%;
		background: #d24148;
		bottom: -8px;
		display: block;
		position: absolute;
	}
	@media (min-width: 768px) { 
		font:  400 2.00rem/2.25rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 992px) { 
		font: 400 2.25rem/2.50rem 'Merriweather', Georgia, serif;
		text-align: center;
		display: inline-block;
		position: relative;
		margin-right: auto;
		margin-left: auto;
		left: 50%;
		-webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
		-ms-transform: translateX(-50%); /* IE 9 */
		transform: translateX(-50%);	
		max-width: 680px;
		&::before,&::after {
			content: " ";
			height: 2px;
			width: calc((912px - 32px - 100%) / 2);
			right: calc(100% + 16px);
			background: #d24148;
			top: 50%;
			display: block;
			position: absolute;
		}
		&::after {
			left: calc(100% + 16px);
		}
	}
	@media (min-width: 1200px) { 
		max-width: 760px;
		&::before,&::after {
			width: calc((1128px - 32px - 100%) / 2);
		}
	}	
}
.template-sidebar h2 {
	@media (min-width: 992px) {
		&::before,&::after {
			width: calc((616px - 32px - 100%) / 2);
		}
	}
	@media (min-width: 1200px) { 
		&::before,&::after {
			width: calc((858px - 32px - 100%) / 2);
		}
	}
}
/* Display-3 */
h3, .h3, .main-content .card.card-focus .card-title {
	/*
	--display-3-xs: 400 1.500rem/1.875rem 'Merriweather', Georgia, serif;
	--display-3-md: 400 1.625rem/2.000rem 'Merriweather', Georgia, serif;
	--display-3-lg: 400 1.875rem/2.250rem 'Merriweather', Georgia, serif;	
	*/
	font: 400 1.500rem/1.875rem 'Merriweather', Georgia, serif;
	margin: 2rem 0 1rem;
	
	&.header-bar {
		position: relative;
		&::after {
			content: " ";
			height: 1px;
			width: 100%;
			background: #acafb3;
			bottom: -8px;
			display: block;
			position: absolute;
		}
	}
	
	@media (min-width: 768px) { 
		font:  400 1.625rem/2.000rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 992px) { 
		font: 400 1.875rem/2.250rem 'Merriweather', Georgia, serif;
		margin: 2.50rem 0 1.25rem;
		
		&.header-bar {
			text-align: center;
			&::after {
			content: " ";
			display: block;
			height: 2px;
			width: 35%;
			left: 50%;
			-webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
			-ms-transform: translateX(-50%); /* IE 9 */
			transform: translateX(-50%);
			background: none;
			border-bottom: 2px dotted #c3c4c7;				
			}
		}
	}
	@media (min-width: 1280px) { 
		
	}		
}

/* Display-4 */
h4, .h4, h1 small, .main-content .card .card-title, .main-content .cagov-step-list > li, .branding .header-organization-banner a .logo-assets .logo-text .logo-dept {
	/*
	--display-4-xs: 700 1.25rem/1.750rem 'Merriweather', Georgia, serif;
	--display-4-md: 400 1.50rem/1.875rem 'Merriweather', Georgia, serif;
	--display-4-lg: 400 1.50rem/1.875rem 'Merriweather', Georgia, serif;
	*/
	
	font: 700 1.25rem/1.750rem 'Merriweather', Georgia, serif;
	margin: 1.750rem 0 0.875rem;
	
	@media (min-width: 768px) { 
		font:  400 1.50rem/1.875rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 992px) { 
		font: 400 1.50rem/1.875rem 'Merriweather', Georgia, serif;
	}
	@media (min-width: 1280px) { 
		
	}			

}
h1 small {
	margin-bottom: 0px;
}
.card-title {
	margin-top: 0px;
}
/* Display-5 */
h5, .h5, cagov-accordion details summary, .main-content .card.card-doc .card-title, .main-content .card.card-calendar .card-title, .card .list-unstyled p {
	/*
	--display-5-xs: 700 1.125rem/1.50rem 'Merriweather', Georgia, serif;
	--display-5-lg: 400 1.125rem/1.50rem 'Merriweather', Georgia, serif;	
	*/
	font: 700 1.125rem/1.50rem 'Merriweather', Georgia, serif;
	margin: 2rem 0 1rem;
	
	@media (min-width: 768px) { 

	}
	@media (min-width: 992px) { 
		font: 700 1.125rem/1.50rem 'Merriweather', Georgia, serif;
		margin: 2.50rem 0 1.25rem;
		color: #50575e;
	}
	@media (min-width: 1280px) { 
		
	}			
	
}

		
/* text-0 */
.text-0, .main-content .card.card-calendar .card-date, .page-header .page-description {
	/*
	--text-0-xs: 400 1.250rem/2.25rem 'Roboto', Verdana, sans-serif;
	--text-0-lg: 400 1.500rem/2.50rem 'Roboto', Verdana, sans-serif;
	*/
	font: 400 1.250rem/2.25rem 'Roboto', Verdana, sans-serif;
	@media (min-width: 768px) { 

	}
	@media (min-width: 992px) { 
		font: 400 1.500rem/2.50rem 'Roboto', Verdana, sans-serif;
	}
	@media (min-width: 1280px) { 
		
	}			
}

/* text-1 */
p, .main-content li, .main-content dd, main-content dt, .text-1 {
	/*
	--text-1-xs: 400 1.125rem/2.00rem 'Roboto', Verdana, sans-serif;
	--text-1-lg: 400 1.250rem/2.25rem 'Roboto', Verdana, sans-serif;
	*/
	font: 400 1.125rem/2.00rem 'Roboto', Verdana, sans-serif;
	margin-bottom: 1rem;
	@media (min-width: 768px) { 

	}
	@media (min-width: 992px) { 
		font: 400 1.250rem/2.25rem 'Roboto', Verdana, sans-serif;
		margin-bottom: 1.125rem;
	}
	@media (min-width: 1280px) { 
		
	}				
}


/* text-2 */
.text-2, .page-description, .page-description p, td, th, .main-content td ol li, .main-content td ul li, .full-width-nav .nav-item .first-level-link, .full-width-nav .nav-item .first-level-btn, .full-width-nav .nav-item .second-level-link, .full-width-nav .nav-item .carrot, .card p, .dot-text p	{
	/*
	--text-2-xs: 400 0.875rem/1.250rem 'Roboto', Verdana, sans-serif;
	--text-2-md: 400 1.000rem/1.625rem 'Roboto', Verdana, sans-serif; 
	*/
	font: 400 0.875rem/1.250rem 'Roboto', Verdana, sans-serif;
	margin-bottom: .750rem;
	@media (min-width: 768px) { 
		font: 400 1.000rem/1.625rem 'Roboto', Verdana, sans-serif;
		margin-bottom: 1rem;
	}
	@media (min-width: 992px) { 
		
		margin-bottom: 1.125rem;
	}
	@media (min-width: 1280px) { 
		
	}
}
th {
	font-weight: 800;
}
.full-width-nav .nav-item .first-level-link, .full-width-nav .nav-item .first-level-btn, .full-width-nav .nav-item .second-level-link, .full-width-nav .nav-item .carrot {
	margin-bottom: 0px;
}
.full-width-nav .main-navigation .top-level-nav .first-level-btn {
	&.has-sub .carrot {
		transform: translatey(-50%); 
		top: 50%;
	}
    &[aria-expanded="true"] .carrot {
		transform: translatey(-50%) rotate(-180deg) ;

	}
}
@media (width >= 992px) {
    .nav-item .first-level-link, .first-level-btn {
        &:hover, &:focus, & .carrot::before {
            color: var(--color-p2, #046b99);
			
        }
    }
}

/* text-3 */
.text-3, .btn, button, .element-button, .on-page-links, .on-this-page, .read-more-link, .large-footer li, .list-links-item .link-grid, .cagov-pagination .cagov-pagination__item, .list-unstyled .h5, .list-unstyled .h6 {
	/*
	--text-3-xs: 400 0.875rem/1.125rem 'Roboto', Verdana, sans-serif;
	--text-3-md: 400 1.000rem/1.250rem 'Roboto', Verdana, sans-serif;
	*/
	font: 400 0.875rem/1.125rem 'Roboto', Verdana, sans-serif;
	@media (min-width: 768px) { 
		font: 400 1.000rem/1.250rem 'Roboto', Verdana, sans-serif;
	}
	@media (min-width: 992px) { 
		
	}
	@media (min-width: 1280px) { 
		
	}	
	
}

/* text-4 */
.text-4,  main .on-page-links li, main .breadcrumb li, caption, figcaption, .card .card-cta, .page-navigation .label, .page-navigation ul li, .branding .header-organization-banner a .logo-assets .logo-text .logo-state {
	/*
	--text-4-xs: 400 0.750rem/1.125rem 'Roboto', Verdana, sans-serif;
	--text-4-md: 400 0.850rem/1.250rem 'Roboto', Verdana, sans-serif;	
	*/
	font: 400 0.750rem/1.125rem 'Roboto', Verdana, sans-serif;
	@media (min-width: 768px) { 
		font: 400 0.850rem/1.250rem 'Roboto', Verdana, sans-serif;
	}
	@media (min-width: 992px) { 
		
	}
	@media (min-width: 1280px) { 
		
	}	
}
figure
	{
	border: none;
	background: rgba(242,242,243,1);
	}
.article-image {
	border-radius: 8px;
}
/*-----------------------*/
/* UTILITY HEADER    	 */
/*-----------------------*/
.utility-header {
	background: #b2373d;
	color: #ffffff;
	& a {
		color: #ffffff;
		&:hover, &:focus  {
			color: #e5cdb1;
		}
	}
}
.utility-header .ca-gov-logo-svg {
    background: url(https://sgc.ca.gov/images/cagov-logo-white.svg) no-repeat !important;
}
figure {
	background: none;
}
/*----------------------*/
/* BRANDING             */
/*----------------------*/
.branding {
    & .header-organization-banner {
        & a {
            & .logo-assets {
                & .logo-text {
                    & .logo-state, & .logo-dept {
                        text-wrap: balance;
						margin: 0px;
                    }
					& .logo-dept {
						font-weight: 800;
					}
                }
            }
        }
    }
}

/*----------------------*/
/* ON PAGE NAVIGATION   */
/*----------------------*/
.page-navigation {
	margin-bottom: 1rem;
	padding-bottom: 1rem;

	& .label {
		text-transform: uppercase;
		margin-top: 2%;
		font-weight: 900;
		letter-spacing: 0.05rem;
		font-size: 0.75rem;
	}
		
	& ul {
		list-style: none;
		& li a {
			padding: 0px;
			&::before {
				display: none;
			}
		}
		@media (min-width: 768px) {
			display: flex;
			display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
			display: -ms-flexbox;  /* TWEENER - IE 10 */
			display: -webkit-flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			& li {
				margin-top: 10px;
				margin-bottom: 10px;
				margin-right: 20px;
				text-wrap: none;
				position: relative;
				&::after {
					content: "";
					position: absolute;
					border-left: 1px dotted #333333;
					right: 1px;
					top: 0;
					height: 100%;
					margin: 0 -11px;
				}
				&:last-child::after {
					border: none;
				}						
			}
		}
	}	
}
/*----------------------*/
/* LANDING PAGE         */
/*----------------------*/
.landing-page {
	background-position: -50000px -50000px;
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	margin-bottom: 36px;
	@media (min-width: 768px) {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 0px;
		min-height: calc(70vh - 175.667px);
		z-index: 0;
	
		& * {
			z-index: +2;
			position: relative;
			color: #ffffff;
		}
	}
	&::before {
		content: "";
		background-image: inherit;
		display: block;
		height: 144px;
		width: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		margin-bottom: 1rem;
		@media (min-width: 768px) {
			height: calc(100% + 1px);
			position: absolute;
			background-image:url('/wp-content/themes/lci-core-child/assets/images/sub-page-arch.svg');
			top: 0px;
			left: 0px;
			right: 0px;
			z-index: +1;
			margin-bottom: 0px;	
		}	
	}
	& h1 {
		
		@media (min-width: 768px) {
			
			color: #FFFFFF;
			font-weight: 900;
			position: relative;
			text-align: left;
			width: 55%;
		}
		& small {
			color: #60646B;
			@media (min-width: 768px) {			
				margin-top: 15px;
				color: #FFFFFF;			
			}
		}
	}
	& .page-description, .page-description p {
		
		@media (min-width: 768px) {
			width: 45%;
		}
	}
	& .breadcrumb {
		& li::after {
			color: #dcdcde;
		}
		& a:hover, a:focus {
			color: #dcdcde;
		}
		@media (min-width: 768px) {
			padding-top: 2%;
			bottom: 0px;
			width: 45%;
		}
	}
	& .page-navigation {
		padding-bottom: 2rem;
		border-bottom: none;
		@media (min-width: 768px) {
			width: 62%;
		}
		& .label {
			color: #ffffff;
			margin-top: 4%;
		}
		& ul {
			& li a {
				&:hover,&:focus {
					color: #dcdcde;
				}
			}
			@media (min-width: 768px) {
				& li {
					&::after {
						border-left: 1px dotted #FFFFFF;
					}
					&:last-child::after {
						border-left: none;
					}
				}
			}
		}	
	}
}
.homepage .landing-page {
	@media (min-width: 768px) {
		min-height: calc(90vh - 175.667px);
		&::before {
			background-image:url('/wp-content/themes/lci-core-child/assets/images/landing-page-arch.svg');
		}
		& h1 {
			padding-top: 8%;
			@media (min-width: 768px) {
				width: 61%;
			}
		}
	}
	& .page-navigation {
		@media (min-width: 768px) {
			width: 50%;
		}
	}
}
/*-----------------------*/
/* LISTS  				 */
/*-----------------------*/
.wp-block-list, .accordion-body, .collapse {
	& li {
		margin-bottom: 0.5em;
		postion: relative;
	}
	& ol, & ul {
		margin-top: 0.5em;
	}
	& ul, & ol {
		margin-top: 0.5em;
	}
	& ul {
		padding-left: 0px;
		& li::before {
			font-weight: 400;
			color: #7E828A;
			content: "\f0da";
		}
		&  ul li::before {
			content: "\f105";
		}
	
	}
	& p + ol, & p + ul {
		margin-top: 0em;
	}
}
ul.wp-block-list li,  .wp-block-list ul > li, .accordion-body ul > li, .collapse ul > li{
	list-style: none; 
	position: relative;
	padding-inline-start: 1em;
	
	&::before {
		font-family: "Font Awesome 6 Pro";
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		font-size: 0.9em;
		/*line-height: 1;*/
		font-weight: 900;
		color: #3c434a;
		content: "\f0da";
		position: absolute;
		left: 2px;		
	}
}
ul.wp-block-list, ul.wp-block-list ul, ol.wp-block-list ul {
	padding-left: 0em;
}
ol.wp-block-list, ol.wp-block-list ol, ul.wp-block-list ol {
	padding-inline-start: 1.25em;
}
ol.wp-block-list li {
	padding-inline-start: 0.5em;
}
.wp-block-list ul li::before {
	font-weight: 400;
	color: #7E828A;
	content: "\f0da";
}
.wp-block-list ul ul li::before {
	content: "\f105";
}

ol {
	&.list-alpha-lower, &.list-alpha {
		list-style-type: lower-alpha;
	}
	& .list.list-alpha-upper {
		list-style-type: upper-alpha;
	}
	& .list-roman-lower {
		list-style-type: lower-roman;
	}
	& .list.list-roman-upper {
		list-style-type: upper-roman;
	}
}
.tabs [role="tablist"] li {
	margin-bottom: 0px;
	padding-left: 0px;
	&::before {
		content: none;
	}
}
/*--------------------------*/
/* PROGRESS BAR             */
/*--------------------------*/
.progress-bar {
	background-color: var(--color-p2, #046b99);
}
/*--------------------------*/
/* PROGRESS BAR             */
/*--------------------------*/
.progress-bar {
	background-color: var(--color-p2, #046b99);
}
/*-----------------------------------*/
/* NUMBER COUNTER & COUNTDOWN TIMER  */
/*-----------------------------------*/
.stat-counter, .countdown-text {
	font-family: 'Roboto', Verdana, sans-serif;
}


/*--------------------------*/
/* LIST-LINKS               */
/*--------------------------*/
.list-links-item {
	&.button {
		margin-bottom: 8px;
	}
	& .link-grid {
		font-weight: 800;
	}
}

/*-------------------------*/
/* ACCORDION               */
/*-------------------------*/
cagov-accordion details summary {
	margin: 0px;
}
/*-------------------------*/
/* PAGINATION              */
/*-------------------------*/
cagov-pagination .cagov-pagination__item , cagov-pagination .cagov-pagination__item a:focus {
	& a:hover, & a:focus, &.cagov-pagination-current a {
		box-shadow: none !important; 
		background-color: #eeeeee;
		border-radius: 4px;		
	}
}
/*-------------------------*/
/* CARDS                   */
/*-------------------------*/
.main-content .card {
	padding: 0px;
	margin-bottom: 18px;
	border-radius: 6px;
	overflow: initial;
	background: rgba(255,255,255,0);
	& .card-body {
		padding: 9px 18px 18px;
	}
	& .card-title {
		margin: 0px;
		text-decoration: none;
	}
	& a.link-before, .card-title a {
		&::before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			border-radius: 6px;
			background: rgba(242, 242, 243, 0);
			transition: all 0.2s;
			box-shadow: 0px 0px 9px -3px rgba(23, 33, 32, 0);		

		}

		&:hover::before {
			background: rgba(242, 242, 243, 0);
			transition: all 0.5s;
			box-shadow: 0px 0px 9px -3px rgba(23, 33, 32, 0.6);			
		}
	}
	& .card-cta {
		color: #50575e;
		margin: 16px 0px 0px;
		&::after {
			font-family: "Font Awesome 6 Pro";
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			font-weight: 900;
			color: #656970;
			margin-left: 0.5rem;
			
			content: "\f35d";
			font-size: 90%;
		}
		&.cta-external::after {
			content: "\f35d";
		}
		&.cta-download::after {
			content: "\f019";
			font-weight: 400;
		}
	}
	& .card-button {
		display: inline-block;
		padding: .375rem .75rem;
		border: 1px solid var(--color-p2, #046b99);
		border-radius: 0.375rem;
		color: var(--color-p2, #046b99);
		margin-top: 8px;
	}
	& .card-body {
		& a[href*="lci.ca.gov"], & a[href*="lci-web-prod"] {
			& ~ .card-cta::after {
				content: "\f105";
			}
		}
		& a[href$=".pdf"], & a[href$=".xls"], & a[href$=".doc"],  & a[href$=".docx"],  & a[href$=".xlsx"], & a[href$=".zip"] {
			& ~ .card-cta::after {
				content: "\f019";
				font-weight: 400;
			}
		}

	}
	& .card-img, & .card-img img {
		/*border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;*/
		width: 100%;
		height: 125px;
		object-fit: cover;
		& ~ .card-body {
			& p, & .lci-link {
				text-align: center;
			}			
		}
	}
	& .card-icon {
		font-size: 60px;
		line-height: 1;
		margin: 16px auto 0;
		color: var(--color-p2, #046b99);
		@media (min-width: 768px) { 
			font-size: 83px;
			margin: 22px 0 0;
		}
		@media (min-width: 992px) { 

		}
		@media (min-width: 1280px) { 

		}
		& ~ .card-body {
			& p, & .lci-link {
				text-align: center;
			}			
		}
	}
	&.card-side, &.card-side-sm, &.card-doc {
		
		& > .wp-block-group__inner-container {
			display: flex;
			& .card-title {
				margin: 0px;
			}
			& .card-icon , & .card-img {
				flex: 0 0 128px;
				display: block;
				margin: 9px auto 0px;
			}
			& .card-img {
				width: 80px;
				height: 80px;
				max-width: 80px;
				max-height: 80px;
				margin: 12px 10px 6px;
				object-fit: contain;
			}
			& .card-body {
				flex: 1 1;
				display: block;
				padding-left: 0px;
				& p, & .card-title, & .card-cta {
					text-align: left;
				}
			}
		}
	}
	&.card-side-sm, &.card-doc {
		& > .wp-block-group__inner-container {
			& .card-icon, & .card-img {
				font-size: 24px;
				flex: 0 0 26px;
				margin-top: 10px;
				height: 24px;
				width: 24px;
				@media (min-width: 768px) { 
					font-size: 30px;
					flex: 0 0 52px;
					height: 40px;
					width: 40px;
					margin: 15px auto 0px;
				}
				@media (min-width: 992px) { 

				}
				@media (min-width: 1280px) { 

				}				
			}
			& .card-img {

				@media (min-width: 768px) { 

				}
			}
		}
	}
	&.card-doc {
		margin-bottom: 0px;
	}
	&.card-calendar {
		border: 1px solid #c3c4c7;
		& .card-date {
			color: #7E828A;
			border-bottom: 1px dotted #c3c4c7;
			margin: 0px 0px 8px;
			
		}
		& .card-title {
			margin: 0px 0px 16px;
		}
		& p {
			margin-bottom: 8px;
		}
	}
	&.card-focus {
		background: var(--background-white,#FCFCFC);
		border: 1px solid #7E828A;
		text-align: center;
		margin: 16px auto;
		& .card-body {
			padding: 24px;
			& .card-title {
				text-align: center;
				margin: 0px;
			}
		}
		@media (min-width: 768px) { 
			min-width: 350px;
			width: 90%;
			max-width: 800px;
			& .card-body {
				padding: 24px 42px;
			}
		}
		@media (min-width: 992px) { 

		}
		@media (min-width: 1280px) { 

		}

	}
	&.card-author {
		align-items: center;
		
		& .wp-block-group__inner-container {
			max-width: 425px;
			margin: 0px auto;
		}
	}
	
}
.main-content .card-circle-icon-grid .card .card-img {
	height: 240px;
	max-height: 240px;
	width: 240px;
	max-width: 240px;
	border-radius: 50%;
	display: block;
	margin: 10px auto;
}


.status-publish .card {
	height: 100%;
}

.row-card {
	& .col {
		flex: 0 0 100%;
		@media (min-width: 992px) { 
			flex: 0 0 33.3333%;
			max-width: 33.333%;
		}
	}
}
.template-sidebar .row-card {
	& .col {
		flex: 0 0 100%;
		@media (min-width: 992px) { 
			flex: 0 0 50%;
			max-width: 50%;
		}
	}
}
/*---------------------------*/
/* FOCUS BLOCK               */
/*---------------------------*/
.focus-block {
	min-height: inherit; 
	border-radius: 8px;

	&::after 	{
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: +1;
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.0) 15%);
		background-size: cover;
		background-position: center;
		border-radius: 8px;
	}
	& .card-focus {
		z-index: +2;
		& a.card-title:hover::before {
			z-index:+2;
			box-shadow: 0px 0px 0px 6px var(--color-p4,#bd833c);
		}
	}
}
/*---------------------------*/
/* LIST EVENTS TRACKER       */
/*---------------------------*/
.list-events-past .col {
	margin-bottom: 16px;
}
/*---------------------------*/
/* PROGRESS TRACKER          */
/*---------------------------*/
.main-content .list-unstyled {
	& > li {
		margin-bottom: 0px;
		& .h5 {
			font-weight: 800;
		}
	}
	
}
.main-content .cagov-step-list {
	& > li {
		margin-bottom: 0px;
		margin-top: 0px;
		padding-top: 8px;
		font-weight: 800;
		border-color: var(--color-p4-lighter, #d1a876);
		&::before {
			font-family: 'Roboto', Verdana, sans-serif;
            font-size: 1.625rem;
            font-weight: 700;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;	
			border-color: var(--color-p4-lighter, #d1a876);
		}
	}
	
}
/*--------------------------------*/
/* COLOR GRID                     */
/*--------------------------------*/
.card-color-grid .card:nth-of-type(8n+1),
.card-color-grid .col:nth-of-type(8n+1) .card  {
	& .card-title, & .card-icon {
		color: var(--color-p1, #d24148);
	}
}
.card-color-grid .card:nth-of-type(8n+2),
.card-color-grid .col:nth-of-type(8n+2) .card {
	& .card-title, & .card-icona {
		color: var(--color-p2, #446e95);
	}
}
.card-color-grid .card:nth-of-type(8n+3),
.card-color-grid .col:nth-of-type(8n+3) .card {
	& .card-title {
		color: var(--color-p5-dark, #b55a3f);
	}
	& .card-icon {
		color: var(--color-p5, #d56a4a);
	}
}
.card-color-grid .card:nth-of-type(8n+4),
.card-color-grid .col:nth-of-type(8n+4) .card {
	& .card-title {
		color: var(--color-p6-darker, #517667);
	}
	& .card-icon {
		color: var(--color-p6-dark, #517667);
	}
}
.card-color-grid .card:nth-of-type(8n+5),
.card-color-grid .col:nth-of-type(8n+5) .card {
	& .card-title, & .card-icon {
		color: var(--color-p7, #8f5690);
	}
}
.card-color-grid .card:nth-of-type(8n+6),
.card-color-grid .col:nth-of-type(8n+6) .card {
	& .card-title, & .card-icon {
		color: var(--color-p8, #2b8282);
	}
}
.card-color-grid .card:nth-of-type(8n+7),
.card-color-grid .col:nth-of-type(8n+7) .card {
	& .card-title, & .card-icon {
		color: var(--color-p9, #a7497e);
	}
}
.card-color-grid .card:nth-of-type(8n+8),
.card-color-grid .col:nth-of-type(8n+8) .card {
	& .card-title {
		color: var(--color-p4-darker, #845c2a);
	}
	& .card-icon {
		color: var(--color-p4-dark, #a16f33);
	}
}
.card-color-grid .type-post:nth-of-type(8n+1) .card {
	& .card-title a, & .card-icon {
		color: var(--color-p1, #d24148);
	}
}
.card-color-grid .type-post:nth-of-type(8n+2) .card {
	& .card-title a, & .card-icon, .card-title a {
		color: var(--color-p2, #446e95);
	}
}
.card-color-grid .type-post:nth-of-type(8n+3) .card {
	& .card-title a, & .card-title a {
		color: var(--color-p5-dark, #b55a3f);
	}
	& .card-icon {
		color: var(--color-p5, #d56a4a);
	}
}
.card-color-grid .type-post:nth-of-type(8n+4) .card {
	& .card-title a {
		color: var(--color-p6-darker, #517667);
	}
	& .card-icon {
		color: var(--color-p6-dark, #517667);
	}
}
.card-color-grid .type-post:nth-of-type(8n+5) .card {
	& .card-title a, & .card-icon {
		color: var(--color-p7, #8f5690);
	}
}
.card-color-grid .type-post:nth-of-type(8n+6) .card {
	& .card-title a, & .card-icon {
		color: var(--color-p8, #2b8282);
	}
}
.card-color-grid .type-post:nth-of-type(8n+7) .card {
	& .card-title a, & .card-icon {
		color: var(--color-p9, #a7497e);
	}
}
.card-color-grid .type-post:nth-of-type(8n+8) .card {
	& .card-title a {
		color: var(--color-p4-darker, #845c2a);
	}
	& .card-icon {
		color: var(--color-p4-dark, #a16f33);
	}
}
body .main-content .card { 
	&.card-red {
		& .card-title, & .card-icon {
			color: var(--color-p1, #d24148);
		}
	}
	&.card-blue {
		& .card-title, & .card-icon {
			color: var(--color-p2, #446e95);
		}
	}
	&.card-orange {
		& .card-title {
			color: var(--color-p5-dark, #b55a3f);
		}
		& .card-icon {
			color: var(--color-p5, #d56a4a);
		}
	}
	&.card-green {
		& .card-title {
			color: var(--color-p6-darker, #517667);
		}
		& .card-icon {
			color: var(--color-p6-dark, #517667);
		}
	}
	&.card-purple {
		& .card-title, & .card-icon {
			color: var(--color-p7, #8f5690);
		}
	}
	&.card-teal {
		& .card-title, & .card-icon {
			color: var(--color-p8, #2b8282);
		}
	}
	&.card-violet {
		& .card-title, & .card-icon {
			color: var(--color-p9, #a7497e);
		}
	}
	&.card-yellow {
		& .card-title {
			color: var(--color-p4-darker, #845c2a);
		}
		& .card-icon {
			color: var(--color-p4-dark, #a16f33);
		}
	}
}