/*
Theme Name: SEUS-CP Conference
Author: Rory MacLellan
Author URI: http://www.rorymaclellan.ca
Description: Lightweight, responsive WordPress that works with ACF fields
Version: 1.0
*/

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-size: 20px;
}

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.light-mode * {
    color: #000; 
 }
 
 .dark-mode * {
     color: #fff;
 }

.primary {
    color: var(--primary);
}

.bg-primary {
    background-color: var(--primary);
}

.secondary {
    color: var(--secondary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.tertiary {
    color: var(--tertiary);
}

.bg-tertiary {
    background-color: var(--tertiary);
}

.accent1 {
    color: var(--accent1);
}

.bg-accent1 {
    background-color: var(--accent1);
}

.accent2 {
    color: var(--accent2);
}

.bg-accent2 {
    background-color: var(--accent2);
}

.p-3
{
    padding: 3rem;
}

.px-3
{
    padding-left: 3rem;
    padding-right: 3rem;
}

.py-3
{
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.p-4
{
    padding: 4rem;
}

.px-4
{
    padding-left: 4rem;
    padding-right: 4rem;
}

.py-4
{
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.p-5
{
    padding: 5rem;
}

.px-5
{
    padding-left: 5rem;
    padding-right: 5rem;
}

.py-5
{
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.p-6
{
    padding: 6rem;
}

.px-6
{
    padding-left: 6rem;
    padding-right: 6rem;
}

.py-6
{
    padding-top: 6rem;
    padding-bottom: 6rem;
}

p, a, li, b, strong, em {
    font-size: 1rem;
    line-height: 1.35rem;
    font-family: var(--fontprimary);
}

p {
    margin: 1rem 0;
}

h1, .h1 {
    font-size: 2.75rem;
    line-height: 3.5rem;
    font-family: var(--fontsecondary);
    margin-bottom: 1rem;
}

h2, .h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-family: var(--fontsecondary);
    margin-bottom: 1rem;
}

h3, .h3 {
    font-size: 1.75rem;
    line-height: 2rem;
    font-family: var(--fontsecondary);
    margin-bottom: 1rem;
}

h4, .h4 {
    font-size: 1.1rem;
    line-height: 1.25rem;
    font-family: var(--fontsecondary);
    margin-bottom: 1rem;
    text-transform: uppercase
}

.align-left
{
    text-align: left;
}

.align-center
{
    text-align: center;
}

.button
{
    margin: 1rem 0;
    padding: 0.75rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-block;
    color: white;
    border: 2px solid transparent;
    border-radius: 2px;
}

.button:hover {
    transition: 0.3s; 
    background-color: white;
}

.text-primary { color: var(--primary);}
.text-secondary { color:var(--secondary)}
.text-tertiary { color: var(--tertiary)}
.text-primary:hover, .text-secondary:hover, .text-tertiary:hover {text-decoration: underline;}
.button-primary { background-color: var(--primary)}
.button-primary:hover {border: 2px solid var(--primary); color: var(--primary);}
.button-secondary { background-color: var(--secondary)}
.button-secondary:hover { border: 2px solid var(--secondary); color: var(--secondary);}
.button-tertiary { background-color: var(--tertiary)}
.button-tertiary:hover { border: 2px solid var(--tertiary); color: var(--tertiary);}
.button-ghost {color: var(--primary);border: 2px solid var(--primary);}
.button-ghost:hover {background-color:var(--primary);color:white}

/* Black and White buttons are a little more complicated, their accent colors depend on their container's color */

section.bg-primary .button.button-white
{
	color: var(--primary);
	background-color: white;
}

section.bg-primary .button.button-black
{
	color: var(--primary);
	background-color: black;
}

section.bg-secondary .button.button-white
{
	color: var(--secondary);
	background-color: white;
}

section.bg-secondary .button.button-black
{
	color: var(--secondary);
	background-color: black;
}

section.bg-tertiary .button.button-white,
{
	color: var(--tertiary);
	background-color: white;
}

section.bg-tertiary .button.button-black
{
	color: var(--tertiary);
	background-color: black;
}

section.bg-primary .button.button-white:hover {
	color: white;
	border-color: white;
	background-color: var(--primary);
}

section.bg-primary .button.button-black:hover {
	color: black;
	border-color: black;
	background-color: var(--primary);
}

section.bg-secondary .button.button-white:hover {
	color: white
	border-color: white;
	background-color: var(--secondary);
}

section.bg-secondary .button.button-black:hover {
	color: black;
	border-color: black;
	background-color: var(--secondary);
}

section.bg-tertiary .button.button-white:hover {
	color: white;
	border-color: white;
	background-color: var(--tertiary);
}

section.bg-tertiary .button.button-black:hover {
	color: black;
	border-color: black;
	background-color: var(--tertiary);
}

.hero {
    min-height: 75vh;
    background-position: center center;
    position: relative;
    background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

#topbar {
    position:relative;
    z-index: 2;
    background: white;
    display: grid;
    grid-template-columns: 1fr 11fr;
}

#topbar .logo-container
{

  padding: 10px 10px 10px 30px;
}

#topbar .logo-container img
{
    height: 110px;
}

.hero-content
{
    width: 90%;
    max-width: 54rem;
    text-align: center;
    margin: 0 auto;
    color: white;
    padding-top: 9rem;
    position:relative;
    z-index: 1
}

.hero-content .hero-body p
{
    font-size: 1.5rem;
    line-height: 2.25rem;
}

.component
{
    margin: 1rem 0;
}

.content-container {
    width: 90%;
}

.basic-content-container {
    max-width: 52rem;
    margin: 0 auto;
}

.split-content-container {
    max-width: 68rem;
    margin: 0 auto;
}

.split-content.main-title {
  max-width: 68rem;
  margin-bottom: 2rem;
}

.column-container
{
display: flex;
flex-direction: row;
gap: 5rem;
}

.column-container.split-content-text-text
{
    gap: 10rem;
}

.split-content-text-text .column  {
    flex-basis: 100%
}

.split-content-image-text {
align-items: center;
}

.split-content-image.column {
    flex: 0 1 60%;
    aspect-ratio: 3/2;
    background-size: cover;
}

.split-content-image.desktop-left {
    order: 1
}

.split-content-image.desktop-right {
    order: 2
}

.split-content-single.column {
    flex: 1 1 40%;
}

.split-content-featured-image {
max-width: 100%;
height: 100%;
}

.component-full-width-content
{
position: relative;
background-size: cover;
}

.component-full-width-content::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

.full-width-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
    min-height: 55vh;
    position: relative;
    z-index: 1
}

.full-width-content-body p
{
    font-size: 1.5rem;
    line-height: 2.25rem;
}

.icon-grid-content-container
{
    margin: 0 auto;
}

.icon-grid-intro
{
    margin-bottom: 3rem;
}

.icon-container 
{
    display: flex;
    align-items: top;
    gap: 3rem;
    flex-wrap: wrap;
}

.icon-container .icon
{
    flex: 1;
}

.icon-img
{
    max-width: 150px;
    margin: 0 auto;
}

.icon-img img
{
    width: 100%;
}

.icon-content
{
    margin-top: 1rem;
  text-align: center;
}

.component-mapbox {
    height: 100vh;
}

.mapbox-container {
    width: 100%;
  position: relative;
  height: 100%;
}

#map {
    position: absolute;
  top: 0;
  bottom: 0;
  width: 100%
}

.mapboxgl-popup
{
    max-width: unset !important;
}

.footer-grid
{
    display: grid;
    grid-template-columns: 4fr 2fr;
    width: 95%;
    max-width: 84rem;
    margin: 0 auto;
    padding: 3rem 0 1rem;
}

.footer-grid>div
{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}

.footer-grid>div.menu
{
    justify-self: left;
}

.footer-grid #conference-logos img
{
    display: block;
    max-width: 200px;
    padding: 10px;
    margin: 0 auto 1rem;
}

.footer-grid #conference-info h4
{
    font-size: 1rem;
    margin: 0;
    text-align: left;
}

.footer-grid #copyright
{
    grid-column: 1/5
}

#footer-menu nav ul {
    list-style-type: none;
}

#footer-menu nav ul li {
    padding: 10px;
    display: inline-block;
}

#footer-menu nav ul li a
{
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}

/********** ORG GRID *******************/

.organization-grid-container
{
    max-width: 64rem;
    margin: 0 auto;
}

#filter-box {
    width: 90%;
    margin: 0 auto;
    max-width: 27rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#filter-box select
{
    padding: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--fontsecondary)
}

#filter-box #pagination
{
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    margin: 1rem 0;
    font-weight: 600;
    flex: 0 0 100%;
}

#filter-box #pagination li a
{
display: block;
padding: 10px;
color: white;
border-radius: 3px;
text-decoration: none;
background: var(--tertiary);
}

.org-grid
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: max-content;
    grid-gap: 1rem;
}

.org-grid .org-grid-block
{
    background: #ffffff;
    border: 3px solid var(--primary-color);
    border-radius: 5px;    
}

.org-grid .org-grid-block a
{
    padding: 0 10px;
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
	min-height: 200px;
    transition: 0.3s ease;
}

.org-grid .org-grid-block a:hover
{
    color: var(--tertiary);
    transition: 0.3s ease;
}

.org-grid .org-grid-block a img.anchor-icon
{
	width: 20px;
    padding: 0 0 2px 5px;
}

.org-grid .org-grid-block img
{
    max-width: 100%;
    padding-top: 10px;
}

/*************** SPONSOR GRID **********/

.sponsor-grid-content-container
{
    margin: 0 auto;
    max-width: 52rem;
}

.sponsor-level
{
	text-align: center;
}

.sponsor-level .h1
{
	color: var(--primary);
}

.sponsor-level .h2
{
	color: var(--secondary);
}

.sponsor-level .h3
{
	color: var(--tertiary);
}

.sponsor-grid
{
    display: flex;
    gap: 3rem;
    margin: 3rem 0;
	justify-content: center;
}
.sponsor-grid-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

.sponsor-grid-item-image {
    max-width: 300px;
    width: 100%;
}
/********** SINGLE ORG TEMPLATE ********/

.single-organization #single-org_header 
{
    min-height: 60vh;
}

.single-organization #single-org_header .hero-content
{
    padding: 3rem 0 1rem 0;
}

.single-organization #single-org_header .hero-content h3
{
    margin-bottom: 0;
    margin-top: 1rem;
}

.single-organization #single-org_content
{
    max-width: 52rem;
    margin: 3rem auto;
}

.single-org_section
{
    margin: 1rem auto;
}

.half-section
{
    width: 100%;
}

.section-left
{
    margin-left: 0rem;
}

.section-right
{
    margin-right: 0rem;
}

.single-org_section div
{
    padding: 3rem 1.5rem;
}

.single-org_section div#logo-box
{
    padding: 0;
}


.single-org_section p,
.single-org_section li,
.single-org_section a
{
    font-size: 1.1rem;

}


.single-org_section p,
.single-org_section li,
.single-org_section h2,
.single-org_section h3
{
    color: var(--primary)
}

.social-band {
    width: 100%;
}

.social-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 16rem;
    max-width: 40%;
    margin: 0 3rem 0 auto;
    padding: 10px;
}

.link-icon 
{
    width: 40px;
    padding: 5px;
}

#logo-box
{
    width: 250px;
    height: 250px;
    background: white;
    margin: -6rem auto 0 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px -5px 30px #000;
    z-index: 2;
    position: relative;
}

#logo-box img
{
    width:90%;
    background: none;
    padding: 0;
    position: relative;
}

/**** FORMS ****/

.registration-form input,
.registration-form legend,
.registration-form label,
.registration-form textarea, 
.registration-form .gfield--input-type-html
{
    font-family: var(--fontsecondary)
}

.registration-form input[type="button"]
{
    border: 2px solid transparent;
    background: var(--tertiary);
    color: white;
}
.registration-form input[type="button"]:hover{
    border: 2px solid var(--tertiary);
    background: white;
    color: var(--tertiary);
}

@media only screen and (max-width: 767px) {
    
    .hero-content
{
    padding-top: 2rem;
}

    .split-content-image.desktop-left {
        order: unset;
    }
    
    .split-content-image.desktop-right {
        order: unset;
    }

    .column-container {
        flex-wrap: wrap;
    }

    .column-container .column {
        flex: 100%
    }

    .split-content-image.mobile-top {
        order: 1
    }
    
    .split-content-image.mobile-bottom {
        order: 2
    }

    .footer-grid
    {
        display:block;
    }

    #logo-box
    {
        margin: 1rem auto 0;
    }

    .social-menu
    {
        width: 90%;
        max-width: none;
        justify-content: center;
        margin: 0 auto;
    }

    .single-organization #single-org_header
    {
        min-height: 45vh;
    }

    .sponsor-grid
    {
        grid-template-columns: 1fr
    }
	
	.org-grid
	{
    grid-template-columns: repeat(2, 1fr);
	}
} 

@media only screen and (max-width: 400px) {
	
		.org-grid
	{
    grid-template-columns: repeat(1, 1fr);
	}
	
}