/*
	Site Name: BPR Systems
	Site URI: https://BPRSystems.com
	Description: BPR System Web site
	Version: 0.1.2
  Author: Benard Rafferty
	CSS Author: Paul McCann
*/

/* RESETS  */
*, ::before, ::after {box-sizing: border-box;}
* { margin: 0;}
html,
body {height: 100%;}
body {-webkit-font-smoothing: antialiased;}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* custom props  */
:root {
  --typeSpeed: 2s;
  --typeChars: 19;
  --bg-color: hsl(49 37% 94%);
    --bpr-brand-color: #0281b8;
    --bpr-brand-color: hsl(198deg 98% 35%);
    --bpr-gradient-stop: hsl(198, 100%, 30%);
    --bpr-border: hsl(198, 100%, 15%);
  --line-hgt: 1.5rem;
  --main-font: system-ui;
  --title-font: system-ui;
  --txt-link-color: hsl(50, 50%, 100%);
}

html{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
body {
  background: var(--bpr-brand-color);
  font-family: var(--main-font);
}

/* LINKS  */
a {
  color: var(--txt-link-color);
  text-decoration-color: hsl(225, 95%, 75%);
}
a:hover { color: hsl(225, 100%, 85%);}
a:focus { outline: 0;}
a:hover,a:active { outline: 0;}
a[href^="mailto"],
a[href^="tel"] {
text-decoration-color: hsl(228, 100%, 1%);
word-break: keep-all;
}
footer a[href^="mailto"],
footer a[href^="tel"] {
  text-decoration-color: hsl(225, 15%, 40%);
}

h2 {font-size: clamp(1.4rem, 5.5vw - 1rem, 2.2rem);
font-weight: normal;}
h3 {
  font-size: clamp(1.2rem, 2vw - 1rem, 2.25rem);
margin-left: 1rem;}

header {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  background: linear-gradient(to bottom, var(--bpr-brand-color) 70%, hsl(198, 100%, 30%) 100%);
  color: white;
}


/* SECTIONS  */
section {
  padding: 2rem;
  color: white;
  min-height: 100vh;
    background:var(--bpr-brand-color);
    border-bottom: 1px solid var(--bpr-border);
}

section p,
section li {
  margin: 1rem;
  font-size: clamp(1.3rem, 3vw - 1rem, 2rem);
}

section {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
}
.textwrapper { grid-column: 3/7; }

.who-we-are .textwrapper {
  align-self: start;
}

section h2,
section h3 {
  grid-column: 1/3;
}
section h2 {align-self: start;}

.intro h2 {
  margin-bottom: 2.2rem;
  margin-left: 1rem;
  line-height:1.7rem;
}
.who-we-are h2,
.services h2,
.tips h2 {
  justify-self: self-start;
}

section.intro {
  grid-template-columns: 1fr;
  gap: 0rem;
  padding: 2rem;
}
.intro .textwrapper {
  grid-column: 1/-1;
}

.textwrapper p:first-child {
  margin-top: .25rem;;
}

/* LISTS  */
ul li {list-style: circle;}
.link-list li {list-style: none;}
.link-list li:before {
  content: '>';
  padding-right: .5rem;
  color: hsl(223, 100%, 3%);
}
ol {
  list-style: none;
  counter-reset: parens;
  padding: .6rem;
}
ol li {
  counter-increment: parens;
  position: relative;
  padding-left: 1rem;
}

ol li:before {
  content: counter(parens) ") ";
  position: absolute;
    /* --size: 12px; */
    /* left: calc(-1 * var(--size) - 10px); */
    left: -12px;
}

section p,
section li {
  margin: 1rem;
  font-size: clamp(1.25rem, 2vw - 1rem, 1.75rem);
}
.text-tagline {
  font-size: clamp(.95rem, 6vw - 1rem, 1.55rem);
}
.contact-section {grid-template-columns: 1fr;}

footer {
  background: #000;
  padding: 1rem 0;
  color: white;
  display: grid;
  place-items: center;
  gap: 2rem;
  grid-template-columns: repeat(5, 1fr);
}

/* LOGO STUFF */

.logobox {
  /* width: 60vw; */
  width: 450px;
  height: 75px;
  display: grid;
grid-template-columns: .5fr 1fr 1fr;
border: 1px solid white;
justify-self: left;
gap: 0rem;
margin-bottom: 3rem;
}

.logobox > * {
  padding: 1rem;
}
.logobox .logo-name {
  text-align: center;
    border-left: 1px solid white;
    border-right: 1px solid white;
    display: grid;
    place-items: center;
}

    .logobox .logo-name h1 {
        font-size: 2.2rem;
        font-weight: normal;
        margin: 0;
    }
.logobox .logo {
  padding: 10px;
  background: transparent;
  width: 70px;
  height: 70px;
  border: none;
}
.logobox .logo svg {
  height: 50px;
  transform: translateX(-5px);
}
.logobox address {
  font-weight: bold;
  /* font-size: clamp(.9rem, .5vw + .5rem, 1.5rem); */
  font-size: 11px;
}

.logo-address {
  padding: .25rem;
    justify-self: center;
    align-self: center;
}
.logo svg .triangle {fill: white;}
.logo svg circle {fill: #010101;}

footer .logo {
  background: var(--bpr-brand-color);
  min-width: 10vw;
  min-height: 10vw;
  padding: 1vw;
  grid-column: 1/2;
}

.logo svg .triangle {
  transform-origin: 50%;
}
.logo-name {
  margin-left: -15px;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
}
.tagline {
  text-transform: uppercase;
  text-align: center;
}
.contact-info {
  font-size: clamp(.6rem, .5vw + .5rem, 1rem);
}
address {
  display: block;
  font-style: normal;
  text-transform: uppercase;
  font-size: clamp(.6rem, .5vw + .5rem, 1rem);
}

/* MEDIA QUERIES  */

@media screen and (max-width: 800px) {
  section {
    padding: 2rem 1rem;
    grid-template-columns: 1fr;
  place-items: start ;}
  section.intro {
    place-items: center;
    padding: 1rem;
  }
.intro h2 {
  margin-bottom: 1.5rem;
  margin-left: 1rem;
  line-height: 1.7rem;
}

  
  .textwrapper {grid-column: 1/-1;}
  section h2,
  section h3 {grid-column: 1/-1;}
  section h2 {
    text-align: left;
  }
.who-we-are h2 {
          margin-left: 1rem;
        }

  .mobilebr {
    display: block;
  }
  footer {
    gap: 1rem;
    grid-template-columns: 1fr;
    place-content: center;
    }
}

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

    .logobox {
        width: 325px;
        height: 70px;
/*  transform: scale(1.1) translateX(0px); */
      }
    
      .logobox>* {
        padding: .5rem;
      }
    
      .logobox .logo-name h1 {
        font-size: 1.4rem;
      }
      .logobox .logo {
        padding: 10px;
        background: transparent;
        width: 60px;
        height: 60px;
        border: none;
      }
    
      .logobox .logo svg {
        height: 50px;
      }
    
      .logobox address {
        font-size: 9px;
      }
}

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

section {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
  }
    .textwrapper {
      grid-column: 3/6;
    }
    .logobox {
    transform: scale(1.30) translateX(52px);
    }
}
 
/* ANIMATIONS  */

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}