/* -----------------------------------------
	CUSTOM - /src/scss/custom.css

	Styles specific to FTB's implementation of State template, v6.4.2
	Updated color of background icons to #046b99.
	(Preferred to use var(--color-p2) but unclear whether this is possible with URL-encoded SVGs)
----------------------------------------- */

/*
.col-lg-3 * {
	font-size: calc(var(--font-size-base, 1rem) - var(--ratio));
}
*/

/* Info callout boxes */
.callout {
	padding: 1rem 2rem;
	background: #F0F0F0;
	margin: 2rem 0;

	& strong { padding: 1rem 0; }
	& p {
		padding: 0.5rem 0 0.5rem 3em;
		margin: 1.5rem 0;
	}
	& ul,
	& li { margin-left: 3rem; }
	& h2 + p,
	& h3 + p,
	& p:first-child,
	& p:only-of-type { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2.5em' height='2.5em' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' fill='%23046b99'/%3E%3C/svg%3E") center left no-repeat; }

	/* We do not use this currently ... should we? Also, the selector &.download means that the container has both classes (callout AND download) */
	&.download h2 + p,
	&.download h3 + p,
	&.download p:only-of-type { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2em' height='2em' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M13 5v6h1.17L12 13.17 9.83 11H11V5h2m2-2H9v6H5l7 7 7-7h-4V3zm4 15H5v2h14v-2z' fill='%23046b99'/%3E%3C/svg%3E"); }

	@media print {border: thin solid gainsboro; padding: 0.5rem !important;}
}

/* Callout boxes specifically for forms */
.form-callout {
	margin: 0;
	background: #F0F0F0;
	border: 1px solid #dee2e6;

	& h3, & h4 { margin-top: 0; }
	& .half { padding: 2rem; }
	& li:not(:last-child) { margin-bottom: 1rem; }
}

/* End of callout definitions */

/* Put Related content in Sidenav? */
.mobile-sidenav h3 { color: white }

/* Icons for contact options (aka Contact Icons) */
.chat, .email, .fax, .hours, .mail, .person, .phone, .relay, .web {
	background-color: transparent;
	background-repeat: no-repeat;
	padding-left: 3em;
	color: var(--gray-900,#3b3a48);
}
/* Non-standard use (e.g., not associated with the definition term in a definition list, is discouraged.
li.chat, li.email, li.fax, li.hours, li.mail, li.person, li.phone, li.relay, li.web {
	padding-left: 2em;
	margin-top: 0.75rem;
}
*/
.chat ~ dd, .email ~ dd, .fax ~ dd, .hours ~ dd, .mail ~ dd, .person ~ dd, .phone ~ dd, .relay ~ dd, .web ~ dd { margin-left: 3em; }

/* I would prefer to set the fill on these to var(--color-p2,#046b99) but need to determine if that's even possible with URL-encoded SVGs */
.chat {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3C/svg%3E") }
.email {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M12 1.95c-5.52 0-10 4.48-10 10s4.48 10 10 10h5v-2h-5c-4.34 0-8-3.66-8-8s3.66-8 8-8 8 3.66 8 8v1.43c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57v-1.43c0-2.76-2.24-5-5-5s-5 2.24-5 5 2.24 5 5 5c1.38 0 2.64-.56 3.54-1.47.65.89 1.77 1.47 2.96 1.47 1.97 0 3.5-1.6 3.5-3.57v-1.43c0-5.52-4.48-10-10-10zm0 13c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E") }
.fax {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M19 8h-1V3H6v5H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zM8 5h8v3H8V5zm8 14H8v-4h8v4zm2-4v-2H6v2H4v-4c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v4h-2z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E") }
.hours {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E") }
.mail {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3C/svg%3E") }
.person {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") }
.phone {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E") }
.relay {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M12.725 12q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812-.338.338-.813.338Zm0-6q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812Q13.2 6 12.725 6Zm2 3q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812Q15.2 9 14.725 9Zm1 3q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812-.338.338-.813.338Zm0-6q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812Q16.2 6 15.725 6Zm2 3q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812Q18.2 9 17.725 9Zm1 3q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812-.338.338-.813.338Zm0-6q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812Q19.2 6 18.725 6Zm2 3q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812Q21.2 9 20.725 9Zm1 3q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812-.338.338-.813.338Zm0-6q-.475 0-.812-.338-.338-.337-.338-.812 0-.475.338-.813.337-.337.812-.337.475 0 .813.337.337.338.337.813 0 .475-.337.812Q22.2 6 21.725 6Zm-.975 15.8q-3.625 0-6.975-1.537-3.35-1.538-5.925-4.113-2.575-2.575-4.112-5.938Q2.2 6.85 2.2 3.2q0-.5.275-.775t.775-.275h5q.35 0 .65.237.3.238.35.563L10 7.2q.05.325-.012.6-.063.275-.238.45l-2.65 2.7q.95 1.6 2.5 3.187 1.55 1.588 3.2 2.613l2.75-2.65q.2-.2.45-.275.25-.075.5-.025l4.45.95q.35.075.6.35.25.275.25.6v5.05q0 .5-.275.775t-.775.275ZM5.85 8.45 7.3 7l-.4-2.2H4.95q.125 1.025.325 1.888.2.862.575 1.762Zm9.45 9.6q.975.425 1.925.65.95.225 1.925.35v.025-2.025l-2.35-.5Zm-9.45-9.6Zm9.45 9.6Z'/%3E%3C/svg%3E") }
.web {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.5em' height='1.5em' viewBox='0 0 24 24' class='m-r-lg'%3E%3Cpath fill='%23046b99' d='M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E") }

/* Run-in lists (can be applied to intro paragraph, if needed */
.run-in {
	padding: 0;

	&, & li {
		display: inline;
		background: none;

		&::after { content: " | "; }
		&:last-child::after { content: "" }
	}
}

/* Dept. Writing Standard: italics ARE NOT allowed on screen */
em { font-weight: bold !important; }
address, em, i, cite, var, dfn { font-style: normal !important; }

/* Custom definitions for ftb-feedback component,
 * based on custom feedback component from CA.gov
 * as published as of Aug. 2025. */

cagov-feedback, ftb-feedback {
	width: 100%;

	& .feedback-form {
		padding: 1rem;
		border-radius: 0.3125rem;
		max-width: var(--w-lg, 1176px);
		margin: 0 auto;
	}
	& .feedback-form-question {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	& .feedback-form-label {
		color: #fff;
		font-size: 1.125rem;
		display: block;
		margin-right: 1rem;
		transition: 0.3s color cubic-bezier(0.57, 0.2, 0.21, 0.89);
		line-height: 3rem;
		width: auto;
		& span {
			line-height: 1.5rem;
			font-weight: 300;
		}
		@media (max-width: 768px) {
			& {
				line-height: unset;
				margin-bottom: 1rem;
			}
		}
	}
	& .feedback-form-button {
		padding: 0.5rem 0.75rem;
		color: var(--primary-dark-color, #003484);
		border: none;
		border-radius: 0.3rem;
		transition: 0.3s background cubic-bezier(0.57, 0.2, 0.21, 0.89);
		cursor: pointer;
		margin: 0 0.5rem 0 0;
		display: inline !important;

		&:hover {
			box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
			text-decoration: underline;
		}
		&:focus { box-shadow: 0 0 0 2px #fff; }
	}
	& .feedback-form-button .feedback-yes { margin-right: 1rem; }
	& .feedback-form-add {
		padding-top: 0;
		display: none;
	}
	& .feedback-form-add-grid {
		position: relative;
		margin-top: 1rem;
		display: inline-flex;
		flex-flow: column;
		align-items: flex-start;
		@media (max-width: 768px) {
			& { display: block; }
		}
	}
	& .feedback-form-textarea {
		width: 100%;
		padding: 1rem;
		margin-bottom: 1rem;
		font-family: "Roboto", sans-serif;
		color: var(--primary-dark-color, #003484);
		max-width: 90%;
		height: 127px;
		width: 600px;
	}
	& .feedback-form-doing,
	& .feedback-form-problem,
	& .feedback-form-thanks {
		display: none;
		color: #fff;
		@media (max-width: 768px) {
			& {
				text-align: left;
				padding-top: 0;
			}
		}
	}
	& .feedback-form-error {
		position: relative;
		top: 100%;
		left: 0;
		display: none;
		font-weight: 300;
		text-align: left;
	}
	
	/* No point in showing this on a printed page */
	@media print { display: none }
}

.printOnly {
	@media screen {display: none}
	@media print {display: block}
}

@media print {
	body {
		position: static !important;
		font-size: 10pt !important;
	}
	.mt-0,
	.mt-4 {
		margin-top: unset !important;
	}

	h1.m-t-0,
	h2,
	h3,
	h4,
	.page-navigation div:first-child {
		font-weight: normal !important;
	}
	h1.m-t-0 {
		font-size: 36pt;
		margin-top: 2.5em !important;
		margin-bottom: 1em;
	}
	h2 {
		font-size: 24pt;
		break-before: page;
	}
	h3 { font-size: 20pt; }
	h4 { font-size: 16pt; }

	/* Make "On this page" pseudo-heading look like an H2 */
	.page-navigation div:first-child {
		color: var(--bs-heading-color);
		font-size: 24pt !important;
	}
	/* This should probably be page-specific.
	.page-navigation + p {float: right; padding-bottom: 3em;}
	*/
	/* Dept writing std allows italics in print. */
	address, em, i, cite, var, dfn {
		font-weight: normal !important;
		font-style: italic !important;
	}
	/* Links are not clickable on a printed page, so they don't need underlines.
	The color and generated href attr (appended by rule below) are sufficient to identify. */
	a {text-decoration: none !important;}
	header,
	.branding .header-organization-banner a .logo-assets {
		min-height: 0;
		& .logo-img { height: 2.5rem; }
		& .logo-text {
			& .logo-state { display: none; }
			& .logo-dept {
				font-size-adjust: 0.4 !important;
				margin: unset;
				padding: unset;
				height: auto;
				line-height: 1;
			}
		}
	}
	.branding, .container { max-width: unset; }
	.bg-primary, .btn-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning {
		background: white !important;
		color: black !important;
		border: none;
		font-weight: normal;
		text-align: left;
	}
	.col-lg-8.col-xl-9, .col-md-4, .col-md-8 { width: 100%; }
	.main-content {
		margin-top: 10em;
		min-height: unset;
	}
	.text-right { text-align: left !important; }
	.p-b-lg.col-md-10.mx-auto { margin: unset !important; }
	li:has(a) { margin-bottom: 0.25rem; }
	.table {
		width: max-content;
		max-width: 100%
	}
	.main-content a[href]:after {
		content: attr(href);
		font-size: 8pt;
		display: block;
		color: black;
		text-decoration: none !important;
	}
	/* Do not display the following (they have no purpose on a printed page */
	.alert-banner,
	.col-lg-3,
	.sidenav-mobile-btn,
	.breadcrumbs,
	.utility-header .flex-row .settings-links,
	.mobile-controls,
	.site-footer,
	.col-lg-4.col-xl-3,
	.global-footer > .container:first-child,
	.main-content a[href^="#"]:after,
	.external-link-icon,
	.return-top.is-visible,
	#navigation,
	#pager {
		display: none;
	}
}