/*
Theme Name: PMPL Servidor
Theme URI: 
Description: Intranet para servidores da Prefeitura Municipal de Pedro Leopoldo
Version: 1.0
Author: Samu Nasser
Author URI: 
*/

@layer components {


footer {
	background: var(--blue);
	color: var(--white);
	flex-shrink: 0;
	margin: 0;
	padding: var(--spacing-huge);
	position: relative;
    width: 100vw;
}

footer a, footer a:visited {
	color: var(--white);
}

footer a:hover {
	text-decoration: underline;
}


/* MARK: Ids
*/


#menu {
	box-shadow: var(--shadow);
	display: flex;
	height: 78px;
	justify-content: space-between;
	margin-top: 6px;
	overflow: hidden;
	padding: var(--spacing-medium) var(--spacing-large);
	position: relative;
	z-index: 2;
}

#menu ul.menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-huge);
}

#menu-2 {
	background: var(--off-white);
	position: relative;
	z-index: 1;
}
#menu-2 input[type='checkbox'] {
    display: none;
}

#menu-2 input[type='checkbox']:checked + #menu-secondary {
	animation: grow-down 0.25s ease-out;
	visibility: visible;
}

#menu-2 input[type='checkbox']:not(:checked) + #menu-secondary {
	transform: scaleY(0);
    visibility: hidden;
}

#menu-2 input[type='checkbox']:checked + #menu-secondary li {
	/* animation: fade-in-list 0.3s ease-out 0.05s forwards; */
	animation-delay: calc(sibling-index() * 0.05s);
	opacity: 1;
}

#menu-2 label {
	cursor: pointer;
}

#menu-extras {
	align-items: center;
	display: flex;
	gap: var(--spacing-medium);
}

#menu-secondary {
	background: var(--white);
    border-top: 2px solid var(--dark-blue);
    display: flex;
    flex-direction: column;
    margin: 0;
    overscroll-behavior: contain;
    position: absolute;
    scroll-snap-type: y mandatory;
    transform-origin: top left;
    transition: transform 0.25s ease-out, visibility 0.25s;
    width: min(300px, 100vw);
    z-index: 99;
}

#menu-secondary .sub-menu {
    transform-origin: top left !important;
}

#menu-secondary li {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	line-height: 44px;
	opacity: 0;
	position: static;
}

#menu-secondary li a {
	background: var(--white);
	border-bottom: 1px dotted var(--off-white);
	color: var(--black);
	display: block;
	line-height: 44px;
	padding-left: var(--spacing-huge);
	position: relative;
	z-index: 2;
}

#menu-secondary li a:hover {
	background: linear-gradient(to right, var(--off-white), var(--white));
	/* border-bottom: 2px solid var(--dark-blue); */
	color: var(--dark-blue);
}

#menu-secondary li .sub-menu li {
	padding-left: 0;
}


#menu-top li {
	line-height: 44px;
	position: relative;
	transition: 0.5s;
}

#menu-top li:hover {
	color: var(--black);
}
#menu-top li::after {
	background: var(--blue);
	content: '';
	height: 3px;
	left: 0;
	position: absolute;
	top: 100%;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s;
	width: 100%;
}

#menu-top li:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

#menu-top li:hover a {
	color: var(--blue);
}

/* #search -> form top search */
#search--button {
	background: var(--grey);
	height: 28px;
	mask-image: url('data:image/svg+xml,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="%23000000" stroke="none"><path d="M4470 11700 c-1261 -110 -2368 -843 -2959 -1961 -414 -785 -529 -1723 -315 -2584 237 -951 844 -1771 1688 -2278 1121 -673 2523 -695 3659 -59 119 67 333 204 402 258 l30 24 1965 -1964 c1529 -1528 1977 -1970 2020 -1994 199 -110 430 -72 600 98 169 169 208 403 98 599 -24 44 -466 492 -1994 2021 l-1964 1965 24 30 c54 69 189 279 257 400 427 762 564 1652 388 2517 -115 570 -355 1077 -740 1567 -103 131 -411 441 -539 543 -570 452 -1194 718 -1890 803 -150 19 -583 27 -730 15z m592 -925 c953 -101 1780 -684 2192 -1545 115 -241 187 -467 231 -725 135 -793 -71 -1588 -574 -2212 -96 -120 -295 -318 -414 -413 -412 -329 -897 -529 -1432 -591 -137 -16 -456 -16 -595 0 -529 60 -1024 266 -1440 597 -109 87 -327 305 -414 414 -311 390 -508 848 -583 1355 -25 171 -25 593 0 755 51 330 131 585 269 862 323 647 891 1142 1573 1372 193 66 426 116 620 135 145 14 419 12 567 -4z"/></g></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
	position: absolute;
	position-anchor: --input-search;
	right: calc(anchor(right) + 4px);
	top: calc(anchor(top) + 4px);
	width: 28px;
}

#search--button:hover, #search--input:hover + #search--button, #user:hover {
	background: var(--black);
}

#search--input {
	anchor-name: --input-search;
	line-height: 24px;
	transition: all 0.5s ease-in-out;
}

#user {
	background: var(--grey);
	height: 32px;
	line-height: 30px;
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M128 439.8c36.3 25.3 80.4 40.2 128 40.2s91.7-14.8 128-40.2V432c0-44.2-35.8-80-80-80h-96c-44.2 0-80 35.8-80 80zm-30.6-25.6c8.5-53.4 54.8-94.2 110.6-94.2h96c55.8 0 102.1 40.8 110.6 94.2C455 373.7 480 317.8 480 256c0-123.7-100.3-224-224-224S32 132.3 32 256c0 61.8 25 117.7 65.4 158.2M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0s256 114.6 256 256-114.6 256-256 256"/><path d="M256 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64m0 32c-53 0-96-43-96-96s43-96 96-96 96 43 96 96-43 96-96 96"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
	width: 32px;
}



/* MARK: Classes
*/

.coat-of-arms {
	background: url('../images/brasao.png') 0 0 no-repeat;
    display: block;
    height: 52px;
	margin-bottom: var(--spacing-medium);
    width: 52px;
}

.logo {
    background: url('../images/logo.svg') 0 0 no-repeat;
    background-size: contain;
    display: block;
    height: 46px;
    margin-left: var(--spacing-small);
	margin-top: 3px;
    width: 285px;
}

footer .logo {
    background: url('../images/logo-footer.svg') 0 0 no-repeat;
    background-size: contain;
    display: block;
    height: 32px;
    left: 56px;
	position: relative;
	top: 13px;
    width: 131px;
}


.menu .sub-menu {
	border-top: 2px solid var(--dark-blue);
	height: auto;
	left: 100%;
	min-height: 100%;
	position: absolute;
	/* transform: translate(-300px, 0); */
	/* transform: scaleX(0); */
	transform: translateX(-500px);
	transform-origin: left;
	transition: all 0.3s ease-in;
	top: -2px;
	visibility: hidden;
	width: 300px;
	z-index: -1;
}

.menu li:hover .sub-menu {
	/* animation: enter-left 0.5s ease-out forwards; */
	/* transform: translate(0, 0); */
	/* transform: scaleX(1); */
	/* transition: transform 0.5s cubic-bezier(.45,.28,0.8,.28); */
	transform: translateX(0);
	visibility: visible;
}

.menu .sub-menu li {
	padding-left: var(--spacing-large);
}

.menu-toggle {
	color: var(--grey);
	line-height: 44px;
	padding: 0 var(--spacing-large);
}

.menu-toggle:hover {
	color: var(--black);
}

.menu-toggle:hover + #menu-secondary {
	display: block;
}

.menu-toggle:hover::before {
	background: var(--black);
}

.menu-toggle::before {
	background: var(--grey);
    content: '';
	display: inline-block;
    height: 24px;
	left: 4px;
	margin-right: var(--spacing-small);
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
	position: relative;
	top: 5px;
    width: 24px;
}

.social-media {
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-large);
	line-height: 2;
	position: absolute;
	right: var(--spacing-huge);
	text-transform: uppercase;
	top: var(--spacing-huge);
}

.social-media--icons {
	align-items: center;
	display: flex;
	font-size: 0;
	gap: var(--spacing-medium);
	justify-content: flex-end;
	justify-items: center;
	margin-top: var(--spacing-medium);
}

.social-media--icons a {
	background-size: contain;
	display: block;
	height: 24px;
	width: 24px;
}

.social-media--icons__facebook {
	background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073C24 5.40365 18.629 0 12 0C5.37097 0 0 5.40365 0 12.073C0 18.0988 4.38823 23.0935 10.125 24V15.563H7.07661V12.073H10.125V9.41306C10.125 6.38751 11.9153 4.71627 14.6574 4.71627C15.9706 4.71627 17.3439 4.95189 17.3439 4.95189V7.92146H15.8303C14.34 7.92146 13.875 8.85225 13.875 9.8069V12.073H17.2031L16.6708 15.563H13.875V24C19.6118 23.0935 24 18.0988 24 12.073Z" fill="white"></path></svg>');
}

.social-media--icons__instagram {
	background: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0027 5.8467C8.59743 5.8467 5.85075 8.594 5.85075 12C5.85075 15.406 8.59743 18.1533 12.0027 18.1533C15.4079 18.1533 18.1546 15.406 18.1546 12C18.1546 8.594 15.4079 5.8467 12.0027 5.8467ZM12.0027 16.0004C9.80212 16.0004 8.00312 14.2064 8.00312 12C8.00312 9.7936 9.79677 7.99955 12.0027 7.99955C14.2086 7.99955 16.0022 9.7936 16.0022 12C16.0022 14.2064 14.2032 16.0004 12.0027 16.0004ZM19.8412 5.595C19.8412 6.39295 19.1987 7.03024 18.4062 7.03024C17.6085 7.03024 16.9713 6.38759 16.9713 5.595C16.9713 4.80241 17.6138 4.15977 18.4062 4.15977C19.1987 4.15977 19.8412 4.80241 19.8412 5.595ZM23.9157 7.05166C23.8247 5.12909 23.3856 3.42608 21.9775 2.02298C20.5747 0.619882 18.8721 0.180743 16.9499 0.0843468C14.9689 -0.0281156 9.03112 -0.0281156 7.05008 0.0843468C5.1333 0.175388 3.43068 0.614526 2.02253 2.01763C0.614389 3.42073 0.180703 5.12373 0.0843279 7.0463C-0.0281093 9.02778 -0.0281093 14.9669 0.0843279 16.9483C0.175349 18.8709 0.614389 20.5739 2.02253 21.977C3.43068 23.3801 5.12794 23.8193 7.05008 23.9157C9.03112 24.0281 14.9689 24.0281 16.9499 23.9157C18.8721 23.8246 20.5747 23.3855 21.9775 21.977C23.3803 20.5739 23.8193 18.8709 23.9157 16.9483C24.0281 14.9669 24.0281 9.03314 23.9157 7.05166ZM21.3564 19.0744C20.9388 20.1241 20.1303 20.9327 19.0755 21.3558C17.496 21.9824 13.7481 21.8378 12.0027 21.8378C10.2572 21.8378 6.50396 21.977 4.92984 21.3558C3.88042 20.9381 3.07195 20.1294 2.64897 19.0744C2.02253 17.4946 2.16709 13.7458 2.16709 12C2.16709 10.2542 2.02789 6.50006 2.64897 4.92558C3.06659 3.87593 3.87507 3.06728 4.92984 2.6442C6.50931 2.01763 10.2572 2.16222 12.0027 2.16222C13.7481 2.16222 17.5014 2.02298 19.0755 2.6442C20.1249 3.06192 20.9334 3.87058 21.3564 4.92558C21.9828 6.50541 21.8383 10.2542 21.8383 12C21.8383 13.7458 21.9828 17.4999 21.3564 19.0744Z" fill="white"></path></svg>');
}

.social-media--icons__youtube {
	background: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.4985 6.65992C24.2225 5.61292 23.4092 4.78833 22.3766 4.50849C20.505 4 13 4 13 4C13 4 5.49503 4 3.62336 4.50849C2.59077 4.78837 1.77752 5.61292 1.5015 6.65992C1 8.55768 1 12.5172 1 12.5172C1 12.5172 1 16.4767 1.5015 18.3744C1.77752 19.4214 2.59077 20.2117 3.62336 20.4915C5.49503 21 13 21 13 21C13 21 20.505 21 22.3766 20.4915C23.4092 20.2117 24.2225 19.4214 24.4985 18.3744C25 16.4767 25 12.5172 25 12.5172C25 12.5172 25 8.55768 24.4985 6.65992ZM10.5454 16.1121V8.92225L16.8181 12.5173L10.5454 16.1121Z" fill="white"></path></svg>')
}





@media (max-width: 600px) {
	section {
		padding-left: var(--spacing-small) !important;
		padding-right: var(--spacing-small) !important;
	}
	
	#menu {
		padding: var(--spacing-medium) var(--spacing-small);
	}

	#menu-secondary {
		width: 100vw !important;
	}
	
	#menu-top {
		display: none !important;
	}

	#search--input {
		width: 44px;
	}

	#search--input:focus {
		width: calc(100vw - 96px) !important;
	}
	
	.hero-quick-access {
		flex-wrap: wrap;
		margin-left: 0;
		margin-right: 0;
		padding: var(--spacing-small);	
	}

	.logo {
		background: url('../images/logo-mobile.svg') 0 0 no-repeat;
	}
	
	.menu-item:hover .sub-menu {
		background: var(--white);
		left: 0;
		padding: 0 var(--spacing-large);
		position: absolute;
		width: 100%;
		z-index: 100;
	}
	
	.menu-item:has(.sub-menu) a {
		cursor: pointer;
		pointer-events: none;
	}
	
	.minicard {
		flex: 0 0 calc(50% - var(--spacing-small));
	}

	.services {
		gap: var(--spacing-medium) !important;
	}

	.social-media {
		padding-bottom: var(--spacing-large);
		position: relative;
		right: 0;
		top: 0;
	}

	.social-media--icons {
		justify-content: flex-start;
	}
}

}