/*
Theme Name: EWELD
Theme URI: https://EWELD.pl
Author: Click 360 Damian Stefanski
Author URI: https://click360.pl
Description: Strona internetowa dla EWELD
Version: 1.0.0

License: MIT License (for click360 base)
License URI: https://opensource.org/licenses/MIT
Text Domain: click360

This theme is based on click360 (licensed under MIT).
This theme is used exclusively for a single client project and is not intended for distribution.
click360 is based on Underscores (https://underscores.me/), (C) 2016-2022 Digitoimisto Dude Oy.
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/).
*/

/* Menu styling updates */
.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 20px;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px; 
  transition: opacity 0.3s ease;
}

.social-icons a:hover {
  opacity: 0.7;
}

.social-icons svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.link-text a {
  font-weight: 400;
  color: var(--color-paragraph);
  text-decoration: none;
}

.lang a {
  font-weight: 400;
  color: var(--color-paragraph);
  text-decoration: none;
  font-size: var(--typography-size-18);
}

/* Menu items styling */
.menu-item > a {
  font-weight: 400 !important;
  color: var(--color-paragraph);
  transition: all 0.3s ease;
}

.menu-item > a:hover {
  font-weight: 600 !important;
  color: var(--color-science-blue) !important;
}

/* Mobile menu items styling */
@media (max-width: 768px) {
  .menu-item > a {
    text-transform: uppercase;
    color: var(--color-white) !important;
  }
  
  .menu-item > a:hover {
    color: var(--color-science-blue) !important;
  }
}

/* Mobile menu extras - social media and contact */
.mobile-menu-extras {
  display: none; /* Ukryj na desktop */
}

/* Pokazuj dodatki menu mobilnego również na tabletach (od momentu pojawienia się burgera) */
@media (max-width: 1024px) {
  .mobile-menu-extras {
    display: block;
    padding: 1.5rem 1.5625rem;
    border-top: 1px solid var(--color-separator-nav-mobile);
  }
  
  .mobile-social-section,
  .mobile-contact-section {
    margin-bottom: 1.5rem;
  }
  
  .mobile-social-section:last-child,
  .mobile-contact-section:last-child {
    margin-bottom: 0;
  }
  
  .mobile-menu-extras h3 {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .mobile-social-icons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .mobile-social-icons a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
  }
  
  .mobile-social-icons a:hover {
    color: var(--color-science-blue);
  }
  
  .mobile-social-icons svg {
    fill: currentColor;
    flex-shrink: 0;
  }
  
  .mobile-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .mobile-contact-info a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
  }
  
  .mobile-contact-info a:hover {
    color: var(--color-science-blue);
  }
  
  .mobile-contact-info svg {
    fill: currentColor;
    flex-shrink: 0;
  }
}

/* Page Loader wrapper */
.page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: 'Montserrat', sans-serif;
  animation: fadeOut 0.5s ease-out 2.5s forwards;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
  animation: fadeIn 0.5s ease-out 0s forwards;
  padding: 20px;
}

.loader-text {
  display: table;       /* układ tabelaryczny */
  width: auto;
}

.rotating-text, .static-word {
  display: table-cell;
  vertical-align: middle;
  font-weight: var(--typography-weight-semibold);
  font-size: 5em;
  white-space: nowrap;
  padding-left: 0.3em; /
}

.rotating-text {
  
  position: relative;
  width: 410px;              /* szerokość najdłuższego słowa w px! */
  text-align: right;  
}

.word {
  position: absolute;
  right: 0; top: 0;          /* zamiast left:0  ustaw right:0 */
  width: 100%;
  opacity: 0;
 /*  transition: opacity 0.3s;*/
  white-space: nowrap;
  text-align: right;    
}

.word.active {
  opacity: 1;
}

.static-word {
  font-weight: var(--typography-weight-regular);
}

.logo-eweld {
  animation: fadeIn 0.8s ease-out 0s forwards;
}

.logo-eweld img {
  max-width: 200px;
}

.ue-logos {
  padding-top: 40px;
}

.ue-logos img {
  max-width: 600px;
  height: auto;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}


@media (max-width: 768px) {
  .loader-content {
    gap: 20px;
    padding: 20px 10px;
  }

  .loader-text {
    display: flex !important;           /* wymusza flex, nadpisuje table! */
    flex-direction: column !important;  /* kolumna: jeden pod drugim */
 margin-bottom:10px;
    justify-content: center;
    text-align: center;
    font-size: 2.5em;
    gap: 0.3em;
    width: 100%;
  }

  .rotating-text,
  .static-word {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
    font-size: 1em;
  }

  .rotating-text {
    margin-bottom: 0.2em;
  }

  .word {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: auto;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
    text-align: center;
  }

  .word.active {
    opacity: 1;
  }

  .static-word {
    font-weight: var(--typography-weight-regular);
    font-size: 1em;
    margin-top: 21px;
  }

  .logo-eweld img {
    max-width: 140px;
  }
  .ue-logos img {
    max-width: 90%;
  }
}


/* Site header */

.site-branding img {
  max-width: 224px;
}

@media (max-width: 768px) {
  .site-branding img {
    max-width: 180px;
  }
}

/* 1) Header: brak rozpychania, mniejsze przerwy */
.site-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;     /* zamiast space-between */
  gap:24px;                       /* zamiast column-gap z motywu */
  column-gap:50px !important;     /* nadpisz, jeśli używa zmiennej */
}

/* 2) Dzieci headera nie rosną */
.site-header > *{
  flex:0 0 auto;                  /* żadnego flex:1 */
}

/* 3) Logo odsuwa resztę na prawo */
.site-branding{
  margin-right:auto;
}

/* 4) Grupa z: burger | FUNDUSZE UE | PL/EN | social */
.header-right {
  display: flex;
      align-items: center;
      gap: 16px;
      font-weight: var(--typography-weight-medium);
      font-size: 0.8em;
}

/* 5) Ikonki mail/telefon – jedna pod drugą, przyklejone do prawej */
.header-contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-left:12px;               /* mały odstęp od .header-right */
}

/* 6) Usuń nadmierne paddingi jeśli motyw je dodaje */
.site-header {
  padding: 20px;
}

/* Mobile header - tylko logo, menu i języki */
@media (max-width: 768px) {
  .site-header {
    gap: 15px;
    padding: 15px;
    column-gap: 9px !important;
  }
  
  /* Ukryj social media i kontakt na mobile */
  .social-icons,
  .header-contact {
    display: none;
  }
  
  /* Zostaw tylko logo, menu i języki */
  .site-branding {
    flex: 1;
  }
  
  .header-right {
    gap: 10px;
    font-size: 0.8em;
  }
}

/* Small mobile - jeszcze bardziej kompaktowy */
@media (max-width: 480px) {
  .site-header {
    gap: 10px;
    padding: 12px;
  }
  
  .header-right {
    gap: 8px;
    font-size: 0.75em;
  }
}

/* Header right */


.header-right a svg, .header-contact a svg  
{
  width: 25px;
  height: 25px;        
  transition: fill 0.3s;
}


span.social-icons svg, .header-contact svg {
  fill: var(--color-black);
}

.header-right a { color: var(--color-black) !important;}
.header-right a:hover {font-weight: var(--typography-weight-semibold);
color: var(--color-science-blue) !important;
}


/* odstepy */ 

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mt-6 { margin-top: 64px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 48px; }
.mb-6 { margin-bottom: 64px; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 8px; margin-bottom: 8px; }
.my-2 { margin-top: 16px; margin-bottom: 16px; }
.my-3 { margin-top: 24px; margin-bottom: 24px; }
.my-4 { margin-top: 32px; margin-bottom: 32px; }
.my-5 { margin-top: 48px; margin-bottom: 48px; }
.my-6 { margin-top: 64px; margin-bottom: 64px; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 8px; }
.pt-2 { padding-top: 16px; }
.pt-3 { padding-top: 24px; }
.pt-4 { padding-top: 32px; }
.pt-5 { padding-top: 48px; }
.pt-6 { padding-top: 64px; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 8px; }
.pb-2 { padding-bottom: 16px; }
.pb-3 { padding-bottom: 24px; }
.pb-4 { padding-bottom: 32px; }
.pb-5 { padding-bottom: 48px; }
.pb-6 { padding-bottom: 64px; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 8px; padding-bottom: 8px; }
.py-2 { padding-top: 16px; padding-bottom: 16px; }
.py-3 { padding-top: 24px; padding-bottom: 24px; }
.py-4 { padding-top: 32px; padding-bottom: 32px; }
.py-5 { padding-top: 48px; padding-bottom: 48px; }
.py-6 { padding-top: 64px; padding-bottom: 64px; }

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}



/* Gutenberg sekcje rozmiary */


/* ZAWSZE marginesy boczne */

.wp-block-columns,
.wp-block-cover,
.alignwide,
.alignfull,
.wp-block[data-align=""] {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* DO 768px – można dodać dodatkowe dopasowania jeśli trzeba */
@media (max-width: 768px) {
  .wp-block-group,
  .wp-block-columns,
  .wp-block-cover,
  .alignwide,
  .alignfull {
   padding-left: 8px;
  padding-right: 8px;
  }
}

/* OD 1440px – reset paddingów i centrowanie */
@media (min-width: 1440px) {
  .wp-block-group:not([class*="align"]),
  .wp-block-columns:not([class*="align"]),
  .wp-block-cover:not([class*="align"]),
  .wp-block[data-align=""] {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 1. DOMYŚLNA SZEROKOŚĆ DLA GRUPY BEZ alignfull/alignwide */
.wp-block-group:not([class*="align"]),
.wp-block-columns:not([class*="align"]),
.wp-block-cover:not([class*="align"]),
.wp-block[data-align=""] {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


/* 2. alignwide (zwiększona szerokość) */
.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* 3. alignfull (pełna szerokość ekranu) */
.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}




/* Footer */
.footer-back { background: var(--color-valhalla);
  padding-top: 60px;
    padding-bottom: 40px;
  }

  
svg.ikona {
  width: 1em;
height: 1em;
margin-right: 4px;
fill: var(--color-science-blue);
vertical-align: middle;
}

.footer-head { font-size: var(--typography-size-18);
color: var(--color-science-blue);
font-family: var(--typography-family-secondary);

}

.footer-col ul {

padding-left: 0;
margin-left: 0;}

.footer-col li a {	font-weight: var(--typography-weight-regular);
  color: var(--color-science-blue);
  font-family: var(--typography-family-secondary);


}
.footer-col li {
list-style-type: none;
padding-left: 0;
margin-left: 0;
font-weight: var(--typography-weight-regular);


}
ul.footer-socials li {
padding: var(--padding-main-level-vertical) var(--padding-main-level-horizontal);
}

.site-footer a:hover {  color: var(--color-yellow);}


.site-footer {

color: var(--color-white);
font-size: var(--typography-size-14);

}

.site-footer a {
  padding:0px;
color: var(--color-white);
text-decoration: none;
}

.site-footer .container {
max-width: 1440px;
margin: 0 auto;
padding: 0 1.25rem;
}

.site-footer .grid-footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
}



.site-footer .footer-bottom .footer-links {
display: flex;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
}


/* sam dol stopki */

.footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.footer-links a, .footer-bottom p {
color: var(--color-white);
text-decoration: none;
margin-top: 0px;
margin-bottom: 0px;
}


.footer-col p { color: var(--color-white);
  margin-top: 10px;
  margin-bottom: 13px;

}

ul.footer-socials  {height:30px;}

ul.footer-socials li {
  display: inline;
  float: right;
}

ul.footer-socials li svg {
  color: var(--color-white);
  fill: var(--color-white);
}


.footer-white img {
  max-width: 900px;
  padding-bottom: 10px;
  margin: auto;
}

/* Mobile responsive for footer-white img */
@media (max-width: 768px) {
  .footer-white img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}

.footer-head.newsletter {font-size: 2em; margin-top:-10px;

}

.border-radius-right img {  border-top-right-radius: 250px;
border-bottom-right-radius: 250px; }


/* Pagination */

.pagination {
  margin-top: 40px;
  text-align: center;
}

.pagination .page-numbers {
  min-width:25px;
    margin: 0 5px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-black-text);
}

.pagination .page-numbers.current {
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-weight: bold;
}


.breadcrumbs-eweld {
 text-align: center;
 padding-bottom: 25px;
 color: var(--color-white);
 font-size: var(--typography-size-12);
}

.breadcrumbs-eweld a {
  color: var(--color-white);
  text-decoration: none;
}

.breadcrumbs-eweld a:hover {
  color: var(--color-science-blue);
}

.breadcrumbs-eweld span { 
  color: var(--color-white);
}

/* === Contact 360 – lekki, finalny CSS === */
.c360-contact{
  --blue: var(--color-science-blue, #00A0E3);
  --gap: 18px;
  margin-top: 12px;                /* odstęp od nagłówka */
}
.c360-contact *{ box-sizing: border-box; }

/* --- GRID --- */
.c360-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.c360-grid > *{ min-width: 0; }

/* CF7 potrafi dodać <p>/<br> – spłaszczamy */
.c360-grid p,
.c360-accept p{ display: contents; margin: 0; }
.c360-grid br,
.c360-accept br{ display: none; }


input[type=checkbox],
input[type=radio] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* --- FIELDS --- */
.c360-field input[type=text], .c360-grid input[type="text"], .c360-grid input[type="email"], .c360-grid input[type="tel"], .c360-grid input[type="number"], .c360-grid input[type="password"], .c360-grid input[type="search"], .c360-grid input[type="url"], .c360-grid input[type="week"], .c360-grid textarea {  font-size: var(--typography-size-12);}
input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=week], textarea {  font-size: var(--typography-size-12); color: var(--color-black);}

.c360-field{
  width: 100%;
  display: block;
  margin-bottom: 13px;
  font-size: var(--typography-size-12);
  margin-top: 13px;
  background: #fff;
  color: inherit;
  border: 2px solid var(--blue) !important;
  border-radius: 6px;
  padding: 14px 16px;
  height: 56px;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.c360-field::placeholder{
  text-transform: uppercase;
  letter-spacing: .02em;
  opacity: .9;
}
.c360-field:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,160,227,.15);
}

/* SELECT z prostą strzałką */
.c360-select-wrap{ position: relative; margin-bottom: var(--gap); }
.c360-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px;
}
.c360-select-wrap::after{
  content: "";
  position: absolute; right: 16px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* TEXTAREA – większa i z równym odstępem */
.c360-textarea{
  height: 200px;         /* było ~160px */
  resize: vertical;
  margin-top: var(--gap); /* taki sam „row gap” jak wyżej */
}

/* ZGODA RODO – normalna waga, równy odstęp */
.c360-accept{
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 10px;
  margin-top: var(--gap);
  line-height: 1.45;
}
.c360-accept span{ font-weight: normal; margin-left: 0px;}
.c360-accept input[type="checkbox"]{
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--blue);
}
.c360-accept a{ text-decoration: none; border-bottom: 1px solid currentColor; }

/* PRZYCISK – niebieski, bez czarnej ramki, po prawej */
.c360-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: var(--gap);
}
.c360-btn{
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;   /* usuwa czarną ramkę z motywu */
  outline: none !important;
  border-radius: 6px;
  padding: 14px 28px;
  height: 48px;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .15s ease, transform .06s ease;
}
.c360-btn:hover{ opacity: .9; }
.c360-btn:active{ transform: translateY(1px); }

/* WALIDACJA – lekko */
.c360-field.wpcf7-not-valid{ border-color: #e63946 !important; }
.wpcf7-not-valid-tip{ display: none; }
.wpcf7-response-output{
  border: 2px solid var(--blue) !important;
  margin: 16px 0 0;
}

/* RWD – 1 kolumna poniżej 720px */
@media (max-width: 720px){
  .c360-grid{ grid-template-columns: 1fr; }
  .c360-actions{ justify-content: stretch; }
  .c360-btn{ width: 100%; }
}

textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.c360-field {
  margin-top: 20px;
  min-height: 111px;
}
/* === FIX: checkbox RODO – wyrównanie, rozmiar, ładny wygląd === */
.c360-accept{
  grid-template-columns: 24px 1fr; /* trochę więcej miejsca na check */
  align-items: center;             /* pionowe wyrównanie do tekstu */
}
.c360-accept input[type="checkbox"]{
  margin: 0;                       /* żadnych domyślnych marginesów */
  width: 18px; height: 18px;
  appearance: none;                /* własny styl (spójny w przeglądarkach) */
  border: 2px solid var(--blue);
  border-radius: 4px;
  display: grid; place-items: center;
  background: #fff;
}
.c360-accept input[type="checkbox"]::after{
  content: "";
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform .12s ease-in-out;
  background: var(--blue);
  border-radius: 2px;
}
.c360-accept input[type="checkbox"]:checked::after{ transform: scale(1); }

/* Akcje – pionowo zamiast w jednej linii */
.c360-actions{
  display: flex;
  flex-direction: column;   /* układ góra-dół */
  align-items: flex-end;    /* przycisk wyrównany do prawej */
  margin-top: var(--gap);
}

.c360-actions .wpcf7-spinner{
  margin-top: 10px !important;   /* odstęp od przycisku */
  align-self: flex-start;        /* opcjonalnie: wyrównanie do lewej */
  background: transparent !important;
}

fieldset.c360-group {
  margin-top: 30px;
  margin-bottom: 30px;
}

span.wpcf7-list-item.first.last {
  margin-top: 14px;
}



/* === BLOG STYLES === */

/* Blog header section */
.blog-header-section {
  background: var(--color-white);
  padding-top:60px;
  text-align: center;
}

/* Blog title - duży i wyśrodkowany */
.blog-title {
  font-size: 5rem;
  font-weight: var(--typography-weight-bold);
  color: var(--color-black);
  margin: 0 0 40px 0;
  text-transform: uppercase;
  text-align: center;
  line-height: var(--typography-heading-core-line-height);
}

/* === PAGE HEADER STYLES === */

/* Page header section - podobna do blog-header-section */
.page-header-section {
  background: var(--color-white);
 /*  padding: 20px 0 60px 0;*/
  text-align: center;
}

/* Page title - duży i wyśrodkowany */
.page-title {
  font-size: 5rem;
  font-weight: var(--typography-weight-bold);
  color: var(--color-black);
  margin: 0 0 40px 0;
  text-transform: uppercase;
  text-align: center;
  line-height: var(--typography-heading-core-line-height);
}

/* Breadcrumbs w page header */
.page-header-section .breadcrumbs-single-post {
  margin-bottom: 20px;
}

/* Blog categories w jednej linii z odstępami */
.blog-categories-single-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* Pojedyncze linki kategorii */
.blog-category-link {
  color: var(--color-black);
  text-decoration: none;
  font-size: var(--typography-size-18);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: font-weight 0.3s ease;
  padding: 8px 16px;
}

.blog-category-link:hover {
  font-weight: var(--typography-weight-bold);
}

.blog-category-link.active {
  font-weight: var(--typography-weight-bold);
  color: var(--color-science-blue);
}

/* Blog meta (breadcrumbs, paginacja) */
.blog-meta {
  margin-top: 20px;
}

.article-content h1{font-size: 4em;   }

/* Mobile responsive for article content h1 */
@media (max-width: 768px) {
  .article-content h1 {
    font-size: var(--typography-size-h1);
  }
}

@media (max-width: 480px) {
  .article-content h1 {
    font-size: var(--typography-size-h2);
  }
}

/* Breadcrumbs na pojedynczych wpisach blogowych - ciemne litery na białym tle */
.breadcrumbs-single-post {
  padding-bottom: 25px;
  color: var(--color-black);
  font-size: var(--typography-size-12);
}

.breadcrumbs-single-post a {
  color: var(--color-black);
  text-decoration: none;
}

.breadcrumbs-single-post a:hover {
  color: var(--color-science-blue);
}

.breadcrumbs-single-post span { 
  color: var(--color-black);
}

/* Przycisk powrotu */
.portfolio-back-link {
  text-align: center;
}

.portfolio-back-button {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  padding: 15px 30px;
  font-size: var(--typography-size-16);
  font-weight: var(--typography-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.portfolio-back-button:hover {
  background: var(--color-science-blue);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Responsive dla bloga */
@media (max-width: 768px) {
  .blog-title {
    font-size: var(--typography-size-h1);
    margin-bottom: 30px;
  }
  
  .blog-categories-single-line {
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .blog-category-link {
    font-size: var(--typography-size-16);
    padding: 6px 12px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .portfolio-grid-section {
    padding: 60px 0;
  }

  .related-portfolio-title {
    font-size: var(--typography-size-h3);
    margin-bottom: 40px;
  }
}

@media (max-width: 480px) {
  .blog-title {
    font-size: var(--typography-size-h2);
    margin-bottom: 25px;
  }
  
  .blog-categories-single-line {
    gap: 15px;
    flex-direction: column;
    gap: 15px;
  }
  
  .blog-category-link {
    font-size: var(--typography-size-15);
    padding: 5px 10px;
  }

  .portfolio-grid-section {
    padding: 40px 0;
  }

  .related-portfolio-title {
    font-size: var(--typography-size-h4);
    margin-bottom: 30px;
  }

  .portfolio-back-button {
    padding: 12px 24px;
    font-size: var(--typography-size-14);
  }
}

/* Responsive dla page header */
@media (max-width: 768px) {
  .page-header-section {
    padding: 0px;
  }

  section.page-header-section .container {
    margin-top: 0px;
    padding-top: 0px;
}
  
  .page-title {
    font-size: var(--typography-size-h1);
    margin-bottom: 0px;
  }
}

@media (max-width: 480px) {
  .page-header-section {
    padding: 0px;
  }
  
  section.page-header-section .container {
    margin-top: 0px;
    padding-top: 0px;
}

  .page-title {

    margin-bottom: 0px;
  }
}


.content-80 {
  max-width: 100%;
  padding-bottom: var(--spacing-content-padding-block);
  padding-left: 0;
  padding-right: 0;
  padding-top: 0px;
}

.lang a.active {
  font-weight: bold;
}


.portfolio-cta img {
  max-width: 280px;
}

/* Screen reader only text */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}



.top-go {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--color-black);
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 1rem;
  text-decoration: none;
  display: block;
  z-index: 9999;
}

@media (min-width: 769px) {
  .top-go {
    padding: 0px 15px;
    font-size: 1.125rem; /* ~18px */
  }
}

a#top {
    display: none !important;
}


@media (min-width: 769px) {
  a#top-scroll span {
    font-size: 32px;
  }
}

/* Gdy aktywny burger (body.js-nav-active), linki w nawigacji mają być białe
   TYLKO w zakresie burgera (tablet/mobile) */
@media (max-width: 1024px) {
  .js-nav-active #nav a,
  .js-nav-active .nav-primary a,
  .js-nav-active .dropdown a,
  .js-nav-active .menu-item a {
    color: var(--color-white) !important;
  }

  .js-nav-active #nav a:hover,
  .js-nav-active .nav-primary a:hover,
  .js-nav-active .dropdown a:hover,
  .js-nav-active .menu-item a:hover {
    color: var(--color-white) !important;
    opacity: 0.85;
  }
}

.footer-col.bottom-style-menu li a {
  font-size: var(--typography-size-14);
}