/* Colville Tribal Federal Corporation — styles_responsive.css */


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

	#navBar ul {
		gap: 1.4em;
	}

}


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

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

	#navBar {
		display: none;
		position: absolute;
		top: 176px; /* 30px stripe + 30px topBar + 116px mainHeader */
		right: 0;
		left: auto;
		width: auto;
		min-width: 200px;
		background-color: #fff;
		border: solid 1px var(--color-bg-dark);
		border-top: none;
		padding: 0.5em 0;
		box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	}

	.site-header.scrolled #navBar {
		top: 100px; /* 30px stripe + 0px topBar + 70px mainHeader */
	}

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

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

	#navBar ul li {
		border-bottom: solid 1px var(--color-bg-dark);
	}

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

	#navBar ul li a {
		display: block;
		padding: 0.75em 1.4em;
		font-size: 0.9rem;
		text-align: right;
		color: var(--color-primary);
	}

	#hamburger {
		display: flex;
	}

	#hdrLogo img {
		height: 88px;
	}

	#hero {
		min-height: 400px;
		background-position: center top;
	}

	.heroText {
		width: 48%;
		padding-right: 2%;
	}

}


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

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

	/* Header — hide utility bar on mobile, shrink mainHeader */
	#topBar {
		display: none;
	}

	#mainHeader {
		height: 80px;
	}

	#hdrLogo {
		align-self: center;
		padding-top: 0;
	}

	#hdrLogo img {
		height: 64px;
	}

	#navBar {
		top: 110px; /* 30px stripe + 80px mainHeader */
	}

	.site-header.scrolled #navBar {
		top: 100px; /* 30px stripe + 70px scrolled mainHeader */
	}

	/* Hero */
	#hero {
		min-height: 420px;
		background-position: center top;
	}

	/* Inner page banner */
	#hero.hero--short {
		height: 220px;
		min-height: 0;
		background-position: center;
	}

	.heroBannerTitle {
		font-size: 2.8rem;
	}

	.heroInner {
		align-items: flex-end;
		justify-content: center;
	}

	.heroText {
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 4%;
		margin-right: 0;
		text-align: center;
	}

	.heroAccent {
		font-size: 3.5rem;
	}

	.heroTagline {
		font-size: 1.3rem;
	}

	.heroBtn {
		display: none;
	}

	/* Page banner */
	.page-banner-title {
		font-size: 2.5rem;
	}

	/* Footer */
	.ftrCols {
		flex-direction: column;
		gap: 24px;
	}

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

}


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

/* ----------------------------------------------------------------
   Optional components — uncomment if using stat strip / tile grid
   ---------------------------------------------------------------- */

/*
@media only screen and (max-width: 768px) {
    .twoCols { flex-direction: column; }
    .twoColMain, .twoColSide { flex: unset; width: 100%; }
    .tile { flex: 0 0 calc(50% - 10px); }
}
@media only screen and (max-width: 600px) {
    .statStrip { flex-wrap: wrap; }
    .stat { flex: 0 0 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 20px; }
    .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.2); }
    .statNum { font-size: 2.2rem; }
}
@media only screen and (max-width: 400px) {
    .tile { flex: 0 0 100%; }
}
*/


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

	html {
		scroll-padding-top: 90px; /* 8px stripe + 80px mainHeader + buffer */
	}

	#hero {
		background-position: center top;
	}

	#hero.hero--short {
		height: 180px;
		min-height: 0;
	}

	.heroAccent {
		font-size: 2.6rem;
	}

	.heroTagline {
		font-size: 1.1rem;
	}

	.heroBannerTitle {
		font-size: 2.2rem;
	}

}