/*
Theme Name: philmac-comp
Author: Arvind Sardar
Description: Base Theme
Theme URI: https://arvinds-lab.com
Author URI: https://arvinds-lab.com
Requires PHP: 7.2
License: GPLv2 License
License URI: https://wordpress.org/about/gpl/
Text Domain: summr
Version: 8.0.0
*/

@import url(css/system.css);

/* Josh's Custom CSS Reset: https://www.joshwcomeau.com/css/custom-css-reset/ */
	*, *::before, *::after { box-sizing: border-box; } *:not(dialog) { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; height:auto} input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } #root, #__next { isolation: isolate; } body{overflow-x:clip;}


/* SECTION Primary Areas
**************************************************/
	/* ## Header Area */
		body.solid-header{
			#header-wrap header{
				background-color: var(--swatch-01);
			}
		}
		body.transp-header{
			#header-wrap header{
				background-color: transparent !important;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		#header-wrap-fixed{
			position: fixed;
			z-index: var(--z-top);
			width: 100%;
			top: -100px;
			opacity: 0;
			transition: all 0.6s ease;
		}

/* ## Content Area */
	#areaContent{
		padding-block: 4rem;
		body.transp-header &{
			padding-block: 0;
		}
		.entry-header{
			margin-bottom: var(--unit-lg);
		}
	}
	.container{
		width: 100%;
		max-width: var(--contentMaxWidth);
		margin-inline: auto;
		padding-inline: var(--inset);
	}

/* ## Footer Area
**************************************************/
	footer#siteFooter{
		background-color: #333;
	}

/* !SECTION */

/* ## Layout Global Classes
================================= */

	.is-style-full-width,
	.alignfull {
		margin-left: var(--leftPageMargin) !important;
		margin-right: var(--rightPageMargin) !important;
		width: 100vw;
	}
	.alignright {margin-left: auto;}
	.alignleft {margin-right: auto;}
	.aligncenter {margin-inline: auto;}
	.alignwide {margin-inline: calc((50% - 50vw) * 0.3);}
	.align-narrow{
		max-width: var(--widthNarrow);
		margin-inline: auto;
	}
	.is-style-full-left{
		margin-left: var(--leftPageMargin) !important;
	}
	.is-style-full-right{
		margin-right: var(--rightPageMargin) !important;
	}
	.is-layout-constrained > *{
		max-width: calc(var(--contentMaxWidth) - var(--inset) - var(--inset));
	}

	body.deprecated_page #areaContent{
		position: relative;
		pointer-events: none;
		&:after{
			content: 'This content is archived';
			display: grid;
			place-content: center;
			padding: 20px;
			border: solid 1px black;
			position: absolute;
			inset: 0;
			font-size: var(--txt-xl);
			text-align: center;
			background-color: rgba(205, 205, 205, 0.8);
			z-index: 999;
			backdrop-filter: blur(5px);
		}
	}
	#page-overlay{
		position: fixed;
		z-index: var(--z-mid);
		background-color: hsla(0, 0%, 0%, 1);
		inset: 0;
		display: none;
	}
	#back-to-top{
		width: 35px;
		aspect-ratio: 1;
		bottom: 20px;
		right: 20px;
		background-color: var(--gray10);
		border-radius: 50%;
		display: grid;
		place-content: center;
		padding: 5px;
		svg{
			fill: var(--swatch-01);
			width: 100%;
			height: 100%;
		}
	}
	/* set an offset for scrolling when the header is fixed */
	:target{
		scroll-margin-top: 150px;
	}


/* ## Fonts/Typography
**************************************************/
	/* montserrat */
	@font-face {
		font-family: 'montserrat';
		src: local(''),
			url('fonts/montserrat/Montserrat-VariableFont_wght.woff2') format('woff2');
		font-weight: 1 999;
	}
	/* robotoslab */
	@font-face {
		font-display: swap;
		font-family: 'Roboto Slab';
		font-style: normal;
		font-weight: 400;
		src: url('fonts/robotoslab/roboto-slab-v36-latin-regular.woff2') format('woff2');
	}
	@font-face {
		font-family: 'geogrotesque';
		font-style: normal;
		font-weight: 200;
		src: local(''),
			url('fonts/geogrotesque/Geogrotesque-Lt.woff') format('woff2');
	}
	@font-face {
		font-family: 'geogrotesque';
		font-style: normal;
		font-weight: 400;
		src: local(''),
			url('fonts/geogrotesque/Geogrotesque-Rg.woff') format('woff2');
	}
	@font-face {
		font-family: 'geogrotesque';
		font-style: normal;
		font-weight: 500;
		src: local(''),
			url('fonts/geogrotesque/Geogrotesque-Md.woff') format('woff2');
	}
	@font-face {
		font-family: 'geogrotesque';
		font-style: normal;
		font-weight: 600;
		src: local(''),
			url('fonts/geogrotesque/Geogrotesque-SmBd.woff') format('woff2');
	}
	@font-face {
		font-family: 'geogrotesque';
		font-style: normal;
		font-weight: 700;
		src: local(''),
			url('fonts/geogrotesque/Geogrotesque-Bd.woff') format('woff2');
	}

	html,
	body {
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		-o-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	body {
		font-family: var(--bodyfont);
		font-size: 18px;
		font-weight: 400;
		line-height: 1.5;
		color: var(--gray90);
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-display);
		margin-bottom: var(--unit-md);
		line-height: 1.2;
		font-weight: 700;
		color: var(--swatch-01);
	}
	h1 {
		font-size: 32px;
		font-weight: 800;
		line-height: 1;
		margin-bottom: 32px;
	}
	h2 {
		font-size: 28px;
	}
	h3 {
		font-size: 19px;
	}
	h4 {
		font-size: 20px;
	}
	h5 {
		font-size: 17px;
	}
	h6 {
		font-size: 15px;
	}
	em {
		font-style: normal;
	}
	p {
		margin-bottom: var(--unit-md);
	}
	p:last-child {
		margin-bottom: 0;
	}
	ul, ol {
		margin-bottom: var(--unit-sm);
		padding-inline-start: var(--unit-xs);
		list-style-position: inside;
	}
	li {
		padding-left: 30px;
		text-indent: -30px;
	}
	p + h2,
	p + h3 {
		margin-top: var(--unit-lg);
	}
	big {
		font-size: 125%;
	}
	small {
		font-size: 80%;
	}
	a {
		color: var(--swatch-01);
	}



/* ## Images
**************************************************/
	figure img{
		border-radius: var(--unit-sm);
	}

/* ## Buttons
**************************************************/
	:root :where(.wp-element-button, .wp-block-button__link) {
		background-color: var(--swatch-02);
		&:hover{
			opacity: 0.8;
		}
	}

/* ## Links
**************************************************/
	a{
		color: var(--swatch-01);
		text-underline-offset: 3px;
		&:hover{
			color: var(--swatch-02);
		}
	}


/* ## MODULE: Main Menu
************************************************* */
/* ## Hamburger Button */
.module-hamburger{
	display: none;
	@media(max-width: 1024px){
		display: block;
	}
}

/* ## Hidden Menu
**************************************************/
	section#offscreen-menu-wrap {
		position: fixed;
		inset: 20px;
		visibility: hidden;
		background-color: var(--gray80);
		z-index: var(--z-mid);
		padding: 20vh 50px 50px;
		overflow-y: auto;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		transform: translateX(100%);
		transition: 0.4s;

		.menu-item {
			padding-block: 12px;
			font-weight: 600;
			font-size: var(--txt-lg);

			a {
				/* color: white; */
				text-decoration: none;
			}

			nav.level-2 {
				visibility: hidden;
				background-color: var(--gray70);
				width: 100%;
				height: 100%;
				flex-direction: column;
				position: absolute;
				inset: 0 0 0 100vw;
				padding: 15vh 50px 50px;
				transition: all 0.4s ease;
				display: flex;
			}
			&.active nav.level-2{
				visibility: visible;
				inset: 0 0 0 12px;
			}
		}
	}
	body.hidden-menu-active {
		overflow: hidden;
		section#offscreen-menu-wrap {
			visibility: visible;
			transform: translateX(0);
		}
	}

/* ## Main Level 1 */
#menu_main.level-1 {
	display: flex;
	> .menu-item {
		position: relative;
		&:hover{
			background-color: var(--swatch-02);
			border-radius: var(--unit-xs);
			a{
				color: white;
			}
		}
		&.menu-item-has-children:hover{
			border-radius: var(--unit-xs) var(--unit-xs) 0 0;
		}
		> a{
			padding: 12px 8px;
		}
		.icon--ui{
			width: unset;
			height: unset;
			font-size: var(--txt-sm);
			padding-left: 5px;
			position: relative;
			bottom: -1px;
		}
	}
	a {
		text-decoration: none;
		/* color: white; */
		font-weight: 700;
	}

/* ## Main Level 2 */
	nav.level-2 {
		background-color: var(--swatch-02);
		position: absolute;
		z-index: 999;
		text-align: left;
		width: 230px;
		top: 100%;
		border-radius: 0 8px 8px 8px;
		overflow: hidden;
		padding-block: 12px;
		display: none;
		opacity: 0;
		.menu-item a{
			padding: 6px 12px;
			&:hover{
				background-color: var(--swatch-01);
			}
		}
	}
}

/* ## Submenu Animation
**************************************************/
#menu_main.level-1 > .menu-item-has-children:hover{
	nav.level-2 {
		display: block;
		opacity: 1;
		transition: all 0.4s ease;
		@starting-style{
			top: 130%;
			opacity: 0;
		}
		.menu-item{
			transform: translate(0);
			opacity: 1;
			transition: all 1s ease calc(0.05s * var(--index));
			@starting-style{
				transform: translateY(10px);
				opacity: 0;
			}
		}
	}
}



/* ## MODULE: Hamburger Menu
**************************************************/
	#hamburger-button {
		cursor: pointer;
		transition: all 0.4s ease;
		position: relative;
		display: flex;
		column-gap: 10px;
		align-items: center;
		z-index: 101;
		padding: 5px;
		font-weight: 600;
		color: #fff;
	}
	#hamburger-button .label:before {
		/* content: "Menu"; */
	}
	#hamburger-button.active .label:before {
		/* content: "Close"; */
	}
	#hamburger-button .bars {
		width: 25px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		gap: 5px;
	}
	#hamburger-button .bar {
		height: 2px;
		background-color: #fff;
		transition: all 0.4s ease;
		opacity: 1;
	}
	#hamburger-button.active .bar2 {
		opacity: 0;
		transform: rotate(20deg);
	}
	#hamburger-button.active .bar1 {
		transform: rotate(45deg);
		top: 7px;
		position: relative;
	}
	#hamburger-button.active .bar3 {
		transform: rotate(-45deg);
		top: -7px;
		position: relative;
	}




/* ## MODULE: Pagination
**************************************************/
	.pagination{
		margin-top: 30px;
		text-align: right;
		.page-numbers{
			color: white;
			background-color: var(--swatch-02);
			border: solid 1px var(--swatch-02);
			text-decoration: none;
			line-height: 1;
			display: inline-block;
			transition: all 0.3s ease;
			padding: 6px 18px;
			border-radius: 99px;
			&:hover:not(.current){
				background-color: white;
				color: var(--swatch-02);
			}
		}
		.page-numbers.current{
			opacity: 0.5;
			cursor: default;
		}
	}

/* ## MODULE: Search Results
**************************************************/
	#search-results{
		max-width: 550px;
		.item{
			padding-block: 12px;
		}
		.post-title{
			margin-bottom: 6px;
		}
		.post-meta{
			font-size: var(--txt-sm);
			margin-bottom: 6px;
		}
		.post-tags{
			display: flex;
			column-gap: 20px;
		}
		.post-excerpt{
			margin-bottom: 6px;
			font-size: var(--txt-sm);
		}
		.post-link{
			display: none;
		}
	}



/* ## If Admin Bar
================================= */
	body.scrolled.admin-bar{
		#header-wrap-fixed{
			top: 32px;
		}
	}

/* ## CONTEST PLUGIN STYLES
================================= */
	#totalcontest{
		.totalcontest-share{
			padding: 0 0 0 20px!important;
			margin-top: 20px !important;
			.totalcontest-share-service {
				flex: none !important;
				padding-left: 0 !important;
				svg{
					fill: var(--swatch-01) !important;
				}
			}
		}
		.totalcontest-participate{
			.totalcontest-form-page{
				display: grid;
				grid-template-columns: 1fr 1fr;
				label.totalcontest-form-field-label{
					font-size: 16px !important;
					font-weight: 600 !important;
				}
				.terms,
				.totalcontest-column-full:has(.wide){
					grid-column: span 2;
				}
			}

		}
		.totalcontest-vote{
			.totalcontest-buttons{
				display: block !important;
				button.totalcontest-button{
					width: auto !important;
					padding: 12px 28px !important;
				}
			}
		}
		.totalcontest-submission{
			.totalcontest-submission-content-block-type-image{
				img{
					object-fit: contain;
					max-height: 800px;
					max-width: 800px;
				}
			}
		}
		.totalcontest-submission-stats{
			display: none !important;
		}
	}
	.addtoany_list.a2a_kit_size_32 a {
		font-size: 16px;
		text-decoration: none;
	}


	/* from main site */
	/* ##  Footer
**************************************************/
	#zone__footer {
		color: white;
		background-image: url("https://www.philmac.com.au/wp-content/themes/philmac/assets/images/footer-endcap.svg");
		background-position: left top -1px;
		background-repeat: no-repeat;
		background-size: 170px auto;
		h3, a {
			color: white;
		}
		.site-logo img {
			width: 200px;
		}
		.socials a {
			width: 40px;
			svg{
				width: 100%;
				max-height: 100%;
			}
		}
	}
	.bg-color_01 {
		background-color: #103c78;
	}


	/* Additional repsonsive styles for mobile/tablet for dog competition forms(uses Total Contest plugin) */
	@media only screen and (max-width: 810px) {
		#zone__footer {
			background-size: 90px auto;
		}
		#totalcontest {
			.totalcontest-participate {
				.totalcontest-form-page {
					grid-template-columns: 1fr;
					.terms,
					.totalcontest-column-full:has(.wide) {
						grid-column: span 1;
					}
				}
			}
		}
	}