/*
 * EvolveFlowAI website stylesheet
 *
 * This stylesheet defines a modern, professional look and feel for the
 * EvolveFlowAI website. It uses a restrained colour palette inspired
 * by the brand – dark charcoals, crisp whites and a bold red accent –
 * combined with generous spacing and clean typography. The design
 * emphasises clarity and readability, with sections clearly separated
 * and calls‑to‑action highlighted. Responsiveness is built in from
 * the outset: layouts gracefully collapse for smaller screens and the
 * navigation adapts to a mobile menu. Use this file as the single
 * source of truth for all custom styles across the site.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

/* CSS Variables for easy colour and spacing adjustments */
:root {
  --primary-color: #e61b23; /* bold red accent from the logo */
  --dark-color: #111111;    /* rich charcoal for text and backgrounds */
  --light-color: #f5f5f5;   /* light neutral for soft backgrounds */
  --body-font: 'Inter', sans-serif;
  --heading-font: 'Montserrat', sans-serif;
  --max-width: 1200px;
  --transition-speed: 0.3s;
}


/* iPhone: lock scale & avoid accidental zoom */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
a, button { touch-action: manipulation; }
input, select, textarea { font-size: 16px; } /* iOS won't auto-zoom on focus */

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

body {
  font-family: var(--body-font);
  color: var(--dark-color);
  background-color: #ffffff;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-speed);
}

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

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

/* Container helper */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

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

h2 {
  font-size: 2rem;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

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

/* Header and Navigation */
header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  /* Make the logo more prominent for clear branding */
  /* Increase logo height for even better visibility on all pages */
  height: 100px;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links li a {
  font-weight: 500;
  transition: color var(--transition-speed);
}

.nav-links li a:hover {
  color: var(--primary-color);
}

.cta-btn {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  font-weight: 600;
  transition: background var(--transition-speed);
}

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

/* Mobile nav */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle span {
  height: 3px;
  width: 25px;
  background-color: var(--dark-color);
  margin-bottom: 4px;
  transition: all var(--transition-speed);
}

@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    flex-direction: column;
    width: 200px;
    padding: 1rem;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-speed);
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
  }
  .nav-links.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  .menu-toggle {
    display: flex;
  }
}

/* Hero section */
.hero {
  background-color: var(--dark-color);
  color: #ffffff;
  padding: 4rem 0 6rem;
  position: relative;
  overflow: hidden;
}

/*
 * Default hero background: a subtle abstract network pattern tinted via opacity.
 * This provides a high‑tech feel without overpowering the content. Specific
 * pages can override this (e.g., the home page uses a clinic image).
 */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/hero.webp');
  background-size: cover;
  /*
   * The background position uses a CSS variable so that
   * JavaScript can adjust the vertical offset for a parallax effect.
   * The default var(--hero-parallax) value is 0px. The X position
   * remains centred.
   */
  background-position: center var(--hero-parallax, 0px);
  opacity: 0.1;
  z-index: 0;
}

/*
 * Home page hero override. A darker gradient on top of the model photo
 * gives a refined clinic vibe and ensures text remains readable.
 */
/*
 * Home hero background
 *
 * The homepage now features a wide‑angle clinic photo with our
 * spokesperson. We layer a dark gradient over the image to keep
 * text legible while still allowing the parallax effect to show
 * through. The background position is controlled via the
 * --hero-parallax variable set in script.js to create depth on
 * scroll. Replace `hero-new.jpg` if you ever want to change the
 * hero photo again.
 */
.home-hero::before {
  /* Use the latest wide‑angle photo supplied by the client as the homepage hero. */
  background-image: linear-gradient(rgba(17,17,17,0.6), rgba(17,17,17,0.6)), url('../assets/hero-final.webp');
  background-position: center var(--hero-parallax, 0px);
  opacity: 1;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.hero-text {
  flex: 1 1 500px;
  padding-right: 2rem;
  /* Hint to the browser that this element will animate, so the text
   * remains crisp during translation. Without this, some browsers
   * may apply subpixel rendering that makes the text appear blurry.
   */
  will-change: transform;
}

.hero-text h1 {
  color: #ffffff;
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero-text p {
  color: #dddddd;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.hero-img {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
}

.hero-img img {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  /* Ensure hero images maintain their aspect ratio without cropping.
     Using object-fit: contain keeps the entire image visible inside
     its bounding box rather than cropping to fill. */
  object-fit: contain;
}

/* Sections */
section {
  padding: 4rem 0;
}

/*
 * Hint to browsers that any element with data-scroll will animate via
 * transform so they can optimise rendering. Without this hint some
 * browsers may blur text slightly during translation. This rule
 * complements the specific will-change declarations on hero text
 * and ensures crisp rendering site‑wide.
 */
[data-scroll] {
  will-change: transform;
}

/* Thank-you hero backgrounds: remove overlays and set a clean white background for clarity.
   This class is used on the thank-you page hero to avoid any semi-transparent overlay
   that could blur or wash out the large confirmation text. */
.thank-hero::before {
  background-image: none;
  background-color: #ffffff;
  opacity: 1;
}

/* Remove shimmer overlay on the thank-you hero.  Without this rule, the
   global .hero::after shimmer would apply and wash out the text. */
.thank-hero::after {
  display: none;
}

/* Ensure text in the thank-you hero is dark on the white background. */
.thank-hero .hero-text {
      /* Override the default hero text colour (white) for the thank‑you page.
       * Without this, the global .hero-text styles set white and light grey
       * colours which appear washed out on the white thank you hero. This rule
       * ensures the large confirmation heading and subtext are crisp and dark.
       */
      color: #222222;
}

    /* Further increase specificity for thank‑you page hero text to ensure all
       heading and paragraph elements render in dark colour. The global
       .hero-text h1 and .hero-text p rules set light colours which could
       override our thank‑you text. This selector overrides them without
       affecting other pages. */
    .thank-hero .hero-text h1,
    .thank-hero .hero-text p {
      color: #222222;
    }
.thank-hero .hero-text a.cta-btn {
  color: #ffffff;
}

/* On the standalone thank-you page we don't animate the hero text. Without this
   override the base `.hero-text` styles set `opacity:0` and a translateY
   transform which causes a brief blur or fade as the intersection observer
   triggers. Here we ensure the hero text is fully opaque and static from the
   start so the greeting and appointment details are crisp immediately. */
.thank-you-page .hero .hero-text {
  opacity: 1 !important;
  transform: none !important;
}

/* Disable fade and movement animations on thank-you page
   so that all elements are crisp from the start. */
.thank-you-page [data-animate] {
  opacity: 1 !important;
  transform: none !important;
}

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

.section-title {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 2rem;
  font-weight: 600;
}

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

.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

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

.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

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

/* Process steps */
.process {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 2rem;
}

.process-step {
  background-color: #ffffff;
  border-left: 4px solid var(--primary-color);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.process-step h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.process-step p {
  font-size: 0.95rem;
  color: #555555;
}

/* Testimonials / Proof section */
.testimonial {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
  font-style: italic;
  border-left: 4px solid var(--primary-color);
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.testimonial p {
  margin-bottom: 1rem;
  color: #555555;
}

.testimonial span {
  font-weight: 600;
  color: var(--primary-color);
}

/* CTA Banner */
.cta-banner {
  background-color: var(--primary-color);
  color: #ffffff;
  text-align: center;
  padding: 3rem 1rem;
  border-radius: 8px;
  margin: 3rem 0;
}

.cta-banner h2 {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta-banner p {
  color: #ffffff;
  margin-bottom: 2rem;
}

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

.cta-banner .cta-btn:hover {
  background-color: #f2f2f2;
}

/* Footer */
footer {
  background-color: var(--dark-color);
  color: #dcdcdc;
  padding: 3rem 0;
}

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

footer h4 {
  font-family: var(--heading-font);
  color: #ffffff;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 0.5rem;
}

footer ul li a {
  color: #dcdcdc;
  font-size: 0.9rem;
  transition: color var(--transition-speed);
}

footer ul li a:hover {
  color: var(--primary-color);
}

/* Ensure contact information (paragraphs and links) in the footer use the same light text colour */
footer .footer-content p, footer .footer-content p a {
  color: #dcdcdc;
}

.footer-bottom {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #888888;
}

/* Forms */
form input,
form textarea,
form select {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-family: var(--body-font);
  font-size: 1rem;
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(230,27,35,0.2);
}

form button {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-speed);
}

form button:hover {
  background-color: #c40c12;
}

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

.blog-post {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.blog-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.blog-post img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.blog-post-content {
  padding: 1.5rem;
}

.blog-post-content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-family: var(--heading-font);
}

.blog-post-content p {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: #555555;
}

.blog-post-content a {
  color: var(--primary-color);
  font-weight: 500;
  font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero-text h1 {
    font-size: 2.3rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
  section {
    padding: 3rem 0;
  }
  .cta-banner h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 576px) {
  .hero-text h1 {
    font-size: 2rem;
  }
  .hero-text p {
    font-size: 0.95rem;
  }
  .nav-links {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------- */
/* Interactive and animation enhancements                                */
/* These rules introduce subtle motion to bring the site to life while    */
/* maintaining elegance and professionalism. Animations use hardware‑     */
/* accelerated properties (opacity, transform) and avoid heavy assets to  */
/* keep performance high on mobile and desktop.                           */

/* On‑scroll animations: elements marked with [data-animate] will fade
   and slide into view when scrolled into the viewport. */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
[data-animate].animate {
  opacity: 1;
  transform: translateY(0);
}

/* Elements that participate in scroll-linked translations should hint to
   the browser that their transform property will change frequently. This
   prevents subpixel rendering and keeps text sharp during scroll.
*/
[data-scroll] {
  will-change: transform;
}

/* Pulse animation for highlighted call‑to‑action buttons. Apply the
   class `pulse` to any element you wish to gently pulse. */
.pulse {
  animation: pulse 2.5s infinite;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(230, 27, 35, 0);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(230, 27, 35, 0.4);
  }
}

/* Shimmer overlay on hero sections: a moving sheen across the hero
   gives a dynamic, video‑like feel without using actual video. The
   shimmer colour is a semi‑transparent white; adjust the opacity for
   subtler or stronger effect. */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0) 50%, rgba(255,255,255,0.1));
  opacity: 0.25;
  animation: shimmer 12s infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Inner hero backgrounds (insights, blog, contact etc.) use a light
   gradient overlay on the network pattern to avoid a dark, grey look. */
/*
  Override the default inner hero background. Previously the network pattern
  created a grey tint that felt dull on contact, insights and blog pages.
  We now use the pastel bokeh gradient (hero-alt.webp) as the base image
  for all inner hero sections. The light gradient overlay keeps text legible
  while the bokeh adds a subtle clinic-tech vibe. You can swap the image
  (../assets/hero-alt.webp) for another clinic photo if desired.
*/
.inner-hero::before {
  background-image: linear-gradient(rgba(245, 245, 245, 0.85), rgba(245, 245, 245, 0.85)), url('../assets/hero-alt.webp');
  /* Also allow parallax movement on inner hero backgrounds */
  background-position: center var(--hero-parallax, 0px);
  opacity: 1;
}

/*
 * For pages with bespoke hero images (Contact, Insights and Blog), we
 * remove the default inner hero background so the supplied <img>
 * element displays clearly without being washed out. These classes
 * are applied to the hero <section> in the respective pages. The
 * pseudo-element remains but is transparent, effectively disabling
 * the pattern/bokeh overlay.
 */
.contact-hero::before,
.insights-hero::before,
.blog-hero::before {
  background-image: none;
  opacity: 0;
}

/* Testimonials slider: fade animations and layout */
.testimonials {
  position: relative;
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1rem;
}
.testimonial {
  display: none;
  font-size: 1.1rem;
  font-style: italic;
  color: #333333;
}
.testimonial.active {
  display: block;
  animation: fadeIn 1s ease-in-out;
}
.testimonial-author {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--dark-color);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Custom social icons styling */
footer .social-list {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

footer .social-list li a img {
  width: 24px;
  height: 24px;
  display: inline-block;
  /* invert colours so icons show up on dark background */
  filter: brightness(0) invert(1);
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

footer .social-list li a:hover img {
  transform: scale(1.1);
  filter: brightness(0) invert(1) saturate(2);
}

/* Fallback styling for social icons inserted as inline images */
footer .footer-content a img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

/* Mobile footer layout improvements */
@media (max-width: 600px) {
  footer .footer-content {
    /* Stack the footer columns vertically on narrow screens */
    grid-template-columns: 1fr;
    text-align: center;
  }
  footer .footer-content > div {
    margin-bottom: 1.5rem;
  }
  footer .social-list {
    justify-content: center;
    margin-top: 0.75rem;
  }
  footer .social-list li {
    margin-bottom: 0;
  }
  footer .footer-content p,
  footer .footer-content a {
    font-size: 0.9rem;
  }
  footer {
    padding: 2rem 1rem;
  }
}
footer .footer-content a:hover img {
  transform: scale(1.1);
  filter: brightness(0) invert(1) saturate(2);
}
/*
 * Responsive footer layout on small screens. Stack the columns vertically and
 * center the text and social icons. Without this rule, the social icon
 * container may stretch and cause icons to grow to huge sizes on mobile.
 */
@media (max-width: 480px) {
  footer .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  footer .footer-content > div {
    margin-bottom: 2rem;
  }
  footer .social-list {
    justify-content: center;
  }
}