/*
Theme Name: Homeopatia Łomża
Theme URI: https://homeopatialomza.pl/
Author: ap2media
Author URI: https://ap2media.com/
Description: Autorski motyw dla Gabinetu Homeopatii Klasycznej. Design „apteczno-botaniczny" (zieleń + papier + miód), fonty Fraunces + Mulish. Edytowalne menu, blog z panelem bocznym, uniwersalny szablon strony do wklejania kodu HTML podstron oraz zaprojektowana strona 404.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homeopatia-lomza
*/

/* ============================================================================
   SPIS TREŚCI
   1. ZMIENNE / TOKENY + BASE  (oryginalny system z plików .hp i .hpjp)
   2. DESIGN STRONY GŁÓWNEJ    (scope: .hp)  — wklejasz treść w <div class="hp">
   3. DESIGN PODSTRON           (scope: .hpjp) — wklejasz treść w <div class="hpjp">
   4. NAWIGACJA / MENU WORDPRESS (dostosowanie do list <ul> z wp_nav_menu)
   5. BLOG: listing, pojedynczy wpis, paginacja, sidebar, widżety
   6. KOMENTARZE
   7. STRONA 404
   8. POMOCNIKI WORDPRESS (wyrównania, podpisy, screen-reader, formularz)
   ============================================================================ */

/* reset współdzielony dla obu scope'ów */
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background: #F3F0E8; }

/* ============================================================================
   2. DESIGN STRONY GŁÓWNEJ  (scope .hp)
   ============================================================================ */
/* ====================================================================
       Homeopatia Łomża — strona główna
       Scope: .hp  (paleta „apteczno-botaniczna": zieleń + papier + miód)
       ==================================================================== */
    html, body { margin: 0; padding: 0; overflow-x: hidden; }
    .hp {
      --paper: #F3F0E8;
      --paper-2: #FBFAF6;
      --ink: #28332A;
      --ink-soft: #4A574A;
      --green-900: #202A20;
      --green-800: #27331F;
      --green-700: #3B4A39;
      --sage: #7E8F73;
      --sage-line: #D8DCCC;
      --sage-tint: #E8EADD;
      --amber: #B97B33;
      --amber-deep: #9C6526;
      --amber-soft: #EADBBE;

      --display: 'Fraunces', Georgia, 'Times New Roman', serif;
      --body: 'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

      --maxw: 1180px;
      --r: 18px;
      --nav-h: 76px;

      color: var(--ink);
      font-family: var(--body);
      font-size: 18px;
      line-height: 1.7;
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    .hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
    .hp p { margin: 0 0 1.1em; }
    .hp strong { font-weight: 700; }
    .hp ul { margin: 0; padding: 0; list-style: none; }
    .hp a { color: inherit; }
    .hp img { max-width: 100%; display: block; }
    .hp .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    .hp .eyebrow {
      font-family: var(--body); font-weight: 700; font-size: .74rem;
      letter-spacing: .22em; text-transform: uppercase; color: var(--amber-deep);
      margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .7em;
    }
    .hp .eyebrow::before {
      content: ""; width: 26px; height: 1px; background: var(--amber); display: inline-block;
    }

    .hp h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 1.1rem; }
    .hp h3 { font-family: var(--display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; margin: 0 0 .8rem; }

    .hp .btn {
      display: inline-flex; align-items: center; gap: 10px; font-family: var(--body);
      font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 999px;
      text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }
    .hp .btn svg { flex: none; }
    .hp .btn-primary { background: var(--amber); color: #fff; box-shadow: 0 12px 26px -14px rgba(185,123,51,.9); }
    .hp .btn-primary:hover { background: var(--amber-deep); transform: translateY(-2px); }
    .hp .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
    .hp .btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
    .hp .btn-light { background: #fff; color: var(--green-900); }
    .hp .btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.5); }
    .hp .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
    .hp .btn-outline-light:hover { background: #fff; color: var(--green-900); }

    .hp .link-more {
      display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
      text-decoration: none; color: var(--amber-deep); letter-spacing: .01em;
    }
    .hp .link-more svg { transition: transform .25s ease; }
    .hp .link-more:hover svg { transform: translateX(4px); }

    /* ---------- NAV ---------- */
    .hp .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
      display: flex; align-items: center;
      background: #ffffff;
      transition: box-shadow .35s ease, border-color .35s ease;
      border-bottom: 1px solid var(--sage-line);
    }
    .hp .nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .hp .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
    .hp .brand-logo { max-height: 48px; width: auto; object-fit: contain; }
    .hp .menu { display: flex; align-items: center; gap: 30px; }
    .hp .menu a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem; position: relative; transition: color .35s ease; }
    .hp .menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--amber); transition: right .3s ease; }
    .hp .menu a:hover::after { right: 0; }
    .hp .nav .nav-cta { display: inline-flex; }
    .hp .burger { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; align-items: center; justify-content: center; }
    .hp .burger span { display: block; width: 24px; height: 2px; background: var(--ink); position: relative; transition: background .35s ease; }
    .hp .burger span::before, .hp .burger span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink); transition: transform .3s ease, top .3s ease; }
    .hp .burger span::before { top: -7px; }
    .hp .burger span::after { top: 7px; }

    /* nav po scrollu -> dodajemy tylko cień, bo tło jest już na stałe białe */
    .hp .nav.solid { box-shadow: 0 10px 30px -22px rgba(32,42,32,.5); }

    /* ---------- HERO ---------- */
    .hp .hero {
      position: relative;
      /* Zmienione właściwości wysokości dopasowane do obrazu 768px */
      height: 100vh;
      min-height: 600px;
      max-height: 768px;
      display: flex; align-items: center;
      padding: calc(var(--nav-h) + 40px) 0 80px; color: #fff; overflow: hidden;
    }
    .hp .hero .bg { position: absolute; inset: 0; z-index: 0; }
    .hp .hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
    .hp .hero .bg::after {
      content: ""; position: absolute; inset: 0;
      background:
        linear-gradient(100deg, rgba(24,32,24,.92) 0%, rgba(24,32,24,.74) 38%, rgba(24,32,24,.30) 75%, rgba(24,32,24,.15) 100%),
        linear-gradient(0deg, rgba(24,32,24,.55), transparent 45%);
    }
    .hp .hero .wrap {
      position: relative; 
      z-index: 1; 
      width: 100%; /* Dodano wyrównanie do lewej */
    }
    .hp .hero-inner { max-width: 680px; }
    .hp .hero .eyebrow { color: var(--amber-soft); }
    .hp .hero .eyebrow::before { background: var(--amber-soft); }
    .hp .hero h1 {
      font-family: var(--display); font-weight: 400;
      font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em;
      margin: 0 0 1.2rem; color: #F7F6EF;
    }
    .hp .hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.6; color: #D9DCCF; max-width: 600px; margin: 0 0 1.4rem; }
    .hp .hero .sub { font-size: 1rem; color: #BFC4B5; max-width: 560px; margin: 0 0 2.2rem; }
    .hp .hero .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .hp .scroll-hint {
      position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1;
      color: rgba(255,255,255,.6); display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    }
    .hp .scroll-hint svg { animation: hpbob 1.8s ease-in-out infinite; }
    @keyframes hpbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

    /* ---------- sekcje ---------- */
    .hp .section { padding: clamp(64px, 8vw, 118px) 0; }
    .hp .section.alt { background: var(--paper-2); }
    .hp .lede { font-size: 1.12rem; color: var(--ink-soft); }

    /* dwukolumnowy układ */
    .hp .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
    .hp .split.reverse .col-media { order: 2; }
    .hp .col-copy p { color: var(--ink-soft); }
    .hp .media-frame {
      position: relative; border-radius: var(--r); overflow: hidden;
      box-shadow: 0 30px 60px -34px rgba(32,42,32,.55);
    }
    .hp .media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
    .hp .media-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r); pointer-events: none; }

    /* karta z poświadczeniami */
    .hp .cred {
      background: var(--paper); border: 1px solid var(--sage-line); border-radius: var(--r);
      padding: 30px 32px; display: grid; gap: 18px;
    }
    .hp .alt .cred { background: var(--paper-2); }
    .hp .cred .ci { display: flex; gap: 16px; align-items: flex-start; }
    .hp .cred .ci .ic {
      flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--sage-tint);
      color: var(--green-700); display: flex; align-items: center; justify-content: center;
    }
    .hp .cred .ci h4 { margin: 0 0 2px; font-family: var(--body); font-size: 1rem; font-weight: 700; color: var(--ink); }
    .hp .cred .ci p { margin: 0; font-size: .95rem; color: var(--ink-soft); line-height: 1.45; }

    /* pasek-cytat (similia) */
    .hp .quote-band { background: var(--sage-tint); }
    .hp .quote-band .wrap { max-width: 900px; text-align: center; }
    .hp .quote-band .latin { font-family: var(--display); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.25; color: var(--green-800); margin: 0 0 .6rem; }
    .hp .quote-band .gloss { color: var(--ink-soft); margin: 0; }

    /* sekcja konsultacja – ciemna zieleń */
    .hp .band-green { background: var(--green-900); color: #E9EBE0; }
    .hp .band-green .eyebrow { color: var(--amber-soft); }
    .hp .band-green .eyebrow::before { background: var(--amber-soft); }
    .hp .band-green h2 { color: #F4F4EC; }
    .hp .band-green p { color: #CDD2C3; }
    .hp .band-green .link-more { color: var(--amber-soft); }

    /* kontakt */
    .hp .contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
    .hp .contact-card {
      background: var(--green-900); color: #E9EBE0; border-radius: var(--r);
      padding: clamp(30px, 4vw, 48px);
    }
    .hp .contact-card .eyebrow { color: var(--amber-soft); }
    .hp .contact-card .eyebrow::before { background: var(--amber-soft); }
    .hp .contact-card h3 { color: #F4F4EC; font-size: 1.55rem; }
    .hp .contact-list { display: grid; gap: 20px; margin-top: 1.6rem; }
    .hp .contact-list a, .hp .contact-list span { text-decoration: none; }
    .hp .ci-row { display: flex; gap: 16px; align-items: flex-start; }
    .hp .ci-row .ic {
      flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(234,219,190,.14);
      color: var(--amber-soft); display: flex; align-items: center; justify-content: center;
    }
    .hp .ci-row .lbl { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); font-weight: 700; display: block; margin-bottom: 3px; }
    .hp .ci-row .val { color: #F1F2EA; font-weight: 600; font-size: 1.04rem; line-height: 1.4; }
    .hp .ci-row a.val:hover { color: var(--amber-soft); }
    .hp .map-frame { border-radius: var(--r); overflow: hidden; border: 1px solid var(--sage-line); min-height: 320px; background: var(--sage-tint); display: flex; flex-direction: column; }
    .hp .map-frame iframe { width: 100%; height: 100%; border: 0; flex: 1; min-height: 320px; }

    /* blog */
    .hp .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2.6rem; }
    .hp .post {
      display: flex; flex-direction: column; background: var(--paper-2); border: 1px solid var(--sage-line);
      border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit;
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .hp .alt .post { background: var(--paper); }
    .hp .post:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -28px rgba(32,42,32,.5); border-color: var(--amber-soft); }
    .hp .post .ptop { height: 7px; background: linear-gradient(90deg, var(--amber), var(--sage)); }
    .hp .post .pbody { padding: 28px 26px; display: flex; flex-direction: column; flex: 1; }
    .hp .post .ptag { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--sage); margin-bottom: .9rem; }
    .hp .post h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 1.4rem; color: var(--ink); }
    .hp .post .pmeta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink-soft); padding-top: 16px; border-top: 1px solid var(--sage-line); }
    .hp .post .pmeta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sage); }
    .hp .blog-foot { text-align: center; margin-top: 2.6rem; }

    /* ---------- FOOTER ---------- */
    .hp .footer { background: #1A221A; color: #C7CCBD; padding: 72px 0 28px; }
    .hp .footer a { text-decoration: none; color: #C7CCBD; transition: color .25s ease; }
    .hp .footer a:hover { color: var(--amber-soft); }
    .hp .f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 48px; }
    .hp .footer .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #F2F3EB; margin-bottom: 16px; }
    .hp .footer .brand .name { font-family: var(--display); font-weight: 500; font-size: 1.28rem; line-height: 1; }
    .hp .footer .brand .name small { display: block; font-family: var(--body); font-weight: 700; font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; margin-top: 4px; opacity: .7; }
    .hp .footer .f-about { font-size: .96rem; line-height: 1.6; color: #A9B0A1; max-width: 340px; margin: 0; }
    .hp .footer h4 { font-family: var(--body); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); font-weight: 700; margin: 0 0 18px; }
    .hp .footer .f-nav { display: grid; gap: 12px; }
    .hp .footer .f-contact { display: grid; gap: 14px; font-size: .96rem; }
    .hp .footer .f-contact .l { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 2px; }
    .hp .f-social { display: flex; gap: 12px; margin-top: 20px; }
    .hp .f-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(199,204,189,.25); display: flex; align-items: center; justify-content: center; color: #C7CCBD; transition: all .25s ease; }
    .hp .f-social a:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
    .hp .f-bottom { margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(199,204,189,.16); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: #8E9587; }

    /* reveal */
    .hp .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
    .hp .reveal.in { opacity: 1; transform: none; }
    @media(prefers-reduced-motion:reduce){
      .hp .reveal { opacity: 1; transform: none; transition: none; }
      .hp .post, .hp .btn { transition: none; }
      .hp .scroll-hint svg { animation: none; }
    }

    /* ---------- mobile ---------- */
    .hp .mobile-menu {
      position: fixed; inset: 0; z-index: 60; background: var(--green-900); color: #fff;
      display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
      opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
    }
    .hp .mobile-menu.open { opacity: 1; visibility: visible; }
    .hp .mobile-menu a { color: #fff; text-decoration: none; font-family: var(--display); font-size: 1.7rem; padding: 12px 0; }
    .hp .mobile-menu .btn { margin-top: 22px; }
    .hp .mobile-close { position: absolute; top: 22px; right: 22px; background: none; border: 0; color: #fff; cursor: pointer; width: 46px; height: 46px; }

    @media(max-width:920px) {
      .hp .menu, .hp .nav .nav-cta { display: none; }
      .hp .burger { display: inline-flex; }
      .hp .split { grid-template-columns: 1fr; gap: 32px; }
      .hp .split.reverse .col-media { order: 0; }
      .hp .contact-grid { grid-template-columns: 1fr; }
      .hp .post-grid { grid-template-columns: 1fr; }
      .hp .f-grid { grid-template-columns: 1fr; gap: 36px; }
      .hp .hero .bg img { object-position: 80% center; }
    }
    @media(max-width:520px) {
      .hp { font-size: 17px; }
      .hp .hero { min-height: auto; height: auto; padding-top: calc(var(--nav-h) + 60px); padding-bottom: 70px; }
      .hp .scroll-hint { display: none; }
    }

/* ============================================================================
   3. DESIGN PODSTRON  (scope .hpjp)
   ============================================================================ */
/* ====================================================================
       Homeopatia Łomża — sekcja „Jak pracuję?" + Globalne Elementy
       Wszystko zescope'owane pod .hpjp, aby ułatwić implementację.
       ==================================================================== */
    .hpjp {
      --paper: #F3F0E8;        /* ciepły papier (tło) */
      --paper-2: #FBFAF6;      /* powierzchnia kart */
      --ink: #28332A;          /* głęboka zieleń – tekst */
      --ink-soft: #4A574A;     /* tekst pomocniczy */
      --green-900: #202A20;    /* ciemne sekcje */
      --green-700: #3B4A39;
      --sage: #7E8F73;         /* akcent ziołowy */
      --sage-line: #D8DCCC;    /* delikatne linie */
      --amber: #B97B33;        /* miodowy akcent / ceny */
      --amber-deep: #9C6526;
      --amber-soft: #EADBBE;

      --display: 'Fraunces', Georgia, 'Times New Roman', serif;
      --body: 'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

      --maxw: 1120px;
      --r: 18px;
      --nav-h: 76px; /* wysokość nawigacji do odliczeń */

      color: var(--ink);
      font-family: var(--body);
      font-size: 18px;
      line-height: 1.7;
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden; /* Dodatkowe zabezpieczenie na element rodzica */
    }
    
    .hpjp *, .hpjp *::before, .hpjp *::after { box-sizing: border-box; }
    .hpjp p { margin: 0 0 1.1em; }
    .hpjp strong { font-weight: 700; color: var(--ink); }
    .hpjp em { font-style: italic; }
    .hpjp ul { margin: 0; padding: 0; list-style: none; }
    .hpjp a { color: inherit; }
    .hpjp img { max-width: 100%; display: block; }
    .hpjp .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

    .hpjp .eyebrow {
      font-family: var(--body); font-weight: 700; font-size: .74rem;
      letter-spacing: .22em; text-transform: uppercase; color: var(--amber-deep);
      margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .7em;
    }
    .hpjp .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--amber); display: inline-block; }

    .hpjp h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 1.1rem; color: var(--ink); }
    .hpjp h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; margin: 0 0 1rem; color: var(--ink); }

    .hpjp .leaf { display: flex; align-items: center; gap: 18px; margin: 0 auto; max-width: 340px; opacity: .9; }
    .hpjp .leaf::before, .hpjp .leaf::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sage), transparent); }
    .hpjp .leaf svg { flex: none; color: var(--sage); }

    /* Przyciski globalne (współdzielone m.in. dla menu i CTA) */
    .hpjp .btn {
      display: inline-flex; align-items: center; gap: 10px; font-family: var(--body);
      font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 999px;
      text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }
    .hpjp .btn svg { flex: none; }
    .hpjp .btn-primary { background: var(--amber); color: #fff; box-shadow: 0 12px 26px -14px rgba(185,123,51,.9); }
    .hpjp .btn-primary:hover { background: var(--amber-deep); transform: translateY(-2px); }
    .hpjp .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
    .hpjp .btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

    /* ---------- NAV ---------- */
    .hpjp .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
      display: flex; align-items: center;
      background: #ffffff; /* Zawsze białe tło dla prawidłowego wyświetlenia logo */
      transition: box-shadow .35s ease, border-color .35s ease;
      border-bottom: 1px solid var(--sage-line);
    }
    .hpjp .nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .hpjp .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
    .hpjp .brand-logo { max-height: 48px; width: auto; object-fit: contain; }
    .hpjp .menu { display: flex; align-items: center; gap: 30px; }
    .hpjp .menu a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem; position: relative; transition: color .35s ease; }
    .hpjp .menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--amber); transition: right .3s ease; }
    .hpjp .menu a:hover::after { right: 0; }
    .hpjp .nav .nav-cta { display: inline-flex; }
    
    /* Ikona hamburgera dla mobilnego */
    .hpjp .burger { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; align-items: center; justify-content: center; }
    .hpjp .burger span { display: block; width: 24px; height: 2px; background: var(--ink); position: relative; transition: background .35s ease; }
    .hpjp .burger span::before, .hpjp .burger span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink); transition: transform .3s ease, top .3s ease; }
    .hpjp .burger span::before { top: -7px; }
    .hpjp .burger span::after { top: 7px; }

    /* Cień po przewinięciu strony */
    .hpjp .nav.solid { box-shadow: 0 10px 30px -22px rgba(32,42,32,.5); border-bottom-color: transparent; }

    /* ---------- HERO ---------- */
    .hpjp .hero {
      background: var(--green-900);
      color: #EEEFE6;
      /* Dodany górny padding uwzględniający wysokość menu (--nav-h) */
      padding: calc(var(--nav-h) + clamp(40px, 8vw, 90px)) 0 clamp(64px, 9vw, 120px);
      position: relative;
      overflow: hidden;
    }
    .hpjp .hero::after {
      content: ""; position: absolute; right: -10%; top: -30%;
      width: 60vw; height: 60vw; max-width: 680px; max-height: 680px;
      background: radial-gradient(circle at 50% 50%, rgba(185,123,51,.16), transparent 62%);
      pointer-events: none;
    }
    .hpjp .hero .wrap { position: relative; z-index: 1; max-width: 860px; }
    .hpjp .hero .eyebrow { color: var(--amber-soft); }
    .hpjp .hero .eyebrow::before { background: var(--amber-soft); }
    .hpjp .hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.7rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1.3rem; color: #F6F5EE; }
    .hpjp .hero .lead { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.6; color: #CFD3C4; max-width: 620px; margin: 0; }
    .hpjp .hero .sig { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1.45; color: var(--amber-soft); border-left: 2px solid var(--amber); padding-left: 22px; margin-top: 2.4rem; max-width: 640px; }

    /* ---------- sekcje na papierze ---------- */
    .hpjp .section { padding: clamp(56px, 8vw, 104px) 0; }
    .hpjp .section.tight { padding-top: 0; }
    .hpjp .measure { max-width: 720px; }

    /* wyróżnione pytanie */
    .hpjp .ask { background: var(--paper-2); border: 1px solid var(--sage-line); border-radius: var(--r); padding: 26px 30px; margin: 1.8rem 0; }
    .hpjp .ask .q-big { font-family: var(--display); font-size: 1.45rem; color: var(--amber-deep); font-weight: 500; margin: 0 0 .6rem; }
    .hpjp .ask .q-rest { margin: 0; color: var(--ink-soft); }

    /* lista „zwracam uwagę na" */
    .hpjp .focus-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; margin: 1.4rem 0 0; }
    .hpjp .focus-list li { position: relative; padding-left: 30px; line-height: 1.5; color: var(--ink-soft); }
    .hpjp .focus-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 13px; height: 13px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }

    /* pull-quote – sygnaturowy moment */
    .hpjp .pull { text-align: center; max-width: 860px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 24px; }
    .hpjp .pull p { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.32; color: var(--ink); margin: 1.6rem 0 0; letter-spacing: -.01em; }

    /* karta warunków */
    .hpjp .terms { background: var(--paper-2); border: 1px solid var(--sage-line); border-radius: var(--r); padding: clamp(28px, 4vw, 48px); }
    .hpjp .terms ul { display: grid; gap: 14px; margin-top: 1.2rem; }
    .hpjp .terms li { position: relative; padding-left: 32px; color: var(--ink-soft); line-height: 1.55; }
    .hpjp .terms li::before { content: ""; position: absolute; left: 0; top: .15em; width: 18px; height: 18px; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B97B33' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12.5 9.5 18 20 6'/></svg>"); }

    /* ---------- CENNIK ---------- */
    .hpjp .pricing { background: var(--paper); }
    .hpjp .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 2.4rem; align-items: start; }
    
    .hpjp .card { background: var(--paper-2); border: 1px solid var(--sage-line); border-radius: var(--r); padding: 32px 30px; display: flex; flex-direction: column; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
    .hpjp .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(32,42,32,.45); border-color: var(--amber-soft); }
    .hpjp .card .kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); font-weight: 700; margin-bottom: .7rem; }
    .hpjp .card h3 { margin-bottom: .5rem; }
    .hpjp .card .dur { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
    .hpjp .card .dur svg { flex: none; color: var(--sage); }
    .hpjp .card .label { font-weight: 700; font-size: .95rem; margin: .3rem 0 .6rem; color: var(--ink); }
    
    .hpjp .card ul.inc { display: grid; gap: 9px; margin: 0 0 1.4rem; }
    .hpjp .card ul.inc li { position: relative; padding-left: 24px; font-size: .98rem; color: var(--ink-soft); line-height: 1.45; }
    .hpjp .card ul.inc li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
    
    .hpjp .card .body-note { font-size: .98rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
    .hpjp .card .spacer { flex: 1; }
    .hpjp .card .price { margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--sage-line); display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
    .hpjp .card .price .amt { font-family: var(--display); font-weight: 600; font-size: 2.2rem; color: var(--amber-deep); line-height: 1; }
    .hpjp .card .price .unit { font-size: .95rem; color: var(--ink-soft); }
    
    /* warianty cenowe (dziecko / abonament) */
    .hpjp .price-rows { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--sage-line); display: grid; gap: 14px; }
    .hpjp .price-rows .row-group .rg-title { font-weight: 700; font-size: .9rem; margin-bottom: .45rem; color: var(--ink); }
    .hpjp .price-rows .pr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .97rem; color: var(--ink-soft); }
    .hpjp .price-rows .pr .v { font-family: var(--display); font-weight: 600; color: var(--amber-deep); white-space: nowrap; }
    
    .hpjp .card.wide { grid-column: 1 / -1; }
    @media(min-width:760px) { .hpjp .card.feature { grid-column: span 2; } }

    /* ---------- dane do płatności ---------- */
    .hpjp .pay { background: var(--green-900); color: #E9EBE0; border-radius: var(--r); padding: clamp(34px, 5vw, 56px); margin-top: 2.6rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
    .hpjp .pay .eyebrow { color: var(--amber-soft); }
    .hpjp .pay .eyebrow::before { background: var(--amber-soft); }
    .hpjp .pay h3 { color: #F4F4EC; font-size: 1.55rem; margin-bottom: .3rem; }
    .hpjp .pay .who { color: #C6CBBC; margin: 0; }
    .hpjp .pay dl { margin: 0; display: grid; gap: 14px; }
    .hpjp .pay dl > div { display: grid; gap: 2px; }
    .hpjp .pay dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); font-weight: 700; }
    .hpjp .pay dd { margin: 0; font-size: 1.08rem; color: #F1F2EA; font-weight: 600; }
    .hpjp .pay dd.title-note { font-weight: 400; font-style: italic; color: #CFD3C4; font-size: 1rem; }

    /* ---------- CTA / kontakt ---------- */
    .hpjp .cta { text-align: center; padding: clamp(64px, 9vw, 112px) 0; background: radial-gradient(circle at 50% -20%, rgba(185,123,51,.12), transparent 55%), var(--paper); }
    .hpjp .cta h2 { max-width: 18ch; margin-inline: auto; }
    .hpjp .cta .who { color: var(--ink-soft); margin: .2rem 0 2rem; }
    .hpjp .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* ---------- FOOTER ---------- */
    .hpjp .footer { background: #1A221A; color: #C7CCBD; padding: 72px 0 28px; margin-top: auto; }
    .hpjp .footer a { text-decoration: none; color: #C7CCBD; transition: color .25s ease; }
    .hpjp .footer a:hover { color: var(--amber-soft); }
    .hpjp .f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 48px; }
    .hpjp .footer .f-about { font-size: .96rem; line-height: 1.6; color: #A9B0A1; max-width: 340px; margin: 0; }
    .hpjp .footer h4 { font-family: var(--body); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); font-weight: 700; margin: 0 0 18px; }
    .hpjp .footer .f-nav { display: grid; gap: 12px; }
    .hpjp .footer .f-contact { display: grid; gap: 14px; font-size: .96rem; }
    .hpjp .footer .f-contact .l { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 2px; }
    .hpjp .f-social { display: flex; gap: 12px; margin-top: 20px; }
    .hpjp .f-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(199,204,189,.25); display: flex; align-items: center; justify-content: center; color: #C7CCBD; transition: all .25s ease; }
    .hpjp .f-social a:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
    .hpjp .f-bottom { margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(199,204,189,.16); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: #8E9587; }

    /* ---------- mobile menu ---------- */
    .hpjp .mobile-menu {
      position: fixed; inset: 0; z-index: 60; background: var(--green-900); color: #fff;
      display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
      opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
    }
    .hpjp .mobile-menu.open { opacity: 1; visibility: visible; }
    .hpjp .mobile-menu a { color: #fff; text-decoration: none; font-family: var(--display); font-size: 1.7rem; padding: 12px 0; }
    .hpjp .mobile-menu .btn { margin-top: 22px; }
    .hpjp .mobile-close { position: absolute; top: 22px; right: 22px; background: none; border: 0; color: #fff; cursor: pointer; width: 46px; height: 46px; }

    /* ---------- animacja wejścia ---------- */
    .hpjp .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
    .hpjp .reveal.in { opacity: 1; transform: none; }

    @media(prefers-reduced-motion:reduce){
      .hpjp .reveal { opacity: 1; transform: none; transition: none; }
      .hpjp .card { transition: none; }
    }

    /* ---------- responsywność ---------- */
    @media(max-width:920px) {
      .hpjp .menu, .hpjp .nav .nav-cta { display: none; }
      .hpjp .burger { display: inline-flex; }
      .hpjp .f-grid { grid-template-columns: 1fr; gap: 36px; }
    }
    @media(max-width:680px){
      .hpjp { font-size: 17px; }
      .hpjp .focus-list { grid-template-columns: 1fr; }
      .hpjp .pay { grid-template-columns: 1fr; gap: 26px; }
    }

/* ============================================================================
   TOKENY NA :root — żeby elementy poza .hp/.hpjp też miały dostęp do palety
   ============================================================================ */
:root{
  --paper:#F3F0E8; --paper-2:#FBFAF6; --ink:#28332A; --ink-soft:#4A574A;
  --green-900:#202A20; --green-800:#27331F; --green-700:#3B4A39;
  --sage:#7E8F73; --sage-line:#D8DCCC; --sage-tint:#E8EADD;
  --amber:#B97B33; --amber-deep:#9C6526; --amber-soft:#EADBBE;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --maxw:1180px; --r:18px; --nav-h:76px;
}

/* ============================================================================
   4. NAWIGACJA / MENU WORDPRESS
   wp_nav_menu generuje <ul class="menu"><li><a>…  — tu to dostrajamy
   ============================================================================ */
.hp .menu{ list-style:none; margin:0; padding:0; }
.hp .menu li{ margin:0; position:relative; }
.hp .menu .sub-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  min-width:210px; background:#fff; border:1px solid var(--sage-line); border-radius:14px;
  padding:8px; display:flex; flex-direction:column; gap:2px; box-shadow:0 24px 48px -28px rgba(32,42,32,.5);
  opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s ease; z-index:60;
}
.hp .menu li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.hp .menu .sub-menu li a{ display:block; padding:9px 14px; border-radius:9px; font-size:.95rem; }
.hp .menu .sub-menu li a::after{ display:none; }
.hp .menu .sub-menu li a:hover{ background:var(--sage-tint); }
.hp .menu .menu-item-has-children > a{ display:inline-flex; align-items:center; gap:6px; }
.hp .menu .menu-item-has-children > a::before{ /* mała strzałka */ }
.hp .nav .current-menu-item > a::after,
.hp .nav .current_page_item > a::after{ right:0; }

/* logo / brand tekstowy fallback */
.hp .brand-name{ font-family:var(--display); font-weight:500; font-size:1.32rem; line-height:1; color:var(--ink); letter-spacing:-.01em; }
.hp .brand .custom-logo{ max-height:48px; width:auto; }

/* menu mobilne z <ul> */
.hp .mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.hp .mobile-menu li{ margin:0; }
.hp .mobile-menu .sub-menu{ gap:0; }
.hp .mobile-menu .sub-menu a{ font-size:1.15rem; opacity:.85; }

/* odsuń treść spod stałego (fixed) nagłówka na stronach generowanych przez motyw */
.site-main{ min-height:50vh; }

/* ============================================================================
   5. BLOG — nagłówek sekcji, układ z sidebarem, karty, pojedynczy wpis
   ============================================================================ */

/* nagłówek (hero) dla bloga / archiwów / wyszukiwania / 404 */
.hp .page-hero{
  background:var(--green-900); color:#EEEFE6; position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(40px,7vw,80px)) 0 clamp(46px,6vw,70px);
}
.hp .page-hero::after{
  content:""; position:absolute; right:-10%; top:-30%; width:60vw; height:60vw;
  max-width:680px; max-height:680px; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(185,123,51,.16), transparent 62%);
}
.hp .page-hero .wrap{ position:relative; z-index:1; max-width:860px; }
.hp .page-hero .eyebrow{ color:var(--amber-soft); }
.hp .page-hero .eyebrow::before{ background:var(--amber-soft); }
.hp .page-hero h1{
  font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-.02em;
  font-size:clamp(2.3rem,5.4vw,3.7rem); margin:0 0 1rem; color:#F6F5EE;
}
.hp .page-hero .lead{ font-size:clamp(1.02rem,1.8vw,1.22rem); color:#CFD3C4; max-width:640px; margin:0; }
.hp .page-hero .crumbs{ font-size:.82rem; letter-spacing:.04em; color:#9FB096; margin-bottom:1rem; }
.hp .page-hero .crumbs a{ color:#CFD3C4; text-decoration:none; }
.hp .page-hero .crumbs a:hover{ color:var(--amber-soft); }

/* układ blog: treść + panel boczny */
.hp .blog-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(34px,4vw,64px);
  align-items:start; padding:clamp(54px,7vw,90px) 0;
}
.hp .blog-main{ min-width:0; }

/* lista wpisów */
.hp .post-list{ display:grid; gap:26px; }
.hp .article-card{
  display:grid; grid-template-columns:240px 1fr; background:var(--paper-2);
  border:1px solid var(--sage-line); border-radius:var(--r); overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.hp .article-card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(32,42,32,.5); border-color:var(--amber-soft); }
.hp .article-card .thumb{ position:relative; overflow:hidden; background:var(--sage-tint); }
.hp .article-card .thumb a{ display:block; height:100%; }
.hp .article-card .thumb img{ width:100%; height:100%; object-fit:cover; min-height:180px; }
.hp .article-card .thumb.no-img{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--sage-tint), var(--amber-soft));
}
.hp .article-card .thumb.no-img svg{ width:48px; height:48px; color:var(--green-700); opacity:.55; }
.hp .article-card .card-body{ padding:28px 28px 26px; display:flex; flex-direction:column; }
.hp .article-card .ptag{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--sage); margin-bottom:.75rem; }
.hp .article-card h2{ font-size:1.45rem; line-height:1.22; margin:0 0 .7rem; }
.hp .article-card h2 a{ text-decoration:none; color:var(--ink); transition:color .25s ease; }
.hp .article-card h2 a:hover{ color:var(--amber-deep); }
.hp .article-card .excerpt{ color:var(--ink-soft); font-size:1rem; margin:0 0 1.2rem; }
.hp .article-card .pmeta{ margin-top:auto; display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink-soft); padding-top:14px; border-top:1px solid var(--sage-line); flex-wrap:wrap; }
.hp .article-card .pmeta .dot{ width:4px; height:4px; border-radius:50%; background:var(--sage); }

/* paginacja */
.hp .pagination{ margin-top:46px; display:flex; justify-content:center; }
.hp .pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.hp .pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:46px;
  padding:0 14px; border-radius:999px; border:1px solid var(--sage-line); background:var(--paper-2);
  text-decoration:none; color:var(--ink); font-weight:700; transition:all .25s ease;
}
.hp .pagination .page-numbers:hover{ border-color:var(--amber); color:var(--amber-deep); }
.hp .pagination .page-numbers.current{ background:var(--amber); border-color:var(--amber); color:#fff; }
.hp .pagination .page-numbers.dots{ border-color:transparent; background:transparent; }

/* ---------- pojedynczy wpis ---------- */
.hp .post-full{ padding-bottom:6px; }
.hp .post-full .post-head{ margin-bottom:1.8rem; }
.hp .post-full .post-cats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
.hp .post-full .post-cats a{
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--amber-deep);
  text-decoration:none; background:var(--amber-soft); padding:6px 12px; border-radius:999px;
}
.hp .post-full h1{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,4.4vw,3rem); line-height:1.1; letter-spacing:-.01em; margin:0 0 1rem; color:var(--ink); }
.hp .post-full .pmeta{ display:flex; align-items:center; gap:12px; font-size:.9rem; color:var(--ink-soft); flex-wrap:wrap; }
.hp .post-full .pmeta .dot{ width:4px; height:4px; border-radius:50%; background:var(--sage); }
.hp .post-full .feat{ border-radius:var(--r); overflow:hidden; margin:1.8rem 0 2.4rem; border:1px solid var(--sage-line); box-shadow:0 30px 60px -34px rgba(32,42,32,.55); }
.hp .post-full .feat img{ width:100%; height:auto; display:block; }

/* PROZA — formatowanie treści wpisu/strony */
.hp .prose{ font-size:1.06rem; line-height:1.75; color:var(--ink); }
.hp .prose > *:first-child{ margin-top:0; }
.hp .prose p{ margin:0 0 1.2em; color:var(--ink); }
.hp .prose h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.2; margin:2.2rem 0 .9rem; color:var(--ink); }
.hp .prose h3{ font-family:var(--display); font-weight:500; font-size:1.4rem; margin:1.8rem 0 .7rem; color:var(--ink); }
.hp .prose h4{ font-family:var(--body); font-weight:700; font-size:1.1rem; margin:1.5rem 0 .5rem; color:var(--ink); }
.hp .prose a{ color:var(--amber-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.hp .prose a:hover{ color:var(--amber); }
.hp .prose ul, .hp .prose ol{ margin:0 0 1.3em; padding-left:1.3em; }
.hp .prose ul{ list-style:disc; }
.hp .prose ol{ list-style:decimal; }
.hp .prose li{ margin:.4em 0; padding-left:.2em; }
.hp .prose li::marker{ color:var(--amber); }
.hp .prose blockquote{
  margin:1.8em 0; padding:.4em 0 .4em 1.4em; border-left:3px solid var(--amber);
  font-family:var(--display); font-style:italic; font-size:1.3rem; line-height:1.45; color:var(--green-800);
}
.hp .prose blockquote p{ margin:0 0 .5em; }
.hp .prose img{ max-width:100%; height:auto; border-radius:14px; }
.hp .prose figure{ margin:1.8em 0; }
.hp .prose figcaption{ font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:.6em; font-style:italic; }
.hp .prose hr{ border:0; height:1px; background:var(--sage-line); margin:2.4em 0; }
.hp .prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--sage-tint); padding:.15em .45em; border-radius:6px; }
.hp .prose pre{ background:var(--green-900); color:#E9EBE0; padding:20px 22px; border-radius:14px; overflow:auto; margin:1.6em 0; }
.hp .prose pre code{ background:none; padding:0; color:inherit; }
.hp .prose table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.96rem; }
.hp .prose th, .hp .prose td{ border:1px solid var(--sage-line); padding:10px 14px; text-align:left; }
.hp .prose th{ background:var(--sage-tint); font-weight:700; }
.hp .prose :is(h2,h3) + p{ margin-top:0; }

/* tagi + nawigacja między wpisami */
.hp .post-tags{ margin:2.4rem 0 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.hp .post-tags .tl{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); font-weight:700; margin-right:4px; }
.hp .post-tags a{ font-size:.9rem; text-decoration:none; color:var(--ink-soft); border:1px solid var(--sage-line); padding:5px 12px; border-radius:999px; transition:all .25s ease; }
.hp .post-tags a:hover{ border-color:var(--amber); color:var(--amber-deep); }
.hp .post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:2.6rem; }
.hp .post-nav a{ display:block; text-decoration:none; padding:20px 22px; border:1px solid var(--sage-line); border-radius:var(--r); background:var(--paper-2); transition:all .3s ease; }
.hp .post-nav a:hover{ border-color:var(--amber-soft); transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(32,42,32,.45); }
.hp .post-nav .dir{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); font-weight:700; margin-bottom:.5rem; display:block; }
.hp .post-nav .ttl{ color:var(--ink); font-weight:600; line-height:1.3; }
.hp .post-nav .next{ text-align:right; }

/* ============================================================================
   SIDEBAR / WIDŻETY
   ============================================================================ */
.hp .sidebar{ position:sticky; top:calc(var(--nav-h) + 20px); display:grid; gap:24px; }
.hp .widget{ background:var(--paper-2); border:1px solid var(--sage-line); border-radius:var(--r); padding:26px 26px; }
.hp .widget .widget-title{ font-family:var(--body); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-deep); font-weight:700; margin:0 0 18px; display:flex; align-items:center; gap:.7em; }
.hp .widget .widget-title::before{ content:""; width:22px; height:1px; background:var(--amber); display:inline-block; }
.hp .widget ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hp .widget ul li{ line-height:1.4; }
.hp .widget ul a{ text-decoration:none; color:var(--ink-soft); transition:color .2s ease; }
.hp .widget ul a:hover{ color:var(--amber-deep); }
.hp .widget .sub-menu, .hp .widget .children{ margin:8px 0 0 14px; padding-left:12px; border-left:1px solid var(--sage-line); }
.hp .widget select{ width:100%; padding:11px 12px; border:1px solid var(--sage-line); border-radius:10px; background:#fff; color:var(--ink); font-family:var(--body); }

/* widżet: ostatnie wpisy z miniaturą (własny) */
.hp .widget .recent-list{ display:grid; gap:16px; }
.hp .widget .recent-item{ display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; }
.hp .widget .recent-item .rt{ width:64px; height:64px; border-radius:12px; overflow:hidden; background:var(--sage-tint); flex:none; }
.hp .widget .recent-item .rt img{ width:100%; height:100%; object-fit:cover; }
.hp .widget .recent-item a.rl{ text-decoration:none; color:var(--ink); font-weight:600; font-size:.96rem; line-height:1.3; }
.hp .widget .recent-item a.rl:hover{ color:var(--amber-deep); }
.hp .widget .recent-item .rd{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:3px; }

/* widżet CTA (kontakt) */
.hp .widget.widget-cta{ background:var(--green-900); color:#E9EBE0; border-color:transparent; }
.hp .widget.widget-cta .widget-title{ color:var(--amber-soft); }
.hp .widget.widget-cta .widget-title::before{ background:var(--amber-soft); }
.hp .widget.widget-cta p{ color:#CDD2C3; font-size:.96rem; margin:0 0 1.2rem; }
.hp .widget.widget-cta .btn{ width:100%; justify-content:center; }

/* chmura tagów */
.hp .widget .tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
.hp .widget .tagcloud a{ font-size:.85rem !important; text-decoration:none; color:var(--ink-soft); border:1px solid var(--sage-line); padding:5px 12px; border-radius:999px; transition:all .25s ease; }
.hp .widget .tagcloud a:hover{ border-color:var(--amber); color:var(--amber-deep); }

/* formularz wyszukiwania */
.hp .search-form{ display:flex; gap:8px; }
.hp .search-form .search-field{ flex:1; min-width:0; padding:12px 14px; border:1px solid var(--sage-line); border-radius:10px; background:#fff; font-family:var(--body); font-size:.96rem; color:var(--ink); }
.hp .search-form .search-field:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.hp .search-form .search-submit{ flex:none; border:0; cursor:pointer; padding:0 16px; border-radius:10px; background:var(--amber); color:#fff; font-weight:700; transition:background .25s ease; }
.hp .search-form .search-submit:hover{ background:var(--amber-deep); }

/* ============================================================================
   6. KOMENTARZE
   ============================================================================ */
.hp .comments{ margin-top:3rem; padding-top:2.4rem; border-top:1px solid var(--sage-line); }
.hp .comments .comments-title{ font-family:var(--display); font-weight:500; font-size:1.6rem; margin:0 0 1.6rem; color:var(--ink); }
.hp .comment-list{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:20px; }
.hp .comment-list ol.children{ list-style:none; margin:18px 0 0; padding:0 0 0 26px; border-left:1px solid var(--sage-line); display:grid; gap:18px; }
.hp .comment-body{ background:var(--paper-2); border:1px solid var(--sage-line); border-radius:var(--r); padding:22px 24px; }
.hp .comment-meta{ display:flex; align-items:center; gap:12px; margin-bottom:.7rem; }
.hp .comment-meta .avatar{ border-radius:50%; }
.hp .comment-author{ font-weight:700; color:var(--ink); }
.hp .comment-metadata{ font-size:.8rem; color:var(--ink-soft); }
.hp .comment-metadata a{ color:var(--ink-soft); text-decoration:none; }
.hp .comment-content{ color:var(--ink-soft); }
.hp .comment-content p{ margin:0 0 .8em; }
.hp .reply a{ font-size:.82rem; font-weight:700; text-decoration:none; color:var(--amber-deep); }
.hp .comment-respond{ background:var(--paper-2); border:1px solid var(--sage-line); border-radius:var(--r); padding:28px 28px; margin-top:1.4rem; }
.hp .comment-reply-title{ font-family:var(--display); font-weight:500; font-size:1.35rem; margin:0 0 1rem; color:var(--ink); }
.hp .comment-form label{ display:block; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:.35rem; }
.hp .comment-form input[type=text],
.hp .comment-form input[type=email],
.hp .comment-form input[type=url],
.hp .comment-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--sage-line); border-radius:10px; background:#fff;
  font-family:var(--body); font-size:1rem; color:var(--ink); margin-bottom:1rem;
}
.hp .comment-form textarea:focus,
.hp .comment-form input:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.hp .comment-form .form-submit .submit{
  border:0; cursor:pointer; font-family:var(--body); font-weight:700; font-size:1rem;
  padding:14px 28px; border-radius:999px; background:var(--amber); color:#fff; transition:background .25s ease;
}
.hp .comment-form .form-submit .submit:hover{ background:var(--amber-deep); }

/* ============================================================================
   7. STRONA 404
   ============================================================================ */
.hp .e404{ text-align:center; padding:clamp(54px,8vw,96px) 0 clamp(64px,9vw,110px); }
.hp .e404 .big{ font-family:var(--display); font-weight:400; font-size:clamp(5rem,18vw,11rem); line-height:.9; color:var(--amber); letter-spacing:-.03em; margin:0; }
.hp .e404 h1{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,3.6vw,2.4rem); margin:.4rem 0 1rem; color:var(--ink); }
.hp .e404 p{ color:var(--ink-soft); max-width:520px; margin:0 auto 2rem; }
.hp .e404 .e404-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:2.6rem; }
.hp .e404 .search-form{ max-width:440px; margin:0 auto 2.6rem; }
.hp .e404 .helpful{ max-width:560px; margin:0 auto; text-align:left; background:var(--paper-2); border:1px solid var(--sage-line); border-radius:var(--r); padding:26px 28px; }
.hp .e404 .helpful h2{ font-size:1.1rem; font-family:var(--body); font-weight:700; margin:0 0 1rem; }
.hp .e404 .helpful ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hp .e404 .helpful a{ text-decoration:none; color:var(--amber-deep); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.hp .e404 .helpful a:hover{ color:var(--amber); }

/* ============================================================================
   7b. STRONA KONTAKT — karta kontaktowa, mapa i formularz (Contact Form 7)
   ============================================================================ */
.hp .contact-page-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,56px); align-items:start; }
@media(max-width:860px){ .hp .contact-page-grid{ grid-template-columns:1fr; } }

.hp .contact-form-card{ background:var(--paper-2); border:1px solid var(--sage-line); border-radius:var(--r); padding:clamp(28px,4vw,40px); }
.hp .contact-form-card h2{ margin-bottom:.5rem; }
.hp .contact-form-card > p{ color:var(--ink-soft); margin:0 0 1.6rem; }

/* Contact Form 7 — stylizacja natywnych elementów wtyczki
   (zwiększona specyficzność, żeby zawsze wygrywać z domyślnym arkuszem CF7) */
.hp .wpcf7 form p{ margin:0 0 1rem; }
.hp .wpcf7 form label{ display:block; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:.35rem; }
.hp .wpcf7 form .wpcf7-form-control-wrap{ display:block; }
.hp .wpcf7 form input.wpcf7-form-control[type=text],
.hp .wpcf7 form input.wpcf7-form-control[type=email],
.hp .wpcf7 form input.wpcf7-form-control[type=tel],
.hp .wpcf7 form input.wpcf7-form-control[type=url],
.hp .wpcf7 form textarea.wpcf7-form-control,
.hp .wpcf7 form input[type=text],
.hp .wpcf7 form input[type=email],
.hp .wpcf7 form input[type=tel],
.hp .wpcf7 form input[type=url],
.hp .wpcf7 form textarea{
  display:block; width:100% !important; padding:13px 15px; border:1px solid var(--sage-line) !important;
  border-radius:10px !important; background:#fff; font-family:var(--body) !important; font-size:1rem;
  color:var(--ink); line-height:1.4; box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.hp .wpcf7 form input::placeholder,
.hp .wpcf7 form textarea::placeholder{ color:#9AA391; opacity:1; }
.hp .wpcf7 form textarea.wpcf7-form-control,
.hp .wpcf7 form textarea{ resize:vertical; min-height:130px; font-family:var(--body) !important; }
.hp .wpcf7 form input.wpcf7-form-control:focus,
.hp .wpcf7 form textarea.wpcf7-form-control:focus,
.hp .wpcf7 form input:focus,
.hp .wpcf7 form textarea:focus{ outline:none; border-color:var(--amber) !important; box-shadow:0 0 0 3px var(--amber-soft); }
.hp .wpcf7 form input.wpcf7-form-control.wpcf7-submit,
.hp .wpcf7 form button[type=submit],
.hp .wpcf7 form input[type=submit]{
  display:inline-flex; align-items:center; width:auto !important; border:0 !important; cursor:pointer;
  font-family:var(--body) !important; font-weight:700; font-size:1rem;
  padding:14px 32px; border-radius:999px !important; background:var(--amber); color:#fff;
  transition:background .25s ease, transform .25s ease;
}
.hp .wpcf7 form input.wpcf7-form-control.wpcf7-submit:hover,
.hp .wpcf7 form button[type=submit]:hover,
.hp .wpcf7 form input[type=submit]:hover{ background:var(--amber-deep); transform:translateY(-2px); }
.hp .wpcf7 .wpcf7-not-valid-tip{ color:#B3463C; font-size:.85rem; margin-top:.3rem; display:block; }
.hp .wpcf7 .wpcf7-response-output{
  margin:1.2rem 0 0; padding:14px 16px; border-radius:10px; border:1px solid var(--sage-line);
  background:#fff; color:var(--ink-soft); font-size:.95rem;
}
.hp .wpcf7-form.sent .wpcf7-response-output,
.hp .wpcf7 .sent .wpcf7-response-output{ border-color: var(--sage); color: var(--green-800); background: var(--sage-tint); }
.hp .wpcf7-form.invalid .wpcf7-response-output,
.hp .wpcf7-form.unaccepted .wpcf7-response-output,
.hp .wpcf7 .invalid .wpcf7-response-output,
.hp .wpcf7 .unaccepted .wpcf7-response-output{ border-color:#B3463C; color:#B3463C; }
.hp .wpcf7-spinner{ margin-left:10px; }

.hp .contact-map-frame{
  position:relative; border-radius:var(--r); overflow:hidden; min-height:340px; height:100%;
  box-shadow:0 30px 60px -34px rgba(32,42,32,.45); border:1px solid var(--sage-line);
}
.hp .contact-map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================================================================
   8. POMOCNIKI WORDPRESS
   ============================================================================ */
.hp .alignleft{ float:left; margin:.4em 1.6em 1.2em 0; max-width:50%; }
.hp .alignright{ float:right; margin:.4em 0 1.2em 1.6em; max-width:50%; }
.hp .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.hp .wp-caption{ max-width:100%; }
.hp .wp-caption img{ border-radius:14px; }
.hp .wp-caption .wp-caption-text, .hp .wp-block-image figcaption{ font-size:.85rem; color:var(--ink-soft); text-align:center; margin-top:.5em; font-style:italic; }
.hp .wp-block-image{ margin:1.8em 0; }
.hp .sticky-badge{ display:inline-block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--amber); padding:4px 10px; border-radius:999px; margin-bottom:.6rem; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px;
  margin:-1px; overflow:hidden; padding:0; position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; clip:auto; clip-path:none; color:var(--ink); display:block; height:auto; width:auto;
  left:6px; top:6px; padding:14px 22px; border-radius:8px; z-index:100000; box-shadow:0 6px 18px rgba(0,0,0,.2);
  font-weight:700; text-decoration:none;
}
.hp .no-posts{ background:var(--paper-2); border:1px solid var(--sage-line); border-radius:var(--r); padding:40px 32px; text-align:center; color:var(--ink-soft); }
.hp .no-posts h2{ color:var(--ink); margin-bottom:.6rem; }

/* responsywność blog */
@media(max-width:980px){
  .hp .blog-layout{ grid-template-columns:1fr; gap:46px; }
  .hp .sidebar{ position:static; top:auto; }
}
@media(max-width:620px){
  .hp .article-card{ grid-template-columns:1fr; }
  .hp .article-card .thumb img{ min-height:200px; }
  .hp .post-nav{ grid-template-columns:1fr; }
  .hp .post-nav .next{ text-align:left; }
}

/* --- POPRAWKA WYGLĄDU POJEDYNCZEGO WPISU --- */

/* 1. Dodanie odstępów wewnątrz karty wpisu */
.hp .post-full {
    background: var(--paper-2);
    border: 1px solid var(--sage-line);
    border-radius: var(--r);
    padding: clamp(24px, 4vw, 40px); /* Elastyczny padding: mniejszy na telefonach, większy na komputerach */
}

/* 2. Poprawka marginesu dla głównego zdjęcia */
.hp .post-full .feat {
    margin: 0 0 1.8rem 0; /* Resetujemy górny margines i zostawiamy tylko dolny */
    border: none;
    box-shadow: none; /* Zdjęcie jest już w obramowanej karcie, nie potrzebuje własnego cienia */
}

/* 3. Estetyczne odcięcie metadanych (autor, data) od treści */
.hp .post-full .post-head {
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--sage-line); /* Delikatna linia oddzielająca pod datą */
}

/* --- BANER W PANELU BOCZNYM --- */
.hp .sidebar-banner {
    background: var(--green-900);
    border-radius: var(--r);
    padding: 36px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(32,42,32,0.55);
    border: 1px solid rgba(234, 219, 190, 0.15);
}

/* Subtelna miodowa poświata w rogu banera */
.hp .sidebar-banner::before {
    content: "";
    position: absolute;
    right: -20%;
    top: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(185,123,51,0.25), transparent 60%);
    pointer-events: none;
}

.hp .sidebar-banner .banner-eyebrow {
    display: block;
    font-family: var(--body);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber-soft);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.hp .sidebar-banner h3 {
    font-family: var(--display);
    color: #F6F5EE;
    font-size: 1.6rem;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.hp .sidebar-banner p {
    color: #C8CDBE;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.6rem;
}

.hp .sidebar-banner .btn {
    width: 100%;
    justify-content: center;
}

/* Usuwa podwójną ramkę i padding domyślnego widżetu TYLKO jeśli w środku jest baner */
.hp .widget:has(.sidebar-banner) {
    padding: 0;
    border: none;
    background: transparent;
}

/* --- UKRYCIE ZNACZKA GOOGLE RECAPTCHA --- */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* 2. Zdjęcie wyróżniające rozciągnięte na pełną szerokość */
.hp .post-full .feat {
    /* Ujemne marginesy niwelujące padding (od góry i po bokach) */
    margin-top: calc(-1 * clamp(24px, 4vw, 40px));
    margin-left: calc(-1 * clamp(24px, 4vw, 40px));
    margin-right: calc(-1 * clamp(24px, 4vw, 40px));
    margin-bottom: 1.8rem;
    
    /* Zaokrąglenie tylko górnych rogów, aby pasowały do zewnętrznej ramki */
    border-radius: var(--r) var(--r) 0 0;
    
    /* Usunięcie ewentualnych ramek i cieni z domyślnego motywu */
    border: none;
    box-shadow: none;
}

/* Upewniamy się, że obrazek wypełnia 100% i nie psuje zaokrągleń */
.hp .post-full .feat img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* Usunięcie tylko górnej linii (nad datą) */
.hp .post-full .pmeta,
.hp .post-full .post-head {
    border-top: none !important;
}

/* Przywrócenie/zostawienie ładnej dolnej linii (pod datą) */
.hp .post-full .post-head {
    border-bottom: 1px solid var(--sage-line) !important;
    padding-bottom: 1.2rem;
    margin-bottom: 1.8rem;
}