
/* GENERAL STYLES */
	/* Variables (Responsive) */
		:root {
			/* --nanny-manager-font-size: 1rem; */
			--nanny-manager-font-size: 1.2rem;
			--secondary-page-model-max-width: 13.125em;
		}

		@media only screen and (max-width: 1200px) {
			:root {
				/* --nanny-manager-font-size: 0.975rem; */
				--nanny-manager-font-size: 1.1rem;
				--secondary-page-model-max-width: 11.875em;
			}
		}

		@media only screen and (max-width: 990px) {
			:root {
				/* --nanny-manager-font-size: 0.95rem; */
				--nanny-manager-font-size: 1.05rem;
				--secondary-page-model-max-width: 11.25em;
			}
		}

		@media only screen and (max-width: 770px) {
			:root {
				/* --nanny-manager-font-size: 0.9rem; */
				--nanny-manager-font-size: 1rem;
				--secondary-page-model-max-width: 10em;
			}
		}

		@media only screen and (max-width: 574px) {
			:root {
				/* --nanny-manager-font-size: 0.85rem; */
				--nanny-manager-font-size: 0.9rem;
				--secondary-page-model-max-width: 9.375em;
			}
		}

		@media only screen and (max-width: 460px) {
			:root {
				/* --nanny-manager-font-size: 0.8rem; */
				--nanny-manager-font-size: 0.85rem;
				--secondary-page-model-max-width: 8.75em;
			}
		}

		@media only screen and (max-width: 350px) {
			:root {
				/* --nanny-manager-font-size: 0.785rem; */
				--nanny-manager-font-size: 0.8rem;
				--secondary-page-model-max-width: 8.125em;
			}
		}
	/* --- */

	/* Section Font Size */
		section[data-class="nanny-manager-section"] {
			font-size: var(--nanny-manager-font-size);
		}
	/* --- */
 
	/* h2 Title */
		section[data-class="nanny-manager-section"] 
		h2[data-class="section-title"] {
			font-size: 1.8em;
			text-transform: none;
			line-height: 1.5em;
		}
	/* --- */

	/* Paragraph */
		section[data-class="nanny-manager-section"] p {
			margin: 0px;
		}
	/* --- */

	/* Two Column Wrapper (Responsive) */
		section[data-class="nanny-manager-section"] 
		[data-class="two-column-wrapper"] {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
			grid-auto-rows: auto;
			column-gap: 2em;
			row-gap: 2em;
		}
		@media only screen and (max-width: 990px) {
			section[data-class="nanny-manager-section"] 
			[data-class="two-column-wrapper"] {
				grid-template-columns: 1fr;
			}
		}
	/* --- */

	/* Groups Wrapper */
		section[data-class="nanny-manager-section"] 
		[data-class="groups-wrapper"] {
			display: flex;
			flex-direction: column;
			gap: 2.5em;
		}
	/* --- */

	/* Paragraphs Wrapper */
		section[data-class="nanny-manager-section"] 
		[data-class="paragraphs-wrapper"] {
			display: flex;
			flex-direction: column;
			gap: 1.5em;
			line-height: 1.55em;
		}
		/* section[data-class="nanny-manager-section"] 
		[data-class="paragraphs-wrapper"] p {} */
	/* --- */

	/* Box Wrapper */
		section[data-class="nanny-manager-section"] 
		[data-class="box-wrapper"] {
			padding: 1.75em;
			border-radius: 0.5em;
			display: flex;
			align-items: center;
		}
		section[data-class="nanny-manager-section"] 
		[data-class="box-wrapper"][data-bg="light-grey"] {
			background-color: #f9fafb;
		}
		section[data-class="nanny-manager-section"] 
		[data-class="box-wrapper"][data-bg="light-orange"] {
			background-color: #f6e6d9;
			border: 1px solid #ffedd5;
		}
		section[data-class="nanny-manager-section"] 
		[data-class="box-wrapper"][data-bg="orange"] {
			background-color: var(--color-14);
			border: 1px solid var(--color-18);
		}
	/* --- */

	/* List */
		section[data-class="nanny-manager-section"] ul, 
		section[data-class="nanny-manager-section"] ol {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 1em;
			line-height: 1.5em;
			padding: 0px;
			margin: 0px;
			width: 100%;
		}

		section[data-class="nanny-manager-section"] li {
			display: flex;
			column-gap: 1em;
			line-height: 1.5em;
		}

		/* section[data-class="nanny-manager-section"] 
		li [data-class="list-item-bullet"] {} */
	/* --- */

	/* Bullets */
		/* Dot */
			section[data-class="nanny-manager-section"] 
			[data-type="dot"] li [data-class="list-item-bullet"] {
				--list-item-bullet-size: 0.55em;
				display: block;
				width: var(--list-item-bullet-size);
				height: var(--list-item-bullet-size);
				min-width: var(--list-item-bullet-size);	/* prevents horizontal shrink */
				flex-shrink: 0;         					/* critical fix */
				border-radius: 50%;     					/* cleaner than 1em */
				background-color: var(--color-17);
				margin-top: 0.4em;
			}
		/* --- */

		/* Circle Number */
			section[data-class="nanny-manager-section"] 
			[data-type="circle-number"] li [data-class="list-item-bullet"] {
				--list-item-bullet-size: 2.3em;
				display: block;
				text-align: center;
				width: var(--list-item-bullet-size);
				height: var(--list-item-bullet-size);
				min-width: var(--list-item-bullet-size);	/* prevents horizontal shrink */
				flex-shrink: 0;         					/* critical fix */
				border-radius: 50%;     					/* cleaner than 1em */
				margin-top: -0.3em;
				position: relative;
				font-size: calc(var(--list-item-bullet-size) * 0.4);
				font-weight: 700;
			}
			section[data-class="nanny-manager-section"] 
			[data-type="circle-number"][data-color="white"] li [data-class="list-item-bullet"] {
				background-color: white;
				color: var(--color-17);
			}
			section[data-class="nanny-manager-section"] 
			[data-type="circle-number"][data-color="pink"] li [data-class="list-item-bullet"] {
				background-color: var(--color-17);
				color: white;
			}
			section[data-class="nanny-manager-section"] 
			[data-type="circle-number"] li [data-class="list-item-bullet"] span {
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				line-height: 1em;
			}
		/* --- */
	/* --- */
/* --- */



/* HERO */
	/* General Layout */
		#nanny_manager_hero_section {
			--nanny-manager-title-font-size: 2.4em;
			--nanny-manager-pretitle-font-size: calc(0.93em * var(--site-body-font-size-scale));
			--nanny-manager-subtitle-font-size: 1.175em;

			background-color: white;
			border-bottom: 1px solid #f3f4f6;
		}
		#nanny_manager_hero_section.secondary-page-section.model-section 
		.section-wrapper {
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			column-gap: 2.5em;
			row-gap: 1em;
		}
		#nanny_manager_hero_section 
		.secondary-page-title-container {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 1.7em;
		}
		#nanny_manager_hero_section 
		[data-class="title-wrapper"] {
			display: flex;
			flex-direction: column;
			gap: 0.75em;
		}
	/* --- */

	/* Background Image */
		#nanny_manager_hero_section.secondary-page-section 
		.bg-img {
			opacity: 0.3;
		}
	/* --- */

	/* Profile Photo */
		#nanny_manager_hero_section 
		.profile-photo-image-wrapper {
			--profile-photo-size: var(--secondary-page-model-max-width);

			background-color: white;
			border-color: white;
		}
	/* --- */

	/* Title */
		.secondary-page-title,
		h1.secondary-page-title {
			font-size: var(--nanny-manager-title-font-size);
			font-weight: 700;
			text-transform: none;
			color: var(--color-15);
		}
	/* --- */

	/* Pretitle */
		.section-pretitle {
			font-size: var(--nanny-manager-pretitle-font-size);
			color: var(--color-17);
		}
	/* --- */

	/* Subtitle */
		.secondary-page-subtitle {
			font-size: var(--nanny-manager-subtitle-font-size);
			color: var(--black-9);
			line-height: 1.6em;
		}
		.secondary-page-section.model-section .secondary-page-subtitle {
			margin-top: 0px;
		}
	/* --- */

	/* Trust Badge */
		#nanny_manager_hero_section [data-class="trust-badge-outer-wrapper"] {
			display: flex;
			flex-direction: column;
			gap: 0.5em;
			max-width: max-content;
		}

		#nanny_manager_hero_section [data-class="trust-badge"] {
			font-size: 0.85em;
			font-weight: 500;
			padding: 0.45em 1em;
			border-radius: 3em;
			background-color: var(--color-12);
			color: white;
			display: flex;
			align-items: center;
			gap: 0.55em;
		}
		#nanny_manager_hero_section [data-class="trust-badge"] img {
			display: block;
			height: 1em;
			width: auto;
		}
		#nanny_manager_hero_section [data-class="trust-badge"] span {
			text-align: left;
		}
	/* --- */

	/* Opt-in */
		#nanny_manager_hero_section [data-class="opt-in"] {
			font-size: 0.85em;
			font-weight: 500;
			color: var(--black-5);
		}
	/* --- */

	/* Metadata */
		#nanny_manager_hero_section [data-class="metadata-wrapper"] {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			column-gap: 1.75em;
			row-gap: 0.75em;
		}
		#nanny_manager_hero_section [data-class="metadata-item"] {
			font-size: 0.85em;
			text-transform: uppercase;
			color: var(--black-8);
			font-weight: 400;
		}
		#nanny_manager_hero_section [data-class="metadata-item"] span {
			font-weight: 500;
			letter-spacing: 0.01em;
		}
	/* --- */

	/* Breakpoints */
		@media only screen and (max-width: 990px) {
			.secondary-page-subtitle {
				margin-left: auto;
				margin-right: auto;
			}

			#nanny_manager_hero_section.secondary-page-section.model-section .section-wrapper {
				flex-direction: column;
			}
			#nanny_manager_hero_section .secondary-page-title-container {
				align-items: center;
			}

			#nanny_manager_hero_section [data-class="metadata-wrapper"] {
				justify-content: center;
			}
		}
	/* --- */
/* --- */



/* TASK */
	#nanny_manager_tasks_section {
		background-color: white;
	}
/* --- */



/* HOW BOOKING WORKS */
	/* General Layout */
		#booking_section {
			background-color: var(--color-17);
		}
	/* --- */

	/* Title */
		#booking_section h2[data-class="section-title"] {
			color: white;
		}
	/* --- */

	/* List */
		#booking_section ul, 
		#booking_section ol {
			gap: 2.2em;
		}

		#booking_section li {
			color: white;
		}

		#booking_section 
		li [data-class="paragraphs-wrapper"] {
			gap: 0.5em;
		}
		#booking_section 
		li [data-class="paragraphs-wrapper"] span:not(:first-child) {
			font-size: 0.9em;
			padding-left: 1em;
			border-left: 4px solid var(--color-20);
		}
	/* --- */

	/* Protection Reminder */
		#booking_section 
		[data-id="protection_reminder_wrapper"] {
			font-size: 0.95em;
			display: flex;
			gap: 0.7em;
			line-height: 1.5em;
		}
		#booking_section 
		[data-id="protection_reminder_wrapper"] img {
			display: block;
			height: 1.3em;
			width: auto;
		}
		#booking_section 
		[data-id="protection_reminder_wrapper"] div {
			display: flex;
			flex-direction: column;
			gap: 0.75em;
		}
		#booking_section 
		[data-id="protection_reminder_wrapper"] div p:first-child {
			font-weight: 700;
			text-transform: uppercase;
		}
	/* --- */

	/* Booking Note */
		[data-id="booking_note"] {
			font-size: 0.95em;
			font-weight: 500;
			color: white;
			line-height: 1.5em;
		}
	/* --- */
/* --- */



/* NANNIES */
	/* General Layout */
		#nannies_section {
			background-color: #f9fafb;
			border-bottom: 1px solid #f3f4f6;
		}
	/* --- */

	/* Nanny Card */
		/* Cards Wrapper */
			.nm-nanny-cards-wrapper {
				--nm-nanny-cards-wrapper-columns: 1fr 1fr 1fr;

				width: 100%;
				display: grid;
				grid-template-columns: var(--nm-nanny-cards-wrapper-columns);
				grid-template-rows: auto;
				grid-auto-rows: 1fr;
				justify-items: center;
				gap: var(--promos-grid-gap);

			}
			@media only screen and (max-width: 1200px) {
				.nm-nanny-cards-wrapper {
					--nm-nanny-cards-wrapper-columns: 1fr 1fr;
				}
			}
			@media only screen and (max-width: 770px) {
				.nm-nanny-cards-wrapper {
					--nm-nanny-cards-wrapper-columns: 1fr;
				}
			}
		/* --- */

		/* Card */
			.nm-nanny-card {
				--nm-nanny-card-tb-padding: 1.875em;
				--nm-nanny-card-lr-padding: 1.25em;
				--nm-nanny-card-border-radius: 0.75em;
				
				--tw-ring-offset-shadow: 0 0 #0000;
				--tw-ring-shadow: 0 0 #0000;
				--tw-shadow: 0 0.063em 0.125em 0 rgb(0 0 0 / 0.05);
	
				--nm-nanny-card-top-shadow: 
					var(--tw-ring-offset-shadow, 0 0 #0000), 
					var(--tw-ring-shadow, 0 0 #0000), 
					var(--tw-shadow);

				--nm-nanny-card-top-hover-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.05);

				--nm-nanny-card-photo-width: 9em;
				--nm-nanny-card-info-name-font-size: 1.1em;
				--nm-nanny-card-info-name-font-weight: 600;
		
				--nm-nanny-card-border-color: #edeff1;
				--nm-nanny-card-background-color: white;
				--nm-nanny-card-profile-photo-border-color: var(--black-2);
				--nm-nanny-card-profile-photo-background-color: var(--black-1);

				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 2em;
				padding: 
					var(--nm-nanny-card-tb-padding) 
					var(--nm-nanny-card-lr-padding);
				width: 100%;
				border-radius: var(--nm-nanny-card-border-radius);
				background-color: var(--nm-nanny-card-background-color);
				border: 1px solid var(--nm-nanny-card-border-color);

				transition: transform 0.2s ease, box-shadow 0.2s ease;

				box-shadow: var(--nm-nanny-card-top-shadow);
				-webkit-box-shadow: var(--nm-nanny-card-top-shadow);
				-moz-box-shadow: var(--nm-nanny-card-top-shadow);
			}
			.nm-nanny-card:hover {
				transform: translateY(-0.125em);
				box-shadow: var(--nm-nanny-card-top-hover-shadow);
				-webkit-box-shadow: var(--nm-nanny-card-top-hover-shadow);
				-moz-box-shadow: var(--nm-nanny-card-top-hover-shadow);
			}
		/* --- */

		/* Profile Photo */
			.nm-nanny-card .profile-photo-image-wrapper {
				--profile-photo-size: var(--nm-nanny-card-photo-width);

				background-color: var(--nm-nanny-card-profile-photo-background-color);
				border-color: var(--nm-nanny-card-profile-photo-border-color);
			}
		/* --- */

		/* Name */
			.nm-nanny-names,
			a.nm-nanny-names {
				font-size: var(--nm-nanny-card-info-name-font-size);
				font-weight: var(--nm-nanny-card-info-name-font-weight);
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				gap: 0.4em;
				color: var(--color-17);
			}
			.nm-nanny-names img.user-name-icon {
				height: 0.8em;
				width: auto;
			}
		/* --- */
	/* --- */
/* --- */



/* ABOUT */
	#about_section {
		background-color: white;
	}

	/* h3 Title */
		#about_section 
		h3[data-class="section-title"] {
			font-size: 1.8em;
			text-transform: none;
			line-height: 1.5em;
			font-weight: 800;
		}
	/* --- */

	/* Wrappers */
		#about_section 
		[data-id="about_columns_wrapper"][data-class="two-column-wrapper"] {
			row-gap: 4em;
		}
	/* --- */
/* --- */



/* CONTACT */
	#contact_section {
		background-color: white;
		text-align: center;
	}

	/* h3 Title */
		#contact_section 
		h3[data-class="section-title"] {
			font-size: 1.8em;
			text-transform: none;
			line-height: 1.5em;
			font-weight: 800;
		}
	/* --- */

	/* Section Padding */
		* + #contact_section 
		.section-wrapper {
			padding-top: 0px;
		}
	/* --- */

	/* Paragraph */
		[data-class="paragraphs-wrapper"] p:last-child {
			font-size: 0.95em;
			color: var(--black-7);
		}
	/* --- */

	/* Groups Wrapper */
		#contact_section 
		[data-class="box-wrapper"] [data-class="groups-wrapper"] {
			margin-left: auto;
			margin-right: auto;
		}
	/* --- */
/* --- */



/* NANNY INFO (STICKY) SECTION */
	/* General Layout */
		#back_to_nanny_section {
			--back-to-nanny-section-box-shadow: 0 -0.375em 0.625em 0.125em rgba(34, 34, 34, 0.05);
			--back-to-nanny-section-wrapper-y-padding: 0.625em;
			--back-to-nanny-section-button-x-padding: 1.5em;
			--back-to-nanny-section-button-y-padding: 0.5em;
			--back-to-nanny-section-z-index: var(--z-index-below-header);
			--back-to-nanny-section-profile-photo-size: 3.125em;
			--back-to-nanny-section-back-button-height: calc(
				var(--back-to-nanny-section-profile-photo-size) * 0.5
			);

			position: -webkit-sticky;
			position: sticky;
			bottom: 0px;
			z-index: var(--back-to-nanny-section-z-index);
			background-color: white;
			border-top: 1px solid var(--color-21);
			box-shadow: var(--back-to-nanny-section-box-shadow);
			-webkit-box-shadow: var(--back-to-nanny-section-box-shadow);
			-moz-box-shadow: var(--back-to-nanny-section-box-shadow);
		}
		@media only screen and (max-width: 770px) {
			#back_to_nanny_section {
				--back-to-nanny-section-button-x-padding: 1.125em;
				--back-to-nanny-section-button-y-padding: 0.5em;
			}
		}
	/* --- */

	/* Background Image */
		#back_to_nanny_section 
		.bg-img {
			opacity: 1;
		}
	/* --- */

	/* Section Wrapper */
		#back_to_nanny_section 
		.section-wrapper {
			padding-top: var(--back-to-nanny-section-wrapper-y-padding);
			padding-bottom: var(--back-to-nanny-section-wrapper-y-padding);
		}
	/* --- */
	
	/* Inner Wrapper */
		.back-to-nanny-section-inner-wrapper {
			display: grid;
			grid-template-columns: max-content auto max-content;
			grid-template-rows: 1fr;
			align-items: center;
			gap: 0.875em;
			width: 100%;
		}
	/* --- */

	/* Profile Photo */
		.back-to-nanny-image-wrapper {
			--profile-photo-size: var(--back-to-nanny-section-profile-photo-size);
			--profile-photo-border-size: 4px;
			--profile-photo-background-color: var(--color-15);
			--profile-photo-border-color: var(--color-1);

			width: var(--profile-photo-size);
			height: var(--profile-photo-size);
			border-radius: 50%;
			border: var(--profile-photo-border-size) solid var(--profile-photo-border-color);
			background-color: var(--profile-photo-background-color);
			-ms-background-size: cover;
			-o-background-size: cover;
			-moz-background-size: cover;
			-webkit-background-size: cover;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	/* --- */

	/* Info */
		/* Wrapper */
			.back-to-nanny-section-info-wrapper {
				display: flex;
				flex-direction: column;
				gap: 0.25em;
				width: 100%;
			}
		/* --- */

		/* Name */
			.back-to-nanny-section-name {
				font-size: 0.95em;
				font-weight: 600;
				color: var(--black-8);
			}
			a.back-to-nanny-section-name {
				color: var(--color-17);
			}
		/* --- */

		/* Status */
			.back-to-nanny-section-status {
				font-size: 0.85em;
				color: var(--black-7);
			}
		/* --- */
	/* --- */

	/* Button */
		.back-to-nanny-section-button-wrapper {
			width: max-content;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0.875em;
			cursor: pointer;
		}
		.back-to-nanny-section-button-wrapper:active {
			transform: scale(0.9);
		}
		.back-to-nanny-section-button-wrapper > img {
			height: var(--back-to-nanny-section-back-button-height);
			width: auto;
		}
	/* --- */
/* --- */
