/*
Theme Name:   Matrix Kadence Child
Theme URI:    https://matrix.info.pl
Description:  Child theme dla Kadence — Matrix Usługi Informatyczne. Customizacja kolorów, typografii i komponentów.
Author:       Matrix
Author URI:   https://matrix.info.pl
Template:     kadence
Version:      1.0.6
Text Domain:  matrix-kadence-child
*/

/* =============================================
   ZMIENNE — paleta + typografia
   Dostosuj wartości HEX/font do brandingu.
   ============================================= */
:root {
    --matrix-primary:      #1D337F;  /* Granat MATRIX (z logo) — linki, nagłówki akcentu */
    --matrix-primary-dark: #162857;  /* hover granatu */
    --matrix-accent:       #DA251C;  /* Czerwień MATRIX (z logo) — CTA, podkreślenia */
    --matrix-accent-dark:  #B81D15;  /* hover czerwieni */
    --matrix-dark:         #0A1740;  /* tła ciemne (hero, footer) */
    --matrix-slate:        #334155;  /* body text */
    --matrix-muted:        #64748B;  /* podtekst, captions */
    --matrix-surface:      #F8FAFC;  /* tła sekcji */
    --matrix-border:       #E2E8F0;  /* separatory */
    --matrix-success:      #10B981;
    --matrix-radius:       12px;
}

/* =============================================
   Globalne polerki
   ============================================= */
html { scroll-behavior: smooth; }

body {
    color: var(--matrix-slate);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--matrix-dark);
    letter-spacing: -0.01em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }

a { color: var(--matrix-primary); transition: color .15s ease; }
a:hover { color: var(--matrix-primary-dark); }

/* =============================================
   Hero — gradient granatowy + akcent czerwony
   ============================================= */
.matrix-hero {
    background: linear-gradient(135deg, var(--matrix-dark) 0%, var(--matrix-primary) 100%);
    color: #fff;
    padding: 6rem 0;
    position: relative;
}
.matrix-hero::after {
    /* Czerwony pasek inspirowany logo — subtelny akcent na dole hero */
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--matrix-accent);
}
.matrix-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); }
.matrix-hero p { color: rgba(255,255,255,.85); font-size: 1.125rem; max-width: 640px; }

/* =============================================
   Buttony — CTA czerwone (akcent), secondary granatowe
   ============================================= */
.wp-block-button__link,
.kt-btn-wrap .kt-button {
    border-radius: var(--matrix-radius) !important;
    padding: 0.85rem 1.6rem !important;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    background-color: var(--matrix-accent);
    color: #fff;
}
.wp-block-button__link:hover,
.kt-btn-wrap .kt-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(218, 37, 28, 0.3);
    background-color: var(--matrix-accent-dark);
    color: #fff;
}
/* Wariant secondary — granatowy outline */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--matrix-primary);
    border: 2px solid var(--matrix-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--matrix-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(29, 51, 127, 0.25);
}

/* =============================================
   Karty usług — subtelny lift na hover
   ============================================= */
.matrix-service-card {
    background: #fff;
    border: 1px solid var(--matrix-border);
    border-radius: var(--matrix-radius);
    padding: 2rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.matrix-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    border-color: var(--matrix-primary);
}
.matrix-service-card .icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(29, 51, 127, 0.1);
    color: var(--matrix-primary);
    margin-bottom: 1rem;
}

/* =============================================
   Header / Nav — czysty, nowoczesny
   ============================================= */
.site-header {
    border-bottom: 1px solid var(--matrix-border);
    backdrop-filter: saturate(180%) blur(8px);
}
.main-navigation a { font-weight: 500; }

/* =============================================
   Footer — ciemny, czytelny
   ============================================= */
.site-footer {
    background: var(--matrix-dark);
    color: rgba(255,255,255,.75);
}
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: #fff; }

/* =============================================
   Formularze (WPForms / CF7) — wyrównanie z brandingiem
   ============================================= */
input[type="text"], input[type="email"], input[type="tel"], textarea {
    border: 1px solid var(--matrix-border) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
}
input:focus, textarea:focus {
    border-color: var(--matrix-primary) !important;
    box-shadow: 0 0 0 3px rgba(29, 51, 127, 0.15) !important;
    outline: none !important;
}

/* =============================================
   Mobile — drobne korekty oddechu
   ============================================= */
@media (max-width: 768px) {
    .matrix-hero { padding: 4rem 0; }
    .matrix-service-card { padding: 1.5rem; }
}

/* =============================================
   Aktualności — bez pasa z tytułem strony

   Kadence wstawia nad listą wpisów szeroki, jasny pas z napisem
   „Aktualności". Po wejściu z menu i tak wiadomo, gdzie się jest, a pas
   rozbijał rytm strony i odsuwał treść poniżej pierwszego ekranu.
   Klasa „post-archive-hero-section" dotyczy wyłącznie archiwum wpisów,
   więc tytuły na pozostałych podstronach zostają nietknięte.
   ============================================= */
body.blog .entry-hero.post-archive-hero-section {
    display: none;
}

body.blog #primary {
    padding-top: 3rem;
}

/* =============================================
   Wpis: zdjęcie nie wchodzi pod tytuł

   Kadence układa okładkę wpisu w trybie „behind" i wciąga na nią blok
   z kategorią oraz tytułem. Przy naszych okładkach, które mają napis
   przy dolnej krawędzi, wychodziła z tego kaszana. „!important" jest tu
   świadome — znosimy ujemny margines wpisany przez motyw nadrzędny.
   ============================================= */
body.single-post .post-thumbnail.kadence-thumbnail-position-behind {
    margin-bottom: 0 !important;
}

body.single-post .post-thumbnail.kadence-thumbnail-position-behind + .entry {
    margin-top: 3.5rem !important;
}

body.single-post .post-thumbnail.kadence-thumbnail-position-behind + .entry .entry-content-wrap {
    padding-top: 0;
}

/* =============================================
   Justowanie treści artykułów

   Tylko w treści wpisów — na kartach i w krótkich akapitach justowanie
   wygląda źle. Dzielenie wyrazów włączone, bo bez niego długie polskie
   słowa robią w wyjustowanej kolumnie białe rzeki.
   ============================================= */
body.single-post .entry-content p,
body.single-post .entry-content li {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Nagłówki, podpisy i przyciski justowaniu nie podlegają. */
body.single-post .entry-content .wp-block-button,
body.single-post .entry-content figcaption,
body.single-post .entry-content .has-text-align-center {
    text-align: center;
}

/* =============================================
   Siatka usług na stronie głównej

   Kafle stały wcześniej w czterech osobnych wierszach kolumn (4+3+3+4),
   przez co karty w różnych wierszach miały różną szerokość. Teraz jest to
   jedna siatka, która sama się układa — dodanie kolejnej usługi nie
   wymaga przestawiania niczego.
   ============================================= */
.matrix-siatka-uslug {
    margin-top: 2rem;
}

/* WordPress wkłada do bloku grupy własny kontener, więc siatkę zakłada się
   na niego, a nie na element z naszą klasą. */
.matrix-siatka-uslug > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1.5rem;
}

/* Kontener ma klasę „is-layout-flow", która dokłada odstępy między
   kolejnymi elementami. W siatce odstępami rządzi „gap". */
.matrix-siatka-uslug > .wp-block-group__inner-container > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* =============================================
   Ikony w „Dlaczego firmy wybierają Matrix"

   Grały w innym stylu niż ikony kafli: gołe kreski bez tła obok tych
   samych kresek osadzonych w jasnym kwadracie. „!important" jest tu
   konieczne, bo reguły dla tych ikon siedzą w arkuszu dodatkowym
   z Customizera, a ten ładuje się po motywie potomnym.
   ============================================= */
.matrix-stat-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    background: rgba(29, 51, 127, 0.1) !important;
    color: var(--matrix-primary) !important;
}

.matrix-stat-icon svg {
    width: 28px !important;
    height: 28px !important;
    filter: none !important;
}

/* =============================================
   Nagłówki w artykułach

   Czerwień zostaje wyłącznie dla rzeczy, w które można kliknąć: przycisków
   i tytułów wpisów. Śródtytuły w długim tekście na granat — czerwony co dwa
   akapity męczył i konkurował z przyciskami.
   ============================================= */
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
    color: var(--matrix-dark);
}

/* =============================================
   Strona główna bez pustego pasa nad hero

   Motyw daje obszarowi treści 5 rem marginesu górnego. Na podstronach to
   ma sens, ale strona główna zaczyna się blokiem pełnej szerokości i ten
   margines widać jako gołe tło nad granatem.
   ============================================= */
body.home .content-area {
    margin-top: 0;
}

/* Reszta pasa to wewnętrzny margines obszaru treści (2 rem). Na stronie
   głównej wszystkie sekcje są pełnej szerokości, więc jest zbędny. */
body.home .entry-content-wrap {
    padding-top: 0;
}