/*<meta />*/

/* MadCap-Branding applanguage:Templates/Projects/Online/Top Navigation/ */

/* ============================================================
   Brand variables — CosmoLex
   Palette sourced from the CosmoLex NextGen KB brand sheet:
   cyan #06BCF2, deep navy #202B46, dark text #0C193A, light
   cyan #EEF8FD. Inter is used for both body and headings
   (no serif pair). Dark header, pre-inverted white logo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root
{
	/* Brand colors */
	--Primary: #202B46;          /* Deep navy — header bg, primary text */
	--Secondary: #06BCF2;        /* CosmoLex cyan */
	--Dark: #4B4B4B;
	--Darkest: #0C193A;          /* Brand dark text */
	--Light: #EEF8FD;            /* Light cyan — tile / panel bg */
	--Lightest: #FFFFFF;
	--Medium: #A4AAAE;
	--NavBackground: #F1F5F9;    /* Cool neutral nav strip beneath dark header */
	--FontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--HeadingFontFamily: var(--FontFamily);
	--HeadingFontWeight: 700;
	--LogoImage: url('../Images/CosmoLex-Logo-white.png');

	/* Site accents */
	--Accent: #06BCF2;           /* CosmoLex cyan — CTAs, emphasis */
	--AccentAlt: #06BCF2;

	/* Link color — navy for high-contrast body links (matches user pref) */
	--LinkColor: var(--Primary);

	/* Header theming — dark navy header with the pre-inverted white logo. */
	--HeaderBg: var(--Primary);
	--HeaderBorder: none;
	--HeaderTaglineColor: var(--Lightest);
	--HeaderDividerBg: rgba(255, 255, 255, .32);
	--LogoFilter: none;

	/* Search bar — navy to merge with the header (no divider between them).
	   Overrides the Styles.css defaults (--NavBackground / 1px solid --Light). */
	--SearchBarBg: var(--Primary);
	--SearchBarBorderBottom: none;
}

/* Heading weight — Inter Bold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6
{
	font-weight: var(--HeadingFontWeight, 700);
}

/* Logo — swap background-image per brand */

a.site-logo
{
	background-image: var(--LogoImage);
}
/* Home page category tiles — CosmoLex colorway.
   White bg with body-color text, cyan icon and navy border; hover swaps
   the bg to --Light (light cyan) while text/icon/border stay put. Applies
   to .home-tile-sm ("Other Helpful Links" cards) as well, so the small
   tiles match the big ones. !important to beat Styles.css which loads
   after this brand sheet. */

a.home-tile
{
	color: var(--Dark) !important;
	background-color: #FFFFFF !important;
	border-color: var(--Primary) !important;
}

/* Brand backgrounds — literal hex values, not var(), because Flare's
   XML-editor CSS parser rejects var() on background-color (regardless
   of fallback). See handoff for the diagnosis. */

.site-header
{
	background-color: #202B46;
}

.site-search-bar
{
	background-color: #202B46;
}

.main-section .row.outer-row > nav
{
	background-color: #F1F5F9;
}

.main-section .row.outer-row > nav .nav-tree a:hover
{
	background-color: #202B46 !important;
}

a.home-tile svg.home-tile-icon
{
	color: var(--Secondary) !important;
}

a.home-tile:hover
{
	color: var(--Dark) !important;
	background-color: #f5f5f5 !important;
}