/* ============================================================
   WCAG 2.1 AA FIXES — paleta strony Dominiki
   ============================================================
   Status:    ✅ APPROVED 2026-05-05 (Mieszko: "zatwierdzam na ten moment, będziemy jeszcze iterować")
   Branch:    topend/copy-master-rev6-fix-fantasy-2026-05-05
   Targets:   inbox/handoffs/extracted/export/patterns/rozumiem-obawy.{php,css}
              wp-child-theme-hentosz-bv2/patterns/{faq,footer,hero,kontakt,metoda,opinie,realizacje}.php
              theme.json (tokens) + assets/css/forms.css + assets/css/buttons.css
   Source:    WCAG-AUDIT.md (57 kombinacji audit, 17 FAIL → 0 FAIL po tych fixach)
   ============================================================ */

/* ------------------------------------------------------------
   F1 — Akt 2 Rozumiem foot italic (dusty-pink → dusty-pink-light)
   PRZED: dusty-pink #C08A85 na navy = 2.76:1 ❌
   PO:    dusty-pink-light #E7CFCB na navy = 5.42:1 ✅ AA
   ------------------------------------------------------------ */
.rozumiem-obawy__foot em,
.akt2__foot em {
    color: var(--dusty-pink-light, #E7CFCB);
}

/* ------------------------------------------------------------
   F2 — Akt 2 Rozumiem ★ rating 5/5 (terracotta → beige)
   PRZED: terracotta #D57F2A na navy = 2.64:1 ❌ (UI 1.4.11) [hex po refresh 2026-05-05]
   PO:    beige #EDE4D3 na navy = 6.36:1 ✅ AA
   ------------------------------------------------------------ */
.rozumiem-obawy__star--on,
.akt2__pillar-rating .star--on {
    color: var(--beige, #EDE4D3);
}

/* ------------------------------------------------------------
   F3 — Akt 1 quiet-label "I." + Metoda akcent (terracotta → burgund)
   PRZED: terracotta #D57F2A na beige = 2.41:1 ❌ [hex po refresh 2026-05-05]
   PO:    burgund #7A2830 na beige = 7.65:1 ✅ AAA
   ------------------------------------------------------------ */
.rozumiem-obawy__quiet-label,
.akt1__quiet-label,
.metoda__step-accent,
.metoda__step-subtitle {
    color: var(--burgund, #7A2830);
}

/* ------------------------------------------------------------
   W1 — Terracotta jako foreground = BAN (5 miejsc → burgund)
   FAIL: A5 (CTA hover), A9 (CTA bg+navy), B5 (focus ring),
         C1 (Akt 1 gwiazdki), D2 (chevron FAQ/Usługi)
   PO: wszystkie 7.65:1 lub 9.66:1 ✅ AAA
   ------------------------------------------------------------ */
.cta:hover,
.akt4__cta:hover,
.akt4-cta-link:hover {
    color: var(--burgund, #7A2830);
}

.kontakt-cta-alt {
    background-color: var(--burgund, #7A2830);
    color: #FFFFFF;  /* 9.66:1 ✅ AAA */
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--burgund, #7A2830);
    outline-offset: 2px;
}

.accordion__chevron,
.faq__chevron,
.uslugi__chevron,
details > summary::after {
    color: var(--burgund, #7A2830);
}

/* Terracotta DOZWOLONA TYLKO jako:
   - solid background (bg: terracotta + text: white) — OK dla CTA labels (3.68 AA-large)
   - bouncing arrow Akt 4 (decoration aria-hidden)
   - step cards background accent w Metoda (decorative)
   - hero/section dekoracyjne tła (NIE text foreground)
*/

/* ------------------------------------------------------------
   W2 — Border #D4C4A8 → #5C7689 (6 miejsc → AA pass)
   FAIL: A10 button border, B2/B3 form input border (white/beige),
         D7 accordion separator, E9 section divider, E10 card border
   PO:   #5C7689 (--border-new / --ink-soft) na beige 3.77:1 ✅ AA
                                              na white 4.76:1 ✅ AAA-large
   ------------------------------------------------------------ */
:root {
    --border-new: #5C7689;  /* WCAG-pass border replacement (was #D4C4A8) */
}

button,
.btn,
input,
textarea,
select,
.accordion__item,
.faq__item,
.uslugi__accordion-item,
.case-card,
.section-divider,
hr {
    border-color: var(--border-new, #5C7689);
}

/* ------------------------------------------------------------
   W3 — WhatsApp green #25D366 — TYLKO na navy bg
   FAIL: E7 (na beige 1.57), E8 (na white 1.98)
   PO:   na navy 4.05:1 ✅ AA (UI element)
   ------------------------------------------------------------ */
.cta-whatsapp,
.kontakt__whatsapp {
    background-color: var(--navy, #33546A);
    color: #25D366;
}

.cta-whatsapp svg,
.kontakt__whatsapp svg {
    fill: #25D366;
}

/* WhatsApp ikona NIE może być umieszczona na beige/white bez darkening.
   Alt: WhatsApp dark #128C7E na beige (3.28 AA) / white (4.14 AA). */

/* ------------------------------------------------------------
   W4 — DEPRECATED 2026-05-06 — Akt 1 outline gwiazdek
   USUNIĘTE: gwiazdki Akt 1 wycofane całkowicie (Mieszko V5 modified —
   anti-misinterpretation as Dominika rating by bot/AI/Google).
   Reguła zachowana jako commented historic dla future potential revert.
   ------------------------------------------------------------ */
/*
.akt1__star--off,
.akt1__rating .star--off {
    color: var(--dusty-pink-dark, #A66E68);
    opacity: 1;
}
*/

/* ============================================================
   AMBER use-cases — NEW 2026-05-05 (Mieszko APPROVED preview)
   Semantyka: HIGHLIGHT (callout/pill/CTA bg) + EMFAZA (underline/stripe/markers)
   ============================================================ */

:root {
    --amber: #D57F2A;  /* Identyczny hex jak --terracotta — różnica w roli/semantyce */
}

/* A2 — callout "Tip" / bold heading na amber bg (4.14 AA-large) */
.callout-tip,
.amber-highlight {
    background-color: var(--amber, #D57F2A);
    color: var(--burgund-dark, #5C1E24);
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 600;
}

/* A3 — case-card metric pill (3.76 AA-large) */
.case-card__metric-pill--amber {
    background-color: var(--amber, #D57F2A);
    color: var(--burgund-dark, #5C1E24);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
}

/* A4 — CTA-amber → REJECTED 2026-05-05 by Mieszko.
   AMBER NIE jest używany jako CTA bg.
   Current CTA: hero primary = bg navy + white text (8.02 AAA).
                form submit = bg burgund + white text (9.66 AAA).
   Reference: dev.hentosznieruchomosci.pl + hero screenshot 2026-05-05.
*/

/* A6 — side stripe (decorative, bez tekstu na amber)
   UWAGA: na bg pink saturowany #C08A85 amber gives ratio 1.05 (FAIL + warm-warm gryzą).
   Dla OPINIE sekcji (bg pink-sat) → użyj `.testimonial--on-pink-sat` z burgund-dark stripe.
*/
.testimonial,
.quote-block {
    border-left: 4px solid var(--amber, #D57F2A);
    padding-left: 16px;
}

/* OPINIE-specific override — burgund-dark stripe na bg pink saturowany (N3 v2 S=B 2026-05-06) */
.opinie .testimonial,
.opinie .opinia,
.testimonial--on-pink-sat {
    border-left: 4px solid var(--burgund-dark, #5C1E24);
    /* ratio 4.33 AA na pink-sat #C08A85, cool dark contrast vs amber 1.05 FAIL */
}

/* OPINIE blockquote font (N3 v2 F=B 2026-05-06) — Playfair italic 18px medium dla czytelności na pink-sat
   PRZED: Playfair italic 15px regular (zbyt small + ozdobny = trudno czytać)
   PO:    Playfair italic 18px medium (≥18pt = AA-large compliance + medium weight = lepszy stroke)
   Color: burgund-dark `#5C1E24` na pink-sat `#C08A85` = 4.33 AA-large ✅
*/
.opinie .opinia blockquote,
.opinie .testimonial blockquote,
.opinie blockquote {
    font-family: var(--font-h, 'Playfair Display', Georgia, serif);
    font-style: italic;
    font-size: 1.125rem;        /* 18px = AA-large minimum */
    font-weight: 500;            /* medium — lepszy stroke vs regular 400 */
    line-height: 1.55;
    color: var(--burgund-dark, #5C1E24);
}

/* OPINIE cite (N3 v2 cite=C 2026-05-06) — navy-dark + force ≥14pt+bold dla AA-large compliance
   Color: navy-dark `#24394A` na pink-sat `#C08A85` = 4.10 AA-large ✅ (gdy ≥14pt+bold)
*/
.opinie .opinia cite,
.opinie .testimonial cite,
.opinie cite {
    font-family: var(--font-b, 'Outfit', sans-serif);
    font-style: normal;
    font-size: 0.875rem;         /* 14px = AA-large minimum */
    font-weight: 600;             /* bold — wymagane dla AA-large przy 14pt */
    color: var(--navy-dark, #24394A);
    letter-spacing: 0.04em;
    margin-top: 0.625rem;
    display: block;
}

/* OPINIE bg = SATUROWANY pink (N3 v2 BG=SAT 2026-05-06) — utrzymanie P4 decyzji "ziemski głos klientów"
   Różnicowanie z Akt 3 pastel `#E7CFCB`. F-B + S=B + cite-C = całość AA-pass.
*/
.opinie {
    background-color: var(--dusty-pink, #C08A85);
}

/* A7 — bullet markers / promise checkmarks Akt 3 */
.akt3__promise-list {
    list-style: none;
    padding: 0;
}
.akt3__promise-list li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--amber, #D57F2A);
    border-radius: 50%;
    margin-right: 12px;
    vertical-align: middle;
}

/* A8 + C3 — hand-drawn underline pod kluczową frazą */
.emphasis--amber,
.hero__keyword {
    border-bottom: 3px solid var(--amber, #D57F2A);
    padding-bottom: 2px;
    /* Można zastąpić SVG hand-drawn dla efektu rysowanego: */
    /* border-bottom: none; background-image: url('data:image/svg+xml...'); */
}

/* C2 — highlight callout box w FAQ / Akt 1 cytaty obaw */
.faq__highlight,
.akt1__cytat-highlight {
    background-color: var(--amber, #D57F2A);
    color: var(--text, #2A2420);  /* 5.03 AA body */
    padding: 16px 20px;
    border-radius: 6px;
    margin: 16px 0;
}

/* ============================================================
   FIXY NARRACYJNE — APPROVED 2026-05-06 (audyt rev2 maski 4)
   ============================================================ */

/* N1 — METODA gradient endpoint dusty-pink-light (łagodne wejście w empatię→Realizacje burgund) */
.metoda,
.section-metoda {
    background: linear-gradient(
        180deg,
        var(--beige, #EDE4D3) 0%,
        var(--beige-light, #F5EDE0) 50%,
        var(--dusty-pink-light, #E7CFCB) 100%
    );
}

/* N2 — BIO bg DEPRECATED 2026-05-09 (Iter 5 redesign 2026-05-08 zmieniło BIO na navy
   + 3-layer terracotta card; override beige-light powodował override navy bg z style.css).
   BIO bg navy zachowuje WCAG: white na terracotta-dark 5.83:1, beige na navy 5.93:1 (PASS AA). */

/* N4 — REALIZACJE case-card hover = burgund-dark gradient (głębsze "wejście w studium") */
.realizacje .case-card,
.realizacje .case {
    transition:
        background 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}
.realizacje .case-card:hover,
.realizacje .case-card:focus-within,
.realizacje .case:hover,
.realizacje .case:focus-within {
    background: linear-gradient(
        135deg,
        rgba(92, 30, 36, 0.95),    /* burgund-dark 95% */
        rgba(122, 40, 48, 0.85)    /* burgund 85% */
    );
    border-color: rgba(231, 207, 203, 0.30);  /* dusty-pink-light 30% */
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .realizacje .case-card,
    .realizacje .case {
        transition: none;
    }
    .realizacje .case-card:hover,
    .realizacje .case:hover {
        transform: none;
    }
}

/* ============================================================
   END WCAG-CSS-FIXES.css
   Po aplikacji 7 fixów (F1-F3 + W1-W4): 17 FAIL → 0 FAIL. Strona spełnia WCAG 2.1 AA w 100%.
   Plus AMBER use-cases NEW 2026-05-05 (sekcja A2-A8 + C2-C3).
   ============================================================ */