/**
 * CSS dla BLOGA - sigmadruk.pl
 * Ten plik jest ładowany TYLKO na stronach bloga
 * (pojedyncze wpisy, archiwum, kategorie, tagi)
 */

/* ===== CSS Variables dla Bloga ===== */
:root {
      /* Neutralna paleta kolorów z dwoma akcentami */
      --colorBlogPost-bg: #f9f9f9;
      --colorBlogPost-text: #333333;
      --colorBlogPost-text-light: #666666;
      --colorBlogPost-accent-1: #DC183D; /* czerwony akcent */
      --colorBlogPost-accent-2: #1F55AA; /* niebieski akcent */
	  --colorBlogPost-accent-3: #D0E9F0; /* light blue akcent */
      --colorBlogPost-border: #e0e0e0;
      --colorBlogPost-cta-bg: var(--color-accent-1);
      --colorBlogPost-cta-text: white;
	--colorBlogPost-cta-hover: #3a5a80;}


/* ===== BlogPost (pojedyncze wpisy) ===== */

.blogPostCSS a {color: var(--colorBlogPost-accent-2);
    text-decoration: underline;
    text-decoration-color: var(--colorBlogPost-accent-2);
    text-decoration-thickness: 2px; /* Pogrubiona linia do 2px */
    text-underline-offset: 5px; /* Odsunięcie od tekstu o 5px */
    transition: all 0.3s ease;
    padding: 0 4px;
	font-weight: 600;}

.blogPostCSS a:hover {background-color: #d4e1f7;
    text-decoration-color: #03204D;
    border-radius: 3px;
	text-underline-offset: 8px}

.blogPostCSS h2, .blogPostCSS h3, .blogPostCSS h4 {font-family: var(--e-global-typography-6e1f769-font-family), Verdana, sans-serif;}

.blogPostCSS h2 {
      font-size: 1.8rem;
      margin-top: 68px; /* Większy odstęp od góry */
      margin-bottom: 48px; /* Większy odstęp od dołu */
      color: var(--colorBlogPost-text);
	  border-bottom: 3px solid var(--colorBlogPost-accent-3);
      padding-bottom: 12px;
      font-weight: 700;
      letter-spacing: -0.02em;
	position:relative;}



.blogPostCSS h2:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 10px;
            height: 10px;
            background-color: #a8d8f0; /* ten sam jasno niebieski kolor */
            border-radius: 3px; /* zaokrąglenie prostokącika */
        }



.blogPostCSS h3 {
      font-size: 1.4rem;
      margin-top: 50px; /* Zwiększony odstęp */
      margin-bottom: 24px; /* Zwiększony odstęp */
      color: var(--color-text);
      font-weight: 600;
      letter-spacing: -0.015em;
    }

.blogPostCSS h3 strong {
      font-weight: 700;
	border-bottom: 3px solid var(--colorBlogPost-accent-1);
    }

.blogPostCSS p {
      margin-bottom: 32px; /* Zwiększony odstęp między paragrafami */
      font-size: 1.125rem;
      max-width: 38em; /* Optymalna długość linii dla czytelności */
    }

    /* Odpowiednie odstępy dla akapitów */
    .blogPostCSS p + p {
      margin-top: -8px;
    }

    /* Formatowanie list */
    .blogPostCSS ul, .blogPostCSS ol, .faq ul, .faq ol, {
      margin-bottom: 32px; /* Zwiększony odstęp */
      padding-left: 32px;
    }

    .blogPostCSS li, .faq li {
      margin-bottom: 16px; /* Zwiększony odstęp */
      position: relative;
      max-width: 38em; /* Optymalna długość linii dla czytelności */

    }

    .blogPostCSS ul li, .faq ul li {
      list-style-type: none;
      padding-left: 28px;
		font-size: 1.125rem;
    }

    .blogPostCSS ul li::before, .faq ul li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 8px;
      height: 8px;
      background-color: var(--colorBlogPost-accent-2);
		border-radius: 3px;}

      .blogPostCSS ol {
            list-style: none;
            counter-reset: item;
            padding-left: 30px;
        }

        .blogPostCSS ol li {
            counter-increment: item;
            margin-bottom: 15px;
            padding-left: 40px;
            position: relative;
			font-size: 1.125rem;
        }

        .blogPostCSS ol li:before {
            content: counter(item);
            background-color: #0066cc;
            color: white;
            font-weight: bold;
			font-size: 12px;
			line-height:12px;
            border-radius: 4px;
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 0;
			top: 4px;
        }


    }
.blogPostCSS figure {margin-bottom:32px;}
.blogPostCSS img {border-radius: 20px;}

.blogPostCSS .zobacz-takze {margin: 2rem 0;
      padding: 1.5rem;
      background-color: #f8f9fa;
      border-left: 4px solid #0056b3;
      border-radius: 0.25rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}

.blogPostCSS .uwaga {margin: 2rem 0;
      padding: 1.5rem;
      background-color: #fff3f3;
      border-left: 4px solid #DC183D;
      border-radius: 0.25rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}

.blogPostCSS .zobacz-takze h4, .blogPostCSS .uwaga h4 {font-size: 1.2rem;
      font-weight: 600;
      color: #000;}

.blogPostCSS .zobacz-takze p, .blogPostCSS .uwaga p {margin-bottom:10px;}

.blogPostCSS .zobacz-takze p a, .blogPostCSS .uwaga p a {padding-left:25px; position:relative;}

.blogPostCSS .zobacz-takze p a::before, .blogPostCSS .uwaga p a::before {
      content: "→";
      position: absolute;
      left: -1px;
      top: -3px;
	 display: block;
    }

.blogPostCSS a strong {
      font-weight: 700;}

.jet-listing-dynamic-terms a:first-child {margin-left:0;}
.jet-listing-dynamic-terms a {margin-left: 10px; display:inline-block;}