/* Override Bootstrap 5 scrolling behaviour defaults to control scrolling speed on mobile in conjunction with customized JavaScript in html*/
html {
  scroll-behavior: auto !important;
}

body {
  padding-top: 4rem;
  font-family: 'Nunito Sans', sans-serif;
}

p {
  font-size: 1.1rem; /* Bumps default size from 1 rem */
  line-height: 1.6;   /* Gives clean breathing room for larger text */
}

/* Proper Commenting to Help in Future Support to be done */

/** Start of links Custom CSS Default **/

a,
a:visited {
  color: #6cace4 !important; /* This !important helps to override Bootstrap 5 default font-weight and color. This wasn't required in Bootstrap 4. */
}
a:hover,
a:focus,
a:active {
  color: #c5e86c !important;
}

.active a,
.active.dropdown a{
  color: #c5e86c !important;
}

/** End of links Custom CSS Default **/

/** Start of Button Custom CSS Default **/

.btn,
.btn:visited,
.btn:focus {
  color: #ffffff !important;
  background-color: #6cace4 !important;
  border-color: #6cace4 !important;
  box-shadow: none;
}
.btn:hover,
.btn:active {
  color: #ffffff !important;
  background-color: #c5e86c !important;
  border-color: #c5e86c !important;
  box-shadow: none;
}

/** End of Button Custom CSS Default **/

/** Start of Navigation Custom CSS **/

.firstnavbar {
  background-color: rgba(108, 172, 228, 0.8);
  min-height: 2.5rem;
}
.firstnavbar .icon-phone {
  margin: auto 0 auto 1.5rem;
  padding-right: 0;
  font-size: 1.4rem;
}
.firstnavbar a {
  padding-left: 0.5rem;
}
.firstnavbar a, p{
  color: #ffffff;
  font-weight: normal;
}
.firstnavbar p {
  margin-bottom: auto;
}
.secondnavbar {
  font-size: 1.1rem;
  background-color: #ffffff;
}
.secondnavbar a{
  margin-right: 2rem;
  font-weight: bold !important;
}

nav.outernavbar {
  box-shadow: 0 0.12rem 0.5rem 0 rgba(0, 0, 0, 0.4);
}


/** CSS to have navbar collapse on scroll. And need native javascript also added to html. **/
.navbar-logo {
  height: 5.4rem; /* Set your starting logo height here */
  transition: height 0.3s ease-in-out; /* Makes the shrinking look smooth */
}
#mainnavheader.scrolled .navbar-logo {
  height: 4rem; /* Set your smaller scrolled logo height here */
}

/** CSS to have section fade-in when scroll to it. Add .fade-in-section class to section that is to be faded in. Written for me by Google Gemini. **/

/* This makes sure outernavbar is on top of the faded-in section so you can still click on it. Otherwise once it is faded-in sometimes you can't access the outernavbar. */
.outernavbar {
  position: fixed; /* Keeps outernavbar at the top */
  top: 0;          /* Aligns it to the absolute top */
  z-index: 9999;   /* Forces it above all animated content */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-section {
  animation: fadeIn ease-out both;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

/** End of Navigation Custom CSS **/

/** Start of Dropdown Menu Custom CSS **/

a.dropdown-toggle,
a.dropdown-toggle:visited,
a.dropdown-item,
a.dropdown-item:visited {
  color: #6cace4;
  font-weight: bold !important;
}

a.dropdown-toggle:hover,
a.dropdown-toggle:focus,
a.dropdown-toggle:active,
a.dropdown-item:hover,
a.dropdown-item:focus,
a.dropdown-item:active {
  color: #c5e86c;
}
a.dropdown-item:hover {
  background-color: #ffffff;
}

/** End of Dropdown Menu Custom CSS **/

/** Start of Sliding Navigation Underline **/

.slidingul{
    display: inline-block;
    position: relative;
    padding-bottom: 0.25rem;
}
.slidingul:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.15rem;
    width: 0;
}
.slidingul:after {
    content: '';
    display: block;
    position: absolute;
    left: 0; /** change this to right: 0; to have line leave to the right **/
    bottom: 0;
    height: 0.15rem;
    width: 0;
    background: #c5e86c;
    transition: width .3s ease;
}
.slidingul:hover:before {
    width: 100%;
    background: #c5e86c;
    transition: width .3s ease;
}
.slidingul:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

/** End of Sliding Navigation Underline **/

/** Start of Hamburger Menu Custom CSS **/

.secondnavbar .navbar-toggler, .navbar-toggler:visited  {
  border-color: #6cace4;
  border-width: 0.2rem;
  outline:none;
  box-shadow: none; /* Removes Bootstrap 5 default focus shadow */
}
.secondnavbar .navbar-toggler:hover, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler:focus-visible {   
  border-color: #c5e86c;
  border-width: 0.2rem;
  outline:none;
  box-shadow: none; /* Ensures no shadow shows on click */
}

/* KEYBOARD ONLY ACCESSIBILITY RESCUE. Written for me by Google Gemini. */
/* This overrides the styles above ONLY when a keyboard user tabs to the element */
.secondnavbar .navbar-toggler:focus-visible {
  outline: 3px solid #000000; /* High contrast black ring */
  outline-offset: 3px; /* Pushes the ring slightly outside your custom border */
  box-shadow: 0 0 0 5px #ffffff; /* White background bridge to ensure contrast against dark themes */
  border-color: #c5e86c;
}

/** End of Hamburger Menu Custom CSS **/

/** Start of Jumbotron Custom CSS **/

.jumbotron {
  padding-top: 16rem;
  padding-bottom: 11rem;
}
.jumbotron {
  background-image: url("../img/vancflower1faded.jpg");
  background-size: cover;
}
.jumbotron .display-4 {
  color: #ffffff;
  text-shadow: 2px 2px #000000;
}
.jumbotron .lead {
  font-size: 2rem;
  text-shadow: 1.5px 1.5px #000000;
}

/** End of Jumbotron Custom CSS **/

/** Start of Optometry Services Custom CSS **/

.maincontent {
  padding-top: 6rem;
  padding-bottom: 5rem;
}
.maincontentheading {
  padding-bottom: 2rem;
}
.card {
  border: 1px #ffffff;
  padding-bottom: 2rem; /* Determines space below and therefore between cards when vertical column */
}

/* Note: It seems to have iconcircles same size then font-size + 2x padding should be equal */
.iconcircle {
    background-color: #6cace4;
    color: #ffffff;
    padding: 1rem;
    font-size: 5.1em;
    border-radius: 50%;
    margin-bottom: 1.5rem;
}
.icon-heart {
  font-size: 3.5rem;
  padding: 1.8rem;
}
.icon-eye {
  font-size: 4.3rem;
  padding: 1.4rem;
}
.icon2-eyeglasses {
  padding: 1rem;
}

/** End of Optometry Services Custom CSS **/

/** Start of About Your Optometrist on Home Page Custom CSS **/

.content02 {
  padding-top: 7rem;
  padding-bottom: 5rem;
  background-color: rgba(108, 172, 228, 0.1);
}
.content02 h1, h2 {
  text-align: center;
}
.content02 h1 {
  padding-bottom: 1rem;
}

/** End of About Your Optometrist on Home Page Custom CSS **/

/** Start of About Us Custom CSS **/

.content03 {
  padding-top: 7rem;
  padding-bottom: 5rem;
}
.content03 h1, h2 {
  text-align: center;
}
.content03 h1 {
  padding-bottom: 1rem;
}

/** End of About Us Custom CSS **/

/** Start of Footer Custom CSS **/

/** Note not all font-weights supported by all fonts and so it gets rounded to the closest available **/

#footerbottom p, #footerbottom a {
  color: rgb(128, 128, 128);
  font-size: 1rem;
  font-weight: 400;
}

#footerbottom a:hover, #footerbottom a:focus {
  color: rgb(255, 146, 20);
}

/** End of Footer Custom CSS **/