body {
   font-size: 100%;
   font-family: arial;
   margin: 0;
}

h1 {
   font-family: Arial;
   font-size: 32px;
   margin: 5px auto 10px 25px; /* top .. right .. bottom .. left */
   color: #cc5002;
}
h2 {
   font-family: Arial;
   margin: 5px auto 0 27px; /* top .. right .. bottom .. left */
   color: #000293;
}

/* ----------------------------------------------------- */

/* width commented in: navbar_top_fixed.css... because it's controlled here */
#navbar_top_inner	{
   width: 95%;
}

/* ----------------------------------------------------- */

#gtm_logo {
   width: 95%;
   margin: 7px auto 10px auto; /* top .. right .. bottom .. left */
   /* border: 1px solid green; */
}

/* ----------------------------------------------------- */

ol.breadcrumb
{
   width: 95%;

   padding: 10px 16px;
   list-style: none;
   background-color: #eee;
   border: 1px solid green;
   margin: 2px auto 2px auto; /* top .. right .. bottom .. left */
}
ol.breadcrumb li {
   display: inline;
}
ol.breadcrumb li+li:before {
   padding: 8px;
   color: black;
   content: "\00BB"; /* ">>" character ... (Link 1 ... from above) https://www.w3schools.com/cssref/css_entities.asp */
}
ol.breadcrumb li a {
   color: #0275d8;
   text-decoration: none;
}
ol.breadcrumb li a:hover {
   color: #F29445;
   text-decoration: underline;
}
ol.breadcrumb li.fixed_text {
   color: #74730E;
}

/* ----------------------------------------------------- */

/* this is used multiple times down the page */
.page_description_content {
   width: 95%;
   margin: 0 auto 0 auto; /* top .. right .. bottom .. left */
   border: 1px solid green;
   padding: 7px 5px 5px 5px;
}

/* ----------------------------------------------------- */

#nav_block {
   padding-top: 50px;
   border: 1px solid green;
}
.nav_link {
   font-size: 18px;
   margin-bottom: 35px;
}

/* ----------------------------------------------------- */

.grid-container {
   position: relative;
   width: 95%;
   margin: 0 auto;
   display: grid;

   /* grid-template-columns: auto; */ /* Make the grid smaller than the container */
   grid-template-columns: 1fr 1fr;
   justify-content: space-evenly; /* THIS! is most likely ineffective when using "fr" instead of "auto" */
                        /* see homepage ... where you're having to use "auto" to be able to use: "justify-content" */
   grid-gap: 10px;
   background-color: #d2e2ef;
   padding: 10px;
}
.grid-container > div {
   text-align: center;
   padding: 20px 10px;
   font-size: 1em;
   border: 1px solid red;
   transition: 0.1s;
   background-color: rgba(255, 255, 255, 0.8);
}
.grid-container img{
   /* padding: 5%; */ /* unwantedly pushes image downwards for this user guide page */
   /* Stops image making parent DIV larger ... becomes effective only when natural image size is larger than calculated via CSS */
   max-width: 100%;
   /* border: 1px solid green; */
}
figure.figures_pos1 {
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
   /* border: 1px solid rgb(23, 197, 197); */
}
figcaption.figures_pos1 {
   font-size: 18px;
   width: 100%;
   margin-bottom: 12px;
   /* border: 1px solid rgb(255, 217, 0); */
}
.image_location {
   max-height: 670px;
}

/* ----------------------------------------------------- */

/* figure has a default margin, so if you don't specify one, it'll still have one */
figure.other_figures {
   margin: 0 17px 20px 17px; /* top .. right .. bottom .. left */
   padding: 2px 7px 2px 7px;
   /* border: 1px solid, rgb(33, 213, 237); */
}
figcaption.other_figures {
   font-size: 0.95em;
   text-align: center;
   font-style: italic;
   color: #555;
   margin-top: 8px;
   margin-bottom: 10px;
}
#parallel_wiring_div1 {
   font-size: 17px;
   line-height: 150%;
   font-family: arial;
   margin-top: 9px;
   padding: 5px 15px 2px 15px; /* top .. right .. bottom .. left */
   /* border: 1px solid blue; */
}
/* there's also object-fit: https://www.w3schools.com/css/css3_object-fit.asp */
.figure_body_container {
   display: flex;
   flex-wrap: wrap;
   column-gap: 20px;
   padding: 5px;
   /* border: 1px dashed, rgb(0, 160, 192); */
}
.figure_body_container > div { /* selecting all direct child divisions */
   width: 500px; /* the width at which flex wrap occurs */
   flex-grow: 1;
   /* border: 2px dashed, rgb(192, 0, 173); */
}
.image_div_parent { /* selecting just the first child division */
   text-align: center;
   /* border: 1px solid, rgb(64, 0, 212); */
}
.figure_image_title {
   font-family: Arial;
   font-size: 19px;
   font-weight: bold;
   color: #006786;
   margin-bottom: 7px;
   /* border: 1px solid, rgb(64, 0, 212); */
}
.image_div {
   display: flex;
   align-items: center; /* keeps the image at the centre of the height of its division */
   justify-content: center; /* keeps image at centre horizontally */
   /* border: 1px dashed, rgb(22, 192, 0); */
}
.figure_body_container img { /* select any <img> element that is any descendant (not just direct child) */
   max-width: 100%;
   cursor: zoom-in;
   object-fit: scale-down; /* resize to fit inside containing division but don't become larger than the image's intrinsic size... comes into play when clicking an image to zoom via JS zoom and image is smaller than browser's (not monitor don't forget) size https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
}

/* ----------------------------------------------------- */

.text_block {
   font-size: 17px;
   line-height: 150%;
   font-family: arial;

   margin-top: 10px;
   padding: 5px 15px 5px 15px; /* top .. right .. bottom .. left */
    /* border: 1px solid blue; */
}
p {
   margin: 0;
   margin-bottom: 10px;
}
.text_block p:first-of-type {
   margin-top: 10px;
}
.text_block p:last-of-type {
   margin-bottom: 0;
}


/* these two properties are useful, but aren't being used because the lists aren't inside text_block(s) */
/* use this for whenever you want the bullet a different colour to the text*/
.text_block li {
   color: #CE7403;
   line-height: 1.75; /* list-style: none; */ /* gets rid of bullet points */
}
.text_block li span {
   color: black;
}

/* ----------------------------------------------------- */

.figure_text {
   font-family: Arial;
   padding-left: 15px;
   padding-right: 25px;
   margin-top: 50px; /* Desired spacing BEFORE wrap */
   /* border: 1px solid, rgb(64, 0, 212); */
}
/* See JS function "detectWrapForPairs()" */
.figure_text.wrapped {
   margin-top: 0; /* Remove spacing AFTER wrap */
}
.figure_text p {
   margin-top: 5px;
   line-height: 135%;
}
.figure_text_parallel_wiring {
   font-family: Arial;
   padding-left: 15px;
   padding-right: 25px;
}
.figure_text_parallel_wiring p {
   margin-top: 5px;
   line-height: 135%;
}
/* from ChatGPT */
ul.parallel_wiring_points {
  list-style: none;       /* Remove bullets */
  padding-left: 0;        /* Remove default left padding */
  margin: 0;              /* Adjust spacing if needed */
}
ul.parallel_wiring_points li {
  margin-bottom: 1em;     /* Space between items */
}
ul.parallel_wiring_points li strong {
  display: block;
  font-family: Arial;
  font-size: 1.17em;      /* default h3 size */
  font-weight: bold;
  margin-left: 15px;
  margin-bottom: 5px;
  margin-top: 20px;
  color: rgb(2, 94, 2);
}

/* ----------------------------------------------------- */

figure.mounting_options {
   padding: 0;
   margin: 0;
   /* border: 1px dashed orange; */
}
figcaption.mounting_options {
   font-size: 0.95em;
   text-align: center;
   font-style: italic;
   color: #555;
   margin-top: 8px;
   margin-bottom: 20px;
}
#mounting_options_div {
   font-size: 17px;
   font-family: arial;
   line-height: 150%;
   margin-right: 2px;
   padding: 5px 15px 5px 15px; /* top .. right .. bottom .. left */
   /* border: 1px dashed rgb(1, 1, 234); */
}
#mounting_options_div ol {
   font-size: 19px;
}
.content_flex {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 7px;
   padding: 5px;
   /* border: 1px solid orange; */
}
.content_flex > div {
   width: 550px;  /* stops the text blocks to the left using up more than 50% the width and therefore making the images smaller */
   flex-grow: 1;
}
#figure_mounting_title {
   font-family: Arial;
   font-weight: bold;
   font-style: italic;
   font-size: 1.17em;
   margin-left: 15px;
   margin-bottom: 5px;
   color: rgb(2, 94, 2);
}
#mounting_box {
   margin-top: 15px;
   border: 1px dashed orange;
}
#div_mounting_image {
   margin-top: 10px;
}

/* ----------------------------------------------------- */

.figure_text ul {
   margin-left: 0;
   padding: 0;
   /* border: 2px dashed rgb(199, 173, 0); */
}
.figure_text li {
   padding: 0;
   margin: 0;
   margin-bottom: 15px;
   color: #000000;
   line-height: 1.6;  /* list-style: none; */ /* gets rid of bullet points */
   /* border: 1px solid rgb(88, 8, 8); */
}
/* this is for when the viewport is narrow enough that figure_text has wrapped onto the next line, and so this reduces the vertical gap that exists before the figcaption appears */
.figure_text li:last-child {
   margin-bottom: 0;
}
.figure_text li span {
   color: black;
}

/* ----------------------------------------------------- */

@media only screen and (min-width: 600px) {
   .grid-container_mobile {
      grid-template-columns: 1fr 1fr 1fr;
   }
}
@media only screen and (min-width: 1600px) {
   .grid-container_mobile {
      width: 70%;
   }
}
/* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
@media only screen and (min-width: 1600px) {

   /* #gtm_logo, #product_cat_block, #navbar_top_inner, .page_description_content, #footer_inner */
   #gtm_logo, #navbar_top_inner, .page_description_content, #footer_inner, ol.breadcrumb {

      /* 2025 July: I'm pretty sure that neither "#product_cat_block" Nor "navbar_product_cat.css" exist anymore */
      /* ------------------------------------------------------------------------------------------------------- */
      /* .product_cat_block... is in: navbar_product_cat.css... which is set to different width for: product_detail_page.css */
      width: 70%;

      /* 2025 July: Use browser inspect, Elements as ChatGPT suggests, CTRL F to search for CSS properties */
      /* And by doing that you now know for sure that "#product_cat_block" no longer exists */
   }
}