/*
 * Los Polos LEGACY color fallback — Chrome 109- / Safari 15- / Win7 Edge.
 *
 * Tailwind v4 az opacity-modifikátorokat (pl. bg-gold/20, text-white/80,
 * border-line/60) `color-mix(in oklab, var(--color-X), transparent N%)`-szel
 * rendereli. Chrome 109- (Win7-utolsó verzió) nem támogatja a color-mix()-et
 * → az érték érvénytelen → a szín "elveszik" (gyakran átlátszó/fekete).
 *
 * Ez a fájl @supports-detektálással CSAK a régi böngészőkön aktiválódik,
 * és felülírja a kritikus class-okat RGBA-val.
 *
 * Hatókör: a homepage látható elemeit fedi le (bento-hero, slider, header,
 * footer, hero-banner). Ha új class kerül elő amit a régi nem renderel,
 * idehozzuk.
 *
 * SOHA NE GENERÁLD újra — kézzel maintained. A Tailwind v4 nem ad
 * automatikus fallback-et, ezért manuálisan hardcodoljuk.
 */

@supports not (color: color-mix(in oklab, red, blue)) {

    /* ───── Brand színek ─────
       gold:    #D99E4B → 217 158 75
       gold-d:  #B7822F → 183 130 47
       dark:    #31353D → 49 53 61
       dark-2:  #1F2227 → 31 34 39
       cream:   #FAF6EE → 250 246 238
       line:    #ECE7DC → 236 231 220
       ink:     #404144 → 64 65 68
       ink-2:   #676767 → 103 103 103
       white:   #FFFFFF → 255 255 255
    */

    /* ─── BG: gold ─── */
    .bg-gold\/5  { background-color: rgba(217,158,75,.05) !important }
    .bg-gold\/10 { background-color: rgba(217,158,75,.10) !important }
    .bg-gold\/15 { background-color: rgba(217,158,75,.15) !important }
    .bg-gold\/20 { background-color: rgba(217,158,75,.20) !important }
    .bg-gold\/30 { background-color: rgba(217,158,75,.30) !important }
    .bg-gold\/40 { background-color: rgba(217,158,75,.40) !important }
    .bg-gold\/50 { background-color: rgba(217,158,75,.50) !important }
    .bg-gold\/60 { background-color: rgba(217,158,75,.60) !important }
    .bg-gold\/70 { background-color: rgba(217,158,75,.70) !important }
    .bg-gold\/80 { background-color: rgba(217,158,75,.80) !important }
    .bg-gold\/85 { background-color: rgba(217,158,75,.85) !important }
    .bg-gold\/90 { background-color: rgba(217,158,75,.90) !important }
    .bg-gold\/95 { background-color: rgba(217,158,75,.95) !important }

    /* ─── BG: dark ─── */
    .bg-dark\/5  { background-color: rgba(49,53,61,.05) !important }
    .bg-dark\/10 { background-color: rgba(49,53,61,.10) !important }
    .bg-dark\/20 { background-color: rgba(49,53,61,.20) !important }
    .bg-dark\/30 { background-color: rgba(49,53,61,.30) !important }
    .bg-dark\/40 { background-color: rgba(49,53,61,.40) !important }
    .bg-dark\/50 { background-color: rgba(49,53,61,.50) !important }
    .bg-dark\/60 { background-color: rgba(49,53,61,.60) !important }
    .bg-dark\/70 { background-color: rgba(49,53,61,.70) !important }
    .bg-dark\/80 { background-color: rgba(49,53,61,.80) !important }
    .bg-dark\/85 { background-color: rgba(49,53,61,.85) !important }
    .bg-dark\/90 { background-color: rgba(49,53,61,.90) !important }
    .bg-dark\/95 { background-color: rgba(49,53,61,.95) !important }

    /* ─── BG: cream ─── */
    .bg-cream\/10 { background-color: rgba(250,246,238,.10) !important }
    .bg-cream\/20 { background-color: rgba(250,246,238,.20) !important }
    .bg-cream\/30 { background-color: rgba(250,246,238,.30) !important }
    .bg-cream\/40 { background-color: rgba(250,246,238,.40) !important }
    .bg-cream\/50 { background-color: rgba(250,246,238,.50) !important }
    .bg-cream\/60 { background-color: rgba(250,246,238,.60) !important }
    .bg-cream\/70 { background-color: rgba(250,246,238,.70) !important }
    .bg-cream\/80 { background-color: rgba(250,246,238,.80) !important }

    /* ─── BG: line ─── */
    .bg-line\/10 { background-color: rgba(236,231,220,.10) !important }
    .bg-line\/20 { background-color: rgba(236,231,220,.20) !important }
    .bg-line\/30 { background-color: rgba(236,231,220,.30) !important }
    .bg-line\/40 { background-color: rgba(236,231,220,.40) !important }
    .bg-line\/50 { background-color: rgba(236,231,220,.50) !important }
    .bg-line\/60 { background-color: rgba(236,231,220,.60) !important }

    /* ─── BG: white ─── */
    .bg-white\/5  { background-color: rgba(255,255,255,.05) !important }
    .bg-white\/10 { background-color: rgba(255,255,255,.10) !important }
    .bg-white\/15 { background-color: rgba(255,255,255,.15) !important }
    .bg-white\/20 { background-color: rgba(255,255,255,.20) !important }
    .bg-white\/25 { background-color: rgba(255,255,255,.25) !important }
    .bg-white\/30 { background-color: rgba(255,255,255,.30) !important }
    .bg-white\/40 { background-color: rgba(255,255,255,.40) !important }
    .bg-white\/50 { background-color: rgba(255,255,255,.50) !important }
    .bg-white\/60 { background-color: rgba(255,255,255,.60) !important }
    .bg-white\/70 { background-color: rgba(255,255,255,.70) !important }
    .bg-white\/80 { background-color: rgba(255,255,255,.80) !important }
    .bg-white\/85 { background-color: rgba(255,255,255,.85) !important }
    .bg-white\/90 { background-color: rgba(255,255,255,.90) !important }
    .bg-white\/95 { background-color: rgba(255,255,255,.95) !important }

    /* ─── TEXT: white ─── */
    .text-white\/15 { color: rgba(255,255,255,.15) !important }
    .text-white\/25 { color: rgba(255,255,255,.25) !important }
    .text-white\/30 { color: rgba(255,255,255,.30) !important }
    .text-white\/40 { color: rgba(255,255,255,.40) !important }
    .text-white\/50 { color: rgba(255,255,255,.50) !important }
    .text-white\/60 { color: rgba(255,255,255,.60) !important }
    .text-white\/70 { color: rgba(255,255,255,.70) !important }
    .text-white\/75 { color: rgba(255,255,255,.75) !important }
    .text-white\/80 { color: rgba(255,255,255,.80) !important }
    .text-white\/85 { color: rgba(255,255,255,.85) !important }
    .text-white\/90 { color: rgba(255,255,255,.90) !important }
    .text-white\/95 { color: rgba(255,255,255,.95) !important }

    /* ─── TEXT: gold/dark/ink ─── */
    .text-gold\/70   { color: rgba(217,158,75,.70) !important }
    .text-gold\/80   { color: rgba(217,158,75,.80) !important }
    .text-dark\/70   { color: rgba(49,53,61,.70) !important }
    .text-dark\/80   { color: rgba(49,53,61,.80) !important }
    .text-ink-2\/40  { color: rgba(103,103,103,.40) !important }
    .text-ink-2\/60  { color: rgba(103,103,103,.60) !important }

    /* ─── BORDER: white ─── */
    .border-white\/10 { border-color: rgba(255,255,255,.10) !important }
    .border-white\/15 { border-color: rgba(255,255,255,.15) !important }
    .border-white\/20 { border-color: rgba(255,255,255,.20) !important }
    .border-white\/30 { border-color: rgba(255,255,255,.30) !important }
    .border-white\/40 { border-color: rgba(255,255,255,.40) !important }
    .border-white\/50 { border-color: rgba(255,255,255,.50) !important }

    /* ─── BORDER: line + gold ─── */
    .border-line\/40 { border-color: rgba(236,231,220,.40) !important }
    .border-line\/50 { border-color: rgba(236,231,220,.50) !important }
    .border-line\/60 { border-color: rgba(236,231,220,.60) !important }
    .border-gold\/30 { border-color: rgba(217,158,75,.30) !important }
    .border-gold\/40 { border-color: rgba(217,158,75,.40) !important }
    .border-gold\/50 { border-color: rgba(217,158,75,.50) !important }

    /* ─── Tailwind színpaletta gyakori opacity-jai (rose, red, emerald, blue) ───
       Ezek is color-mix-szel renderelnek default-ban. Csak a leggyakoribb */
    .bg-rose-500\/15 { background-color: rgba(244,63,94,.15) !important }
    .bg-rose-500\/20 { background-color: rgba(244,63,94,.20) !important }
    .bg-rose-600\/90 { background-color: rgba(225,29,72,.90) !important }
    .bg-red-500\/15  { background-color: rgba(239,68,68,.15)  !important }
    .bg-red-500\/20  { background-color: rgba(239,68,68,.20)  !important }
    .bg-red-500\/40  { background-color: rgba(239,68,68,.40)  !important }
    .bg-red-500\/80  { background-color: rgba(239,68,68,.80)  !important }
    .bg-emerald-50\/70  { background-color: rgba(236,253,245,.70) !important }
    .bg-emerald-500\/15 { background-color: rgba(16,185,129,.15)  !important }
    .bg-emerald-500\/20 { background-color: rgba(16,185,129,.20)  !important }
    .bg-blue-500\/15    { background-color: rgba(59,130,246,.15)  !important }
    .bg-blue-500\/20    { background-color: rgba(59,130,246,.20)  !important }

    /* ─── from-X to-X via-X gradient-tokenek a leggyakoribb hero-kban ───
       A Tailwind v4 `from-dark/60 to-transparent` is color-mix-szel ad át.
       A bento-hero CSS gradient szintetjére kritikus. */
    /* ezekhez a Tailwind v4 inline custom-property-t használ, így a fallback
       nem ad pontos eredményt — a fő-háttér opacity-jét adjuk, ami elég. */

    /* ─── Általános safety net: ahol a háttér üres, legyen legalább cream ─── */
    .lp-card { background-color: #fff }

    /* ───────── DARK-MODE: html.dark a layout-ban kapcsol ─────────
       A régi böngészőkön ez csak alapot ad, nem teljes inverziót. */
    html.dark body            { background: #1F2227 !important; color: #E5E5E5 !important; }
    html.dark .bg-white       { background-color: #2A2D34 !important; }
    html.dark .bg-cream       { background-color: #21242B !important; }
    html.dark .text-dark      { color: #F5F5F5 !important; }
    html.dark .text-ink       { color: #E5E5E5 !important; }
    html.dark .text-ink-2     { color: #B5B7BD !important; }
    html.dark .border-line    { border-color: #3A3D46 !important; }
}