/*
Theme Name: PPTECH
Theme URI: https://pptech.sk/
Author: latka.online
Author URI: https://latka.online/
Description: Ľahká firemná téma PPTECH bez page buildera. Obsah titulnej stránky používa natívne Gutenberg bloky.
Version: 3.7.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pptech
Tags: full-site-editing, block-patterns, custom-logo, featured-images, wide-blocks

PPTECH WordPress Theme, Copyright 2026 Andrej Latka.
PPTECH is distributed under the terms of the GNU General Public License v2 or later.
*/

:root {
  --pp-red: #f10412;
  --pp-black: #050505;
  --pp-panel: #222;
  --pp-border: #4f4f4f;
  --pp-text: #e6e6e6;
  --pp-muted: #b8b8b8;
  --pp-width: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pp-black);
  color: var(--pp-text);
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
body.admin-bar .site-header { top: 32px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
a:hover, a:focus-visible { color: var(--pp-red); }
:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.skip-link {
  position: fixed; left: 1rem; top: -6rem; z-index: 9999;
  background: #fff; color: #000; padding: .8rem 1rem;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(0,0,0,.96);
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.header-inner {
  width: min(var(--pp-width), calc(100% - 40px));
  min-height: 90px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.site-logo img { width: 112px; height: auto; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { display: flex; align-items: center; gap: 38px; margin: 0; padding: 0; list-style: none; }
.site-nav a { text-decoration: none; color: #eee; font-size: 17px; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--pp-red); }
.social-links { display: flex; gap: 18px; }
.social-links a { font-size: 0; color: #fff; }
.social-links svg { width: 20px; height: 20px; fill: currentColor; }
.social-links.wp-block-social-links { margin: 0; padding: 0; }
.header-actions .social-links.wp-block-social-links { display: none !important; }
.social-links.wp-block-social-links .wp-social-link { background: transparent; color: #fff; }
.social-links.wp-block-social-links .wp-block-social-link-anchor { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.social-links.wp-block-social-links .wp-social-link:hover { color: var(--pp-red); transform: none; }
.pptech-header-links { display: flex; align-items: center; flex: 0 0 auto; gap: 2px; margin: 0; }
.pptech-header-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; text-decoration: none; }
.pptech-header-links svg { display: block; width: 21px; height: 21px; fill: currentColor; }
.pptech-header-links a:hover, .pptech-header-links a:focus-visible { color: var(--pp-red); }
.menu-toggle { display: none; border: 0; background: transparent; color: #fff; padding: 12px; }
.menu-toggle span { display: block; width: 28px; height: 2px; margin: 6px 0; background: currentColor; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  background: #050505 !important; color: #fff !important; border: 0 !important; border-radius: 3px; padding: 9px !important;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { fill: currentColor; }
.site-header .wp-block-navigation__responsive-container,
.site-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation__responsive-dialog,
.site-header .wp-block-navigation__responsive-container-content {
  background-color: #050505 !important;
  color: #fff !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open a,
.site-header .wp-block-navigation__responsive-container.is-menu-open button { color: #fff !important; }
.site-header .wp-block-navigation__responsive-container.is-menu-open svg { fill: #fff !important; }

.wp-site-blocks > * { margin-block-start: 0; }
.site-main { overflow: clip; margin-block-start: 0 !important; }
.pp-section, .entry-content > *, .wp-block-post-content > * { width: min(var(--pp-width), calc(100% - 40px)); margin-inline: auto; }
.entry-content > .alignfull { width: 100%; max-width: none; }
.entry-content, .wp-block-post-content { margin: 0; }
.entry-content > *:first-child, .wp-block-post-content > *:first-child { margin-top: 0; }

.pp-hero { min-height: 520px; padding-top: 24px !important; display: grid; grid-template-columns: 34% 66%; align-items: start; }
.pp-hero > * { margin-block-start: 0 !important; }
.pp-hero__content { padding: 55px 20px 55px 0; position: relative; z-index: 2; }
.pp-hero__title { margin: 0 0 46px; font-size: clamp(36px, 3vw, 48px); line-height: 1.2; letter-spacing: -.02em; }
.pp-hero__title span { display: block; margin-bottom: 8px; }
.pp-hero__title .accent { color: var(--pp-red); }
.pp-hero__lead { max-width: 430px; margin: 0 0 30px; color: var(--pp-text); font-size: 20px; line-height: 1.25; }
.pp-hero__media { min-width: 0; margin-top: 0 !important; padding-top: 0 !important; align-self: start; }
.pp-hero__media img { width: 100%; height: auto; object-fit: cover; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 22px; }
.pp-button .wp-block-button__link,
a.pp-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px;
  padding: 14px 27px; border: 1px solid #eee; border-radius: 3px;
  background: transparent; color: #fff; font-weight: 700; text-decoration: none; text-transform: uppercase;
}
.pp-button--primary .wp-block-button__link,
a.pp-button--primary { border-color: #c9000d; background: #c9000d; color: #fff; }
.pp-button .wp-block-button__link:hover,
.pp-button .wp-block-button__link:focus-visible,
a.pp-button:hover,
a.pp-button:focus-visible { background: #fff; border-color: #fff; color: #050505; }

.pp-teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; padding-bottom: 105px; }
.pp-teasers > *, .pp-services > *, .pp-why > *, .pp-reference-grid > * { margin-block: 0 !important; }
.pp-teaser { height: 100%; min-height: 245px; display: grid; grid-template-columns: 48% 52%; align-items: center; background: var(--pp-panel); border: 1px solid var(--pp-border); }
.pp-teaser img { width: 100%; max-height: 220px; object-fit: contain; padding: 22px; }
.pp-teaser__copy { padding: 26px 24px 26px 4px; }
.pp-teaser h2 { margin: 0 0 14px; color: #fff; font-size: 25px; line-height: 1.25; text-transform: uppercase; }
.pp-teaser p { margin: 0; color: var(--pp-text); }

.pp-section { padding-block: 90px; }
.pp-section-title { margin: 0; color: #fff; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; text-transform: uppercase; }
.pp-section-title::after { content: ""; display: block; width: 100px; height: 3px; margin-top: 22px; background: var(--pp-red); }
.pp-services { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 24px; margin-top: 55px; }
.pp-service { height: 100%; background: var(--pp-panel); border: 1px solid var(--pp-border); min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pp-service__photo { width: 100%; aspect-ratio: 5/3; overflow: hidden; }
.pp-service__photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-service__body { flex: 1; padding: 20px 20px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.pp-service__body > * { margin-block-start: 0 !important; }
.pp-service__icon { flex: 0 0 auto; width: 64px; height: 64px; margin: -52px 0 18px !important; border: 3px solid var(--pp-panel); border-radius: 50%; background: var(--pp-red); padding: 13px; position: relative; }
.pp-service__icon img { width: 100%; height: 100%; object-fit: contain; }
.pp-service h3 { min-height: 54px; margin: 0 0 14px; color: #fff; font-size: 19px; line-height: 1.25; text-transform: uppercase; }
.pp-service p { margin: 0 !important; color: var(--pp-text); font-size: 16px; }

.pp-why-wrap { background: #0b0b0b; }
.pp-why { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 22px; margin-top: 55px; }
.pp-why-item { height: 100%; text-align: center; padding: 28px 18px; border: 1px solid #292929; background: #111; display: flex; flex-direction: column; align-items: center; }
.pp-why-item > * { margin-block-start: 0 !important; }
.pp-why-item img { width: 54px; height: 54px; margin: 0 auto 18px; object-fit: contain; }
.pp-why-item h3 { margin: 0 0 10px; color: #fff; font-size: 18px; text-transform: uppercase; }
.pp-why-item p { margin: auto 0 0 !important; color: var(--pp-muted); font-size: 16px; }

.pp-references { background: var(--pp-black); }
.pp-reference-shell { position: relative; margin-top: 55px; padding-inline: 62px; }
.pp-reference-grid { display: flex; flex-wrap: nowrap !important; align-items: stretch !important; gap: 24px; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.pp-reference-grid::-webkit-scrollbar { display: none; }
.pp-reference-card { flex: 0 0 100%; min-height: 300px; background: linear-gradient(145deg,#272727,#151515); border: 1px solid var(--pp-border); display: flex; align-items: end; padding: 34px; scroll-snap-align: start; }
.pp-reference-card strong { color: #fff; text-transform: uppercase; }
.pp-reference-grid > .wp-block-image { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; min-width: 100%; margin: 0 !important; scroll-snap-align: start; position: relative; overflow: hidden; background: #111; }
.pp-reference-grid > .wp-block-image img { width: 100%; height: 100%; min-height: 300px; aspect-ratio: 16 / 9; object-fit: cover; }
.pp-reference-grid > .wp-block-image figcaption { position: absolute; inset: auto 0 0; margin: 0; padding: 28px; background: linear-gradient(transparent,rgba(0,0,0,.88)); color: #fff; text-align: left; }
.editor-styles-wrapper .pp-reference-grid { flex-wrap: wrap !important; overflow: visible; }
.editor-styles-wrapper .pp-reference-grid > .wp-block-image { flex: 0 0 calc(33.333% - 16px); min-width: 220px; }
.pp-carousel-button { position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; border: 1px solid var(--pp-border); border-radius: 50%; background: #171717; color: #fff; font: 700 28px/1 Arial,sans-serif; cursor: pointer; transform: translateY(-50%); }
.pp-carousel-button:hover, .pp-carousel-button:focus-visible { background: var(--pp-red); border-color: var(--pp-red); }
.pp-carousel-button--prev { left: 0; }
.pp-carousel-button--next { right: 0; }
.pp-carousel-counter { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 12px; color: #ddd; font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.pp-contact-references { min-width: 0; display: flex; flex-direction: column; }
.pp-contact-references h3 { margin: 0 0 22px; color: #fff; font-size: 26px; text-transform: uppercase; }
.pp-contact-references .pp-reference-shell { flex: 1; margin-top: 0; padding-inline: 54px; display: flex; flex-direction: column; }
.pp-contact-references .pp-reference-grid { flex: 1; }
.pp-contact-references .pp-reference-card { min-height: 100%; padding: 28px; }
.pp-contact-references .pp-reference-grid > .wp-block-image img { min-height: 100%; }

.pp-contact-wrap { background: #161616; }
.pp-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: stretch; }
.pp-contact > * { min-width: 0; margin-block: 0 !important; }
.pp-contact > .wp-block-group:first-child, .pp-contact-references { min-height: 410px; }
.pp-contact p { max-width: 650px; }
.pp-contact-list { list-style: none; margin: 34px 0; padding: 0; display: grid; gap: 14px; }
.pp-contact-list li { display: flex; gap: 14px; align-items: center; }
.pp-contact-list b { color: var(--pp-red); min-width: 24px; }
.pp-contact-card { padding: 45px; background: var(--pp-panel); border: 1px solid var(--pp-border); }
.pp-contact-card h3 { margin-top: 0; color: #fff; font-size: 26px; text-transform: uppercase; }

.site-footer { margin-block-start: 0 !important; background: #050505; border-top: 1px solid #292929; }
.footer-inner { width: min(var(--pp-width), calc(100% - 40px)); margin: 0 auto; padding: 46px 0; }
.footer-minimal { display: flex; flex-direction: column; align-items: flex-start; max-width: 520px; }
.footer-minimal p { margin: 12px 0 0; color: var(--pp-muted); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 50px; }
.footer-logo { width: 130px; margin-bottom: 18px; }
.footer-title { color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.footer-inner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-inner a { color: var(--pp-text); text-decoration: none; }
.footer-inner a:hover { color: var(--pp-red); }
.site-info { width: min(var(--pp-width), calc(100% - 40px)); margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid #292929; display: flex; justify-content: space-between; align-items: center; gap: 25px; font-size: 14px; color: #aaa; }
.site-info p, .site-info figure { margin: 0; }
.latka-mark { width: 110px; }
.latka-mark img { width: 110px; height: auto; }

.pp-back-to-top {
  position: fixed; right: 22px; bottom: 96px; z-index: 999;
  width: 48px; height: 48px; border: 1px solid #555; border-radius: 50%;
  background: #111; color: #fff; font: 700 25px/1 Arial,sans-serif;
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.pp-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pp-back-to-top:hover, .pp-back-to-top:focus-visible { background: var(--pp-red); border-color: var(--pp-red); }

.pp-page { width: min(900px, calc(100% - 40px)); margin: 0 auto; padding: 80px 0; }
.pp-page h1 { color: #fff; font-size: clamp(36px, 5vw, 58px); }
.pp-page h2, .pp-page h3 { color: #fff; }

@media (max-width: 1050px) {
  .header-inner { min-height: 84px; }
  .site-nav ul { gap: 22px; }
  .pp-hero { grid-template-columns: 42% 58%; }
  .pp-services { grid-template-columns: repeat(2, 1fr); }
  .pp-service:last-child { grid-column: 1 / -1; max-width: calc(50% - 14px); }
  .pp-why { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  body.admin-bar .site-header { top: 46px; }
  .header-inner { min-height: 76px; }
  .site-logo img { width: 92px; }
  .header-inner { gap: 12px; }
  .menu-toggle { display: block; }
  .site-nav { display: none; position: absolute; inset: 76px 0 auto 0; padding: 24px 20px 30px; background: #0a0a0a; border-top: 1px solid #292929; }
  .site-nav.wp-block-navigation { display: flex; position: static; inset: auto; padding: 0; background: transparent; border: 0; }
  .header-actions .pptech-header-links { order: 1; }
  .header-actions .site-nav.wp-block-navigation { order: 2; }
  .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { padding: 28px 24px; background: #050505 !important; color: #fff !important; }
  .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 0; }
  .header-actions { gap: 6px; }
  .site-nav.is-open { display: grid; }
  .site-nav ul { display: grid; gap: 0; }
  .site-nav li a { display: block; padding: 13px 0; font-size: 19px; }
  .social-links { padding-top: 0; }
  .pptech-header-links { display: flex !important; visibility: visible !important; opacity: 1 !important; }
  .pp-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 20px; }
  .pp-hero__content { padding: 45px 0 38px; }
  .pp-hero__media { order: -1; }
  .pp-hero__title { margin-bottom: 30px; }
  .pp-hero__lead { font-size: 18px; }
  .pp-teasers { grid-template-columns: 1fr; padding-top: 25px; padding-bottom: 70px; }
  .pp-teaser { min-height: 210px; }
  .pp-section { padding-block: 70px; }
  .pp-services { grid-template-columns: 1fr; }
  .pp-service:last-child { grid-column: auto; max-width: none; }
  .pp-why { grid-template-columns: 1fr 1fr; }
  .pp-contact { grid-template-columns: 1fr; gap: 35px; }
  .pp-contact > .wp-block-group:first-child, .pp-contact-references { min-height: 0; }
  .pp-reference-shell { padding-inline: 48px; }
  .pp-reference-card { flex-basis: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-info { align-items: center; flex-direction: row; justify-content: space-between; gap: 16px; padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
  .site-info p { min-width: 0; }
  .site-info .latka-mark { flex: 0 0 110px; position: relative; z-index: 2; }
  .pp-back-to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .header-inner, .pp-section, .entry-content > *, .wp-block-post-content > *, .footer-inner, .site-info, .pp-page { width: min(100% - 32px, var(--pp-width)); }
  .pp-hero__title { font-size: 36px; }
  .pp-actions { display: grid; grid-template-columns: 1fr; }
  .pp-button, .pp-button .wp-block-button__link { width: 100%; }
  .pp-teaser { grid-template-columns: 42% 58%; }
  .pp-teaser img { padding: 14px; }
  .pp-teaser__copy { padding: 20px 16px 20px 0; }
  .pp-teaser h2 { font-size: 20px; }
  .pp-why { grid-template-columns: 1fr; gap: 40px; }
  .pp-contact-card { padding: 28px 22px; }
  .pp-reference-shell { padding-inline: 0; }
  .pp-contact-references .pp-reference-shell { padding-inline: 0; }
  .pp-carousel-button { top: auto; bottom: -4px; transform: none; }
  .pp-carousel-button--prev { left: 0; }
  .pp-carousel-button--next { right: 0; }
  .pp-carousel-counter { margin-inline: 55px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }