/**
 * Default stylesheet for the P&C Federation Member Site
 * 
 *  Date        Author		    Change
 * 	2024-11-25	David Hood		Created new theme-based scripts
 *  2025-01-21	David Hood		Adjusted styles per client feedback
 * 	2025-01-22	David Hood		Swapped left and right panels for visibility on all pages & renamed the template
 * 
 * Copyright © 2025 by Federation of Parents and Citizens Associations of New South Wales
 * */

:root {
	/* PandC primary colour swatches */
	--col-infiniteblue: #2e3075;
	--col-teal: #3fc0c3;
	--col-orange: #f15a29;
	--col-white: #ffffff;
	--col-black: #000000;
	--col-black85: #262626;
	--col-black60: #666666;
	--col-black40: #999999;
	--col-black20: #cccccc;

	/* PandC primary secondary swatches */
	--col-midblue: #3c54a5;
	--col-cyan: #27aae1;
	--col-darkgreen: #009e9c;
	--col-palestblue: #87c1e9;
	--col-darkorange: #e64b38;
	--col-paleorange: #ff9015;

	/* Panel defaults */
	--panel-background: var(--col-midblue);

	/* Calculate the responsive range based on the site's maximum width */
	--vw-act: min(100vw, 1920px);
	--font-size: max(16px, calc(calc(0.003233 * var(--vw-act)) + 12.793103px));		/* Font 16px when screen-w < 991px. Font 16px-19px when screen-w >=992px && <=1920px. Font 19px when screen-w > 1920px */

	--font-header: 'Arial Black', Arial, Helvetica, sans-serif;
	--font-header-weight: 700;

	--font-regular: Arial, Helvetica, sans-serif;
	--font-regular-weight: 400;

	--gap-standard: 40px;
	--gap-panel: 20px;
	--header-height: 170px;
	--radius-standard: 6px;
}

/* Generic elements */
body {
	font-family: var(--font-regular);
	font-weight: var(--font-regular-weight);
	font-size: var(--font-size);
	color: var(--col-black85);
	line-height: 1.5em;
}


h1, h2 {
	font-family: var(--font-header);
	font-weight: var(--font-header-weight);
	color: var(--col-infiniteblue);
	line-height: 1.3em;

	&:first-child {
		margin-top: 0px;
	}

	&:last-child {
		margin-bottom: 0px;
	}
}

h3, h4, h5, h6 {
	font-family: var(--font-regular);
	font-weight: var(--font-regular-weight);
	color: var(--col-black);
	line-height: 1.3em;

	&:first-child {
		margin-top: 0px;
	}

	&:last-child {
		margin-bottom: 0px;
	}
}

h1 {
	font-size: 2.3em;
}
h2 {
	font-size: 2.0em;
}
h3 {
	font-size: 1.8em;
}
h4 {
	font-size: 1.6em;
}
h5 {
	font-size: 1.4em;
}
h6 {
	font-size: 1.2em;
}
a {
	color: var(--col-infiniteblue);

	&:is(:link, :visited) {
		color: var(--col-infiniteblue);
	}
	&:is(:hover, :active) {
		color: var(--col-black60);
		text-decoration: none;
	}
}

p {
	&:last-child {
		margin-bottom: 0px;
	}
}

input, button, select, textarea {
	font-family: var(--font-regular);
	font-weight: var(--font-regular-weight);
}

/* Generic classes */
.TextButton {								/* Override */
	color: var(--col-white);
	border: none;
	font-weight: 400;
	border-radius: var(--radius-standard);

	--col-button-bg: var(--col-infiniteblue);

	&.PrimaryButton {
		--col-button-bg: var(--col-orange);
	}

	background-color: var(--col-button-bg);

	&:is(:link, :visited) {
		background-color: var(--col-button-bg);
		color: var(--col-white);
	}
	&:is(:hover, :active) {
		background-color: var(--col-black);
		color: var(--col-white);
	}
}

.PanelField {								/* Override */
	.PanelFieldValue {
		> textarea {
			width: 100%;
		}
		> input[type="text"] {
			width: 100%;
		}
		&:has(> :is(input[id$="TextAddress1"], input[id$="TextAddress2"], input[id$="TextAddress3"], input[id$="TextCity"], input[id$="TextEmail"])) {
			width: 70%;
		}
	}
}

.pandc-spacer {
	display: block;
	height: var(--gap-standard);

	&.double {
		height: calc(var(--gap-standard) * 2);
	}
}

.pandc-spacer-after {
	margin-bottom: var(--gap-standard);

	&.double {
		margin-bottom: calc(var(--gap-standard) * 2);
	}
}

.pandc-bg-cyan {
	--panel-background: var(--col-cyan);
}

.pandc-bg-midblue {
	--panel-background: var(--col-midblue);
}

.pandc-bg-orange {
	--panel-background: var(--col-orange);
}

.pandc-bg-paleorange {
	--panel-background: var(--col-paleorange);
}

.pandc-bg-darkorange {
	--panel-background: var(--col-darkorange);
}

.pandc-bg-teal {
	--panel-background: var(--col-teal);
}

.main-left-profile {
	display: block;
	width: 100%;

	.main-left-profile-header {
		display: block;
		width: 100%;
	}

	.main-left-profile-info {
		display: flex;
		flex-wrap: wrap;

		.main-left-profile-info-picture {
			flex: 1 1 350px;
		}
		.main-left-profile-info-details {
			flex: 2 2 350px;
			margin-bottom: 10px;
		}
	}

	.main-left-item {
		&:not(:last-child) {
			margin-bottom: var(--gap-standard);
		}
	}
}


/* Page-bound elements & classes */
#MainBody {
	#masterHeaderImage {
		background-image: url("images/dbcicon-wr.svg");
	}

	/* set the sizes for the advertisement blocks */
	&.Wrapper-HomePage {
		--advert-xy: 150px;
		--advert-img-xy: 100px;
		--advert-h4: 1.3em;
	}

	&:not(.Wrapper-HomePage) {
		--advert-xy: 100px;
		--advert-img-xy: 80px;
		--advert-h4: 1.1em;

		.main-col-15.main-left {
			display: none;
		}
	}

	.wrapper {
		> header {
			width: 100%;
			height: var(--header-height);

			@media (max-width: 991px) {
				position: relative;
			}

			@media (min-width: 992px) {
				position: fixed;
			}

			&.header {
				box-shadow: unset;		/* Override */
			}

			.header-background-container {
				display: block;
				height: var(--header-height);
				background-color: var(--col-midblue);

				& img {
					filter: brightness(0.4);
					object-fit: contain;
					width: 100%;
				}

				&:before {
					background-image: unset;
					background-repeat: unset;
				}

				.ContentItemContainer > .ContentItemContainer {
					background: unset;
				}
			}

			.header-social-container {
				display: block;
				position: absolute;
				top: 0px;
				text-align: center;
				background-color: rgba(0,0,0,0.3);
				height: 38px;
				width: 100%;

				&:has(.hide) {
					display: none !important;
				}

				.SocialSprite {
					&.LargeButtons {
						border-radius: 0px;
						width: 25px;
						height: 25px;

						&:after {
							width: 15px;
							height: 15px;
						}
					}
					&.FacebookIcon {
						background-color: rgba(255, 255, 255, 0.5);
					}
					&.TwitterIcon {
						background-color: rgba(255, 255, 255, 0.5);
					}
					&.LinkedInIcon {
						background-color: rgba(255, 255, 255, 0.5);
					}
					&.YouTubeIcon {
						background-color: rgba(255, 255, 255, 0.5);
					}
					&.InstagramIcon {
						background-color: rgba(255, 255, 255, 0.5);
					}
				}
			}

			.header-objects {
				display: flex;
				flex-direction: row;
				position: absolute;
				top: 30px;
				width: 100%;

				.header-logo-container {
					flex: 1 1 250px;
					align-self: flex-start;

					#masterHeaderImage {
						height: 110px;
						background-size: contain;
						margin: 0px;
					}

					@media (max-width: 991px) {
						padding-left: 30px;
						height: 110px;
					}

					/*
					@media (min-width: 992px) {		
						#masterHeaderImage {
					        height: 110px;
					    }
					}
					*/
				}
				.header-primary-nav-container {
					--nav-color: var(--col-white);		/* Override */
					flex: 1 1 100%;

					#ctl01_ciPrimaryNavigation_NavControl_NavMenu {
						display: flex;
						justify-content: center;

						> ul {
							justify-content: right;
							width: 100%;
							padding: 10px 30px;
						}

						@media (min-width: 992px) {	/* Override */
							padding-right: unset;
						}
					}

					.RadMenu.RadMenu_Coffee .rmSlide {
						@media (min-width: 992px) {
							left: 15px !important;
						}

						& ul.rmGroup {				/* Override */
							border-radius: unset;

							.rmLink:hover {
								color: unset;
								font-weight: bold;
							}
						}
					}

					@media (max-width: 991px) {
						background-color: var(--col-infiniteblue);
						position: absolute;
						top: 120px;
						box-shadow: 0px 0px 30px -2px rgba(0, 0, 0, 0.5);
					}

					@media (min-width: 1380px) {	/* Override */
						max-width: unset;
					}
				}
				.header-search-container {
					flex: 1 1 250px;
					padding-right: 30px;

					.UtilityNavigation {
						text-align: right;

						.navbar-toggle {
							background-color: var(--col-white);
						}
					}

					@media (max-width: 991px) {
						padding-top: 40px;

						.UtilityNavigation {
							.navbar-toggle {
								background: var(-col-white);
								margin: 0px 5px;
								mask-size: 25px;
							}
						}
					}

					@media (min-width: 992px) {
						align-self: center;
					}


					.header-search {
						.search-field {
							background-position: 6px 7px !important;
							height: 35px !important;
							width: 200px !important;
							border: none !important;
							background-color: rgba(0, 0, 0, 0.4) !important;
						}
					}
				}
			}
		}
	}

	.main-container {
		max-width: 100%;
		padding: 0px;

		&:has(> main) {
			position: relative;
			display: flex;

			@media (min-width: 992px) {
				top: var(--header-height);
				margin-bottom: var(--header-height);
			}
		}

		> main {
			display: flex;

			@media (max-width: 1199px) {
				flex-direction: column;
			}

			@media (min-width: 1200px) {
				flex-direction: row;
			}

			.row {							/* Override */
				padding-left: unset;
				padding-right: unset;
				margin-left: unset;
				margin-right: unset;

				> * {
					padding-left: unset;
					padding-right: unset;
					margin-left: unset;
					margin-right: unset;
				}
			}

			.iMIS-WebPart > .ContentItemContainer {		/* Override */
				margin-bottom: unset;

				& section {
					&.mb-3 {
						margin-bottom: unset !important;
					}
				}
				.iPartChain.LastPart {
					margin-top: unset;
				}
				.WebPartZone > .ContentItemContainer {
					margin-bottom: var(--gap-standard);
				}
				.panel-collapse:not(:has(:is(.tabs-wrapper, .RadTabStrip))) {
					padding: 20px;
					border: 1px solid var(--col-black20);
				}
				.ContentTabbedDisplay {
					padding: 20px;
				}
			}

			.panel {
				border: none;		/* Override */
			}

			.panel-body {			/* Override */
				padding: unset;
			}

			.panel-heading {		/* Override */
				padding: unset;
				&.Distinguish {
					padding: unset;
				}
			}

			.RadMultiPage, .rgMasterTable, .CommunicationPreferencesSection {		/* Override */
				padding: unset;		/* Override */
			}

			.shadow-box > .panel > .panel-body-container {		/* Override */
				background-color: unset;
				border-radius: unset;
				box-shadow: unset;
				margin-botton: var(--gap-standard);
				border: none;
			}

			.main-col-15 {
				flex: 1 1 300px;
				padding: var(--gap-standard);
				max-width: 350px;

				@media (max-width: 1199px) {
					max-width: unset;
					order: 1;
				}

				& h3, h4, h5, h6 {
					color: var(--col-white);
				}

				& p {
					color: var(--col-black85);
				}


				&.main-left {
					/* background-color: var(--col-teal); */
					background-color: var(--panel-background);
				}

				&.main-right {

					/* background-color: var(--col-paleorange); */
					background-color: var(--panel-background);
				}


				.mini-profile-standard, .mini-profile, .mini-profile-name-section {		/* Override */
					margin-bottom: unset;
				}

				.ProgressTracker_Dashboard_Overview {
					.panel {
						min-height: unset;

						.count {
							color: var(--col-infiniteblue);
						}
						.label {
							color: var(--col-black85);
						}
					}
				}
			}

			.main-col-70 {
				flex: 5 5 900px;
				padding: var(--gap-standard);
				display: flex;
				flex-direction: column;

				> div[class^="main-"]:has(:is(h1,h2,h3,h4,h5,h6)):not(:last-child) {
					margin-bottom: calc(var(--gap-standard) * 2);
				}

				.stacked-tabs .select-tab {							/* Override */
					background-color: var(--col-infiniteblue);
				}

				.RadTabStrip_MetroTouch.RadTabStrip_MetroTouch {	/* Override */
					font-family: var(--font-regular) !important;
				}

				.coadmin-manage a {									/* Override */
					background-color: var(--col-infiniteblue);
					color: var(--col-white);
					border-radius: var(--radius-standard);
				}

				.ContentRecordPageButtonPanel {
					margin: unset;
				}

				@media (max-width: 1199px) {
					order: 0;
				}

				.main-advertise {
					.WTZone {
						display: flex;
						flex-direction: column;
						/* gap: calc(var(--gap-standard) * 2); */

						.pandc-advertise, .pandc-pagelink {

							.panel-body {
								padding: 0px;	/* Override */
							}

							.TaggedListPanel {
								display: flex;
								flex-wrap: wrap;
								gap: var(--gap-panel);

								> div[translate="yes"] {		/* Override */
									display: none;
								}


								.pandc-advert-item, .pandc-pagelink-item {
									display: block;
									position: relative;
									box-shadow: 0px 0px var(--gap-standard) -5px rgba(0,0,0,0.4);
									padding: var(--gap-panel);
									text-align: center;
									transition: transform 0.25s ease-in-out;

									flex: 1 1 var(--advert-xy);

									> img {
										max-width: var(--advert-xy);
										max-height: var(--advert-xy) !important;
										object-fit: contain;
										width: 100%;
										height: 100%;
									}

									.text {
										margin-top: var(--gap-panel);

										> h4 {
											display: flex;
											justify-content: center;
											align-items: center;
											font-size: var(--advert-h4);
										}

										> a {
											display: block;
											position: absolute;
											top: 0px;
											left: 0px;
											width: 100%;
											height: 100%;
										}
									}

									/* Blue Theme */
									&:nth-child(4n+1) {
										/* background-image: linear-gradient(to bottom left, var(--col-infiniteblue), var(--col-teal)); */
										background-color: var(--col-infiniteblue);
										color: var(--col-black20);

										& h4 {
											color: var(--col-white);
										}
									}

									&:nth-child(4n+2) {
										/* background-image: linear-gradient(to bottom left, var(--col-black20), var(--col-black)); */
										background-color: var(--col-white);
										color: var(--col-black85);

										& h4 {
											color: var(--col-infiniteblue);
										}
									}

									/* Teal Theme */
									&:nth-child(4n+3) {
										background-image: linear-gradient(to bottom left, var(--col-darkgreen), var(--col-palestblue));
										/* color: var(--col-white); */

										& h4 {
											color: var(--col-black);
										}
									}

									/* Orange Theme */
									&:nth-child(4n+4) {
										background-image: linear-gradient(to bottom left, var(--col-darkorange), var(--col-paleorange));
										/* color: var(--col-white); */

										& h4 {
											color: var(--col-white);
										}
									}

									&:hover {
										transform: scale(1.05);
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.backToTop {
		background-color: var(--col-infiniteblue);
		box-shadow: 0px 0px 10px -0px rgba(255, 255, 255, 0.6);
	}

	> footer {
		/* margin-top: var(--header-height); */
	}
}