/* Derma Holistic — style układów sekcji.
   Kolory, kroje i odstępy globalne są w theme.json. */

:root{
  --dh-brick:#AE1A00;
  --dh-brick-dark:#8A1500;
  --dh-pink:#FFBDDA;
  --dh-pink-soft:#FFE9F2;
  --dh-gray:#F4F2F1;
  --dh-line:#DEDAD8;
  --dh-line-dark:rgba(255,255,255,.26);
  --dh-muted:#575250;
  --dh-text:#211D1C;
  --dh-header-h:80px;
}
@media (max-width:900px){ :root{ --dh-header-h:64px; } }

body{ overflow-x:hidden; }
:where(h1,h2,h3,h4){ line-height:1.08; }
:focus-visible{ outline:2px solid #000; outline-offset:4px; }
[id]{ scroll-margin-top:calc(var(--dh-header-h) + 16px); }

/* ---------- Elementy wspólne ---------- */
.dh-eyebrow{ font-size:.9375rem; font-weight:600; color:var(--dh-brick); margin-bottom:1rem; }
.dh-lead{ font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); line-height:1.65; color:var(--dh-muted); max-width:34em; }
.dh-note{ font-size:.875rem; color:var(--dh-muted); }

.dh-dark{ color:#fff; }
.dh-dark :where(h1,h2,h3,h4,p,li,td,th){ color:#fff; }
.dh-dark .dh-eyebrow{ color:var(--dh-pink); }
.dh-dark .dh-lead{ color:rgba(255,255,255,.84); }
.dh-dark :focus-visible{ outline-color:#fff; }

.dh-rule{ border-top:1px solid #000; }

/* Przyciski */
.wp-block-button__link{
  min-height:54px; display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.9rem; font-size:.9375rem; font-weight:600; letter-spacing:.04em;
  border-radius:0; text-decoration:none;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link{ border:1px solid currentColor; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{ background:var(--dh-brick-dark); }
.dh-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link{ background:#fff; color:var(--dh-brick); }
.dh-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{ background:var(--dh-pink); color:#000; }
.dh-dark .wp-block-button.is-style-outline .wp-block-button__link{ color:#fff; border-color:rgba(255,255,255,.55); }
.dh-dark .wp-block-button.is-style-outline .wp-block-button__link:hover{ background:#fff; color:#000; }

.dh-link{ display:inline-block; padding:8px 0; font-weight:600; font-size:.9375rem; letter-spacing:.03em; color:var(--dh-brick); }
.dh-dark .dh-link a,.dh-dark .dh-link{ color:var(--dh-pink); }

/* ---------- Nagłówek ---------- */
.dh-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--dh-line); }
.dh-logo{
  display:block; width:158px; height:52px; flex:none;
  background:url("../img/logo.png") left center/contain no-repeat;
}
.dh-header .wp-block-navigation{ font-size:.9375rem; font-weight:500; letter-spacing:.04em; }
.dh-header .wp-block-navigation a{ text-decoration:none; }
.dh-header .wp-block-navigation a:hover{ color:var(--dh-brick); text-decoration:underline; text-underline-offset:.4em; }
@media (max-width:900px){ .dh-logo{ width:134px; height:44px; } }

/* ---------- Pierwszy ekran ---------- */
.dh-hero{ padding-block:clamp(36px,5vw,72px) 0; }
.dh-hero .wp-block-columns{ align-items:flex-end; gap:clamp(32px,5vw,80px); }
.dh-hero h1{
  font-size:clamp(3rem,1.2rem + 6.6vw,7.5rem); line-height:.94; letter-spacing:-.02em;
  margin-bottom:clamp(28px,3.5vw,48px);
}
.dh-hero h1 em{ font-style:italic; }
.dh-hero-photo{ position:relative; margin:0; }
.dh-hero-photo::before{ content:""; position:absolute; left:-14%; bottom:-1px; width:78%; height:64%; background:var(--dh-pink); }
.dh-hero-photo img{ position:relative; width:100%; aspect-ratio:3/4; object-fit:cover; }

.dh-facts{ margin-top:clamp(36px,4vw,60px); border-top:1px solid #000; border-bottom:1px solid var(--dh-line); }
.dh-facts .wp-block-column{ padding:22px 32px 22px 0; }
.dh-facts .wp-block-column + .wp-block-column{ padding-left:32px; border-left:1px solid var(--dh-line); }
.dh-fact-label{ font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dh-brick); margin-bottom:6px; }
.dh-fact-value{ font-family:var(--wp--preset--font-family--display); font-size:clamp(1.125rem,1rem + .5vw,1.5rem); line-height:1.25; color:#000; margin:0; }
@media (max-width:781px){
  .dh-hero-photo{ max-width:330px; margin-left:16px; }
  .dh-hero-photo::before{ left:-16px; bottom:-16px; width:55%; height:48%; }
  .dh-facts .wp-block-column{ padding:18px 0; }
  .dh-facts .wp-block-column + .wp-block-column{ padding-left:0; border-left:0; border-top:1px solid var(--dh-line); }
}

/* ---------- Obszary pracy ---------- */
.dh-focus-item{ border-top:1px solid var(--dh-line-dark); padding-block:clamp(26px,3vw,40px); }
.dh-focus-item:last-of-type{ border-bottom:1px solid var(--dh-line-dark); }
.dh-focus-item .wp-block-columns{ gap:16px clamp(32px,5vw,80px); margin-bottom:0; }
.dh-focus-item h3{ font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem); }
.dh-focus-item p{ margin:0; max-width:38em; }

/* ---------- Sposób pracy ---------- */
.dh-steps{ counter-reset:dhstep; }
.dh-step{
  counter-increment:dhstep; position:relative;
  padding:clamp(22px,2.6vw,34px) 0 clamp(22px,2.6vw,34px) 52px; border-top:1px solid var(--dh-line);
}
.dh-step:last-of-type{ border-bottom:1px solid var(--dh-line); }
.dh-step::before{
  content:counter(dhstep,decimal-leading-zero); position:absolute; left:0; top:clamp(22px,2.6vw,34px);
  font-family:var(--wp--preset--font-family--display); font-size:1.25rem; color:var(--dh-brick);
}
.dh-step h3{ font-size:clamp(1.375rem,1.15rem + .8vw,1.75rem); margin-bottom:.5rem; }
.dh-step p{ margin:0; color:var(--dh-muted); max-width:38em; }

/* ---------- O Klaudii ---------- */
.dh-about .wp-block-columns{ align-items:center; gap:clamp(40px,6vw,96px); }
.dh-quote{
  margin:2rem 0; padding-left:clamp(20px,2vw,28px); border-left:2px solid var(--dh-brick);
  font-family:var(--wp--preset--font-family--display); font-size:clamp(1.375rem,1.15rem + 1vw,2rem);
  line-height:1.3; color:#000; max-width:20em;
}
.dh-about img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.dh-about figcaption{ margin-top:14px; font-size:.875rem; color:var(--dh-muted); text-align:left; }

/* ---------- Oferta i cennik ---------- */
.dh-offer .wp-block-columns{ align-items:flex-start; gap:clamp(40px,6vw,96px); }
.dh-consult{ background:var(--dh-pink-soft); padding:clamp(26px,3vw,36px); margin-bottom:26px; }
.dh-consult h3{ font-size:1.625rem; margin-bottom:.6rem; }
.dh-consult p{ font-size:1rem; color:var(--dh-muted); }

.dh-price-group{ border-top:1px solid var(--dh-line); }
.dh-price-group:last-of-type{ border-bottom:1px solid var(--dh-line); }
.dh-price-group summary{
  display:flex; align-items:center; gap:18px; min-height:70px; padding:12px 2px;
  cursor:pointer; list-style:none;
  font-family:var(--wp--preset--font-family--display); font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);
}
.dh-price-group summary::-webkit-details-marker{ display:none; }
.dh-price-group summary::after{
  content:"+"; margin-left:auto; font-family:var(--wp--preset--font-family--body);
  font-size:1.5rem; line-height:1; color:var(--dh-brick);
}
.dh-price-group[open] summary::after{ content:"–"; }
.dh-price-group summary:hover{ color:var(--dh-brick); }
.dh-price-group .wp-block-table{ margin:0 0 20px; }
.dh-price-group table{ width:100%; border-collapse:collapse; font-size:1rem; }
.dh-price-group td{ padding:11px 0; border:0; border-top:1px solid var(--dh-line); }
.dh-price-group tr:first-child td{ border-top:0; }
.dh-price-group td:last-child{ text-align:right; white-space:nowrap; font-weight:600; width:6em; }

/* ---------- Blog ---------- */
.dh-blog h2{ font-size:clamp(2.5rem,1.4rem + 4vw,4.5rem); }
.dh-posts .wp-block-post-template{ gap:clamp(32px,4vw,56px); }
.dh-posts .wp-block-post-featured-image img{ aspect-ratio:1/1; object-fit:cover; width:100%; }
.dh-posts .wp-block-post-title{ font-size:1.5rem; line-height:1.18; margin:.75rem 0 .5rem; }
.dh-posts .wp-block-post-title a{ text-decoration:none; color:#000; }
.dh-posts .wp-block-post-title a:hover{ color:var(--dh-brick); }
.dh-posts .wp-block-post-excerpt{ color:var(--dh-muted); font-size:1rem; }
.dh-posts .wp-block-post-excerpt__more-link{ display:inline-block; padding:8px 0; font-weight:600; font-size:.9375rem; }
.dh-posts .wp-block-post-date{ font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dh-muted); }
.dh-blog-ask{ margin-top:clamp(48px,5vw,72px); padding-top:30px; border-top:1px solid #000; }
.dh-blog-ask p{
  font-family:var(--wp--preset--font-family--display); font-size:clamp(1.25rem,1rem + .8vw,1.75rem);
  line-height:1.3; color:#000; max-width:26em; margin:0;
}

/* ---------- Gabinet ---------- */
.dh-space .wp-block-columns{ gap:clamp(14px,1.8vw,24px); align-items:flex-start; }
.dh-space img{ width:100%; object-fit:cover; }
.dh-space .dh-photo-a img{ aspect-ratio:3/4; }
.dh-space .dh-photo-b{ margin-top:clamp(28px,5vw,72px); }
.dh-space .dh-photo-b img{ aspect-ratio:3/4; }
.dh-space .dh-photo-c{ margin-top:clamp(56px,9vw,132px); }
.dh-space .dh-photo-c img{ aspect-ratio:2/3; }
@media (max-width:781px){ .dh-space .dh-photo-b,.dh-space .dh-photo-c{ margin-top:0; } }

/* ---------- Zaproszenie ---------- */
.dh-invite .wp-block-columns{ align-items:flex-end; gap:clamp(32px,5vw,88px); }
.dh-invite h2{ font-size:clamp(2.5rem,1.4rem + 4vw,4.5rem); line-height:1.02; max-width:9em; }
.dh-invite h2 em{ font-style:italic; color:var(--dh-pink); }

/* ---------- Kontakt ---------- */
.dh-contact .wp-block-columns{ align-items:flex-start; gap:clamp(32px,4vw,64px); }
.dh-address{
  font-style:normal; font-family:var(--wp--preset--font-family--display);
  font-size:1.375rem; line-height:1.4; color:#000; margin-bottom:.75rem;
}
.dh-phone{
  display:inline-block; font-family:var(--wp--preset--font-family--display); font-size:1.75rem;
  color:#000; text-decoration:none; padding:4px 0; margin-bottom:1.5rem;
}
.dh-phone:hover{ color:var(--dh-brick); }
.dh-email{
  display:block; margin:-1rem 0 1.5rem; padding:4px 0;
  font-size:1.0625rem; font-weight:600; color:var(--dh-text); text-decoration:none;
  word-break:break-word;
}
.dh-email:hover{ color:var(--dh-brick); text-decoration:underline; }
.dh-hours-title{
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding-top:14px; border-top:1px solid #000; margin-bottom:.25rem;
}
.dh-hours table{ width:100%; border-collapse:collapse; font-size:1rem; }
.dh-hours td{ padding:10px 0; border:0; border-bottom:1px solid var(--dh-line); }
.dh-hours td:last-child{ text-align:right; white-space:nowrap; }
.dh-hours tr.dh-today td{ font-weight:600; color:#000; }
.dh-today-tag{ white-space:nowrap; margin-left:.5em; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--dh-brick); }

.dh-map{
  position:relative; aspect-ratio:3/4; background:var(--dh-gray); border:1px solid var(--dh-line);
  display:grid; place-items:center; text-align:center; padding:24px;
}
.dh-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.dh-map__title{ font-family:var(--wp--preset--font-family--display); font-size:1.5rem; color:#000; margin-bottom:.4rem; }
.dh-map__note{ font-size:.9375rem; color:var(--dh-muted); max-width:22em; margin:0 auto 1.5rem; }
.dh-map button{
  min-height:54px; padding:.8rem 1.9rem; background:none; border:1px solid #000; color:#000;
  font:600 .9375rem/1.2 var(--wp--preset--font-family--body); letter-spacing:.04em; cursor:pointer;
}
.dh-map button:hover{ background:#000; color:#fff; }
@media (max-width:1060px){ .dh-map{ aspect-ratio:16/9; } }
@media (max-width:640px){ .dh-map{ aspect-ratio:1/1; } }

/* Ikony społecznościowe */
.dh-socials{ display:flex; gap:12px; }
.dh-socials a{
  display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px;
  border:1px solid var(--dh-line); color:#000;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.dh-socials a:hover{ background:var(--dh-brick); border-color:var(--dh-brick); color:#fff; }
.dh-socials svg{ width:20px; height:20px; fill:currentColor; }
.dh-dark .dh-socials a{ border-color:rgba(255,255,255,.3); color:#fff; }
.dh-dark .dh-socials a:hover{ background:#fff; color:#000; }

/* ---------- Stopka ---------- */
.dh-footer{ background:#000; color:rgba(255,255,255,.78); }
.dh-footer :where(p,li,a,span){ color:rgba(255,255,255,.78); }
.dh-logo-footer{
  display:block; width:155px; height:118px;
  background:url("../img/logo-white.png") left center/contain no-repeat;
}
.dh-footer-title{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:#fff; margin-bottom:1rem; }
.dh-footer .wp-block-navigation{ font-size:.9375rem; }
.dh-footer .wp-block-navigation a{ text-decoration:none; }
.dh-footer .wp-block-navigation a:hover{ color:#fff; text-decoration:underline; }
.dh-footer-bottom{ border-top:1px solid rgba(255,255,255,.18); padding-top:20px; font-size:.875rem; }
.dh-footer-legal{ font-size:.75rem; line-height:1.6; color:rgba(255,255,255,.55); }

/* ---------- Wpisy i podstrony ---------- */
/* Siatka strony ma 1280 px, ale kolumna czytelnego tekstu pozostaje wąska. */
.dh-entry-header,
.dh-entry-content > .wp-block-post-content,
.dh-entry-content > p,
.dh-entry-content > h2,
.dh-entry-content > h3{ max-width:760px; margin-inline:auto; }

.dh-entry-header{ padding-block:clamp(48px,6vw,88px) clamp(28px,3vw,44px); }
.dh-entry-header h1,.dh-entry-header .wp-block-post-title{ font-size:clamp(2.25rem,1.4rem + 3.2vw,4rem); }
.dh-entry-meta{ font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dh-muted); }
.dh-entry-content p,.dh-entry-content li{ font-size:1.0625rem; line-height:1.75; }
.dh-entry-content :where(h2){ font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem); margin-top:2.5em; margin-bottom:.6em; }
.dh-entry-content :where(h3){ font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem); margin-top:2em; margin-bottom:.5em; }
.dh-entry-content blockquote{
  margin:2rem 0; padding-left:clamp(20px,2vw,28px); border-left:2px solid var(--dh-brick);
  font-family:var(--wp--preset--font-family--display); font-size:1.375rem; line-height:1.4; color:#000;
}
.dh-entry-content img{ width:100%; height:auto; }
.dh-archive-title{ font-size:clamp(2.5rem,1.4rem + 4vw,4.5rem); }

/* Na wąskich ekranach kolumny układają się jedna pod drugą — wyrównanie do dołu
   musi wtedy zniknąć, żeby treść nie uciekała do prawej krawędzi. */
@media (max-width:781px){
  .dh-hero .wp-block-columns,
  .dh-invite .wp-block-columns,
  .dh-contact .wp-block-columns,
  .dh-about .wp-block-columns,
  .dh-offer .wp-block-columns,
  .dh-space .wp-block-columns{ align-items:stretch; }
  .dh-facts .wp-block-column{ padding-right:0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}