/*
  HomeoHome Clinic Website Stylesheet

  Defines the colour palette, typography and layout for the clinic's responsive
  website. Designed to be clean and calming, reflecting the green and gold
  brand colours while remaining easy to read on devices of all sizes.
*/

:root {
  --color-primary: #216343;      /* deep green */
  --color-secondary: #cfa340;    /* warm gold */
  --color-background: #f8f9f7;   /* soft off‑white */
  --color-text: #333333;         /* dark grey */
  --font-family-base: Arial, Helvetica, sans-serif;
}

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

body {
  font-family: var(--font-family-base);
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
}

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

img {
  max-width: 100%;
  display: block;
}

/* Container utility */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 10px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header .logo {
  font-size: 1.4rem;
  font-weight: bold;
}

.header nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
}

.header nav a {
  color: #ffffff;
  font-weight: 500;
  transition: color 0.2s ease;
}

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

/* Hero section */
.hero {
  background-image: linear-gradient(135deg, rgba(33, 99, 67, 0.8), rgba(207, 163, 64, 0.8));
  color: #ffffff;
  padding: 120px 20px;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

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

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
  font-size: 1rem;
  text-align: center;
}

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

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

.btn:hover {
  opacity: 0.9;
}

/* Services */
.services {
  padding: 60px 20px;
}

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

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 40px;
  height: 40px;
  margin-bottom: 15px;
}

.card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: var(--color-primary);
}

.card p {
  font-size: 0.95rem;
  color: #555555;
  margin-bottom: 10px;
}

.card a.btn {
  margin-top: 10px;
}

/* Offers */
.offers-section {
  padding: 60px 20px;
}

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

.offer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.offer-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.offer-card h3 {
  color: var(--color-primary);
  margin-bottom: 10px;
}

.offer-card p {
  font-size: 0.95rem;
  color: #555555;
}

/* Blog */
.blog-section {
  padding: 60px 20px;
}

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

.blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.blog-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 20px;
  transition: transform 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card h3 {
  color: var(--color-primary);
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.blog-card p {
  font-size: 0.95rem;
  color: #555555;
  margin-bottom: 15px;
}

.blog-card a {
  color: var(--color-secondary);
  font-weight: bold;
  text-decoration: underline;
}

/* About */
.about-section {
  padding: 60px 20px;
}

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

.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-content img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  max-height: 300px;
}

.bio {
  font-size: 1rem;
  color: #555555;
}

@media (min-width: 768px) {
  .about-content {
    flex-direction: row;
  }
  .about-content img {
    width: 40%;
    max-height: none;
  }
  .bio {
    width: 60%;
  }
}

/* Contact */
.contact-section {
  padding: 60px 20px;
}

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

.contact-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  text-align: center;
}

.contact-details p {
  font-size: 1rem;
}

.contact-details a {
  color: var(--color-primary);
}

.map-container {
  text-align: center;
  margin-bottom: 30px;
}

.map-container img,
.map-container iframe {
  width: 100%;
  height: 300px;
  border: none;
  border-radius: 8px;
  object-fit: cover;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form h3 {
  color: var(--color-primary);
  margin-bottom: 15px;
  text-align: center;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  background-color: var(--color-secondary);
  color: #ffffff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.contact-form button:hover {
  opacity: 0.9;
}

/* Footer */
.footer {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 20px;
  text-align: center;
  font-size: 0.9rem;
  margin-top: 40px;
}

/* Floating action buttons */
.float-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.float-buttons a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
}

.float-buttons a img {
  width: 24px;
  height: 24px;
  pointer-events: none;
  /* ensure icons display in high contrast on coloured backgrounds */
  filter: invert(100%);
}

.float-buttons a.whatsapp {
  background-color: #25d366;
}

.float-buttons a.call {
  background-color: #34b7f1;
}

.float-buttons a:hover {
  opacity: 0.85;
}