/*
  Global stylesheet for Isthmus Express website
  This file defines the look and feel of the site, including typography,
  colors, responsive layout and reusable components like buttons, cards
  and forms. The design aims to be clean, modern and professional while
  ensuring readability and accessibility for all visitors.
*/

/* Base colors */
:root {
  /* Updated color palette for a fresh, modern look */
  /* Updated color palette inspired by Lakeland Care Inc. */
  --color-primary: #073B4C; /* deep navy used for headers and footers */
  --color-secondary: #2A9D8F; /* soft teal for accents and call‑to‑actions */
  --color-accent: #E9C46A; /* warm golden accent */
  --color-light: #F1FAEE; /* light background for content sections */
  --color-dark: #264653; /* darker teal for hover states */
  --color-text: #1D3557; /* rich blue for primary text */
  --color-muted: #457B9D; /* muted blue for secondary text */
  --header-height: 70px;
}

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-light);
}

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

a:hover {
  text-decoration: underline;
}

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

/* Header */
.site-header {
  background-color: var(--color-primary);
  color: #ffffff;
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
}

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.main-nav li {
  margin-left: 1.5rem;
}

.main-nav a {
  color: #ffffff;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-secondary);
}

/* Mobile navigation */
.nav-toggle {
  display: none;
  font-size: 2rem;
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
}

/* Hero section */
.hero {
  position: relative;
  min-height: 60vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Slightly reduce the overlay darkness to let the hero image show through */
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero h1 {
  font-size: 2.75rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hero .tagline {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 300;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
  border: none;
}

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

.btn-primary:hover {
  background-color: var(--color-secondary);
  opacity: 0.9;
}

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

.btn-secondary:hover {
  background-color: var(--color-dark);
}

/* Intro section */
.intro-section {
  padding: 3rem 0;
  background-color: #ffffff;
  text-align: center;
}

.intro-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.intro-section p {
  max-width: 800px;
  margin: 0.5rem auto;
  font-size: 1.1rem;
  color: var(--color-text);
}

/* Services section */
.services-section {
  padding: 3rem 0;
  background-color: var(--color-light);
  text-align: center;
}

.services-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.service-card {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Provide spacing between cards when stacked on small screens */
  margin-bottom: 1.5rem;
}

/* Images inside service cards */
.service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
  margin-bottom: 1rem;
}

.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.service-card p {
  color: var(--color-muted);
  font-size: 1rem;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* CTA section */
.cta-section {
  padding: 3rem 0;
  background-color: var(--color-secondary);
  color: #ffffff;
  text-align: center;
}

.cta-inner h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

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

/* Footer */
.site-footer {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 1.5rem 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.footer-left p:not(:last-child) {
  margin-bottom: 0.25rem;
}

.footer-right ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.footer-right a {
  color: #ffffff;
}

.footer-right a:hover {
  text-decoration: underline;
}

/* Page banner (for About & Contact) */
.page-banner {
  position: relative;
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 3rem 0;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-banner h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.page-banner p {
  font-size: 1.1rem;
}

/* Overlay for page banners with images */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
}

/* Page content section */
.page-content {
  padding: 3rem 0;
  background-color: #ffffff;
}

.page-content h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.page-content p {
  margin-bottom: 1rem;
  color: var(--color-text);
}

.values-list {
  list-style: none;
  margin: 1rem 0 2rem;
  padding-left: 0;
}

.values-list li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.values-list strong {
  color: var(--color-primary);
}

/* Contact page styles */
.contact-content .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.contact-details ul {
  list-style: none;
  padding-left: 0;
}

.contact-details li {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.contact-form-wrapper {
  background-color: var(--color-light);
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.contact-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--color-primary);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccd0d5;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.contact-form button {
  width: 100%;
}

/* Illustration on the contact page */
.contact-illustration {
  text-align: center;
  padding: 2rem 0 1rem;
}

.contact-illustration img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .main-nav ul {
    flex-direction: column;
    position: absolute;
    top: var(--header-height);
    right: 0;
    background-color: var(--color-primary);
    width: 200px;
    padding: 1rem;
    display: none;
  }
  .main-nav ul.open {
    display: flex;
  }
  .main-nav li {
    margin: 0.5rem 0;
  }
  .nav-toggle {
    display: block;
  }
  .contact-content .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero .tagline {
    font-size: 1rem;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .intro-section h2,
  .services-section h2,
  .page-banner h1 {
    font-size: 2rem;
  }
}

/* === Services detail page (services.html) styles === */
/* Container for the services page */
.services-details {
  padding: 3rem 0;
  background-color: #ffffff;
}

/* Each service block uses flex layout to position image and text side by side */
.service-detail {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease both;
}

/* Service images */
.service-detail img {
  width: 100%;
  max-width: 380px;
  border-radius: 6px;
  margin-right: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Text container within each service */
.service-text {
  flex: 1;
}

.service-text h2,
.service-text h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

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

/* Alternate layout for even-numbered service items */
.service-detail:nth-child(even) {
  flex-direction: row-reverse;
  text-align: left;
}

.service-detail:nth-child(even) img {
  margin-left: 2rem;
  margin-right: 0;
}

@media (max-width: 768px) {
  /* Stack image and text on smaller screens */
  .service-detail {
    flex-direction: column;
    text-align: left;
  }
  .service-detail img {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 1rem;
  }
  .service-detail:nth-child(even) img {
    margin-left: 0;
  }
}

/* === Simple animations === */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply fade-in effect to major sections to create a sense of movement on load */
.hero-content,
.intro-section,
.services-section,
.cta-section,
.page-banner,
.page-content {
  animation: fadeInDown 0.8s ease both;
}