/*
Theme Name: premium-theme
Theme URI: https://johnnyisfine.eu
Description: JohnnyIsFine Premium-Theme bazat pe FSE.
Author: JohnnyIsFine
Template: twentytwentyfive
Version: 1.0.0
*/

/* ==========================================================================
   1. ACCESIBILITATE & FOCUS STATES
   ========================================================================== */
*:focus-visible { outline: 2px solid var(--wp--preset--color--border-focus, #38bdf8); outline-offset: 4px; }

/* ==========================================================================
   2. GLASSMORPHISM & ANIMATII CONTINUE
   ========================================================================== */
.is-glass-active {
    --local-blur: var(--jif-glass-blur, 12px);
    --local-opacity: var(--jif-glass-opacity, 0.7);
    background-color: rgba(255, 255, 255, var(--local-opacity)) !important;
    backdrop-filter: blur(var(--local-blur));
    -webkit-backdrop-filter: blur(var(--local-blur));
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes jifFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.is-anim-floating {
    animation: jifFloat var(--jif-float-speed, 4s) ease-in-out infinite;
    transform-style: preserve-3d; 
}

/* ==========================================================================
   3. BOX SHADOWS & HOVER LIFT EFFECTS
   ========================================================================== */
[class*="is-shadow-"] {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.is-shadow-subtle { box-shadow: 0 2px 4px color-mix(in srgb, var(--jif-shadow-color, #000) 4%, transparent); }
.is-shadow-subtle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--jif-shadow-color, #000) 8%, transparent);
}

.is-shadow-elevate { box-shadow: 0 4px 12px color-mix(in srgb, var(--jif-shadow-color, #000) 6%, transparent); }
.is-shadow-elevate:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px color-mix(in srgb, var(--jif-shadow-color, #000) 12%, transparent);
}

.is-shadow-deep { box-shadow: 0 10px 20px color-mix(in srgb, var(--jif-shadow-color, #000) 10%, transparent); }
.is-shadow-deep:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px color-mix(in srgb, var(--jif-shadow-color, #000) 18%, transparent);
}

/* ==========================================================================
   4. HOVER BORDERS & SPARKLE EDGES
   ========================================================================== */
[class*="is-hover-border-"]:not([class*="snake"]) { 
    position: relative; overflow: hidden; 
}

[class*="is-hover-border-"]:not([class*="snake"])::before {
    content: ''; position: absolute; background-color: var(--jif-border-color, #0284c7);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0; z-index: 10; pointer-events: none;
}

.is-hover-border-top::before { top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; }
.is-hover-border-bottom::before { bottom: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: right; }
.is-hover-border-left::before { top: 0; bottom: 0; left: 0; width: 3px; transform: scaleY(0); transform-origin: bottom; }
.is-hover-border-right::before { top: 0; bottom: 0; right: 0; width: 3px; transform: scaleY(0); transform-origin: top; }

.is-hover-border-top:hover::before, .is-hover-border-bottom:hover::before { transform: scaleX(1); opacity: 1; }
.is-hover-border-left:hover::before, .is-hover-border-right:hover::before { transform: scaleY(1); opacity: 1; }

/* --- THE SPARKLE EDGE EFFECT (SNAKE REFINED) --- */
@property --jif-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

[class*="is-hover-border-snake"] { position: relative; }

[class*="is-hover-border-snake"]::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit;
    border: 2px solid transparent; 
    background: transparent;
    pointer-events: none; z-index: 10; opacity: 0;
    transition: opacity 0.4s ease;
}

/* FALLBACK (vizibil pe TOATE browserele): cand snake e activ, arata border solid */
.is-hover-border-snake:hover::after,
.is-hover-border-snake-continuous::after {
    opacity: 1;
    border-color: var(--jif-border-color, #0284c7);
}

/* ENHANCEMENT: pe browsere care suporta conic-gradient (~toate din 2021), 
   suprapunem gradient-ul animat peste border-ul solid */
@supports (background: conic-gradient(from 0deg, red, blue)) {
    [class*="is-hover-border-snake"]::after {
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
    }
    
    .is-hover-border-snake:hover::after,
    .is-hover-border-snake-continuous::after {
        border-color: transparent; /* ascundem border-ul, lasam gradient-ul */
        background-image: conic-gradient(
            from var(--jif-angle, 0deg), 
            transparent 0%, 
            transparent 60%, 
            color-mix(in srgb, var(--jif-border-color) 20%, transparent) 80%, 
            var(--jif-border-color) 95%, 
            transparent 100%
        );
        background-origin: border-box; background-clip: border-box;
        animation: jifSnakeSpin var(--jif-snake-speed, 2.5s) var(--jif-snake-easing, linear) infinite;
    }
}

@keyframes jifSnakeSpin { to { --jif-angle: 360deg; } }

/* ==========================================================================
   4.5. CARD REVEAL OVERLAYS (Text la Hover)
   ========================================================================== */
.is-hover-overlay-card {
    position: relative; overflow: hidden; 
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.is-hover-overlay-card::after {
    content: attr(data-overlay-text);
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 2rem; font-weight: 600; letter-spacing: 0.05em; 
    color: var(--jif-overlay-text-color, #0F172A);
    background-color: color-mix(in srgb, var(--jif-overlay-bg, #F8FAFC) var(--jif-overlay-opacity, 85%), transparent);
    backdrop-filter: blur(var(--jif-overlay-blur, 8px));
    -webkit-backdrop-filter: blur(var(--jif-overlay-blur, 8px));
    opacity: 0; transform: scale(0.95);
    transition: opacity var(--jif-overlay-speed, 0.4s) ease, transform var(--jif-overlay-speed, 0.4s) cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none; z-index: 20;
}

.is-hover-overlay-card:hover::after { opacity: 1; transform: scale(1); }

/* ==========================================================================
   4.6. SIMPLE HOVER (Colors & Borders Only)
   ========================================================================== */
.is-simple-hover {
    transition: background-color var(--jif-sh-speed, 0.3s) ease, border-color var(--jif-sh-speed, 0.3s) ease !important;
}
.is-simple-hover:hover {
    background-color: var(--jif-sh-bg) !important;
    border-color: var(--jif-sh-border) !important;
}

/* FIX: Fortam culoarea de hover atat pe container cat si pe toate elementele (texte) din el */
.is-simple-hover:hover,
.is-simple-hover:hover * {
    color: var(--jif-sh-text) !important;
    transition: color var(--jif-sh-speed, 0.3s) ease;
}

/* ==========================================================================
   5. IMAGE MASKS (Nivel Premium cu Animatii)
   ========================================================================== */
.is-mask-blob img { 
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; 
    transition: border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
}
.is-mask-blob img:hover { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }

.is-mask-arch img { 
    border-radius: 400px 400px 0 0; object-fit: cover; 
    transition: border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-mask-arch img:hover { border-radius: 24px; }

.is-mask-squircle img { 
    border-radius: 20%; 
    transition: border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-mask-squircle img:hover { border-radius: 50%; transform: rotate(5deg) scale(1.05); }

/* ==========================================================================
   6. ENTRANCE ANIMATIONS (Scroll Observer Linked)
   ========================================================================== */
.is-entrance-fade, .is-entrance-slide-up { opacity: 0; }

.editor-styles-wrapper .is-entrance-fade,
.editor-styles-wrapper .is-entrance-slide-up { opacity: 1 !important; animation: none !important; }

.is-entrance-fade.is-in-view, .is-entrance-slide-up.is-in-view {
    animation-duration: var(--jif-entrance-speed, 0.8s);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: forwards;
    animation-delay: var(--jif-entrance-delay, 0ms);
}

.is-entrance-fade.is-in-view { animation-name: jifFadeIn; }
.is-entrance-slide-up.is-in-view { animation-name: jifSlideUp; }

@keyframes jifFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes jifSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   8. TAB SYSTEM (Decoupled Logic & Styling)
   ========================================================================== */
.is-tab-trigger { 
    cursor: pointer; 
    transition: all 0.3s ease; 
    background-color: var(--jif-tab-bg) !important;
}
.is-tab-trigger.is-active-tab {
    background-color: var(--jif-tab-active-bg) !important;
    transform: translateY(-2px);
}

/* Radio Button Styling */
.is-tab-trigger.has-tab-radio {
    position: relative;
    padding-left: calc(var(--jif-tab-radio-size, 16px) + 30px) !important;
}

.has-tab-radio::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--jif-tab-radio-size, 16px);
    height: var(--jif-tab-radio-size, 16px);
    border-radius: 50%;
    background-color: var(--jif-tab-radio-bg);
    border: 2px solid var(--jif-tab-radio-border);
    transition: all 0.3s ease;
}

.has-tab-radio.is-active-tab::before {
    background-color: var(--jif-tab-radio-active-bg);
    border-color: var(--jif-tab-radio-active-border);
}

/* Card Targets Setup */
.is-tab-target { 
    opacity: 0; 
}

/* FIX: Folosim :not si !important ca sa batem clasele native de layout ale Gutenberg 
   (ex: .is-layout-flex) care tin spatiul blocat cand cardul era inactiv. */
.is-tab-target:not(.is-active-tab) { 
    display: none !important; 
}

.is-tab-target.is-active-tab {
    /* Lasam display-ul nativ Gutenberg (flex/grid/block) si adaugam doar animatia */
    animation: tabReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabReveal {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* In editor le afisam mereu pentru a le putea edita usor */
.editor-styles-wrapper .is-tab-target,
.editor-styles-wrapper .is-tab-target:not(.is-active-tab) { 
    display: flex !important; /* Asigura vizibilitatea in editor */
    opacity: 1 !important; 
    margin-bottom: 30px; 
}


/* ==========================================================================
   9. INTERACTIVE TOOLTIPS / HINTS (Multi-Directional)
   ========================================================================== */
.has-jif-tooltip { position: relative; }

/* FIX: Ridicam INTREGUL container parinte peste celelalte sectiuni la hover/active */
.has-jif-tooltip:hover, .has-jif-tooltip:active {
    z-index: 99999 !important;
}

/* Info-bula (Core Styling) */
.has-jif-tooltip::before {
    content: attr(data-tooltip-text); position: absolute;
    background-color: var(--jif-tt-bg, #0F172A); color: var(--jif-tt-color, #ffffff); border: 2px solid var(--jif-tt-border, #38BDF8);
    border-radius: var(--jif-tt-radius, 8px); font-size: var(--jif-tt-size, 14px); padding: 10px 16px; 
    width: max-content; max-width: var(--jif-tt-max-width, 250px);
    text-align: center; line-height: 1.4; white-space: pre-wrap; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    opacity: 0; pointer-events: none; z-index: 99999; transition: all var(--jif-tt-speed, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sageata (Triunghiul CSS) */
.has-jif-tooltip::after {
    content: ''; position: absolute;
    border-style: solid; border-width: 7px; opacity: 0; pointer-events: none; z-index: 100000; 
    transition: all var(--jif-tt-speed, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
}

/* POSITIONS: TOP */
.is-tooltip-top::before { bottom: calc(100% + 15px); left: 50%; transform: translateX(-50%) translateY(10px); }
.is-tooltip-top::after { bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%) translateY(10px); border-color: var(--jif-tt-border, #38BDF8) transparent transparent transparent; }
.is-tooltip-top:hover::before, .is-tooltip-top:active::before, .is-tooltip-top:hover::after, .is-tooltip-top:active::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* POSITIONS: BOTTOM */
.is-tooltip-bottom::before { top: calc(100% + 15px); left: 50%; transform: translateX(-50%) translateY(-10px); }
.is-tooltip-bottom::after { top: calc(100% + 1px); left: 50%; transform: translateX(-50%) translateY(-10px); border-color: transparent transparent var(--jif-tt-border, #38BDF8) transparent; }
.is-tooltip-bottom:hover::before, .is-tooltip-bottom:active::before, .is-tooltip-bottom:hover::after, .is-tooltip-bottom:active::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* POSITIONS: LEFT */
.is-tooltip-left::before { right: calc(100% + 15px); top: 50%; transform: translateY(-50%) translateX(10px); }
.is-tooltip-left::after { right: calc(100% + 1px); top: 50%; transform: translateY(-50%) translateX(10px); border-color: transparent transparent transparent var(--jif-tt-border, #38BDF8); }
.is-tooltip-left:hover::before, .is-tooltip-left:active::before, .is-tooltip-left:hover::after, .is-tooltip-left:active::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* POSITIONS: RIGHT */
.is-tooltip-right::before { left: calc(100% + 15px); top: 50%; transform: translateY(-50%) translateX(-10px); }
.is-tooltip-right::after { left: calc(100% + 1px); top: 50%; transform: translateY(-50%) translateX(-10px); border-color: transparent var(--jif-tt-border, #38BDF8) transparent transparent; }
.is-tooltip-right:hover::before, .is-tooltip-right:active::before, .is-tooltip-right:hover::after, .is-tooltip-right:active::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ==========================================================================
   10. INTERACTIVE 3D TILT (Parallax)
   ========================================================================== */
.is-3d-tilt {
    /* Setam perspectiva pentru un feeling tridimensional */
    transform-style: preserve-3d;
    will-change: transform;
    /* Tranzitia default e prezenta cand nu pui mouse-ul */
    transition: transform 0.5s ease-out;
}

/* Oprim tranzitiile native de shadow/border cand cardul este miscat de JS, pentru a evita un conflict de randare (lag) */
.is-3d-tilt:hover {
    z-index: 50; /* Ridicam cardul pt ca se va mari */
}


/* ==========================================================================
   11. FAQ ACCORDION (Plus & Chevron Variants)
   ========================================================================== */
.is-faq-trigger { cursor: pointer; position: relative; padding-right: 40px !important; transition: background-color 0.3s ease; }

/* Setup Comun Iconita */
.is-faq-trigger::after, .is-faq-trigger::before {
    content: ''; position: absolute; right: 20px; top: 50%;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* VARIANTA 1: PLUS / MINUS (Default) */
.is-faq-icon-plus::after, .is-faq-icon-plus::before { background-color: var(--jif-faq-icon-color, #0F172A); transform: translateY(-50%); }
.is-faq-icon-plus::before { width: 14px; height: 2px; } /* Liniuta Orizontala */
.is-faq-icon-plus::after { width: 2px; height: 14px; right: 26px; } /* Liniuta Verticala */
.is-faq-icon-plus.is-faq-open::after { transform: translateY(-50%) rotate(90deg); } /* Devine minus */

/* VARIANTA 2: CHEVRON */
.is-faq-icon-chevron::after {
    width: 10px; height: 10px;
    border-right: 2px solid var(--jif-faq-icon-color, #0F172A);
    border-bottom: 2px solid var(--jif-faq-icon-color, #0F172A);
    transform: translateY(-70%) rotate(45deg); /* Chevron orientat in jos */
    right: 22px;
}
.is-faq-icon-chevron::before { display: none; } /* Ascundem al doilea pseudo-element */
.is-faq-icon-chevron.is-faq-open::after {
    transform: translateY(-30%) rotate(-135deg); /* Chevron orientat in sus */
}

/* Target (Raspuns) */
.is-faq-target { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; }
.is-faq-target.is-faq-open { opacity: 1; }
.editor-styles-wrapper .is-faq-target { max-height: none !important; opacity: 1 !important; overflow: visible !important; margin-top: 15px; border-left: 2px dashed #e2e8f0; padding-left: 15px; }


/* ==========================================================================
   12. SMART SCROLL TO TOP BUTTON
   ========================================================================== */
.is-smart-scroll-btn {
    position: fixed !important;
    bottom: -100px; /* Ascuns default sub ecran */
    right: 30px;
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    z-index: 9999;
    background-color: var(--wp--preset--color--background-surface, #fff) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
    cursor: pointer;
}

/* Apare butonul */
.is-smart-scroll-btn.is-visible {
    bottom: 150px;
}

/* Sagetica sus desenata din CSS */
.is-smart-scroll-btn::before {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--jif-scroll-ring, #0284C7);
    border-left: 3px solid var(--jif-scroll-ring, #0284C7);
    transform: rotate(45deg) translate(2px, 2px);
    transition: transform 0.3s ease;
}

.is-smart-scroll-btn:hover {
    transform: translateY(-5px);
}

/* In editor, nu il facem FIXED, il lasam la locul lui ca sa il poti stiliza/muta */
.editor-styles-wrapper .is-smart-scroll-btn {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
}

/* ==========================================================================
   13. MOBILE RESPONSIVE UTILITIES
   ========================================================================== */
   
/* Se aplica doar la ecrane sub 781px (Breakpoint-ul default WP pt mobil) */
@media (max-width: 781px) {
    
    /* 1. Reverse Stack */
    /* Daca WP incearca sa le puna coloana normal (1,2,3), noi le inversam (3,2,1) */
    .is-reverse-mobile {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 2. Smart Mobile Padding */
    /* Rescriem marginile uriase de pe Desktop ca sa salvam spatiul pe telefon */
    .is-smart-padding-mobile {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* ==========================================================================
   14. INLINE HIGHLIGHTER (MARKER EFFECT V2)
   ========================================================================== */
mark.jif-highlight {
    background-color: transparent;
    /* Linia de marker are culoare solida preluata din variabila de bloc, transparenta 20% in spate */
    background-image: linear-gradient(color-mix(in srgb, var(--jif-hl-color, #38bdf8) 35%, transparent), color-mix(in srgb, var(--jif-hl-color, #38bdf8) 35%, transparent));
    background-size: 100% var(--jif-hl-height, 35%);
    background-repeat: no-repeat;
    background-position: 0 calc(100% - var(--jif-hl-offset, 0%));
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
}

/* ==========================================================================
   15. TYPEWRITER EFFECT
   ========================================================================== */
.is-typewriter.is-typing::after {
    content: '|';
    animation: typewriterBlink 0.7s infinite;
    color: var(--wp--preset--color--action-default, #0284C7);
}
@keyframes typewriterBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==========================================================================
   16. CINEMATIC CONTACT FORM (Hybrid Mode: Blur & Transparent)
   ========================================================================== */

/* --- 1. MODUL OVERLAY (Blur global + Culoare Brand) --- */
.jif-cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(15, 23, 42, 0.75); /* Fallback */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0; pointer-events: none; z-index: 99998;
    transition: opacity 0.5s ease, background-color 0.5s ease;
}

/* Afisam stratul fizic DOAR cand modul e overlay */
body.has-cinematic-focus.is-mode-overlay .jif-cinematic-overlay {
    opacity: 1; pointer-events: all;
}


/* --- 2. MODUL TRANSPARENT (Fade + Blur pe siblings, JS-marked) --- */
/* Ascundem complet stratul negru cand suntem in transparent */
body.has-cinematic-focus.is-mode-transparent .jif-cinematic-overlay {
    display: none !important;
}

/* JS adauga .jif-cinematic-faded pe siblings la fiecare nivel de nesting 
   (vezi setupCinematicFocus din frontend.js). Asta face cascada multi-nivel 
   fara penalitatea de performanta a unui selector :has() complex. */
body.has-cinematic-focus.is-mode-transparent .jif-cinematic-faded {
    opacity: 0.15;
    filter: blur(6px);
    transition: opacity 0.5s ease-in-out, filter 0.5s ease;
    pointer-events: none;
}


/* --- 3. STILURI COMUNE PENTRU FORMULAR (Focus) --- */
.is-cinematic-form.is-focused-form {
    position: relative;
    z-index: 99999 !important;
    transform: scale(1.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   17. DYNAMIC TOC (Table of Contents)
   ========================================================================== */
.jif-toc-list { list-style: none; padding: 0; margin: 0; }
.jif-toc-list li { margin-bottom: 12px; }
.jif-toc-list a { 
    text-decoration: none; color: inherit; transition: color 0.3s ease; 
    display: inline-block;
}
.jif-toc-list a:hover { color: var(--wp--preset--color--action-default, #0284C7); transform: translateX(5px); }
.jif-toc-list .toc-item-h3 { padding-left: 20px; font-size: 0.9em; opacity: 0.8; } /* Indentare automata pt H3 */


/* ==========================================================================
   18. MOBILE SMART CTAs
   ========================================================================== */
@media (max-width: 781px) {
    .is-mobile-smart-cta {
        position: fixed !important;
        bottom: 0; left: 0; width: 100%;
        z-index: 9990;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(100%); /* Ascuns la load */
    }
 
    /* Mode: Scroll - ascunsa la load, apare doar la scroll up (is-visible-cta setat de JS) */
    .is-mobile-smart-cta[data-cta-mode="scroll"].is-visible-cta { transform: translateY(0); }
 
    /* Mode: Anchor - ascunsa pana cand ancora e trecuta de viewport */
    .is-mobile-smart-cta[data-cta-mode="anchor"].is-visible-cta { transform: translateY(0); }
}


/* ==========================================================================
   19. PREFERS-REDUCED-MOTION (Accesibilitate WCAG 2.1)
   
   Dezactivam animatiile infinite / decorative pentru utilizatorii care au cerut
   in OS sa reduca miscarile (problema medicala: vestibular, migrene, epilepsie).
   Tranzitiile scurte (hover, click) sunt lasate pentru ca dau feedback functional.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    /* Animatii infinite => oprite complet */
    .is-anim-floating { 
        animation: none !important; 
    }

    /* Snake border => fara animatie, border solid static */
    [class*="is-hover-border-snake"]:hover::after,
    [class*="is-hover-border-snake-continuous"]::after {
        animation: none !important;
        background-image: none !important;
        border-color: var(--jif-border-color, #0284c7) !important;
    }

    /* Typewriter cursor blink => oprit, cursorul ramane fix vizibil */
    .is-typewriter.is-typing::after { 
        animation: none !important; 
        opacity: 1 !important; 
    }

    /* Entrance animations => continutul apare instant, fara fade/slide */
    .is-entrance-fade, 
    .is-entrance-slide-up {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .is-entrance-fade.is-in-view, 
    .is-entrance-slide-up.is-in-view {
        animation: none !important;
    }

    /* Tab reveal animation => instant, fara scale */
    .is-tab-target.is-active-tab {
        animation: none !important;
    }

    /* Hover lift effects (shadows) => fara translate, doar shadow */
    [class*="is-shadow-"]:hover {
        transform: none !important;
    }

    /* Image masks => fara rotate/scale la hover */
    .is-mask-squircle img:hover {
        transform: none !important;
    }

    /* TOC link hover => fara translateX */
    .jif-toc-list a:hover {
        transform: none !important;
    }

    /* Smart scroll button hover => fara translateY */
    .is-smart-scroll-btn:hover {
        transform: none !important;
    }

    /* Ghost button => sageata si expand apar instant */
    .wp-block-button.is-style-jif-ghost .wp-block-button__link,
    .wp-block-button.is-style-jif-ghost .wp-block-button__link::after {
        transition: none !important;
    }

    /* Carousel dots => schimbarea de active e instant */
    .jif-dot { transition: none !important; }
}

/* ==========================================================================
   20. EDITORIAL TRAILING LINE (Text FX)
   
   Efect premium de titlu cu linie orizontala fluida in prelungire.
   Linia mosteneste culoarea textului via `currentColor`, deci se actualizeaza
   automat live in editor cand schimbi culoarea heading-ului sau paragrafului.
   ========================================================================== */
.is-trailing-line {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    white-space: nowrap;
}

.is-trailing-line::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: currentColor;
    opacity: 0.25;
}

@media (max-width: 600px) {
    .is-trailing-line {
        white-space: normal;
    }
    .is-trailing-line::after {
        display: none;
    }
}



/* ==========================================================================
   21. JIF BUTTON VARIANTS (Fill / Outline / Ghost)

   Variante inregistrate via registerBlockStyle('core/button') in index.js.
   Clasele generate automat de WordPress:
     .is-style-jif-fill    → solid, brand color complet
     .is-style-jif-outline → transparent cu border, fill subtil la hover
     .is-style-jif-ghost   → fara border, bg se largeste la hover, sageata slide-in

   Padding Figma: 12px vertical / 24px orizontal.
   Font: Gelasio Regular (400). Border-radius: pill (9999px).
   !important bate stilurile inline injectate de WordPress din Global Styles.
   ========================================================================== */

.wp-block-button.is-style-jif-fill .wp-block-button__link,
.wp-block-button.is-style-jif-outline .wp-block-button__link,
.wp-block-button.is-style-jif-ghost .wp-block-button__link {
    font-family: var(--wp--preset--font-family--gelasio) !important;
    font-weight: 400 !important;
    border-radius: 9999px !important;
    padding: 12px 24px !important;
    transition: background-color 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, padding-right 0.25s ease !important;
    text-decoration: none !important;
}

/* ---- 1. FILL ---- */
.wp-block-button.is-style-jif-fill .wp-block-button__link {
    background-color: var(--wp--preset--color--action-default) !important;
    border: 2px solid var(--wp--preset--color--action-default) !important;
    color: var(--wp--preset--color--action-onaction) !important;
}
.wp-block-button.is-style-jif-fill .wp-block-button__link:hover,
.wp-block-button.is-style-jif-fill .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--action-hover) !important;
    border-color: var(--wp--preset--color--action-hover) !important;
    color: var(--wp--preset--color--action-onaction) !important;
}

/* ---- 2. OUTLINE ---- */
.wp-block-button.is-style-jif-outline .wp-block-button__link {
    background-color: var(--wp--preset--color--background-elevated) !important;
    border: 2px solid var(--wp--preset--color--action-default) !important;
    color: var(--wp--preset--color--text-primary-on-white) !important;
}
.wp-block-button.is-style-jif-outline .wp-block-button__link:hover,
.wp-block-button.is-style-jif-outline .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--action-subtlebg) !important;
    border-color: var(--wp--preset--color--action-hover) !important;
    color: var(--wp--preset--color--text-primary-on-white) !important;
}

/* ---- 3. GHOST ---- */
.wp-block-button.is-style-jif-ghost .wp-block-button__link {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--wp--preset--color--text-primary-on-white) !important;
    position: relative;
}
.wp-block-button.is-style-jif-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-jif-ghost .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--action-subtlebg) !important;
    color: var(--wp--preset--color--text-primary-on-white) !important;
    padding-right: calc(24px + 1.5em) !important;
}
.wp-block-button.is-style-jif-ghost .wp-block-button__link::after {
    content: '→';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    color: var(--wp--preset--color--text-primary-on-white);
    font-size: 1em;
    line-height: 1;
    pointer-events: none;
}
.wp-block-button.is-style-jif-ghost .wp-block-button__link:hover::after,
.wp-block-button.is-style-jif-ghost .wp-block-button__link:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   22. MOBILE CAROUSEL

   Doua variante, active exclusiv pe ecrane ≤ 781px (breakpoint WP default).
   Fundatia: CSS Scroll Snap nativ — browserul gestioneaza toata fizica
   de touch/inertie/rubber-banding. Zero librarii externe, zero JS pt miscare.

   .is-mobile-carousel     → snapping la 85% latime, peek la urmatorul card,
                             dots injectate de JS (frontend.js: setupMobileCarousel)
   .is-mobile-carousel-nodots → scroll orizontal liber, latimea naturala a
                             item-urilor (ideal pt tab triggers)
   ========================================================================== */

/* --- In editor: comportament normal, fara scroll snap --- */
.editor-styles-wrapper .is-mobile-carousel,
.editor-styles-wrapper .is-mobile-carousel-full,
.editor-styles-wrapper .is-mobile-carousel-nodots {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
}
.editor-styles-wrapper .is-mobile-carousel > *,
.editor-styles-wrapper .is-mobile-carousel-full > *,
.editor-styles-wrapper .is-mobile-carousel-nodots > * {
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
}

@media (max-width: 781px) {

    /* ---- 1. CARUSEL CU PEEK (OFFSET) ---- */
    .is-mobile-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px !important;
    }
    .is-mobile-carousel::-webkit-scrollbar { display: none; }

    .is-mobile-carousel > * {
        scroll-snap-align: start;
        flex-shrink: 0 !important;
        flex-basis: 85% !important;
        min-width: 85% !important;
        max-width: 85% !important;
        width: 85% !important;
    }

    /* ---- 2. CARUSEL FULL-WIDTH (FARA OFFSET) ---- */
    /* Continut 100% latime, fara peek. Dots sunt cue-ul vizual. */
    .is-mobile-carousel-full {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0 !important;
    }
    .is-mobile-carousel-full::-webkit-scrollbar { display: none; }

    .is-mobile-carousel-full > * {
        scroll-snap-align: start;
        flex-shrink: 0 !important;
        flex-basis: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Dots — div injectat de JS imediat dupa elementul carusel */
    .jif-carousel-dots {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        width: 100%;
        padding: 0;
        list-style: none;
        justify-content: center; /* default */
    }

    .jif-carousel-dots.is-dots-left   { justify-content: flex-start; padding-left: 20px; }
    .jif-carousel-dots.is-dots-center { justify-content: center; }

    .jif-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--wp--preset--color--border-default, #D3CBBB);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .jif-dot.is-active {
        background-color: var(--wp--preset--color--action-default, #E96D0D);
        transform: scale(1.4);
    }

    /* ---- 2. SCROLL ORIZONTAL FARA DOTS ---- */
    /* Item-urile isi pastreaza latimea naturala — ideal pentru tab triggers
       unde userul vede mai multe optiuni in acelasi timp. */
    .is-mobile-carousel-nodots {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .is-mobile-carousel-nodots::-webkit-scrollbar { display: none; }

    .is-mobile-carousel-nodots > * {
        flex-shrink: 0 !important;
    }
}

/* ==========================================================================
   23. SMART WRAP MOBILE & EQUAL HEIGHT ITEMS

   Smart Wrap Mobile (.is-smart-wrap-mobile):
     Permite elementelor dintr-un container flex sa treaca pe randul urmator
     exclusiv sub 781px. Pe desktop, WordPress controleaza wrap-ul nativ.

   Equal Height Items (.is-equal-height-items):
     Forteaza toti copiii directi sa aiba aceeasi inaltime pe toate ecranele.
     Util pentru griduri de carduri cu continut de lungimi diferite.
   ========================================================================== */

/* --- Smart Wrap: activ doar pe mobile --- */
@media (max-width: 781px) {
    .is-smart-wrap-mobile {
        flex-wrap: wrap !important;
    }
}

/* --- Equal Height Items: toate ecranele --- */
.is-equal-height-items {
    align-items: stretch !important;
}

/* Copiii directi se intind sa umple inaltimea containerului.
   display: flex + flex-direction: column asigura ca inner content-ul
   din fiecare card se poate alinia la baza cu margin-top: auto. */
.is-equal-height-items > * {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* ==========================================================================
   24. RESPONSIVE GRID (JIF Grid Extension)

   Extinde gridul nativ WordPress cu control per viewport.
   Valorile sunt salvate ca CSS custom properties inline (via index.js):
     --grid-cols-tablet: N  → aplicat sub 1024px
     --grid-cols-mobile: N  → aplicat sub 781px (breakpoint WP standard)

   [style*="--grid-cols-X"] asigura ca regula se aplica DOAR cand
   variabila e efectiv setata pe element, evitand override-uri nedorite.

   !important e necesar ca sa bata grid-template-columns setat inline
   de WordPress in modul nativ column-count.
   ========================================================================== */

@media (max-width: 1024px) {
    .has-jif-responsive-grid[style*="--grid-cols-tablet"] {
        grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr)) !important;
    }
}

@media (max-width: 781px) {
    .has-jif-responsive-grid[style*="--grid-cols-mobile"] {
        grid-template-columns: repeat(var(--grid-cols-mobile), minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   25. RESPONSIVE SETTINGS — Per-viewport overrides

   Container (.has-jif-resp-container): gap, padding per tablet/mobile
   Item (.has-jif-resp-item): grid-column span, order per tablet/mobile

   Naming CSS vars: -t = tablet (≤ 1024px), -m = mobile (≤ 781px)

   Selectorul [style*="--jif-X"] garanteaza ca regula se aplica DOAR
   cand variabila e setata inline — zero side-effects pe alte elemente.
   !important e necesar ca sa bata stilurile inline WP (padding, gap).
   ========================================================================== */

/* ---- TABLET (≤ 1024px) ---- */
@media (max-width: 1024px) {
    .has-jif-resp-container[style*="--jif-gap-t"]        { gap:            var(--jif-gap-t)        !important; }
    .has-jif-resp-container[style*="--jif-pad-top-t"]    { padding-top:    var(--jif-pad-top-t)    !important; }
    .has-jif-resp-container[style*="--jif-pad-right-t"]  { padding-right:  var(--jif-pad-right-t)  !important; }
    .has-jif-resp-container[style*="--jif-pad-bottom-t"] { padding-bottom: var(--jif-pad-bottom-t) !important; }
    .has-jif-resp-container[style*="--jif-pad-left-t"]   { padding-left:   var(--jif-pad-left-t)   !important; }
    .has-jif-resp-item[style*="--jif-span-t"]            { grid-column:    span var(--jif-span-t)  !important; }
    .has-jif-resp-item[style*="--jif-order-t"]           { order:          var(--jif-order-t)      !important; }
}

/* ---- MOBILE (≤ 781px) ---- */
@media (max-width: 781px) {
    .has-jif-resp-container[style*="--jif-gap-m"]        { gap:            var(--jif-gap-m)        !important; }
    .has-jif-resp-container[style*="--jif-pad-top-m"]    { padding-top:    var(--jif-pad-top-m)    !important; }
    .has-jif-resp-container[style*="--jif-pad-right-m"]  { padding-right:  var(--jif-pad-right-m)  !important; }
    .has-jif-resp-container[style*="--jif-pad-bottom-m"] { padding-bottom: var(--jif-pad-bottom-m) !important; }
    .has-jif-resp-container[style*="--jif-pad-left-m"]   { padding-left:   var(--jif-pad-left-m)   !important; }
    .has-jif-resp-item[style*="--jif-span-m"]            { grid-column:    span var(--jif-span-m)  !important; }
    .has-jif-resp-item[style*="--jif-order-m"]           { order:          var(--jif-order-m)      !important; }
}

/* ==========================================================================
   26. CATEGORY NAVIGATOR TOC (Variant 2)
 
   Injectat de setupCategoryNav() din frontend.js.
 
   Token-uri (din theme.json):
   Default:  pill bg=background-elevated, border=border-default, text=action-default
             badge bg=background-dark, text=action-onaction
   Hover:    pill neschimbat — badge se inverseaza:
             badge bg=background-elevated, text=text-primary-on-white
   Active:   pill bg=action-default, border=action-default, text=action-onaction
             badge bg=background-dark, text=action-onaction
   ========================================================================== */
 
.jif-category-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
 
.jif-cat-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 9999px;
    border: 0.5px solid var(--wp--preset--color--border-default, #D3CBBB);
    background-color: var(--wp--preset--color--background-elevated, #FBFBFB);
    color: var(--wp--preset--color--action-default, #E96D0D);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.4;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
 
.jif-cat-label {
    flex: 1;
    font-weight: 500;
}
 
/* Cerc perfect — width si height egale, zero padding orizontal */
.jif-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background-color: var(--wp--preset--color--background-dark, #131A20);
    color: var(--wp--preset--color--action-onaction, #FBFBFB);
    transition: background-color 0.25s ease, color 0.25s ease;
}
 
/* Hover: pill raman neschimbate, badge-ul se inverseaza */
.jif-cat-pill:hover .jif-cat-badge {
    background-color: var(--wp--preset--color--background-elevated, #FBFBFB);
    color: var(--wp--preset--color--text-primary-on-white, #141F1A);
}
 
/* Active: pill portocaliu, badge dark (specificitate egala cu hover, dar declarat dupa = castiga) */
.jif-cat-pill.is-active {
    background-color: var(--wp--preset--color--action-default, #E96D0D);
    border-color: var(--wp--preset--color--action-default, #E96D0D);
    color: var(--wp--preset--color--action-onaction, #FBFBFB);
}
 
.jif-cat-pill.is-active .jif-cat-badge {
    background-color: var(--wp--preset--color--background-dark, #131A20);
    color: var(--wp--preset--color--action-onaction, #FBFBFB);
}
 
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .jif-cat-pill,
    .jif-cat-badge { transition: none !important; }
}

/* ==========================================================================
   27. SMART HEADER
   ========================================================================== */
   
 header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.35s ease;
}
 
header.wp-block-template-part.is-header-hidden {
    transform: translateY(-100%);
}
 
/* ==========================================================================
   28. SMART SCROLL
   ========================================================================== */
html.has-modal-open .is-mobile-smart-cta {
    display: none !important;
}

/* ==========================================================================
   29. BURGER MENU PE TABLETA SI MOBILE
   ========================================================================== */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  
  .wp-block-navigation__responsive-container-open:not(.is-menu-open) {
    display: flex !important;
  }
  
  .wp-block-navigation__responsive-container-close {
    display: flex !important;
  }
}