/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Child theme of Hello Elementor for the Chugach Benefits Portal. Holds the site CSS that previously lived in Appearance > Customize > Additional CSS.
Author: Communication Partners, Inc.
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/


/* ==========================================================================
   Moved verbatim from Appearance > Customize > Additional CSS (Allegiant Pro Child)
   ========================================================================== */

/*oe menu button*/
.oe.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-4787{background-color:#006940; border-radius:5px; }

.menu-main li#menu-item-4787 a{color:#fff}

/*general styles*/
h1{color:#006940}

/*enroll button*/
li#menu-item-4720.oe-bttn.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-4720 a{background-color:#006940;width:180px;text-align:center!important;border-radius:3px;margin-right:20px;padding-left:15px;color:#fff!important;font-size:14px}

ul#menu-main.menu-main{margin-top:10px}

/*quick links styles*/
a.sidebar:link {
	background-color: #006940;
	padding: 20px 20px 20px 20px;
	color: #fff;
	text-decoration: none;
	display:block;
	width:300px;
	margin: 0px 0px 10px 0px;
}
a.sidebar:visited{
	background-color: #006940;
	color: #fff;
	text-decoration: none;
}
a.sidebar:hover{
	background-color: #588569;
	color: #fff;
	text-decoration: none;
}
a.sidebar:active{
	background-color: #006940;
	color: #fff;
	text-decoration: none;
}

/*pdf styles*/
.pdf-icon{
	width:15%;
	margin-right:2%;
	float: left;
}
.instrText{
	width:80%;
	float: left;
	font-size: 120%;
	line-height:120%;
}
.clearfix{clear:both}

.lnks{
	font-weight: bold;
	line-height:120%;
	margin-top:-20px;
}


/* ==========================================================================
   Base styles carried over from Allegiant Pro, which Hello Elementor does not
   provide. Typography and colour live in Elementor > Site Settings.
   ========================================================================== */

.widget .widget-title,
.widget .widget-title.heading {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: #006940;
	margin: 0 0 15px;
}

.widget { margin-bottom: 30px; }

.widget_search .search-form { display: flex; }
.widget_search input[type="search"],
.widget_search input[type="text"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ddd;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
}

/* Quick Links buttons fill the sidebar column instead of a fixed 300px */
.elementor-widget-sidebar a.sidebar {
	width: 100%;
	box-sizing: border-box;
}

/* Elementor text-editor lists: match the old theme's list spacing */
.elementor-widget-text-editor ul { margin: 0 0 22px 20px; }
.elementor-widget-text-editor li { margin-bottom: 5px; }
.elementor-widget-text-editor p { margin: 0 0 22px; }
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child { margin-bottom: 0; }


/* Sidebar lists carry no markers (the old theme suppressed them) */
.elementor-widget-sidebar .widget ul,
.elementor-widget-sidebar .widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Widget titles rendered by the theme (e.g. "Site Search") were small caps */
.widget .widget-title,
.widget .widget-title.heading {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5B5B5B;
	margin: 0 0 10px;
}

/* Search form */
.widget_search input[type="submit"],
.widget_search button[type="submit"] {
	background-color: #006940;
	border: 1px solid #006940;
	color: #fff;
	padding: 8px 16px;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	cursor: pointer;
}
.widget_search input[type="submit"]:hover,
.widget_search button[type="submit"]:hover {
	background-color: #588569;
	border-color: #588569;
}



/* Pages with no Sidebar Replacement mapped leave the sidebar column empty:
   let the content column take the full width instead of a dead gap. */
.elementor-widget-sidebar:empty { display: none; }

/* Home page Quick Links buttons sit in a two-column row, not the sidebar */
.chugach-quicklinks a.sidebar { width: 100%; box-sizing: border-box; padding: 14px 18px; }
.chugach-quicklinks ul { list-style: none; margin: 0; padding: 0; }


/* ==========================================================================
   Page sidebars (built directly in Elementor, no longer WP widgets)
   ========================================================================== */

/* Quick Links list inside the sidebar column */
ul.chugach-ql { list-style: none; margin: 0; padding: 0; }
ul.chugach-ql li { margin: 0 0 10px; }
ul.chugach-ql li:last-child { margin-bottom: 0; }
ul.chugach-ql a.sidebar {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	margin: 0;
	border-radius: 3px;
}

/* BSK PDF document lists — replaces the old .lnks wrapper styling */
.bsk-pdfm-output-container .bsk-pdfm-pdfs-ul-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: bold;
	line-height: 1.2;
}
.bsk-pdfm-output-container .bsk-pdfm-list-item { margin: 0 0 4px; padding: 2px 0; }
.bsk-pdfm-output-container .bsk-pdfm-list-item:last-child { margin-bottom: 0; }


/* ==========================================================================
   HOME PAGE BENEFIT TILES
   Elementor Icon Box widgets carrying .chugach-tile. The icon badge sits on
   its own line with the 45deg arrow opposite it; title and description below.
   Icons are set per widget in Elementor, so glyphs can be swapped there.
   ========================================================================== */
.chugach-tile {
	display: flex;
	flex: 1 1 auto;
	align-self: stretch;
}
.chugach-tile > .elementor-widget-container {
	display: flex;
	width: 100%;
}

.chugach-tile .elementor-icon-box-wrapper {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 18px;
	background-color: #FFFFFF;
	border: 1px solid #CBDBD1;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 47, 29, .08);
	text-align: left;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Icon badge. Flex centring keeps the glyph centred on both axes. */
.chugach-tile .elementor-icon-box-icon {
	margin: 0 !important;
	flex: none;
}
.chugach-tile .elementor-icon-box-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: #006940;
	color: #FFFFFF;
	font-size: 19px;
	line-height: 1;
}
.chugach-tile .elementor-icon-box-icon .elementor-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* The 45deg arrow, sitting opposite the icon badge */
.chugach-tile .elementor-icon-box-wrapper::after {
	content: "";
	position: absolute;
	top: 32px;
	right: 18px;
	width: 14px;
	height: 14px;
	background-color: #006940;
	-webkit-mask-image: var(--chugach-arrow);
	mask-image: var(--chugach-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .18s ease;
}

.chugach-tile .elementor-icon-box-content { width: 100%; text-align: left; }
.chugach-tile .elementor-icon-box-title {
	text-align: left;
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}
.chugach-tile .elementor-icon-box-title a {
	color: #006940;
	text-decoration: none;
}
/* Stretch the title link across the tile so the whole card is clickable */
.chugach-tile .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.chugach-tile .elementor-icon-box-description {
	text-align: left;
	margin: 5px 0 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: #444444;
}

.chugach-tile .elementor-icon-box-wrapper:hover {
	border-color: #006940;
	box-shadow: 0 6px 18px rgba(0, 47, 29, .16);
	transform: translateY(-2px);
}
.chugach-tile .elementor-icon-box-wrapper:hover::after { transform: translate(2px, -2px); }
.chugach-tile .elementor-icon-box-title a:focus-visible { outline: none; }
.chugach-tile .elementor-icon-box-wrapper:has(a:focus-visible) {
	outline: 2px solid #006940;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.chugach-tile .elementor-icon-box-wrapper,
	.chugach-tile .elementor-icon-box-wrapper::after { transition: none; }
	.chugach-tile .elementor-icon-box-wrapper:hover { transform: none; }
	.chugach-tile .elementor-icon-box-wrapper:hover::after { transform: none; }
}



/* ==========================================================================
   MEDIA COLUMN THAT MATCHES THE COPY BESIDE IT
   Put .chugach-media-fill on an Image widget whose parent section is set to
   Align Items: Stretch. The image then fills the column height instead of
   floating in the middle of it. Stacks back to natural height on mobile.
   ========================================================================== */
.chugach-media-fill { flex: 1 1 auto; }
.chugach-media-fill,
.chugach-media-fill > .elementor-widget-container,
.chugach-media-fill figure,
.chugach-media-fill .elementor-image { height: 100%; }
.chugach-media-fill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 767px) {
	.chugach-media-fill img { height: auto; }
}


/* ==========================================================================
   VIDEO SPLASH OVERLAY
   An Icon Box widget carrying .chugach-video-splash, dropped into a column
   that already holds an Image widget. It lies over that image as a scrim with
   a play button, an eyebrow (the widget's Description field) and the title.
   The parent column is an .e-con, which Elementor already positions relative.
   ========================================================================== */
.chugach-video-splash {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	margin: 0;
}
.chugach-video-splash > .elementor-widget-container {
	display: flex;
	width: 100%;
}
.chugach-video-splash .elementor-icon-box-wrapper {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 30px 24px;
	border-radius: 7px;
	text-align: center;
	background-image: linear-gradient(180deg, rgba(0, 47, 29, .26) 0%, rgba(0, 47, 29, .50) 55%, rgba(0, 47, 29, .76) 100%);
}

/* Play button. Flex centring keeps the glyph centred on both axes. */
.chugach-video-splash .elementor-icon-box-icon {
	margin: 0 !important;
	flex: none;
	display: flex;
	justify-content: center;
	width: 100%;
}
.chugach-video-splash .elementor-icon-box-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .94);
	color: #006940;
	box-shadow: 0 6px 22px rgba(0, 31, 19, .35);
	transition: transform .2s ease, background-color .2s ease;
}
.chugach-video-splash .elementor-icon-box-icon .elementor-icon svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
	/* fa-play fills its own box edge to edge, so a geometric centre puts the
	   triangle's visual mass (its centroid, a third in from the flat side)
	   left of the circle's centre. Nudge right to centre it optically. */
	transform: translateX(2px);
}

.chugach-video-splash .elementor-icon-box-content {
	display: flex;
	/* Elementor flex-grows this, which pushed the group up off centre */
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 100%;
	text-align: center;
}
/* The widget's Description is used as the eyebrow, so it sits above the title */
.chugach-video-splash .elementor-icon-box-description {
	order: -1;
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255, 255, 255, .84);
}
.chugach-video-splash .elementor-icon-box-title {
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 1px 12px rgba(0, 31, 19, .45);
}
.chugach-video-splash .elementor-icon-box-title a {
	color: #FFFFFF;
	text-decoration: none;
}
/* Stretch the title link so the whole splash is one click target */
.chugach-video-splash .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.chugach-video-splash .elementor-icon-box-wrapper:hover .elementor-icon {
	transform: scale(1.07);
	background-color: #FFFFFF;
}
.chugach-video-splash .elementor-icon-box-wrapper:has(a:focus-visible) {
	outline: 2px solid #FFFFFF;
	outline-offset: -4px;
}
@media (max-width: 767px) {
	.chugach-video-splash .elementor-icon-box-title { font-size: 21px; }
	.chugach-video-splash .elementor-icon-box-icon .elementor-icon { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
	.chugach-video-splash .elementor-icon-box-icon .elementor-icon { transition: none; }
	.chugach-video-splash .elementor-icon-box-wrapper:hover .elementor-icon { transform: none; }
}


/* ==========================================================================
   HOME PAGE INTRO SECTION — video frame, info cards, closing line
   ========================================================================== */

/* Holds the splash image at a 16:9 screen ratio whatever the source crop is */
.chugach-video-frame { width: 100%; }
.chugach-video-frame img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

/* Info cards — the benefit-tile look, minus the arrow and the link */
.chugach-infocard {
	display: flex;
	flex: 1 1 auto;
	align-self: stretch;
}
.chugach-infocard > .elementor-widget-container {
	display: flex;
	width: 100%;
}
.chugach-infocard .elementor-icon-box-wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 20px 18px;
	background-color: #FFFFFF;
	border: 1px solid #CBDBD1;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 47, 29, .08);
	text-align: left;
}
.chugach-infocard .elementor-icon-box-icon {
	margin: 0 !important;
	flex: none;
}
.chugach-infocard .elementor-icon-box-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: #006940;
	color: #FFFFFF;
	font-size: 19px;
	line-height: 1;
}
.chugach-infocard .elementor-icon-box-icon .elementor-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: currentColor;
}
.chugach-infocard .elementor-icon-box-content { width: 100%; text-align: left; }
.chugach-infocard .elementor-icon-box-title {
	text-align: left;
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: #006940;
}
.chugach-infocard .elementor-icon-box-description {
	text-align: left;
	margin: 6px 0 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: #444444;
}

/* The closing line, set apart under the three cards */
.chugach-intro-closing {
	width: 100%;
	padding-top: 18px;
	border-top: 1px solid #CBDBD1;
}
.chugach-intro-closing p {
	margin: 0;
	text-align: center;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: #006940;
}


/* ==========================================================================
   HOME PAGE INTRO — INFO ROWS (Option C)
   Icon Box widgets set to Position: Left, carrying .chugach-inforow. Full
   width, separated by hairline rules rather than card chrome. The closing
   line's own top rule closes the last row, so rows only need a top border.
   ========================================================================== */
.chugach-inforow { width: 100%; }
.chugach-inforow .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid #CBDBD1;
	background: none;
	text-align: left;
}
.chugach-inforow .elementor-icon-box-icon {
	margin: 0 !important;
	padding: 0;
	flex: none;
	width: auto;
}
.chugach-inforow .elementor-icon-box-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: #006940;
	color: #FFFFFF;
	font-size: 19px;
	line-height: 1;
}
.chugach-inforow .elementor-icon-box-icon .elementor-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: currentColor;
}
.chugach-inforow .elementor-icon-box-content {
	flex: 1;
	min-width: 0;
	max-width: 78ch;
	padding: 0;
	text-align: left;
}
.chugach-inforow .elementor-icon-box-title {
	margin: 0 0 4px;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: #006940;
}
.chugach-inforow .elementor-icon-box-description {
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	color: #444444;
}
@media (max-width: 600px) {
	.chugach-inforow .elementor-icon-box-wrapper { gap: 12px; }
}


/* ==========================================================================
   HOME PAGE INTRO — INFO COLUMNS
   The ruled treatment in a 3-up grid that stacks on mobile. Icon Box widgets
   carrying .chugach-infocol. A CSS grid puts the icon badge beside the label
   on the first line and lets the paragraph run the full column width below.
   ========================================================================== */
.chugach-infocol {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	align-self: stretch;
}
/* The divider sits in the middle of the gutter, so it costs the columns no
   width and all three text blocks keep the same measure. */
.chugach-infocol::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -19px;
	width: 1px;
	background-color: #CBDBD1;
}
.e-con:first-child > .chugach-infocol::before { display: none; }
/* Two-up on tablet: the gutter alone separates them. */
@media (max-width: 1024px) {
	.chugach-infocol::before { display: none; }
}
/* Stacked on mobile: the divider turns horizontal. */
@media (max-width: 767px) {
	.chugach-infocol::before {
		display: block;
		top: -19px;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 1px;
	}
	.e-con:first-child > .chugach-infocol::before { display: none; }
}
.chugach-infocol .elementor-icon-box-wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon title"
		"text text";
	column-gap: 12px;
	row-gap: 11px;
	align-items: start;
	align-content: start;
	margin: 0;
	padding: 0;
	background: none;
	text-align: left;
}
.chugach-infocol .elementor-icon-box-icon {
	grid-area: icon;
	margin: 0 !important;
	padding: 0;
	width: auto;
}
.chugach-infocol .elementor-icon-box-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: #006940;
	color: #FFFFFF;
	font-size: 19px;
	line-height: 1;
}
.chugach-infocol .elementor-icon-box-icon .elementor-icon svg {
	display: block;
	width: 19px;
	height: 19px;
	fill: currentColor;
}
/* lets the title and description become grid items in their own right */
.chugach-infocol .elementor-icon-box-content { display: contents; }
.chugach-infocol .elementor-icon-box-title {
	grid-area: title;
	align-self: center;
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: #006940;
}
.chugach-infocol .elementor-icon-box-description {
	grid-area: text;
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	color: #444444;
}


/* ==========================================================================
   HOME PAGE RESOURCES BAND
   Three centred resource links under the benefit tiles. Elementor Icon widget
   for the badge, an uppercase green label, and centred copy with inline links.
   ========================================================================== */
.chugach-resicon .elementor-icon-wrapper { text-align: center; }
.chugach-resicon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background-color: #006940;
	color: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 47, 29, .14);
	transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.chugach-resicon .elementor-icon svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.chugach-resicon .elementor-icon:hover {
	background-color: #005634;
	box-shadow: 0 5px 16px rgba(0, 47, 29, .24);
	transform: translateY(-2px);
}
.chugach-resicon .elementor-icon:focus-visible {
	outline: 2px solid #006940;
	outline-offset: 3px;
}

.chugach-restitle .elementor-heading-title {
	margin: 0;
	text-align: center;
}

.chugach-restext { text-align: center; }
.chugach-restext p {
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	text-align: center;
	color: #444444;
}
.chugach-restext a {
	color: #006940;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 105, 64, .35);
}
.chugach-restext a:hover {
	color: #005634;
	border-bottom-color: #005634;
}

@media (prefers-reduced-motion: reduce) {
	.chugach-resicon .elementor-icon { transition: none; }
	.chugach-resicon .elementor-icon:hover { transform: none; }
}


/* ==========================================================================
   HOME PAGE INTRO — INFO COLUMNS (eyebrow + H2 + copy, no icons)
   The divider now lives on the column CONTAINERS, keyed by the row's
   Elementor ID, because _css_classes never renders on containers on this
   build. It sits at half the 38px gutter so it costs the columns no width.
   ========================================================================== */
.elementor-element-rgcardrw > .e-con::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -19px;
	width: 1px;
	background-color: #CBDBD1;
}
.elementor-element-rgcardrw > .e-con:first-child::before { display: none; }
/* Two-up on tablet: the gutter alone separates them. */
@media (max-width: 1024px) {
	.elementor-element-rgcardrw > .e-con::before { display: none; }
}
/* Stacked on mobile: the divider turns horizontal. */
@media (max-width: 767px) {
	.elementor-element-rgcardrw > .e-con::before {
		display: block;
		top: -19px;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 1px;
	}
	.elementor-element-rgcardrw > .e-con:first-child::before { display: none; }
}

.chugach-coleyebrow .elementor-heading-title {
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
	color: #5B5B5B;
}
.chugach-coltitle .elementor-heading-title {
	margin: 6px 0 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: #006940;
}
.chugach-coltext { margin-top: 12px; }
.chugach-coltext p {
	margin: 0;
	/* keeps single-word widows off the last line where supported */
	text-wrap: pretty;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	color: #444444;
}


/* ==========================================================================
   SPACING + SIDEBAR DOCUMENT ARROWS
   ========================================================================== */

/* 1. BSK adds 8px margin and 8px padding above its list, pushing the first
      document 30px below the "Documents" heading. Zeroing it leaves the
      column's own 14px gap, matching Quick Links and its list. */
.bsk-pdfm-output-container {
	margin-top: 0;
	padding-top: 0;
}

/* 2. In the main content column an H2 sits 24px above its copy — the same gap
      that separates unrelated blocks. Pull the copy up so it reads as
      belonging to the heading above it. H1 spacing is left alone. */
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading:has(h2) + .elementor-widget-text-editor,
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading:has(h2) + .elementor-widget-image {
	margin-top: -14px;
}

/* 3. Sidebar document names get the same 45deg arrow as the Quick Links, but
      only on rollover. It is laid out at all times and only faded in, so the
      line never reflows under the cursor. */
/* Parked at the right edge rather than inline, so reserving room for it can
   never push a long document name onto an extra line. The extra specificity
   beats the padding shorthand in the BSK block further down the file. */
.bsk-pdfm-output-container .bsk-pdfm-pdfs-ul-list .bsk-pdfm-list-item {
	position: relative;
}
.bsk-pdfm-output-container .bsk-pdfm-list-item a::after {
	content: "";
	position: absolute;
	right: -16px;
	top: 5px;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask-image: var(--chugach-arrow);
	mask-image: var(--chugach-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0;
	transform: translate(-3px, 3px);
	transition: opacity .18s ease, transform .18s ease;
}
.bsk-pdfm-output-container .bsk-pdfm-list-item a:hover::after,
.bsk-pdfm-output-container .bsk-pdfm-list-item a:focus-visible::after {
	opacity: 1;
	transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
	.bsk-pdfm-output-container .bsk-pdfm-list-item a::after {
		transition: none;
		transform: none;
	}
	.bsk-pdfm-output-container .bsk-pdfm-list-item a:hover::after,
	.bsk-pdfm-output-container .bsk-pdfm-list-item a:focus-visible::after { transform: none; }
}

/* ==========================================================================
   STICKY HEADER — glassmorphism
   ========================================================================== */
.elementor-location-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 500;
	background-color: rgba(255, 255, 255, 0.62);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 4px 24px rgba(0, 47, 29, 0.10);
}
/* Browsers without backdrop-filter get a solid bar rather than washed-out text */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.elementor-location-header { background-color: rgba(255, 255, 255, 0.96); }
}
/* Clear the WP admin bar while logged in */
body.admin-bar .elementor-location-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .elementor-location-header { top: 46px; }
}

/* Search toggle in the header — keep a 32px hit area around the 20px icon */
.elementor-location-header .elementor-search-form__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	cursor: pointer;
}
/* Elementor sizes this icon from its own custom properties */
.elementor-location-header .elementor-widget-search-form {
	--e-search-form-toggle-size: 34px;
	--e-search-form-toggle-icon-size: 20px;
	--e-search-form-toggle-color: #006940;
}
.elementor-location-header .elementor-search-form__toggle .e-font-icon-svg-container,
.elementor-location-header .elementor-search-form__toggle .e-font-icon-svg,
.elementor-location-header .elementor-search-form__toggle svg {
	width: 20px !important;
	height: 20px !important;
	fill: currentColor;
}
.elementor-location-header .elementor-search-form__toggle:hover { color: #588569; }
.elementor-location-header .elementor-nav-menu--main .elementor-item { white-space: nowrap; }

/* ==========================================================================
   STICKY SIDEBARS
   The sidebar is the second column of the row inside the post content.
   ========================================================================== */
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child + .e-con.e-child {
	position: -webkit-sticky;
	position: sticky;
	top: 110px;
	align-self: flex-start;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
body.admin-bar .elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child + .e-con.e-child {
	top: 142px;
	max-height: calc(100vh - 162px);
}
/* Stacked layout — no stickiness once the sidebar sits under the content */
@media (max-width: 1024px) {
	.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child + .e-con.e-child,
	body.admin-bar .elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child + .e-con.e-child {
		position: static;
		max-height: none;
		overflow: visible;
	}
}


/* ==========================================================================
   QUICK LINKS — Option A (solid, refined)
   Built on Elementor's Icon List widget; the 45deg arrow is drawn here so
   every row gets one automatically, including rows added later in Elementor.
   ========================================================================== */
.chugach-ql-list .elementor-icon-list-items { margin: 0; padding: 0; list-style: none; }

.chugach-ql-list .elementor-icon-list-item { margin: 0; }

.chugach-ql-list .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background-color: #006940;
	color: #fff;
	padding: 13px 15px;
	border-radius: 8px;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.28;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 47, 29, .14);
	transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Elementor renders an empty icon span when no icon is chosen — hide it */
.chugach-ql-list .elementor-icon-list-icon { display: none; }

.chugach-ql-list .elementor-icon-list-text {
	padding: 0;
	color: inherit;
}

/* The 45deg arrow */
.chugach-ql-list .elementor-icon-list-item > a::after {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-image: var(--chugach-arrow);
	mask-image: var(--chugach-arrow);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .18s ease;
}

:root {
	--chugach-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 L16.5 7.5'/%3E%3Cpath d='M9.5 7.5 H16.5 V14.5'/%3E%3C/svg%3E");
}

.chugach-ql-list .elementor-icon-list-item > a:hover {
	background-color: #005634;
	box-shadow: 0 5px 16px rgba(0, 47, 29, .24);
	transform: translateY(-1px);
}
.chugach-ql-list .elementor-icon-list-item > a:hover::after {
	transform: translate(2px, -2px);
}
.chugach-ql-list .elementor-icon-list-item > a:focus-visible {
	outline: 2px solid #006940;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.chugach-ql-list .elementor-icon-list-item > a,
	.chugach-ql-list .elementor-icon-list-item > a::after { transition: none; }
	.chugach-ql-list .elementor-icon-list-item > a:hover { transform: none; }
	.chugach-ql-list .elementor-icon-list-item > a:hover::after { transform: none; }
}


/* ==========================================================================
   HERO BUTTONS — same language as the Quick Links (radius, lift, arrow)
   Colours, padding and type come from the widget settings; this adds the
   arrow, the flex layout and the hover movement.
   ========================================================================== */
:root {
	--chugach-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5 V17'/%3E%3Cpath d='M7.5 12.5 L12 17 L16.5 12.5'/%3E%3C/svg%3E");
}

.chugach-hero-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 224px;
	box-shadow: 0 1px 2px rgba(0, 47, 29, .16);
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.chugach-hero-btn .elementor-button::after {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform .18s ease;
}

/* Goes to another page — 45deg arrow, matching the Quick Links */
.chugach-hero-btn--green .elementor-button::after {
	-webkit-mask-image: var(--chugach-arrow);
	mask-image: var(--chugach-arrow);
}
.chugach-hero-btn--green .elementor-button:hover::after { transform: translate(2px, -2px); }

/* Scrolls down this page — arrow points down */
.chugach-hero-btn--white .elementor-button::after {
	-webkit-mask-image: var(--chugach-arrow-down);
	mask-image: var(--chugach-arrow-down);
}
.chugach-hero-btn--white .elementor-button:hover::after { transform: translateY(3px); }

.chugach-hero-btn .elementor-button:hover {
	box-shadow: 0 6px 18px rgba(0, 30, 18, .28);
	transform: translateY(-1px);
}
.chugach-hero-btn .elementor-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Anchor targets clear the sticky header */
#your-benefits { scroll-margin-top: 120px; }
body.admin-bar #your-benefits { scroll-margin-top: 152px; }

html { scroll-behavior: smooth; }

/* Elementor puts overflow-x:clip on <body>, which stops the root from being
   scrolled programmatically and breaks anchor scrolling. Clearing it restores
   both; nothing on these pages overflows horizontally. */
body { overflow-x: visible; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.chugach-hero-btn .elementor-button,
	.chugach-hero-btn .elementor-button::after { transition: none; }
	.chugach-hero-btn .elementor-button:hover { transform: none; }
	.chugach-hero-btn .elementor-button:hover::after { transform: none; }
}

/* ==========================================================================
   CGS — BENEFIT PLAN TABLES, CALLOUTS, PENDING LINKS (Oct 2026)
   .chugach-plantable  Text Editor widget holding a .cpt-table (+ .cpt-footnote)
   .chugach-callout    Text Editor widget: h3 + paragraph on the section grey
   Pending rows        Quick Links / Documents items with no URL yet
   ========================================================================== */
.chugach-plantable .elementor-widget-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chugach-plantable .cpt-table { width: 100%; margin: 0 0 8px; border-collapse: collapse; border-spacing: 0; font-family: "Source Sans Pro", sans-serif; font-size: 14px; line-height: 1.35; color: #444; background-color: #fff; }
.chugach-plantable .cpt-table--medical { min-width: 660px; font-size: 13px; }
.chugach-plantable .cpt-table th,
.chugach-plantable .cpt-table td { padding: 9px 8px; border: 0; border-bottom: 1px solid #DCE4DF; vertical-align: middle; text-align: center; line-height: 1.35; background-color: transparent; }
.chugach-plantable .cpt-table td { border-left: 1px solid #E6ECE8; }
.chugach-plantable .cpt-table tbody > tr:nth-child(odd) > td,
.chugach-plantable .cpt-table tbody > tr:nth-child(odd) > th,
.chugach-plantable .cpt-table tbody > tr:hover > td,
.chugach-plantable .cpt-table tbody > tr:hover > th { background-color: transparent; }
.chugach-plantable .cpt-table thead th { background-color: #006940; color: #fff; font-weight: 700; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .28); }
.chugach-plantable .cpt-table thead tr + tr th { background-color: #E6EFE9; color: #006940; font-size: .92em; border-left: 1px solid #fff; }
.chugach-plantable .cpt-table thead th[rowspan] { text-align: left; border-left: 0; background-color: #006940; color: #fff; font-size: 1em; }
.chugach-plantable .cpt-table tbody th { text-align: left; font-weight: 400; color: #444; }
.chugach-plantable .cpt-table .cpt-note { display: block; font-size: .92em; color: #6B6B6B; }
.chugach-plantable .cpt-table .cpt-indent { display: block; padding-left: 14px; }
.chugach-plantable .cpt-table tbody > tr.cpt-youpay > th,
.chugach-plantable .cpt-table tbody > tr.cpt-youpay > td { background-color: #F4F6F4; color: #006940; font-weight: 700; font-size: .92em; padding-top: 6px; padding-bottom: 6px; }
.chugach-plantable .cpt-table tbody > tr.cpt-section > th { background-color: #F4F6F4; color: #006940; text-align: left; }
.chugach-plantable .cpt-footnote { margin: 0; font-size: 13px; line-height: 1.45; color: #6B6B6B; }

.chugach-callout .elementor-widget-container { background-color: #F4F6F4; border-radius: 7px; padding: 20px 24px; }
.chugach-callout h3 { margin: 0 0 6px; font-family: "Source Sans Pro", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; color: #006940; }
.chugach-callout p { margin: 0; }

/* Quick Links row with no URL yet: same button at rest, no hover */
.chugach-ql-list .elementor-icon-list-item:not(:has(> a)) > .elementor-icon-list-text { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 12px; background-color: #006940; color: #fff; padding: 13px 15px; border-radius: 8px; font-family: "Source Sans Pro", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.28; box-shadow: 0 1px 2px rgba(0, 47, 29, .14); cursor: default; }
.chugach-ql-list .elementor-icon-list-item:not(:has(> a)) > .elementor-icon-list-text::after { content: ""; flex: none; width: 15px; height: 15px; background-color: currentColor; -webkit-mask-image: var(--chugach-arrow); mask-image: var(--chugach-arrow); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }

/* CGS tables: even plan columns, centred 'You pay:' band, header row rules; pending document row; unbroken email links */
.chugach-plantable .cpt-table--medical,
.chugach-plantable .cpt-table--dental,
.chugach-plantable .cpt-table--vision { table-layout: fixed; }
.chugach-plantable .cpt-table--medical thead tr:first-child th:first-child { width: 18%; }
.chugach-plantable .cpt-table--dental thead tr:first-child th:first-child,
.chugach-plantable .cpt-table--vision thead tr:first-child th:first-child { width: 44%; }
.chugach-plantable .cpt-table thead tr + tr th { border-top: 1px solid #fff; }
.chugach-plantable .cpt-table tbody > tr.cpt-youpay > th { text-align: center; }
.bsk-pdfm-output-container.chugach-doc-pending { padding-bottom: 0; margin-bottom: 4px; }
.chugach-nowrap { white-space: nowrap; }

/* CGS cost-for-coverage tables (h3 title + .cpt-table--cost; 2-col version lines up with the 44% dental/vision tables) */
.chugach-plantable h3 { margin: 0 0 10px; font-family: "Source Sans Pro", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.25; color: #006940; }
.chugach-plantable .cpt-table--cost { table-layout: fixed; }
.chugach-plantable .cpt-table--cost thead th:first-child { width: 28%; text-align: left; border-left: 0; }
.chugach-plantable .cpt-table--cost.cpt-table--2col thead th:first-child { width: 44%; }

/* ==========================================================================
   CONTENT HEADING RHYTHM (Oct 2026)
   More space above a heading than below it, so copy sits with its own
   heading and each section reads as a separate block.
   Scoped to page content rendered by the Single Page template (post
   content widget). Header, heroes, footer and the home page are untouched.
   Sidebar column: only the space above a second heading changes.
   ========================================================================== */

/* --- Headings typed inside Text Editor widgets / classic page content --- */
.elementor-widget-theme-post-content :where(h1, h2, h3, h4):where(:not(.elementor-heading-title, .elementor-icon-box-title)) {
	margin-top: 40px;
	margin-bottom: 12px;
}
.elementor-widget-theme-post-content :where(h2):where(:not(.elementor-heading-title, .elementor-icon-box-title)) {
	margin-top: 40px;
	margin-bottom: 8px;
}
.elementor-widget-theme-post-content :where(h3, h4):where(:not(.elementor-heading-title, .elementor-icon-box-title)) {
	margin-top: 30px;
	margin-bottom: 6px;
}
/* nothing extra above the first heading in a block */
.elementor-widget-theme-post-content :where(h1, h2, h3, h4):where(:first-child) {
	margin-top: 0;
}
/* a sub-heading directly under its parent heading stays close to it */
.elementor-widget-theme-post-content :where(h1, h2, h3, h4) + :where(h2, h3, h4) {
	margin-top: 12px;
}

/* --- Heading widgets in the main column (container gap is 24px) --- */
/* space ABOVE: H2 24 -> 40, H3 24 -> 30 */
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget + .elementor-widget-heading:has(h2) {
	margin-top: 16px;
}
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget + .elementor-widget-heading:has(h3) {
	margin-top: 6px;
}
/* heading straight after a heading: 12 */
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading + .elementor-widget-heading {
	margin-top: -12px;
}
/* space BELOW: H1 24 -> 12, H2 24 -> 8 (was 10), H3 24 -> 6 */
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading:has(h1) + .elementor-widget {
	margin-top: -12px;
}
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading:has(h2) + .elementor-widget-text-editor,
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading:has(h2) + .elementor-widget-image {
	margin-top: -16px;
}
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading:has(h3) + .elementor-widget-text-editor,
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:first-child .elementor-widget-heading:has(h3) + .elementor-widget-image {
	margin-top: -18px;
}

/* --- Sidebar: a heading after another widget (e.g. "Documents" under the
       Quick Links) gets 28px above; its list stays 14px below --- */
.elementor-widget-theme-post-content > .elementor-widget-container > .elementor > .e-con.e-parent > .e-con.e-child:not(:first-child) .elementor-widget + .elementor-widget-heading {
	margin-top: 14px;
}

/* --- Lead-in line ("Learn more:") sits right on top of the link below it.
       Add class="chugach-leadin" to the lead-in <p> in the Text Editor. --- */
.elementor-widget-text-editor p.chugach-leadin {
	margin-bottom: 4px;
}
/* ======================= END CONTENT HEADING RHYTHM ======================= */

/* ======================== QUICK LINK BUTTON GRID (Nov 2026) ========================
   Add "chugach-ql-grid" next to "chugach-ql-list" on an Icon List widget to lay its
   buttons out in columns. The column count follows the widget's own width (container
   query), not the viewport: 3 columns from 680px, 2 from 400px, otherwise 1.
   Buttons in a row match height. Space above/below is set on the widget itself
   (Advanced > Margin), because the main-column gap is not the same on every site.
   First used on Voluntary Benefits (4253), main + CGS. */
/* width: 100% matters: Elementor containers wrap on mobile, and a wrapping flex
   column sizes an auto-width item at fit-content, which inline-size containment
   makes 0px wide, so the widget came out far too tall. A definite width avoids it. */
.chugach-ql-grid {
	container-type: inline-size;
	width: 100%;
}

.chugach-ql-grid .elementor-icon-list-items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

@container (min-width: 400px) {
	.chugach-ql-grid .elementor-icon-list-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 680px) {
	.chugach-ql-grid .elementor-icon-list-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.chugach-ql-grid .elementor-icon-list-item {
	align-items: stretch;
}

.chugach-ql-grid .elementor-icon-list-item > a {
	width: 100%;
}
/* ====================== END QUICK LINK BUTTON GRID ====================== */