/*
 * 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 }

    /* ════════════════════════════════════════════════════════════════════
       BRAND PLAIN COLORS (opacity-modifier NÉLKÜL)
       Tailwind v4 a `text-dark` utility-t is `color-mix(in oklab,
       var(--color-dark) 100%, transparent)`-ként generálja (egyforma
       szintaxis az opacity-modifier-rel). Chrome 109- ezt nem érti →
       a teljes szöveg láthatatlanná válik LIGHT módban. Itt RGB hex-ek
       garantálják, hogy a Win7-en is renderelődjenek.
       ════════════════════════════════════════════════════════════════════ */

    /* ─── TEXT: brand plain ─── */
    .text-dark      { color: #31353D !important }
    .text-dark-2    { color: #1F2227 !important }
    .text-ink       { color: #404144 !important }
    .text-ink-2     { color: #676767 !important }
    .text-gold      { color: #D99E4B !important }
    .text-gold-d    { color: #B7822F !important }
    .text-cream     { color: #FAF6EE !important }
    .text-line      { color: #ECE7DC !important }
    .text-white     { color: #ffffff !important }
    .text-black     { color: #000000 !important }

    /* ─── BG: brand plain ─── */
    .bg-dark        { background-color: #31353D !important }
    .bg-dark-2      { background-color: #1F2227 !important }
    .bg-gold        { background-color: #D99E4B !important }
    .bg-gold-d      { background-color: #B7822F !important }
    .bg-cream       { background-color: #FAF6EE !important }
    .bg-line        { background-color: #ECE7DC !important }
    .bg-white       { background-color: #ffffff !important }
    .bg-black       { background-color: #000000 !important }
    .bg-ink         { background-color: #404144 !important }
    .bg-ink-2       { background-color: #676767 !important }

    /* ─── BORDER: brand plain ─── */
    .border-dark    { border-color: #31353D !important }
    .border-gold    { border-color: #D99E4B !important }
    .border-gold-d  { border-color: #B7822F !important }
    .border-line    { border-color: #ECE7DC !important }
    .border-cream   { border-color: #FAF6EE !important }
    .border-ink-2   { border-color: #676767 !important }
    .border-white   { border-color: #ffffff !important }
    .border-black   { border-color: #000000 !important }

    /* ─── TEXT: dark/X opacity (a /70-/80 már fent vagy fent volt) ─── */
    .text-dark\/50   { color: rgba(49,53,61,.50) !important }
    .text-dark\/60   { color: rgba(49,53,61,.60) !important }
    .text-dark\/85   { color: rgba(49,53,61,.85) !important }
    .text-dark\/90   { color: rgba(49,53,61,.90) !important }
    .text-dark\/95   { color: rgba(49,53,61,.95) !important }

    /* ─── TEXT: ink/ink-2 opacity (több variáns) ─── */
    .text-ink\/70    { color: rgba(64,65,68,.70) !important }
    .text-ink\/80    { color: rgba(64,65,68,.80) !important }
    .text-ink-2\/50  { color: rgba(103,103,103,.50) !important }
    .text-ink-2\/70  { color: rgba(103,103,103,.70) !important }
    .text-ink-2\/80  { color: rgba(103,103,103,.80) !important }

    /* ─── TEXT: gold opacity ─── */
    .text-gold\/50   { color: rgba(217,158,75,.50) !important }
    .text-gold\/60   { color: rgba(217,158,75,.60) !important }
    .text-gold\/90   { color: rgba(217,158,75,.90) !important }

    /* ─── Tailwind paletta plain (a leggyakoribbak) ─── */
    .text-rose-400   { color: #fb7185 !important }
    .text-rose-500   { color: #f43f5e !important }
    .text-rose-600   { color: #e11d48 !important }
    .text-rose-700   { color: #be123c !important }
    .text-emerald-400{ color: #34d399 !important }
    .text-emerald-500{ color: #10b981 !important }
    .text-emerald-600{ color: #059669 !important }
    .text-emerald-700{ color: #047857 !important }
    .text-amber-400  { color: #fbbf24 !important }
    .text-amber-500  { color: #f59e0b !important }
    .text-amber-600  { color: #d97706 !important }
    .text-blue-500   { color: #3b82f6 !important }
    .text-blue-600   { color: #2563eb !important }
    .text-cyan-600   { color: #0891b2 !important }
    .text-cyan-700   { color: #0e7490 !important }
    .text-purple-600 { color: #9333ea !important }
    .text-purple-700 { color: #7e22ce !important }
    .text-gray-500   { color: #6b7280 !important }
    .text-gray-600   { color: #4b5563 !important }
    .text-gray-700   { color: #374151 !important }

    /* ─── Background paletta plain ─── */
    .bg-rose-500     { background-color: #f43f5e !important }
    .bg-rose-600     { background-color: #e11d48 !important }
    .bg-emerald-500  { background-color: #10b981 !important }
    .bg-emerald-600  { background-color: #059669 !important }
    .bg-amber-400    { background-color: #fbbf24 !important }
    .bg-amber-500    { background-color: #f59e0b !important }
    .bg-blue-500     { background-color: #3b82f6 !important }
    .bg-purple-600   { background-color: #9333ea !important }
    .bg-purple-700   { background-color: #7e22ce !important }

    /* ───────── 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; }
}