/* =============================================================================
 *  Project:   Ciepły Dom Lublin
 *  Location:  /assets/css/app.css
 *  File:      app.css
 *  Function:  Theme layer over Bootstrap: brand palette, WCAG 2.2 focus,
 *             app-like PWA bits (safe-area, sticky CTA), components
 *             (proof, subsidy tiers, gallery, FAQ, breadcrumbs).
 *  Version:   3.0.0   Build: 2026.07.21.1351
 *  Changelog: 3.0.0 2026-07-21 Static extraction of global.css.php (SW cache)
 * ========================================================================== */

:root {
  --brand:  #c2410c;
  --brand2: #9a3412;
  --accent: #0f766e;
  --ink:    #1c1917;
  --muted:  #57534e;
  --bg:     #fafaf9;
  --radius: 6px;
}

body   { color: var(--ink); background: var(--bg); }
a      { color: var(--brand); }
.text-brand  { color: var(--brand) !important; }
.text-accent { color: var(--accent) !important; }
.text-ink    { color: var(--ink) !important; }

/* WCAG 2.2 — visible focus (SC 2.4.11) + ≥24px targets via Bootstrap sizes */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.skip-link:focus {
  position: fixed; top: 0; left: 0; z-index: 9999;
  padding: 8px 16px; background: var(--brand); color: #fff;
  font-weight: 600; text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Bootstrap overrides */
.btn-primary         { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover,
.btn-primary:focus   { background: var(--brand2); border-color: var(--brand2); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-accent          { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover    { background: #0d5d56; border-color: #0d5d56; color: #fff; }
.rounded-4           { border-radius: var(--radius) !important; }
.shadow-soft         { box-shadow: 0 10px 25px rgba(28,25,23,.08); }
.card                { border-radius: var(--radius); border: 1px solid rgba(28,25,23,.08); }
.form-control, .form-select { border-radius: var(--radius); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(194,65,12,.15);
}

/* Layout */
.section     { padding: 48px 0; }
.small-muted { color: var(--muted); font-size: .95rem; }
.hero {
  background:
    radial-gradient(900px 300px at 10% 10%, rgba(194,65,12,.10), transparent 60%),
    radial-gradient(700px 260px at 90% 20%, rgba(15,118,110,.08), transparent 60%),
    linear-gradient(180deg, #fff, #fdf6f2);
  border-bottom: 1px solid rgba(28,25,23,.08);
}

/* Badges / pills */
.badge-soft   { background: rgba(194,65,12,.08); color: var(--brand2); border: 1px solid rgba(194,65,12,.18); }
.badge-accent { background: rgba(15,118,110,.10); color: #0d5d56; border: 1px solid rgba(15,118,110,.25); }
.icon-pill {
  width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(194,65,12,.08); border: 1px solid rgba(194,65,12,.18);
  border-radius: var(--radius); color: var(--brand); font-size: 1.2rem;
}
.icon-pill-accent { background: rgba(15,118,110,.10); border-color: rgba(15,118,110,.25); color: var(--accent); }

/* Breadcrumbs */
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
.breadcrumb-item.active { color: var(--ink); font-weight: 500; }

/* Social proof */
.social-proof .proof-item { background: #fff; border: 1px solid rgba(28,25,23,.08); border-radius: var(--radius); height: 100%; }
.proof-icon  { font-size: 1.6rem; color: var(--brand); display: block; margin-bottom: 6px; }
.proof-value { font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.proof-label { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.proof-compact .proof-value { font-size: 1.4rem; }
.proof-compact .proof-item  { padding: .75rem !important; }

/* Subsidy banner + tiers */
.dotacja-banner { background: linear-gradient(135deg, rgba(15,118,110,.08), rgba(15,118,110,.03)); border: 1px solid rgba(15,118,110,.25); }
.dotacja-tier { border: 1px solid rgba(28,25,23,.10); border-radius: var(--radius); background: #fff; height: 100%; }
.dotacja-tier.featured { border: 2px solid var(--accent); position: relative; }
.dotacja-tier .tier-kwota { font-size: 2rem; font-weight: 700; color: var(--accent); }

/* Header nav */
#site-header .nav-link { color: var(--ink); font-size: .95rem; }
#site-header .nav-link:hover { color: var(--brand); }
#site-header .nav-link[aria-current="page"] { color: var(--brand); font-weight: 600; }
#site-header .dropdown-menu { border-radius: var(--radius); border-color: rgba(28,25,23,.1); }
#site-header .dropdown-item:hover { background: rgba(194,65,12,.06); color: var(--brand2); }

/* Gallery */
.gallery-item { transition: transform .15s ease; display: block; }
.gallery-item:hover { transform: translateY(-3px); }
.gallery-item img {
  aspect-ratio: 4/3; width: 100%; object-fit: cover;
  border-radius: var(--radius); border: 1px solid rgba(28,25,23,.10);
}
.gallery-caption { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.filter-btn { border-radius: 50rem !important; }
.filter-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* FAQ */
.faq details { background: #fff; border: 1px solid rgba(28,25,23,.08); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq summary::marker { color: var(--brand); }

/* App-like: sticky bottom CTA + safe areas (PWA) */
@media (max-width: 767px) {
  .mobile-cta-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
    background: #fff; border-top: 1px solid rgba(28,25,23,.12);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    display: flex; gap: 8px; box-shadow: 0 -4px 12px rgba(28,25,23,.08);
  }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { .mobile-cta-bar { display: none; } }

/* Dashboard */
.dashboard-body    { background: #f5f5f4; }
#dashboard-wrapper { min-height: 100vh; }
#dashboard-sidebar { min-width: 240px; max-width: 240px; }
#dashboard-sidebar .nav-link { color: rgba(255,255,255,.8); padding: 6px 12px; border-radius: var(--radius); }
#dashboard-sidebar .nav-link:hover,
#dashboard-sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }