/**
 * DS—GDA Main Styles
 * Base mobile-first styles (0-767px)
 */


/*
——————————————————————————————————————————
VARIABLES & RESET
——————————————————————————————————————————
*/

:root {
	
	/* COLORS */
	--K00:  #FFFFFF;
	--K01:  #000000;

	--KY00: #F0AB00;
	--KY50: #F7D580;
	--KY40: #F9DD99;
	--KY30: #FBE6B3;

	--KY00T50: rgba(240, 171, 0, 0.75);

	--KG50: #808080;
	--KG40: #999999;
	--KG30: #B3B3B3;
	--KG20: #CCCCCC;
	--KG10: #E6E6E6;

	/* FONTS */
	--F00: "proxima-nova", sans-serif;
	
	/* FONT SIZES */
	--FSXS: 0.65rem; 	/* 10px */
	--FSSM: 0.875rem; 	/* 14px */
	--FS00: 1.00rem; 	/* 16px */
	--FS01: 1.25rem; 	/* 20px */
	--FS02: 1.50rem; 	/* 24px */
	--FS03: 2.00rem; 	/* 32px */
	--FS04: 2.25rem; 	/* 36px */
	--FS05: 2.50rem; 	/* 40px */
	--FS06: 3.00rem; 	/* 48px */
	--FS07: 4.00rem; 	/* 64px */
	--FS08: 5.00rem; 	/* 80px */
	--FS09: 6.00rem; 	/* 96px */
	
	/* SPACING */
	--SXS: 0.65rem;		/* 10px */
	--SSM: 0.875rem;	/* 14px */
	--S00: 1.00rem; 	/* 16px */
	--S01: 1.25rem; 	/* 20px */
	--S02: 1.50rem; 	/* 24px */
	--S03: 2.00rem; 	/* 32px */
	--S04: 2.50rem; 	/* 40px */
	--S05: 3.00rem; 	/* 48px */
	--S06: 4.00rem; 	/* 64px */
	--S07: 5.00rem; 	/* 80px */
	--S08: 6.00rem; 	/* 96px */
	--S09: 7.00rem; 	/* 112px */
	--S10: 8.00rem; 	/* 128px */
	--S11: 10.00rem; 	/* 160px */

	/* GRID */
	--G01: repeat(6, 1fr); /* 6 columns grid */
	
	/* ACELERATION */
	--A01: 0.2s ease;
	--A02: 0.3s ease;
	--A03: 0.5s ease;
	--A04: 0.7s ease;

	/* CUSTOM */
	--BAR01: 50px;
	--BAR02: 100px; /* unused */
	--BARFULL: 100px; /* update if BAR01 or BAR02 change */
	--fullH: calc(100dvh - var(--BARFULL));
}

*													{ box-sizing: border-box; }
*:not(p)											{ margin: 0; padding: 0; }
img 												{ max-width: 100%; height: auto; display: block; }
a 													{ color: var(--K01); text-decoration: none; transition: color var(--A01); }
a:hover 											{ color: var(--K01); text-decoration: underline; }
p:first-child										{ margin-top: 0; }
p:last-child										{ margin-bottom: 0; }


/*
——————————————————————————————————————————
TYPOGRAPHY
——————————————————————————————————————————
*/

/* FAMILIES */
html, body 											{ font-family: var(--F00); font-weight: 400; }

/* SIZES & VARIANTS */
html, body											{ line-height: 1.50em; }

#masthead 											{ font-size: var(--FSSM); line-height: 1.00em; letter-spacing: 0.025em; text-transform: uppercase; text-box: trim-both cap alphabetic; }

h1 													{ font-size: var(--FS07); line-height: 1.00em; font-weight: 700; text-transform: uppercase; } /* 64px */
h2 													{ font-size: var(--FS06); line-height: 1.10em; font-weight: 700; text-transform: uppercase; } /* 48px */
h3 													{ font-size: var(--FS05); line-height: 1.15em; font-weight: 700; text-transform: uppercase; } /* 40px */
h4 													{ font-size: var(--FS03); line-height: 1.20em; font-weight: 700; text-transform: uppercase; } /* 32px */
h5 													{ font-size: var(--FS02); line-height: 1.25em; font-weight: 700; text-transform: uppercase; } /* 24px */
h6 													{ font-size: var(--FS00); line-height: 1.30em; font-weight: 700; text-transform: uppercase; } /* 16px */

.eyebrow											{ font-size: var(--FSSM); line-height: 1.00em; letter-spacing: 0.05em; font-weight: 400; text-transform: uppercase; }
.page-header__lead 									{ font-size: var(--FS01); line-height: 1.50em; }


.bt-lg 												{ font-size: var(--FS01); line-height: 1.00em; letter-spacing: 0.025em; text-transform: uppercase; }
.bt-sm												{ font-size: var(--FSSM); line-height: 1.00em; letter-spacing: 0.025em; text-transform: uppercase; }

#colophon 											{ font-size: var(--FSSM); line-height: 1.50em; letter-spacing: 0.025em; }


/*
——————————————————————————————————————————
STRUCTURE
——————————————————————————————————————————
*/

html, body 											{ width: 100%; height: 100%; margin: 0; padding: 0; background: var(--K00); color: var(--K01); }

main 												{ width: 100%; height: auto; margin: 0; padding: 0; position: relative; background-color: var(--K00); }


/*
——————————————————————————————————————————
MAIN HEADER & NAV
——————————————————————————————————————————
*/

#masthead 											{ width: 100%; height: auto; margin: 0; padding: 0;  position: sticky; top: 0; left: 0; background-color: var(--K01); box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.5); color: var(--KG20); z-index: 900; }	

/* SITE ICONE */
.site-icone 										{ width:var(--BAR01); height:var(--BAR01); }
.site-icone a 										{ width: 100%; height: 100%; background-color: var(--K00); display: flex; align-items: center; justify-content: center; }
.site-icone a:hover									{ background-color: var(--KY00); }
.site-icone img										{ max-height: 30px; width: auto; display: block; }

/* SITE SWITCHER */
.site-switcher 										{ width: auto; height: var(--BAR01); margin: 0; padding-left: var(--S01)  var(--S01) var(--S01) 0; position: absolute; top: 0; left: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--S00); z-index: 930; }

.site-switcher-static 								{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.site-switcher-panel 								{ display: block; overflow: hidden; }
.site-switcher-panel-inner 							{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; white-space: nowrap; gap: var(--S00); transform: translateX(-100%); transition: transform var(--A02); }
.site-switcher-panel .alternate-site 				{ color: var(--KG20); text-decoration: none; }
.site-switcher-panel .alternate-site:hover 			{ color: var(--KY00); text-decoration: none; }

.site-switcher-toggle 								{ margin: 0; padding: 0; background: none; border: none; cursor: pointer; color: var(--K20); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--S00); }
.site-switcher-toggle:hover							{ color: var(--KY00); }
.site-switcher-close 								{ margin: 0; padding: 0; background: none; border: none; cursor: pointer; color: var(--K20); }
.site-switcher-close:hover							{ color: var(--KY00); }

.site-switcher .icn-sm-chevron.right 				{ display: block; }
.site-switcher .icn-sm-chevron.left					{ display: none; }
.site-switcher.open .icn-sm-chevron.right			{ display: none; }
.site-switcher.open .icn-sm-chevron.left			{ display: block; }
.site-switcher.open .site-switcher-panel-inner 		{ transform: translateX(0); transition: transform var(--A02); }

/* TOP NAV */
.top-navigation 									{ width: 100%; height: var(--BAR01); margin: 0; padding: 0 var(--S01); background-color: var(--K01); position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--S02); }

.top-navigation ul 									{ width: auto; height: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--S02); }
.top-navigation li 									{ margin: 0; }
.top-navigation li:last-child 						{ padding: 0 var(--S02); border-left: solid 1px var(--KG20); border-right: solid 1px var(--KG20); }
.top-navigation li a								{ color: var(--KG20); text-decoration: none; transition: color var(--A02); }
.top-navigation li a:hover,
.top-navigation li.current-menu-item a				{ color: var(--KY00); text-decoration: none; transition: color var(--A02); }


/* HORIZONTAL ACCORDION NAV */
.main-navigation {
    width: 100%;
    height: var(--BAR01);
    background-color: var(--K00);
    overflow: hidden;
}

.main-navigation > ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

/* Nav items */
.main-navigation > ul > li {
    height: 100%;
    border-right: solid 1px var(--KG30);
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    transition: width var(--A03);
}

.main-navigation > ul > li:last-child 			{ border-right: solid 1px transparent; }

/* First level links */
.main-navigation > ul > li > a {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	width: 100%;
    height: 100%;
    padding: 0 var(--S01);
    color: var(--K01);
    white-space: nowrap;
    transition: background-color var(--A01);
}

.main-navigation > ul > li > a:hover {
    background-color: var(--KY00);
	color: var(--K01);
    text-decoration: none;
}

.main-navigation > ul > li.is-active > a {
    background-color: var(--KY00);
	width: auto;
	font-weight: 700;
}

.main-navigation > ul > li.is-active {
    background-color: var(--KY00);
}

/* Submenu - hidden by default */
.main-navigation .sub-menu {
	background-color: var(--KY00);
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--A03), visibility 0s var(--A03);
}

/* Submenu visible when active */
.main-navigation > ul > li.is-active > .sub-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--A03), visibility 0s 0s;
}

.main-navigation .sub-menu li {
    height: 100%;
    display: flex;
    flex-shrink: 0;
}

.main-navigation .sub-menu a {
	background-color: var(--KY00);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 var(--S01);
    color: var(--K01);
    white-space: nowrap;
    transition: background-color var(--A01);
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu .current-menu-item > a { color: var(--K00); text-decoration: none; }

/* TOP NAV 
.top-navigation {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background: var(--K01);
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--A03), visibility var(--A03);
	z-index: 999;
	overflow-y: auto;
}

.top-navigation.toggled { transform: translateX(0); transition: transform var(--A03), visibility 0s 0s; visibility: visible; }

.top-navigation ul { list-style: none; padding: 6rem var(--S01) var(--S01); }
.top-navigation li { margin-bottom: 1.5rem; }
.top-navigation a {
	color: var(--K01);
	display: block;
	padding: 0.5rem 0;
	transition: color var(--A01);
}

.top-navigation a:hover { color: var(--K01); text-decoration: none; }
*/

/* PRIMARY NAV 
.main-navigation {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background: var(--K00);
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--A03), visibility var(--A03);
	z-index: 999;
	overflow-y: auto;
}

.main-navigation.toggled { transform: translateX(50vw); transition: transform var(--A03), visibility 0s 0s; visibility: visible; }


.main-navigation ul { list-style: none; padding: 6rem var(--S01) var(--S01); }
.main-navigation li { margin-bottom: 1.5rem; }
.main-navigation a {
	color: var(--K01);
	display: block;
	padding: 0.5rem 0;
	transition: color var(--A01);
}

.main-navigation a:hover { color: var(--K01); text-decoration: none; }
*/


/* NAV TOGGLE */

.menu-toggle {
	display: block;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	position: relative;
	z-index: 1000;
}

.menu-toggle:focus { outline: 2px solid var(--K01); outline-offset: 2px; }

/* Hamburger lines */
.menu-toggle span {
	display: block;
	width: 28px;
	height: 3px;
	background: var(--K01);
	position: absolute;
	left: 6px;
	transition: all var(--A02);
}

.menu-toggle span:nth-child(1) { top: 10px; }
.menu-toggle span:nth-child(2) { top: 18px; }
.menu-toggle span:nth-child(3) { top: 26px; }

/* Transform to X when toggled */
.menu-toggle.toggled span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.menu-toggle.toggled span:nth-child(2) { opacity: 0; }
.menu-toggle.toggled span:nth-child(3) { top: 18px; transform: rotate(-45deg); }



/*
——————————————————————————————————————————
HOME
——————————————————————————————————————————
*/

.portada 											{ width: 100%; height: var(--fullH); margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: nowrap; }
.portada__item										{ flex: 1 1 0; margin: 0; padding: 0; position: relative; }

.portada__image										{ width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; }
.portada__image figure								{ width: 100%; height: 100%; margin: 0; padding: 0; position: relative; overflow: hidden; }	
.portada__image figure::after 						{ content: ''; position: absolute; inset: 0; background-color: var(--KY00); mix-blend-mode: color; opacity: 0; transition: opacity var(--A03); pointer-events: none; }
.portada__image img									{ width: 100%; height: 100%; margin: 0; object-fit: cover; transition: filter var(--A03); }

.portada__overlay									{ width: 100%; height: 60%; margin: 0; padding: var(--S09) 0 var(--S06) 0; position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.portada__overlay img 								{ width: 200px; height: auto; margin: 0; display: block; opacity: 0; transition: opacity var(--A03); }

.portada__overlay:hover img 												{ opacity: 1; }
.portada__item:has(.portada__overlay:hover) .portada__image img 			{ filter: grayscale(100%); }
.portada__item:has(.portada__overlay:hover) .portada__image figure::after 	{ opacity: 1; }


.featured-news 										{ width: 100%; height: auto; min-height: 400px; margin: 0; padding: var(--S06) var(--S04); background-color: var(--KG10); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--S04); }
/*
——————————————————————————————————————————
CONTENT
——————————————————————————————————————————
*/









/*
——————————————————————————————————————————
NO RESULTS / 404
——————————————————————————————————————————
*/

.no-results,
.error-404 { text-align: center; padding: var(--S03) var(--S01); }

.no-results .page-content,
.error-404 .page-content { max-width: 600px; margin: var(--S01) auto 0; }


/*
——————————————————————————————————————————
FOOTER
——————————————————————————————————————————
*/

#colophon 											{ margin: 0; padding: 0; background-color: var(--K01); color: var(--KG20); display: flex; flex-direction: column; gap: var(--S08); }
.footer-top 										{ width: 100%; height: auto; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.footer-bottom 										{ width: 100%; height: auto; margin: 0; padding: var(--S00) var(--S04); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }

/* FOOTER AAA */
.aaa 												{ grid-column: 1 / span 2; padding: var(--S08) var(--S06); display: flex; align-items: center; justify-content: center; }
.aaa img 											{ width: auto; height: 100%; max-height: 300px;  margin: 0; display: block; color: var(--KY00); }

/* FOOTER NAVIGATION */
.footer-navigation 									{ grid-column: 3 /span 2; }
.footer-navigation .menu 							{ padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
.footer-navigation .menu > li 						{ width: 50%; margin: 0; padding: var(--S02) var(--S03); border-left: solid 1px var(--KG50); display: flex; flex-direction: column; gap: var(--S01); }
.footer-navigation .menu > li:nth-child(-n+2) 		{ padding-top: var(--S08); }
.footer-navigation .menu > li:nth-last-child(-n+2) 	{ padding-bottom: var(--S08); }
.footer-navigation .menu > li > a					{ color: var(--KG50); text-decoration: none; pointer-events: none; }

.footer-navigation .sub-menu 						{ padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: var(--SXS); }
.footer-navigation .sub-menu li 					{ margin: 0; padding: 0; }
.footer-navigation .sub-menu a 						{ color: var(--KG20); text-decoration: none; border-bottom: solid 1px transparent; }
.footer-navigation .sub-menu a:hover,
.footer-navigation .sub-menu li.current-menu-item a	{ color: var(--KG20); border-bottom: solid 1px var(--KG20); }
.footer-navigation .sub-menu a[target="_blank"] 		{margin-left: 14px; position: relative; }
.footer-navigation .sub-menu a[target="_blank"]::before { content: ""; width: 6px; height: 6px; margin: 0; padding: 0; position: absolute; left: -14px; top: 50%; transform: translateY(-30%);  border-top: 1px solid currentColor; border-right: 1px solid currentColor; background: linear-gradient( to top left, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px) ); display: inline-block; }

/* FOOTER CONTACTS */
.footer-contacts 									{ height: 100%; grid-column: 5 / span 1; border-left: solid 1px var(--KG50); display: flex; flex-direction: column; align-items: flex-start; justify-content: stretch; }
.footer-contact 									{ margin: 0; padding: var(--S02) var(--S03); display: flex; flex-direction: column; gap: var(--S01);}
.footer-contact-label 								{ color: var(--KG50); }
.footer-contact-content								{ color: var(--KG20); text-decoration: none; display: flex; gap: var(--S07); }

.footer-contact:first-child							{ padding-top: var(--S08); }
.footer-contact:last-child 							{ padding-bottom: var(--S08); }


/*
——————————————————————————————————————————
UI
——————————————————————————————————————————
*/

/* ICONS */
.icn-sm												{ width: var(--S00); height: var(--S00); margin: 0;	 padding: 0; display: inline-flex; align-items: center; justify-content: center; color: currentColor; }

.icn-sm-chevron 									{ width: 10px; height: 10px; position: relative; }
.icn-sm-chevron::before 							{ content: ''; position: absolute; width: 70%; height: 70%; border-right: 1px solid; border-bottom: 1px solid; border-color: currentColor; }
.icn-sm-chevron.down::before 						{ top: 25%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.icn-sm-chevron.up::before 							{ top: 75%; left: 50%; transform: translate(-50%, -50%) rotate(-135deg); }
.icn-sm-chevron.left::before 						{ top: 50%; left: 75%; transform: translate(-50%, -50%) rotate(135deg); }
.icn-sm-chevron.right::before 						{ top: 50%;  left: 25%; transform: translate(-50%, -50%) rotate(-45deg); }

.icn-sm-close 										{ width: 10px; height: 10px; position: relative; color: currentColor; }
.icn-sm-close::before, .icn-sm-close::after 		{ content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: currentColor; }
.icn-sm-close::before 								{ transform: rotate(45deg); }
.icn-sm-close::after 								{ transform: rotate(-45deg); }

/* BUTTONS */

.bt-lg 												{ width: auto; height: 40px; margin: 0; padding: 0 40px; border-radius: 20px; border: solid 1px transparent; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all var(--A01); }
.bt-lg:hover 										{ text-decoration: none; }
.bt-sm 												{ width: auto; height: 28px; margin: 0; padding: 0 14px; border-radius: 14px; border: solid 1px transparent; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all var(--A01); }
.bt-sm:hover 										{ text-decoration: none; }

/* BT LINE */
.line-K00-K01 										{ color: var(--K00); 	border-color: currentColor; }
.line-K00-K01:hover 								{ color: var(--K01);	border-color: currentColor; }
.line-K00-KY00 										{ color: var(--K00); 	border-color: currentColor; }
.line-K00-KY00:hover 								{ color: var(--KY00);	border-color: currentColor; }
.line-K01-K00 										{ color: var(--K01); 	border-color: currentColor; }
.line-K01-K00:hover 								{ color: var(--K00); 	border-color: currentColor; }
.line-K01-KY00 										{ color: var(--K01); 	border-color: currentColor; }
.line-K01-KY00:hover 								{ color: var(--KY00); 	border-color: currentColor; }
.line-KY00-K00 										{ color: var(--KY00); 	border-color: currentColor; }
.line-KY00-K00:hover 								{ color: var(--K00); 	border-color: currentColor; }
.line-KY00-K01 										{ color: var(--KY00); 	border-color: currentColor; }
.line-KY00-K01:hover 								{ color: var(--K01); 	border-color: currentColor; }
/* BT FILL */
.fill-K00-K01 										{ background-color: var(--K00); 	color: var(--K01); }
.fill-K00-K01:hover 								{ background-color: var(--K01); 	color: var(--K00); }
.fill-K00-KY00 										{ background-color: var(--K00); 	color: var(--KY00); }
.fill-K00-KY00:hover 								{ background-color: var(--KY00);	 color: var(--K00); }
.fill-K01-K00 										{ background-color: var(--K01); 	color: var(--K00); }
.fill-K01-K00:hover 								{ background-color: var(--K00); 	color: var(--K01); }
.fill-K01-KY00 										{ background-color: var(--K01); 	color: var(--KY00); }
.fill-K01-KY00:hover 								{ background-color: var(--KY00); 	color: var(--K01); }
.fill-KY00-K00 										{ background-color: var(--KY00); 	color: var(--K01); }
.fill-KY00-K00:hover 								{ background-color: var(--K00); 	color: var(--K01); }
.fill-KY00-K01 										{ background-color: var(--KY00); 	color: var(--K01); }
.fill-KY00-K01:hover 								{ background-color: var(--K01); 	color: var(--KY00); }
/* BT LINE to FILL */
.line-fill-K00 										{ color: var(--K00); border-color: currentColor; }
.line-fill-K00:hover 								{ color: var(--K01); background-color: var(--K00); border-color: transparent; }
.line-fill-K01 										{ color: var(--K01); border-color: currentColor; }
.line-fill-K01:hover 								{ color: var(--K00); background-color: var(--K01);  border-color: transparent; }
.line-fill-KY00 									{ color: var(--KY00); border-color: currentColor; }
.line-fill-KY00:hover 								{ color: var(--K01); background-color: var(--KY00); border-color: transparent; }
/* FILL to LINE */
.fill-line-K00 										{ background-color: var(--K00); color: var(--K01); }
.fill-line-K00:hover 								{ background-color: transparent; color: var(--K00); border-color: currentColor; }
.fill-line-K01 										{ background-color: var(--K01); color: var(--K00); }
.fill-line-K01:hover 								{ background-color: transparent; color: var(--K01); border-color: currentColor; }
.fill-line-KY00 									{ background-color: var(--KY00); color: var(--K01); }
.fill-line-KY00:hover 								{ background-color: transparent; color: var(--KY00); border-color: currentColor; }

/*
——————————————————————————————————————————
IMAGE ORIENTATION CLASSES
——————————————————————————————————————————
*/

img.landscape 										{ display: block; }
img.portrait 										{ display: block; }
img.square 											{ display: block; }






/*
——————————————————————————————————————————
PAGE HEADER
——————————————————————————————————————————
*/

/* Base Header */
.page-header 										{ position: relative; }
.page-header__container								{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; justify-content: flex-end; }


/* Simple Header*/
.page-header--simple 								{ width: 100%; height: auto;  }


/* Full Header */
.page-header--full 									{ width: 100%; height: var(--fullH); }
.page-header--full .page-header__container 			{ position: relative; z-index: 2;  }

.page-header__content 								{ width: 100%; height: auto; background-color: var(--KY00T50); display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; }

.page-header__title 								{ width: 50%; padding: 0 16vw 0 0; display: flex; flex-direction: column; justify-content: flex-start; }
.page-header__lead 									{ width: 50%; padding: var(--S06) 8vw; display: flex; flex-direction: column; justify-content: flex-end; }

.page-header__title h1								{ height: 100%; padding: var(--S04); background-color: var(--K01); color: var(--K00); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--SXS); }
.page-header__title .eyebrow 						{ color: var(--KG30); }


/* Header with Image */
.page-header--has-image 							{ }
.page-header--has-image .page-header__lead 			{ }

/* Image container */
.page-header__image 								{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-header__image::after 							{ content: ""; position: absolute; inset: 0; z-index: 1; }
.page-header__image-img 							{ width: 100%; height: 100%; object-fit: cover; }

/* Image Filters */
.page-header--image-yellow .page-header__image-img 			{ filter: grayscale(100%);}
.page-header--image-yellow .page-header__image::before 		{ content: ""; position: absolute; inset: 0; background-color: var(--KY00); mix-blend-mode: screen; z-index: 1; }
.page-header--image-duotone .page-header__image-img 		{ filter: grayscale(100%); }
.page-header--image-duotone .page-header__image::before 	{ content: ""; position: absolute; inset: 0; background-color: var(--KY00); mix-blend-mode: color; z-index: 1; }
.page-header--image-grayscale .page-header__image-img 		{ filter: grayscale(100%); }
.page-header--image-original .page-header__image-img 		{ filter: none; }


/* Anchor Navigation */

.page-header__anchors 										{ width: 100%; height: auto; margin: 0; padding: 0; background-color: var(--KY00T50); }
.page-header__anchors-list 									{ width: max-content; min-width: 50%; height: auto; margin: 0; padding: var(--S01) var(--S04); background-color: var(--K00); list-style: none; display: flex; flex-wrap: wrap; gap: var(--S00); }
.page-header__anchors-item 									{ margin: 0; }

.page-header__anchors-link {
    display: inline-block;
    padding: var(--spacing-xs, 0.5rem) 0;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: currentColor;
    text-decoration: none;
    transition: opacity var(--transition-fast, 150ms) ease;
}

.page-header__anchors-link:hover,
.page-header__anchors-link:focus {
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 4px;
}






	
/* ==========================================================================
   Accordion Container
   ========================================================================== */

.page-sections {
    border-top: 1px solid var(--color-border, #e0e0e0);
}


/* ==========================================================================
   Single Section (Accordion Item)
   ========================================================================== */

.page-section {
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    scroll-margin-top: var(--FULLBAR, 0);
}


/* ==========================================================================
   Section Header (Trigger)
   ========================================================================== */

.page-section__header {
    margin: 0;
}

.page-section__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1.5rem);
    width: 100%;
    padding: var(--spacing-lg, 2rem) var(--container-padding, 1.5rem);
    
    /* Reset button styles */
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    
    transition: background-color var(--transition-fast, 150ms) ease;
}

.page-section__trigger:hover {
    background-color: var(--color-background-hover, rgba(0, 0, 0, 0.02));
}

.page-section__trigger:focus-visible {
    outline: 2px solid var(--color-focus, #005fcc);
    outline-offset: -2px;
}

.page-section__title {
    flex: 1;
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-tight, 1.2);
    color: var(--color-text, #1a1a1a);
}


/* ==========================================================================
   Toggle Icon (+ / ×)
   ========================================================================== */

.page-section__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;
    color: var(--color-text, #1a1a1a);
}

.page-section__icon svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity var(--transition-fast, 150ms) ease,
                transform var(--transition-base, 300ms) ease;
}

/* Plus icon (default state - closed) */
.page-section__icon-plus {
    opacity: 1;
    transform: rotate(0deg);
}

/* Close icon (hidden by default) */
.page-section__icon-close {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Open state - toggle icons */
.page-section__trigger[aria-expanded="true"] .page-section__icon-plus {
    opacity: 0;
    transform: rotate(90deg);
}

.page-section__trigger[aria-expanded="true"] .page-section__icon-close {
    opacity: 1;
    transform: rotate(0deg);
}


/* ==========================================================================
   Section Content (Collapsible Panel)
   ========================================================================== */

.page-section__content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--transition-base, 300ms) ease;
}

/* Open state */
.page-section__content[aria-hidden="false"] {
    grid-template-rows: 1fr;
}

.page-section__inner {
    min-height: 0;
    overflow: hidden;
}

/* Content padding (only visible when open) */
.page-section__content[aria-hidden="false"] .page-section__inner {
    padding-bottom: var(--spacing-xl, 3rem);
}


/* ==========================================================================
   Section Content Layout
   ========================================================================== */

.section-content {
    padding-inline: var(--container-padding, 1.5rem);
}

/* Fullwidth media above content */
.section-content--media-fullwidth .section-content__media--fullwidth {
    margin-inline: calc(var(--container-padding, 1.5rem) * -1);
    margin-bottom: var(--spacing-lg, 2rem);
}

/* Content body grid */
.section-content__body {
    display: grid;
    gap: var(--spacing-lg, 2rem);
    max-width: var(--container-width, 1200px);
    margin-inline: auto;
}

/* Column layout with media */
.section-content--media-column .section-content__body {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
        "media main"
        "media side";
}

.section-content--media-column .section-content__media--column {
    grid-area: media;
}

.section-content--media-column .section-content__main {
    grid-area: main;
}

.section-content--media-column .section-content__side {
    grid-area: side;
}

/* Layout without media but with sidebar */
.section-content--has-sidebar:not(.section-content--media-column) .section-content__body {
    grid-template-columns: 2fr 1fr;
}


/* ==========================================================================
   Media Elements
   ========================================================================== */

.section-content__figure {
    margin: 0;
}

.section-content__image {
    width: 100%;
    height: auto;
    display: block;
}

.section-content__video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.section-content__video iframe,
.section-content__video embed,
.section-content__video object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   Main Content
   ========================================================================== */

.section-content__text.prose {
    max-width: 65ch;
}

.section-content__text.prose > *:first-child {
    margin-top: 0;
}

.section-content__text.prose > *:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Sidebar
   ========================================================================== */

.section-content__side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1.5rem);
}

.section-content__side-title {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #666);
}

.section-content__side-text {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-relaxed, 1.6);
    color: var(--color-text-muted, #666);
}


/* ==========================================================================
   Related Links
   ========================================================================== */

.section-content__links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
}

.section-content__links-item {
    margin: 0;
}

/* Regular links style */
.section-content__side-links--regular .section-content__link {
    display: inline-block;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary, #005fcc);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast, 150ms) ease;
}

.section-content__side-links--regular .section-content__link:hover {
    color: var(--color-primary-dark, #004499);
}

/* Button links style */
.section-content__side-links--button .section-content__link {
    width: auto; height: 28px; margin: 0; padding: 0 14px; border-radius: 14px; border: solid 1px transparent; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all var(--A01); 
	color: var(--K01); border-color: currentColor;
	font-size: var(--FSSM); line-height: 1.00em; letter-spacing: 0.025em; text-transform: uppercase; 
}

.section-content__side-links--button .section-content__link:hover {
   color: var(--K00); background-color: var(--K01); border-color: transparent;
}



/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .page-section__trigger {
        padding: var(--spacing-md, 1.5rem) var(--container-padding, 1rem);
    }
    
    .page-section__title {
        font-size: var(--font-size-lg, 1.25rem);
    }
    
    .page-section__icon {
        width: 32px;
        height: 32px;
    }
    
    /* Stack all layouts on mobile */
    .section-content__body,
    .section-content--media-column .section-content__body,
    .section-content--has-sidebar:not(.section-content--media-column) .section-content__body {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }
    
    .section-content--media-column .section-content__media--column,
    .section-content--media-column .section-content__main,
    .section-content--media-column .section-content__side {
        grid-area: auto;
    }
}
/* ==========================================================================
   END OF ACCORDION STYLES
   ========================================================================== */






   /* ==========================================================================
   Page Content Wrapper
   ========================================================================== */

.page-content {
    padding: var(--S11) var(--S04);
}

.page-content__inner {
    
}


/* ==========================================================================
   Adjustments for standalone content (not inside accordion)
   ========================================================================== */

/* Remove extra padding since we're not inside accordion panel */
.page-content .section-content {
    padding-inline: 0;
}

/* Fullwidth media should break out of container */
.page-content .section-content--media-fullwidth .section-content__media--fullwidth {
    margin-inline: calc(var(--container-padding, 1.5rem) * -1);
    width: calc(100% + var(--container-padding, 1.5rem) * 2);
}


/* ==========================================================================
   Optional: Visual separator before sections
   ========================================================================== */

.page-content + .page-sections {
    border-top: 1px solid var(--color-border, #e0e0e0);
}
