/* ============================================================
 Tokeny design systemu Salon Dorothy.
 Złoty CTA, ciemny akcent, body 20px. 
 ============================================================ */
:root {
    --sd-gold: #c9a76d;
    --sd-gold-dark: #a8895a;
    --sd-text-dark: #1a1a1a;
    --sd-text-light: #ffffff;
    --sd-section-gap: clamp(44px, 5.5vw, 80px);
    --sd-scrim: 0.66;
    --sd-cta-font-size: clamp(18px, 1.1vw + 12px, 24px);
    --sd-link-tile-font: "Baloo 2", sans-serif;
    --sd-link-tile-font-size: 1.2em;
}

/* ============================================================
 Tło treści — ZAWSZE białe (ujednolicenie).
 Część legacy stron (o-nas, zespol, kontakt, formularz-wizyt,
 pytania-i-odpowiedzi) ma per-stronowe ciemne tło #0b0b0b na
 body/#dplf-main-content (inline CSS Stylory) → tekst nieczytelny.
 Wymuszamy białe. Sekcje Elementora z własnym tłem (bannery,
 hero z grafiką) malują po wierzchu, więc nie są tknięte.
 `!important` bije inline (#dplf-main-content = ID, bez !important).
 ============================================================ */
body,
#dplf-main-content,
.dplf-main-content-inner,
.dplf-page-content {
    background-color: #ffffff !important;
}

#dplf-site-header-nav .sf-menu .sub-menu {
    min-width: 320px !important;
    max-width: 400px !important;
}

#dplf-site-header-nav .sf-menu .sub-menu li,
#dplf-site-header-nav .sf-menu .sub-menu li > a,
#dplf-site-header-nav .sf-menu .sub-menu .dplf-menu-item-text {
    white-space: normal !important;
    line-height: 1.4;
    word-wrap: break-word;
}

#dplf-site-header-nav .sf-menu .sub-menu li > a {
    padding: 10px 20px !important;
}

#dplf-site-header-nav .sf-menu > li.menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#dplf-site-header-nav .sf-menu > li.menu-item-has-children > a::after {
    content: "\ea4e";
    font-family: "remixicon";
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: 1;
    display: inline-block;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

#dplf-site-header-nav .sf-menu > li.menu-item-has-children:hover > a::after,
#dplf-site-header-nav .sf-menu > li.menu-item-has-children.sfHover > a::after {
    transform: rotate(180deg);
}

#dplf-site-header-nav .sf-menu .sub-menu li.menu-item-has-children > a {
    position: relative;
    padding-right: 32px !important;
}

#dplf-site-header-nav .sf-menu .sub-menu li.menu-item-has-children > a::after {
    content: "\ea6e";
    font-family: "remixicon";
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: 1;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.elementor-nav-menu--dropdown {
    min-width: 320px !important;
    max-width: 400px !important;
    white-space: normal !important;
}

.elementor-nav-menu--dropdown li,
.elementor-nav-menu--dropdown .elementor-sub-item {
    white-space: normal !important;
    line-height: 1.4;
    padding: 10px 18px !important;
}

.elementor-nav-menu .menu-item-has-children > a .sub-arrow {
    display: inline-block !important;
    margin-left: 6px;
    opacity: 1 !important;
    visibility: visible !important;
}

.elementor-nav-menu .menu-item-has-children > a .sub-arrow svg {
    width: 0.75em;
    height: 0.75em;
    fill: currentColor;
    transition: transform 0.25s ease;
}

.elementor-nav-menu > li.menu-item-has-children:hover > a .sub-arrow svg {
    transform: rotate(180deg);
}

.elementor-nav-menu .sub-menu .menu-item-has-children > a .sub-arrow svg {
    transform: rotate(-90deg);
}

/* ============================================================
 Auto-link blocks ([peruki_miasta], [peruki_typy])
 ============================================================ */

.dorothy-auto-links {
    --dorothy-cols: 4;
    margin: 3rem 0;
    padding: 1.5rem 1rem;
    background: none;
    border: none;
    border-radius: 0;
}

@media (max-width: 600px) {
    .dorothy-auto-links {
        padding: 1.25rem 0.75rem;
        margin: 2rem 0;
    }
}

.dorothy-auto-links__title {
    margin: 0 0 5%;
    line-height: 1.2;
    text-align: center;
}

.dorothy-auto-links__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(var(--dorothy-cols), minmax(0, 1fr));
    align-items: stretch;
    gap: 0.6rem;
}

@media (max-width: 1100px) {
    .dorothy-auto-links__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .dorothy-auto-links__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    .dorothy-auto-links__list { grid-template-columns: 1fr; }
}

.dorothy-auto-links__item {
    margin: 0;
    display: flex;
}

/* Linkowanie miast/typów — siatka równych kafelków.
   grid auto-fit + minmax: kolumny równej szerokości
   wypełniają kontener; ostatni, niepełny wiersz NIE rozciąga kafelków
   (zostają takie jak reszta), a przy małej liczbie kafelków puste tory
   znikają i kafelki wypełniają całą szerokość. */
.dorothy-auto-links--miasta .dorothy-auto-links__list,
.dorothy-auto-links--typy .dorothy-auto-links__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 0.6rem !important;
    align-items: stretch;
    justify-content: stretch;
}

.dorothy-auto-links--miasta .dorothy-auto-links__item,
.dorothy-auto-links--typy .dorothy-auto-links__item {
    min-width: 0;
    display: flex;
}

/* Widget shortcode linkowania ma wypełniać kontener. Część bloków siedzi w
   kontenerach flex-row (space-evenly) z jednym dzieckiem → widget brałby
   szerokość treści i był centrowany. Wymuszamy 100% (działa też w kontenerach
   kolumnowych). */
.elementor-widget-shortcode:has(.dorothy-auto-links) {
    width: 100% !important;
}
.dorothy-auto-links {
    width: 100%;
}

.dorothy-auto-links--miasta .dplf-button-wrapper .dplf-button-link,
.dorothy-auto-links--miasta .dplf-button-wrapper .dplf-button-link:link,
.dorothy-auto-links--miasta .dplf-button-wrapper .dplf-button-link:visited,
.dorothy-auto-links--typy .dplf-button-wrapper .dplf-button-link,
.dorothy-auto-links--typy .dplf-button-wrapper .dplf-button-link:link,
.dorothy-auto-links--typy .dplf-button-wrapper .dplf-button-link:visited {
    width: 100% !important;
    min-width: 0;
    min-height: 52px !important;
    padding: 0.6rem 1rem !important;
    font-family: var(--sd-link-tile-font);
    font-size: var(--sd-link-tile-font-size);
    line-height: 1.1;
    letter-spacing: 0;
    word-break: normal;
    hyphens: none;
    flex-direction: row;
}

/* ============================================================
 [zespol_kafelki] — siatka kart członków zespołu
 ============================================================ */

.dorothy-team-grid {
    --dorothy-cols: 4;
    margin: 3rem 0;
}

.dorothy-team-grid__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    margin: 0 0 1.75rem;
    line-height: 1.25;
    text-align: center;
    color: #2a2a2a;
}

.dorothy-team-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--dorothy-cols), minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .dorothy-team-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .dorothy-team-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    .dorothy-team-grid__list { grid-template-columns: 1fr; }
}

.dorothy-team-tile {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #ece8df;
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dorothy-team-tile:hover,
.dorothy-team-tile:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.25);
    border-color: #d4caa6;
}

.dorothy-team-tile__photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f3efe6;
}

.dorothy-team-tile__photo .dorothy-team-tile__img,
.dorothy-team-tile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.dorothy-team-tile:hover .dorothy-team-tile__photo img {
    transform: scale(1.04);
}

.dorothy-team-tile__photo--placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3efe6 0%, #e9e1cf 100%);
}

.dorothy-team-tile__body {
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dorothy-team-tile__name {
    font-size: clamp(1.1rem, 0.95rem + 0.3vw, 1.3rem);
    margin: 0;
    line-height: 1.25;
    color: #1a1a1a;
}

.dorothy-team-tile__name a {
    color: inherit;
    text-decoration: none;
}

.dorothy-team-tile__name a:hover,
.dorothy-team-tile__name a:focus-visible {
    text-decoration: underline;
}

.dorothy-team-tile__role {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #6a6457;
    font-weight: 500;
}

.dorothy-team-tile__desc {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4a4a4a;
    flex: 1;
}

.dorothy-team-tile__button {
    margin-top: auto;
    align-self: center;
    min-width: 8rem;
    padding: 0.55rem 1.4rem !important;
    font-size: 0.875rem !important;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* Button w kafelku zespołu — outline (białe tło, czarny border).
 `!important` żeby pobić globalny.dplf-button-link override. */
.dorothy-team-tile .dorothy-team-tile__button.dplf-button-link,
.dorothy-team-tile .dorothy-team-tile__button.dplf-button-link:link,
.dorothy-team-tile .dorothy-team-tile__button.dplf-button-link:visited {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
}

.dorothy-team-tile .dorothy-team-tile__button.dplf-button-link:hover,
.dorothy-team-tile .dorothy-team-tile__button.dplf-button-link:focus-visible {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #1a1a1a !important;
}

/* Span wewnątrz buttonu kafelka — domyślnie globalny override
 ustawia color: #ffffff na.dplf-button-text, ale w outline state
 ma być ciemny (dziedziczy color z buttona). */
.dorothy-team-tile .dorothy-team-tile__button.dplf-button-link .dplf-button-text {
    color: inherit !important;
}

/* ============================================================
 Podstrony zespołu — szczegóły członka zespołu.
 Layout: portret (z featured_media) + opis + button powrotu.
 Wszystko wycentrowane w poziomie, max-width 900px na container.
 ============================================================ */

.elementor-element.dorothy-team-detail,
.dorothy-team-detail--single {
    text-align: center;
}

/* Wariant statyczny (single-team_member.php, bez Elementora) */
.dorothy-team-detail--single {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.dorothy-team-detail--single .dorothy-team-detail__photo {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.dorothy-team-detail--single .dorothy-team-detail__photo img {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}

.dorothy-team-detail--single .dorothy-team-detail__role {
    margin: 0;
    font-size: 1rem;
    color: #6a6457;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.dorothy-team-detail--single .dorothy-team-detail__desc {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 1rem;
    color: #2a2a2a;
}

.dorothy-team-detail--single .dorothy-team-detail__desc p {
    margin: 0 0 1em;
}

.dorothy-team-detail--single .dorothy-team-detail__desc p:last-child {
    margin-bottom: 0;
}

.dorothy-team-detail--single .dorothy-team-detail__spacer {
    height: 1.5rem;
}

.dorothy-team-detail--single .dorothy-team-detail__back {
    align-self: center;
    min-width: 14rem;
}

.elementor-element.dorothy-team-detail__photo {
    margin: 0 auto 1.5rem;
    width: 100%;
    max-width: 320px;
}

.elementor-element.dorothy-team-detail__photo .dplf-image,
.elementor-element.dorothy-team-detail__photo .dplf-image-wrapper {
    width: 100%;
    text-align: center;
}

.elementor-element.dorothy-team-detail__photo .dplf-image-wrapper-inner {
    display: block;
    width: 100%;
}

.elementor-element.dorothy-team-detail__photo .dplf-image-wrapper-inner img {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin: 0 auto;
    border-radius: 0;
}

.elementor-element.dorothy-team-detail__desc {
    max-width: 720px;
    margin: 0 auto !important;
    text-align: center;
}

.elementor-element.dorothy-team-detail__desc .elementor-widget-container,
.elementor-element.dorothy-team-detail__desc p {
    text-align: center;
    line-height: 1.7;
    font-size: 1rem;
    color: #2a2a2a;
}

.elementor-element.dorothy-team-detail__back {
    margin-top: 0;
    text-align: center;
}

.elementor-element.dorothy-team-detail__back .dplf-button-wrapper {
    display: flex;
    justify-content: center;
}

/* ============================================================
 Elementor image-gallery — pełna szerokość + spójne proporcje.
 Używamy aspect-ratio (nie fixed height) żeby obrazki zawsze
 były proporcjonalne do faktycznej szerokości kolumny —
 niezależnie od tego, jak motyw zwęża content area.
 ============================================================ */

.elementor-widget-image-gallery .elementor-image-gallery .gallery {
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(var(--dorothy-gallery-cols, 3), minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

/* Honor original gallery_columns setting if walker / WP set it */
.elementor-widget-image-gallery .elementor-image-gallery .gallery.gallery-columns-2 { --dorothy-gallery-cols: 2; }
.elementor-widget-image-gallery .elementor-image-gallery .gallery.gallery-columns-3 { --dorothy-gallery-cols: 3; }
.elementor-widget-image-gallery .elementor-image-gallery .gallery.gallery-columns-4 { --dorothy-gallery-cols: 4; }
.elementor-widget-image-gallery .elementor-image-gallery .gallery.gallery-columns-5 { --dorothy-gallery-cols: 5; }
.elementor-widget-image-gallery .elementor-image-gallery .gallery.gallery-columns-6 { --dorothy-gallery-cols: 6; }

@media (max-width: 900px) {
    .elementor-widget-image-gallery .elementor-image-gallery .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .elementor-widget-image-gallery .elementor-image-gallery .gallery {
        grid-template-columns: 1fr;
    }
}

.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block;
}

.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item .gallery-icon {
    width: 100%;
    display: block;
    line-height: 0;
    margin: 0;
}

.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item .gallery-icon a {
    display: block;
    width: 100%;
}

.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0;
    display: block;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Wymusimy kwadratowy aspekt na pojemniku — wszystkie kafelki tego samego
 rozmiaru, niezależnie czy oryginalny obrazek portrait czy landscape.
 `object-fit: cover` przytnie do środka, ale w spójnym rozmiarze. */
.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item {
    aspect-ratio: 1 / 1;
}

.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item .gallery-icon,
.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item .gallery-icon a {
    height: 100% !important;
}

.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-item:hover img {
    transform: scale(1.02);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
}

/* Caption pod obrazem — czytelna, na pełną szerokość kafelka */
.elementor-widget-image-gallery .elementor-image-gallery .gallery .gallery-caption {
    margin: 0.5rem 0 0 !important;
    font-size: 0.85rem;
    color: #6a6457;
    text-align: center;
    line-height: 1.4;
}

/* ============================================================
 Nagłówki h1-h6 w treści — Google Font "Forum"
 Scope: <article> +.entry-content (czyli content stron/postów,
 bez header/footer/menu).
 ============================================================ */

article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
article .elementor-heading-title,
.entry-content .elementor-heading-title {
    font-family: 'Forum', Georgia, 'Times New Roman', serif !important;
}

/* ============================================================
 Reset text-shadow w treści — Stylora/Elementor czasem dziedziczy
 dekoracyjny shadow z motywu, który na content czytania wygląda
 jak nieczytelny błąd. Wymuszamy plain text.
 ============================================================ */

article .elementor-widget-text-editor,
article .elementor-widget-text-editor p,
article .elementor-widget-text-editor li,
article .elementor-widget-text-editor span,
.entry-content .elementor-widget-text-editor,
.entry-content .elementor-widget-text-editor p,
.entry-content .elementor-widget-text-editor li {
    text-shadow: none !important;
}

/* Hero text na ciemnym tle — biały kolor.
 Heurystyka: widget text-editor wewnątrz kontenera z classic
 background (zdefiniowanym przez data-settings) → biały tekst. */
.e-con.sd-has-bg-image .elementor-widget-text-editor,
.e-con.sd-has-bg-image .elementor-widget-text-editor p,
.e-con.sd-has-bg-image .elementor-widget-text-editor li,
.e-con.sd-dark-bg .elementor-widget-text-editor,
.e-con.sd-dark-bg .elementor-widget-text-editor p,
.e-con.sd-dark-bg .elementor-widget-text-editor li,
.e-con.sd-bg-missing .elementor-widget-text-editor,
.e-con.sd-bg-missing .elementor-widget-text-editor p,
.e-con.sd-bg-missing .elementor-widget-text-editor li {
    color: var(--sd-text-light) !important;
}

/* ============================================================
 Typografia content — GLOBALNIE (wpisy, strony, landingi, hp).
 body ma być WIĘKSZY — 20px / line-height 1.55.
 p, li,.dplf-desc { font-size: 20px; font-weight: 400; line-height: 1.55 }
 Stosujemy PX (nie em — żeby nested parents nie multiplikowały).
 Headings (h2-h6) zachowują własną hierarchię — 
 ============================================================ */

article p,
article li,
article strong,
article em,
article b,
article i,
article span:not(.elementor-icon-list-text):not(.elementor-button-text):not(.dplf-button-text):not(.delimiter):not(.current):not(.sd-cta-phone),
article .dplf-desc,
.entry-content p,
.entry-content li,
.entry-content strong,
.entry-content em,
.entry-content b,
.entry-content i,
.entry-content span:not(.dplf-button-text):not(.sd-cta-phone),
.entry-content .dplf-desc,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor strong,
.elementor-widget-text-editor em,
.elementor-widget-text-editor span,
.elementor-widget-text-editor .dplf-desc,
.elementor-widget-container > p,
.elementor-widget-container > ul li,
.elementor-widget-container > ol li {
    font-family: var(--dplf-font-body, inherit) !important;
    font-size: 20px !important;
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 0.6em;
}

article strong,
article b,
.entry-content strong,
.entry-content b,
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
    font-weight: 700 !important;
}

/* ============================================================
 Wzmocniony override dla tekstów w widgetach Elementor —
 gdy ktoś wybrał custom typography w settings widgetu
 (np. Baloo 2 + 22px na text-editor / dplf_heading) Elementor
 generuje per-widget CSS o wyższej specyficzności.
 Wymuszamy 17px + body font NIEZALEŻNIE od widget-level overrides.
 ============================================================ */

article .elementor-widget-container > p,
article .elementor-widget-container > ul > li,
article .elementor-widget-container > ol > li,
article .elementor-widget-text-editor .elementor-widget-container p,
article .elementor-widget-text-editor .elementor-widget-container li,
article .dplf-desc,
article .dplf-text-editor p,
article .dplf-text-editor li,
article p:not(.dplf-button-text):not(.elementor-button-text):not(.sd-auto-toc__title),
article li:not(.elementor-icon-list-item):not(.menu-item) {
    font-family: var(--dplf-font-body, inherit) !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
}

/* Stylora h4 = 22px (default body.css linia 960). Zachowujemy hierarchię
 z naszej reguły wyżej (h4 ≈ 1.15-1.35rem clamp). */
article h4,
article .entry-content h4,
article .elementor-widget-heading h4.elementor-heading-title,
article .elementor-widget-text-editor h4,
.dorothy-auto-links__title {
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem) !important;
}

/* ============================================================
 Text-editor widget — typografia ustawiona na poziomie WIDGETU
 (przez Elementor settings: typography_font_size = 22px, Baloo)
 dziedziczy się na wszystkie children: <p>, <li>, ale TEŻ <div>
 bez klasy (raw text node opakowany przez WP autop w div, nie p).

 Wymuszamy font-size i family na samym WIDGECIE + na wszystkich
 <div> bezpośrednich potomków. Children którzy mają własną
 typography wciąż mogą wygrać przez większą specyficzność, ale
 dla naszego "raw div" content tutaj 17px wygrywa.
 ============================================================ */

article .elementor-widget-text-editor,
article .elementor-widget-text-editor > .elementor-widget-container,
article .elementor-widget-text-editor > .elementor-widget-container > div,
article .elementor-widget-text-editor div:not([class]),
article .elementor-widget-text-editor .elementor-widget-text-editor,
article .elementor-widget-text-editor .elementor-widget-text-editor > div {
    font-family: var(--dplf-font-body, inherit) !important;
    font-size: 20px !important;
    line-height: 1.55 !important;
}

/* Hierarchia rozmiarów nagłówków w content (h1 = titlebar) */
article .entry-content h2,
article .elementor-widget-text-editor h2,
.entry-content h2 {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
    line-height: 1.25;
    margin: 2.2em 0 0.55em;
}
article .entry-content h3,
article .elementor-widget-text-editor h3,
.entry-content h3 {
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.65rem);
    line-height: 1.3;
    margin: 1.5em 0 0.5em;
}
article .entry-content h4,
article .elementor-widget-text-editor h4,
.entry-content h4 {
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    line-height: 1.35;
    margin: 1.3em 0 0.45em;
}
article .entry-content h5,
article .elementor-widget-text-editor h5,
.entry-content h5 {
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 1.1em 0 0.4em;
}
article .entry-content h6,
article .elementor-widget-text-editor h6,
.entry-content h6 {
    font-size: 1em;
    line-height: 1.45;
    margin: 1em 0 0.4em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Listy w treści — ZAWSZE do lewej, niezależnie od:
 - Elementor widget align settings (text-editor z align: center daje
 text-align: center na całym widgecie)
 - parent containera Elementor z flex_align lub text_align: center
 Tylko ul/ol/li scope, więc inne CTA centered nie są tknięte. */

article ul,
article ol,
.entry-content ul,
.entry-content ol,
.elementor-element ul,
.elementor-element ol,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-widget-container ul,
.elementor-widget-container ol {
    text-align: left !important;
    list-style-position: outside;
    padding-left: 1.4em;
    margin: 0 0 1em;
}

/* li-level override — najwyższy priorytet, łapie przypadki gdy ktoś
 ustawił text-align: center bezpośrednio na <li> przez inline-style
 lub gdy widget Elementora wstrzykuje style na li. */
article ul > li,
article ol > li,
.entry-content ul > li,
.entry-content ol > li,
.elementor-element ul > li,
.elementor-element ol > li,
.elementor-widget-text-editor ul > li,
.elementor-widget-text-editor ol > li,
.elementor-widget-container ul > li,
.elementor-widget-container ol > li {
    text-align: left !important;
    margin-bottom: 0.4em;
}

/* Pozostawiamy elementor-icon-list — to specyficzny widget Elementor
 z własnym layoutem (ikona + tekst), nie standardowy <ul>. */
.elementor-icon-list-items.elementor-inline-items > li {
    text-align: initial !important;
}

/* ============================================================
 Meta-blok wpisu — wąsko stylowany child theme content-meta.php.
 Bez linka pod datą/kategorią, bez autora.
 ============================================================ */

.entry-post-meta .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.875rem;
    color: #6a6457;
}

.entry-post-meta .post-meta-date,
.entry-post-meta .post-meta-category {
    display: inline-flex;
    align-items: center;
}

.entry-post-meta .post-meta-category::before {
    content: '·';
    margin-right: 0.6rem;
    opacity: 0.6;
}

.entry-post-meta .post-meta > :first-child::before {
    content: none;
}

/* ============================================================
 Auto-TOC (Spis treści) — generowany w functions.php przed h2
 ============================================================ */

.sd-auto-toc {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.5rem;
    background: #fafaf7;
    border-left: 3px solid #d4caa6;
    border-radius: 0;
}

.sd-auto-toc__title {
    margin: 0 0 0.9rem !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #2a2a2a;
    text-transform: none;
    line-height: 1.35;
}

.sd-auto-toc__list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0 0.5rem;
}

.sd-auto-toc__list .sd-auto-toc__list {
    padding-left: 1.1em;
    margin-top: 0.25rem;
    border-left: 1px solid #ece8df;
}

.sd-auto-toc__item {
    margin: 0.5rem 0;
}

.sd-auto-toc__link {
    color: #2a2a2a;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.55;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.sd-auto-toc__link:hover,
.sd-auto-toc__link:focus-visible {
    color: #1a1a1a;
    border-bottom-color: #6a6457;
}

/* ============================================================
 Linkowanie/siatka buttonów w Elementor — TYLKO containers
 które zawierają WIELE `dplf_button` widgetów obok siebie
 (np. /trychologia/ ma 9 buttonów do podstron).

 `:has` — selektor relacyjny, scopuje regułę tylko gdy
 wewnątrz są >=2 buttony. Containers z mieszanym layoutem
 (obraz+tekst+button) nie dostają wymuszonego center+wrap.
 ============================================================ */

/* Każdy kontener Elementora, który trzyma >=2 sąsiednie `dplf_button`,
 układa je POZIOMO (obok siebie) + zawija. Nowe kontenery Elementora
 domyślnie mają flex-direction: column → bez tego przyciski stoją w
 pionie (pod sobą). Bez wymogu przodka article/entry-content, bo nie
 każdy layout Stylory opakowuje content w <article>. */
.e-con:has(> .elementor-widget-dplf_button + .elementor-widget-dplf_button) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.6rem 0.75rem !important;
}

/* Siatka buttonów w grid layout — analogicznie, tylko z >=2 buttonami */
article .e-con-full.e-grid:has(> .elementor-widget-dplf_button + .elementor-widget-dplf_button),
.entry-content .e-con-full.e-grid:has(> .elementor-widget-dplf_button + .elementor-widget-dplf_button) {
    justify-content: center;
    gap: 0.6rem 0.75rem;
    padding-bottom: 2.5rem;
    margin-bottom: 1rem;
}

/* ============================================================
 Stylora dplf-button — czytelny kontrast.
 Domyślny widget motywu w niektórych skórkach traci kontrast
 (białe na jasnym tle albo odwrotnie). Wymuszamy czytelny
 wariant; do nadpisania per-page jeśli trzeba.
 ============================================================ */

.dplf-button-wrapper .dplf-button-link,
.dplf-button-wrapper .dplf-button-link:link,
.dplf-button-wrapper .dplf-button-link:visited {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    padding: 1.05rem 2.4rem;
    background: var(--sd-gold, #c9a76d) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none;
    font-size: 1.05rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dplf-button-wrapper .dplf-button-link:hover,
.dplf-button-wrapper .dplf-button-link:focus-visible {
    background: var(--sd-gold-dark, #a8895a) !important;
    color: #ffffff !important;
}

.dplf-button-wrapper .dplf-button-text {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Druga linia w CTA hero — numer telefonu większą czcionką pod tekstem.
 Markup wstrzykuje walker/redeploy: <span class="dplf-button-text">Umów się
 na wizytę<br><span class="sd-cta-phone">+48 508 337 910</span></span>. */
.dplf-button-wrapper .dplf-button-text .sd-cta-phone {
    display: block;
    margin-top: 0.15em;
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dplf-button-wrapper .dplf-button-text br + *,
.dplf-button-wrapper .dplf-button-text br {
    display: block;
}

.dplf-button-wrapper .dplf-button-text br {
    line-height: 0.5;
}

/* ============================================================
 Cennik — statyczne tabele zastępujące TablePress (klasa
.dorothy-cennik, generowane przez fix_tablepress_to_html /
 fix_cennik_json). Czysty, czytelny układ: pełna szerokość,
 złoty akcent nagłówka, naprzemienne wiersze, cena do prawej.
 border-radius 0 zgodnie z design systemem.
 ============================================================ */

.dorothy-cennik-wrap {
    margin: 1.75rem 0;
    overflow-x: auto;
}

.dorothy-cennik {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e6dfce;
    font-size: 1.05rem;
    background: #ffffff;
}

.dorothy-cennik caption.dorothy-cennik__caption {
    caption-side: top;
    text-align: left;
    font-family: 'Forum', Georgia, serif;
    font-size: 1.25rem;
    color: var(--sd-text-dark, #1a1a1a);
    padding: 0 0 0.6rem;
    text-transform: capitalize;
}

.dorothy-cennik th,
.dorothy-cennik td {
    padding: 0.7rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid #efe9da;
    line-height: 1.4;
    vertical-align: top;
}

.dorothy-cennik thead th {
    background: var(--sd-gold, #c9a76d);
    color: #ffffff;
    font-weight: 600;
    border-bottom: 0;
}

.dorothy-cennik tbody tr:nth-child(even) td {
    background: #faf7f0;
}

.dorothy-cennik tbody tr:hover td {
    background: #f3ecdc;
}

/* Ostatnia kolumna = cena → wyrównanie do prawej, nie łamać */
.dorothy-cennik td:last-child,
.dorothy-cennik th:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.dorothy-cennik tr:last-child td {
    border-bottom: 0;
}

/* ============================================================
 BATCH #2 (layout,)
 ============================================================ */

/* --- Listy.custom-bullets — punktor ::before był 1.8em i rozpychał
 line-height wierszy (efekt „rozjechanych li", np. na-co-pomagaja).
 Tonujemy punktor i ustawiamy rozsądny line-height. --- */
.custom-bullets li::before {
    font-size: 1.1em !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    margin-right: 8px !important;
}
.custom-bullets li {
    line-height: 1.55 !important;
    margin-bottom: 0.4em;
}

/* --- Metamorfozy (before-after-slider grid) — shortcode nie ustawia
 --bas-aspect, więc aspect-ratio frame'a był nieprawidłowy + max-height
 360px ucinał zdjęcia „w pół". Zdjęcia to 250×384 (portret), więc
 ustawiamy ten aspect i zdejmujemy cap → całe zdjęcie widoczne. --- */
.bas-grid .bas__frame {
    aspect-ratio: 250 / 384 !important;
    max-height: none !important;
}
.bas-grid .bas__img {
    object-fit: cover !important;
}

/* --- Odstępy między sekcjami — top-level kontenery Elementora bywają
 sklejone. Dodajemy 50px odstępu MIĘDZY kolejnymi sekcjami (margin,
 nie padding — nie nadpisujemy wewnętrznych paddingów sekcji). --- */
/* Odstęp między sekcjami — wszędzie POZA stroną główną (page-id-28),
 gdzie układ ma własne, zaprojektowane odstępy. */
body:not(.page-id-28):not(.home) .elementor > .e-con + .e-con {
    margin-top: var(--sd-section-gap);
}

/* --- Proste rogi GLOBALNIE (design system: nowa strona = kanciaste).
 Wiele elementów skopiowanych ze starej strony ma border-radius.
 Zerujemy na treści: obrazy, przyciski, karty, pola, slider, kontenery.
 Nie ruszamy ikon w nagłówku/menu. --- */
.entry-content img,
article img,
.e-con img,
.elementor-widget-image img,
.elementor-widget-image figure,
.dplf-button-link,
.dplf-button-wrapper .dplf-button-link,
.elementor-button,
.dplf-image,
.dplf-image-wrapper-inner img,
.dorothy-team-tile,
.dorothy-team-tile__photo,
.bas,
.bas__frame,
.dorothy-cennik,
.dorothy-cennik-wrap,
input,
textarea,
select,
.dplf-input,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
    border-radius: 0 !important;
}

/* ============================================================
 Baner „Bezpłatna konsultacja" — UJEDNOLICONY i czytelny na każdej
 grafice. Klasa `sd-konsultacja-banner` dodawana przez
 add_banner_class.py do kontenera z tłem-grafiką. Ciemny overlay pod
 treścią → tekst zawsze czytelny; biały tekst; odstęp pod nagłówkiem;
 złoty CTA (dziedziczy z.dplf-button-wrapper).
 ============================================================ */
.sd-konsultacja-banner {
    position: relative;
    padding: 3.5rem 2rem !important;
    text-align: center;
}

.sd-konsultacja-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
    pointer-events: none;
}

/* Treść nad overlayem */
.sd-konsultacja-banner > * {
    position: relative;
    z-index: 1;
}

.sd-konsultacja-banner .elementor-heading-title,
.sd-konsultacja-banner .dplf-heading-title,
.sd-konsultacja-banner h1,
.sd-konsultacja-banner h2,
.sd-konsultacja-banner h3 {
    color: #ffffff !important;
    margin-bottom: 0.2em;
}

/* Odstęp tekst–nagłówek + biały, czytelny akapit */
.sd-konsultacja-banner .elementor-widget-text-editor,
.sd-konsultacja-banner .elementor-widget-text-editor p,
.sd-konsultacja-banner p {
    color: #ffffff !important;
    margin-top: 1rem !important;
}

/* Wyśrodkowany przycisk CTA banera */
.sd-konsultacja-banner .dplf-button-wrapper,
.sd-konsultacja-banner .elementor-widget-dplf_button {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

/* ============================================================
 Blog single — tytuł NAD zdjęciem (child content.php → title-first).
 Odstęp pod tytułem przed grafiką, tytuł wyraźny (font Forum dziedziczy).
 ============================================================ */
.entry-post-content--title-first {
    margin-bottom: 1.25rem;
}
.entry-post-content--title-first .entry-title {
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

/* ============================================================
 Przycisk telefonu (np. /kontakt/) — złoty, klikalny tel:, wyraźny.
 Wstawiany jako <a class="dorothy-phone-btn" href="tel:..."> w treści.
 ============================================================ */
.dorothy-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sd-gold, #c9a76d);
    color: #ffffff !important;
    font-family: var(--dplf-font-body, inherit);
    font-size: 1.6rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1 !important;
    padding: 0.8rem 1.8rem;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.dorothy-phone-btn::before {
    content: "\260E";           /* ☎ telefon */
    font-size: 1.1em;
    line-height: 1;
}
.dorothy-phone-btn:hover,
.dorothy-phone-btn:focus-visible {
    background: var(--sd-gold-dark, #a8895a);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.elementor-widget-dplf_button:has(.dplf-button-link[href^="tel:"]) {
    width: 100% !important;
    text-align: center;
}

.elementor-widget-dplf_button:has(.dplf-button-link[href^="tel:"]) .dplf-button-wrapper {
    display: flex;
    justify-content: center;
}

.dplf-button-wrapper .dplf-button-link[href^="tel:"],
.dplf-button-wrapper .dplf-button-link[href^="tel:"]:link,
.dplf-button-wrapper .dplf-button-link[href^="tel:"]:visited {
    width: min(100%, 420px);
    padding: 22px 44px !important;
    font-size: var(--sd-cta-font-size) !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--sd-gold) !important;
    color: var(--sd-text-dark) !important;
    box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
}

.dplf-button-wrapper .dplf-button-link[href^="tel:"]:hover {
    background: var(--sd-gold-dark) !important;
    color: var(--sd-text-dark) !important;
    transform: translateY(-2px);
}

.dplf-button-wrapper .dplf-button-link[href^="tel:"]:focus-visible {
    background: var(--sd-gold-dark) !important;
    color: var(--sd-text-dark) !important;
    outline: 3px solid var(--sd-text-dark);
    outline-offset: 3px;
}

.dplf-button-wrapper .dplf-button-link[href^="tel:"] .dplf-button-text {
    color: inherit !important;
    font-weight: 700;
}

.dplf-button-wrapper .dplf-button-link[href^="tel:"] .sd-cta-phone {
    font-size: 1.3em !important;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

@media (max-width: 767px) {
    .elementor .elementor-widget-dplf_button.elementor-hidden-mobile:has(.dplf-button-link[href^="tel:"]),
    .elementor .elementor-widget-dplf_button.elementor-hidden-phone:has(.dplf-button-link[href^="tel:"]) {
        display: block !important;
    }
}

.e-con.sd-has-bg-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(11, 11, 11, var(--sd-scrim-alpha, 0));
}

.e-con.sd-bg-missing::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #2c2723;
}

.e-con.sd-has-bg-image > .e-con-inner,
.e-con.sd-has-bg-image > .elementor-element,
.e-con.sd-bg-missing > .e-con-inner,
.e-con.sd-bg-missing > .elementor-element {
    position: relative;
    z-index: 1;
}

.e-con.sd-bg-missing {
    position: relative;
    isolation: isolate;
}

.e-con.sd-has-bg-image:has(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-dplf_heading) {
    --sd-scrim-alpha: var(--sd-scrim);
    position: relative;
    isolation: isolate;
}

.e-con.sd-has-bg-image:has(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-dplf_heading) .elementor-widget,
.e-con.sd-has-bg-image:has(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-dplf_heading) .e-con,
.e-con.sd-bg-missing .elementor-widget,
.e-con.sd-bg-missing .e-con {
    background-color: transparent !important;
}

.e-con.sd-has-bg-image:has(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-dplf_heading) :is(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title, .dplf-heading-title, .dplf-desc),
.e-con.sd-dark-bg :is(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title, .dplf-heading-title, .dplf-desc),
.e-con.sd-bg-missing :is(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title, .dplf-heading-title, .dplf-desc) {
    color: var(--sd-text-light) !important;
}

article .post-content h2,
.post-content h2 {
    margin-top: 2.2em;
    margin-bottom: 0.55em;
}

article .post-content h2:first-child,
.post-content h2:first-child {
    margin-top: 0;
}

#dplf-site-header-nav .sf-menu > li > a,
#dplf-site-header-nav .sf-menu > li > a .dplf-menu-item-text {
    font-size: 16px;
}

#dplf-site-header-nav .sf-menu .sub-menu li > a,
#dplf-site-header-nav .sf-menu .sub-menu .dplf-menu-item-text {
    font-size: 15px;
}

.e-con.sd-bg-missing {
  padding-top:    max(var(--padding-top, 0px), 30px) !important;
  padding-bottom: max(var(--padding-bottom, 0px), 30px) !important;
  padding-left:   max(var(--padding-left, 0px), 30px) !important;
  padding-right:  max(var(--padding-right, 0px), 30px) !important;
  row-gap:        max(var(--row-gap, 0px), 15px) !important;
}
@media (max-width: 767px) {
  .e-con.sd-bg-missing {
    padding-top:    max(var(--padding-top, 0px), 20px) !important;
    padding-bottom: max(var(--padding-bottom, 0px), 20px) !important;
    padding-left:   max(var(--padding-left, 0px), 20px) !important;
    padding-right:  max(var(--padding-right, 0px), 20px) !important;
  }
}

.e-con:has(> .sd-has-bg-image) > .e-con {
    --align-self: stretch !important;
    align-self: stretch !important;
}

.elementor-8000 .elementor-element.elementor-element-74a4654 .dplf-button.dplf-button {
    padding: 1.05rem 2.4rem;
}

@media (max-width: 767px) {
    .elementor-8000 .elementor-element.elementor-element-74a4654 .dplf-button.dplf-button {
        padding: 11px 40px;
    }
}