/*
 * Global chrome — ports Nav.tsx and Footer.tsx.
 */

body { margin: 0; font-family: 'Inter', sans-serif; }
a { color: inherit; }

/* ---------- Header / Nav ---------- */
.cusal-header { position: sticky; top: 0; z-index: 50; background: #ffffff; }
.cusal-header__bar { max-width: 1440px; margin: 0 auto; padding: 26px clamp(20px, 4.17vw, 60px); display: flex; align-items: center; justify-content: space-between; }
.cusal-header__logo { display: flex; align-items: center; gap: 5.4px; text-decoration: none; flex-shrink: 0; }
.cusal-header__logo svg { height: 36px; width: 99px; display: block; }
.cusal-header__wordmark { display: flex; flex-direction: column; text-align: center; color: #00263f; text-transform: uppercase; white-space: nowrap; line-height: 1; font-family: 'Source Sans 3', sans-serif; font-weight: 700; }
.cusal-header__wordmark .line1 { font-size: 12px; letter-spacing: 1.8px; }
.cusal-header__wordmark .line2 { font-size: 21.4px; letter-spacing: 2.14px; line-height: 1.1; }

/*
 * header.php passes items_wrap => '%3$s' to wp_nav_menu(), so once a real
 * menu is assigned there's no <ul> at all — <li> elements sit directly
 * inside <nav class="cusal-nav-desktop">. The bullet comes from the <li>'s
 * own default list-item display, not from a missing ul reset — list-style
 * on the nav itself is enough since it's an inherited property.
 */
.cusal-nav-desktop { display: none; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.cusal-nav-desktop li { margin: 0; padding: 0; }
.cusal-nav-desktop a { font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500; color: #404359; text-decoration: none; white-space: nowrap; }
.cusal-nav-desktop a:hover, .cusal-nav-desktop a.is-current, .cusal-nav-desktop .current-menu-item > a { color: #0f428a; font-weight: 600; }

.cusal-header__cta { display: none; align-items: center; gap: 18px; }
.cusal-header__cta .cusal-search-programs { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px; color: #00263f; text-decoration: none; }
.cusal-header__cta .cusal-get-involved-btn { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px; color: #fff; background: #0f428a; border-radius: 6px; padding: 13px 22px; text-decoration: none; }
.cusal-header__cta .cusal-get-involved-btn:hover { background: #0a3270; }

.cusal-nav-mobile-toggle { display: flex; background: none; border: none; padding: 8px; color: #00263f; cursor: pointer; }
.cusal-header__divider { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 4.17vw, 60px); }
.cusal-header__divider > div { max-width: 1088px; height: 1px; background: #e4e9ef; }
.cusal-nav-mobile-menu { display: none; background: #ffffff; border-top: 1px solid #e4e9ef; padding: 24px; flex-direction: column; gap: 20px; }
.cusal-nav-mobile-menu a { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 16px; color: #404359; text-decoration: none; }
.cusal-nav-mobile-menu.is-open { display: flex; }

@media (min-width: 1081px) {
	.cusal-nav-desktop, .cusal-header__cta { display: flex; }
	.cusal-nav-mobile-toggle { display: none; }
}

/* ---------- Footer ---------- */
.cusal-footer { background: #020e1f; }
.cusal-footer__inner { max-width: 1440px; margin: 0 auto; padding: 48px clamp(20px, 12.2vw, 176px); }
.cusal-footer__content { max-width: 1088px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.cusal-footer__logo { height: 40px; width: auto; display: block; }
.cusal-footer__tagline { font-family: 'Inter', sans-serif; font-size: 12.5px; color: #c2e7ed; line-height: 1.5; margin: 8px 0 0; }
.cusal-footer__top-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
/* Covers both cases: the no-menu fallback (plain <a> children) and the real wp_nav_menu() <ul><li> output. */
/* Same items_wrap => '%3$s' setup as the header nav — <li> sits directly in <nav>, no <ul>. */
.cusal-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; justify-content: flex-end; font-family: 'Inter', sans-serif; font-size: 13.5px; list-style: none; margin: 0; padding: 0; }
.cusal-footer__nav li { margin: 0; padding: 0; }
.cusal-footer__nav a { color: #c2e7ed; text-decoration: none; }
.cusal-footer__nav a:hover { color: #ffffff; }
.cusal-footer__divider { background: #2a5c7d; height: 1px; }
.cusal-footer__bottom-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: 'Inter', sans-serif; }
.cusal-footer__copyright { font-size: 12px; color: #f2f6fc; margin: 0;}
.cusal-footer__utility-links { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; font-size: 13.5px; }
.cusal-footer__utility-links a { color: #c2e7ed; text-decoration: none; }
.cusal-footer__utility-links a:hover { color: #ffffff; }
.cusal-footer .cusal-header__wordmark  { color: #ffffff; }