/*
  Custom CSS for the Huenic Care website
  --------------------------------------
  This stylesheet defines the primary colours, typography and layout
  patterns used throughout the website. The design takes its cues
  from the provided template: generous white space, clean headings
  and a modern, healthcare‑friendly colour palette inspired by the
  Huenic Care logo. Responsive rules ensure the layout remains
  usable on tablets and phones.
*/

/* Root variables allow easy colour management */
:root {
  --primary-color: #003e71;        /* dark navy tone from the logo */
  --secondary-color: #0078a6;      /* medium teal/blue */
  --accent-color: #36c1e0;        /* light cyan accent */
  --light-bg: #f5faff;            /* soft light background */
  --dark-text: #1d2a3a;           /* rich dark text colour */
  --light-text: #ffffff;          /* white for high contrast */
  --border-radius: 8px;           /* rounded corners */
  --transition-fast: 0.3s;        /* general transition timing */
}

/* Base typography and resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

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

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

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

/* Header and navigation */
/*
  Header: switch from a dark navy bar to a light neutral background so that
  navigation feels more approachable and integrates seamlessly with the
  rest of the page. The dark text colour defined in the root variables
  ensures sufficient contrast against the light background. Sticky
  positioning and subtle shadow remain unchanged.
*/
header {
  background: #F5F5F5;
  color: var(--dark-text);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.navbar .logo {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.3rem;
}

.navbar .logo img {
  height: 40px;
  margin-right: 0.5rem;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.navbar li {
  position: relative;
}

/* Navigation links inherit the dark text colour so they remain visible on a
   light background. A subtle underline appears on hover or when active. */
.navbar a {
  color: var(--dark-text);
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
}

/* Underline indicator for active or hovered navigation links. The accent
   colour communicates interactivity while still aligning with the brand
   palette. */
.navbar a:hover::after,
.navbar a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--secondary-color);
  border-radius: 2px;
}

/* Hero section */
.hero {
  position: relative;
  height: 60vh;
  /* Use a simple gradient for all hero sections. Individual pages can override this using inline styles. */
  background: linear-gradient(
      rgba(0, 62, 113, 0.8),
      rgba(0, 62, 113, 0.8)
    );
  color: var(--light-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Generic section styling */
section {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

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

.two-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: center;
}

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

.card {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.card img {
  border-radius: 0;
  width: 100%;
  /* Increase the height of card images so portraits have room to display more of the illustration */
  height: 240px;
  object-fit: cover;
  /* Position the image crop to the top so that faces are not cropped out.
     This ensures doctor portraits and other images show their heads
     instead of centering on the torso. */
  object-position: top;
}

.card-content {
  padding: 1rem;
}

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

.card-content p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #555;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--border-radius);
  background: var(--secondary-color);
  color: var(--light-text);
  font-weight: 500;
  transition: background var(--transition-fast);
}

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

/* CTA Sidebar */
/* CTA Sidebar
   -------------
   The sidebar remains collapsed by default with a narrow width so that
   icons are always visible. Clicking the toggle arrow expands or
   collapses the panel to reveal descriptive labels. Labels are wrapped
   in a span so they can be individually shown or hidden via the .open
   class instead of relying on hover, providing better support on touch
   devices. */
.cta-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px; /* collapsed width shows only icons */
  background: var(--secondary-color);
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  transition: width var(--transition-fast);
  z-index: 999;
}

/* When the sidebar has the .open class applied it expands to show
   the descriptive labels. */
.cta-sidebar.open {
  width: 220px;
}

/* Toggle arrow container */
.cta-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  color: var(--light-text);
  cursor: pointer;
}

/* Rotate the arrow when sidebar is open */
.cta-sidebar.open .cta-toggle i {
  transform: rotate(180deg);
}
.cta-toggle i {
  transition: transform var(--transition-fast);
}

/* CTA items container */
.cta-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem;
}

/* Each CTA item consists of an icon and a label. Labels are hidden by
   default and shown only when the sidebar has the .open class. */
.cta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0;
  color: var(--light-text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.cta-item i {
  font-size: 1.2rem;
}

.cta-item span {
  display: none;
}

/* Show labels when sidebar is open */
.cta-sidebar.open .cta-item span {
  display: inline;
}

/* On hover over individual CTA items, darken the text for contrast */
.cta-item:hover {
  color: var(--dark-text);
}

/* Footer: adopt the same light neutral background as the header with dark
   text for readability. Links use the primary colour for continuity. */
footer {
  background: #F5F5F5;
  color: var(--dark-text);
  padding: 2rem 1rem;
  text-align: center;
}

footer a {
  color: var(--primary-color);
  transition: color var(--transition-fast);
}

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

/* Responsive design */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .navbar ul {
    gap: 1rem;
  }
  /* The CTA sidebar should remain visible on mobile. Previously it was hidden to save space, but the client now requires the sticky CTA to be accessible at all sizes. Removing the display:none ensures the sidebar renders on phones and tablets. */
  .cta-sidebar {
    display: block;
  }
}

/* -----------------------------------------------------------------
   Additional components for the revamped Huenic Care website
   ----------------------------------------------------------------- */

/* Home page slider */
.slider {
  position: relative;
  overflow: hidden;
  height: 60vh;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Background is no longer used on slides – images are nested inside.
     The following properties ensure nested images fill the slide container
     without cropping when using object-fit: contain. */
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* Slide images – ensure full visibility on all devices */
.slide-image {
  width: 100%;
  height: 100%;
  /* Fill the slide container while preserving aspect ratio; cropping outer edges if necessary */
  object-fit: cover;
}

.slide .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 62, 113, 0.6);
}

.slide .slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-align: center;
  max-width: 800px;
  padding: 1rem;
  /* Improve readability of overlay text by adding a slight shadow */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Modal (Booking and application forms) */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: #ffffff;
  padding: 2rem;
  border-radius: var(--border-radius);
  max-width: 500px;
  width: 90%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.modal-content form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
  font-size: 1rem;
  width: 100%;
}

.modal-content button {
  background: var(--secondary-color);
  color: var(--light-text);
  border: none;
  padding: 0.8rem;
  border-radius: var(--border-radius);
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.modal-content button:hover {
  background: var(--accent-color);
}

/* FAQ styling */
#faq details {
  margin-bottom: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: 1rem;
  background: #ffffff;
}

#faq summary {
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

/* Make FAQ section responsive with constrained width */
#faq {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

/* Video testimonial responsive embed */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Branches grid */
.branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.branch-card {
  background: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.branch-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
}

.branch-card-content {
  padding: 1rem;
}

.branch-card-content h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.branch-card-content p {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  color: #555;
}

/* Testimonials slider: horizontal scroll with snap points */
.testimonials-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1rem;
}

.testimonials-slider::-webkit-scrollbar {
  height: 6px;
}
.testimonials-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.testimonial-item {
  flex: 0 0 300px;
  scroll-snap-align: center;
}

.testimonial-item iframe {
  width: 100%;
  height: 180px;
  border: none;
}

/* Branches slider: horizontally scrollable cards */
.branches-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1rem;
}

.branches-slider::-webkit-scrollbar {
  height: 6px;
}
.branches-slider::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.branches-slider .branch-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

.branch-card-content .branch-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.branch-card-content .branch-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--secondary-color);
  color: var(--light-text);
  font-size: 1rem;
  transition: background var(--transition-fast);
}

.branch-card-content .branch-actions a:hover {
  background: var(--accent-color);
}

/* Blog list cards adjustments for additional posts */
#blog-list .card-grid .card img {
  height: 180px;
  object-fit: cover;
}

/* -------------------------------------------------------------
   Mobile Navigation Menu
   ------------------------------------------------------------- */
/* The menu toggle (hamburger icon) is hidden on desktop and
   displayed on smaller screens. */
.menu-toggle {
  display: none;
  font-size: 1.6rem;
  color: var(--dark-text);
  cursor: pointer;
}

@media (max-width: 768px) {
  /* Hide the regular navigation list on small screens */
  .navbar ul {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

/* The off‑canvas mobile menu that slides in from the right */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -280px;
  width: 260px;
  height: 100%;
  background: #ffffff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  transition: right var(--transition-fast);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

/* When active, bring the menu into view */
.mobile-menu.active {
  right: 0;
}

/* Close button inside the mobile menu */
.mobile-menu .close-btn {
  align-self: flex-end;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--dark-text);
}

.mobile-menu nav {
  margin-top: 1rem;
}

.mobile-menu nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-menu nav a {
  color: var(--dark-text);
  font-size: 1.1rem;
}

/* CTA buttons in the mobile menu */
.mobile-menu .cta-buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mobile-menu .cta-buttons a {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: var(--border-radius);
  background: var(--secondary-color);
  color: var(--light-text);
  text-align: center;
  transition: background var(--transition-fast);
}

.mobile-menu .cta-buttons a:hover {
  background: var(--accent-color);
}

/* -------------------------------------------------------------
   Slider Controls
   ------------------------------------------------------------- */
/* Navigation arrows and dots for the home slider */
.slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 2;
}

.slider-controls .arrow {
  font-size: 2rem;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
}

.slider-controls .dots {
  display: flex;
  gap: 0.4rem;
}

.slider-controls .dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.slider-controls .dot.active {
  background: #ffffff;
}