/*----------Media Queries (Group Decision)------------------------------------------------------------------------------------*/
/* We utilised media queries to ensure img tags appear as expected on screen sizes 600px or less */
/* This can be used along side bootstrap frameworks */
@media (max-width: 600px) { 

img { 
  height: 150px; /* (James note) On screen sizes 600px or less the image (img tag) height is limited to 150 px */
  object-fit: cover; /* object-fit will stretch the image to fit in the container but 'cover' ensure the image will zoom and crop
  * Parts of the sides will not be vibile in most cases but the image is not distorted, which I think is a fair trade off
  * Instead of 'cover' I could have used 'stretch', it will stretch/expand the image to fit and in most cases look distored
  * I could have aslo used 'contain', but after testing this shrinks the image to fit but leaves very unappealing border spacing on top and bottom
  * 'cover' was the best choice after testing all three as images are of a high quality so even when cropped they look quite good. (end of James note) */ 
  }
}

body {
  font-family: "Raleway", sans-serif; /* https://fonts.google.com/specimen/Raleway?query=raleway */
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  background-color: #F5ECD5; /* Page Background - Ivory */
  color: #626F47; /* Main Headings & Text - Dark Green */
}

.logo-img {
  max-width: 250px; 
  height: auto;     
}

/*--------Button Styling-------------------------------------------------------------------------------------------*/

.btn-success {
  background-color: #F0BB78; /* Golden Peach */
  border-color: #F0BB78;
  color: #fff;
}

.btn-success:hover {
  background-color: #E0A85C; /* Hover */
  border-color: #E0A85C;
}

.btn-secondary {
  background-color: #A4B465; /* Olive Green */
  border-color: #A4B465;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #626F47; /* Dark Green */
  border-color: #626F47;
}

/*------Navigation Bar used on all pages (Group Decision For Design )-------------------------------------------------------*/

.navbar { /* (James note) targets navbar class i.e nav class="navbar" 
* We have used the wrapping component .navbar with .navbar-expand{-lg} which is for responsive collapsing and color scheme classes. (https://getbootstrap.com/docs/5.3/components/navbar/)
* We have choosen -lg (large) as it expands at screens width that is greater than or equal to 992px. 
* Along with navbar-light whihc is dark text on a light background - to ensure good contrast so end user can read/see it well.
* We have choosen this layout as we do not want the navbar to collapse and remain fixed
* getbootstrpa.com -> "Responsive behaviours" -> "For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class." source ref: https://getbootstrap.com/docs/5.3/components/navbar/
(end of James note) */ 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* see #indexpageimages on this page for breakdown of rgba (James Note)*/ 
  /* (James Note) px = pixels. It's a unit of measurment used in css and it depends on the device used by the end-user. E.g the pixels on an Iphone 16 is 2556 x 1179 pixels.
  * (James Note) w3schools -> CSS References -> CSS Units -> Absolute Lengths -> "Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels." (ref: https://www.w3schools.com/cssref/css_units.php) 
  * (James Note) box-shadow: "Adds one or more shadows to an element" (https://www.w3schools.com/css/css3_shadows_box.asp)
  * (James Note) 0 is the horizontal offset: 0 is centered horitontally) , 2px is the vertical offset: the shadow displays downward by 2px , 5px is the blur radius: determines how soft/blurry the shadows edges are, in this case its 5 px, if it was 0 it would be a much sharper shadow.
  */
  background-color: #F5ECD5; /* Ivory */
} 

.navbar-brand {
  font-size: 1.5rem;
  color: #A4B465; /* Olive Green */
}

.navbar .nav {
  margin-top: 10px; /* spacing at top between brand and nav links */
}

.nav-link {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  color: #A4B465; /* Olive Green */
  transition: color 0.3s;
}

.nav-link:hover {
  color: #E0A85C; /* warm golden amber */
}

/*--------Banner that is displayed on all pages (Group Decision For Design - Created During Team Meeting)-------------------*/

.banner {
  position: relative;
  background-image: url("../images/homeImage/julia-zolotova-M_xIaxQE3Ms-unsplash.jpg"); 
  background-size: cover;
  background-position: center;
  padding: 2rem;
  border-radius: 0.5rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
  color: white;
}

.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(98, 111, 71, 0.85); /* (James note) semi-transparent (.85 opacity) dark green overlay
  * 0 is fully transparent and 1 is a block color 
  * rgba= (R=98,G-111,B=71,A=0.85) red,green,blue and A is for opacity */
  border-radius: 0.5rem;
  z-index: 0;
}

.banner * {
  position: relative;
  z-index: 1;
}

.brand-logo {
  max-height: 80px;
  height: auto;
}

/*--------Index/Home page - James Page -------------------------------------------------------------------------------------*/

#indexpageimages .gallery-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #D9D2BE; /* (James note) Borders - Muted Beige */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
  /* (James note) red,green,blue and alpha. alpha is the opacity which ranges from 0 and 1. 
  * e.g if a(alpha) is 0.4 it will appear as transparent. If it was 1 it would be a solid color. 
  * Also the r,g,b (red,green,blue) values range between 0 and 255. 
  * The value r(red) for example: which ranges 0(no red) to 255(very bright saturated red) controls how much red is in the overall color. 
  * The final result is r(red) mixed with g(green) and mixed with b(blue). 
  * Depending on how intense each of the colors are determines the final mixed color from this range. 
  * when all three colors are combined at their maximum intensities (250)the color is white. If all are at their lowest intenisty (0) then the color is black */  
  /* https://www.w3schools.com/colors/colors_picker.asp + https://www.figma.com/resource-library/what-is-rgb/ (end of James note) */ 
}

#indexpageimages .gallery-img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#signupForm {
  background-color: #fff; /* white */
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*--------BMI page - James Page -------------------------------------------------------------------------------------------*/


#bmipageimages  .gallery-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
}

#bmipageimages  .gallery-img:hover {   
  /* 
  * (James note) Targets any element with the class 'gallery-img' that is INSIDE the element with the ID 'bmipageimages'.
  * The styles will ONLY apply when the user hovers over the 'gallery-img' element.
  * The .gallery-img elements are contained in <div class="col-6"> of which is contained within the <div class="col-md-4" id="bmipageimages">. 
  */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.bmiFacts , .bmiCalculator { /* (James note) Targets both div class="bmiFacts" and div class="bmiCalculator" on BMI page */
  max-width: 100%;
  background-color: #fff; 
  /* (James note) I decided to used both rgba and hex colors, you can convert hex to rgb and vice versa. Hex is a more compact format to define a color. 
  * (James note) You can also control the opacity in hex simlar to rgba (a) For example:
  * (James note) I decided to use #f4f4f4 (Very Light shade of grey or rgb = 244, 244, 244) 
  * (James note) You can add an Alpha hex 'BF' to the end = #f4f4f4BF now it will be a light shade of grey with the opacity of 75%. Other ranger include E6 = 90% opacity and 1A = 10% opacity. 
  */
  font-size: 1rem;
  padding: 20px;
  border-left: 5px solid #F0BB78; /* Golden Peach on left border */
  margin: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* soft shadow */
}

.bmiFacts h2 , .bmiCalculator h2 { /* (James note) to demonstrate that it's possible to specifically target the tags */
  margin: 10; /* (James note) No margin required but not sure if I have to include in the format */
  font-size: 2rem; /* (James note) rem is the relative unit of measurment in CSS. Whereas 1rem = 16 px and in this case as its a h2 heading I choosed 2rem = 32px */
  text-align: left;
  word-wrap: break-word;  
  /* (James note) ensures it wraps on small screens by making sure that it breaks up a string onto a new line if it does not fit in the container 
  * (James note) (ref: https://www.w3schools.com/cssref/css3_pr_word-wrap.php)
  */
  font-family: "Raleway", sans-serif; /* https://fonts.google.com/specimen/Raleway?query=raleway */
  font-weight: 800;
  font-style: normal;
  color: #626F47;
}

/*--------Footer that is displayed on all pages (Group Decision For Design - Created During Team Meeting)------------------*/

.footer {
  background-color: #626F47; /* Dark Green */
  color: #F5ECD5; /* Ivory */
  padding: 20px 0;
  margin-top: 50px;
  font-size: 0.9rem;
}

/* --- Custom Team Member Image Styling (About Page) --- */
.team .row .col-md-3 img {
  border-radius: 16px !important; /* Soft corners */
  box-shadow: 0 0 0 6px #0077cc, 0 2px 8px rgba(0,119,204,0.08); /* Blue outer highlight + soft shadow */
  border: 2px solid #0077cc;
  background: #fff;
  transition: box-shadow 0.3s;
}

.team .row .col-md-3 img:hover {
  box-shadow: 0 0 0 10px #3399ff, 0 4px 16px rgba(0,119,204,0.15); /* Brighter blue on hover */
}

/* --- Feedback Form Highlight Box --- */
.form-highlight {
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* --- Feedback Thank You Box Styling --- */
#feedbackMessage {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,119,204,0.08);
  padding: 16px;
  border: 1px solid #eee;
  color: #0077cc;
  font-weight: 500;
  font-size: 1.1em;
  margin-top: 10px;
}

/* --- Healthy Living Quiz Result Box Styling (healthytips.html) --- */
#quizResult {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,119,204,0.08);
  padding: 16px;
  border: 1px solid #eee;
  color: #0077cc;
  font-weight: 500;
  font-size: 1.1em;
  margin-top: 10px;
}

/* --- Custom About Page Styles --- */
.brand-logo {
  max-height: 80px;
}

.banner {
  /* Already styled by Bootstrap and your existing CSS */
}

#bannerLogo {
  width: 300px;
  height: 300px;
  margin-bottom: 5px;
}

.team-card {
  background: #eaf6ff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,119,204,0.08);
  margin-bottom: 1.5rem;
}

.founder-img {
  border-radius: 50%;
  border: 2px solid #0077cc;
  box-shadow: 0 2px 8px rgba(0,119,204,0.08);
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.team-img {
  border-radius: 16px;
  border: 2px solid #0077cc;
  box-shadow: 0 0 0 6px #0077cc, 0 2px 8px rgba(0,119,204,0.08);
  width: 120px;
  height: 120px;
  object-fit: cover;
  background: #fff;
  transition: box-shadow 0.3s;
}

.team-img:hover {
  box-shadow: 0 0 0 10px #3399ff, 0 4px 16px rgba(0,119,204,0.15);
}

/* --- Custom Healthy Tips Page Styles --- */
.brand-logo {
  max-height: 80px;
}

.banner {
  /* Already styled by Bootstrap and your existing CSS */
}

#bannerLogo {
  width: 300px;
  height: 300px;
  margin-bottom: 5px;
}

.quiz-card-bg {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,119,204,0.08);
}

#quizResult {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,119,204,0.08);
  padding: 16px;
  border: 1px solid #eee;
  color: #0077cc;
  font-weight: 500;
  font-size: 1.1em;
  margin-top: 10px;
}