/*!
Theme Name: singlowanie
Theme URI: http://underscores.me/
Author: Singlowanie.pl
Author URI: https://singlowanie.pl
Description: SINGLOWANIE.PL | Katolicki portal randkowy, Katolickie randki, Chrześcijańskie randki, Randki dla singli, Randki w internecie, Portal randkowy dla Wierzących.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: singlowanie
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

singlowanie is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

* {
  font-family: "Avenir Next LT Pro Regular", sans-serif;
}

#menu-menu-glowne-blog {
  width: 100%;
  margin-top: 32px;
}

/*
 * WordPress Blog & Post Styles
 * Inspired by the #about section from the provided stylesheet.
 *
 * Key Colors:
 * Violet: #7851f6
 * Pink: #f664bc
 * Dark Text: #373339
 * Light Grey BG: #ebf0f3
*/

/* --- 1. Main Layout for Blog, Archives, and Single Posts --- */

/* This container mimics the main #about flex layout */
.blog-container {
  display: flex;
  max-width: 1300px;
  margin: 0px auto 25px;
  position: relative;
  gap: 48px;
  flex-wrap: wrap;
  padding: 0 16px;
}

/* This is the sidebar for the rotated title, like #about .title */
.page-title-sidebar {
  width: 250px;
  flex-shrink: 0; /* Prevents shrinking */
  position: relative;
  margin-right: 80px;
  background-color: #7851f6; /* Fallback color */
  /* If you want the original image background:
  background: url(/img/violet-box.png) no-repeat right 0 transparent;
  */
}

/* The main title for Archives, Categories, etc. */
.page-title-sidebar .page-title {
  position: absolute;
  color: #fff;
  font-size: 90px;
  font-family: "Avenir Next LT Pro Heavy", sans-serif;
  font-weight: 900;
  transform: rotate(-90deg);
  transform-origin: top right;
  top: 150px;
  right: 50px; /* Adjust as needed */
  line-height: 1;
  white-space: nowrap;
}

/* The main content area where posts will appear, like #about .description */
main#primary,
.site-main {
  flex-grow: 1;
  max-width: 100%;
}

/* --- 2. Archive & Blog Index Styling (Post List) --- */

/* .archive .post,
.blog .post {
  margin-bottom: 80px;
  border-bottom: 2px solid #ebf0f3;
  padding-bottom: 40px;
} */

.post .entry-title,
.page .entry-title {
  font-size: 42px;
  font-family: "Avenir Next LT Pro Bold", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 15px;
}

.post .entry-title a {
  color: #373339;
  text-decoration: none;
}

.post .entry-title a:hover {
  color: #f664bc;
}

.post .entry-meta {
  font-family: "Avenir Next LT Pro Regular", sans-serif;
  font-size: 16px;
  color: #888;
  margin-bottom: 25px;
}

.post .entry-meta a {
  color: #373339;
  text-decoration: none;
}

/* The horizontal rule style, like the original span */
.post .entry-meta:after {
  content: "";
  display: none;
  width: 68px;
  height: 2px;
  background-color: #f664bc;
  margin-top: 25px;
}

.post p,
.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6,
.post a,
.post li,
.post strong {
  font-family: "Avenir Next LT Pro Regular", sans-serif;
}

.post .entry-content p {
  line-height: 1.6;
  font-family: "Avenir Next LT Pro Regular", sans-serif;
  margin-bottom: 20px;
  color: #373339;
}

.read-more-link {
  display: inline-block;
  font-family: "Avenir Next LT Pro Medium", sans-serif;
  font-weight: 600;
  color: #f664bc;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 1px;
}

/* --- 3. Single Post Styling --- */

/* For single posts, the main title is often outside the .entry-content */
.single-post .entry-header {
  margin-bottom: 40px;
}

.single-post .entry-title {
  font-size: 52px;
}

/* Re-using the divider style for general content */
.entry-content hr {
  border: none;
  width: 68px;
  height: 2px;
  background-color: #f664bc;
  margin: 40px 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: "Avenir Next LT Pro Bold", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 40px;
  margin-bottom: 20px;
}

.entry-content blockquote {
  border-left: 3px solid #f664bc;
  padding-left: 25px;
  margin: 30px 0;
  font-style: italic;
  font-size: 22px;
  color: #555;
}

/* --- 4. Comments Section Styling --- */

#comments {
  margin-top: 80px;
}

#comments .comments-title {
  font-family: "Avenir Next LT Pro Bold", sans-serif;
  font-size: 32px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #ebf0f3;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list .comment {
  padding: 25px 0;
  border-bottom: 1px solid #ebf0f3;
}

.comment-author .fn {
  font-family: "Avenir Next LT Pro Medium", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #373339;
  font-style: normal;
}

.comment-meta a {
  font-family: "Avenir Next LT Pro Regular", sans-serif;
  font-size: 14px;
  color: #999;
  text-decoration: none;
}

.comment-content {
  font-family: "Avenir Next LT Pro Regular", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #373339;
  padding-top: 10px;
}

.reply .comment-reply-link {
  font-family: "Avenir Next LT Pro Medium", sans-serif;
  font-weight: 600;
  color: #f664bc;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
}

/* Comment Form */
#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"],
#respond .comment-form textarea {
  width: 100%;
  border-radius: 16px;
  background-color: #ebf0f3;
  padding: 15px 20px;
  border: none;
  font-size: 18px;
  font-family: "Avenir Next LT Pro Medium", sans-serif;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

#respond .comment-form .form-submit input#submit {
  width: auto;
  height: 50px;
  line-height: 50px;
  padding: 0 40px;
  background-color: #f664bc;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s linear;
}

#respond .comment-form .form-submit input#submit:hover {
  opacity: 0.6;
}

/* --- 5. Responsive Design --- */

@media (max-width: 992px) {
  .blog-container {
    flex-direction: column;
  }

  .page-title-sidebar {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 40px;
    padding: 30px 20px;
    box-sizing: border-box;
  }

  .page-title-sidebar .page-title {
    position: static;
    transform: none;
    font-size: 48px;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .post .entry-title {
    font-size: 32px;
  }
  .single-post .entry-title {
    font-size: 40px;
  }
}

/*
 * --- 6. Nawigacja między wpisami (Post & Posts Navigation) ---
 * Style dla linków "Starsze/Nowsze wpisy" oraz "Następny/Poprzedni wpis".
*/

/* Główny kontener dla obu typów nawigacji */
.navigation.post-navigation,
.navigation.posts-navigation {
  font-family: "Avenir Next LT Pro Medium", sans-serif;
  display: flex;
  justify-content: space-between;
  padding: 40px 0;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
  border-top: 2px solid #ebf0f3; /* Separator, spójny z resztą designu */
}

/* Wewnętrzny wrapper, który często jest dodawany przez WordPress */
.navigation .nav-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Kontenery na linki "poprzedni" i "następny" */
.navigation .nav-previous,
.navigation .nav-next {
  flex-basis: 100%; /* Daje trochę przestrzeni pośrodku */
  max-width: 100%;
}

.navigation .nav-next {
  text-align: right;
}

/* Ogólny styl dla linków nawigacyjnych */
.navigation a {
  display: block;
  color: #373339;
  text-decoration: none;
  transition: color 0.2s linear;
}

.navigation a:hover {
  color: #f664bc; /* Główny kolor akcentu przy najechaniu */
}

/* --- Style specyficzne dla pojedynczego wpisu (.post-navigation) --- */

/* Mały tekst etykiety, np. "Następny wpis:" */
.post-navigation .meta-nav {
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}

/* Tytuł wpisu w linku nawigacyjnym */
.post-navigation .post-title {
  font-family: "Avenir Next LT Pro Bold", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

/* --- Style specyficzne dla archiwów (.posts-navigation) --- */

/* Proste linki "Starsze/Nowsze wpisy" */
.posts-navigation a {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Dodanie strzałek dla lepszego efektu wizualnego */
.posts-navigation .nav-previous a:before {
  content: "\2190\00A0"; /* Strzałka w lewo i twarda spacja */
  font-weight: 700;
}

.posts-navigation .nav-next a:after {
  content: "\00A0\2192"; /* Twarda spacja i strzałka w prawo */
  font-weight: 700;
}

/* Ukrycie domyślnych etykiet dla czytników ekranu, jeśli strzałki wystarczą */
.posts-navigation .screen-reader-text {
  display: none;
}

/*
 * --- 7. Metadane Wpisu (Entry Meta) ---
 * Wersja używająca standardowych znaków Unicode (emoji) zamiast Font Awesome.
*/

.entry-meta,
.entry-footer {
  display: flex; /* Używamy flexbox do łatwego zarządzania odstępami */
  flex-wrap: wrap; /* Pozwala elementom przenosić się do nowej linii na mniejszych ekranach */
  align-items: center;
  gap: 8px 18px; /* Odstęp pionowy i poziomy między elementami */

  font-family: "Avenir Next LT Pro Regular", sans-serif;
  font-size: 15px;
  color: #555; /* Nieco jaśniejszy kolor dla mniej ważnych informacji */

  margin-bottom: 30px;
  padding-bottom: 20px;
  /* Różowa linia pod metadanymi, nawiązująca do <span/> z sekcji #about */
  border-bottom: 2px solid #f664bc;
}

/* Styl dla każdego elementu w .entry-meta (autor, data, kategorie) */
.entry-meta span,
.entry-footer span {
  display: inline-flex; /* Wewnętrzny flex do wyrównania ikony z tekstem */
  align-items: center;
}

/* Styl linków w metadanych */
.entry-meta a,
.entry-footer a {
  color: #373339;
  text-decoration: none;
  transition: color 0.2s linear;
  margin-left: 6px;
}

.entry-meta a:hover,
.entry-footer a:hover {
  color: #f664bc;
}

/* --- IKONY (Wersja z prostymi znakami Unicode) --- */

/* Ogólny styl dla ikon dodawanych przed elementami meta */
.entry-meta .byline:before,
.entry-footer .byline:before,
.entry-meta .posted-on:before,
.entry-footer .posted-on:before,
.entry-meta .cat-links:before,
.entry-footer .cat-links:before,
.entry-meta .tags-links:before,
.entry-footer .tags-links:before,
.entry-meta .comments-link:before,
.entry-footer .comments-links:before {
  margin-right: 8px; /* Odstęp między ikoną a tekstem */
  font-size: 16px;
  color: #f664bc; /* Kolor ikony */
  /* Poprawka dla lepszego wyrównania niektórych emoji */
  position: relative;
  top: -1px;
}

/* Konkretne ikony dla poszczególnych elementów */
.entry-meta .byline:before,
.entry-footer .byline:before {
  content: "👤";
}
.entry-meta .posted-on:before,
.entry-footer .posted-on:before {
  content: "📅";
}
.entry-meta .cat-links:before,
.entry-footer .cat-links:before {
  content: "📁";
}
.entry-meta .tags-links:before,
.entry-footer .tags-links:before {
  content: "🏷️";
}
.entry-meta .comments-link:before,
.entry-footer .comments-link:before {
  content: "💬";
}

.wp-post-image {
  max-width: 400px;
}

.read-more {
  background-color: #f664bc;
  width: 160px;
  height: 42px !important;
  line-height: 44px !important;
  color: #fff !important;
  text-transform: uppercase;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.02);
  border-radius: 20px;
  font-family: "Avenir Next LT Pro Bold", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
  border: none !important;
}

.read-more:hover {
  opacity: 0.75;
}

.entry-container {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 30px;
}

.post-thumbnail {
  flex: 1;
}

.entry-content {
  flex: 4;
}

.page-title {
  display: flex;
  gap: 8px;
}

/* Główny kontener treści */
.entry-content {
  font-family: "Avenir Next LT Pro Regular", sans-serif;
  line-height: 1.8;
  color: #333;
  padding: 20px;
  font-size: 1.1rem;
}

/* Nagłówki */
.entry-content h1 {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin: 2.5rem 0 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  position: relative;
  padding-bottom: 15px;
}

.entry-content h1:after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #4361ee, #3a0ca3);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}

.entry-content h2 {
  font-size: 2rem;
  color: #1e293b;
  margin: 2rem 0 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
}

.entry-content h3 {
  font-size: 1.6rem;
  color: #334155;
  margin: 1.8rem 0 1rem;
  font-weight: 600;
}

.entry-content h4 {
  font-size: 1.3rem;
  color: #475569;
  margin: 1.5rem 0 0.8rem;
  font-weight: 600;
}

.entry-content h5,
.entry-content h6 {
  font-size: 1.1rem;
  color: #64748b;
  margin: 1.2rem 0 0.6rem;
  font-weight: 600;
}

/* Akapity */
.entry-content p {
  margin: 0 0 1.5rem;
  color: #4a5568;
  font-size: 1.1rem;
}

/* Listy */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.5rem 1.5rem;
  padding-left: 1.5rem;
}

.entry-content ul {
  list-style-type: "•";
  list-style-position: outside;
}

.entry-content ol {
  list-style-type: decimal;
}

.entry-content li {
  margin-bottom: 0.8rem;
  padding-left: 0.5rem;
}

.entry-content li > ul,
.entry-content li > ol {
  margin-top: 0.8rem;
  margin-bottom: 0;
}

/* Linki */
.entry-content a {
  color: #4361ee;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(67, 97, 238, 0.2);
  display: inline-block;
}

.entry-content a:hover {
  color: #3a0ca3;
  border-bottom-color: currentColor;
}

/* Tekst pogrubiony i pochylony */
.entry-content strong,
.entry-content b {
  font-weight: 700;
  color: #1e293b;
}

.entry-content em {
  font-style: italic;
  color: #475569;
}

/* Cytaty */
.entry-content blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background-color: #f8fafc;
  border-left: 4px solid #4361ee;
  font-style: italic;
  color: #475569;
  position: relative;
}

.entry-content blockquote:before {
  content: '"';
  font-size: 4rem;
  color: rgba(67, 97, 238, 0.1);
  position: absolute;
  top: -1rem;
  left: 0.5rem;
  font-family: Georgia, serif;
}

.entry-content blockquote p {
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Obrazki */
.entry-content img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.entry-content img.alignleft {
  float: left;
  margin-right: 2rem;
  margin-left: 0;
}

.entry-content img.alignright {
  float: right;
  margin-left: 2rem;
  margin-right: 0;
}

/* Tabele */
.entry-content table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  font-size: 0.95rem;
  box-shadow: 0 0 0 1px #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.entry-content th,
.entry-content td {
  padding: 1rem;
  text-align: left;
  border: 1px solid #e2e8f0;
}

.entry-content th {
  background-color: #f1f5f9;
  font-weight: 600;
  color: #1e293b;
}

.entry-content tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Kod */
.entry-content pre {
  background: #1e293b;
  color: #f8fafc;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
  font-family: "Fira Code", monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}

.entry-content code {
  font-family: "Fira Code", monospace;
  background: #f1f5f9;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #334155;
}

/* Podpisy pod obrazkami */
.entry-content .wp-caption-text {
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}

/* Separatory */
.entry-content hr {
  border: 0;
  height: 1px;
  background: #e2e8f0;
  margin: 3rem 0;
}

/* Responsywność */
@media (max-width: 768px) {
  .entry-content {
    padding: 15px;
    font-size: 1rem;
  }

  .entry-content h1 {
    font-size: 2rem;
  }

  .entry-content h2 {
    font-size: 1.6rem;
  }

  .entry-content img.alignleft,
  .entry-content img.alignright {
    float: none;
    margin: 1rem auto;
  }
}

/* Efekty hover dla elementów interaktywnych */
.entry-content a,
.entry-content button {
  transition: all 0.2s ease;
}

/* Klasy WordPress */
.entry-content .wp-block-image {
  margin: 2rem 0;
}

.entry-content .wp-block-gallery {
  margin: 2rem 0;
}

.entry-content .wp-block-cover {
  margin: 2rem 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Dodatkowe elementy Gutenberga */
.entry-content .wp-block-pullquote {
  border-color: #4361ee;
  padding: 2rem;
}

.entry-content .wp-block-button .wp-block-button__link {
  background-color: #4361ee;
  border-radius: 6px;
  padding: 0.8rem 1.5rem;
}

.entry-content .wp-block-button .wp-block-button__link:hover {
  background-color: #3a0ca3;
}

.search-form {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.no-results {
  min-height: 200px;
}