/* ==========================================================================
   HNIB components (Academy integration, phase 1)
   Loaded on every page from the enfold-child theme (see hnib-components.php).
   Pieces: brand tokens, separator, ghost mark, header Register button,
   gold CTA band, site footer. Everything is scoped under #top so it beats
   Enfold's own rules without touching Enfold's files.
   ========================================================================== */

:root {
	--hnib-navy: #111e3f;
	--hnib-navy-2: #1e2e56;
	--hnib-border: #263a66;
	--hnib-gold: #d4a843;
	--hnib-gold-hover: #e0b856;
	--hnib-ice: #a8cce0;
	--hnib-ice-light: #c5ddf0;
	--hnib-text: #c0cfe0;
	--hnib-dim: #7a8daa;
	--hnib-display: 'Teko', 'Barlow Condensed', sans-serif;
	--hnib-body: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Separator: mini crest between two hairlines, above section titles.
   Markup: [hnib_sep] or [hnib_sep style="light"] in any Text Block.
   -------------------------------------------------------------------------- */
#top .hnib-sep {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 360px;
	margin: 0 auto 16px;
}
#top .hnib-sep::before,
#top .hnib-sep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(168, 204, 224, .35);
}
#top .hnib-sep--light::before,
#top .hnib-sep--light::after {
	background: rgba(17, 30, 63, .22);
}
#top .hnib-sep--left {
	margin-left: 0;
}
#top .hnib-sep--left::before {
	display: none;
}
#top .hnib-sep__icon {
	flex: none;
	width: 44px;
	height: 44px;
	background: url('assets/hnib-sep-icon.svg') center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Ghost mark: the authentic HNIB logo (one-colour knockout) at low opacity,
   bleeding off one edge.
   Add class hnib-ghost (white mark, dark sections) or hnib-ghost hnib-ghost--navy
   (navy mark, gold or light sections) to any section.
   -------------------------------------------------------------------------- */
#top .hnib-ghost {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
#top .hnib-ghost::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: min(980px, 130%);
	aspect-ratio: 1024 / 718;
	right: -16%;
	top: 50%;
	transform: translateY(-50%);
	background: url('assets/hnib-logo-ghost-white.webp') center / contain no-repeat;
	opacity: .07;
}
#top .hnib-ghost--navy::before {
	background-image: url('assets/hnib-logo-ghost-navy.webp');
	opacity: .1;
}
#top .hnib-ghost--left::before {
	right: auto;
	left: -16%;
}

/* --------------------------------------------------------------------------
   Header: gold Register button, outline Check Eligibility.
   Menu items: add CSS class hnib-menu-register (Menu Style: Button) and
   hnib-menu-eligibility (Menu Style: Button, bordered) in Appearance > Menus.
   -------------------------------------------------------------------------- */
#top #header .av-main-nav > li.hnib-menu-register > a,
#top #header .av-main-nav > li.hnib-menu-register > a:hover {
	background: transparent;
}
#top #header .av-main-nav > li.hnib-menu-register > a .avia-menu-text {
	background: var(--hnib-gold) !important;
	color: var(--hnib-navy) !important;
	border-radius: 6px;
	font-family: var(--hnib-body) !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	padding: 9px 18px !important;
	border: 2px solid var(--hnib-gold) !important;
}
#top #header .av-main-nav > li.hnib-menu-register {
	margin-left: 10px;
}
#top #header .av-main-nav > li.hnib-menu-register > a:hover .avia-menu-text,
#top #header .av-main-nav > li.hnib-menu-register > a:focus-visible .avia-menu-text {
	background: var(--hnib-gold-hover) !important;
}
#top #header .av-main-nav > li.hnib-menu-eligibility > a .avia-menu-text {
	background: transparent !important;
	color: #ffffff !important;
	border: 2px solid var(--hnib-ice) !important;
	border-radius: 6px;
	padding: 9px 16px !important;
}
#top #header .av-main-nav > li.hnib-menu-eligibility > a:hover .avia-menu-text {
	border-color: #ffffff !important;
}

/* Laptop widths: with 2027 DATES and Register both in the menu, Enfold's
   13px link padding wraps Register onto a second line around 1366px. */
@media only screen and (min-width: 990px) and (max-width: 1499px) {
	#top #header .av-main-nav > li.menu-item-top-level > a {
		padding-left: 10px !important;
		padding-right: 11px !important;
	}
	/* Enfold draws each divider as the text's left border; keep the space on
	   both sides of the divider even (about 8px each). */
	#top #header .av-main-nav > li.menu-item-top-level:not(.av-menu-button) > a .avia-menu-text {
		padding-left: 8px !important;
	}
	#top #header .av-main-nav > li.hnib-menu-register {
		margin-left: 6px;
	}
}
/* Enfold keeps its large menu font from 990 to 1049px, which already wrapped the
   menu before Register was added; use Enfold's own small size there. */
@media only screen and (min-width: 990px) and (max-width: 1049px) {
	#top #header .av-main-nav > li.menu-item-top-level > a .avia-menu-text {
		font-size: 11px !important;
	}
}
@media only screen and (min-width: 1281px) and (max-width: 1499px) {
	#top #header .av-main-nav > li.menu-item-top-level > a .avia-menu-text {
		font-size: 15px !important;
	}
}

/* Phones and tablets: Enfold hides the bottom menu bar below 990px, so
   hnib-components.php prints this link in the logo row. Order (JC, Oct 14):
   logo, burger, Register at the far right. The burger is pushed left by the
   Register width (about 93px) plus a 15px gap. */
#top .hnib-mobile-register {
	display: none;
}
@media only screen and (max-width: 989px) {
	#top #header_main .inner-container {
		position: relative;
	}
	#top #header_main .av-main-nav-wrap {
		margin-right: 108px !important;
	}
	#top #header .hnib-mobile-register {
		display: flex;
		align-items: center;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		z-index: 10;
		min-height: 44px;
		padding: 0 16px;
		border-radius: 6px;
		background: var(--hnib-gold);
		color: var(--hnib-navy);
		font-family: var(--hnib-body);
		font-weight: 700;
		font-size: 15px;
		line-height: 1;
		letter-spacing: .08em;
		text-transform: uppercase;
		text-decoration: none;
	}
	#top #header .hnib-mobile-register:hover,
	#top #header .hnib-mobile-register:focus-visible {
		background: var(--hnib-gold-hover);
	}
}
/* Tablets (768-989px): Enfold keeps the social icons in the logo row there, and
   the Register link covered them. Hide them in that range (the footer still has
   them) and drop the divider Enfold draws beside the burger, as on phones. */
@media only screen and (min-width: 768px) and (max-width: 989px) {
	#top #header_main .main_menu .social_bookmarks {
		display: none !important;
	}
	#top #header_main .av-main-nav-wrap.av_menu_icon_beside {
		border-right: 0 !important;
		padding-right: 0 !important;
		margin-right: 108px !important;
	}
}

/* --------------------------------------------------------------------------
   Gold CTA band: [hnib_cta_band] at the bottom of key pages.
   -------------------------------------------------------------------------- */
/* The Enfold Color Sections that hold the band (template "HNIB Gold Band",
   class hnib-band-section) and the footer (template "HNIB Footer", class
   hnib-footer-section): full width, no padding.
   Styled here instead of in the section's color settings, because Enfold's
   per-page CSS file is cached by browsers for a year. */
#top .avia-section.hnib-band-section {
	background: var(--hnib-gold) !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
#top .avia-section.hnib-footer-section {
	background: var(--hnib-navy) !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
#top .avia-section.hnib-band-section > .container,
#top .avia-section.hnib-band-section .content,
#top .avia-section.hnib-band-section .entry-content-wrapper,
#top .avia-section.hnib-band-section .avia_codeblock_section,
#top .avia-section.hnib-footer-section > .container,
#top .avia-section.hnib-footer-section .content,
#top .avia-section.hnib-footer-section .entry-content-wrapper,
#top .avia-section.hnib-footer-section .avia_codeblock_section {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

#top .hnib-band {
	clear: both;
	background: var(--hnib-gold);
	color: var(--hnib-navy);
	padding: 56px 32px;
}
#top .hnib-band.hnib-ghost::before {
	width: 520px;
	left: 1%;
}
#top .hnib-band__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
#top .hnib-band__title {
	font-family: var(--hnib-display) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.02 !important;
	font-size: clamp(2.1rem, 4vw, 3.3rem) !important;
	color: var(--hnib-navy) !important;
	margin: 0 !important;
	max-width: 16em;
}
#top .hnib-band__title span {
	display: block;
}
#top .hnib-band__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 36px;
	border-radius: 6px;
	background: var(--hnib-navy);
	color: #ffffff !important;
	font-family: var(--hnib-body);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color .15s ease;
}
#top .hnib-band__btn:hover,
#top .hnib-band__btn:focus-visible {
	background: var(--hnib-navy-2);
}
@media only screen and (max-width: 767px) {
	#top .hnib-band {
		padding: 40px 18px 44px;
	}
	#top .hnib-band__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}
	#top .hnib-band__title {
		font-size: 2.3rem !important;
	}
	#top .hnib-band__title span {
		display: none;
	}
	#top .hnib-band.hnib-ghost::before {
		width: 125%;
		left: -45%;
		opacity: .07;
	}
	#top .hnib-band__btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Site footer: built as an Enfold page used as the footer
   (Theme Options > Footer > "Page as footer"), plus Enfold's socket
   (copyright and social icons from Theme Options).
   -------------------------------------------------------------------------- */
#top .hnib-footer {
	clear: both;
	background-color: var(--hnib-navy);
	background-image: url('https://hnibonline.com/wp-content/uploads/2026/10/hnib-navy-splatter.webp');
	background-size: 1000px 1000px;
	color: var(--hnib-text);
	font-family: var(--hnib-body);
	padding: 64px 32px 48px;
}
#top .hnib-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
}
#top .hnib-footer__top {
	text-align: center;
	margin-bottom: 44px;
}
#top .hnib-footer__tagline {
	font-family: var(--hnib-display) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1 !important;
	font-size: clamp(2.4rem, 5.4vw, 4.2rem) !important;
	color: #ffffff !important;
	margin: 0 0 10px !important;
}
#top .hnib-footer__tagline span {
	color: var(--hnib-gold);
}
#top .hnib-footer__kicker {
	color: var(--hnib-ice);
	font-size: 1.05rem;
	margin: 0;
}
#top .hnib-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	border-top: 1px solid var(--hnib-border);
	padding-top: 36px;
}
#top .hnib-footer__col h3 {
	font-family: var(--hnib-body) !important;
	font-weight: 700 !important;
	font-size: .78rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hnib-gold) !important;
	margin: 0 0 14px !important;
}
#top .hnib-footer__col ul {
	list-style: none;
	margin: 0 !important;
	padding: 0;
}
#top .hnib-footer__col li {
	margin: 0 0 4px !important;
	padding: 0;
}
#top .hnib-footer a {
	color: #ffffff;
	text-decoration: none;
}
#top .hnib-footer__col li a {
	display: inline-block;
	padding: 6px 0;
	font-size: 1.05rem;
}
#top .hnib-footer a:hover,
#top .hnib-footer a:focus-visible {
	color: var(--hnib-gold);
}
#top .hnib-footer__col address {
	font-style: normal;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 12px;
}
#top .hnib-footer__contact a {
	display: block;
	padding: 4px 0;
	font-size: 1.05rem;
	color: var(--hnib-ice-light);
}
@media only screen and (max-width: 767px) {
	#top .hnib-footer {
		padding: 48px 18px 36px;
	}
	#top .hnib-footer__top {
		margin-bottom: 32px;
	}
	#top .hnib-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 28px 18px;
		padding-top: 28px;
	}
	#top .hnib-footer__col:nth-child(1) {
		grid-row: span 2;
	}
	#top .hnib-footer__col--contact {
		grid-column: 1 / -1;
	}
	#top .hnib-footer__col li a {
		padding: 9px 0;
	}
	#top .hnib-sep__icon {
		width: 36px;
		height: 36px;
	}
	#top .hnib-sep {
		gap: 12px;
		max-width: 260px;
	}
}

/* Socket (Enfold's bottom bar): brand colors. */
#top #socket {
	background: #0b1430;
	border-top: 1px solid var(--hnib-border);
}
#top #socket .copyright,
#top #socket a {
	color: var(--hnib-dim);
	font-family: var(--hnib-body);
}
#top #socket .social_bookmarks a {
	color: var(--hnib-ice);
}
/* Quick CSS hides the socket's social icons (#socket .social_bookmarks
   {display:none}); the footer is where JC wants them, so show them here. */
#top #socket .social_bookmarks {
	display: block !important;
}
#top #socket .social_bookmarks a:hover,
#top #socket .social_bookmarks a:focus-visible {
	color: var(--hnib-gold);
}
@media only screen and (max-width: 767px) {
	#top #socket .container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	#top #socket .social_bookmarks {
		display: flex !important;
		float: none !important;
		margin: 0 0 0 -12px !important;
	}
	#top #socket .social_bookmarks li,
	#top #socket .social_bookmarks li a {
		width: 44px !important;
		height: 44px !important;
		line-height: 44px !important;
	}
}

/* Footer top: a tiny white HNIB logo instead of the crest separator (JC, Oct 14). */
#top .hnib-footer .hnib-sep {
	max-width: none;
	justify-content: center;
}
#top .hnib-footer .hnib-sep::before,
#top .hnib-footer .hnib-sep::after {
	display: none;
}
#top .hnib-footer .hnib-sep__icon {
	width: 60px;
	height: 42px;
	background-image: url('assets/hnib-logo-ghost-white.webp');
}
/* Tablet and up: size the ghost mark to the footer so the body flows into the
   footer without the mark being cut off at the top edge. */
@media only screen and (min-width: 768px) {
	#top .hnib-footer.hnib-ghost::before {
		top: 24px;
		transform: none;
		width: auto;
		height: min(calc(100% - 48px), 640px);
		right: -3%;
	}
}

/* Footer page wrapper Enfold prints around the footer page (#footer-page). */
#top #footer-page {
	padding: 0 !important;
	border: 0 !important;
}