/*
 * Custom styles for the Zheen Heart Department website
 *
 * This stylesheet defines a small design system built on top of Bootstrap.  It
 * introduces a set of CSS variables for the brand colours specified in the
 * project brief and then uses them to customise navigation, buttons and
 * section backgrounds.  Playfair Display is used for headings, with Lato for
 * running text, giving the site an elegant yet highly readable look.  A
 * semi‑transparent overlay on the hero banner improves legibility when white
 * text sits on top of the photographic background.
 */

:root {
  --primary-accent: #8B1E3F; /* deep crimson for buttons and highlights */
  --dark-text: #2E2E2E;      /* charcoal grey for body copy */
  --light-bg: #FAFAFA;       /* ivory white for page backgrounds */
  --success: #28A745;        /* emerald green for calls‑to‑action */
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--primary-accent);
}

/* Navigation bar adjustments */
.navbar-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--dark-text);
  font-weight: 500;
  margin-left: 1rem;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary-accent);
}

/* Hero section */
#hero {
  min-height: 85vh;
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: #ffffff;
  text-align: center;
}

/* Override heading and paragraph colours in hero so they remain legible over
   the dark overlay.  Without this rule the global heading colour (deep
   crimson) would override the white text defined on the parent. */
#hero h1,
#hero p {
  color: #ffffff;
}

/* Force white colour on hero headings to override global heading colour */
#hero h1 {
  color: #ffffff !important;
}

#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

#hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  color: #ffffff; /* ensure headings and text appear white over dark overlay */
}

#hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

#hero p {
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.btn-cta {
  background-color: var(--success);
  border: none;
  color: #fff;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn-cta:hover {
  background-color: #218838;
  color: #fff;
}

/* Intro section */
#intro p {
  font-size: 1.1rem;
}

/* Quick info section */
#quick .icon-wrapper {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background-color: var(--primary-accent);
  color: #fff;
  font-size: 2rem;
}

#quick h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 1.3rem;
  color: var(--primary-accent);
}

#quick p {
  margin-bottom: 0;
}

/* Why Choose Us */
#why {
  background-color: var(--light-bg);
}

#why .feature {
  padding: 1.5rem;
  border-radius: 0.5rem;
  transition: box-shadow 0.3s ease;
}

#why .feature:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#why .feature i {
  color: var(--success);
}

.testimonial {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: left;
}

.testimonial-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 1rem;
}

.blockquote {
  margin: 0;
}

.blockquote-footer {
  font-size: 0.9rem;
  color: var(--primary-accent);
}

/* Footer */
footer {
  background-color: var(--dark-text);
}

footer p, footer a {
  color: #f1f1f1;
  font-size: 0.9rem;
}

/* Doctors page styles */
.doctor-card {
  background-color: #fff;
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

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

.doctor-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
}

.doctor-card .card-body {
  padding: 1rem;
}

.doctor-card h5 {
  font-family: 'Playfair Display', serif;
  color: var(--primary-accent);
  font-size: 1.25rem;
}

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

.doctor-card .btn {
  background-color: var(--success);
  border: none;
}

.doctor-card .btn:hover {
  background-color: #218838;
}

/* Contact page styles */
#contact-details h5 {
  color: var(--primary-accent);
  margin-top: 1rem;
}

form label {
  font-weight: 500;
}

.form-control {
  border-radius: 0.25rem;
  border-color: #dee2e6;
}

.form-control:focus {
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 0.2rem rgba(139, 30, 63, 0.25);
}

.btn-submit {
  background-color: var(--primary-accent);
  border: none;
  color: #fff;
  padding: 0.5rem 1.5rem;
}

.btn-submit:hover {
  background-color: #711832;
}