/*<meta conditions="ImportTo_DocTypes.HomePage" />*/

@import url('Styles.css');

@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

/*skin items hidden: TOC panel on the side and search bar in the upper-right corner*/

.nav-search
{
	display: none;
}

nav.sidenav-wrapper	/*hides side navigation*/
{
	display: none;
}

/* content styles */

div.home,
div.paragraph
{
	
}

div.home
{
	font-weight: normal;
	line-height: 50px;
	margin-top: 40px;
}

div.paragraph
{
	padding-left: 15%;
	padding-right: 15%;
}

div.bottomPage
{
	margin-top: 30px;
}

div.backgroundImg
{
	/*background-image: url('../Images/Home/UnityBanner.jpg');
	background-color: #0E416C;
	background-position: center;*/
	border-top: 7px solid #0E416C;
	margin-top: 15pt;
	page-break-before: avoid;
}

.header-banner
{
	background-color: #FFFFFF;
	/* Or your preferred brand color */
	color: #003054;
	/* Text color for the heading */
	text-align: center;
	/* Center the heading text */
	padding: 30px 20px;
	/* Ample padding top/bottom and sides */
	margin-bottom: 30px;
	/* Space between the banner and the tiles */
}

.header-banner h1
{
	font-size: 2.8em;
	/* Make the heading prominent */
	margin: 0;
	/* Remove default margin to control spacing with padding */
	line-height: 1.2;
	/* Improve readability */
}

/* Responsive adjustments for the banner */

@media (max-width: 768px)
{
	.header-banner
	{
		padding: 25px 15px;
	}

	.header-banner h1
	{
		font-size: 2.2em;
	}
}

@media (max-width: 480px)
{
	.header-banner
	{
		padding: 20px 10px;
	}

	.header-banner h1
	{
		font-size: 1.8em;
	}
}

/* --- NEW: Main Content Area (Parent for image and tiles) --- */

.main-content-area
{
	display: flex;
	/* Enables Flexbox layout for its direct children (image & tiles-wrapper) */
	justify-content: center;
	/* Centers the content block horizontally (if less than 100% width) */
	align-items: stretch;
	flex-wrap: wrap;
	/* Allows columns to wrap to new lines on smaller screens */
	max-width: 1200px;
	/* Optional: Constrain overall width of content area */
	margin: 0 auto 30px auto;
	/* Center the entire main content area on large screens */
	padding: 0 20px;
	/* Add some horizontal padding to the content area */
}

.left-image-column
{
	width: 30%;
	/* Image column takes 30% of main-content-area width on web */
	margin-right: 30px;
	/* Space between image and tiles */
	text-align: center;
	/* Center image within its column */
	padding-top: 0px;
	/* Adjust vertical alignment of image */
}

.left-image-column .responsive-image
{
	max-width: 100%;
	/* Ensures image scales down */
	height: auto;
	/* Maintains aspect ratio */
	border-radius: 10px;
	/* Optional: rounded corners for the image */
}

.tiles-wrapper
{
	width: 65%;
	/* Tiles take 65% of main-content-area width on web (30% + 65% = 95%, leaving 5% buffer) */
	/* No float needed here, as flexbox on parent handles layout */
}

/* --- Existing HomePageTiles & Inner Tile Styles (Mostly unchanged, but their widths will be relative to .tiles-wrapper) --- */
/* Your existing div.HomePageTiles styles */

div.HomePageTiles
{
	mc-grid-row: true;
	/* margin-left: auto; margin-right: auto; - Remove these, as .tiles-wrapper and flexbox will handle centering */
	margin-bottom: 25px;
	clear: both;
	/* Important to clear floats if multiple HomePageTiles are in a row */
}

div.HomePageTiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #F1F1F6;
	/* Your current light background color */
	border-radius: 20px;
	text-align: left;
	padding: 20px;
	min-height: 120px;
	display: block;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
	/* VERY IMPORTANT: Allow absolute positioning of children */
	position: relative;
}

/* --- Hover effect for the tiles (Your inverted colors) --- */

div.HomePageTiles > div:hover
{
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	background-color: #0063A3;
	/* Dark blue background on hover */
	cursor: pointer;
}

/* --- Ensure text colors invert on hover --- */

div.HomePageTiles > div:hover h2,
div.HomePageTiles > div:hover p
{
	color: #FFFFFF;
	/* White text color on hover */
}

/* --- Text colors (Ensure original and transition are set) --- */

div.HomePageTiles > div h2
{
	font-size: 1.5em;
	color: #333;
	/* Original dark color for headings */
	margin-top: 0;
	margin-bottom: 10px;
	transition: color 0.2s ease-in-out;
	/* Smooth text color change */
}

div.HomePageTiles > div p
{
	color: #555;
	/* Original slightly lighter color for body text */
	font-size: 0.95em;
	line-height: 1.5;
	transition: color 0.2s ease-in-out;
	/* Smooth text color change */
}

/* --- NEW CSS for the Stretched Link (Crucial for clickability and hiding text) --- */

div.HomePageTiles > div .tile-stretched-link
{
	position: absolute;
	/* Positions it relative to the parent with position: relative */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	/* Ensures it's above other content to be clickable */
	text-decoration: none;
	/* Remove any default link underline */
	color: transparent;
	/* Makes its own text invisible if it does somehow render */
	/* THIS IS THE KEY TO HIDE FLARE'S AUTO-GENERATED TEXT */
	/* Flare often wraps auto-generated xref text in a <span> */
	font-size: 0;
	/* Make any text inside effectively invisible */
	line-height: 0;
	/* Collapse its line height */
}

div.HomePageTiles > div h2
{
	font-size: 1.5em;
	/* Adjust heading size within tiles */
	color: #333;
	/* Darker color for headings */
	margin-top: 0;
	/* Remove default top margin */
	margin-bottom: 10px;
	/* Space below heading */
}

div.HomePageTiles > div p
{
	color: #555;
	/* Slightly lighter color for body text */
	font-size: 0.95em;
	line-height: 1.5;
}

/* Style the cross-references inside the tiles */

div.HomePageTiles > div p.TableText MadCap|xref
{
	color: #0063A3;
	/* Brand color for links */
	text-decoration: underline;
	/* Standard underline for links */
}

div.HomePageTiles > div p.TableText MadCap|xref:hover
{
	color: #004070;
	/* Darker shade on link hover */
}

div.HomePageTiles > div:hover MadCap|xref
{
	color: #FFFFFF;
	/* Make the xref link white when the tile is hovered */
}

div.HomePageTiles::before
{
	content: ' ';
	display: table;
}

div.HomePageTiles::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.HomePageTiles > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #F1F1F6;
	border-radius: 20px;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-top: 15px;
}

div.HomePageTiles > div:nth-child(1)
{
	width: 90%;
	margin-left: 0%;
}

div.HomePageTiles > div:nth-child(2)
{
	width: 66.667%;
	margin-left: 0%;
}

div.HomePageTiles > div:nth-child(3)
{
	width: 100%;
	margin-left: 8.3333%;
}

@media only screen and (max-device-width: 1100px)
{
	div.HomePageTiles > div:nth-child(1)
	{
		width: 48%;
		margin-left: 0%;
	}

	div.HomePageTiles > div:nth-child(2)
	{
		width: 16.667%;
		margin-left: 8.3333%;
	}

	div.HomePageTiles > div:nth-child(3)
	{
		width: 16.667%;
		margin-left: 8.3333%;
	}
}

@media only screen and (max-device-width: 600px)
{
	div.HomePageTiles > div:nth-child(1)
	{
		width: 95%;
		margin-left: 0%;
	}

	div.HomePageTiles > div:nth-child(2)
	{
		width: 100%;
		margin-left: 0%;
	}

	div.HomePageTiles > div:nth-child(3)
	{
		width: 100%;
		margin-left: 0%;
	}
}