/* ===========================================================================
   #1 Training - marketing site design system
   State-approved continuing education for barbers & cosmetologists.
   Palette drawn from the logo: navy, bright blue, gold-window accent.
   Bootstrap 4 + Font Awesome are loaded first; this layers on top.
=========================================================================== */

:root {
	--n1-navy:      #0f2c50;   /* deep brand navy (logo chevron) */
	--n1-navy-700:  #14375f;
	--n1-navy-900:  #0a2038;   /* near-black navy for footer */
	--n1-blue:      #2563eb;   /* bright accent blue (the "1") */
	--n1-blue-600:  #1d4ed8;
	--n1-blue-050:  #eff5ff;
	--n1-amber:     #f59e0b;   /* gold/amber window accent */
	--n1-gold:      #d4a528;
	--n1-bg:        #f5f8fc;   /* page background */
	--n1-surface:   #ffffff;
	--n1-ink:       #1d2939;   /* body text */
	--n1-muted:     #667085;   /* secondary text */
	--n1-line:      #e6ebf2;   /* borders/hairlines */
	--n1-success:   #15803d;

	--n1-radius:    14px;
	--n1-radius-sm: 10px;
	--n1-shadow-sm: 0 1px 2px rgba(16,40,80,.06), 0 1px 3px rgba(16,40,80,.08);
	--n1-shadow:    0 6px 18px rgba(16,40,80,.08), 0 2px 6px rgba(16,40,80,.05);
	--n1-shadow-lg: 0 18px 40px rgba(16,40,80,.14), 0 6px 14px rgba(16,40,80,.08);
}

/* ---------- Base ---------- */
body.n1-site {
	background: var(--n1-bg);
	color: var(--n1-ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	letter-spacing: -0.005em;
}
body.n1-site main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, .n1-display {
	font-weight: 800;
	color: var(--n1-navy);
	letter-spacing: -0.02em;
}
a { color: var(--n1-blue-600); }
a:hover { color: var(--n1-navy); }
.text-muted { color: var(--n1-muted) !important; }

/* width helper for marketing sections that want to breathe wider than .container */
.n1-wide { max-width: 1180px; }

/* ---------- Official top strip ---------- */
.n1-topbar {
	background: var(--n1-navy-900);
	color: #cfe0f5;
	font-size: .82rem;
	letter-spacing: .01em;
}
.n1-topbar a { color: #fff; text-decoration: none; }
.n1-topbar a:hover { color: #cfe0f5; }
.n1-topbar .fa-circle-check { color: #4ade80; }

/* ---------- Navbar ---------- */
.n1-navbar {
	background: var(--n1-surface);
	border-bottom: 1px solid var(--n1-line);
	box-shadow: 0 1px 0 rgba(16,40,80,.02);
	padding-top: .55rem;
	padding-bottom: .55rem;
}
.n1-navbar .navbar-brand { padding: 0; margin-right: 1.5rem; }
.n1-navbar .navbar-brand img { height: 38px; width: auto; display: block; }
.n1-navbar .nav-link {
	color: var(--n1-navy) !important;
	font-weight: 600;
	font-size: .95rem;
	padding: .5rem .9rem !important;
	border-radius: 8px;
	transition: background .15s ease, color .15s ease;
}
.n1-navbar .nav-link:hover { background: var(--n1-blue-050); color: var(--n1-blue-600) !important; }
.n1-navbar .navbar-toggler { border-color: var(--n1-line); }
.n1-navbar .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%230f2c50' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 10px; letter-spacing: -0.01em; }
.btn-lg { padding: .7rem 1.5rem; font-size: 1.02rem; }
.btn-primary {
	background: var(--n1-blue); border-color: var(--n1-blue);
	box-shadow: 0 6px 16px rgba(37,99,235,.28);
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--n1-blue-600); border-color: var(--n1-blue-600);
	box-shadow: 0 8px 20px rgba(37,99,235,.34);
}
.btn-warning {
	background: var(--n1-amber); border-color: var(--n1-amber); color: #3a2a06;
	box-shadow: 0 6px 16px rgba(245,158,11,.30);
}
.btn-warning:hover, .btn-warning:focus { background: #e08e08; border-color: #e08e08; color: #3a2a06; }
.btn-outline-primary { color: var(--n1-blue-600); border-color: #c7d6f3; }
.btn-outline-primary:hover { background: var(--n1-blue); border-color: var(--n1-blue); }
.btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--n1-navy); }
.btn-success { background: var(--n1-success); border-color: var(--n1-success); }

/* ---------- Hero ---------- */
.n1-hero {
	position: relative;
	background:
		radial-gradient(1100px 500px at 85% -10%, rgba(37,99,235,.20), transparent 60%),
		linear-gradient(135deg, var(--n1-navy) 0%, var(--n1-navy-700) 55%, #1e4d86 100%);
	color: #fff;
	border-radius: 20px;
	padding: 3.4rem 2.6rem;
	overflow: hidden;
	box-shadow: var(--n1-shadow-lg);
}
.n1-hero h1 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.85rem); line-height: 1.1; }
.n1-hero .lead { opacity: .94; font-size: 1.12rem; max-width: 34rem; }
.n1-hero .n1-eyebrow { color: #bcd4ff; }
.n1-hero-figure {
	border-radius: 16px;
	box-shadow: var(--n1-shadow-lg);
	border: 4px solid rgba(255,255,255,.14);
	width: 100%;
	height: auto;
	display: block;
}
/* floating "certificate issued" chip over the hero photo */
.n1-hero-chip {
	position: absolute; left: -14px; bottom: 18px;
	background: #fff; color: var(--n1-navy);
	border-radius: 12px; padding: .6rem .85rem;
	box-shadow: var(--n1-shadow-lg);
	display: flex; align-items: center; gap: .6rem;
	font-weight: 700; font-size: .9rem;
}
.n1-hero-chip .ico {
	width: 34px; height: 34px; border-radius: 9px;
	background: rgba(21,128,61,.12); color: var(--n1-success);
	display: flex; align-items: center; justify-content: center;
}

/* eyebrow / section labels */
.n1-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .76rem;
	font-weight: 700;
	color: var(--n1-blue-600);
}

/* small inline pill (e.g. "State approved") */
.n1-pill {
	display: inline-flex; align-items: center; gap: .4rem;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.22);
	color: #eaf2ff;
	border-radius: 999px;
	padding: .3rem .8rem;
	font-size: .82rem; font-weight: 600;
}
.n1-pill .fa-circle-check { color: #4ade80; }

/* ---------- Trust / credential bar ---------- */
.n1-trustbar {
	background: var(--n1-surface);
	border: 1px solid var(--n1-line);
	border-radius: var(--n1-radius);
	box-shadow: var(--n1-shadow-sm);
}
.n1-trustbar .item { color: var(--n1-navy); font-weight: 600; font-size: .92rem; }
.n1-trustbar .item i { color: var(--n1-blue); }
.n1-trustbar .divider { width: 1px; background: var(--n1-line); }

/* ---------- Feature cards ---------- */
.n1-feature {
	background: var(--n1-surface);
	border: 1px solid var(--n1-line);
	border-radius: var(--n1-radius);
	padding: 1.6rem 1.4rem;
	height: 100%;
	box-shadow: var(--n1-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease;
}
.n1-feature:hover { transform: translateY(-3px); box-shadow: var(--n1-shadow); }
.n1-feature .n1-ico {
	width: 52px; height: 52px; border-radius: 13px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.35rem; margin-bottom: 1rem;
	background: var(--n1-blue-050); color: var(--n1-blue-600);
}
.n1-feature h5 { font-size: 1.08rem; margin-bottom: .35rem; }
.n1-feature p { color: var(--n1-muted); font-size: .93rem; margin-bottom: 0; }

/* ---------- "How it works" steps ---------- */
.n1-step { position: relative; padding-left: .25rem; }
.n1-step .num {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--n1-navy); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 1.15rem; margin-bottom: .9rem;
	box-shadow: 0 6px 14px rgba(15,44,80,.28);
}
.n1-step h5 { font-size: 1.05rem; }
.n1-step p { color: var(--n1-muted); font-size: .92rem; }

/* ---------- Section heading ---------- */
.n1-section-head { max-width: 42rem; }
.n1-section-head h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.n1-section-head p { color: var(--n1-muted); font-size: 1.05rem; }

/* ---------- Package / course cards ---------- */
.n1-course-card {
	border: 1px solid var(--n1-line);
	border-radius: var(--n1-radius);
	background: var(--n1-surface);
	box-shadow: var(--n1-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.n1-course-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--n1-shadow-lg);
	border-color: var(--n1-blue);
}
/* Pull the primary CTA forward on hover so the money moment feels deliberate. */
.n1-course-card .btn-primary { transition: transform .18s ease, box-shadow .18s ease; }
.n1-course-card:hover .btn-primary {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(15, 44, 80, .22);
}
.n1-course-card.n1-featured {
	border-color: var(--n1-blue);
	box-shadow: 0 0 0 1px var(--n1-blue), var(--n1-shadow);
}
.n1-course-card.n1-featured:hover {
	box-shadow: 0 0 0 1px var(--n1-blue), var(--n1-shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
	.n1-course-card,
	.n1-course-card .btn-primary { transition: none; }
	.n1-course-card:hover { transform: none; }
	.n1-course-card:hover .btn-primary { transform: none; }
}
.n1-course-card .badge-required { background: #b91c1c; }
.n1-course-card .badge-elective { background: var(--n1-blue); }
.n1-price { font-size: 2rem; font-weight: 800; color: var(--n1-navy); line-height: 1; }
.n1-price small { font-size: .9rem; font-weight: 600; color: var(--n1-muted); }
.n1-incl li { padding: .25rem 0; }
.n1-incl .fa-circle-check { color: var(--n1-success); }

.n1-ribbon {
	display: inline-flex; align-items: center; gap: .35rem;
	background: var(--n1-blue); color: #fff;
	font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	padding: .3rem .7rem; border-radius: 999px;
}

/* ---------- Forms ---------- */
.n1-form-card {
	border: 1px solid var(--n1-line);
	border-radius: var(--n1-radius);
	background: var(--n1-surface);
	box-shadow: var(--n1-shadow);
}
.form-control { border-radius: 10px; border-color: #d8e0ec; padding: .55rem .8rem; }
.form-control:focus { border-color: var(--n1-blue); box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); }
label { font-weight: 600; font-size: .9rem; color: var(--n1-navy); }
label.req:after { content: " *"; color: #b91c1c; }
.n1-form-card h2.h6 { letter-spacing: .06em; }

/* split auth layout (login / register side panel) */
.n1-auth-aside {
	background: linear-gradient(160deg, var(--n1-navy) 0%, var(--n1-navy-700) 60%, #1e4d86 100%);
	color: #fff; border-radius: var(--n1-radius);
	padding: 2rem 1.8rem; box-shadow: var(--n1-shadow);
}
.n1-auth-aside h3 { color: #fff; }
.n1-auth-aside ul { list-style: none; padding: 0; margin: 0; }
.n1-auth-aside li { padding: .45rem 0; opacity: .95; }
.n1-auth-aside li i { color: #4ade80; }

/* ---------- Page header (interior pages) ---------- */
.n1-pagehead {
	background: linear-gradient(135deg, var(--n1-navy) 0%, var(--n1-navy-700) 100%);
	color: #fff; border-radius: var(--n1-radius);
	padding: 1.6rem 1.8rem; box-shadow: var(--n1-shadow);
}
.n1-pagehead h1 { color: #fff; margin: 0; }

/* progress bar */
.progress { border-radius: 999px; background: #e9eef6; }
.progress-bar { border-radius: 999px; }

/* ---------- FAQ ---------- */
.n1-faq .card { border: 1px solid var(--n1-line); border-radius: var(--n1-radius-sm) !important; margin-bottom: .75rem; box-shadow: var(--n1-shadow-sm); overflow: hidden; }
.n1-faq .btn-link {
	background: #fff; border: 0; border-radius: 0;
	color: var(--n1-navy); font-weight: 700; text-decoration: none; width: 100%; text-align: left;
	padding: 1rem 1.1rem; display: flex; justify-content: space-between; align-items: center;
}
.n1-faq .btn-link:hover, .n1-faq .btn-link:focus { background: var(--n1-blue-050); color: var(--n1-blue-600); box-shadow: none; }
.n1-faq .btn-link[aria-expanded="true"] { background: var(--n1-blue-050); }
.n1-faq .btn-link .chev { transition: transform .2s ease; }
.n1-faq .btn-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.n1-faq .card-body { color: var(--n1-muted); padding: 0 1.1rem 1.1rem; }

/* ---------- CTA band ---------- */
.n1-cta {
	background:
		radial-gradient(800px 300px at 20% 0%, rgba(245,158,11,.18), transparent 60%),
		linear-gradient(135deg, var(--n1-navy) 0%, var(--n1-blue-600) 130%);
	color: #fff; border-radius: 20px; padding: 2.8rem 2.4rem;
	box-shadow: var(--n1-shadow-lg);
}
.n1-cta h2 { color: #fff; }

/* ---------- Image placeholder (where real photography/graphics will drop in) ---------- */
.n1-img-placeholder {
	background:
		repeating-linear-gradient(45deg, #eef3fa, #eef3fa 14px, #e7eefb 14px, #e7eefb 28px);
	border: 1px dashed #b9c8e0;
	border-radius: var(--n1-radius);
	color: #6c7a92;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	text-align: center; padding: 1.5rem; min-height: 180px; font-size: .85rem;
}
.n1-img-placeholder i { font-size: 1.6rem; margin-bottom: .5rem; opacity: .7; }

/* ---------- Footer ---------- */
.n1-footer {
	flex-shrink: 0;
	background: var(--n1-navy-900);
	color: #aebfd6;
	border-top: 4px solid var(--n1-blue);
}
.n1-footer img.n1-footlogo { height: 40px; margin-bottom: .9rem; }
.n1-footer h6 { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; }
.n1-footer a { color: #cdd9ec; text-decoration: none; }
.n1-footer a:hover { color: #fff; text-decoration: underline; }
.n1-footer .n1-foot-list { list-style: none; padding: 0; margin: 0; }
.n1-footer .n1-foot-list li { padding: .22rem 0; font-size: .92rem; }
.n1-footer .n1-foot-bottom { border-top: 1px solid rgba(255,255,255,.10); color: #8da4c4; font-size: .84rem; }
.n1-footer .n1-foot-badge {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px; padding: .55rem .8rem; color: #dfe8f5; font-size: .85rem; font-weight: 600;
}
.n1-footer .n1-foot-badge i { color: #4ade80; }

/* ---------- Responsive niceties ---------- */
@media (max-width: 991.98px) {
	.n1-hero { padding: 2.4rem 1.6rem; text-align: center; }
	.n1-hero .lead { margin-left: auto; margin-right: auto; }
	.n1-hero-chip { left: 50%; transform: translateX(-50%); bottom: -16px; }
	.n1-navbar .nav-link { padding: .5rem .6rem !important; }
}

/* ---------- Scroll reveal (subtle section fade-up) ----------
   Sections tagged with .n1-reveal start hidden, then JS adds .is-visible
   when they scroll into view. Guarded three ways so content is NEVER lost:
   - no-JS:        .js gate means without the script nothing is hidden.
   - reduced-motion: users who ask for less motion get instant content.
   - already in view on load: the script reveals immediately (no flash). */
.js .n1-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .4s ease-out, transform .4s ease-out;
	will-change: opacity, transform;
}
.js .n1-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js .n1-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===========================================================================
   Mobile polish (phones). The marketing page is built with generous desktop
   whitespace; on a phone that turns into a lot of scrolling past empty space.
   These rules tighten the vertical rhythm and make the primary actions
   full-width and thumb-friendly. Desktop (>= 768px) is unchanged.
=========================================================================== */
@media (max-width: 767.98px) {
	/* tighten the tall section padding so phones aren't mostly gaps */
	body.n1-site .py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
	body.n1-site .pt-5 { padding-top: 2.25rem !important; }
	body.n1-site .pb-5 { padding-bottom: 2.25rem !important; }
	.n1-hero { padding: 2rem 1.3rem; }
	.n1-cta  { padding: 2.1rem 1.4rem; }
	/* trim the big empty band above the footer */
	.n1-footer.mt-5 { margin-top: 2rem !important; }
	.n1-footer.pt-5 { padding-top: 2.25rem !important; }
}

@media (max-width: 575.98px) {
	/* Stack the hero + CTA buttons full-width: cleaner and a bigger tap target
	   than two large buttons squeezed side by side. The flex `gap` spaces them. */
	.n1-hero .d-flex.flex-wrap > .btn-lg,
	.n1-cta  .d-flex.flex-wrap > .btn-lg { width: 100%; }
	.btn-lg { padding: .62rem 1.1rem; font-size: .98rem; }
	/* the hero "feature" chips read better with a little less gap when wrapped */
	.n1-hero .d-flex.flex-wrap.mt-4 { gap: .5rem 1.2rem !important; }
	/* keep long package names from cramping the price / Enroll row */
	.n1-price { font-size: 1.7rem; }
}

/* ---------- Neutral home: finder + browse-by-state ---------- */
/* The State -> Profession finder sits on the navy hero, so it's a white card. */
.n1-finder {
	background: var(--n1-surface);
	border: 1px solid var(--n1-line);
	border-radius: var(--n1-radius);
	box-shadow: var(--n1-shadow);
	color: var(--n1-ink);
}
.n1-finder label { color: var(--n1-muted); }
.n1-finder .form-control { border-color: var(--n1-line); }
.n1-finder a { color: var(--n1-blue-600); font-weight: 600; }

/* State tiles: same lift/feel as .n1-feature / .n1-course-card. */
.n1-state-tile {
	background: var(--n1-surface);
	border: 1px solid var(--n1-line);
	border-radius: var(--n1-radius);
	box-shadow: var(--n1-shadow-sm);
	transition: transform .15s ease, box-shadow .15s ease;
}
.n1-state-tile:not(.n1-soon):hover {
	transform: translateY(-3px);
	box-shadow: var(--n1-shadow);
}
/* "Coming soon" tiles read as inactive but tidy. */
.n1-state-tile.n1-soon {
	background: var(--n1-bg);
	border-style: dashed;
	box-shadow: none;
}
.n1-notify-form .form-control { border: none; }