/* Root variables for theme colors and typography */
:root {
  --primary-color: #8a9848;      /* Olive green for primary accents */
  --secondary-color: #717d9f;    /* Neutral blue-grey for borders and UI chrome */
  --accent-color: #cd641e;       /* Warm accent color for call‑to‑action text */
  --background-color: #ffffff;   /* Base page background */
  --light-background: #f7f7f7;   /* Secondary light background for panels */
  --text-color: #434343;         /* Default text color */
  --heading-color: #2c2c2c;      /* Darker headings */
  --footer-background: #333333;  /* Footer background */
  --footer-text: #ffffff;        /* Footer text */

  --max-width: 1200px;
  --content-gap: 2rem;
}

/* Global reset and base styling */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--text-color);
  /* Apply site‑wide background image.  Use a default background colour in case the image fails to load. */
  background: var(--background-color) url('images/olive-construction-bg2.jpg') top center no-repeat;
  background-size: cover;
  line-height: 1.5;
}

/* Use flex column layout on body so the footer stays at the bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Ensure the main content area expands to fill available space */
#Content {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}
a:hover {
  color: var(--accent-color);
}

h1, h2, h3, h4 {
  margin: 0 0 0.5rem;
  color: var(--heading-color);
}

p {
  margin: 0 0 1rem;
}

/* Layout wrappers */
#Header, #Footer, #Content {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Navigation bar holds the project button, central logo and contact button.  The original
   layout from the archived site placed a “Projects” button on the left, a logo in the
   centre and a “Contact” button on the right.  Use flexbox to reproduce this layout. */
#NavBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

/* Individual navigation sections occupy their intrinsic width */
#NavProjects,
#NavContact {
  flex: 0 0 auto;
}

/* Ensure the logo container grows to fill the available space and centres its image. */
#NavBar #Header {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Set consistent heights for navigation images */
#NavProjects img,
#NavContact img {
  height: 48px;
  width: auto;
}

/* Maintain the existing logo sizing inside the header */
#NavBar #Header a img {
  height: 80px;
  width: auto;
}

/* Legacy NavLinks styles are retained for backward compatibility but are unused when using the
   restored original header.  They may still apply in fallback scenarios where icons are
   missing and text links are used instead. */
#NavLinks {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
#NavLinks a img {
  height: 48px;
  width: auto;
}
#NavLinks a {
  font-weight: 600;
  font-size: 1rem;
  color: var(--primary-color);
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  text-decoration: none;
}
#NavLinks a:hover {
  color: var(--accent-color);
}

#Header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}
#Header a img {
  height: 80px;
  width: auto;
}

/* When a logo image is unavailable, display the company name as text */
#Header a {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
}
#Header a:hover {
  color: var(--accent-color);
}

/* Navigation buttons */
#NavProjects, #NavContact {
  flex: 0 0 auto;
}

#NavProjects img, #NavContact img {
  height: 48px;
  width: auto;
}

/* Style text inside home content box */
#homeContentBox p {
  color: var(--footer-text);
}

/* Main content wrapper */
#Content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--content-gap);
  padding: 2rem 1rem;
}

/* Home page specific styling */
#homeSlideshow {
  /* Allow three equal slideshows that fill the available space evenly */
  flex: 1 1 calc((100% - 2 * var(--content-gap)) / 3);
  height: 400px;
  overflow: hidden;
  border: 4px solid var(--secondary-color);
  border-radius: 8px;
  background: var(--light-background);
  position: relative;
}

/* Company description box on the home page becomes a full‑width section below the slideshows */
#homeContentBox {
  flex: 1 1 100%;
  max-width: var(--max-width);
  background: var(--primary-color);
  color: var(--footer-text);
  padding: 2rem;
  margin-top: var(--content-gap);
  border-radius: 8px;
  text-align: center;
}
#homeContentBox p {
  color: var(--footer-text);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}

/* General slideshow styling */
.pics, .pics ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.pics li {
  height: 100%;
}
.pics img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Projects page layout */
#ProjectsSlideshow {
  flex: 1 1 60%;
  max-width: 60%;
}

/* Give the hero slideshow on the projects page rounded corners and hide
   overflow so that images don't spill beyond the border. */
#ProjectsSlideshow #slideshow_4 {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
#Projects {
  flex: 1 1 35%;
  max-width: 35%;
  overflow-y: auto;
  background: var(--light-background);
  border: 1px solid var(--secondary-color);
  border-radius: 8px;
  padding: 1.5rem;
  height: auto;
}
#Projects h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--primary-color);
}
#Projects .img {
  margin-bottom: 0.75rem;
}
#Projects .img a {
  display: block;
  padding: 0.3rem 0;
  border-bottom: 1px solid #e5e5e5;
  color: var(--text-color);
  font-weight: 500;
}
#Projects .img a:hover {
  color: var(--primary-color);
}
#flashcontent {
  margin-top: 1.5rem;
  width: 100%;
}

/* Footer styling */
#Footer {
  background: var(--footer-background);
  color: var(--footer-text);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  /* Push the footer to the bottom of the flex column */
  margin-top: auto;
  /* Rounded corners on the footer to soften its appearance */
  border-radius: 8px;
}
#Footer a {
  color: var(--footer-text);
}
#Green {
  color: var(--primary-color);
  font-size: 1.4rem;
}
#SecondLine {
  font-size: 1.2rem;
}
#Phone {
  color: var(--accent-color);
  font-size: 1.3rem;
  display: inline-block;
}
#White {
  font-size: 1.3rem;
  display: inline-block;
  margin-right: 0.5rem;
}
#Social {
  margin-top: 0.5rem;
}
#Social img {
  margin-right: 0.5rem;
}
#Copyright {
  margin-top: 1rem;
  font-size: 0.8rem;
}

/* Contact page content */
#ContentLeft, #ContentRight {
  flex: 1 1 45%;
  max-width: 500px;
}
#ContentLeft img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
#ContentRight {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem;
  background: var(--light-background);
  border: 1px solid var(--secondary-color);
  border-radius: 8px;
  min-height: 300px;
}
#ContentRight h1 {
  margin-top: 0;
  color: var(--primary-color);
}

/* Map container on the contact page.  It will be initialised with Leaflet via
   JavaScript in the footer. */
#map {
  width: 100%;
  height: 350px;
  border-radius: 8px;
  /* Provide a light background in case Leaflet tiles take a moment to load */
  background: #eaeaea;
}

/* Gallery presentation (PikaChoose) */
.pika-stage, .pika-stage img {
  width: 100%;
  height: auto;
}
.pika-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}
.pika-thumbs li {
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--secondary-color);
  border-radius: 4px;
  width: 90px;
  height: 60px;
}
.pika-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pika-stage .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--text-color);
  padding: 0.5rem;
  font-size: 0.8rem;
}

/* Override showtime module nav (prev/next) visibility */
ul[id^="prevnextnav_"] {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
#slideshow_4:hover ul#prevnextnav_4,
#slideshow_1:hover ul#prevnextnav_1,
#slideshow_2:hover ul#prevnextnav_2,
#slideshow_3:hover ul#prevnextnav_3 {
  display: block;
}

/* Adjust anchor outlines */
a:focus {
  outline: none;
}

/* Accreditation badges on contact page */
#BBB, #Angies {
  display: inline-block;
  margin: 1rem;
}
#BBB img, #Angies img {
  height: 80px;
  width: auto;
}

/* Gallery page layout inside the flash content area on the projects page.
 * When a gallery is loaded via AJAX, we want to display the slideshow on the left
 * and the title/description on the right.  The markup of each gallery snippet
 * varies slightly, so these rules target common patterns.
 */
#flashcontent #Content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
/* Left column: the main gallery container (ae-gallery) or the unordered list of images */
#flashcontent #Content .ae-gallery,
#flashcontent #Content ul.pika-thumbs {
  flex: 1 1 60%;
  max-width: 60%;
}
/* Right column: project title, description and any other text */
#flashcontent #Content .PhotosTitle,
#flashcontent #Content #PhotosTitle,
#flashcontent #Content pre,
#flashcontent #Content .gallerycomment {
  flex: 1 1 35%;
  max-width: 35%;
  color: var(--text-color);
}
/* Ensure gallery thumbnails stack vertically on the left */
#flashcontent #Content .ae-gallery ul.pika-thumbs,
#flashcontent #Content ul.pika-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#flashcontent #Content ul.pika-thumbs li {
  list-style: none;
  border: 1px solid var(--secondary-color);
  border-radius: 4px;
  overflow: hidden;
  width: 100px;
  height: 70px;
}
#flashcontent #Content ul.pika-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide the thumbnail strip entirely in the loaded gallery.  The thumbnails are removed via JavaScript, but this
   rule serves as a fallback if any lists remain. */
#flashcontent #Content ul.pika-thumbs {
  display: none !important;
}

/* Pagination controls for the projects list */
#pagination {
  margin-top: 1rem;
  text-align: center;
}
#pagination a {
  margin: 0 0.5rem;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}
#pagination a.active {
  font-weight: 700;
  text-decoration: none;
  color: var(--accent-color);
}

/*
 * Gallery slideshow generated on the projects page after AJAX load.
 * Large images cycle through automatically using jQuery Cycle.  The list of
 * images (.gallery-slides) occupies the left column of the gallery and
 * scales to fill the available width.  Each image fills the container and
 * maintains its aspect ratio.
 */
#flashcontent #Content .gallery-slides {
  /* The gallery slideshow occupies the left column of the loaded gallery. */
  flex: 1 1 60%;
  max-width: 60%;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  /* Constrain the gallery height so it doesn't dominate the page.  Adjust the value as needed. */
  max-height: 450px;
}
#flashcontent #Content .gallery-slides li {
  width: 100%;
}
#flashcontent #Content .gallery-slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Gallery caption overlay.  Captions appear at the bottom of each slide with
   semi‑transparent background and rounded lower corners. */
.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  pointer-events: none;
}

/* Gallery controls: previous/next arrows overlay the slideshow.  Buttons are
   semi‑transparent and become slightly darker on hover.  They are only
   displayed when a gallery is loaded via AJAX. */
.gallery-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.gallery-controls button {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  pointer-events: all;
  border-radius: 4px;
  line-height: 1;
}
.gallery-controls button:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* Overlay for gallery title and description.  This appears at the bottom of
   the slideshow and provides context for the project.  The overlay spans the
   entire width of the slideshow, uses a semi‑transparent dark background and
   rounded lower corners to match the gallery container. */
.gallery-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 0.8rem;
  font-size: 0.9rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 2;
}
.gallery-info h3 {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
}
.gallery-info p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #e5e5e5;
}