/*
Theme Name: Rerxer 1.0
Theme URI: https://rerxer.pl
Author: Zespół Rerxer
Author URI: https://rerxer.pl
Description: Profesjonalny motyw potomny dla Twenty Twenty-Five. Zaprojektowany z myślą o długoterminowym rozwoju i pełnej kompatybilności z WordPress Full Site Editing. Minimalna ilość niestandardowego kodu, maksymalne wykorzystanie natywnych możliwości WordPress.
Template: twentytwentyfive
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: rerxer
Requires at least: 6.8
Requires PHP: 8.2
Tags: full-site-editing, blog, e-commerce, custom-colors, custom-header, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   UWAGA: warstwa wizualna (kolory, fonty, hero, stopka, podkreślenia itd.)
   NIE jest tutaj. Siedzi w assets/css/rerxer-dodatki.css i ładuje się przez
   enqueue w functions.php. Tego pliku NIE dubluj — to był wcześniejszy błąd.
   Tu zostaje wyłącznie układ i responsywność.
   ========================================================================== */

/* ==========================================================================
   Szerokości i responsywność
   - treść (constrained): 680px
   - układ szeroki (wide): max 1200px
   ========================================================================== */

:root {
    --rerxer-content: 720px;
    --rerxer-wide: 1200px;
    --rerxer-gap-edge: clamp(1rem, 4vw, 2rem);
}

/* Treść czytelnicza w 680px, ale bloki wide/full mogą się wyrwać na pełną szerokość */
.wp-block-post-content > :where(:not(.alignwide):not(.alignfull)),
.entry-content > :where(:not(.alignwide):not(.alignfull)) {
    max-width: var(--rerxer-content);
    margin-inline: auto;
}

/* Układ szeroki nie przekracza 1200px i ma margines na małych ekranach */
.wp-site-blocks .alignwide {
    max-width: var(--rerxer-wide);
    margin-inline: auto;
}

/* Margines bezpieczeństwa na krawędziach na węższych ekranach */
@media (max-width: 1240px) {
    .wp-block-group.alignwide,
    .wp-block-columns.alignwide,
    main.wp-block-group {
        padding-inline: var(--rerxer-gap-edge);
    }
}

/* Obrazy, wideo i osadzenia nigdy nie wychodzą poza kontener */
img,
iframe,
video,
.wp-block-image img,
.wp-block-cover {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Układ z panelem bocznym (wpis, archiwum, wyszukiwanie, strona z sidebarem)
   ========================================================================== */

@media (min-width: 783px) {
    /* Sidebar zostaje przy górnej krawędzi treści */
    .wp-block-columns.alignwide > .wp-block-column:last-child {
        align-self: flex-start;
        position: sticky;
        top: 4rem;
    }
}

/* Na tabletach i telefonach kolumny układają się pionowo, sidebar pod treścią */
@media (max-width: 782px) {
    .wp-block-columns.alignwide {
        flex-direction: column;
        gap: 2rem;
    }
    .wp-block-columns.alignwide > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   Drobne poprawki czytelności i siatki wpisów
   ========================================================================== */

/* Siatka wpisów na stronie głównej i w archiwum dopasowuje liczbę kolumn */
@media (max-width: 1024px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tytuły nie wychodzą poza ekran przy długich słowach */
.wp-block-post-title,
.wp-block-heading {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Nagłówek: logo i nawigacja zawijają się czytelnie na telefonie */
@media (max-width: 600px) {
    header .wp-block-group.alignwide {
        justify-content: center;
        text-align: center;
    }
}