/*<meta conditions="help-template-control.do-not-edit,import-control.Import,products.IRIS ParentMail" />*/

/* Declare text styles - controls the responsive styline of fonts */

.i-want-to-menu-title,
.product-updates-menu-title,
.popular-topics-menu-title,
.mybox-left-menu-title,
.mybox-middle-menu-title,
.mybox-right-menu-title
{
	/* Font minimum, preferred and maximum value */
	font-size: clamp(var(--min), var(--val), var(--max));
}

/* Font size variables for repsonsive styling */

.i-want-to-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.product-updates-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.popular-topics-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.mybox-left-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.mybox-middle-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

.mybox-right-menu-title
{
	--min: 1.3em;
	/* minimum value */
	--val: 2.2vw;
	/* preferred value = 4% viewport width */
	--max: 3em;
	/* maximum value */
}

/* removes TOC from home page */

.sidenav-wrapper
{
	display: none !important;
}

/* removes the nav bar from the home page */

nav.tab-bar
{
	display: none !important;
}

/* BANNER STYLES */
/* background colour and image area of the banner */

.hero-background
{
	padding: 0rem 1.5rem;
	background-color: #134A82;
	height: 9rem;
	/* formatting and positioning for logo */
	background-image: url('../images/helpcentre/logo-parentmail.svg');
	background-repeat: no-repeat;
	background-position: 2rem 39%;
	background-size: 15% !important;
}

/* title and search area of the banner */

.home-hero
{
	padding: 0.5rem 1rem;
	text-align: left;
	color: white;
	width: auto !important;
}

.home-hero2
{
	padding: 0.5rem 0rem;
	text-align: left;
	color: white;
	width: auto;
	justify-content: space-between;
}

/* main banner title - only used if logo not required */

.home-hero__title
{
	line-height: 1;
	/* margin-bottom: .5rem;*/
	font-family: 'Open Sans';
	font-size: 2rem;
	text-align: left;
	float: left !important;
	visibility: hidden;
}

/* main banner sub title - "search for answers and browser for topics title" */

.home-hero__title2
{
	line-height: 1;
	margin-bottom: 0.5rem;
	margin-top: 1rem;
	margin-left: 0rem;
	margin-right: 0.4rem;
	font-family: 'Open Sans';
	font-size: 1rem;
	text-align: left;
	float: left !important;
	clear: both;
}

/* moves the search bar to the right-hand side of the home page */

.search-bar
{
	float: right;
}

/* TOP MENU on home page banner - "See our other help centres" */

.nav-bar__actions
{
	display: flex;
	float: right;
}

/* controls the area where "See our other Help Centres" sits */

ul.nav-bar__navigation
{
	padding: 0;
	display: flex;
	align-items: right;
	list-style: none;
	margin: 0rem 0;
	text-decoration: none;
	padding-top: 0.3rem;
}

/* styling for "see our other" title" */

ul.nav-bar__navigation li > a
{
	line-height: 1.25rem;
	font-family: 'Open Sans';
	font-size: .875rem;
	color: white;
	text-decoration: none;
	padding-right: 0.75rem;
}

ul.nav-bar__navigation li > a:hover
{
	text-decoration: underline;
	color: white;
}

.home-layout
{
	padding-left: 1.5%;
	min-height: 100vh;
	justifyContent: space-between;
}

/* spacing above and below each section on the home page */

.home-section
{
	position: inherit;
}

.home-section__title
{
	line-height: 1;
	margin: 0 0 1.5rem;
}

/* amount of space around the home page body area */

.home-layout
{
	padding-top: 1.5%;
	min-height: 100vh;
	align-items: center;
}

/* MENU TILES on home page */
/* area containing the tiles - determines the number of cells in the grid */

.menu-tiles__container
{
	width: 97vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1rem;
	position: inherit;
}

/* INDIVIDUAL menu TILES */
/* I want to... menu tile */

.i-want-to-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/i-want-to-tile-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	margin: 0;
	position: relative;
}

.i-want-to-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.i-want-to-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.i-want-to-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #93328E;
}

h2.i-want-to-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.i-want-to-menu-text
{
	margin: 1rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* Product updates menu tile */

.product-updates-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #f3f3f3;
	background-image: url('../images/helpcentre/product-updates-tile-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.product-updates-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.product-updates-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.product-updates-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #0089a4;
}

h2.product-updates-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.product-updates-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* Popular topics menu tile */

.popular-topics-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/popular-topics-tile-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.popular-topics-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #134a82;
}

h2.popular-topics-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.popular-topics-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/*MYBOX LEFT menu tile styling */

.mybox-left-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/mybox-left-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.mybox-left-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.mybox-left-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.mybox-left-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #D94CA0;
}

h2.mybox-left-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.mybox-left-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* MYBOX MIDDLE menu tile */

.mybox-middle-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #f3f3f3;
	background-image: url('../images/helpcentre/mybox-middle-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.mybox-middle-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.mybox-middle-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.mybox-middle-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #5f96ce;
}

h2.mybox-middle-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.mybox-middle-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* MYBOX RIGHT menu tile */

.mybox-right-menu-tile
{
	width: 31.4vw;
	min-height: 20rem;
	/*max-height: 44vh;*/
	padding: 0.5rem;
	border-radius: 6px;
	border-style: solid;
	border-color: #dfdfdf;
	border-width: 1px;
	background-color: #F3F3F3;
	background-image: url('../images/helpcentre/mybox-right-icon.svg');
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: right bottom;
	position: relative;
}

.mybox-middle-menu-tile a
{
	color: #1b69b9;
	text-decoration: none;
}

.mybox-middle-menu-tile a:hover
{
	color: #1b69b9;
	text-decoration: underline;
}

.mybox-right-menu-title
{
	margin: 0.5rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	font-family: 'Open Sans';
	font-weight: bold;
	color: #666e76;
}

h2.mybox-right-menu-title
{
	padding-top: 0rem;
	padding-left: 0.5rem;
}

.mybox-right-menu-text
{
	margin: 0.5rem;
	font-family: 'Open Sans';
	font-weight: normal;
	font-size: 1rem;
	text-decoration: none;
}

/* the following formats all the menu items in a menu proxy */

ul.menu.mc-component li
{
	font-family: 'Open Sans';
	text-decoration: none;
}

ul.menu.mc-component li:hover
{
	font-family: 'Open Sans';
	text-decoration: underline;
}

/*-------------------------------------------------------------------*/
/* RESPONSIVE LAYOUTS */
/*XX-Large Screen */

@media only screen and (min-width: 1280px)
{
	.hero-background
	{
		padding: 0rem 1.5rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-parentmail.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 20%;
		width: 100%;
	}
}

/*X-Large Screen */

@media only screen and (min-width: 1280px)
{
	.hero-background
	{
		padding: 0rem 1.5rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-parentmail.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 20%;
		width: 100%;
	}
}

/*Large Screen */

@media only screen and (max-width: 1240px) and (min-width: 1142px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-parentmail.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 30%;
		width: 100%;
	}
}

/* STANDARD Screen */

@media only screen and (max-width: 1141px) and (min-width: 801px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		/* formatting and positioning for logo */
		background-image: url('../images/helpcentre/logo-parentmail.svg');
		background-repeat: no-repeat;
		/* position from left and top */
		background-position: 1.5rem 39%;
		/* all logos are set to the same height for consistency, i.e. 3.2rem */
		background-size: 30%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 47vw;
	}

	.product-updates-menu-tile
	{
		width: 47vw;
	}

	.popular-topics-menu-tile
	{
		width: 47vw;
	}

	.mybox-left-menu-tile
	{
		width: 47vw;
	}

	.mybox-middle-menu-tile
	{
		width: 47vw;
	}

	.mybox-right-menu-tile
	{
		width: 47vw;
	}

	.home-hero__title2
	{
		font-size: 0.75rem;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: 1.875rem;
		margin-bottom: 0.275rem;
	}

	.menu-tiles__container
	{
		flex-direction: row;
	}
}

/*MEDIUM Screen*/

@media only screen and (max-width: 800px) and (min-width: 481px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		background-image: url('../images/helpcentre/logo-parentmail.svg');
		background-repeat: no-repeat;
		background-position: 1.5rem 19%;
		background-size: 40%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 94vw;
	}

	.product-updates-menu-tile
	{
		width: 94vw;
	}

	.popular-topics-menu-tile
	{
		width: 94vw;
	}

	.mybox-left-menu-tile
	{
		width: 94vw;
	}

	.mybox-middle-menu-tile
	{
		width: 94vw;
	}

	.mybox-right-menu-tile
	{
		width: 94vw;
	}

	.home-hero__title2
	{
		display: none;
	}

	ul.nav-bar__navigation
	{
		display: none;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: 0rem;
		margin-bottom: 0rem;
	}

	.menu-tiles__container
	{
		flex-direction: column;
	}
}

/*@media only screen and (max-width: 767px) and (min-width: 481px) {
.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: -1rem;
		margin-bottom: 0rem;
}*/

/*SMALL screen*/

@media only screen and (max-width: 480px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		background-image: url('../images/helpcentre/logo-parentmail.svg');
		background-repeat: no-repeat;
		background-position: 1.5rem 19%;
		background-size: 40%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 94vw;
	}

	.product-updates-menu-tile
	{
		width: 94vw;
	}

	.popular-topics-menu-tile
	{
		width: 94vw;
	}

	.mybox-left-menu-tile
	{
		width: 94vw;
	}

	.mybox-middle-menu-tile
	{
		width: 94vw;
	}

	.mybox-right-menu-tile
	{
		width: 94vw;
	}

	.menu-tiles__container
	{
		flex-direction: column;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: -3rem;
		margin-bottom: 0rem;
	}

	ul.nav-bar__navigation
	{
		display: none;
	}

	.home-hero__title2
	{
		display: none;
	}
}

/*SMALL screen*/

@media only screen and (max-width: 480px)
{
	.hero-background
	{
		padding: 0rem 1rem;
		background-color: #134A82;
		height: 9rem;
		background-image: url('../images/helpcentre/logo-parentmail.svg');
		background-repeat: no-repeat;
		background-position: 1.5rem 19%;
		background-size: 40%;
		width: 100%;
	}

	.i-want-to-menu-tile
	{
		width: 94vw;
	}

	.product-updates-menu-tile
	{
		width: 94vw;
	}

	.popular-topics-menu-tile
	{
		width: 94vw;
	}

	.mybox-left-menu-tile
	{
		width: 94vw;
	}

	.mybox-middle-menu-tile
	{
		width: 94vw;
	}

	.mybox-right-menu-tile
	{
		width: 94vw;
	}

	.menu-tiles__container
	{
		flex-direction: column;
	}

	.search-bar._Skins_home_search_bar.mc-component
	{
		margin-top: -3rem;
		margin-bottom: 0rem;
	}

	ul.nav-bar__navigation
	{
		display: none;
	}

	.home-hero__title2
	{
		display: none;
	}
}

/*Catching SMALL screen HEIGHT*/

/*@media only screen and (max-height: 695px) and (min-height: 386px){    
	ul.menu
    {
    line-height: 0.8em!important;
    }
    .i-want-to-menu-tile,
    .product-updates-menu-tile,
    .popular-topics-menu-tile,
    .mybox-left-menu-tile,
    .mybox-middle-menu-tile,
    .mybox-right-menu-tile
    {
    min-height: 75vh!important;
    max-height: 75vh!important;
    }
} 
@media only screen and (max-height: 385px){    
	ul.menu
    {
    line-height: 0.7em!important;
    }
    .i-want-to-menu-tile,
    .product-updates-menu-tile,
    .popular-topics-menu-tile,
    .mybox-left-menu-tile,
    .mybox-middle-menu-tile,
    .mybox-right-menu-tile
    {
    min-height: 100vh!important;
    max-height: 100vh!important;
    }
}*/

/* Scribe Tiles Layout */

.scribe-tiles-container
{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.scribe-tiles-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
	gap: 20px;
	align-items: start;
}

.scribe-tile
{
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.scribe-tile:hover
{
	border-color: #0066cc;
	box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
	transform: translateY(-2px);
}

.scribe-tile-header
{
	display: flex;
	align-items: center;
	padding: 16px 20px 12px 20px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}

.scribe-icon
{
	width: 24px;
	height: 24px;
	margin-right: 8px;
	flex-shrink: 0;
}

.scribe-label
{
	font-size: 14px;
	color: #6b7280;
	font-weight: 500;
}

.scribe-tile-content
{
	padding: 20px;
}

.scribe-title
{
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 12px 0;
	line-height: 1.4;
}

.scribe-meta
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #6b7280;
}

.scribe-meta span
{
	display: flex;
	align-items: center;
}

.steps
{
	font-weight: 500;
	color: #0066cc;
}

.time
{
	color: #9ca3af;
}

.author
{
	color: #6b7280;
	font-weight: 500;
}

.scribe-embed-container
{
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
	background: #f9fafb;
}

.scribe-embed-container iframe
{
	display: block;
	width: 100%;
	min-height: 300px;
	border: none;
}

/* Responsive Design */

@media (max-width: 1200px)
{
	.scribe-tiles-grid
	{
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 16px;
	}
}

@media (max-width: 768px)
{
	.scribe-tiles-grid
	{
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.scribe-tiles-container
	{
		padding: 16px;
	}

	.scribe-tile-content
	{
		padding: 16px;
	}

	.scribe-title
	{
		font-size: 16px;
	}
}

/* Optional: Compact view for more tiles per row */

@media (min-width: 1400px)
{
	.scribe-tiles-grid
	{
		grid-template-columns: repeat(1, 1fr);
	}
}