/*
Theme Name: Czerwone Flagi
Theme URI: https://czerwoneflagi.eu
Author: Przemysław Jędrzejewski
Author URI: https://czerwoneflagi.eu
Description: Lekki motyw blokowy (FSE) dla serwisu Czerwone Flagi – szkolenia i edukacja o oszustwach. Fonty hostowane lokalnie (bez Google Fonts), jeden kolor akcentu, wysoki kontrast, układ mobile-first.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: czerwone-flagi
Tags: full-site-editing, block-patterns, custom-colors, editor-style, wide-blocks, accessibility-ready, blog
*/

/* Ten plik zawiera tylko to, czego nie da się wyrazić w theme.json. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Link „Przejdź do treści” */
.cf-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--white);
	padding: .75rem 1.25rem; border-radius: 0 0 10px 0; text-decoration: none; font-weight: 600;
}
.cf-skip-link:focus { left: 0; }

/* Nagłówek */
.cf-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--paper) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.admin-bar .cf-header { top: var(--wp-admin--admin-bar--height, 32px); }
.cf-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--wp--preset--color--ink); }
.cf-logo svg { width: 34px; height: 34px; flex: none; }
.cf-logo__text { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; }
.cf-logo__text span { color: var(--wp--preset--color--red); }
.cf-logo:hover { color: var(--wp--preset--color--ink); }

/* Etykieta / „pill” */
.cf-pill {
	display: inline-block; margin: 0;
	padding: .35rem .8rem; border-radius: 999px;
	background: var(--wp--preset--color--red-tint); color: var(--wp--preset--color--red-dark);
	font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cf-pill--dark { background: rgba(255,255,255,.12); color: #fff; }

/* Karty */
.cf-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cf-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--red); }
.cf-card > :first-child { margin-top: 0; }
.cf-card > :last-child { margin-bottom: 0; }
.cf-card__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	background: var(--wp--preset--color--red); color: #fff;
	font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.15rem;
}

/* Hero – przykładowy SMS z oznaczonymi flagami */
.cf-sms { max-width: 420px; margin-inline: auto; position: relative; }
.cf-sms__bubble {
	background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px 20px 20px 6px; padding: 1.1rem 1.25rem; box-shadow: var(--wp--preset--shadow--card);
	font-size: 1rem; line-height: 1.5;
}
.cf-sms__from { font-size: .8125rem; color: var(--wp--preset--color--grey); margin: 0 0 .35rem; }
.cf-sms__text { margin: 0; }
.cf-sms__url { color: var(--wp--preset--color--red-dark); font-weight: 600; word-break: break-all; text-decoration: underline wavy; text-underline-offset: 3px; }
.cf-sms__flags { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.cf-sms__flags li { display: flex; gap: .65rem; align-items: flex-start; font-size: .9375rem; line-height: 1.4; }
.cf-sms__flags svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; }
.cf-sms__label { position: static; margin-bottom: .6rem; }

/* Ciemna sekcja CTA */
.cf-dark a:not(.wp-element-button) { color: #fff; }
.cf-dark .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; background: transparent; }
.cf-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--ink); }
.cf-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--red); }
.cf-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #E0213F; }

/* Pasek flag – dekoracja */
.cf-stripe { height: 6px; background: repeating-linear-gradient(135deg, var(--wp--preset--color--red) 0 18px, var(--wp--preset--color--ink) 18px 36px); }

/* Lista wpisów */
.cf-post-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); overflow: hidden; height: 100%; transition: border-color .18s ease, transform .18s ease; }
.cf-post-card:hover { border-color: var(--wp--preset--color--red); transform: translateY(-3px); }
.cf-post-card .wp-block-post-featured-image { margin: 0; }
.cf-post-card .wp-block-post-featured-image img { border-radius: 0; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.cf-post-card__body { padding: 1.25rem 1.5rem 1.5rem; }
.cf-post-card__body > * { margin-block: .5rem 0; }
.cf-post-card__body > :first-child { margin-top: 0; }

/* Box „Czerwona flaga” w treści wpisu */
.cf-redflag-box { border-left: 6px solid var(--wp--preset--color--red); background: var(--wp--preset--color--red-tint); padding: 1.25rem 1.5rem; border-radius: 0 var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0; }
.cf-redflag-box > :first-child { margin-top: 0; }
.cf-redflag-box > :last-child { margin-bottom: 0; }

/* Stopka */
.cf-footer a { color: inherit; text-decoration: none; }
.cf-footer a:hover { text-decoration: underline; }
.cf-footer .cf-logo { color: #fff; }
.cf-footer .cf-logo:hover { color: #fff; }
.cf-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

/* Drobiazgi */
::selection { background: var(--wp--preset--color--red); color: #fff; }
.wp-block-post-content a:not(.wp-element-button) { text-underline-offset: 3px; }
.wp-block-post-content > * + h2 { margin-top: 2.5rem; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-block-query-pagination { gap: 1rem; font-weight: 600; }
.wp-block-search__button { background: var(--wp--preset--color--red); color: #fff; border: 0; border-radius: var(--wp--custom--radius--button); }

@media (max-width: 781px) {
	.cf-header__cta { display: none; }
}

/* ===== v1.1: ożywienie ===== */

/* Hero */
.cf-hero { position: relative; overflow: hidden; }
.cf-hero::before {
	content: ""; position: absolute; right: -3%; top: -10%; width: min(34vw, 430px); aspect-ratio: 32/34; opacity: .55;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'%3E%3Cpath d='M9 4h22l-5.5 7L31 18H9z' fill='%23F6DDE1'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none; z-index: 0;
}
.cf-hero > * { position: relative; z-index: 1; }
.cf-hero__title { font-size: clamp(2.6rem, 6.4vw, 4.75rem) !important; }
.cf-mark { background: linear-gradient(transparent 60%, rgba(200,16,46,.28) 60%); color: inherit; padding: 0 .06em; }

/* Interaktywny SMS */
.cf-sms { max-width: 440px; margin-inline: auto; position: relative; padding-top: .5rem; }
.cf-sms__hint { margin: 0 0 .75rem; font-size: .9375rem; color: var(--wp--preset--color--grey); }
.cf-sms__bubble { transform: rotate(-1.2deg); }
.cf-hit {
	appearance: none; font: inherit; color: var(--wp--preset--color--red-dark); font-weight: 600;
	background: var(--wp--preset--color--red-tint); border: 0; border-radius: 6px; padding: .05em .3em; margin: 0 .05em;
	cursor: pointer; text-decoration: underline wavy; text-underline-offset: 4px; word-break: break-all; text-align: left;
	transition: background .15s ease, color .15s ease;
}
.cf-hit:hover { background: #F6CFD6; }
.cf-hit:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.cf-hit.is-found { background: var(--wp--preset--color--red); color: #fff; text-decoration: none; }
.cf-js .cf-sms__flags li { display: none; }
.cf-js .cf-sms__flags li.is-on { display: flex; animation: cf-pop .35s ease both; }
.cf-sms__done { padding: .75rem 1rem; background: var(--wp--preset--color--ink); color: #fff; border-radius: 12px; }
.cf-sms__flags li.cf-sms__done { display: none; }
.cf-js .cf-sms__flags li.cf-sms__done.is-on { display: flex; }
@keyframes cf-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Pasek z hasłami */
.cf-ticker { background: var(--wp--preset--color--ink); color: #fff; overflow: hidden; border-block: 1px solid #000; }
.cf-ticker__track { display: flex; width: max-content; animation: cf-scroll 38s linear infinite; }
.cf-ticker__list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.cf-ticker__list li {
	display: inline-flex; align-items: center; gap: .8rem; padding: .9rem 1.6rem .9rem 0; white-space: nowrap;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
}
.cf-ticker__list li::before {
	content: ""; width: 1.1em; height: 1.1em; flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 2h2v16H4z' fill='%23fff'/%3E%3Cpath d='M6 3h10l-2.5 3L16 9H6z' fill='%23FF4D63'/%3E%3C/svg%3E") no-repeat center / contain;
}
@keyframes cf-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.cf-ticker__track { animation: none; width: auto; flex-wrap: wrap; }
	.cf-ticker__list[aria-hidden="true"] { display: none; }
	.cf-ticker__list { flex-wrap: wrap; padding-inline: var(--wp--preset--spacing--40); }
}

/* Czerwony baner */
.cf-red { position: relative; overflow: hidden; }
.cf-red::after {
	content: ""; position: absolute; right: -2%; bottom: -12%; width: min(40vw, 460px); aspect-ratio: 32/34; opacity: .14; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'%3E%3Crect x='6' y='2' width='3' height='32' rx='1.5' fill='%23fff'/%3E%3Cpath d='M9 4h22l-5.5 7L31 18H9z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cf-red > * { position: relative; z-index: 1; }
.cf-red__title { line-height: 1.02; letter-spacing: -.03em; }
.cf-pill--light { background: rgba(255,255,255,.2); color: #fff; }
.cf-red .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff; color: var(--wp--preset--color--red-dark); }
.cf-red .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #fff; }

/* Ikony w kartach */
.cf-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin: 0 0 1rem;
	border-radius: 14px; background: var(--wp--preset--color--red-tint); color: var(--wp--preset--color--red-dark);
}
.cf-icon svg { width: 1.6rem; height: 1.6rem; }
.cf-icon--solid { background: var(--wp--preset--color--red); color: #fff; border-radius: 50%; }
.cf-card .cf-icon + .cf-pill { margin-top: 0; }

/* ===== Formularz kontaktowy ===== */
.cf-form-wrap { margin-block: 1.5rem; }
.cf-form { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--40); box-shadow: var(--wp--preset--shadow--card); }
.cf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .cf-form__row { grid-template-columns: 1fr; } }
.cf-form__field { margin: 0 0 1.1rem; min-width: 0; }
.cf-form label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .35rem; }
.cf-form input[type="text"], .cf-form input[type="email"], .cf-form input[type="tel"], .cf-form select, .cf-form textarea {
	box-sizing: border-box; width: 100%; max-width: 100%; font: inherit; font-size: 1rem; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--paper);
	border: 1.5px solid #CFC8BE; border-radius: 10px; padding: .75rem .9rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.cf-form textarea { resize: vertical; min-height: 9rem; }
.cf-form input:focus, .cf-form select:focus, .cf-form textarea:focus { outline: none; border-color: var(--wp--preset--color--red); box-shadow: 0 0 0 3px rgba(200,16,46,.18); }
.cf-form__consent label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .9375rem; }
.cf-form__consent input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--wp--preset--color--red); flex: none; }
.cf-form__submit { cursor: pointer; border: 0; font-family: inherit; }
.cf-form__note { margin: 0; font-size: .875rem; color: var(--wp--preset--color--grey); }
.cf-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-form__msg { display: none; padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1.25rem; }
.cf-form__ok { background: #E7F4EA; color: #14361D; border: 1px solid #A9D4B2; }
.cf-form__err { background: var(--wp--preset--color--red-tint); color: #5B0B18; border: 1px solid #F0B3BE; }
.cf-form__msg:target { display: block; }