/* =========================================================================
   Spacebar Training — main.css
   Hand-coded header, footer & enquiry popup. Mobile-first.
   Brand: navy authority, steel-blue support, light surface, signal-red action.
   ========================================================================= */

:root {
	/* Brand palette */
	--sb-navy:        #143D6A;
	--sb-navy-deep:   #0F2F53;
	--sb-steel:       #5C85A6;
	--sb-bg:          #F4F6F8;
	--sb-accent:      #E63946;
	--sb-accent-hov:  #C42C38;
	--sb-accent-tint: #FDECEE;

	/* Neutrals */
	--sb-ink:    #0F2540;
	--sb-muted:  #5A6B7B;
	--sb-border: #D9E1E8;
	--sb-white:  #FFFFFF;

	/* Type */
	--sb-font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Layout */
	--sb-max:      1200px;
	--sb-gutter:   20px;
	--sb-radius:   10px;
	--sb-header-h: 72px;

	--sb-shadow:   0 6px 24px rgba(15, 37, 64, .10);
	--sb-shadow-s: 0 2px 10px rgba(15, 37, 64, .08);
	--sb-ease:     .25s cubic-bezier(.4, 0, .2, 1);
}

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--sb-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sb-ink);
	background: var(--sb-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--sb-font-head); line-height: 1.2; color: var(--sb-navy); }

a { color: var(--sb-steel); text-decoration: none; }
a:hover { color: var(--sb-navy); }

img { max-width: 100%; height: auto; display: block; }

.sb-container {
	width: 100%;
	max-width: var(--sb-max);
	margin-inline: auto;
	padding-inline: var(--sb-gutter);
}

/* Accessibility helpers */
.sb-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--sb-navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.sb-skip-link:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--sb-accent);
	outline-offset: 2px;
}

/* ---- Buttons ---------------------------------------------------------- */
.sb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--sb-font-head);
	font-weight: 600; font-size: 15px; line-height: 1;
	padding: 13px 22px; border-radius: var(--sb-radius);
	border: 2px solid transparent; cursor: pointer;
	transition: background var(--sb-ease), transform var(--sb-ease), box-shadow var(--sb-ease);
}
.sb-btn--accent { background: var(--sb-accent); color: #fff; }
.sb-btn--accent:hover { background: var(--sb-accent-hov); color: #fff; transform: translateY(-1px); box-shadow: var(--sb-shadow-s); }
.sb-btn--block { width: 100%; padding-block: 15px; }

/* ---- Top bar ---------------------------------------------------------- */
.sb-topbar { background: var(--sb-navy-deep); color: #cdd9e6; font-size: 13px; }
.sb-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 16px; }
.sb-topbar__trust { letter-spacing: .2px; }
.sb-topbar__link { color: #fff; font-weight: 600; }
.sb-topbar__link:hover { color: var(--sb-accent); }
@media (max-width: 720px) { .sb-topbar__trust { display: none; } .sb-topbar__inner { justify-content: flex-end; } }

/* ---- Header ----------------------------------------------------------- */
.sb-header {
	position: sticky; top: 0; z-index: 1000;
	background: var(--sb-navy);
	transition: box-shadow var(--sb-ease), background var(--sb-ease);
}
.sb-header.is-scrolled { box-shadow: var(--sb-shadow); }
.sb-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--sb-header-h); gap: 16px; }

.sb-logo { display: inline-flex; align-items: center; }
.sb-logo__img { height: 44px; width: auto; }
.sb-header.is-scrolled .sb-logo__img { height: 40px; transition: height var(--sb-ease); }

/* Primary nav (desktop) */
.sb-nav { display: flex; align-items: center; gap: 28px; }
.sb-menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.sb-menu__link, .sb-menu a {
	font-family: var(--sb-font-head); font-weight: 500; font-size: 15.5px;
	color: #e8eef5; padding: 8px 0; position: relative;
}
.sb-menu__link::after, .sb-menu a::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
	background: var(--sb-accent); transition: width var(--sb-ease);
}
.sb-menu__link:hover, .sb-menu a:hover,
.sb-menu .current-menu-item > a { color: #fff; }
.sb-menu__link:hover::after, .sb-menu a:hover::after,
.sb-menu .current-menu-item > a::after { width: 100%; }

.sb-nav__cta { margin-left: 4px; }

/* Hamburger */
.sb-nav-toggle {
	display: none; width: 44px; height: 44px; padding: 10px;
	background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; cursor: pointer;
}
.sb-nav-toggle__bar { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--sb-ease), opacity var(--sb-ease); }
.sb-nav-toggle__bar + .sb-nav-toggle__bar { margin-top: 5px; }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar:nth-child(2) { opacity: 0; }
.sb-nav-toggle[aria-expanded="true"] .sb-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile nav ------------------------------------------------------- */
@media (max-width: 920px) {
	.sb-nav-toggle { display: block; }
	.sb-nav {
		position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		background: var(--sb-navy-deep); padding: calc(var(--sb-header-h) + 24px) 24px 32px;
		transform: translateX(100%); transition: transform var(--sb-ease);
		box-shadow: var(--sb-shadow); overflow-y: auto;
	}
	.sb-nav.is-open { transform: translateX(0); }
	.sb-menu { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
	.sb-menu__link, .sb-menu a { display: block; padding: 14px 0; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
	.sb-menu__link::after, .sb-menu a::after { display: none; }
	.sb-nav__cta { margin-top: 20px; width: 100%; }
	body.sb-menu-open { overflow: hidden; }
}

/* ---- Footer ----------------------------------------------------------- */
.sb-main { min-height: 40vh; }

.sb-footer { background: var(--sb-navy); color: #c7d3e0; margin-top: 64px; }
.sb-footer__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
	padding-block: 56px 40px;
}
.sb-footer__logo img { height: 42px; width: auto; }
.sb-footer__tagline { margin: 16px 0 22px; max-width: 34ch; color: #aebccb; }
.sb-footer__heading { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin: 0 0 16px; }
.sb-footer__links { list-style: none; margin: 0; padding: 0; }
.sb-footer__links li { margin-bottom: 10px; }
.sb-footer__links a { color: #c7d3e0; }
.sb-footer__links a:hover { color: var(--sb-accent); }
.sb-footer__links--plain li { color: #aebccb; }
.sb-footer__social { margin-top: 16px; display: flex; gap: 10px; }
.sb-social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.08);
	color: #fff; font-family: var(--sb-font-head); font-weight: 700;
}
.sb-social:hover { background: var(--sb-accent); color: #fff; }

.sb-footer__trust { background: var(--sb-navy-deep); font-size: 13.5px; color: #9fb1c3; text-align: center; }
.sb-footer__trust > .sb-container { padding-block: 14px; }

.sb-footer__bottom { background: var(--sb-navy-deep); border-top: 1px solid rgba(255,255,255,.07); }
.sb-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.sb-footer__copy { margin: 0; font-size: 13.5px; color: #9fb1c3; }
.sb-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; font-size: 13.5px; }
.sb-footer__legal a { color: #9fb1c3; }
.sb-footer__legal a:hover { color: #fff; }

@media (max-width: 900px) { .sb-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .sb-footer__grid { grid-template-columns: 1fr; } .sb-footer__bottom-inner { flex-direction: column; align-items: flex-start; } }

/* ---- Modal / popup form ---------------------------------------------- */
.sb-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sb-modal[hidden] { display: none; }
.sb-modal__overlay { position: absolute; inset: 0; background: rgba(15, 37, 64, .62); backdrop-filter: blur(2px); }
.sb-modal__dialog {
	position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
	background: var(--sb-white); border-radius: 16px; box-shadow: var(--sb-shadow);
	padding: 32px; animation: sb-pop var(--sb-ease);
}
@keyframes sb-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.sb-modal__close {
	position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
	border: none; background: var(--sb-bg); border-radius: 8px; font-size: 24px; line-height: 1;
	color: var(--sb-muted); cursor: pointer;
}
.sb-modal__close:hover { background: var(--sb-accent-tint); color: var(--sb-accent); }
.sb-modal__title { margin: 0 0 6px; font-size: 26px; }
.sb-modal__intro { margin: 0 0 22px; color: var(--sb-muted); }

/* Form fields */
.sb-field { margin-bottom: 16px; }
.sb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 460px) { .sb-field-row { grid-template-columns: 1fr; } }
.sb-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--sb-ink); }
.sb-field input, .sb-field select, .sb-field textarea {
	width: 100%; padding: 12px 14px; font: inherit; color: var(--sb-ink);
	background: var(--sb-bg); border: 1px solid var(--sb-border); border-radius: var(--sb-radius);
	transition: border-color var(--sb-ease), box-shadow var(--sb-ease);
}
.sb-field input:focus, .sb-field select:focus, .sb-field textarea:focus {
	border-color: var(--sb-steel); background: #fff; box-shadow: 0 0 0 3px rgba(92,133,166,.18); outline: none;
}
.sb-field textarea { resize: vertical; }

.sb-field--consent { margin-top: 4px; }
.sb-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: var(--sb-muted); }
.sb-consent input { width: auto; margin-top: 3px; }
.sb-consent label { font-weight: 400; }

/* Honeypot — visually and programmatically removed from flow */
.sb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sb-form__status { margin: 14px 0 0; font-size: 14px; min-height: 1.2em; }
.sb-form__status.is-error { color: var(--sb-accent-hov); }
.sb-form__status.is-success { color: #1f8a5b; }
.sb-form__legal { margin: 12px 0 0; font-size: 12px; color: var(--sb-muted); }

.sb-btn[disabled] { opacity: .65; cursor: not-allowed; transform: none; }

/* ---- Motion preference ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}