/* ==========================================================================
/faq — style WYŁĄCZNIE dla tego widoku.
Wszystkie reguły są zaczepione o `.faq-page` (klasa na tej strony),
żeby nic stąd nie wyciekło do innych stron korzystających z tych samych
klas guide-pages.css (m.in. jak-dziala-dostep.ejs, jak-dziala-dostep-zespolowy.ejs,
dla-zespolow.ejs, dla-rekruterow.ejs, dla-kandydatow.ejs, o-nas.ejs, przewodnik.ejs).
guide-pages.css NIE jest tu modyfikowany.
========================================================================== */
/* --- Hero: bazowe .guide-hero ma padding 0.3125rem (5px). Na innych stronach
hero zawiera dodatkowo CTA, więc różnica jest niezauważalna - tutaj hero
ma tylko h1+p i podtytuł dotykał dolnej krawędzi bloku. --- */
.faq-page .guide-hero {
padding: 2.5rem 1.75rem;
}
@media (max-width: 576px) {
.faq-page .guide-hero {
padding: 1.75rem 1.25rem;
}
}
/* --- Pytania jako ... . h3 jest teraz PRZODKIEM przycisku,
nie jego dzieckiem, więc współdzielona reguła `.faq-accordion-header h3`
z guide-pages.css już go nie dotyczy - własny reset i stylowanie poniżej. --- */
.faq-page .faq-accordion-item > h3 {
margin: 0;
}
.faq-page .faq-accordion-header {
/* Reset domyślnego wyglądu (obramowanie, tło, czcionka) -
layout (flex/padding/gap/cursor) zostaje z guide-pages.css bez zmian. */
background: none;
border: none;
width: 100%;
margin: 0;
font: inherit;
color: inherit;
text-align: left;
appearance: none;
-webkit-appearance: none;
}
.faq-page .faq-accordion-header:focus-visible {
outline: 2px solid #0B4A73;
outline-offset: -2px;
border-radius: 8px;
}
.faq-page .faq-accordion-header .faq-question-text {
/* Odtwarza wygląd, jaki wcześniej dawała reguła `.faq-accordion-header h3`. */
color: #003153;
font-size: 17px;
font-weight: 600;
flex: 1;
line-height: 1.4;
}
/* --- Link "skopiuj odnośnik" pod każdą otwartą odpowiedzią. --- */
.faq-permalink {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.875rem;
padding: 0;
background: none;
border: none;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #0B4A73;
cursor: pointer;
}
.faq-permalink:hover {
text-decoration: underline;
}
.faq-permalink.is-copied {
/* #15803d zamiast jaśniejszej zieleni - 5.02:1 na białym tle (WCAG AA dla
tekstu 13px wymaga >=4.5:1; #1f9d55 dawało tylko 3.49:1). */
color: #15803d;
}
.faq-permalink:focus-visible {
outline: 2px solid #0B4A73;
outline-offset: 2px;
border-radius: 4px;
}
/* --- Pasek narzędzi: wyszukiwarka + skróty do kategorii. --- */
.faq-toolbar {
background: white;
border-radius: 12px;
padding: 1.375rem 1.5rem;
margin-bottom: 1.875rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.faq-search {
position: relative;
margin-bottom: 1.125rem;
}
.faq-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #7a8a99;
pointer-events: none;
}
.faq-search-input {
width: 100%;
box-sizing: border-box;
padding: 0.75rem 2.75rem;
border: 2px solid #e3f2fd;
border-radius: 8px;
font-size: 15px;
font-family: inherit;
color: #213445;
background: #fff;
transition: border-color 0.2s ease;
}
.faq-search-input::placeholder {
/* #5a6a78 zamiast jaśniejszego szarego - 5.57:1 na białym tle (poprzednia
wartość #93a2b0 dawała tylko 2.61:1, poniżej progu WCAG AA 4.5:1). */
color: #5a6a78;
}
.faq-search-input:focus {
outline: none;
border-color: #0B4A73;
}
.faq-search-clear {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 6px;
color: #7a8a99;
cursor: pointer;
}
.faq-search-clear:hover {
background: #f0f4f8;
color: #003153;
}
.faq-search-clear:focus-visible {
outline: 2px solid #0B4A73;
outline-offset: 1px;
}
.faq-search-input:not(:placeholder-shown) ~ .faq-search-clear {
display: flex;
}
.faq-toc {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.faq-toc-link {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: #f4f9fd;
border: 1px solid #cde0f0;
color: #0B4A73;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.faq-toc-link:hover {
background: #e3f2fd;
border-color: #0B4A73;
}
.faq-toc-link:focus-visible {
outline: 2px solid #0B4A73;
outline-offset: 2px;
}
.faq-toc-link.is-empty {
opacity: 0.45;
pointer-events: none;
}
.faq-toc-count {
margin-left: 0.4em;
opacity: 0.65;
font-weight: 500;
}
/* --- Komunikat "brak wyników" pod wyszukiwarką. --- */
.faq-no-results {
display: none;
text-align: center;
padding: 2.5rem 1.5rem;
color: #55606b;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 1.875rem;
}
.faq-no-results.is-visible {
display: block;
}
.faq-no-results strong {
display: block;
color: #003153;
font-size: 18px;
margin-bottom: 0.4rem;
}
.faq-no-results a {
color: #0B4A73;
text-decoration: underline;
}
/* --- Kotwice sekcji: offset pod ewentualny sticky header + skok TOC. --- */
.faq-page .guide-section {
scroll-margin-top: 90px;
}
.faq-page .faq-accordion-item {
scroll-margin-top: 90px;
}
@media (max-width: 576px) {
.faq-toolbar {
padding: 1.125rem 1.125rem;
}
.faq-toc-link {
font-size: 13px;
padding: 0.35rem 0.75rem;
}
}