/*
  Nomad Medical Redesigned Stylesheet
  
  This stylesheet defines a modern minimalistic design for Nomad Medical's
  website. A light colour palette, generous white‑space and clean
  typography help to improve readability and navigation across the
  site. The primary and secondary colours draw inspiration from the
  abstract hero image while maintaining sufficient contrast for
  accessibility. Flexbox is used throughout to create responsive card
  layouts that adapt gracefully to different screen sizes.
*/

:root {
  /* Brand colours */
  /* Updated colour palette for a more open and breezy feel */
  --primary-color: #2c83c7; /* airy blue for headings and accents */
  --secondary-color: #68c3d4; /* soft turquoise for highlights */
  --light-bg: #f7fbfe; /* very light background with a hint of blue */
  --dark-text: #333333;
  --light-text: #ffffff;
  --card-bg: #ffffff;
  --card-shadow: rgba(0, 0, 0, 0.08);
}

/* Reset baseline */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: var(--dark-text);
  background-color: var(--light-bg);
}

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

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

/* Header / Navigation */
header {
  background: var(--light-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px var(--card-shadow);
}

.logo {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo i {
  font-size: 1.5rem;
  color: var(--primary-color);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

nav li {
  margin-left: 1.5rem;
}

nav a {
  font-weight: 500;
  transition: color 0.3s ease;
}

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

/* Hide the default menu toggle button on larger screens */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--primary-color);
  cursor: pointer;
}

/* Hero and sub‑hero sections */
.hero {
  /* Use a fresh abstract illustration that matches the site’s breezy colour palette */
  /* This new hero features flowing teal and turquoise shapes with a subtle medical cross */
  background-image: url('assets/hero-abstract.png');
  background-size: cover;
  /* Show the top of the illustration so that the cross is visible */
  background-position: center top;
  /* Use the primary colour for text on the light gradient background to improve
     contrast and legibility. */
  color: var(--primary-color);
  text-align: center;
  /* Increase the vertical padding on the hero so the cross in the illustration is fully visible. */
  padding: 8rem 1rem;
  /* Ensure a minimum height on large screens to prevent the illustration from being cropped. */
  /* Expand the hero’s minimum height further so the cross in the illustration appears in view */
  min-height: 650px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero .cta-button {
  display: inline-block;
  background: var(--primary-color);
  color: var(--light-text);
  padding: 0.8rem 1.6rem;
  border-radius: 30px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.hero .cta-button:hover {
  background: var(--secondary-color);
}

/* Secondary hero for internal pages */
/*
      Subhero sections on internal pages now share the same abstract hero
      illustration as the main landing page. This ensures visual
      consistency across the site and maintains the breezy look and feel.

      We reuse the hero background and styling while keeping slightly
      smaller vertical padding to differentiate the hierarchy of pages.
    */
    .subhero {
      background-image: url('assets/hero-abstract.png');
      background-size: cover;
      background-position: center;
      color: var(--primary-color);
      text-align: center;
      padding: 4rem 1rem;
    }

    .subhero h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .subhero p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }

    .subhero .cta-button {
      display: inline-block;
      background: var(--secondary-color);
      color: var(--light-text);
      padding: 0.8rem 1.6rem;
      border-radius: 30px;
      font-weight: 500;
      transition: background 0.3s ease;
    }

    .subhero .cta-button:hover {
      background: var(--light-bg);
      color: var(--primary-color);
    }

/* Generic section styling */
.section {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--primary-color);
}

.section.dark {
  background: #e9f5f5;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px var(--card-shadow);
  text-align: center;
  flex: 1;
}

.card i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

/* Style images inserted into cards from the original Nomad Medical site */
.card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  display: block;
}

.card h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--primary-color);
}

.card p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--dark-text);
}

.link-button {
  display: inline-block;
  background: var(--primary-color);
  color: var(--light-text);
  padding: 0.6rem 1.2rem;
  border-radius: 25px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.link-button:hover {
  background: var(--secondary-color);
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.contact-form label {
  font-weight: 500;
  color: var(--primary-color);
}

.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.contact-form button {
  align-self: center;
  background: var(--primary-color);
  color: var(--light-text);
  padding: 0.8rem 1.6rem;
  border-radius: 30px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
}

.contact-form button:hover {
  background: var(--secondary-color);
}

/* Footer */
.footer {
  background: var(--light-bg);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: var(--dark-text);
  border-top: 1px solid #e0e7e9;
}

.footer a {
  color: var(--primary-color);
  margin: 0 0.5rem;
}

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

@media (min-width: 768px) {
  .cards {
    flex-direction: row;
  }
}

/* Leadership section styles */
.leadership-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 4px var(--card-shadow);
}

.leadership-card img.leader-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}

.leadership-card .leadership-bio {
  max-width: 800px;
}

.leadership-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.8rem;
  color: var(--primary-color);
}

.leadership-card p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dark-text);
}

@media (min-width: 768px) {
  .leadership-card {
    flex-direction: row;
    align-items: center;
  }
  .leadership-card img.leader-photo {
    margin-right: 2rem;
  }
}

/*
  Mobile optimization

  These styles improve the layout and readability on phones and other small
  devices. Navigation items stack vertically, hero and subhero headings
  scale down, and padding is reduced to make better use of limited
  screen space.
*/
@media (max-width: 767px) {
  /* On small screens align logo and menu toggle horizontally and allow nav to wrap below */
  header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Show the menu toggle button on small screens */
  .menu-toggle {
    display: block;
    margin-left: auto;
  }

  /* Hide navigation by default on mobile; it will appear below header when open */
  header nav {
    display: none;
    width: 100%;
  }

  /* Show navigation when open class is applied */
  header nav.open {
    display: block;
  }

  /* Stack nav items vertically on small screens */
  nav ul {
    flex-direction: column;
    width: 100%;
    padding-left: 0;
  }

  nav li {
    margin: 0.5rem 0;
  }

  .hero {
    /* Increase padding on small screens slightly to reveal more of the hero illustration */
    padding: 5rem 1rem;
    min-height: 450px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

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

  .subhero {
    padding: 3rem 1rem;
  }

  .subhero h1 {
    font-size: 2rem;
  }

  .subhero p {
    font-size: 1rem;
  }
}