/*
 * Extends style.css with media queries
 * To be compiled back to style.css on theme-ready
 */


@media screen and (min-width: 556px) {

	/*--------------------------------------------------------------
	# Content
	--------------------------------------------------------------*/

	.header-content-inner {
    	min-width: 60%;
		max-width: 75%;
		width: auto;
	}
}

@media (max-width: 781px) and (min-width: 600px) {
	.wp-block-column:not(:first-child), .wp-block-column:nth-child(2n) {
		margin-left: 16px;
	}
	.wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}


@media screen and (min-width: 700px) {

	.posts-block-columns{
		margin: 0px -0.75em;
		flex-direction: row;
    	flex-wrap: wrap;
	}
	.posts-block-column{
		width: 33.3%;
		width: calc(33.3% - 1.5em);
		margin: 0 0.75em 1.5em;
	}

	.connect-action {
		width: auto;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
}

 /* iPad Portrait layout */
@media screen and (min-width: 768px) {

	/*--------------------------------------------------------------
	# Typography
	--------------------------------------------------------------*/

	body {
		font-size: 16px;
	}

	h1 {
		font-size: 2.6em;
	}
	h2, .cta-area p {
		font-size: 1.85em;
	}
	h3 {
		font-size: 1.5em;
	}
	h4 {
		font-size: 1.33em;
	}
	h5 {
		font-size: 1.2em;
	}

	/*--------------------------------------------------------------
	# Content
	--------------------------------------------------------------*/
	
	

	.entry-content {
		margin-top: 1.8rem;
		margin-bottom: 1.8rem;
	}
	.entry-content > * {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.entry-content > .wp-block-group:first-child {
		margin-top: -1.8rem !important;
	}
	.entry-content > .wp-block-group:last-child {
		margin-bottom: -1.8rem !important;
	}

	.hero-cta {
		margin-top: -1.8em;
		padding-bottom: 1.8em;
	}
	.hero-cta .wp-block-group__inner-container {
		flex-direction: row;
		text-align: left;
	}
	.hero-cta h2 {
		max-width: 70%;
		margin: 0 2rem 0 0;
	}

	.cutout{
		top: -49px;
	}
	.cutout-icon{
		top: -89px;
	}
	.cta-area:before, .cta-area:after{
		top: -48px;
	}

	.wp-block-group .wp-block-group__inner-container {
		padding: 2.8rem 0.75em;
	}

	.posts-block-column {
		max-width: none;
	}

	.livedata-year-toggles {
		margin-bottom: 1.8rem;
		padding-bottom: 1.8rem;
	}

	/*--------------------------------------------------------------
	# Footer
	--------------------------------------------------------------*/
	.footer-container {
		flex-direction: row;
	}
	.footer-left {
		width: 70%;
		text-align: center;
	}
	.footer-right{
		text-align: right;
	}
	.footer-nav-wrapper {
		flex-direction: row;
	}
	.site-footer .home-link {
		padding-right: 10px;
		border-right: 1px solid #869098;
		margin:0 10px 0 0;
	}
	.site-footer .menu-03-footer-main-menu-container ul, .site-footer .menu-04-footer-aux-menu-container ul {
		text-align: left;
		margin: 0
	}
		

}

/* iPad Portrait layout up to slightly larger */
@media screen and (min-width: 768px) and (max-width: 781px) {
	
	/*--------------------------------------------------------------
	# Content
	--------------------------------------------------------------*/

	.wp-block-column {
		flex-basis: calc(33% - 16px)!important;
	}
	.wp-block-column:nth-child(2n) {
		margin-left: 16px;
		margin-right: 16px;
	}

}

/* Desktop layout */
@media screen and (min-width: 991px) {

	/*--------------------------------------------------------------
	## Menus
	--------------------------------------------------------------*/

	.menu-toggle {
		display: none;
	}
	.main-navigation-wrapper {
		max-height: none;
		width: auto;
		position: relative;
		border-radius: 0;
		overflow: visible;
		background: transparent;
	}
	
	.header-nav-main-wrapper {
		background: #0f425c;
		padding: 0px 15px 0 50px;
		border-radius: 100px;
	}
	.main-navigation li {
		display: inline-block;
		margin: 3px 0;
	}
	.main-navigation a {
		padding:  0.2em 0.7em;
	}

	.main-navigation .menu-item-home span {
		display: none;
	}

	/* Sub nav */
	.main-navigation .sub-menu {
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
		border-left: 0 none;
		position: absolute;
		top: 100%;
		left: -999em;
		z-index: 99999;
		background: #0f415c;
		margin-left: 0;
		padding: 0 3px;
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
	}
	.main-navigation .nav-menu > li:hover > .sub-menu,
	.main-navigation .nav-menu > li.focus > .sub-menu {
		left: auto;
	}
	.main-navigation .nav-menu > li:nth-last-child(1) > .sub-menu {
		text-align: right;
	}
	.main-navigation .nav-menu > li:nth-last-child(1):hover > .sub-menu,
	.main-navigation .nav-menu > li.focus:nth-last-child(1) > .sub-menu {
		left: auto;
		right: 0;
	}
	.main-navigation .sub-menu a {
		width: 200px;
		font-size: 0.85em;
		text-transform: none;
	}

	/* Aux menu */
	.header-nav-aux-wrapper {
		position: absolute;
		bottom: 100%;
		right: 25px;
		border-top-left-radius: 0.5em;
		border-top-right-radius: 0.5em;
		padding: 0 3px;
	}

	/* Search */
	.main-navigation .search-form input[type=search]{
		background-position: 9px center;
		border: 1px solid rgba(255,255,255,0);
		border-radius: 30px;
		padding: 0 10px 0 20px;
		width: 20px;
		margin: 3px 0;
		position: absolute;
		left: 15px;
	}
	.main-navigation .search-form input::placeholder{
		color:rgba(255,255,255,0.5);
	}
	.main-navigation .search-form input[type=search]:hover{
		background-color: #00aeb6;
	}
	.main-navigation .search-form input[type=search]:focus{
		border: 1px solid #00aeb6;
		width: 100%;
		width: calc(100% - 30px);
		outline: none;
		cursor: text;
		background-color: #003b5d;
		padding-left: 30px;
	}
	.main-navigation .search-form input[type=search]:focus:hover{
		opacity: 1;
	}

	/*--------------------------------------------------------------
	# Content
	--------------------------------------------------------------*/
	
	.header-content-inner {
    	min-width: 40%;
		max-width: 67%;
	}

	.entry-content {
		margin-top: 2.8rem;
		margin-bottom: 2.8rem;
	}
	.entry-content > * {
		padding-left: 0;
		padding-right: 0;
	}
	.entry-content > .wp-block-group:first-child {
		margin-top: -2.8rem !important;
	}
	.entry-content > .wp-block-group:last-child {
		margin-bottom: -2.8rem !important;
	}

	.hero-cta {
		margin-top: -2.8em;
		padding-bottom: 2.8em;
	}

	.wp-block-group .wp-block-group__inner-container {
		padding: 3.8rem 0.75em;
	}

	.livedata-year-toggles {
		margin-bottom: 2.8rem;
		padding-bottom: 2.8rem;
	}

	.connect-action {
		padding-left: 3em;
		padding-right: 3em;
	}

}

@media screen and (min-width: 1170px) { 
	.secondary-navigation li:first-child {
		margin-left: -1.25em;
	}
	.connect-actions {
		margin: 3em auto 0;
	}
}

/* Large Desktop layout (not chode), or really large 1920px */
@media screen and (min-width: 1280px) and (max-aspect-ratio: 9/5), (min-width: 1920px) {

	/*--------------------------------------------------------------
	# Typography
	--------------------------------------------------------------*/

	h1 {
		font-size: 3.1em;
	}
	h2, .cta-area p {
		font-size: 2em;
	}
	h3 {
		font-size: 1.6em;
	}
	h4 {
		font-size: 1.4em;
	}
	h5 {
		font-size: 1.25em;
	}

	/*--------------------------------------------------------------
	# Content
	--------------------------------------------------------------*/

	.entry-header{
		padding: 20vh 0 0;
	}
	.page-template-home-page .entry-header{
		padding: 20vh 0;
	}

}

/* Extra large screens */
@media screen and (min-width: 1440px) {

	/*--------------------------------------------------------------
	## Menus
	--------------------------------------------------------------*/

	.main-navigation .nav-menu > li:nth-last-child(1) > .sub-menu {
		text-align: left;
		border-top-right-radius: 1em;
	}
	.main-navigation .nav-menu > li:nth-last-child(1):hover > .sub-menu,
	.main-navigation .nav-menu > li.focus:nth-last-child(1) > .sub-menu {
		left: 0;
		right: auto;
	}
	
}

/* Extra large screens */
@media screen and (max-aspect-ratio: 3/2) and (min-width: 1440px) {

	/*--------------------------------------------------------------
	# Content
	--------------------------------------------------------------*/
	
	.entry-content {
		margin-top: 3.8rem;
		margin-bottom: 3.8rem;
	}
	.entry-content > .wp-block-group:first-child {
		margin-top: -3.8rem !important;
	}
	.entry-content > .wp-block-group:last-child {
		margin-bottom: -3.8rem !important;
	}

	.hero-cta {
		margin-top: -3.8em;
		padding-bottom: 3.8em;
	}

	.wp-block-group .wp-block-group__inner-container {
		padding: 4.8rem 0.75em;
	}

	.livedata-year-toggles {
		margin-bottom: 3.8rem;
		padding-bottom: 3.8rem;
	}
	
}


/* Touch screens */
.touch .secondary-navigation:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	height: calc(100% - 1px);
	left: 0;
	top: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0) 75%, rgba(255,255,255,0.5) 85%, rgb(225, 231, 234) 97%);
	pointer-events: none;
}
.touch .secondary-navigation ul {
	white-space: nowrap;
	overflow-x: scroll;
	position: relative;
}
.touch .secondary-navigation li:last-child {
	margin-right: 3em;
}
.touch .secondary-navigation li a, .touch .secondary-navigation li a:visited {
	padding-left: 0.8em;
	padding-right: 0.8em;
}