/* ==========================================================================
   Layout — header, navigation, footer, page shells
   ========================================================================== */

/* --- Utility bar --- */
.ss-utility { background: var(--ss-color-primary-deep); color: #fff; font-size: var(--ss-text-sm); }
.ss-utility .ss-container { display: flex; justify-content: space-between; align-items: center; gap: var(--ss-space-4); min-height: 36px; }
.ss-utility a { color: #fff; text-decoration: none; }
.ss-utility a:hover { text-decoration: underline; }
.ss-utility__contact { display: flex; gap: var(--ss-space-4); flex-wrap: wrap; }
.ss-utility ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ss-space-4); }
@media (max-width: 767px) { .ss-utility__contact { display: none; } }

/* --- Header --- */
.ss-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--ss-color-border); transition: box-shadow var(--ss-ease); }
.ss-header.is-scrolled { box-shadow: var(--ss-shadow-sm); }
.admin-bar .ss-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ss-header { top: 46px; } }
.ss-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ss-space-4); min-height: var(--ss-header-height); }
.ss-logo { display: inline-flex; align-items: center; flex: none; }
.ss-logo img { height: 56px; width: auto; }
.ss-logo__text { font-family: var(--ss-font-heading); font-weight: var(--ss-weight-extrabold); font-size: var(--ss-text-lg); color: var(--ss-color-text); text-decoration: none; }
@media (max-width: 767px) { .ss-logo img { height: 44px; } }

/* Primary navigation (mega menu + mobile drawer): assets/css/nav.css */
.ss-header .ss-header__inner { max-width: var(--ss-container-wide); }

.sse-header-transparent .ss-header:not(.is-scrolled) { position: fixed; width: 100%; background: transparent; border-color: transparent; }

/* --- Page shells --- */
.ss-main { min-height: 50vh; }
.ss-page-header { position: relative; padding-block: var(--ss-space-7) var(--ss-space-6); background: var(--ss-color-primary-deep); color: #fff; overflow: hidden; }
.ss-page-header::before { content: ""; position: absolute; inset: 0; background: var(--ss-hex-cluster) right -40px center / 460px no-repeat; opacity: .9; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 65%); mask-image: linear-gradient(90deg, transparent 35%, #000 65%); }
@media (max-width: 1023px) { .ss-page-header::before { background-size: 340px; background-position: right -80px top -40px; opacity: .45; -webkit-mask-image: none; mask-image: none; } }
.ss-page-header .ss-container { position: relative; }
.ss-page-header__title, .ss-page-header .ss-breadcrumbs, .ss-page-header .ss-eyebrow { color: #fff; }
.ss-page-header .ss-eyebrow { color: var(--ss-color-yellow); }
.ss-page-header__title { margin: 0; }
.ss-page-header__desc { margin-top: var(--ss-space-3); max-width: var(--ss-measure); color: rgba(255,255,255,.88); font-size: var(--ss-text-lg); }
.ss-page-header--hero { position: relative; padding: 0; background: var(--ss-color-primary-deep); color: #fff; border: 0; min-height: 320px; display: grid; }
.ss-page-header--hero::before { z-index: 1; opacity: .5; background-position: right -60px top -60px; background-size: 360px; mask-image: none; -webkit-mask-image: none; }
.ss-page-header--hero .ss-page-header__body { position: relative; z-index: 2; }
.ss-page-header--hero .ss-page-header__media { grid-area: 1/1; }
.ss-page-header--hero .ss-page-header__media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; max-height: 520px; }
.ss-page-header--hero .ss-page-header__body { grid-area: 1/1; align-self: end; padding: var(--ss-space-7) 0 var(--ss-space-6); background: linear-gradient(to top, rgba(10,63,99,.92), rgba(10,63,99,.35) 60%, transparent); }
.ss-page-header--hero .ss-page-header__title, .ss-page-header--hero .ss-page-header__desc, .ss-page-header--hero .ss-eyebrow { color: #fff; }
.ss-breadcrumbs { font-size: var(--ss-text-sm); color: var(--ss-color-text-muted); margin-bottom: var(--ss-space-3); }
.ss-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.ss-breadcrumbs li + li::before { content: "/"; margin-right: .25rem; opacity: .6; }
.ss-breadcrumbs a { color: inherit; }
.ss-page-header--hero .ss-breadcrumbs { color: rgba(255,255,255,.85); }
.ss-content { padding-block: var(--ss-section); }
.ss-content--with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ss-space-8); align-items: start; }
@media (max-width: 900px) { .ss-content--with-sidebar { grid-template-columns: 1fr; } }
.ss-sidebar > * + * { margin-top: var(--ss-space-6); }

/* Shortcode-composed pages (no Elementor): sections stack with rhythm */
.ss-page-content > * + * { margin-top: var(--ss-section); }
.ss-page-content > p + p { margin-top: 1em; }
.ss-page-content > h2 { margin-bottom: var(--ss-space-5); }

/* Elementor full-width/canvas: let Elementor own the page */
.sse-elementor-page .ss-content { padding: 0; }
/* The page header (H1 + breadcrumbs) shows on Elementor pages too, unless the page's own
   Elementor setting "Hide Title" is on — see sse_page_header(). */

/* --- Footer --- */
.ss-footer { background: var(--ss-color-primary-deep); color: #fff; margin-top: auto; }
.ss-footer a:not(.ss-btn) { color: #fff; }
.ss-footer__cta { background: var(--ss-color-primary-deep); border-bottom: 1px solid rgba(255,255,255,.12); }
.ss-footer__cta .ss-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ss-space-4); padding-block: var(--ss-space-6); }
.ss-footer__cta h2 { color: #fff; margin: 0; font-size: var(--ss-text-3xl); }
.ss-footer__cta, .ss-footer { position: relative; }
.ss-footer::before { opacity: .22; background-position: left -120px bottom -120px; background-size: 420px; }
.ss-footer__cta::before { content: ""; position: absolute; inset: 0; background: var(--ss-hex-cluster) right -60px center / 300px no-repeat; opacity: .85; pointer-events: none; }
@media (max-width: 1023px) { .ss-footer__cta::before { opacity: .35; background-size: 240px; background-position: right -90px top -60px; } }
.ss-footer__cta .ss-container { position: relative; }
.ss-footer__cta p { margin: .25rem 0 0; color: rgba(255,255,255,.85); }
.ss-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--ss-space-7); padding-block: var(--ss-space-8) var(--ss-space-6); }
@media (max-width: 900px) { .ss-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ss-footer__grid { grid-template-columns: 1fr; gap: var(--ss-space-6); } }
.ss-footer__brand a { display: inline-block; padding: .6rem .9rem; background: #fff; border-radius: var(--ss-radius-sm); line-height: 0; }
.ss-footer__brand img { height: 56px; width: auto; } /* the same full-colour logo as the header, on a white plate so it reads on the navy footer */
.ss-footer__tagline { margin: var(--ss-space-4) 0; color: rgba(255,255,255,.85); max-width: 36ch; }
.ss-footer h2.widget-title, .ss-footer__heading { font-family: var(--ss-font-display); font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-color-yellow); margin-bottom: var(--ss-space-3); }
.ss-footer ul { list-style: none; margin: 0; padding: 0; }
.ss-footer li { margin-bottom: .5rem; }
.ss-footer__nav a, .ss-footer address a { text-decoration: none; }
.ss-footer__nav a:hover, .ss-footer address a:hover { text-decoration: underline; }
.ss-footer address { font-style: normal; line-height: 1.6; }
.ss-social { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: var(--ss-space-4); }
.ss-social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); transition: background var(--ss-ease); }
.ss-social a:hover { background: rgba(255,255,255,.24); }
.ss-social svg { width: 20px; height: 20px; fill: #fff; }
.ss-footer__bottom { border-top: 1px solid rgba(255,255,255,.15); padding-block: var(--ss-space-4); font-size: var(--ss-text-sm); color: rgba(255,255,255,.75); }
.ss-footer__bottom .ss-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ss-space-3); }
.ss-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--ss-space-4); }
.ss-footer__bottom li { margin: 0; }
.ss-footer__credit { font-size: var(--ss-text-xs); opacity: .7; }
.ss-footer__hex { display: flex; gap: .3rem; margin-bottom: var(--ss-space-4); }
.ss-footer__hex .ss-hex { width: .75rem; height: .85rem; }

/* Footer: last-updated + management credit (small, quiet) */
.ss-footer__updated { display: inline-block; margin-left: .75rem; padding-left: .75rem; border-left: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.6); }
.ss-footer__credit { background: #072C45; padding: .6rem 0; font-size: .75rem; }
.ss-footer__credit .ss-container { display: flex; justify-content: flex-end; }
.ss-footer__credit a { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.55); text-decoration: none; letter-spacing: .02em; transition: color var(--ss-ease); }
.ss-footer__credit a:hover { color: #fff; }
.ss-footer__credit strong { font-weight: 600; color: rgba(255,255,255,.8); }
.ss-footer__credit a:hover strong { color: #FCB615; }
.ss-footer__credit img, .ss-footer__credit-mark { width: 18px; height: 18px; display: block; }
@media (max-width: 640px) { .ss-footer__updated { display: block; margin: .35rem 0 0; padding: 0; border: 0; } .ss-footer__credit .ss-container { justify-content: center; } }

/* Event pages: the event's banner becomes the same full-width hexagon banner used on every page. */
.ss-event-page { padding-bottom: var(--ss-section); }
.ss-event-page .ssh-single__hero { position: relative; margin: 0 calc(50% - 50vw) var(--ss-space-7); padding: var(--ss-space-7) max(var(--ss-gutter), calc(50vw - var(--ss-container) / 2 + var(--ss-gutter))) var(--ss-space-6); background: var(--ss-color-primary-deep); color: #fff; overflow: hidden; }
.ss-event-page .ssh-single__hero::before { content: ""; position: absolute; inset: 0; background: var(--ss-hex-cluster) right -40px center / 460px no-repeat; opacity: .9; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 65%); mask-image: linear-gradient(90deg, transparent 35%, #000 65%); }
@media (max-width: 1023px) { .ss-event-page .ssh-single__hero::before { background-size: 340px; background-position: right -80px top -40px; opacity: .45; -webkit-mask-image: none; mask-image: none; } }
.ss-event-page .ssh-single__hero .ssh-single__hero-body { position: relative; padding: 0; border: 0; max-width: 60rem; }
.ss-event-page .ssh-single__hero .ssh-single__title, .ss-event-page .ssh-single__hero .ssh-single__when { color: #fff; }
.ss-event-page .ssh-single__hero .ssh-eyebrow { color: var(--ss-color-yellow); }

/* A page that already closes with its own call-to-action band doesn't repeat the footer's "Get Involved Today" strip. */
body:has(.ss-main .ss-cta-split) .ss-footer__cta { display: none; }
.ss-event-page .ssh-single__hero .ssh-badge { color: #fff; }