/*
Theme Name: Cyfrowy Plakat
Theme URI: https://cyfrowyplakat.pl/
Author: Daniel Kowalski
Description: Lekki motyw blokowy dla cyfrowyplakat.pl – tylko natywne bloki Gutenberga, bez page buildera i bez zewnętrznych skryptów. Fonty hostowane lokalnie, menu z hamburgerem na telefonach i tabletach.
Version: 1.0.0
Requires at least: 6.6
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: cyfrowy-plakat
*/

/* ---------- Ogólne ---------- */
html { scroll-behavior: smooth; }
:where(h1, h2, h3, h4)[id] { scroll-margin-top: 24px; }
mark { background: #FFF3B0; color: inherit; padding: 0 3px; border-radius: 3px; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
img { height: auto; }

/* ---------- Nagłówek ---------- */
.cp-header { border-bottom: 1px solid var(--wp--preset--color--border); }
.cp-logo a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cp-logo a::before {
	content: ""; flex: none; width: 26px; height: 33px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 38'%3E%3Crect x='1.5' y='1.5' width='27' height='35' rx='3' fill='none' stroke='%23001872' stroke-width='3'/%3E%3Crect x='7' y='8' width='16' height='3' fill='%23001872'/%3E%3Crect x='7' y='15' width='12' height='2.5' fill='%23001872'/%3E%3Crect x='7' y='21' width='16' height='9' fill='%230068FF'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Menu – linki */
.cp-nav .wp-block-navigation-item__content { text-decoration: none; color: var(--wp--preset--color--contrast); }
.cp-nav .wp-block-navigation-item__content:hover,
.cp-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); }
.cp-nav .cp-external > .wp-block-navigation-item__content { color: var(--wp--preset--color--navy); }

/* Menu – rozwijane podmenu na komputerze */
.cp-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 10px; padding: 8px 0 !important; min-width: 230px !important;
	box-shadow: 0 14px 28px rgba(0, 24, 114, .10); background: #FFFFFF !important;
}
.cp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 18px !important; font-weight: 500; }

/* Menu – przycisk „Zapytaj o ofertę” */
.cp-nav .cp-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent); color: #FFFFFF !important;
	padding: 11px 20px; border-radius: 8px; font-weight: 700; min-height: 44px; box-sizing: border-box;
	display: inline-flex; align-items: center;
}
.cp-nav .cp-cta > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--navy); }

/* Hamburger także na tabletach (domyślnie WordPress pokazuje go tylko poniżej 600 px) */
@media (min-width: 600px) and (max-width: 1100px) {
	.cp-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.cp-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.cp-nav .wp-block-navigation__responsive-container-open {
	align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
	border: 1px solid #C5CDD8; border-radius: 8px; color: var(--wp--preset--color--navy);
}
.cp-nav .wp-block-navigation__responsive-container-open::after { content: "Menu"; font-weight: 700; font-size: 15px; }

/* Menu otwarte (telefon i tablet) */
.cp-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 20px 24px 40px; }
.cp-nav .is-menu-open .wp-block-navigation__responsive-container-content { gap: 0 !important; padding-top: 48px; }
.cp-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; }
.cp-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.cp-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex; width: 100%; min-height: 48px; align-items: center;
	border-bottom: 1px solid #EEF1F5; font-size: 18px; padding: 6px 0 !important;
}
.cp-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.cp-nav .is-menu-open .wp-block-navigation__container,
.cp-nav .is-menu-open .wp-block-navigation-item,
.cp-nav .is-menu-open .wp-block-navigation__submenu-container { align-items: stretch !important; }
.cp-nav .is-menu-open .wp-block-navigation-item__content { justify-content: flex-start; text-align: left; }
.cp-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; box-shadow: none; padding: 0 0 0 18px !important; min-width: 0 !important; width: 100%; box-sizing: border-box; }
.cp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 42px; }
.cp-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
.cp-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 16px; font-weight: 500; color: var(--wp--preset--color--muted); }
.cp-nav .is-menu-open .cp-cta { margin-top: 18px; }
.cp-nav .is-menu-open .cp-cta > .wp-block-navigation-item__content { justify-content: center; border-bottom: 0; color: #FFFFFF !important; font-size: 17px; }

/* ---------- Treść stron ---------- */
.wp-block-post-content .wp-block-group.has-background,
.wp-block-post-content .wp-block-column > .wp-block-group.has-background { padding: clamp(20px, 3vw, 32px); border-radius: 12px; }
.wp-block-post-content > .wp-block-group.has-background { margin-block: 32px; }
.wp-block-post-content .wp-block-cover { border-radius: 14px; overflow: hidden; }

/* Tabele */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--wp--preset--color--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-table thead th { background: var(--wp--preset--color--light); color: var(--wp--preset--color--navy); font-weight: 700; }
.wp-block-table tbody tr:nth-child(even) td { background: #FAFBFC; }
@media (max-width: 640px) { .wp-block-table table { min-width: 560px; } }

/* Pytania i odpowiedzi (blok Szczegóły) */
.wp-block-details { margin-block: 10px; }
.wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--navy); cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: 8px; }

/* Listy pytań na stronie Wiedza */
.cp-pytania li { margin-bottom: 10px; }

/* Przyklejona kolumna „Zobacz więcej pytań” */
@media (min-width: 782px) {
	.cp-sticky { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); align-self: flex-start; }
}
.cp-sticky .wp-block-details { padding: 10px 14px; }

/* Przyciski obramowane */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--accent); padding: 10px 22px; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--wp--preset--color--navy); background: transparent; }

/* ---------- Stopka ---------- */
.cp-footer a { color: #FFFFFF; text-decoration: none; }
.cp-footer a:hover { text-decoration: underline; color: #FFFFFF; }
.cp-footer ul { list-style: none; padding: 0; margin: 0; }
.cp-footer li { margin-bottom: 6px; }

/* Przyciski obramowane na ciemnym tle (np. baner na stronie głównej) */
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: #FFFFFF; }
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* ---------- Strona główna: nagłówek z przewijanymi zdjęciami ---------- */
.cp-hero { margin-block-start: 0 !important; }
.cp-hero h1 { color: #FFFFFF; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; margin: 0 0 24px; }
.cp-hero .cp-hero-kicker { margin: 0 0 18px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8FB7FF; }
.cp-hero .cp-hero-lead { margin: 0 0 32px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: #D6E2FF; max-width: 600px; }
.cp-hero .wp-block-button__link { padding: 15px 28px; }
.cp-hero .is-style-outline > .wp-block-button__link { color: #FFFFFF; border-color: #FFFFFF; }
.cp-hero .is-style-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.cp-hero .cp-hero-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; color: #D6E2FF; }
.cp-hero .cp-hero-stats strong { color: #FFFFFF; font-size: 22px; }

/* Ramka „wyświetlacza” i przewijanie zdjęć (3 zdjęcia, każde po 4 s) */
.cp-slider.wp-block-gallery {
	display: grid !important; gap: 0 !important; max-width: 300px; margin: 0 auto !important;
	background: #E9ECEF; padding: 16px; border-radius: 14px; box-sizing: border-box;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.cp-slider.wp-block-gallery > .wp-block-image { grid-area: 1 / 1; width: 100% !important; margin: 0 !important; }
.cp-slider.wp-block-gallery > .wp-block-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; }
body .cp-slider.wp-block-gallery > .wp-block-image { animation: cp-slide 12s infinite; opacity: 0; }
body .cp-slider.wp-block-gallery > .wp-block-image:nth-child(1) { animation-delay: 0s; opacity: 1; }
body .cp-slider.wp-block-gallery > .wp-block-image:nth-child(2) { animation-delay: -8s; }
body .cp-slider.wp-block-gallery > .wp-block-image:nth-child(3) { animation-delay: -4s; }
body .cp-slider.wp-block-gallery > .wp-block-image:nth-child(n+4) { display: none; }
body .cp-slider.wp-block-gallery:hover > .wp-block-image { animation-play-state: paused; }
@keyframes cp-slide { 0% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	body .cp-slider.wp-block-gallery > .wp-block-image { animation: none; }
	body .cp-slider.wp-block-gallery > .wp-block-image:nth-child(n+2) { opacity: 0; }
}
@media (max-width: 781px) { .cp-hero .wp-block-columns { gap: 40px; } }

/* W edytorze zdjęcia nagłówka stoją obok siebie (bez przewijania), żeby łatwo je podmienić */
.editor-styles-wrapper .cp-slider.wp-block-gallery { display: flex !important; flex-wrap: wrap; gap: 8px !important; max-width: none; }
.editor-styles-wrapper .cp-slider.wp-block-gallery > .wp-block-image { grid-area: auto; width: calc(33.33% - 6px) !important; animation: none !important; opacity: 1 !important; display: block !important; }

/* Kropki pod zdjęciami nagłówka – zmieniają się razem ze zdjęciami */
body .cp-slider.wp-block-gallery { position: relative; margin-bottom: 44px !important; }
body .cp-slider.wp-block-gallery::after {
	content: ""; position: absolute; bottom: -30px; left: calc(50% - 25px);
	width: 10px; height: 10px; border-radius: 50%;
	animation: cp-dots 12s infinite steps(1, end);
	background: #FFFFFF; box-shadow: 20px 0 rgba(255, 255, 255, .35), 40px 0 rgba(255, 255, 255, .35);
}
body .cp-slider.wp-block-gallery:hover::after { animation-play-state: paused; }
@keyframes cp-dots {
	0% { background: #FFFFFF; box-shadow: 20px 0 rgba(255, 255, 255, .35), 40px 0 rgba(255, 255, 255, .35); }
	33.33% { background: rgba(255, 255, 255, .35); box-shadow: 20px 0 #FFFFFF, 40px 0 rgba(255, 255, 255, .35); }
	66.66% { background: rgba(255, 255, 255, .35); box-shadow: 20px 0 rgba(255, 255, 255, .35), 40px 0 #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) { body .cp-slider.wp-block-gallery::after { animation: none; } }
.editor-styles-wrapper .cp-slider.wp-block-gallery::after { display: none; }

/* Nagłówek strony głównej – pas na całą szerokość, bez zaokrągleń i bez odstępu pod menu */
.wp-site-blocks > main:has(.cp-hero) { margin-block-start: 0; }
.wp-block-post-content > .cp-hero.wp-block-group.has-background { border-radius: 0; margin-block: 0 32px; }