/* Mobile-specific overrides extracted to keep desktop styles clean */

/* Apply a slight scale to keep desktop-like layout without horizontal scroll */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* Normalize paddings */
  .section { padding-top: 48px; padding-bottom: 48px; }
  .container, .wrapper, .content { padding-left: 16px; padding-right: 16px; }

  /* Hero: image directly after text, before actions */
  #hero .container { display: flex; flex-direction: column; }
  .hero-visual-grid { order: 2; margin-top: 12px; }
  .hero__actions { order: 3; margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }

  /* Match desktop feature colors on mobile */
  .features .card,
  .features #features-container .feature-card,
  .features #features-container .feature__card { background: var(--surface-color); border-color: var(--border-color); }
  .features .card h3,
  .features #features-container .feature-card h3,
  .features #features-container .feature__card h3,
  .features #features-container .feature__card .feature__title { color: var(--text-color); opacity: 1; text-shadow: none; }
  .features .card p,
  .features .card .card__desc,
  .features #features-container .feature-card p,
  .features #features-container .feature-card .feature-card__description,
  .features #features-container .feature__card p,
  .features #features-container .feature__card .feature__description { color: var(--muted-text); opacity: 1; }
  /* Ensure descriptions are visible on small screens (override any hidden/clamped styles) */
  .features .card .card__desc,
  .features .card .features__desc,
  .features .card .desc,
  .features .card p,
  .features #features-container .feature-card .feature-card__description,
  .features #features-container .feature-card .features__desc,
  .features #features-container .feature-card .desc,
  .features #features-container .feature-card p,
  .features #features-container .feature__card .feature__description,
  .features #features-container .feature__card .features__desc,
  .features #features-container .feature__card .desc,
  .features #features-container .feature__card p {
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: vertical !important;
  }
  /* Force black titles and softened black descriptions in LIGHT mode for better readability */
  html[data-theme="light"] .features h3,
  html[data-theme="light"] .features .card h3,
  html[data-theme="light"] .features .features__container .card h3,
  html[data-theme="light"] .features .card .card__title,
  html[data-theme="light"] .features #features-container .feature-card h3,
  html[data-theme="light"] .features #features-container .feature-card .card__title,
  html[data-theme="light"] .features #features-container .feature__card h3,
  html[data-theme="light"] .features #features-container .feature__card .card__title,
  html[data-theme="light"] .features #features-container .feature__card .feature__title { color: #000000 !important; }
  /* Descriptions: include multiple possible classnames and force opacity */
  html[data-theme="light"] .features .card .card__desc,
  html[data-theme="light"] .features .card .features__desc,
  html[data-theme="light"] .features .card .desc,
  html[data-theme="light"] .features .features__container .card .card__desc,
  html[data-theme="light"] .features .features__container .card .features__desc,
  html[data-theme="light"] .features .features__container .card .desc,
  html[data-theme="light"] .features .card p,
  html[data-theme="light"] .features .features__container .card p,
  html[data-theme="light"] .features #features-container .feature-card .feature-card__description,
  html[data-theme="light"] .features #features-container .feature-card p,
  html[data-theme="light"] .features #features-container .feature-card .desc,
  html[data-theme="light"] .features #features-container .feature-card .features__desc,
  html[data-theme="light"] .features #features-container .feature__card .feature__description,
  html[data-theme="light"] .features #features-container .feature__card p,
  html[data-theme="light"] .features #features-container .feature__card .desc,
  html[data-theme="light"] .features #features-container .feature__card .features__desc {
    color: #333333 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    display: block !important;
  }

  /* Hours section colors same as desktop theme variables */
  .hours__container { background: var(--surface-color); border-color: var(--border-color); }
  .hours__container h3, .hours__container .hours__header h3 { color: var(--text-color); }
  .hours__container .hours__day { background: rgba(255,255,255,0.6); border-color: var(--border-color); }
  [data-theme="dark"] .hours__container .hours__day,
  html.dark .hours__container .hours__day,
  html.theme-dark .hours__container .hours__day { background: #122535; }

  /* Dark mode: align hours section background with other sections (remove light gradient) */
  [data-theme="dark"] .hours,
  html.dark .hours,
  html.theme-dark .hours {
    background: transparent !important; /* match other sections */
  }
  /* Also ensure inner .container doesn't reintroduce light background */
  [data-theme="dark"] .hours .container,
  html.dark .hours .container,
  html.theme-dark .hours .container { background: transparent !important; }
  /* Remove decorative overlays in dark mode for consistency */
  [data-theme="dark"] .hours::before,
  html.dark .hours::before,
  html.theme-dark .hours::before { display: none !important; }
  /* Text colors in dark mode */
  [data-theme="dark"] .hours .section__title,
  html.dark .hours .section__title,
  html.theme-dark .hours .section__title {
    color: var(--text-color) !important;
    text-shadow: none !important;
    /* Remove any gradient text from base .section__title in dark mode */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
  }
  [data-theme="dark"] .hours .section__subtitle,
  html.dark .hours .section__subtitle,
  html.theme-dark .hours .section__subtitle { color: var(--muted-text) !important; text-shadow: none !important; }

  /* Dark mode: ensure map section title ("Dein Medikamenten-Lieferdienst in Deutschland") is light */
  [data-theme="dark"] .map__title,
  html.dark .map__title,
  html.dark-mode .map__title,
  html.theme-dark .map__title {
    color: #EAF1F7 !important;
    text-shadow: none !important;
  }

  /* Dark mode: ensure hours__schedule card is dark, not white */
  [data-theme="dark"] .hours .hours__schedule,
  html.dark .hours .hours__schedule,
  html.theme-dark .hours .hours__schedule {
    background: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 24px rgba(var(--shadow-color, 3,12,20), 0.35) !important;
  }

  /* Dark mode: fix schedule block inside hours section */
  [data-theme="dark"] .hours .schedule__title,
  html.dark .hours .schedule__title,
  html.theme-dark .hours .schedule__title {
    color: var(--text-color) !important;
    text-shadow: none !important;
  }
  [data-theme="dark"] .hours .schedule__title i,
  html.dark .hours .schedule__title i,
  html.theme-dark .hours .schedule__title i { color: var(--accent-color) !important; }

  [data-theme="dark"] .hours .schedule__time-block,
  html.dark .hours .schedule__time-block,
  html.theme-dark .hours .schedule__time-block {
    background: var(--surface-color) !important; /* consistent dark card */
    border-color: var(--border-color) !important;
  }
  [data-theme="dark"] .hours .schedule__time-block:hover,
  html.dark .hours .schedule__time-block:hover,
  html.theme-dark .hours .schedule__time-block:hover {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  [data-theme="dark"] .hours .schedule__time-block--closed,
  html.dark .hours .schedule__time-block--closed,
  html.theme-dark .hours .schedule__time-block--closed {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
  }
  [data-theme="dark"] .hours .time-block__label,
  html.dark .hours .time-block__label,
  html.theme-dark .hours .time-block__label {
    color: var(--text-color) !important;
    text-shadow: none !important;
  }
  [data-theme="dark"] .hours .separator__line,
  html.dark .hours .separator__line,
  html.theme-dark .hours .separator__line {
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.35), transparent) !important;
  }
  /* Ensure inner container uses dark surfaces */
  [data-theme="dark"] .hours__container,
  html.dark .hours__container,
  html.theme-dark .hours__container {
    background: var(--surface-color) !important;
    border-color: var(--border-color) !important;
  }
  /* Ensure headings inside hours container are readable in dark */
  [data-theme="dark"] .hours__container h3,
  [data-theme="dark"] .hours__container .hours__header h3,
  html.dark .hours__container h3,
  html.dark .hours__container .hours__header h3,
  html.theme-dark .hours__container h3,
  html.theme-dark .hours__container .hours__header h3 { color: var(--text-color) !important; text-shadow: none !important; }
  /* Make Arbeitszeiten heading smaller to fit on mobile and ensure solid color */
  .hours .section__title {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    /* Remove gradient text coming from base .section__title */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text-color) !important;
    margin-bottom: 0.75rem;
  }
  
  /* Extra small phones: reduce a bit more */
  @media (max-width: 480px) {
    .hours .section__title { font-size: clamp(18px, 5.5vw, 26px) !important; }
  }
  /* Match feature cards inside Arbeitszeiten to general surface */
  .hours .feature__card { background: var(--surface-color); border-color: var(--border-color); }
  html[data-theme="light"] .hours .feature__card { background: var(--surface-color); }

  /* Dark mode: make hours feature cards' text white for better contrast */
  [data-theme="dark"] .hours .feature__card h4,
  html.dark .hours .feature__card h4,
  html.dark-mode .hours .feature__card h4,
  html.theme-dark .hours .feature__card h4 { color: #EAF1F7 !important; }
  [data-theme="dark"] .hours .feature__card p,
  html.dark .hours .feature__card p,
  html.dark-mode .hours .feature__card p,
  html.theme-dark .hours .feature__card p { color: var(--muted-text) !important; }
  [data-theme="dark"] .hours .feature__card .feature__icon i,
  html.dark .hours .feature__card .feature__icon i,
  html.dark-mode .hours .feature__card .feature__icon i,
  html.theme-dark .hours .feature__card .feature__icon i { color: var(--accent-color) !important; }

  /* Cities section colors alignment */
  .cities .section__title { color: var(--text-color); }
  .cities .section__subtitle { color: var(--muted-text); }
  .cities__map-card, .cities__list-card { background: var(--surface-color); border-color: var(--border-color); }
  .city-chip, .cities .chip, .cities .badge { color: var(--text-color); border-color: var(--border-color); }

  /* Contact form alignment */
  .contact .section__title { color: var(--text-color); }
  .contact .section__subtitle { color: var(--muted-text); }
  .contact__form-input, .contact__form-textarea { background: #FFFFFF; color: #0F1C28; border-color: var(--border-color); }

  /* Footer headings on mobile (light mode) */
  html[data-theme="light"] .footer h3,
  html[data-theme="light"] .footer h4,
  html[data-theme="light"] .footer .footer__title,
  html[data-theme="light"] .footer .column-title,
  html[data-theme="light"] .footer .social__title { color: #000000 !important; }

  [data-theme="dark"] .contact__form-input, [data-theme="dark"] .contact__form-textarea,
  html.dark .contact__form-input, html.dark .contact__form-textarea,
  html.theme-dark .contact__form-input, html.theme-dark .contact__form-textarea { background: #152635; color: #EAF1F7; }

  /* Dark mode (mobile): make message textarea truly black with white text */
  [data-theme="dark"] .contact__form-textarea,
  html.dark .contact__form-textarea,
  html.dark-mode .contact__form-textarea,
  html.theme-dark .contact__form-textarea {
    /* Match other inputs in the same section */
    background: #152635 !important;
    color: #FFFFFF !important;
    border-color: var(--border-color) !important;
    caret-color: #FFFFFF !important;
  }
  /* Placeholder color in dark mode for readability */
  [data-theme="dark"] .contact__form-textarea::placeholder,
  html.dark .contact__form-textarea::placeholder,
  html.dark-mode .contact__form-textarea::placeholder,
  html.theme-dark .contact__form-textarea::placeholder {
    color: #B7C6D3 !important; /* same muted text tone */
  }
  /* Force actual textarea text to white with higher specificity in dark mode */
  [data-theme="dark"] .contact .contact__form-textarea,
  html.dark .contact .contact__form-textarea,
  html.dark-mode .contact .contact__form-textarea,
  html.theme-dark .contact .contact__form-textarea {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important; /* Safari */
  }
  /* Focus state in dark mode */
  [data-theme="dark"] .contact__form-textarea:focus,
  html.dark .contact__form-textarea:focus,
  html.dark-mode .contact__form-textarea:focus,
  html.theme-dark .contact__form-textarea:focus {
    outline: none !important;
    border-color: #3B82F6 !important; /* accent blue */
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
  }
}

/* Tablet and small landscape phones: keep single-column hero and full-width photo */
@media (max-width: 980px) {
  .hero-visual-grid { grid-template-columns: 1fr; gap: 20px; }
  /* Make hero image larger on mobile while staying within viewport */
  .photo-card { width: min(96vw, 780px); max-width: 100%; margin-inline: auto; }
  .photo-card img, .photo-card picture, .photo-card source { width: 100%; height: auto; display: block; }
}