/*
  Global styles for Escrito Consultoria site.

  The palette is inspired by deep blues and soft gradients to convey
  reliability and modernity.  The layout makes heavy use of flexbox
  and CSS grid to remain responsive on both desktop and mobile
  devices.  Sections alternate light backgrounds for readability.
*/

/* CSS variables for easy theming */
:root {
  /* Neutral palette inspired by soft greys and desaturated blues. */
  --primary-color: #3a3a3a;      /* dark grey for headings and text */
  --secondary-color: #6c7a89;    /* muted slate blue for buttons and highlights */
  --accent-color: #a6b4c2;       /* pale blue-grey accent */
  --light-bg: #f7f7f7;           /* very light grey for sections */
  --dark-bg: #2c3e50;           /* deep grey-blue for footer */
  --text-color: #333333;         /* default text colour */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  color: var(--text-color);
  background-color: white;
  line-height: 1.6;
}

/* Navigation bar */
nav {
  width: 100%;
  /* Darker navigation bar background */
  background-color: var(--dark-bg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav .logo {
  font-weight: bold;
  font-size: 1.5rem;
  /* Make logo text white on dark nav */
  color: white;
  display: flex;
  align-items: center;
}

/* Ensure the logo image scales appropriately within the navigation bar */
.logo img {
  /* Slightly larger logo in navigation bar for better visibility */
  height: 50px;
  margin-right: 0.5rem;
}

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

nav li + li {
  margin-left: 1.5rem;
}

nav a {
  text-decoration: none;
  /* White navigation links on dark background */
  color: white;
  font-weight: bold;
  transition: color 0.2s ease;
}

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

/* Hero section */
/*
  Hero section now supports a background slideshow. The background image
  is applied via inline style in the page script. The section uses
  neutral colours and includes a semi‑transparent overlay for better
  contrast with text. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  color: var(--primary-color);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-height: 60vh;
}

/* overlay for hero to improve text contrast */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* Content inside hero occupies full width on small screens and
   centers text for readability. */
.hero-content {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.hero-content h1 {
  font-size: 2.2rem;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
}

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

.hero-image {
  flex: 1 1 300px;
  text-align: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  /* Limit the displayed height of hero images so they don't dominate the page */
  max-height: 300px;
}

/* Generic section styling */
/* sections now have slightly reduced padding to optimize screen space */
.section {
  padding: 2.5rem 1.5rem;
}

.section-light {
  background-color: var(--light-bg);
}

.section-dark {
  background-color: white;
}

.section h2 {
  color: var(--primary-color);
  margin-top: 0;
  font-size: 2rem;
  margin-bottom: 1rem;
}

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

/* Services grid */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* On the home page, display all service cards on a single line. */
#services-overview .service-cards {
  grid-template-columns: repeat(5, 1fr);
}

.service-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.service-card img {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
}

/* Images within the detailed services pages should not be overly large */
section .service-cards img {
  max-width: 150px;
  height: auto;
}

.service-card h3 {
  margin-top: 0;
  font-size: 1.3rem;
  color: var(--primary-color);
}

.service-card p {
  font-size: 0.95rem;
}

/* Benefits list */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.benefit-item {
  text-align: center;
  padding: 1rem;
}

.benefit-item h4 {
  margin-top: 0.5rem;
  color: var(--primary-color);
}

.benefit-item p {
  margin-bottom: 0;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--secondary-color);
  color: white;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

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

/* Footer */
footer {
  /* Simplified footer styles */
  background-color: var(--dark-bg);
  color: white;
  /* Slightly smaller padding for compact footer */
  padding: 2rem 1rem;
  /* Center all text and elements in the footer */
  text-align: center;
}

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

footer h4 {
  margin-top: 0;
}

footer a {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: block;
  transition: color 0.2s ease;
}

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

/* Contact form */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Logo colour inversion for footer */
.footer-logo img {
  /* Keep height consistent with header logo */
  height: 40px;
  /* Invert colours so the logo appears white on dark background */
  filter: brightness(0) invert(1);
  margin-bottom: 1rem;
}

/* Footer text spacing */
footer p {
  margin: 0.3rem 0;
}

/* Logo inside hero (home page) */
.hero-logo {
  text-align: center;
}

/* Size of the logo inside the hero section (home page) */
.hero-logo img {
  /* Increase logo size on the home hero for greater prominence */
  height: 100px;
  margin: 0 auto 1rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

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

.contact-form button {
  background-color: var(--secondary-color);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

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

/* Blog cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.blog-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-card img {
  width: 100%;
  /* Reduce height of blog thumbnails to optimise space */
  height: 140px;
  object-fit: contain;
}

.blog-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-content h3 {
  margin-top: 0;
  color: var(--primary-color);
}

.blog-card-content p {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.blog-card-content a {
  align-self: flex-start;
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: bold;
}

.blog-card-content a:hover {
  text-decoration: underline;
}

/* Chatbot styles for blog page */
.chatbot-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Floating WhatsApp button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366; /* WhatsApp green */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
  text-decoration: none;
}

.whatsapp-float img {
  width: 28px;
  height: 28px;
}
.chatbot-window {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 300px;
  max-height: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.chatbot-header {
  background-color: var(--primary-color);
  color: white;
  padding: 1rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbot-messages {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
  font-size: 0.9rem;
  background: #f9fafc;
}

.chatbot-input {
  display: flex;
  border-top: 1px solid #eee;
}

.chatbot-input input {
  flex-grow: 1;
  border: none;
  padding: 0.5rem;
  font-size: 1rem;
}

.chatbot-input button {
  background-color: var(--secondary-color);
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.chatbot-input button:hover {
  background-color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-content {
    max-width: 100%;
    padding-right: 0;
  }
  .service-cards,
  .benefits,
  .blog-grid,
  footer .footer-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Responsive navigation (hamburger menu) */
nav input#menu-toggle {
  display: none;
}

nav .menu-icon {
  display: none;
}

@media (max-width: 768px) {
  /* Show hamburger icon and hide the menu on small screens */
  nav .menu-icon {
    display: block;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: auto;
  }
  /* Hide the regular menu by default on mobile */
  nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--dark-bg);
    text-align: center;
    margin-top: 1rem;
    padding: 0;
  }
  nav ul li {
    margin: 0.5rem 0;
  }
  /* Show the menu when the toggle is checked */
  nav input#menu-toggle:checked ~ ul {
    display: flex;
  }
  /* Override the service overview grid to be responsive on mobile */
  #services-overview .service-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}