/* 28th Amendment Initiative — styles_responsive.css */


/* ----------------------------------------------------------------
   1030px — Hamburger menu activates
   ---------------------------------------------------------------- */

@media only screen and (max-width: 1030px) {

	#navBar {
		display: none;
		position: absolute;
		top: 90px;
		right: 0;
		left: auto;
		width: auto;
		min-width: 220px;
		background-color: var(--color-primary-dark);
		border: 1px solid rgba(200,169,81,0.25);
		border-top: none;
		padding: 0.5em 0;
		box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	}

	.site-header.scrolled #navBar {
		top: 68px;
	}

	#navBar.is-open {
		display: block;
	}

	#navBar ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}

	#navBar ul li {
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}

	#navBar ul li:last-child {
		border-bottom: none;
	}

	#navBar ul li a {
		display: block;
		padding: 0.9em 1.4em;
		font-size: 0.875rem;
		text-align: right;
		color: rgba(255,255,255,0.85);
	}

	#navBar ul li a.navCta {
		background: none;
		color: var(--color-accent);
		padding: 0.9em 1.4em;
		border-radius: 0;
	}

	#hamburger {
		display: flex;
	}

	.roadmapGrid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

}


/* ----------------------------------------------------------------
   900px — 2-col to 1-col transitions
   ---------------------------------------------------------------- */

@media only screen and (max-width: 900px) {

	.ftrCols {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.ftrBrand {
		grid-column: 1 / -1;
	}

}


/* ----------------------------------------------------------------
   768px — Mobile layout
   ---------------------------------------------------------------- */

@media only screen and (max-width: 768px) {

	.site-header {
		height: 72px;
	}

	.site-header.scrolled #navBar {
		top: 68px;
	}

	#navBar {
		top: 72px;
	}

	.logoMark {
		font-size: 1.9rem;
	}

	.logoText {
		font-size: 0.8rem;
	}

	/* Hero */
	.heroInner {
		padding: 100px 20px 60px;
	}

	.heroQuote {
		padding: 20px 20px;
		font-size: 1.05rem;
		border-left-width: 3px;
		border-right-width: 3px;
	}

	.heroBtns {
		flex-direction: column;
		align-items: center;
	}

	.heroBtn {
		width: 100%;
		max-width: 280px;
		text-align: center;
	}

	/* Sections */
	section {
		padding: 56px 0;
	}

	.sectionHeader {
		margin-bottom: 36px;
	}

	.whyGrid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.processStep {
		flex-direction: column;
		gap: 12px;
	}

	.stepNum {
		width: auto;
		font-size: 1.8rem;
	}

	.amendmentDocBody {
		padding: 28px 24px;
	}

	/* Footer */
	.ftrCols {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ftrBrand {
		grid-column: auto;
	}

	#siteCredits .pad {
		flex-direction: column;
		gap: 4px;
		text-align: center;
	}

	.page-banner {
		padding: 100px 0 36px;
	}

	.page-banner-title {
		font-size: 2rem;
	}

	.ctaBtns {
		flex-direction: column;
		align-items: center;
	}

	.ctaBtn {
		width: 100%;
		max-width: 280px;
		text-align: center;
	}

}


/* ----------------------------------------------------------------
   480px — Small mobile
   ---------------------------------------------------------------- */

@media only screen and (max-width: 480px) {

	.heroAmendmentNum {
		font-size: 3rem;
	}

	.amendmentDocHeader {
		flex-direction: column;
		gap: 8px;
		padding: 16px 20px;
	}

	.docStars {
		letter-spacing: 0.15em;
	}

}