/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* Google fonts: Open Sans & Montserrat */

@import url("https://fonts.googleapis.com/css?family=Montserrat:400|Open+Sans&display:400,600=swap");

/* Site-wide */

body {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  margin: 0;

  /* These settings are used to position the footer at the bottom of the page where there is insufficient 
  *  content to naturally position it there (About, Pricing, Signup) */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

  /* This changes the size size and inline position of text below page headers */
 .page-text p {
    margin-bottom: 1.5rem;
}

/* This code from Dare to Think overrides iOS styling on buttons and more, specifically the call to action ("Purchase") on the hero image
*  Source: https://www.daretothink.co.uk/stop-ios-styling-your-input-fields-and-buttons/ */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
  -webkit-appearance: none;
  border-radius: 0;
}

/* These settings are used to position the footer at the bottom of the page where there is insufficient 
*  content to naturally position it there (About, Pricing, Signup) */
.inner-page-contents {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.uppercase {
  text-transform: uppercase;
}

/* Navbar */

nav {
  font-family: "Open Sans", sans-serif;
}

.navbar {
  margin-bottom: 0;
  width: 100%;
  background-color: #39c;
  opacity: 1;
  position: fixed;
  z-index: 1;
  left: 0;
}

/* Navbar - "Penny for your Thoughts" */
.navbar-brand {
  font-size: 1rem;
  letter-spacing: 0.0625rem;
  color: #fff;
  margin-right: 0;
}

/* Navbar - items */
.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

/* Navbar - items hover & active */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .active > .nav-link {
  color: #036;
  font-weight: 600;
}

/* Navbar - dropdown hover */
.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #39c;
}

/* Headings - applies to headings of all pages for consistent typography and spacing. 
*  These have been given separate ids to give options for unique styling */

.page-heading {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 1.875rem;
  letter-spacing: 0.25rem;
  padding-bottom: 0.625rem;
  /* Linear gradient as background to mimic horizonal rule.
  *  Percentages refer to point on the block (the size of which can in turn by determined by background-size) at which the color starts
  *  i.e. 0% is where block begins, 50% half way across block etc, 100% is where block ends */
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, #fff), color-stop(50%, #c90), color-stop(75%, #fff)) left
    bottom #fff no-repeat;
  background: -o-linear-gradient(left, #fff 25%, #c90 50%, #fff 75%) left
    bottom #fff no-repeat;
  background: linear-gradient(to right, #fff 25%, #c90 50%, #fff 75%) left
    bottom #fff no-repeat;
  background-size: 100% 0.125rem;
}

/* Headings - gallery section headings */
.heading-gallery-category {
  font-weight: 400;
  padding-top: 2.5rem;
  letter-spacing: 0.0625rem;
  font-size: 1.75rem;
  text-transform: uppercase;
  margin-bottom: 0;
  color: #366;
  text-align: center;
}

/* Hero image */

#callout {
  height: 100vh;
  width: auto;
  background: url("../../assets/images/trees/lg-winter-woods.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  border-bottom: solid;
  border-bottom-width: 1px;
  border-bottom-color: #036;
}

/* Jumbotron - main title "Penny for your Thoughts and subheading */

#callout-contents {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  width: 100%;
  background-color: transparent;
  text-align: center;
  color: #fff;
  margin: 0;
}

/* Intro */

/* Three text blocks below Hero image */
.intro-title {
  padding: 1.25rem 0;
  letter-spacing: 0.0625rem;
  text-align: center;
  font-size: 1.5rem;
  color: #3399cc;
}

.intro-text {
  padding: 0 0.625rem;
  text-align: center;
  font-size: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

/* Container for the circular images below Hero image - reduced width prevents overflow caused by hvr.grow effect */
#intro-gallery {
  width: 91%;
  font-family: "Open Sans", sans-serif;
}

/* Circular images below Hero image */

/* <a> element targeted here in order to create a clickable area which matches the desired shape of the image contained within */
.intro-gallery-image a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1.25rem auto;
  height: 150px;
  width: 150px;
  border-radius: 50%;
}

.intro-gallery-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  -webkit-box-shadow: 0 5px 8px #036;
  box-shadow: 0 5px 8px #036;
}

/* Text inside circular images below Hero image. Works with hvr.grow effect */
.intro-gallery-image p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  max-width: 150px;
  z-index: 2;
}

/* Footer */

footer {
  margin-top: 5rem;
  border: 0;
  border-style: solid;
  border-color: transparent;
  border-top-color: #036;
  background-color: #c90;
}

/* Social media container */
#sm-links-container {
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#sm-links-container ul {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Social media icons and copyright styling */
#sm-links-container i,
#copyright-container p {
  color: #fff;
  display: inline-block;
  /* Line height is used to vertically center the social media icons within the block */
  line-height: 1.6875rem;
}

/* Social media icon hover styling */
#sm-links-container a:hover,
#sm-links-container i:hover {
  color: #960;
  text-decoration: none;
}

/* Social media icon margins - this has responsive media queries for larger displays. 
*  NB adding padding here will increase the 'clickable' area of links */
.sm-links {
  margin: 0 1rem;
}

/* 'Grow' hover effect from Ian Lunn can be applied to most blocks to provide subtle visual feedback.
*  Currently only applied to intro gallery images in index.html. Also affects the absolutely positioned text 
*  within the image, but there is some visual distortion */

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

/* About */

#about-me-text {
    text-align: center;
}

/* About image */
#about-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* This top margin is removed in media query to prevent unwanted spacing where two columns present on larger displays */
  margin-top: 2.5rem;
}

/* About image - Media query restricts the dimensions of the image to its container on larger displays;
*  NB should be applied to <a> class if wanting to make the picture a clickable link.*/
#about-image img {
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 8px #036;
  box-shadow: 0 5px 8px #036;
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Pricing */

.table-container {
  padding: 1.25rem 0.9375rem;
  font-family: "Open Sans", sans-serif;
    -webkit-box-shadow: 0 5px 8px #036;
  box-shadow: 0 5px 8px #036;
  border-radius: 5px;
}

/* Fixed layout keeps the column widths identical on both tables so that in single column display they are aligned on the page */
table {
  text-align: center;
  table-layout: fixed;
}

/* Table border styling - separating top and bottom borders across two rules allows for a minimalist display and greater 
*  precision across the tables' rows  */
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px;
  border-bottom-style: solid;
  border-bottom-color: #0033668e;
}

.table td,
.table th {
  border-top: 1px;
  border-top-style: solid;
  border-top-color: #9966008a;
}

/* Appears below tables as "Postage not included" and is otherwise not styled */
table caption {
  text-align: right;
}

/* Gallery */

/* Gallery image container */
.pic {
  padding: 0;
}

/* Gallery image - set height on larger displays to preserve consistency and absolute positioning of 'Add' pic button
*  Media query changes height to 100% for smaller displays to prevent a narrow image and provide full aspect ratio */
.pic img {
  height: 200px;
  -o-object-fit: cover;
  object-fit: cover;
  margin-top: 1.25rem;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 8px #036;
  box-shadow: 0 5px 8px #036;
}

/* 'Add' button on gallery images, which has been incrementally changed to provide best absolute positioning. 
*  This will break if image dimensions are not fixed  */
.pic button {
  position: absolute;
  top: 95%;
  left: 87%;
  -webkit-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
  -ms-transform: translate(-90%, -100%);
  opacity: 1;
  background-color: #39c;
  color: #fff;
}

/* Hover styling for Gallery 'Add' buttons */
.pic button:hover {
  background-color: #036;
  color: #fff;
}

/* Sign Up */

.form-group label {
  font-family: "Open Sans", sans-serif;
}

.sign-up-button-container {
    margin-top: 3rem;
}

#signup-form button {
  background-color: #39c;
  color: #fff;
}

#signup-form button:hover {
  background-color: #036;
  color: #fff;
}

/* Media */

/* Increases the font size of the navbar brand on larger displays */
@media screen and (min-width: 370px) {
  .navbar-brand {
    font-size: 1.1rem;
    margin-right: 1rem;
  }
}

/* Adds ability to scroll navbar dropdown items on mobile devices where they would be hidden/inaccessible */
@media screen and (max-width: 767px) and (max-height: 475px) {
  .dropdown-menu {
    height: 115px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

/* Alters the height of gallery images to prevent them becoming stretched on mobile devices when displayed one per row */
@media screen and (max-width: 575px) {
  .pic img {
    height: 100%;
  }
}

@media screen and (min-width: 768px) {
  /* Increases the size of callout-contents on larger displays */
  #callout-contents h1 {
    font-size: 3.5rem;
  }
  #callout-contents p {
    font-size: 1.5rem;
  }

  /* Increase the font-size of headings and text on larger displays */
  .intro-title {
    font-size: 2rem;
  }
  .intro-text {
  font-size: 1.25rem;
  }
  .page-heading {
  font-size: 2.5rem;
  }
 .page-text p {
    margin-bottom: 2rem;
    font-size: 1.25rem;
}

  /* Increases the external padding and reduces the horizontal padding of tables on larger displays  */
  .table td,
  .table th {
    padding: 0.75rem 0.17rem;
  }
  .table-container {
    padding: 1.25rem 0.5rem;
  }

  /* Centers the sign-up button for ease of clicking when form is not inline */
  .sign-up-button-container {
    text-align: center;
  }

}

@media screen and (min-width: 992px) {
  /* Increases the margin of social media link icons on larger displays */
  .sm-links {
    margin: 0 2rem;
  }

  /* Sets a minimum intro-title height to prevent uneven headings when there are three columns */
  .intro-title {
    min-height: 136px;
  }

  /* Aligns text left when sharing row with about-image */
  #about-me-text {
    text-align: left;
}

  /* Reduces the margin above the about-image on larger displays and adjusts image to fit container */
  #about-image {
    margin-top: 0;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }

  #about-image img {
    max-height: 100%;
    max-width: 100%;
  }

  /* Increases the external padding and reduces the horizontal padding of tables on larger displays  */
  .table td,
  .table th {
    padding: 0.75rem;
  }
  .table-container {
    padding: 1.25rem 2.5rem;
  }
}

/* Allows the hero image to be displayed on mobile devices (iOS), however it will appear as a static image 
*  and will not 'reveal' itself when scrolling down the page */
@media screen and (max-width: 1024px) {
  #callout {
    background-attachment: scroll;
  }
}

/* Increases padding on intro titles to preserve spacing on larger displays */
@media screen and (min-width: 1189px) {
  .intro-title {
    padding: 1.25rem 3.125rem;
  }
  .intro-text {
    padding: 1rem 3.125rem;
  }
}

@media screen and (min-width: 1200px) {
  /* Increases the margin of social media link icons on larger displays */
  .sm-links {
    margin: 0 3rem;
  }

  /* Increases the external padding around tables and reduces width for spacing and to prevent "Size" spilling into a new row */
  .table-container {
    padding: 1.25rem 5rem;
    width: 98%;
  }
}