@import "compass";

/*
**
**  UrgentCo Styles
**  Author: ContextWest
**  https://contextwest.com
**
**  Table of Contents
**  1.  Variables
**  2.  Basic Elements/Helper Classes
**  3.  Header
**  4.  Other Shared Elements
**  5.  Forms
**  6.  Specific Pages
**
*/

/*
**  Variables
*/

$font-primary:    "Nunito", Helvetica, Arial, sans-serif;
$copy-primary:    #222;

$red-primary:     #DB2B30;
$blue-primary:    #73ACD2;
$purple-primary:  #49485D;
$purple-lighter:  #727191;
$purple-darker:   #262636;
$green-primary:   #8DC4BE;
$gray-primary:    #66656E;
$sand:            #DED0AB;


/*
**  Basic Elements/Helper Classes
*/

html {
  font-size:62.5%;
  scroll-behavior: smooth;
}

body {
  color:$copy-primary;
  font-family:$font-primary;
  font-size:1.6rem;
  font-weight:400;
  line-height:1.6;
}

h3, h4, h5, h6 {
  font-weight:700;
}

h1 {
  // Hide title of site
  display:none;
}

h2 {
  font-size:5rem;
  color:#fff;
  font-weight:800;
  text-align:center;
}

h3 {
  font-size:3.2rem;
}

h4 {
  font-size:2.8rem;
}

h5 {
  font-size:2.2rem;
}

h6 {
  font-size:1.6rem;
}

p {
  margin-bottom:1.5em;
}

section {
  padding:4em;
}

a, button {
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  transition:all .3s ease-in-out;
}

.dark-bg,
.light {
  color:#fff;
}

.purple-bg {
  background-color:$purple-primary;
}

.border-red-top {
  border-top:22px solid $red-primary;
}

.flex {
  display:flex;
}

@media (max-width:767px) {
  .flex-md {
    flex-direction:column;
  }
}


/*
**  Header
*/

header {
  background-color:#fff;

  .navbar {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:.5em 2em;

    .nav {
      font-family:$font-primary;
      font-weight:700;
      text-transform:uppercase;

      .nav-item {
        margin:0 .25em;
        padding:0 .25em;
        cursor:pointer;

        &.secondary {
          padding-right:0;
          border-left:1px solid $blue-primary;
          padding-left:2em;

          .nav-link {
            color:#fff;
            background-color:$blue-primary;
            text-transform:capitalize;
            margin-right:0;
            border:2px solid $blue-primary;

            &:hover {
              color:$blue-primary;
              background-color:transparent;
            }
          }
        }
      }

      .nav-link {
        color:$copy-primary;
        padding:.5em 1em;
        text-decoration: none;
        border:2px solid transparent;
        cursor:pointer;

        &:hover {
          color:#fff;
          background-color:$blue-primary;
          border-color:$blue-primary;
        }

        &.active {
          border-bottom:2px solid $blue-primary;
        }
      }
    }
  }

  .navbar-collapse {
    display:flex;
    justify-content: flex-end;
  }

  .navbar-toggler {
    font-size:1.5rem;
    padding:.25em .5em;
  }
}

@media(max-width:991px) {
  .nav {
    .nav-item {
      flex-basis:100%;
      text-align:right;
      margin:0;
      padding:0;

      &.secondary {
        padding-left:0;
        border:none;
      }
    }
  }
}

/*
**  Footer
*/

footer {
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:$purple-darker;
  padding:2em 1em;
}

footer p {
  margin:0;
}


/*
**  Other Shared Elements
*/

// Buttons
.btn {
  color:#fff;
  font-size:inherit;
  font-weight:700;
  letter-spacing: .02em;
  margin:0 auto;
  padding:.5em 1.5em;
  border-radius:1.5em;
  text-decoration:none;

  &.btn-primary {
    background: $blue-primary;
    min-width: 7em;
    border:none;
  }

  &.btn-secondary {
    background-color:$purple-primary;
    border-color:$purple-primary;
  }

  &.btn-tertiary {
    background-color: $red-primary;
    min-width:8em;
  }

  &.btn-outline {
    color: $blue-primary;
    border-color: $blue-primary;
  }
}

// Separators
.separator {
  position:relative;

  &.separator-red-white {

    &:before {
      content:'';
      display:block;
      position:absolute;
      background:url('../images/separator-red-white_01.svg') no-repeat;
      height:15vw;
      top:-14vw;
      background-size:cover;
      width:100%;
    }
  }

  &.separator-red-purple {
    height:15vw;
    margin-top:-14vw;

    &:before {
      content:'';
      display:block;
      position:absolute;
      background:url('../images/separator-red-purple_01.svg') no-repeat;
      background-size:cover;
      height:100%;
      width:100%;
    }
  }
}

// Alerts
.alert-primary {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background-color:$sand;
  color:$copy-primary;
  border:none;

  &.text-left {
    justify-content: flex-start;
  }

  p {
    margin:0;
  }
}

.alert-secondary {
  display:flex;
  justify-content: center;
  align-items:center;
  color:#fff;
  font-weight:700;
  font-size:1.4rem;
  background: $blue-primary;
  min-width: 7em;
  border:none;

  p {
    margin:0;
  }
}

// Modal
a[data-toggle="modal"]:not([href]):hover {
  color:#fff;
  background-color:$blue-primary;
  border-color:$blue-primary;
}

/*
** Accordion
*/

.accordion > .card {
  margin:.5em 0;
  padding:0;
  border:1px solid $gray-primary;
}

.accordion > .card:first-of-type,
.accordion > .card:not(:first-of-type):not(:last-of-type) {
  border-bottom:1px solid $gray-primary;
}

.accordion .card-header {
  padding:0;
  border-bottom:1px solid $gray-primary;
}

.accordion .card-header button {
  display:flex;
  justify-content: space-between;
  align-items: center;
  color:#fff;
  background-color:$purple-lighter;
  width:100%;
  text-align:left;
  padding:.75em 1.25em;
  text-decoration:none;
  border-radius:0;
}

.accordion .card-header .fa::before {
  font-size:2rem;
}

.accordion .card-header button .fa {
  transform:rotate(90deg);
  transition:all .3s ease-in-out;
}

.accordion .card-header button.collapsed {
  color:$copy-primary;
  background-color:rgba(255,255,255,.9);
}

.accordion .card-header button.collapsed .fa {
  transform:rotate(0deg);
}

.accordion .card-body {
  color:#fff;
  background-color:$purple-primary;
  padding:.75em 1.25em;
}


.ring-bg {
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),linear-gradient(rgba(114,113,145,1),rgba(114,113,145,1)), url('../images/hero_02.jpg') fixed no-repeat;
  background-blend-mode:hard-light;
  background-size:cover;
  background-position:center;

  &.holiday {
    background:url('../images/home-hero_01.jpg') fixed no-repeat;
    background-size:cover;
    background-position:center;
  }
}

.holiday {
  background:url('../images/home-hero_01.jpg') fixed no-repeat;
  background-size:cover;
  background-position:center;

  padding-left:0;
  padding-right:0;
}

.main {
  min-height:76vh;
}

.overlay {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  text-align:center;
  background-color:rgba(0,0,0,.85);
  margin:6em 0;
  padding:6em 0;
}

// Cards
.card {
  background-color:rgba(255,255,255,.9);
  max-width:820px;
  margin:2em auto;
  padding:2em;

  &.narrow {
    width:600px;
    max-width:100%;
  }

  ~ .alert-secondary {
   width:540px;
   max-width:100%;
 }
}

.ring-bg section > * {
  width:820px;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/*
** Forms
*/

label {
  font-size:1.4rem;
  font-weight:700;
}

.form-group {
  margin-bottom:1em;
}

.form-group.select {
  display:flex;
  min-height:41px;
}

.form-control {
  font-size:1.6rem;
  height:auto;
  padding:.5em 1em;
  border-radius:.5em;
  border:1px solid $gray-primary;
}

.form-check.block .form-check-input {
  margin-left:0;
}

.form-check.block .form-check-label {
  margin-left:1.5em;
}

.form-check.center {
  display:flex;
  justify-content: center;
}

.form-check.center .form-check-input {
  position:relative;
}

.form-check label {
  font-size:1.6rem;
  margin-left:.25em;
  font-weight:normal;
}

.dark-bg .form-control {
  background-color:transparent;
  border-color:#fff;
  color:#fff;
}

.dark-bg .form-control::placeholder {
  color:rgba(255,255,255,.8);
}

.form-control:focus {
  border-color:$green-primary;
  box-shadow:none;
}

.dark-bg .form-control:focus {
  border-color:$blue-primary;
}

.submit {
  margin:.5em auto;
}

textarea.form-control[readonly] {
  background-color:#fff;
}

.required {
  color:#D63B3B;
  background-color:initial !important;
  font-size:125%;
  line-height:.5;
  padding-right:.25em;
}

form .alert {
  font-size:1.4rem;
}


/*
**  Specific Pages
*/

// Home
.home {
  .hero {
    display:flex;
    flex-direction:column;
    justify-content: center;
    position:relative;
    align-items:center;
    flex-wrap:wrap;
    background:url('../images/home-hero_01.jpg') fixed no-repeat;
    background-size:cover;
    background-position:center top;
    height:75vh;
    text-align:center;

    h2 {
      margin-bottom:1em;
    }

    .btn {
      margin:.5em;
    }
  }

  .hours {
    background-color:rgba(0,0,0,.1);
    padding:1.5em;
  }
}

// FAQ
#faq {
  background:url('../images/beach_01.jpg') no-repeat;
  background-size:cover;
  background-position:center;
  padding-bottom:22em;
}

// Contact
#contact {
  background-color:$purple-primary;
  padding-top:0;
}

// Attorney pages
.attorney-hero {
  background:linear-gradient(rgba(114,113,145,.4),rgba(114,113,145,.4)), url('../images/life-jackets_01.jpg') fixed no-repeat;
  background-blend-mode:multiply, normal;
  background-size:cover;
  background-position:center;

  div[class*=col-] {
    display:flex;
    align-items:center;
  }

  .card {
    width:100%;
    margin:0;
  }
}

.life-jacket-bg {
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url('../images/life-jackets_01.jpg') fixed no-repeat;
  background-blend-mode:multiply, normal;
  background-size:cover;
  background-position:center;
}

.attorney-content {
  background: $purple-primary;
  position:relative;
  padding-top:0;

  div[class*=col-] {
    margin-bottom:2em;
  }

  .card {
    height:100%;

    .card-body {
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;

      img {
        width:30%;
        min-width:70px;
      }

      h5 {
        color:$red-primary;
      }
    }
  }
}


.tearsheets {
  .feature-headline {
    font-size:10rem;
    line-height:1;
    color:rgba(255,255,255,.8);
  }

  p {
    color:#fff;
  }
}

@media(max-width:767px) {
  .tearsheets {
    text-align: center;
  }
}

@media(max-width:575px) {
  .tearsheets {
    .feature-headline {
      font-size:6rem;
    }
  }
}