/* -------------------------------------------------------------------
   Empic Contracting LTD Website Stylesheet
   Defines global variables, typography, layout and reusable components.
   Designed for responsiveness and clean design across pages.
------------------------------------------------------------------- */

/* Colour palette */
:root {
  /* Base colour palette retains the original light page backgrounds and dark text but
     replaces the dark blue primary colour with a deep green sampled from the palette. */
  --primary-color: #2F6A68;    /* Deep green for headers, hero panels and accents (replaces dark blue) */
  --secondary-color: #d35400;  /* Warm orange accent for buttons and highlights */
  --accent-color: #2e8b57;     /* Green accent for sustainability/safety elements */
  --text-color: #333333;       /* Default dark text colour for light backgrounds */
  --background-color: #f7f7f7; /* Restore the light page background */
  --light-gray: #f1f1f1;       /* Light gray for subtle section backgrounds */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  /* Set the page background to the deep cyan colour defined above. */
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Global container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
header {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo text styling: the header uses a simple text logo. Match its size to the EMPIC word in the hero heading. */
.logo {
  display: flex;
  align-items: center;
  /* Increase font size so that the header logo matches the size of the "EMPIC" word in the hero heading (2rem). */
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  /* Add a subtle text-shadow to give the logo a slight 3D appearance against the dark background. */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Remove old image-specific logo styles since the logo is now plain text */

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

/* Language switcher */
.language-switch {
  margin-left: 1rem;
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.language-switch a {
  color: #ffffff;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.language-switch a:hover {
  opacity: 0.7;
}

nav li {
  position: relative;
}

nav a {
  font-weight: 600;
  color: #ffffff;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--secondary-color);
}

/* Hero section */
.hero {
  position: relative;
  height: 70vh;
  /* Make hero images fill the banner area while cropping only the side padding.
     This restores the previous full-bleed look for all pages and relies on
     padded images (like the banner photo) to keep faces intact. */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* Use the primary colour for hero backgrounds instead of the undefined dark-blue variable. */
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  color: #ffffff;
}

/* Custom split hero layout used on the home page to keep text off the photo */
.hero.no-overlay {
  position: relative;
  /* override default hero styling */
  background: var(--primary-color);
  height: auto;
  padding: 0;
  color: #ffffff;
}

.hero.no-overlay::before {
  /* Remove dark overlay in this layout */
  content: none;
}

.hero-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.hero-left, .hero-right {
  flex: 1 1 300px;
  min-width: 250px;
  background-color: var(--primary-color);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  /* Note: child alignment will be controlled separately for hero-right */
}

/* Align children of hero-right centrally within its column. This horizontally centers the
   heading and values list block within the right portion of the hero while still allowing
   the first letters of each value to align vertically via their own flex styles. */
.hero-right {
  align-items: center;
}

/* Center the contents of the hero values section horizontally. The inner wrapper allows
   the value heading and list to have intrinsic width instead of stretching to the full
   column width. */
.hero-right .values-wrapper {
  /* Use inline-flex so the wrapper only grows to the width of its contents.
     This allows the auto margins to center the block horizontally. */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /* Shrink wrapper to fit its content so that auto margins can center it */
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

/* Center align large hero headings on the split hero */
.hero-left h2,
.hero-right h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}

/* Hero tagline paragraph styling.  The two‑line tagline should be centered
   within its column, without extra indentation. */
.hero-left p {
  font-size: 1rem;
  line-height: 1.4;
  color: #e6e6e6;
  text-align: center;
  margin: 0;
}

.hero-image {
  flex: 2 1 400px;
  position: relative;
  min-width: 300px;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-right .hero-values-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-right .hero-values-list li {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #ffffff;
  /* Use flex layout so the first-letter span has a fixed width and all first letters align vertically */
  display: flex;
  align-items: flex-start;
}

.hero-right .hero-values-list li span {
  /* Use the secondary accent colour (orange) for the initial letters on the values list */
  color: var(--secondary-color);
  font-weight: 700;
  /* Give the first letter of each value a fixed width so all initial
     letters align vertically. Using an inline-block ensures consistent
     alignment across languages (E, M, P, I, C). */
  display: inline-block;
  width: 1.5rem;
  min-width: 1.5rem;
  text-align: center;
  margin-right: 0.25rem;
}

/* Responsive adjustments for the split hero */
@media (max-width: 768px) {
  .hero-left, .hero-right, .hero-image {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .hero-left, .hero-right {
    text-align: left;
  }
  .hero-left h2, .hero-right h2 {
    font-size: 1.6rem;
  }
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 1rem;
}

.hero-content h2 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--secondary-color);
  color: #ffffff;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: #b94600;
}

.btn.outline {
  background-color: transparent;
  border: 2px solid var(--secondary-color);
  color: var(--secondary-color);
}

.btn.outline:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
}

/* Sections */
.section {
  padding: 4rem 0;
}

.section h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--secondary-color);
  margin-top: 0.5rem;
}

.section p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Cards grid */
.cards,
.project-cards,
.news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.card {
  /* Set card backgrounds to the primary colour to unify the dark theme across the site. */
  background-color: var(--primary-color);
  padding: 2rem;
  border-radius: 6px;
  /* Use a subtle shadow to give the cards depth on the dark background. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.card i {
  color: var(--secondary-color);
  margin-bottom: 1rem;
  display: block;
  text-align: center;
}

.card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  /* Render card titles in white on dark backgrounds for better contrast. */
  color: #ffffff;
  text-align: center;
}

.card p {
  font-size: 0.95rem;
  /* Lighten paragraph text for contrast against the dark card background */
  color: #e6e6e6;
  text-align: left;
}

/* Project card */
.project-card {
  /* Match the dark theme for project cards */
  background-color: var(--primary-color);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.project-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.project-card .project-info {
  padding: 1rem 1rem 1.5rem;
}

.project-card .project-info h3 {
  font-size: 1.2rem;
  /* Project titles on dark backgrounds should be white for consistency */
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.project-card .project-info p {
  font-size: 0.95rem;
  color: #e6e6e6;
}

/* News card */
.news-card {
  display: flex;
  /* Dark theme for news cards */
  background-color: var(--primary-color);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.news-card img {
  /* Adjust image width for better balance on home page */
  width: 35%;
  height: auto;
  object-fit: contain;
  /* Use the same dark cyan background for image placeholders */
  background-color: var(--primary-color);
}

.news-card .news-info {
  padding: 1rem;
  /* Allow text to fill remaining width on home page */
  width: 65%;
  display: flex;
  flex-direction: column;
}


.news-card h3 {
  font-size: 1.2rem;
  /* White headlines on news cards improve contrast */
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.news-card p {
  font-size: 0.9rem;
  /* Lighten news body text for readability against dark card */
  color: #e6e6e6;
  margin-bottom: 1rem;
}

.read-more {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary-color);
}

.read-more:hover {
  text-decoration: underline;
}

/* CTA section */
.cta {
  background-color: var(--primary-color);
  color: #ffffff;
  text-align: left;
}

.cta h2 {
  color: #ffffff;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Footer */
footer {
  /* Use the unified primary colour for footer backgrounds */
  background-color: var(--primary-color);
  color: #cccccc;
  padding-top: 2rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 1.5rem;
}

footer h3,
footer h4 {
  color: #ffffff;
  margin-bottom: 0.75rem;
}

footer ul {
  list-style: none;
  padding: 0;
}

footer ul li {
  margin-bottom: 0.5rem;
}

footer ul li a {
  color: #cccccc;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

footer ul li a:hover {
  color: var(--secondary-color);
}

.bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 0;
  text-align: center;
  font-size: 0.85rem;
}

/* Category buttons for projects page */
.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.category-buttons button {
  padding: 0.5rem 1rem;
  border: 2px solid var(--primary-color);
  background-color: transparent;
  color: var(--primary-color);
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.category-buttons button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #ffffff;
}

/*
 * Override news card styles to ensure the image and text layout remains balanced on wider screens.
 * By wrapping the flex container, long paragraphs will flow beneath the image instead of leaving a large empty
 * area next to the picture. The widths below (40% for image, 60% for text) ensure a harmonious ratio.
 */
.news-card {
  display: flex;
  flex-wrap: wrap;
  /* Dark theme for news cards on listing pages */
  background-color: var(--primary-color);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
}
.news-card img {
  flex: 0 0 40%;
  width: 40%;
  max-width: 100%;
  height: auto;
  /* Show full image without cropping on news listing pages */
  object-fit: contain;
  background-color: var(--primary-color);
}
.news-card .news-info {
  flex: 1 0 60%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.news-card p {
  line-height: 1.4;
}

.category-buttons button.active {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #ffffff;
}

/* Projects grid for projects page */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .hero-content h2 {
    font-size: 2.25rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .news-card {
    flex-direction: column;
  }

  .news-card img {
    width: 100%;
    height: 160px;
  }
}

/* News listing page: stack image on top and text below */
.news-list .news-card {
  flex-direction: column;
}
.news-list .news-card img {
  width: 100%;
  max-width: 100%;
  flex: none;
  height: auto;
  object-fit: contain;
  background-color: var(--primary-color);
}
.news-list .news-card .news-info {
  width: 100%;
  flex: none;
}

/* Leadership team cards: centre headings and images */
.leadership-team .card {
  text-align: center;
}
.leadership-team .card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.leadership-team .card ul {
  text-align: left;
  list-style: disc;
  margin-left: 1.5rem;
  /* Ensure biography text is light for legibility on dark cards */
  color: #e6e6e6;
}
/* Overrides to centre hero content and values, adjust header, news, leadership images */
.hero-left p, .hero-right .hero-values-list li {
    text-align: center;
    margin-left: 0;
}
.hero-content, .hero-content h2, .hero-content p {
    text-align: center;
}
.header-container {
    margin: 0 auto;
}
.leadership-team .card img {
    object-position: top;
}
/* Adjust news card widths on home page */
.news-card img {
    width: 30% !important;
}
.news-card .news-info {
    width: 70% !important;
}

/* Final overrides for leadership images to use full head */
.leadership-team .card img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    object-position: top;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Leadership image adjustments: display full photo without cropping */
.leadership-team .card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Ensure biography list items are light coloured on dark leadership cards */
.leadership-team .card ul li {
  color: #e6e6e6;
}

/* ================================================================
 * Layout for EMPIC Principles section
 * Place the five EMPIC principle cards on one row and centre them.
 * On smaller screens the grid will wrap gracefully.
 */
.empic-values .cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.empic-values .card {
  text-align: center;
}
@media (max-width: 768px) {
  .empic-values .cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* ================================================================
 * Layout for core values section on the About page
 * Ensure the five principle cards in the "EMPIC Principles" section
 * of the About page sit on a single row at desktop widths. On
 * smaller screens the grid wraps gracefully. */
.core-values .cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.core-values .card {
  text-align: center;
}
@media (max-width: 768px) {
  .core-values .cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* ================================================================
 * Projects grid alignment
 * Ensure that when filtering projects (for example institutional,
 * infrastructure or others categories with only one or two entries),
 * the cards align to the left rather than centring within the grid. */
.projects-grid {
  justify-content: start;
}