/* TMediCenter - Custom CSS (print, contrast, motion, mobile) */

/* ===== Base Link Reset - agresywny, na wypadek braku Tailwind CDN ===== */
a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

/* Linki w ciemnych sekcjach - jawnie białe, ALE nie przyciski z własnym tłem */
.bg-gray-800 a:not([class*="bg-"]),
.bg-gray-800 a:not([class*="bg-"]):link,
.bg-gray-800 a:not([class*="bg-"]):visited,
.bg-green-700 a:not([class*="bg-"]),
.bg-green-700 a:not([class*="bg-"]):link,
.bg-green-700 a:not([class*="bg-"]):visited,
.bg-green-800 a:not([class*="bg-"]),
.bg-green-800 a:not([class*="bg-"]):link,
.bg-green-800 a:not([class*="bg-"]):visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Linki w ciemnych sekcjach (footer telefony/email) */
.bg-gray-800 a.text-emerald-300,
.bg-gray-800 a[class*="text-emerald"] {
  color: #6ee7b7 !important;
}

/* Linki w hero overlay */
.absolute a,
.absolute a:link,
.absolute a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* CTA przyciski - jawne kolory */
.cta-btn,
.cta-btn:link,
.cta-btn:visited,
section.bg-green-800 a,
section.bg-green-800 a:link,
section.bg-green-800 a:visited {
  text-decoration: none !important;
}

/* Przyciski z kolorowym tłem - biały tekst */
a[class*="bg-green"],
a[class*="bg-emerald-6"],
a[class*="bg-emerald-7"],
a[class*="bg-blue"],
a[class*="bg-pink"],
a[class*="bg-red"],
a[class*="bg-purple"] {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Biały przycisk (telefon w CTA) */
a.bg-white,
a[class*="bg-white"] {
  color: #166534 !important;
  text-decoration: none !important;
}

/* Sticky CTA na dole */
.mobile-cta,
.mobile-cta:link,
.mobile-cta:visited,
.mobile-cta[href^="tel:"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

/* Top bar telefony - zawsze białe */
.header-topbar a,
.header-topbar a:link,
.header-topbar a:visited {
  color: #ffffff !important;
}

/* Nawigacja mobilna */
#mobile-menu a,
#mobile-menu a:link,
#mobile-menu a:visited {
  color: #1f2937 !important;
  text-decoration: none !important;
}

/* Nawigacja desktopowa */
nav.bg-green-700 a,
nav.bg-green-700 button {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Karty szybkiego dostępu */
a.group,
a.group:link,
a.group:visited {
  color: #1f2937 !important;
  text-decoration: none !important;
}

/* Sidebar linki */
.sidebar-link,
.sidebar-link:link,
.sidebar-link:visited {
  text-decoration: none !important;
}

/* iOS: wyłącz niebieskie podświetlenie tapnięcia */
a {
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari: force center crop on cover images (unless object-top specified) */
img.object-cover:not(.object-top) {
  object-position: center !important;
}

/* ===== Global Mobile Fixes ===== */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
}

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

/* ===== Responsive Tables (mobile card view) ===== */
@media (max-width: 640px) {
  .table-responsive-cards thead {
    display: none;
  }

  .table-responsive-cards tbody tr {
    display: block;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
  }

  .table-responsive-cards tbody tr:hover {
    background: #fffbeb;
  }

  .table-responsive-cards tbody td {
    display: block;
    padding: 4px 0;
    text-align: left !important;
    border: none;
  }

  .table-responsive-cards tbody td:first-child {
    font-weight: 600;
    padding-bottom: 2px;
  }

  .table-responsive-cards tbody td:last-child {
    color: #166534;
    font-size: 1.05rem;
  }

  .table-responsive-cards tbody td[colspan] {
    background: #f5f0e1;
    font-weight: 700;
    padding: 10px 16px;
    margin: 4px -16px;
    border-radius: 8px;
    color: #065f46;
  }
}

/* ===== Grafik mobile card view ===== */
@media (max-width: 640px) {
  .table-grafik thead {
    display: none;
  }

  .table-grafik tbody tr {
    display: block;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
  }

  .table-grafik tbody tr:nth-child(even) {
    background: #fafafa;
  }

  .table-grafik tbody td {
    display: block;
    padding: 2px 0;
    text-align: left !important;
    border: none;
  }

  .table-grafik tbody td:first-child {
    font-size: 1.05rem;
    margin-bottom: 2px;
  }

  .table-grafik tbody td:nth-child(2) {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 6px;
  }

  .table-grafik tbody td:last-child {
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 4px;
  }
}


/* ===== Print Header dla stron przygotowania do badań =====
   Logo Topolowej + adres widoczne tylko podczas druku
   (życzenie klienta: "w wersji do druku na górze po lewej logo, po prawej adres") */
.prep-print-header {
  display: none;
}

@media print {
  .prep-print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.4cm 0 0.6cm;
    margin: 0 0 0.6cm;
    border-bottom: 2.5pt solid #10b981;
    page-break-inside: avoid;
  }
  .prep-print-header img.prep-logo {
    height: 1.8cm;
    width: auto;
    object-fit: contain;
  }
  .prep-print-header .prep-addr {
    text-align: right;
    font-size: 10pt;
    line-height: 1.35;
    color: #000;
  }
  .prep-print-header .prep-addr strong {
    font-size: 11pt;
    color: #065f46;
  }
}

/* ===== Print Styles ===== */
@media print {
  #site-header,
  #site-sidebar,
  #site-footer,
  .mobile-cta,
  .skip-link,
  .breadcrumb,
  nav {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  table th,
  table td {
    border: 1px solid #000;
    padding: 4px 8px;
  }

  img {
    max-width: 100% !important;
  }
}

/* ===== High Contrast Mode ===== */
@media (prefers-contrast: more) {
  /* Only boost contrast on text elements, don't override link colors/decorations */
  body {
    color: #000000 !important;
    background: #ffffff !important;
  }

  /* Light background sections - add visible border */
  .bg-emerald-50,
  .bg-gray-50,
  .bg-gray-100 {
    border: 2px solid #000 !important;
  }

  /* Dark sections - keep their design, just boost contrast */
  .bg-gray-800,
  .bg-gray-900 {
    background-color: #000000 !important;
    color: #ffffff !important;
  }

  /* Dark section links stay light */
  .bg-gray-800 a,
  .bg-gray-900 a,
  .bg-green-700 a,
  .bg-green-800 a {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* Buttons get visible borders */
  button,
  .btn,
  [role="button"] {
    border: 2px solid currentColor !important;
  }

  img {
    filter: contrast(1.1);
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Focus Styles (accessibility) ===== */
*:focus-visible {
  outline: 3px solid #10b981;
  outline-offset: 2px;
}

/* ===== Skip Link ===== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 12px 24px;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* ===== Mobile Typography & Spacing (375px+) ===== */
@media (max-width: 639px) {
  /* Reduce base font size on mobile - 18px is too large for small screens */
  body {
    font-size: 1rem;
  }

  /* Tighter horizontal padding on narrow screens */
  .max-w-7xl {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Headings scale */
  h1 {
    font-size: 1.6rem !important;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.3rem !important;
    line-height: 1.25;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  /* Reduce padding on cards/sections */
  .bg-emerald-50[class*="p-6"],
  .bg-green-50[class*="p-6"],
  .bg-gray-50[class*="p-6"],
  section [class*="p-6"] {
    padding: 14px !important;
  }

  .bg-green-800[class*="p-8"],
  section[class*="bg-green"][class*="rounded-2xl"] {
    padding: 20px 14px !important;
  }

  /* Prose text slightly smaller */
  .prose p, .prose li,
  .text-lg {
    font-size: 1rem !important;
  }

  /* Table text */
  .table-responsive-cards tbody td {
    font-size: 0.9375rem;
  }

  /* Grid gaps tighter */
  .grid.gap-5,
  .grid.gap-6 {
    gap: 12px !important;
  }

  .grid.gap-8 {
    gap: 16px !important;
  }

  /* Card padding on grids */
  .grid [class*="p-6"] {
    padding: 12px !important;
  }

  /* Specjalizacje grid - single column on very narrow */
  .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 8px !important;
  }

  /* Global CTA sections on all pages */
  section.bg-green-800.rounded-2xl {
    padding: 20px 14px !important;
  }

  section.bg-green-800.rounded-2xl h2 {
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
  }

  section.bg-green-800.rounded-2xl p {
    font-size: 0.875rem !important;
    margin-bottom: 12px !important;
  }

  section.bg-green-800.rounded-2xl a {
    padding: 10px 20px !important;
    font-size: 1rem !important;
  }

  section.bg-green-800.rounded-2xl .flex {
    gap: 10px !important;
  }
}

/* ===== Mobile Section Spacing ===== */
@media (max-width: 639px) {
  /* Reduce vertical spacing between sections */
  main .mb-10 {
    margin-bottom: 1.5rem !important;
  }

  main .mb-8 {
    margin-bottom: 1.25rem !important;
  }

  /* Gallery grid images shorter on mobile */
  .grid img[class*="h-56"],
  .grid img[class*="h-64"] {
    height: 10rem !important;
  }

  /* Doctor card portraits - fixed height on mobile */
  article .flex-col img[class*="h-56"] {
    height: 14rem !important;
    max-width: 100%;
    display: block;
    border-radius: 0;
  }

  /* Doctor card image container - center on mobile */
  article .flex-col .bg-gray-50 {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
  }

  /* Personel grid portraits (recepcja) - no override, handled by Tailwind h-32/sm:h-64 */

  /* Contact info boxes tighter padding */
  address .text-xl {
    font-size: 1.1rem !important;
  }
}

/* ===== Header Mobile Compact ===== */
@media (max-width: 639px) {
  /* Compact top bar */
  .header-topbar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .header-topbar a {
    font-size: 0.75rem !important;
  }

  /* Social icons smaller on mobile */
  .header-topbar .social-icons svg {
    width: 16px;
    height: 16px;
  }
}

/* ===== Mobile Menu Scrollable ===== */
@media (max-width: 1023px) {
  #mobile-menu.open {
    display: block;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #mobile-menu ul li a,
  #mobile-menu ul li button {
    font-size: 1rem !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Less indentation on submenu */
  .mobile-submenu a {
    padding-left: 24px !important;
  }
}

/* ===== Hide Sidebar on Mobile ===== */
@media (max-width: 1023px) {
  #site-sidebar {
    display: none !important;
  }
}

/* ===== Sticky Mobile CTA ===== */
.mobile-cta {
  display: none;
}

@media (max-width: 768px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #166534;
    color: #ffffff;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  }

  /* Add bottom padding to body so content isn't hidden behind sticky CTA */
  body {
    padding-bottom: 56px;
  }

  /* CTA buttons should never overflow */
  .cta-btn,
  section[class*="bg-green"] .flex-col a {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* Reduce CTA section padding on mobile */
  section[class*="bg-green"][class*="rounded-2xl"] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

}

/* ===== Header stacking context for dropdowns ===== */
#site-header {
  position: relative;
  z-index: 40;
}

/* ===== Dropdown menu styles ===== */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 220px;
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 8px 0;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-dropdown.open {
  display: block;
}

nav .nav-dropdown a,
nav .nav-dropdown a:link,
nav .nav-dropdown a:visited,
nav .nav-dropdown a:active {
  display: block;
  padding: 10px 20px;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.15s;
}

nav .nav-dropdown a:hover,
nav .nav-dropdown a:focus {
  background-color: #fef9e7;
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
}

/* ===== Mobile menu ===== */
#mobile-menu {
  display: none;
}

#mobile-menu.open {
  display: block;
}

/* ===== Active page highlight ===== */
.nav-link.active {
  color: #10b981;
  border-bottom: 3px solid #10b981;
}

/* ===== Sidebar styles ===== */
.sidebar-link {
  display: block;
  padding: 12px 16px;
  color: #1a1a1a;
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 1.0625rem;
  transition: all 0.15s;
}

.sidebar-link:hover,
.sidebar-link:focus,
.sidebar-link.active {
  background-color: #fef9e7;
  border-left-color: #10b981;
  color: #10b981;
}

/* ===== Listki (zielony listek zamiast kropek) =====
   Klasa dla list chorób / zakresu konsultacji / wskazań - zgodnie z
   życzeniem klienta: "od listków a nie od kropek" przy chorobach. */
.list-leaf {
  list-style: none !important;
  padding-left: 0;
  margin-left: 0;
}

.list-leaf > li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.list-leaf > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.2rem;
  height: 1.2rem;
  /* Oryginalny listek z logo Topolowej (życzenie klientki - nie "baloniki") */
  background-image: url('../images/cropped-LogoTMC1-192x192.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3px;
}

/* W ciemnych sekcjach listek ma być jaśniejszy */
.bg-gray-800 .list-leaf > li::before,
.bg-green-700 .list-leaf > li::before,
.bg-green-800 .list-leaf > li::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236ee7b7"><path d="M20.5 3.5c-2 0-7 .5-10.5 4-3 3-4 6.5-4 10 0 1 .1 2 .3 3l-1.5 1.5 1.4 1.4L7.7 22c.9.2 1.9.3 2.8.3 3.5 0 7-1 10-4 3.5-3.5 4-8.5 4-10.5V3.5h-4zM10.5 17.5c-.2-.6-.3-1.2-.3-1.9 0-2 .8-4.3 2.5-6 1.5-1.5 3.5-2.4 5.4-2.7-.3 1.9-1.2 3.9-2.7 5.4-1.6 1.6-3.8 2.6-5.9 2.7-.1.2-.6.2.0.5z"/></svg>');
}