/*
 * Meridian Strategic Resources Upgraded Stylesheet (Emerald & Lapis Theme)
 *
 * This CSS implements a modern, accessible design with a premium gemstone palette.
 */

:root {
  /*
   * Global colour definitions
   *
   * To differentiate Meridian from other consulting firms yet retain a premium feel,
   * the base palette now uses a deep azure hue balanced by a vivid blue‑green
   * accent.  These colours were inspired by high‑end consultancy sites that mix
   * dark blues with brighter highlights.  Feel free to
   * tweak the values slightly, but keep strong contrast between backgrounds and
   * accents for accessibility.
   */
  /*
   * Meridian's signature palette now pulls directly from the custom
   * hero artwork: a unique blue‑green gradient reminiscent of the
   * northern lights. The deep base colour grounds the page while
   * the accent brings energy and contrast. A golden tertiary colour
   * adds warmth for highlights and calls to action. Colours were
   * chosen based on research of top consulting brands which
   * favour blues for trust and greens for growth.
   */
  --color-base: #012D4A; /* deep ocean blue */
  --color-accent: #1ABC9C; /* fresh teal */
  --color-text: #F9FAFB; /* off‑white */
  --color-secondary: #011E2A; /* darker navy for panels */
  --color-tertiary: #FFC857; /* warm golden accent used sparingly */
  --max-width: 1200px;
}

h
tml,
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--color-base);
  color: var(--color-text);
  line-height: 1.6;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: var(--color-tertiary);
}

/* Header and navigation */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.05rem;

  /* Align the logo image and text horizontally */
  display: flex;
  align-items: center;
}

/* Logo image styling: ensures the abstract mark is sized consistently across pages */
.logo-img {
  width: 40px;
  height: 40px;
  margin-right: 0.5rem;
  display: inline-block;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}
nav a {
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 500;
}
.btn-cta {
  background-color: var(--color-accent);
  color: var(--color-secondary);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}
.btn-cta:hover {
  background-color: #059669; /* darker emerald */
  transform: translateY(-2px);
}

/* Hero section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 4rem 1rem;
  /* Use a custom abstract background for the hero section rather than a plain placeholder.
   * The gradient overlay darkens the underlying image just enough for white text to remain legible.
   */
  background-image: linear-gradient(rgba(17, 24, 39, 0.6), rgba(17, 24, 39, 0.6)), url('hero-bg.png');
  background-position: center;
  background-size: cover;
}
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: var(--max-width);
  width: 100%;
}
.hero-text h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--color-accent);
}
.hero-text p {
  font-size: 1.2rem;
  margin: 0 0 2rem;
  color: var(--color-text);
  max-width: 40rem;
}
.hero-text .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* Trust bar */
.trust-bar {
  background-color: var(--color-secondary);
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.trust-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 1rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text);
}
/* Replace placeholder images with CSS icons for trust indicators */
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.4rem;
  font-weight: bold;
}
.trust-icon::after {
  content: '✔';
}

/* Services section */
.services {
  padding: 3rem 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.services h2 {
  margin-bottom: 2rem;
  color: var(--color-accent);
  text-align: center;
  font-size: 2rem;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background-color: var(--color-secondary);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.service-card h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-accent);
}
.service-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #cbd5e1;
}

/* Testimonials / Case studies */
.testimonials {
  padding: 3rem 1rem;
  background-color: var(--color-secondary);
}
.testimonials h2 {
  text-align: center;
  color: var(--color-accent);
  margin-bottom: 2rem;
  font-size: 2rem;
}
/* Testimonial slider styles */
.testimonial-slider {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  /* reserve height so the container doesn't collapse when children are absolutely positioned */
  min-height: 200px;
}
.testimonial-card {
  background-color: #1f2937;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
/* The active testimonial is fully visible */
.testimonial-card.active {
  opacity: 1;
  position: relative;
}
.testimonial-card p {
  font-style: italic;
  color: #e5e7eb;
}
.testimonial-card .author {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-tertiary);
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: var(--color-accent);
  color: var(--color-dark-bg);
  padding: 0.5rem 0.7rem;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: none;
  z-index: 1000;
  transition: opacity 0.3s ease;
}
.back-to-top.show {
  display: block;
}

/* Insights preview */
.insights-preview {
  padding: 3rem 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.insights-preview h2 {
  text-align: center;
  color: var(--color-accent);
  margin-bottom: 2rem;
  font-size: 2rem;
}
/* Article grid used on the home page (Latest Insights preview) */
.article-grid {
  display: grid;
  gap: 1.5rem;
}

/* Three cards per row on desktop */
@media (min-width: 901px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Two cards per row on tablets */
@media (min-width: 600px) and (max-width: 900px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* One card per row on mobile */
@media (max-width: 599px) {
  .article-grid {
    grid-template-columns: 1fr;
  }
}
.article-card {
  background-color: var(--color-secondary);
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.article-card h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-accent);
}
.article-card small {
  color: #9ca3af;
}
.article-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #d1d5db;
}
.article-card a {
  margin-top: auto;
  width: fit-content;
  background-color: var(--color-accent);
  color: var(--color-secondary);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: background-color 0.2s ease-in-out;
}
.article-card a:hover {
  background-color: #059669;
}

/* Footer */
footer {
  background-color: var(--color-secondary);
  padding: 2rem 1.5rem;
  font-size: 0.9rem;
  color: #9ca3af;
}
.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  /* Use auto-fit with a larger minimum width so columns wrap more naturally and space evenly */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.footer-section h4 {
  margin: 0 0 0.5rem;
  color: var(--color-accent);
}
.footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-section li {
  margin-bottom: 0.5rem;
}
.footer-bottom {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
}

/* Responsive layout for footer columns */
@media (max-width: 1024px) {
  .footer-container {
    /* Two columns on tablets */
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .footer-container {
    /* Stack columns on mobile */
    grid-template-columns: 1fr;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-text h1 {
    font-size: 2.5rem;
  }
  .service-grid,
  .testimonial-grid {
    /* Allow service and testimonial grids to auto‑fill on smaller screens */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  /*
   * Do not modify .article-grid here; its layout is controlled by dedicated
   * media queries above to ensure 3/2/1 columns. Removing it from this block
   * prevents overriding those settings on smaller screens.
   */
}

/* ------------------------------------------------------------------------- */
/* Form and contact page styling                                             */
/*
 * Many industry leaders provide light backgrounds for form areas to improve
 * readability and reduce friction on conversion pages.  The
 * following styles create a card‑like container for the contact form and
 * refine inputs to feel more polished and accessible.
 */

/* Wrapper for the contact form on the contact page */
.contact-form-wrapper {
  background-color: #F3F4F6; /* light gray card to contrast dark page */
  color: var(--color-secondary);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  max-width: 700px;
}

/* Form fields universal styling */
form input[type="text"],
form input[type="email"],
form input[type="file"],
form textarea,
form select {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.25rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #ffffff;
  color: var(--color-secondary);
  font-size: 0.9rem;
  box-sizing: border-box;
}

form label {
  font-weight: 500;
  color: var(--color-secondary);
}

form div {
  margin-bottom: 1rem;
}

fieldset {
  margin-bottom: 1rem;
}

/* Align checkbox labels nicely */
input[type="checkbox"] + label {
  margin-left: 0.3rem;
}

/* Success message styling for form submissions */
#successMessage {
  color: var(--color-accent);
  font-weight: 600;
  margin-top: 1rem;
}

/* Contact page layout enhancements */
.contact-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: flex-start;
  max-width: var(--max-width);
  margin: 3rem auto;
  padding: 0 1rem;
}

/* Generic page hero used on secondary pages */
.page-hero {
  background-image: linear-gradient(rgba(1, 29, 58, 0.7), rgba(1, 29, 58, 0.7)), url('hero-bg.png');
  background-size: cover;
  background-position: center;
  padding: 4rem 1rem 2rem;
  text-align: center;
  color: var(--color-accent);
}
.page-hero h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.2;
}
.page-hero p {
  color: var(--color-text);
  max-width: 600px;
  margin: 0.5rem auto 0;
  font-size: 1.1rem;
}
.contact-info {
  background-color: var(--color-secondary);
  color: var(--color-text);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.contact-info h3 {
  margin-top: 0;
  color: var(--color-accent);
}
.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.contact-info li {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
}
.contact-info li .icon {
  font-size: 1.2rem;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Ensure the form panel grows appropriately */
.contact-wrapper .contact-form-wrapper {
  margin: 0;
   
}


/* Adjust logo size */
.logo-img {
  width: 50px;
  height: 50px;
    margin-top: 2px;
}

/*
 * Dropdown navigation styles
 *
 * These rules ensure the Services submenu appears as a dropdown
 * rather than inline with the primary navigation. Without these
 * styles the nested <ul> inherits the flexbox layout from the
 * parent navigation list and displays all service links across the
 * header. Positioning each top level <li> relative and absolutely
 * positioning the nested <ul> lets us toggle the submenu on hover.
 */
.navbar nav ul li {
  position: relative;
}
.navbar nav ul li ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-secondary);
  padding: 0.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  list-style: none;
  min-width: 220px;
  z-index: 200;
}
.navbar nav ul li:hover > ul.dropdown-menu {
  display: block;
}
.navbar nav ul li ul.dropdown-menu li {
  padding: 0.5rem 1rem;
}
.navbar nav ul li ul.dropdown-menu li a {
  color: var(--color-text);
  text-transform: none;
  font-size: 0.9rem;
  display: block;
}
.navbar nav ul li ul.dropdown-menu li a:hover {
  color: var(--color-tertiary);
}