@import url('https://fonts.googleapis.com/css2?family=Marcellus:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* =============== css variables =============== */
* {
  /* body font */
  --body-font: "Instrument Sans", Helvetica, Arial, sans-serif;
  --body-font-size: 16px;
  --body-font-color: #55524a;
  --body-font-color-bg-dark: rgba(255, 255, 255, .75);
  --body-font-weight: 400;
  --body-font-letter-spacing: 0px;
  --body-font-line-height: 30px;
  /* heading font */
  --heading-font: "Marcellus", Helvetica, Arial, sans-serif;
  --heading-font-weight: 500;
  --heading-font-color: #2d2a1e;
  --heading-font-color-bg-dark: #ffffff;
  --heading-text-transform: none;
  /* alternatif font */
  --alt-font: "Marcellus", Helvetica, Arial, sans-serif; 
  /* h1 */
  --h1-font-family: var(--heading-font);
  --h1-font-size: 60px;
  --h1-font-weight: var(--heading-font-weight);
  --h1-letter-spacing: -0.02em;
  --h1-line-height: 1.15em;
  --h1-margin-bottom: 20px;
  /* h2 */
  --h2-font-family: var(--heading-font);
  --h2-font-size: 48px;
  --h2-font-weight: var(--heading-font-weight);
  --h2-letter-spacing: -0.96px;
  --h2-line-height: 57.6px;
  --h2-margin-bottom: 25px;
  /* h3 */
  --h3-font-family: var(--heading-font);
  --h3-font-size: 26px;
  --h3-font-weight: var(--heading-font-weight);
  --h3-letter-spacing: -0.4px;
  --h3-line-height: 1.5em;
  --h3-margin-bottom: 10px;
  /* h4 */
  --h4-font-family: var(--heading-font);
  --h4-font-size: 22px;
  --h4-font-weight: var(--heading-font-weight);
  --h4-letter-spacing: -0.2px;
  --h4-line-height: 1.6em;
  --h4-margin-bottom: 10px;
  /* h5 */
  --h5-font-family: var(--heading-font);
  --h5-font-size: 18px;
  --h5-font-weight: var(--heading-font-weight);
  --h5-letter-spacing: 0;
  --h5-line-height: 1.6em;
  --h5-margin-bottom: 10px;
  /* h6 */
  --h6-font-family: var(--heading-font);
  --h6-font-size: 16px;
  --h6-font-weight: var(--heading-font-weight);
  --h6-letter-spacing: 0;
  --h6-line-height: 1.6em;
  --h6-margin-bottom: 10px;
  /* mainmenu */
  --mainmenu-font: var(--heading-font);
  --mainmenu-font-size: 15px;
  --mainmenu-font-weight: 600;
  --mainmenu-letter-spacing: 1px;
  --mainmenu-text-transform: none;
  /* subheader */
  --subheader-title-font-size: 60px;
  --subheader-title-text-transform: none;
  /* header logo */
  --logo-width: 190px;
  --logo-footer-width: 150px;
  /* misc */
  --border-default: solid 1px rgba(30, 30, 30, 1);
  --bg-default: #ffffff;
  --bg-light: #F8F9FA;
  --bg-dark-1: #363F4B;
  --bg-dark-2: #202020;
  --bg-dark-3: #303030;  
  --bg-dark-1-rgb: 54, 63, 75;
  --bg-grey: #eeeeee;
  --bg-gradient-1: 0deg, rgba(var(--primary-color-rgb), .1) 0%, rgba(var(--secondary-color-rgb), .2) 100%;
  --bg-color-even: #E8E8E8;
  --bg-color-odd: #F4F4F4;
  /* New colour profile (per client mockup): warm cream hero, muted sage
     section, terracotta accent. Accent itself lives in colors/scheme-01.css. */
  --cream: #EDE4DB;
  --sage: #D1D2C4;
  --accent-dark: #9c5848;
  --swiper-theme-color: var(--secondary-color);
  --rounded-1: 16px;
  --border-color:#bbbbbb;
  --container-max-width:1240px;
  /* button */
  --btn-color: #fff;
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--accent-dark);
  --btn-font-family: var(--body-font);
  --btn-font-size: 15px;
  --btn-font-weight: 600;
  --btn-letter-spacing: 0;
  --btn-padding: 6px 30px;
  --btn-rounded: 30px;
  --btn-text-decoration: none;
  --btn-text-transform: none;
  /* subtitle */
  --subtitle-font:var(--title-font);
  --subtitle-font-size:11px;
  --subtitle-font-weight: 600;
  --subtitle-color: var(--primary-color);
  --subtitle-letter-spacing: 4px;
  --subtitle-text-transform: uppercase;
  --subtitle-padding:0;
  --subtitle-background: none;  
  --subtitle-background-dark: none;
  --subtitle-rounded: 30px;
  --text-circle-width: 350px;
  --text-circle-speed: 10s;
  /* breadcrumb */
  --breadcrumb-font-size:14px;
  --breadcrumb-font-weight:500;
  --breadcrumb-separator-color:var(--primary-color);
  --breadcrumb-separator-font-size:10px;
  /* text circle */
  --text-circle-width: 350px;
  --text-circle-speed: 10s;
  /* footer */
  --footer-background-color: var(--bg-dark-2);
}

/* Header — align with the new colour-profile mockup. Calmind ships the header
   as `header-light transparent`, i.e. fully see-through over the hero. The
   mockup instead shows a solid, warm near-white bar (lighter than the cream
   hero), a dark-olive logo and a terracotta hamburger. The selector below
   mirrors Calmind's own specificity for the transparent state and, loading
   later, wins; the `.smaller` (scrolled) state is warmed to the same tone. */
:root {
  --header-bg: #fcfbf9;
}

/* Solid warm near-white across every state: transparent (top), .smaller
   (scrolled) and .header-mobile (Calmind's JS-toggled phone layout — which
   otherwise reverts to a see-through bar). Each selector matches or exceeds
   Calmind's own specificity and, loading later, wins. */
body:not(.side-layout) header.header-light.transparent:not(.smaller):not(.header-mobile),
header.header-light.smaller,
header.header-mobile.header-light {
  background: var(--header-bg);
}

/* Logo wordmark: set in the Marcellus heading serif (so it stands out from the
   sans-serif nav), sized up as a proper brand mark, with a touch of tracking. */
#logo .logo-text {
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--heading-font-color);
}

/* Hamburger: Calmind defaults to #fff on desktop and #222 in the mobile state
   — neither is the mockup's terracotta. The mobile override needs id+2-class
   specificity to beat `header.header-mobile.header-light #menu-btn`. */
#menu-btn,
header.header-mobile.header-light #menu-btn,
header.header-mobile.header-light #menu-btn:hover {
  color: var(--primary-color);
}

/* Calmind's .d-flex utility carries an unwanted `white-space: nowrap`,
   which clips long pill labels on the Obszary pomocy section. Restore
   normal wrapping for those pills only — leaving the Calmind nav/header
   flex containers untouched. */
.plich-obszary-pomocy .d-flex,
.plich-oferta .d-flex {
  white-space: normal;
}

/* Hero name: scale down on narrow viewports so "Magdalena Plich" fits on
   one line, and de-emphasise the "mgr" prefix. Calmind's .fs-72 is a flat
   72px override; clamp() lets the type breathe down to ~38px on phones. */
.plich-hero-name.fs-72 {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 1.05;
}

.plich-hero-name__prefix {
  font-size: 0.45em;
  font-weight: 400;
  letter-spacing: 0.02em;
  vertical-align: 0.55em;
  opacity: 0.75;
  margin-right: 0.15em;
}

/* Reusable small "mgr" prefix for titles outside the hero — the header logo
   and the O mnie heading — so the academic prefix reads as a raised superscript
   rather than full-size text, matching the hero treatment. */
.title-prefix {
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0.02em;
  vertical-align: 0.55em;
  opacity: 0.75;
  margin-right: 0.1em;
}

/* Hero on stacked (mobile/tablet) layouts: Calmind absolutely-centres the
   caption inside the slide (top:50% + translateY(-50%)). On short/narrow
   viewports the caption grows taller (more text wrapping) and its centred top
   slides up *under* the fixed header, hiding the "PSYCHOLOG, PSYCHOTERAPEUTA"
   subtitle. Top-align the caption instead, with a fixed clearance below the
   header — consistent spacing at every width, and no collision. */
@media (max-width: 991.98px) {
  .plich-hero.pt-5 {
    padding-top: 0.75rem !important;
  }

  .plich-hero .mh-700 {
    min-height: 520px;
  }

  .plich-hero .sw-caption {
    top: 0;
    transform: none;
    padding-top: 92px;   /* clears the ~64px fixed header + breathing room */
    padding-bottom: 40px;
  }
}

/* Phones: keep the header logo on a single line. At 22px a long wordmark plus
   the hamburger can wrap (worse when the Marcellus webfont hasn't loaded and a
   wider fallback is used), which grows the header into the hero below it. */
@media (max-width: 575.98px) {
  #logo .logo-text {
    font-size: 18px;
    white-space: nowrap;
  }
}

/* O mnie heading: Calmind's 48px h2 dominates the column next to the photos;
   bring it down to a calmer size. */
#o-mnie h2 {
  font-size: 34px;
  line-height: 1.15;
}

/* Subpage page-header (offer detail pages via page.twig): the flat 60px h1
   overflows the viewport on phones with long titles like "Psychoterapia
   indywidualna młodzieży". Scale it down responsively — full 60px stays on
   tablet/desktop (the clamp caps at 3.75rem), shrinking only on narrow screens. */
#subheader h1 {
  font-size: clamp(1.85rem, 8vw, 3.75rem);
  line-height: 1.15;
}

/* O mnie photos: a portrait + a landscape don't share natural heights.
   On the desktop two-column layout the secondary photo would float over
   the primary portrait's torso. Force a shared 3:4 crop box and push the
   overlay further down. */
@media (min-width: 992px) {
  .plich-o-mnie .relative > img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
  }

  .plich-o-mnie .relative > img.abs {
    margin-top: 180px;
  }
}

/* Mobile: drop the absolute overlay so the second photo joins the flow
   and the relative parent ends above the text column. Without this the
   .abs image extends past its parent and overlaps the "O mnie" copy. */
@media (max-width: 991.98px) {
  .plich-o-mnie .relative > img.abs {
    position: static;
    margin-top: 1rem;
    margin-left: auto;
    display: block;
  }

  .plich-o-mnie .relative > img.mb-100 {
    margin-bottom: 0;
  }
}

/* Calmind's h3 default is heavy on phones, making short Oferta card titles
   (e.g. "Konsultacja on-line") wrap and dominate the card. Tighten on mobile. */
@media (max-width: 767.98px) {
  .plich-oferta .bg-color-op-1 h3 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
}

/* Reserve two lines for every card title so descriptions start at the same
   baseline regardless of whether the title is one or two lines. Only from md up,
   where the cards sit side by side — on phones (single column) the reserved
   second line just adds an uneven gap above the description. */
@media (min-width: 768px) {
  .plich-oferta .bg-color-op-1 h3 {
    min-height: 2lh;
  }
}

/* Cennik — match the Obszary pomocy pill rhythm but emphasise the price. */
.plich-cennik .cennik-item {
  background: #ffffff;
  border-radius: var(--rounded-1, 8px);
}

.plich-cennik .cennik-price {
  color: var(--primary-color);
  font-weight: 600;
  white-space: nowrap;
}

/* Subpage body copy (Konsultacja / Psychoterapia detail pages) — Calmind's
   global p { margin-bottom: 20px } reads cramped on long-form articles.
   Loosen vertical rhythm for the WYSIWYG content area only. */
.post-content.wysiwyg p {
  margin-bottom: 1.75em;
}

/* Contact Form 7 inside the Kontakt block. The wpwaiters parent's
   ContactForm7Helper wraps the form in .group-control and appends its
   own styled submit button + popup-status — but it doesn't strip the
   original CF7 [submit] (resulting in two visible buttons) and the
   raw CF7 inputs come out without any padding/border. Hide the dupe
   submit and give the inputs a clean look. */
.plich-kontakt .wpcf7-submit,
.plich-kontakt input[type="submit"].wpcf7-form-control {
  display: none;
}

.plich-kontakt .group-control label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 500;
  color: var(--heading-font-color, #363F4B);
}

.plich-kontakt .group-control input[type="text"],
.plich-kontakt .group-control input[type="tel"],
.plich-kontakt .group-control input[type="email"],
.plich-kontakt .group-control textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 0.4rem;
  background: #ffffff;
  border: 1px solid #d8dde2;
  border-radius: var(--rounded-1, 8px);
  font-family: var(--body-font);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.plich-kontakt .group-control textarea {
  min-height: 140px;
  resize: vertical;
}

.plich-kontakt .group-control input:focus,
.plich-kontakt .group-control textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 0, 0), .08);
}

.plich-kontakt .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Spacing between consecutive .input wrappers (CF7 inputs use the helper-
   provided .input div but parent CSS isn't loaded, so they sit flush). */
.plich-kontakt .group-control > .input {
  margin-bottom: 0;
}

.plich-kontakt .group-control > .input + .input {
  margin-top: 1rem;
}

/* Submit row + button. Helper outputs `<button class="btn">` which only
   inherits Bootstrap's plain .btn — make it look like Calmind .btn-main. */
.plich-kontakt .input--submit {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.plich-kontakt .input-required {
  color: rgba(0, 0, 0, .55);
  font-size: 0.875rem;
}

.plich-kontakt .input--submit .btn {
  background: var(--primary-color);
  color: var(--btn-color, #fff);
  font-family: var(--btn-font-family, inherit);
  font-size: var(--btn-font-size, 15px);
  font-weight: var(--btn-font-weight, 600);
  letter-spacing: var(--btn-letter-spacing, 0);
  text-transform: var(--btn-text-transform, none);
  padding: 0.7rem 1.75rem;
  border: none;
  border-radius: var(--btn-rounded, 30px);
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}

.plich-kontakt .input--submit .btn:hover,
.plich-kontakt .input--submit .btn:focus {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

/* Helper emits .popup-status as an always-present element; JS toggles a
   visibility class on submit. Hide by default so the success/error states
   only appear when the helper's JS asks for them. */
.plich-kontakt .popup-status {
  display: none;
}

.plich-kontakt .popup-status.is-visible,
.plich-kontakt .popup-status.show,
.plich-kontakt .popup-status.active {
  display: block;
}

/* Facebook icon next to the phone button in the header — pick up the
   accent colour and a hover bump so it reads as an interactive control,
   not a stray decoration. */
.header-facebook {
  color: var(--primary-color, #363F4B);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color .2s ease, transform .2s ease;
}
.header-facebook:hover,
.header-facebook:focus {
  color: var(--secondary-color, var(--primary-color, #363F4B));
  transform: translateY(-1px);
}