/* =========================================================================
   Stomatologia MP — theme-extras.css
   Nadpisania i uzupełnienia dla integracji z WordPressem oraz nowych ikon.
   ========================================================================= */

/* --- WP admin bar ------------------------------------------------------- */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* --- Top bar — ikony inline -------------------------------------------- */
.topbar .svg-icon { vertical-align: -2px; margin-right: 6px; opacity: .75; }
.topbar .topbar__addr, .topbar .topbar__hours, .topbar .topbar__tel {
  display: inline-flex; align-items: center;
}
.topbar__emergency {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--coral); color: var(--white);
  padding: 3px 10px; border-radius: var(--r-full);
  font-weight: 600; font-size: .8rem;
  margin-left: 8px;
}

/* --- Nav submenu caret — zamiast emoji ▾ ------------------------------- */
.nav__item--has-children > .nav__link::after {
  content: ""; display: inline-block; width: 10px; height: 10px;
  margin-left: 6px; vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
  opacity: .6;
}

/* --- Przyciski — strzałka z SVG zamiast → ------------------------------ */
.btn .svg-icon { width: 16px; height: 16px; }
.btn.btn--lg .svg-icon { width: 18px; height: 18px; }
.btn.btn--ghost { display: inline-flex; align-items: center; gap: 8px; }
.btn__arrow { transition: transform .2s; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* usuwamy stare pseudo-arrow, ponieważ mamy SVG */
.service-card__link::after,
.card__link::after { content: none !important; }
.service-card__link, .card__link { display: inline-flex; align-items: center; gap: 6px; }
.service-card__link::before, .card__link::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  background: currentColor; margin-left: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  order: 2; transition: transform .2s;
}
.service-card:hover .service-card__link::before,
.card:hover .card__link::before { transform: translateX(4px); }

/* --- Testimonial — gwiazdki przez SVG zamiast znaków ★ ----------------- */
.testimonial__stars { display: flex; gap: 2px; color: var(--amber); }
.testimonial__stars .svg-icon { fill: var(--amber); stroke: var(--amber); }

/* --- Hero badge — gwiazdka SVG ----------------------------------------- */
.badge__star { color: var(--amber); fill: var(--amber); stroke: var(--amber); }

/* --- Kropka statusu ----------------------------------------------------- */
.dot.dot--coral { background: var(--coral); }

/* --- Footer ------------------------------------------------------------- */
.footer__contact { display: inline-flex; align-items: center; gap: 6px; }
.footer__contact .svg-icon { opacity: .75; }
.footer__social li a {
  display: inline-flex; align-items: center; gap: 8px;
}
.footer__social .svg-icon { opacity: .8; transition: opacity .2s, color .2s; }
.footer__social li a:hover .svg-icon { opacity: 1; color: var(--mint); }
.footer__legal { display: inline; }
.footer__legal li { display: inline; }
.footer__legal li + li::before { content: " · "; color: rgba(255,255,255,.3); }
.footer__legal a { color: #E5E7EB; }

/* --- FAQ — SVG plus/minus ---------------------------------------------- */
.faq__question::after {
  content: "" !important;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>") center/contain no-repeat;
  color: var(--teal-dark);
  transition: transform .2s;
}
.faq__item[open] .faq__question::after {
  content: "" !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>") center/contain no-repeat;
}

/* --- Breadcrumbs — ul/li override dla menu WP -------------------------- */
.breadcrumbs ul { display: inline-flex; gap: var(--s-2); }
.breadcrumbs li { list-style: none; }

/* --- WP navigation pagination stylizacja -------------------------------- */
.navigation.pagination .nav-links {
  display: flex; gap: 6px; align-items: center;
}
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: var(--r);
  color: var(--graphite); text-decoration: none;
}
.page-numbers:hover { border-color: var(--teal); color: var(--teal-dark); text-decoration: none; }
.page-numbers.current { background: var(--teal); color: var(--white); border-color: var(--teal); }

/* --- WP block gallery, captions — lekkie podstawy ----------------------- */
.wp-block-image img { border-radius: var(--r-md); }
.wp-caption-text, figcaption { color: var(--slate-light); font-size: .85rem; margin-top: 6px; }

/* --- Page content wrapper dla sekcji wewnątrz the_content() ------------ */
.page-content { }
.page-content > .section:first-child { padding-top: var(--s-7); }

/* --- Legal pages — max szerokość tekstu --------------------------------- */
.is-legal .page-content .container { max-width: var(--container-narrow); }

/* --- WP admin-bar fix dla topbara -------------------------------------- */
body.admin-bar .topbar { /* topbar nie jest sticky, więc nie wymaga offset */ }

/* --- Alignwide/full dla bloków WP -------------------------------------- */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* --- Inline service-card gap fix --------------------------------------- */
.service-card h3 { font-size: 1.15rem; }
.service-card p { min-height: 3.6em; }

/* --- Doctor card w stopce listy usług — zapobiegnij auto-bordering ----- */
.footer ul li { border: none; padding: 0; }
.footer ul { padding: 0; margin: 0; }

/* --- Email chroniony przed CF obfuscation ------------------------------ */
.mp-email { cursor: pointer; }
.mp-email[data-u][data-d]::before { content: none; }

/* --- Ikona SVG inline wstawiona do prozy ------------------------------- */
.svg-inline { display: inline-block; vertical-align: -3px; margin-right: 4px; opacity: .8; }

/* --- Formularze — gdy wpautop pozostał gdzieś włączony i wstawił śmieci
        (fallback safety net) ------------------------------------------- */
.form-card p > input,
.form-card p > textarea,
.form-card p > select { margin-bottom: 0; }

/* --- Cloudflare email obfuscation fallback (gdy CF już zmienił HTML) --- */
.__cf_email__ { font-family: var(--font-body); }

/* --- Poprawki dla inline ikon w topbar/footer/buttons ------------------ */
.topbar .svg-icon,
.footer__contact .svg-icon { stroke-width: 1.7; }
.btn .svg-icon + span,
.btn span + .svg-icon { margin-left: 2px; }

/* --- Hover na kartach usług — lepsza czytelność ikony ------------------ */
.service-card .service-card__icon svg { transition: transform .25s var(--ease); }
.service-card:hover .service-card__icon svg { transform: scale(1.05); }

/* --- Page content — lepszy reset marginesów dla sekcji ----------------- */
.page-content > section:first-child { margin-top: 0; }
.page-content { padding-bottom: 0; }

/* --- Split-right: sticky formularz (umów wizytę) ---------------------- */
@media (max-width: 960px) {
  [style*="position:sticky"] { position: static !important; }
}

/* --- Testimonial stars — wyrównanie dla SVG --------------------------- */
.testimonial__stars { letter-spacing: 0; }
.testimonial__stars .svg-icon { width: 16px; height: 16px; }

/* --- Ikony w topbar: oddziel ikonę od tekstu z odstępem -------------- */
.topbar__addr, .topbar__hours, .topbar__tel { gap: 6px; }

/* --- Footer __contact — ikonka + tekst --------------------------------- */
.footer__contact { gap: 6px; }

/* --- Hero badge star (mp_icon star) ma fill żółte ---------------------- */
.hero__badge .svg-icon.badge__star { width: 18px; height: 18px; }
.hero__badge { gap: var(--s-2); }

/* --- Eyebrow pod hero — odstęp ----------------------------------------- */
.hero__eyebrow { margin-bottom: var(--s-3); }

/* --- Gap w cta-band button ---------------------------------------------- */
.cta-band .btn { gap: 8px; }

/* --- Poprawka do .dot (używana w hero + footer) ----------------------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }