/*
Theme Name: WAS Trans – Landing
Theme URI: https://example.com/
Author: Generated by ChatGPT
Author URI: https://example.com/
Description: Jednostronicowy motyw WordPress na bazie dostarczonego HTML (Tailwind CDN + Alpine.js).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wastrans
*/

/* Base theme styles from original template */
*, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; padding: 0; font-family: 'Source Sans 3', sans-serif; background: #000; color: #e8e0d0; overflow-x: hidden; }

    /* ── TOPBAR ── */
    #topbar { background: #000; border-bottom: 1px solid #222; }

    /* ── NAVBAR ── */
    #navbar { background: #000; border-bottom: 1px solid #222; transition: box-shadow .35s; }
    #navbar.scrolled { box-shadow: 0 4px 28px rgba(201,148,10,.22); }

    /* nav underline hover */
    .nav-link { font-family:'Oswald',sans-serif; font-weight:500; font-size:14px; letter-spacing:.07em; position:relative; text-decoration:none; }
    .nav-link::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:#C9940A; transition:width .3s; }
    .nav-link:hover::after { width:100%; }

    /* ── HERO ── */
    #hero {
      min-height: auto;
      /* Deklaracja podstawowa — JPEG zamiast dawnego PNG (3,2 MB -> 362 KB) */
      background:
        linear-gradient(130deg, rgba(0,0,0,.88) 45%, rgba(201,148,10,.12) 100%),
        url('photos/hero-mix.jpg') center/cover no-repeat;
      /* Nowsze przeglądarki dostaną lżejszy WebP (291 KB); starsze zignorują tę regułę */
      background:
        linear-gradient(130deg, rgba(0,0,0,.88) 45%, rgba(201,148,10,.12) 100%),
        image-set(
          url('photos/hero-mix.webp') type('image/webp'),
          url('photos/hero-mix.jpg') type('image/jpeg')
        ) center/cover no-repeat;
    }

    /* ── GOLD STRIP ── */
    .gold-strip { background: linear-gradient(90deg, #C9940A, #A37808); }

    /* ── SECTION BACKGROUNDS (naprzemiennie) ── */
    .sec-a { background: #1a1a1a; } /* ciepła szarość – dobrze widoczna */
    .sec-b { background: #000; }

    /* ── GOLD HEADING LINE ── */
    .gold-line::after { content:''; display:block; width:52px; height:3px; background:#C9940A; margin:10px auto 0; }

    /* ── PRODUCT CARD (na szarym tle #1a1a1a → karta czarna) ── */
    .pcard { background:#0d0d0d; border:1px solid #2e2e2e; border-radius:14px; overflow:hidden; transition:transform .3s, border-color .3s, box-shadow .3s; }
    .pcard:hover { transform:translateY(-6px); border-color:rgba(201,148,10,.55); box-shadow:0 16px 40px rgba(201,148,10,.1); }
    .pcard img { display:block; width:100%; height:180px; object-fit:cover; transition:transform .5s; }
    .pcard:hover img { transform:scale(1.06); }
    .pcard-body { padding:18px; }
    .pcard-body h3 { font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; color:#fff; margin:0 0 10px; }
    .pcard-body ul { margin:0; padding:0; }
    .pcard-body li { font-size:13px; color:#888; list-style:none; padding:3px 0 3px 14px; position:relative; }
    .pcard-body li::before { content:'›'; position:absolute; left:0; color:#C9940A; }

    /* ── WHY CARD (na czarnym tle → karta ciemna szara) ── */
    .wcard { background:#181818; border:1px solid #2a2a2a; border-radius:14px; padding:24px; }

    /* ── ICON BOX ── */
    .ibox { width:50px; height:50px; background:rgba(201,148,10,.1); border:1px solid rgba(201,148,10,.28); border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

    /* ── SERVICE IMAGE CARD ── */
    .scard { border-radius:18px; overflow:hidden; position:relative; }
    .scard img { display:block; width:100%; height:300px; object-fit:cover; transition:transform .5s; }
    .scard:hover img { transform:scale(1.04); }
    .scard-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82) 35%, transparent 100%); display:flex; align-items:flex-end; padding:24px; }

    /* ── STAT NUMBER ── */
    .statnum { font-family:'Oswald',sans-serif; font-weight:700; color:#C9940A; line-height:1; font-size:2.4rem; }

    /* ── FORM INPUT ── */
    .finput { display:block; width:100%; background:#111; border:1px solid #2e2e2e; border-radius:9px; padding:12px 16px; font-family:'Source Sans 3',sans-serif; font-size:15px; color:#e8e0d0; outline:none; transition:border-color .25s; }
    .finput::placeholder { color:#444; }
    .finput:focus { border-color:#C9940A; }

    /* ── SCROLL REVEAL ── */
    .rv { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
    .rv.show { opacity:1; transform:none; }

    /* ── CTA PULSE ── */
    @keyframes pg { 0%,100%{box-shadow:0 0 0 0 rgba(201,148,10,.45)} 60%{box-shadow:0 0 0 14px rgba(201,148,10,0)} }
    .pulse { animation:pg 2.8s infinite; }

    @media (max-width:640px) {
      .statnum { font-size:1.9rem; }
      .scard img { height:220px; }
    }


.container {
    max-width: 1250px!important;
    margin: 0 auto;
    padding: 0 20px;
}

.single-post {
    margin-bottom: 60px;
}

.entry-title {
    margin-bottom: 10px;
}

.entry-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.post-thumbnail {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 30px;
    height: 260px;
    cursor: zoom-in;
}
@media (min-width: 640px) {
    .post-thumbnail { height: 380px; }
}
@media (min-width: 1024px) {
    .post-thumbnail { height: 460px; }
}
.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
}
.post-thumbnail::after {
    content: '⤢';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,.55);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    pointer-events: none;
}

/* Dostępność: miniatury galerii (NextGEN) jako elementy dotykowe —
   min. 48x48 px i odstęp, zgodnie z wytycznymi dla urządzeń mobilnych */
.ngg-galleryoverview .ngg-gallery-thumbnail-box,
.ngg-gallery-thumbnail-box {
    margin: 10px !important;
}
.ngg-gallery-thumbnail {
    margin: 0 !important;
    padding: 0 !important;
}
a.ngg-simplelightbox,
.ngg-gallery-thumbnail a {
    display: block;
    min-width: 48px;
    min-height: 48px;
}
/* Bez tego kotwica ma wysokość linii tekstu, a nie obrazka —
   przez co obszar kliknięcia jest niższy niż sama miniatura. */
a.ngg-simplelightbox img,
.ngg-gallery-thumbnail a img {
    display: block;
    width: 100%;
    height: auto;
}

/* Siatka galerii na pełną szerokość kontenera.
   Wtyczka NextGEN układa miniatury jako inline-block o szerokości procentowej
   z text-align:center, co przy niepełnym ostatnim wierszu i marginesach
   zostawia nierówną, pustą przestrzeń po prawej. Własna siatka CSS Grid
   gwarantuje pełną szerokość i równe kolumny niezależnie od tego. */
#galeria .ngg-galleryoverview.default-view {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: initial !important;
    font-size: initial !important;
}
#galeria .ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
#galeria .ngg-gallery-thumbnail-box .ngg-gallery-thumbnail {
    height: 100%;
}
#galeria .ngg-gallery-thumbnail-box .ngg-gallery-thumbnail a {
    margin: 0 !important;
    height: 100%;
}
#galeria .ngg-gallery-thumbnail-box img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover;
    border-radius: 10px;
}
@media (max-width: 900px) {
    #galeria .ngg-galleryoverview.default-view { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    #galeria .ngg-galleryoverview.default-view { grid-template-columns: repeat(2, 1fr); }
    #galeria .ngg-gallery-thumbnail-box img { height: 160px !important; }
}

.img-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}
.img-lightbox.active { display: flex; }
.img-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 60px 0;
}

.entry-footer {
    margin-top: 40px;
    font-size: 14px;
    color: #555;
}

.entry-content p { 
  margin: 0 0 1em; 
  line-height: 1.7;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin: 1.4em 0 0.6em;
  line-height: 1.25;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 1em 1.5em;
  padding: 0;
}

.entry-content li {
  margin: 0.3em 0;
}

.entry-content a {
  text-decoration: underline;
}

.entry-content blockquote {
  margin: 1.2em 0;
  padding: 0.8em 1.2em;
  border-left: 4px solid currentColor;
  opacity: 0.9;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content figure {
  margin: 1.2em 0;
}

.entry-content h1 {
  font-size: 2.2rem;
  line-height: 1.2;
  margin: 1.8em 0 0.8em;
  font-weight: 700;
}

.entry-content h2 {
  font-size: 1.8rem;
  line-height: 1.25;
  margin: 1.6em 0 0.6em;
  font-weight: 700;
}

.entry-content h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 1.4em 0 0.5em;
  font-weight: 700;
}

.entry-content h4 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 1.2em 0 0.4em;
  font-weight: 700;
}
.entry-content p  { margin: 0 0 1em; line-height: 1.7; }

/* Contact Form 7 - dopasowanie do Twojego UI */
.wpcf7 form .finput {
  width: 100%;
  background: #0b0b0b;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  outline: none;
}

.wpcf7 form .finput:focus {
  border-color: #b08a2a; /* gold */
}

.wpcf7 form .btn-gold,
.wpcf7 form input[type="submit"] {
  width: 100%;
  background: #c9a227; /* bg-gold */
  color: #000;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.wpcf7 form .btn-gold:hover,
.wpcf7 form input[type="submit"]:hover {
  filter: brightness(0.9);
}

/* błędy CF7 */
.wpcf7-not-valid-tip { color: #ff6b6b; font-size: 12px; }
.wpcf7-response-output { color: #fff; border-color: #2e2e2e; }

.ngg-navigation span.current, .ngg-navigation .page-numbers {
	margin-left: 0.5rem;
	background-color: #d4af37!important;
	color: #000!important;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.625rem 1.25rem;
	border-radius: 0.5rem;
	transition: background-color 0.3s;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.ngg-navigation span.current:hover {
	background-color: #b8962e!important;
}