/**
 * AISG child theme — header & footer styling.
 *
 * Builds on the Kadence option defaults (which set the row layout, the red nav
 * bar, the grey persona/search row and the dark footer) and adds the bits that
 * can't be expressed as options: the top-right button nav, primary-nav polish,
 * footer sign-up button and the registration text bar.
 */

:root {
	--aisg-red: #ae2514;
	--aisg-red-dark: #8f1e10;
	--aisg-red-hover: #ffd9d2;
}

/* =========================================================================
 * HEADER — primary navigation (red bar)
 * ====================================================================== */
@media (min-width: 1025px) {
	/* The nav sits in the LEFT header section (empty right section). Make that
	 * section + the nav fill the row so the centred menu has room to centre. */
	.site-main-header-wrap .site-header-main-section-left {
		flex-grow: 1;
	}
	.site-main-header-wrap .site-header-main-section-right {
		flex-grow: 0;
	}
	.site-main-header-wrap .site-header-main-section-left .main-navigation,
	.site-main-header-wrap .site-header-main-section-left .header-menu-container {
		width: 100%;
	}
	.main-navigation .header-menu-container > ul.menu {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 4px;
	}
	.main-navigation .header-menu-container > ul.menu > li.menu-item > a {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 15px;
		white-space: nowrap;
	}
}

/* Active primary item gets a white underline against the red bar. */
.main-navigation .header-menu-container > ul.menu > li.current-menu-item > a,
.main-navigation .header-menu-container > ul.menu > li.current_page_item > a {
	box-shadow: inset 0 -3px 0 #ffffff;
}

/* Tighten social icon buttons everywhere (Kadence defaults them to 2em wide). */
a.social-button {
	width: 1em;
}

/* =========================================================================
 * HEADER — social icons (top-right, plain red glyphs on the white top bar)
 * ====================================================================== */
.header-social-inner-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.social-button.header-social-item {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	width: 2em !important;
	color: #2d2d2d !important; /* dark, not the brand red */
	transition: color 0.15s ease, transform 0.15s ease;
}
.social-button.header-social-item svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.social-button.header-social-item:hover {
	color: #000000 !important;
	transform: translateY(-1px);
}

/* =========================================================================
 * HEADER — "I'm a…" persona pills (bottom row, driven by the SECONDARY menu)
 * The pills ARE the secondary nav menu (Appearance > Menus > "AISG Secondary
 * Menu"); the "I'm a…" label is a CSS prefix. A menu item with a submenu
 * renders the dropdown.
 * ====================================================================== */
.secondary-navigation .secondary-menu-container {
	display: flex;
	align-items: center;
	gap: 12px;
}
.secondary-navigation .secondary-menu-container::before {
	content: "I'm a…";
	font-weight: 400;
	color: #1f1f1f;
	font-size: 15px;
	white-space: nowrap;
}
.secondary-navigation ul.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.secondary-navigation ul.menu > li.menu-item {
	margin: 0;
	position: relative;
}
.secondary-navigation ul.menu > li.menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid var(--aisg-red);
	color: var(--aisg-red) !important; /* override Kadence header link colour */
	background: #ffffff;
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 14px;
	font-weight: 500 !important; /* mock is medium weight, not bold */
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
/* Filled red on hover or for the current page only — NOT based on whether the
 * item has a submenu, so editing the menu doesn't change the pill styling. */
.secondary-navigation ul.menu > li.menu-item > a:hover,
.secondary-navigation ul.menu > li.menu-item.current-menu-item > a,
.secondary-navigation ul.menu > li.menu-item.current-menu-ancestor > a {
	background: var(--aisg-red);
	color: #ffffff !important;
}
/* Hide Kadence's native submenu arrows/toggle buttons; use a clean caret. */
.secondary-navigation .dropdown-nav-toggle,
.secondary-navigation .dropdown-nav-special-toggle,
.secondary-navigation .drawer-nav-drop-wrap {
	display: none !important;
}
.secondary-navigation ul.menu > li.menu-item-has-children > a::after {
	content: "\25BE"; /* ▾ */
	font-size: 10px;
	line-height: 1;
	margin-left: 4px;
}

/* Dropdown panel — force everything white & full-width so Kadence's default
 * dark sub-menu background doesn't show through on the right. */
.secondary-navigation ul.sub-menu {
	min-width: 260px;
	width: auto;
	padding: 0;
	background: #ffffff !important;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}
.secondary-navigation ul.sub-menu li.menu-item {
	margin: 0;
	display: block;
	width: 100%;
	background: #ffffff !important;
	border-bottom: 1px solid #ededed !important; /* divider on the LI so hover bg can't hide it */
}
.secondary-navigation ul.sub-menu li.menu-item:last-child {
	border-bottom: none !important;
}
.secondary-navigation ul.sub-menu li.menu-item > a {
	display: block;
	width: 100% !important; /* beat Kadence's fixed 200px submenu width */
	box-sizing: border-box;
	padding: 13px 20px;
	color: #2f3941 !important;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none !important;
	white-space: nowrap;
	background: #ffffff !important;
}
.secondary-navigation ul.sub-menu li.menu-item > a:hover {
	background: #f5f5f5 !important;
	color: var(--aisg-red) !important;
}

/* =========================================================================
 * FOOTER — sign-up CTA button (button block tagged .aisg-footer-signup)
 * ====================================================================== */
.site-footer .aisg-footer-signup .wp-block-button__link,
.site-footer a.aisg-footer-signup {
	background: var(--aisg-red);
	color: #fff;
	border-radius: 0;
	padding: 16px 40px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background 0.15s ease;
}
.site-footer .aisg-footer-signup .wp-block-button__link:hover,
.site-footer a.aisg-footer-signup:hover {
	background: var(--aisg-red-dark);
	color: #fff;
}

/* Footer middle widgets (logo / mission / CTA) live in block widgets. Force
 * light text — block paragraphs otherwise inherit the dark body colour and
 * become unreadable on the dark footer. */
.site-footer .widget_block,
.site-footer .widget_block p,
.site-footer .aisg-footer-mission,
.site-footer .aisg-footer-cta {
	color: #f1f1f1;
}
.site-footer .aisg-footer-mission,
.site-footer .aisg-footer-cta {
	font-size: 18px;
	line-height: 1.55;
}

/* =========================================================================
 * FOOTER — social icons (plain white glyphs, no boxes)
 * Kadence's "filled" style draws white boxes; flatten them to match design.
 * ====================================================================== */
.site-footer .footer-social-wrap .footer-social-inner-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}
.site-footer .footer-social-wrap .social-button {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	width: 1em !important; /* Kadence defaults a.social-button to 2em */
	color: #ffffff !important;
	transition: color 0.15s ease, transform 0.15s ease;
}
.site-footer .footer-social-wrap .social-button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.site-footer .footer-social-wrap .social-button:hover {
	color: var(--aisg-red-hover) !important;
	transform: translateY(-1px);
}

/* =========================================================================
 * FOOTER — bottom row (3 columns): social (left) | menu (centre) | copyright (right)
 * ====================================================================== */
/* Column alignment */
.site-footer .footer-social .footer-social-wrap {
	justify-content: flex-start;
}
.site-footer .footer-navigation,
.site-footer .footer-navigation .footer-navigation-wrap {
	text-align: center;
}
.site-footer .footer-html .footer-html-inner {
	text-align: right;
}

/* Policy menu links */
.site-footer .footer-navigation ul.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer .footer-navigation ul.menu li {
	margin: 0;
}
.site-footer .footer-navigation ul.menu li a {
	color: #d8dcde;
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
}
.site-footer .footer-navigation ul.menu li a:hover {
	color: #ffffff;
}

/* Copyright */
.site-footer .footer-html .footer-html-inner,
.site-footer .footer-html p {
	color: #a5a5a5;
	font-size: 14px;
	margin: 0;
}

/* =========================================================================
 * FOOTER — registration / legal text bar
 * Rendered by inc/footer.php on `kadence_after_footer`. Styled to read as a
 * continuation of the dark footer (same charcoal, light-grey text, with a
 * subtle divider above) — matching the live AISG site.
 * ====================================================================== */
.aisg-footer-registration {
	background: #2d2d2d; /* same charcoal as the footer rows */
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 24px 0;
}
.aisg-footer-registration__inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 30px;
}
.aisg-footer-registration p {
	margin: 0;
	color: #a5a5a5;
	font-size: 13px;
	line-height: 1.7;
}
.aisg-footer-registration a {
	color: #c2c8cc;
	text-decoration: underline;
}

/* =========================================================================
 * MOBILE
 * ====================================================================== */
/* Keep the mobile hamburger dark/visible on the white header bar. */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open .kadence-svg-iconset {
	color: #1f1f1f;
}

@media (max-width: 768px) {
	/* Footer: centre everything for a tidy stacked mobile layout. */
	.site-footer .footer-widget-area,
	.site-footer .footer-widget-area-inner,
	.site-footer .widget_block {
		text-align: center;
	}
	/* Logo image */
	.site-footer .footer-widget-area figure.wp-block-image {
		text-align: center;
		margin-left: 0;
		margin-right: 0;
	}
	.site-footer .footer-widget-area figure.wp-block-image img {
		display: inline-block;
		float: none;
	}
	/* SIGN UP button */
	.site-footer .wp-block-buttons {
		justify-content: center;
	}
	/* Social icons */
	.site-footer .footer-social-wrap,
	.site-footer .footer-social-inner-wrap {
		justify-content: center;
	}
	/* Policy menu + copyright */
	.site-footer .footer-navigation,
	.site-footer .footer-navigation ul.menu {
		justify-content: center;
		text-align: center;
	}
	.site-footer .footer-html .footer-html-inner {
		text-align: center;
	}
	.aisg-footer-registration__inner {
		padding-left: 20px;
		padding-right: 20px;
		text-align: center;
	}
}