/***** style-front.css *****/
/* See also: ph_front.css  */
/***************************/

/************* BLOCKS *************
 block order on front page by ID=
   ph-front-block-subnav
   ph-front-block-hero
   ph-front-block-community
   ph-front-block-connection
   ph-front-block-missing
   ph-front-block-misc
   ph-front-block-join
   ph-front-block-footer1
   ph-front-block-footer2
***********************************/

/* alerts */
body.front .alert-success {
  position: absolute;
  z-index: 1000;
  width: 95%;
}

body.front {
  background-color: var(--ph-color-background-front);
  font-size: 20px;
}
/* Block - Sub Nav - row just beneath main menu */
section.ph-front-block-subnav {
  background-color: var(--ph-color-blue-shade03);
  background-image: linear-gradient(to right, var(--ph-color-blue-shade02), var(--ph-color-blue-shade03));
  height: 79px;
}
/* button1 & button2 show/hide at different viewport sizes */
div#bs-ph-front-nav-button1 p {
  margin: 0;
  float: right;
}
div#bs-ph-front-nav-button2 p {
  margin-top: 20px;
}
div#bs-ph-front-nav-button1 p {
  margin-top: 15px;
}

/* Block - Hero - PetHub Critters in wide blue row */
section.ph-front-block-hero {
  border-top-style: solid;
  border-top-width: 2px;
  border-color: #3CB7C3;
}
section.ph-front-block-hero h1 {
  text-align: center;
  display: inline-block;
  /* force refresh of CSS */
}

/* Video is rendering the wrong background color so we strayed from blue-primary until we figure this out */
div#bs-ph-hero-block {
  background-color: #33b3b5; /* var(--ph-color-blue-primary); */
  color: white;
  margin-bottom: 0;
  padding-bottom: 0;
  border-radius: 0;
}
video#bs-ph-hero-thoughts {
}

section.ph-front-block-hero h1 {
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

section.ph-front-block-hero h1,
section.ph-front-block-connection h1,
section.ph-front-block-missing h1,
section.ph-front-block-join h1{
  font-size: 38px;
  line-height: 44px;
  margin: 0 3%;
  padding: 3% 0;
}

div#bs-ph-hero-block img {
  width: 68%;
  position: relative;
  top: 32px;
  z-index: 1;
}
/* Block - Community - 2-col panels beneath Hero block */
.ph-front-block-community div#bs-ph-panel-1,
.ph-front-block-community div#bs-ph-panel-2 {
  border-style: hidden;
  box-shadow: unset;
  -webkit-box-shadow: unset;
  background: transparent;
  margin-top: 15px;
}
.ph-front-block-community div#bs-ph-panel-1 .panel-body,
.ph-front-block-community div#bs-ph-panel-2 .panel-body {
  background: var(--ph-color-green);
  border-radius: 20px;
  /* padding: 30px; */
  /* settings to keep them at the same height: */
  height: 100%;
  padding: 20px 20px 10px;
}
.ph-front-block-community div#bs-ph-panel-2 .panel-body {
  background: #CEDD75;
}

/* Block - Parent's Connection - 3-col, 2-row list of benefits */
.ph-front-block-connection img.bs-ph-front-img {
  width: 180px;
}

/** Panel styling for next two blocks **/
section.ph-front-block-missing .panel,
section.ph-front-block-misc .panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #FAFAFA;
  border-radius: 20px;
  -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: 1px 1px 25px rgb(0 0 0 / 5%);
}

/** Block - Missing Pet L&F - 2-col with form **/
section.ph-front-block-missing {
  background-color: var(--ph-color-blue-shade01);
  background-image: linear-gradient(var(--ph-color-background-front) , var(--ph-color-blue-shade01));
}
div.front-lf {
  height: 100%;
  padding: 20px 20px 10px;
}
  /* note: "I found a Pet" form CSS is in module ph_front/css/ph_front.css */

/** Block - Miscellaneous - 3-col of whatever **/
section.ph-front-block-misc {
  background-color: var(--ph-color-blue-shade01);
}

/* panels - images */
section.ph-front-block-misc img {
  height: 200px;
  margin-top: 20px;
}

/** Block - Join Community - 3-col Join w/ cat & dog **/
section.ph-front-block-join {
  background-color: var(--ph-color-background-front);
  background-image: linear-gradient(var(--ph-color-blue-shade01), var(--ph-color-background-front));
  margin-bottom: 20px;
}

/** Block - Footer 1 - Logo, Menu and Email sign-up **/
section.ph-front-block-footer1 {
  background-color: var(--ph-color-blue-primary);
  color: var(--ph-color-blue-shade01);
  padding: 45px 0;
}
section.ph-front-block-footer1 h3 {
  font-size: 15px;
}
section.ph-front-block-footer1 input#bs-ph-footer-email {
  width: 300px;
}
section.ph-front-block-footer1 .ph-vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}
section.ph-front-block-footer1 button.btn.btn-default {
  background-color: var(--ph-color-orange);
  color: white;
  font-weight: bold;
}
div#ph-footer-menu-items a {
  color: var(--ph-color-blue-shade01);
}

/** Block - Footer 2 - Copyright Info **/
section.ph-front-block-footer2 {
  background-color: var(--ph-color-blue-shade04);
  color: var(--ph-color-blue-shade01);
  border-radius: 0;
  padding: 45px 0;
}

/**** /ph_login css ****/
div.pane-user-login h2.pane-title {
  display: none;
}
body.page-ph-login div#fb-or {
  font-size: 15px;
  font-weight: bold;
}
body.page-ph-login img#fb-button,
body.page-ph-login img#google-button {
  width: 250px;
}
div#edit-facebook-login {
  margin-bottom: 0;
}

/****** Media Modifications for Viewport Size ******/

/*** Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  section.ph-front-block-hero h1,
  section.ph-front-block-connection h1,
  section.ph-front-block-missing h1 {
    font-size: 68px;
    line-height: 68px;
  }
  div#bs-ph-front-cat img {
    width: 100px;
    position: relative;
    top: 55px;
  }
  div#bs-ph-front-dog img {
    width: 140px;
  }
  div#ph-footer-menu-items {
    text-align: left;
  }
}

/*** Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* found a pet form on front page */
  div.form-item-found-a-pet-id input#basic-url {
    width: 88px;
  }

  /* support for same-sized columns as in bs-ph-panel-1 & -2 below */
  .row-flex {
    display: flex;
    flex-wrap: wrap;
  }
  /* "Our Community" 2-col */
  .ph-front-block-community div#bs-ph-panel-1 .panel-body,
  .ph-front-block-community div#bs-ph-panel-2 .panel-body {
    position: relative;
    top: -15px;
/*    height: 400px; */
  }
  .ph-front-block-community div#bs-ph-panel-1,
  .ph-front-block-community div#bs-ph-panel-2 {
    margin-top: unset;
  }

  div#front-lf-row {
    margin-bottom: 20px;
  }
  .ph-front-block-missing div.panel-body {
    /* min-height: 325px; */
  }
}

/*** Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  section.ph-front-block-join h1 {
    font-size: 72px;
    line-height: 76px;
  }
  /* "Our Community" 2-col */
  .ph-front-block-community div#bs-ph-panel-1 .panel-body,
  .ph-front-block-community div#bs-ph-panel-2 .panel-body {
    /* height: 350px; */
  }
}