/*
Website Design/Build:
Kevin Snell
Formulate Communicative Design
www.formulate.ca
*/

/* CSS VARIABLES */
:root {
  /* Base font size - this becomes your reference point */
  font-size: 16px;
  
  /* Color palette */
  --color-primary: #2462A2;
  --color-secondary: #000;
  --color-light-blue: #326EAC;
  --color-dark-blue: #2E417D;
  --color-text: #666666;
  --color-bg: #ffffff;
  --color-link: #2462A2;
  --color-link-hover: #3FB4FB;;
  
  /* Typography */
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-h1: 2rem;
  --line-height-base: 1.3;
  
  /* Layout */
  --padding: 1rem;

  }

/* RESET & BASE STYLES */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body { 
  margin: 0; 
  padding: 0; 
  color: var(--color-text); 
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


/* Focus styles for accessibility */
:focus {
  outline: none;
}

input:focus { 
  outline: none;
}


/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  line-height: 1.2;
  font-weight: 300;
  color: #000;
}

h1 { 
  font-size: 1.6rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.2rem;
}

h2, h3 {
  margin-top: 1.8rem;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { 
  font-weight:600;
}

ul li, ol li {
  padding:.3rem 0;
}

blockquote {
  margin: 1rem 0 1.5rem 0;
}

blockquote p { 
  margin:.5rem 0;
  font-size: 1rem;
  color: var(--color-dark-blue);
  font-weight:500;
}

blockquote strong { 
  font-style:normal;
}

hr {
  margin:2rem 0;
}

/* LINKS */
a { 
  color: var(--color-link); 
  text-decoration: none;
}

a:hover { 
  text-decoration: none; 
  color: var(--color-link-hover); 
}

em { 
  color: var(--color-text); 
}


/* BUTTONS */
.uk-button { 
  margin:0;
  padding:0 2.5rem;
  background: var(--color-primary); 
  color: #fff; 
  font-weight: 300; 
  letter-spacing: 0.0625rem; 
  text-transform: initial; 
  height:40px;
  line-height: 43px;
  border-radius: 6px;
}

.uk-button:hover { 
  background: var(--color-secondary); 
  color: #fff; 
}


/* COMPONENTS */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

img.align_left {
  display:block;
  margin:0 auto 2rem auto;
  width:100%;
  max-width:400px;
}

img.align_right {
  display:block;
  margin:0 auto 2rem auto;
  width:100%;
  max-width:400px;
}

img.align_center {
  margin:1rem auto;
}


/* Skip-link for accessibility */
.skip-link {
  position: absolute;
  top: -2.5rem;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 0.5rem;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}


/* EDIT PAGE */
#editpage { 
  position: fixed; 
  top: 4px; 
  left: 49%;  
  z-index: 9999; 
}

#editpage a { 
  float: left; 
  padding: 0.1875rem 0.375rem 0.3125rem 0.375rem; 
  background: #db1174; 
  color: #FFB8DB; 
  display: block; 
  font-weight: normal; 
  font-size: 0.875rem; 
  z-index: 9999; 
  margin: 0 0.0625rem; 
  text-decoration: none; 
  line-height: 1em; 
  stroke-width: 0.125rem; 
  border-radius: 0.1875rem;
}

#editpage a:hover { 
  background: #ffffcc; 
  color: #000; 
  text-decoration: none; 
}


/* NAVIGATION */

.uk-navbar-nav {
  gap: 1.5rem;
}

.uk-navbar-nav li {
  padding:0;
}

.uk-navbar-nav > li > a {
  color: var(--color-link);
  font-size: 1rem;
  text-transform: initial;
  min-height:40px;
}

.uk-navbar-nav > li > a:hover {
  color: var(--color-link-hover);
}

.uk-offcanvas-bar .uk-nav-default a {
  font-size:1.4rem;
}

/* LAYOUT COMPONENTS */

header {
  background:#fff;
  padding: .5rem var(--padding);
}

header div.logo img { 
  width:100%;
  max-width:320px;
}

header div.menu {
  text-align:right;
}

header div.menu .uk-icon {
  position:relative;
  top:-1px;
  margin-right:4px;
}

header div.menu a.uk-button {
  text-transform:uppercase;
  height:34px;
  line-height:38px;
  padding:0 30px;
  font-size:14px;
  display:inline-block;
}

header div.menu a.toggle {
  display:inline-block;
  margin-left:20px;
  margin-top:5px;
}

#breadcrumbs {
  margin:0 0 1.5rem 0;
  padding:0;
  list-style:none;
  color:#a2a2a2;
}

#breadcrumbs li {
  display:inline;
}

#breadcrumbs li:after {
  content: ">";
  padding:0 10px;
}

#breadcrumbs li.last:after {
  display:none;
}

#breadcrumbs li span.uk-icon { 
  position:relative;
  top:-3px;
  margin-right:6px;
}

#breadcrumbs li.first span {
  color:#666;
}


#hero {
  background: #000;
}

#hero img {
  width:100%;
}

#hero h2 {
  background: #e9e9e9;
  color: var(--color-dark-blue);
  text-transform: uppercase;
  font-size:1.4rem;
  font-weight: 600;
  text-align: center;
  margin:0;
  padding: .875rem var(--padding);
}

#hero h2 a {
  color: var(--color-dark-blue);
}

#hero h2 a:hover {
  color: var(--color-link-hover);
}

#layout {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding: 1rem 0 2rem 0;
}

#content { 
  padding: .8rem var(--padding); 
}

#content div.sidebar img {
  border:6px solid var(--color-light-blue);
  max-width:350px;
  border-radius:6px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#content div.sidebar img.align_center {
  border:none;
  margin:0 auto 35px auto;
  display:block;
}

#content div.sidebar h2 {
  margin: 0.8rem 0 0 0;
  font-size:2rem;
}

#content div.sidebar h3 {
  margin-top: 0;
  font-size:1.2rem;
  color: var(--color-text);
}

#content div.sidebar h4 {
  margin:0 0 -15px 0;
  font-size:1.2rem;
  font-weight:500;
}

#content div.sidebar ul {
  margin: 1.4rem 0 1.8rem 0;
  padding: 0;
  color:#000;
  font-weight:500;
  list-style: none;
}

#content div.sidebar ul li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 10px;
  line-height: 1.2;
  padding-top: 0;
}

#content div.sidebar ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em; /* Slight adjustment to align with text baseline */
  width: 16px; /* Width of your bullet */
  height: 16px; /* Height of your bullet */
  background-image: url('images/bullet.png');
  background-repeat: no-repeat;
  background-size: contain;
}

div.contact_info {
  text-align:center;
  margin:2rem 0;
  font-size:1.7rem;
}

div.contact_info p {
  margin:.7rem 0;
}

div.contact_info p.email {
  font-size:1.4rem;
}

div.contact_info p .uk-icon {
  position:relative;
  top:-2px;
  margin-right:3px;
}

#ctas {
  position:relative;
  margin-bottom:3rem;
}

#ctas div.bkg {
  position:absolute;
  z-index:-1;
  top:15%;
  background-color:#ccc;
  width:100%;
  height:70%;
}

#ctas .uk-grid {
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

#ctas .uk-grid div {
  padding:1rem;
}
#blog {
  margin:0 0 2rem 0;
}

#blog h2 {
  background:var(--color-light-blue);
  color:#fff;
  text-align:center;
  font-size:1.5rem;
  letter-spacing:1px;
  padding:1rem;
  position:relative;
}

#blog h2 span {
  position:absolute;
  top:30%;
  right:1rem;
  font-size:1rem;
}

#blog h2 a {
  color:#fff;
}

#blog h2 a:hover {
  color:#3FB4FB;
}

#blog h2 span i.uk-icon { 
  position:relative;
  top:-1px;
}

#blog .uk-grid {
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

#blog div.post {
  font-size:.9rem;
  padding:1rem 1.4rem;
}

#blog div.post h3 {
  margin:0;
  font-size:1.2rem;
}

#blog div.post p {
  margin:.5rem 0;
}

footer {
  clear:both;
  width:100%;
  padding:2rem 0;
  background-image: url('images/footer_bkg.png');
  background-repeat: no-repeat;
  background-size: cover;
}

footer .uk-grid {
  width:100%;
  padding:0 var(--padding);
}

footer div.logo, footer div.info {
  text-align:center;
}

footer div.logo img { 
  width:100%;
  max-width:320px;
}

footer p.copyright {
  font-size:.9rem;
  color:#4E506A;
}

footer div.info {
  font-size:1rem;
  padding-top:1rem;
}

footer div.info p { margin:8px 0; }

footer div.info a.phone {
  font-size:1.6rem;
}

footer div.info a {
  color:#fff;
  padding-left:2rem;
}

footer div.info a:hover {
  color: var(--color-link-hover);
}

.page1 h1 { font-weight:600; letter-spacing:1px; }
.page1 #layout { padding-top:2rem; }

.FormBuilderViewport { max-width:600px; }


/* MEDIA QUERIES */
@media only screen and (min-width: 640px) {  
  :root {
    --font-size-base: 16px;
  }
}

@media only screen and (min-width: 960px) {
  
  img.align_left {
    float:left;
    margin:1rem 3rem 1rem 0;
  }
  
  img.align_right {
    float:right;
    margin:1rem 0 1rem 3rem;
  }
  
  h1 { 
    font-size: 2.4rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size:1.6rem;
  }

  
  #hero h2 {
    font-size:2rem;
    letter-spacing: .1rem;
  }
  
  footer div.logo {
    text-align:left;
  }
  
  footer div.info {
    text-align:right;
  }
  
}

@media only screen and (min-width: 1024px) {
    /* Add styles for desktop */
  }

@media only screen and (min-width: 1200px) { 
  :root {
    --padding: 2rem;
  }
  
  .uk-navbar-nav {
    gap: 2rem;
  }
  
  .uk-navbar-nav > li > a {
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 1400px) {
    /* Add styles for extra large screens */
  }

@media only screen and (min-width: 1600px) {
    /* Add styles for ultra wide screens */
  }