/*
 * responsive.css
 * Responsive breakpoints replacing skel.js viewport configuration.
 * Three breakpoints: wide (>=1200), narrow (481-1199), mobile (<=480).
 */

/* ==========================================================================
   Wide — min-width: 1200px
   ========================================================================== */

@media (min-width: 1200px) {

	body {
		font-size: 15pt;
		letter-spacing: 0.035em;
		line-height: 1.75em;
	}

	h1 {
		font-size: 1.5em;
	}

	h2 {
		font-size: 1.25em;
		margin-bottom: 0.75em;
	}

	.button {
		font-size: 1.25em;
		padding: 0.65em 2.25em 0.65em 2.25em;
	}

	#header {
		margin-top: 3em;
	}

	#nav {
		text-align: right;
	}

	#nav a {
		margin-left: 2em;
	}

	#hero {
		border-radius: 0.5em;
		margin: 3em 0 3em 0;
		padding: 2em 0 2em 0;
	}

	#hero h2 {
		font-size: 2.5em;
		margin-bottom: 1em;
	}

	#hero p {
		font-size: 1.25em;
		margin-bottom: 1.75em;
	}

	#footer {
		margin: 3em 0 3em 0;
	}

}

/* ==========================================================================
   Narrow — min-width: 481px and max-width: 1199px
   ========================================================================== */

@media (min-width: 481px) and (max-width: 1199px) {

	body {
		font-size: 14pt;
		letter-spacing: 0.035em;
		line-height: 1.5em;
	}

	h1 {
		font-size: 1.25em;
	}

	h2 {
		font-size: 1.1em;
		margin-bottom: 0.5em;
	}

	.container {
		padding: 0 2em 0 2em;
	}

	.button {
		font-size: 1.25em;
		padding: 0.75em 2em 0.75em 2em;
	}

	#header {
		margin-top: 3em;
	}

	#nav {
		text-align: right;
	}

	#nav a {
		margin-left: 2em;
	}

	#hero {
		border-radius: 0.5em;
		margin: 2em 0 2em 0;
		padding: 1em 0 1em 0;
	}

	#hero h2 {
		font-size: 2.5em;
		margin-bottom: 0.75em;
	}

	#hero p {
		font-size: 1.25em;
		margin-bottom: 1.5em;
	}

	#footer {
		margin: 3em 0 3em 0;
	}

}

/* ==========================================================================
   Mobile — max-width: 480px
   ========================================================================== */

@media (max-width: 480px) {

	body {
		font-size: 12.5pt;
		line-height: 1.5em;
	}

	h1 {
		font-size: 1.5em;
		margin-bottom: 1em;
	}

	h2 {
		font-size: 1.25em;
		margin-bottom: 0.5em;
	}

	section {
		padding-bottom: 2em;
	}

	.container {
		padding: 0 1em 0 1em;
	}

	.button {
		display: block;
		font-size: 1.25em;
		padding: 0.65em 0 0.65em 0;
		width: 100%;
	}

	#header {
		margin-top: 2.5em;
		text-align: center;
	}

	#nav a {
		margin: 0 0.5em 0 0.5em;
	}

	#hero {
		border-radius: 0.5em;
		line-height: 2em;
		margin: 2em 0 2em 0;
		padding: 1em 0em 1em 0em;
	}

	#hero h2 {
		font-size: 2em;
		margin-bottom: 0.75em;
	}

	#hero p {
		font-size: 1.25em;
		margin-bottom: 1.5em;
	}

	#footer {
		margin-bottom: 2em;
	}

	/* Grid collapse — all columns go full-width on mobile */
	.row > [class*="u"] {
		width: 100% !important;
		margin-left: 0 !important;
		float: none !important;
	}

}

/* ==========================================================================
   JS-detected breakpoint overrides (skel.js DPR-aware)
   These override media queries when JS detects a different breakpoint
   than CSS media queries would, due to skel.js dividing by devicePixelRatio.
   ========================================================================== */

html.skel-wide body {
	font-size: 15pt;
	letter-spacing: 0.035em;
	line-height: 1.75em;
}
html.skel-wide h1 { font-size: 1.5em; }
html.skel-wide h2 { font-size: 1.25em; margin-bottom: 0.75em; }
html.skel-wide .button { font-size: 1.25em; padding: 0.65em 2.25em; }

html.skel-narrow body {
	font-size: 14pt;
	letter-spacing: 0.035em;
	line-height: 1.5em;
}
html.skel-narrow h1 { font-size: 1.25em; }
html.skel-narrow h2 { font-size: 1.1em; margin-bottom: 0.5em; }
html.skel-narrow .container:not(.no-padding) { padding: 0 2em; }

html.skel-mobile body {
	font-size: 12.5pt;
	line-height: 1.5em;
}
html.skel-mobile h1 { font-size: 1.5em; margin-bottom: 1em; }
html.skel-mobile h2 { font-size: 1.25em; margin-bottom: 0.5em; }
html.skel-mobile .container:not(.no-padding) { padding: 0 1em; }
html.skel-mobile .button { display: block; font-size: 1.25em; padding: 0.65em 0; width: 100%; }
html.skel-mobile .row > [class*="u"] { width: 100% !important; margin-left: 0 !important; float: none !important; }