/*
  Global Style for Dr. Mirela Mujkanovic’s Praxis website based off the
  Medicio Webflow template.  
  This stylesheet defines the colour palette, typography and layout
  structures used throughout the site.  
  Colours were chosen for high contrast accessibility (WCAG 2.2 AA) and
  to evoke trust and professionalism.  
*/

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

:root {
  /* Colour palette */
  --primary-colour: #0e9099;       /* bright clinic blue used for buttons and highlights */
  --secondary-colour: #f1f8ff;     /* very light blue for large panels */
  --dark-colour: #388b89;          /* deep navy for headlines and dark sections */
  --accent-colour: #e4dbcc;        /* warm golden yellow accent */
  --muted-colour: #eef4fc;         /* pale blue for cards and backgrounds */
  --white: #ffffff;
  --text-light: #0e9099;           /* softer text colour for paragraphs */
  --border-radius: 12px;
  --transition-fast: 0.3s;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', Arial, sans-serif;
  line-height: 1.6;
  color: var(--dark-colour);
  background-color: var(--white);
}

a {
  color: var(--primary-colour);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary-colour);
  color: var(--white);
  padding: 8px 16px;
  z-index: 100;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}

/* Header */
header {
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 999;
}
.nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.logo img {
  /* default size for header logo on desktop */
  height: 120px;
  width: auto;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
}
nav a {
  font-weight: 500;
  color: var(--dark-colour);
}
nav a.active,
nav a:hover,
nav a:focus {
  color: var(--primary-colour);
}
/* Mobile navigation */
/* Mobile navigation and responsive header */
@media (max-width: 768px) {
  /* reduce header padding and shrink logo on small screens */
  .nav-wrapper {
    padding: 8px 12px;
  }
  .logo img {
    /* increase mobile logo size slightly */
    height: 80px;
    width: auto;
  }
  /* hide the default horizontal nav list and position the mobile menu */
  nav .nav-list {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 0;
    padding: 12px 16px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 998;
  }
  /* show nav list when toggled open */
  nav .nav-list.nav-open {
    display: flex;
  }
  /* style nav items in mobile view */
  nav .nav-list li {
    margin: 6px 0;
  }
  /* burger button visible on mobile */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 4px 0;
    background-color: var(--primary-colour);
    transition: transform 0.2s, opacity 0.2s;
  }
  /* contact items visible only in mobile nav */
  .nav-contact-mobile {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
  }
  .nav-contact-mobile a {
    color: var(--primary-colour);
  }
}

@media (min-width: 769px) {
  /* display nav list horizontally on desktop */
  nav .nav-list {
    display: flex !important;
  }
  /* hide burger button */
  .nav-toggle {
    display: none;
  }
  /* hide mobile contact items on desktop */
  .nav-contact-mobile {
    display: none;
  }
}

/* Footer contact links color fix */
.footer-contact a {
  color: #cbd4e0;
}
.footer-contact a:hover,
.footer-contact a:focus {
  color: var(--white);
}

/* Generic Sections */
section {
  padding: 80px 20px;
}
.section-light {
  background: var(--secondary-colour);
}
.section-dark {
  background: var(--dark-colour);
  color: var(--white);
}
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 16px;
  font-weight: 700;
}
.section-subtitle {
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-light);
}

/* Hero */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
}
.hero-text {
  flex: 1 1 400px;
}
.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}
.hero-text p {
  font-size: 1.1rem;
  margin-bottom: 32px;
  color: var(--text-light);
}
.btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background: var(--primary-colour);
  color: var(--white);
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: background var(--transition-fast);
}
.btn-primary:hover,
.btn-primary:focus {
  /* fallback hover colour slightly darker than primary */
  background: #0f5abc;
}
.hero-image {
  flex: 1 1 400px;
  text-align: center;
}
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

/*
  Decorative floating shapes in the hero section
  These coloured circles gently move across the hero background to mimic
  the playful animation seen in the original Medicio template.  
*/
.hero-shapes span {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

/* Specific shape definitions: sizes, colours and animation timings */
.shape-blue {
  width: 120px;
  height: 120px;
  background: var(--primary-colour);
  top: -40px;
  right: 10%;
  animation: float1 18s infinite ease-in-out;
}
.shape-yellow {
  width: 80px;
  height: 80px;
  background: var(--accent-colour);
  bottom: 20%;
  left: 5%;
  animation: float2 15s infinite ease-in-out;
}
.shape-green {
  width: 60px;
  height: 60px;
  background: #10b981;
  top: 30%;
  left: 60%;
  animation: float3 20s infinite ease-in-out;
}
.shape-red {
  width: 90px;
  height: 90px;
  background: #ef4444;
  bottom: -30px;
  right: 25%;
  animation: float4 17s infinite ease-in-out;
}

@keyframes float1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-60px, 40px) rotate(45deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes float2 {
  0% { transform: translate(0, 0); }
  50% { transform: translate(50px, -30px); }
  100% { transform: translate(0, 0); }
}
@keyframes float3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 50px) scale(1.2); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes float4 {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-40px, -20px) rotate(-45deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Counters / Fun Facts */
.fun-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  gap: 40px;
}
.fun-fact {
  flex: 1 1 200px;
}
.fun-fact .number {
  font-size: 2.5rem;
  font-weight: 700;
  /* numbers stand out on dark backgrounds using the accent colour */
  color: var(--accent-colour);
}
.fun-fact p {
  /* lighten text in dark sections */
  color: #d5e2f3;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  /* alle Karten werden gleich hoch */
  grid-auto-rows: 1fr;
  max-width: 1200px;
  margin: 0 auto;
}

/* Service Card */
.service-card {
  background: var(--muted-colour);
  border-radius: var(--border-radius);
  padding: 32px 24px;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%; /* passt die Kartenhöhe an die Grid-Zelle an */
}

.service-card i {
  font-size: 2rem;
  color: var(--primary-colour);
  margin-bottom: 16px;
}

.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  hyphens: auto;             /* Silbentrennung erlaubt */
  overflow-wrap: break-word;
  word-break: break-word;
}

.service-card p {
  color: var(--text-light);
  font-size: 0.9rem;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

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

/* About / Mission Section */
.about-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.about-text {
  flex: 1 1 400px;
}
.about-image {
  flex: 1 1 400px;
  text-align: center;
}
.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

/* CTA Appointment Section */
.cta {
  text-align: center;
  background: var(--primary-colour);
  color: var(--white);
  padding: 60px 20px;
  border-radius: var(--border-radius);
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.cta h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
.cta p {
  margin-bottom: 32px;
  color: var(--white);
}
.cta .btn-white {
  background: var(--white);
  color: var(--primary-colour);
  padding: 12px 28px;
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: background var(--transition-fast);
}
.cta .btn-white:hover,
.cta .btn-white:focus {
  background: #e6eefe;
}

/* Team Section */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.team-member {
  background: var(--muted-colour);
  border-radius: var(--border-radius);
  overflow: hidden;
  text-align: center;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.team-member img {
  width: 100%;
  height: auto;
}
.team-member h4 {
  font-size: 1.1rem;
  margin-top: 16px;
}
.team-member p {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 16px;
}
.team-member:hover,
.team-member:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

/* overlay shows name and role on hover, similar to template */
.team-member .overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* fill the card height so text can slide in from the bottom */
  height: 100%;
  background: rgba(2, 43, 94, 0.85);
  color: var(--white);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(100%);
  transition: transform var(--transition-fast);
  text-align: left;
}
.team-member:hover .overlay,
.team-member:focus-within .overlay {
  transform: translateY(0);
}

/* Testimonials */
.testimonials {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
.testimonial {
  background: var(--muted-colour);
  padding: 24px;
  border-radius: var(--border-radius);
  position: relative;
  font-size: 0.95rem;
}
.testimonial::before {
  content: "\201C";
  font-size: 3rem;
  position: absolute;
  top: -16px;
  left: 16px;
  color: var(--primary-colour);
}
.testimonial-author {
  margin-top: 12px;
  font-weight: 500;
  color: var(--dark-colour);
}

/* Footer */
footer {
  background: var(--dark-colour);
  color: var(--white);
  padding: 60px 20px;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.footer-brand p {
  margin-top: 16px;
  font-size: 0.9rem;
  color: #cbd4e0;
}
.footer-links ul {
  list-style: none;
  margin-top: 8px;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links a {
  color: #cbd4e0;
  font-size: 0.9rem;
}
.footer-links a:hover,
.footer-links a:focus {
  color: var(--white);
}
.footer-contact p {
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* ensure contact details in footer are legible on dark backgrounds */
.footer-contact h4,
.footer-contact p {
  color: #cbd4e0;
}
.opening-hours table {
  border-collapse: collapse;
  width: 100%;
  color: #cbd4e0;
  font-size: 0.9rem;
}
.opening-hours th,
.opening-hours td {
  padding: 4px;
}
/* Social icons */
.social-icons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.2rem;
  transition: background var(--transition-fast);
}
.social-icons a:hover,
.social-icons a:focus {
  background: rgba(255, 255, 255, 0.2);
}

/* Page hero for inner pages */
.page-hero {
  background: var(--muted-colour);
  padding: 100px 20px 60px;
  text-align: center;
}
.page-hero h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  font-weight: 700;
}
.page-hero p {
  color: var(--text-light);
  font-size: 1rem;
}

/* Fade-in animation classes for scroll reveal */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .hero-text h1 {
    font-size: 2.2rem;
  }
  .hero {
    padding-top: 60px;
  }
  .section-title {
    font-size: 1.6rem;
  }
  .cta {
    padding: 40px 20px;
  }
}

/* Mobile typography adjustments */
@media (max-width: 600px) {
  /* scale base font size slightly down for compact layout */
  html {
    font-size: 90%;
  }
  /* reduce section padding for smaller screens */
  section {
    padding: 60px 16px;
  }
  /* adjust generic headings */
  .section-title {
    font-size: 1.4rem;
  }
  .section-subtitle {
    font-size: 0.9rem;
    margin-bottom: 24px;
  }
  /* hero headings and text */
  .page-hero h1 {
    font-size: 2rem;
  }
  .page-hero p {
    font-size: 1rem;
  }
  .hero-text h1 {
    font-size: 2rem;
  }
  .hero-text p {
    font-size: 1rem;
  }
  /* services section typography */
  .service-card h3 {
    font-size: 1.05rem;
  }
  .service-card p {
    font-size: 0.85rem;
  }
  /* call-to-action section */
  .cta h2 {
    font-size: 1.6rem;
  }
  .cta p {
    font-size: 0.9rem;
  }
  /* team member cards */
  .team-member h4 {
    font-size: 1rem;
  }
  .team-member p {
    font-size: 0.85rem;
  }
  /* testimonial cards */
  .testimonials {
    gap: 24px;
  }
  .testimonial {
    font-size: 0.85rem;
  }
  .testimonial::before {
    font-size: 2.5rem;
    top: -12px;
    left: 12px;
  }
  /* contact section typography */
  .contact-details h2 {
    font-size: 1.4rem;
  }
  .contact-details h3 {
    font-size: 1.1rem;
  }
  .contact-details p {
    font-size: 0.9rem;
  }
  .opening-hours-list li {
    font-size: 0.9rem;
  }
  /* about section typography */
  .about-text h2 {
    font-size: 1.6rem;
  }
  .about-text p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* adjust page hero spacing and typography on small screens */
  .page-hero {
    padding: 60px 16px 40px;
  }
  .page-hero h1 {
    font-size: 1.8rem;
  }
  .page-hero p {
    font-size: 0.95rem;
  }

  /* generic legal text adjustments */
  /* scale headings and paragraphs on legal pages (e.g. Impressum, Datenschutz, Cookies, Barrierefreiheit) */
  h2 {
    font-size: 1.5rem;
  }
  p {
    font-size: 0.95rem;
    line-height: 1.6;
  }
  ul li,
  ol li {
    font-size: 0.95rem;
  }
}

/* -----------------------------------------
   Custom styling for the "Wichtige Hinweise" list
   This turns the unordered list into a responsive grid and
   adds coloured bullet points on desktop screens. On
   smaller screens it collapses to a single column.
*/
.important-notes {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  list-style: none;
}
.important-notes li {
  position: relative;
  padding-left: 24px;
  line-height: 1.6;
}
.important-notes li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary-colour);
  font-size: 1.2rem;
}
@media (min-width: 992px) {
  .important-notes {
    grid-template-columns: 1fr 1fr;
  }
}