/* ==========================================================================
   HardRock Wspinanie — modernizacja wyglądu
   Aby cofnąć: usuń całą zawartość tego pola i opublikuj.
   Paleta oparta na istniejącym kolorze marki #b6cc3f.
   ========================================================================== */

:root{
  --hr-accent:#b6cc3f;
  --hr-accent-ink:#6f8a1e;
  --hr-ink:#1a1d21;
  --hr-body:#4b5259;
  --hr-muted:#8b939b;
  --hr-line:#e6e9e1;
  --hr-bg:#f6f7f4;
  --hr-radius:12px;
  --hr-shadow:0 1px 2px rgba(26,29,33,.04), 0 10px 28px -14px rgba(26,29,33,.22);
  --hr-shadow-lift:0 2px 4px rgba(26,29,33,.05), 0 18px 40px -16px rgba(26,29,33,.28);
}

/* 1. Tło */
body, .site-content{ background:var(--hr-bg); }

/* 2. Kafelki wpisów */
.post-container{
  display:flex; flex-direction:column;
  background:#fff; border:0;
  border-radius:var(--hr-radius);
  box-shadow:var(--hr-shadow);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.post-container:hover{ box-shadow:var(--hr-shadow-lift); transform:translateY(-3px); }
.post-container > figure{ order:-1; margin:0; }
.post-container > figure img{ display:block; width:100%; height:auto; }
.post-container .wider-web-top{ display:none; }

/* 3. Typografia */
.post-container .entry-title{
  padding:22px 24px 18px; margin:0;
  font-size:20px; line-height:1.3; letter-spacing:-.012em;
  border-bottom:1px solid var(--hr-line);
  text-wrap:balance;
}
.post-container .entry-title a{ color:var(--hr-ink); text-decoration:none; transition:color .18s ease; }
.post-container .entry-title a:hover{ color:var(--hr-accent-ink); }
.post-container .entry-content{ padding:12px 24px 24px; line-height:1.65; color:var(--hr-body); font-size:15.5px; }
.post-container .entry-content p{ margin:0 0 16px; }

/* 4. Metadane */
.post-container .entry-info{
  padding:16px 24px 0; line-height:1.5; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--hr-muted);
  display:flex; flex-wrap:wrap; gap:6px 18px;
}
.post-container .entry-info a{ color:var(--hr-muted); text-decoration:none; }
.post-container .entry-info a:hover{ color:var(--hr-accent-ink); }

/* 5. „czytaj…" */
.entry-content a.button{
  display:inline-flex; align-items:center; gap:.45em;
  color:var(--hr-accent-ink); font-weight:600; font-size:14px; text-decoration:none;
}
.entry-content a.button::after{ content:"→"; transition:transform .2s ease; }
.entry-content a.button:hover{ color:var(--hr-ink); }
.entry-content a.button:hover::after{ transform:translateX(4px); }

/* 6. Menu */
.navigation .wrapper{ max-width:1160px; }
.navigation ul li a{
  padding:0 14px; font-size:15px; font-weight:500;
  letter-spacing:.015em; position:relative; transition:color .18s ease;
}
.navigation ul li a:hover,
.navigation ul li.current-menu-item > a{ color:#fff; }
.navigation ul li a::after{
  content:""; position:absolute;
  left:14px; right:14px; bottom:8px; height:2px;
  background:var(--hr-accent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .22s ease;
}
.navigation ul li a:hover::after,
.navigation ul li.current-menu-item > a::after{ transform:scaleX(1); }

/* 7. Logo */
.logo-img-holder{ border-radius:10px; overflow:hidden; }
.logo-img-holder img{ display:block; }

/* 8. Dostępność — widoczny focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--hr-accent); outline-offset:2px; border-radius:3px;
}

/* 9. Mniej ruchu */
@media (prefers-reduced-motion:reduce){
  .post-container, .post-container:hover,
  .entry-content a.button::after, .navigation ul li a::after{ transition:none; transform:none; }
}

/* 10. Tablet */
@media screen and (max-width:800px){
  .post-container .entry-title{ padding:20px 20px 16px; font-size:19px; }
  .post-container .entry-info{ padding:14px 20px 0; }
  .post-container .entry-content{ padding:12px 20px 20px; }
  .navigation .wrapper{ max-width:100%; }
}

/* 11. Telefon */
@media screen and (max-width:600px){
  .post-container{ border-radius:10px; }
  .post-container:hover{ transform:none; }
  .post-container .entry-title{ padding:18px 18px 14px; font-size:18px; }
  .post-container .entry-info{ padding:13px 18px 0; }
  .post-container .entry-content{ padding:11px 18px 18px; font-size:15px; }
}
@media screen and (max-width:480px){ .post-container .entry-title{ font-size:17px; } }

/* 12. Podmenu (hover).
   PRZYCZYNA MIGANIA (znaleziona): motyw ma regule `nav ul ul a:hover
   { left:300px }` (dla 3-go poziomu). Nasze podkreslenie ustawilo
   position:relative na WSZYSTKICH linkach menu, przez co ta regula
   przesuwala link podmenu o 300px przy najechaniu -> kursor go gubil
   -> miganie. Rozwiazanie: linki podmenu pozostaja position:static,
   wiec `left` nie ma na nie wplywu. */
@media screen and (min-width:801px){
  .navigation ul.menu > li{ position:relative; }
  .navigation ul li .sub-menu{
    display:block !important;
    position:absolute;
    top:100%;
    left:0;
    min-width:200px;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    z-index:5000;
    transition:none;
  }
  /* pokazuj przy najechaniu na pozycje LUB gdy JS trzyma .hr-open */
  .navigation ul.menu > li:hover > .sub-menu,
  .navigation ul li.hr-open > .sub-menu,
  .navigation ul li:focus-within > .sub-menu{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  /* KLUCZOWE: linki podmenu bez pozycjonowania -> `left:300px` bezczynne */
  .navigation .sub-menu a{ position:static; left:auto; }
  .navigation .sub-menu a::after{ display:none; }  /* podkreslenie tylko na 1 poziomie */
}

/* 13. Wpisy i strony — spójne z kafelkami na stronie głównej */
article.blog-post,
aside.blog-post{
  border-radius:var(--hr-radius);
  box-shadow:var(--hr-shadow);
  overflow:hidden;
}
article.blog-post{ padding-bottom:10px; }

@media screen and (min-width:801px){
  .post-header > figure{ float:none; width:100%; margin:0 0 20px; }
  .post-header > figure img{ display:block; width:100%; height:auto; }
}

.post-header .entry-info{
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--hr-muted); line-height:1.5;
}
.post-header .entry-info a{ color:var(--hr-muted); text-decoration:none; }
.post-header .entry-info a:hover{ color:var(--hr-accent-ink); }

article.blog-post .entry-content{ line-height:1.7; color:var(--hr-body); }
article.blog-post .entry-content p{ margin:0 0 18px; }

/* 14. Telefony w widżecie kontaktowym — czytelnie klikalne */
.textwidget a[href^="tel:"]{
  color:var(--hr-accent-ink);
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.textwidget a[href^="tel:"]:hover,
.textwidget a[href^="tel:"]:focus-visible{ text-decoration:underline; }

/* 15. Miniatury — bez powiększania przy najechaniu.
   Motyw ma `transform: scale(1.1)` na zdjęciach; przy zaokrąglonych
   kafelkach było to zbyt nachalne. Wystarczy uniesienie kafelka. */
.post figure a:hover img,
.blog-post figure a:hover img{
  transform:none;
  opacity:1;
}

/* 16. Wyższy pasek menu — 36px było ciasne. Tylko pozycje najwyższego
   poziomu; podmenu zachowuje swoją wysokość. */
@media screen and (min-width:801px){
  .navigation ul.menu > li > a{ line-height:56px; }
  .navigation ul.menu > li > a::after{ bottom:16px; }
}

/* 17. Formularz kontaktowy (Contact Form 7).
   Motyw stylowal tylko pola text/email — telefon i textarea zostawaly
   w domyslnym wygladzie przegladarki, przez co formularz byl niespojny. */
.wpcf7 form p{ margin:0 0 18px; }
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=number],
.wpcf7 textarea{
  width:100%;
  box-sizing:border-box;
  padding:13px 15px;
  border:1px solid #d9ded1;
  border-radius:8px;
  background:#fff;
  font-family:inherit;
  font-size:15.5px;
  line-height:1.5;
  color:var(--hr-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.wpcf7 textarea{ min-height:170px; resize:vertical; }
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 textarea:focus{
  outline:none;
  border-color:var(--hr-accent-ink);
  box-shadow:0 0 0 3px rgba(182,204,63,.30);
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder{ color:#9aa2a9; }

.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  margin:0 20px 10px 0;
}
.wpcf7 .wpcf7-list-item-label{ line-height:1.35; }
.wpcf7 input[type=checkbox]{ width:16px; height:16px; accent-color:var(--hr-accent-ink); margin:0; flex:none; }

.wpcf7 input[type=submit]{
  width:100%;
  padding:15px 24px;
  border:0;
  border-radius:8px;
  background:var(--hr-accent);
  color:var(--hr-ink);
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, transform .08s ease;
}
.wpcf7 input[type=submit]:hover{ background:#a7bd33; }
.wpcf7 input[type=submit]:active{ transform:translateY(1px); }
.wpcf7 input[type=submit]:focus-visible{ outline:3px solid var(--hr-accent-ink); outline-offset:2px; }