/**
 * Branike Blocks — Heading block styles  v1.0.2
 */

/* ── Text alignment ───────────────────────────────────────────────────────── */
.wp-block-branike-heading.has-text-align-left    { text-align: left; }
.wp-block-branike-heading.has-text-align-center  { text-align: center; }
.wp-block-branike-heading.has-text-align-right   { text-align: right; }
.wp-block-branike-heading.has-text-align-justify { text-align: justify; }

/* ── Gradient text ────────────────────────────────────────────────────────── */
/* CSS fallback gradient — inline style z computeStyles() alebo WP color panel ho prepisuje */
.wp-block-branike-heading.has-gradient-text {
    background-image: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Highlight pozadie ────────────────────────────────────────────────────── */
.wp-block-branike-heading.has-highlight-bg {
    /* Farba cez --bb-h-bg (nezasahuje do WP color support pre text farbu) */
    background-color: var(--bb-h-bg) !important;
    /* border-radius, padding riadia inline štýly z computeStyles() */
}

/* ── Dekoratívna podčiara ─────────────────────────────────────────────────── */

/* Heading s podčiarou dostane padding-bottom pre priestor */
.wp-block-branike-heading.has-bb-line {
    padding-bottom: calc(var(--bb-h-line-h, 3px) + var(--bb-h-line-offset, 6px));
}

/* Spoločný základ ::after */
.wp-block-branike-heading.has-bb-line::after {
    content: '';
    display: block;
    width: var(--bb-h-line-w, 60%);
    height: var(--bb-h-line-h, 3px);
    margin-top: var(--bb-h-line-offset, 6px);
    border-radius: 2px;
}

/* Zarovnanie čiary */
.wp-block-branike-heading.has-bb-line--left::after   { margin-left: 0; margin-right: auto; }
.wp-block-branike-heading.has-bb-line--center::after { margin-left: auto; margin-right: auto; }
.wp-block-branike-heading.has-bb-line--right::after  { margin-left: auto; margin-right: 0; }

/* Solid */
.wp-block-branike-heading.has-bb-line--solid::after {
    background: var(--bb-h-line-color, var(--bb-primary, #7C3AED));
}

/* Dashed — pomocou repeating-linear-gradient (žiadny border, lepšia kontrola) */
.wp-block-branike-heading.has-bb-line--dashed::after {
    background: repeating-linear-gradient(
        90deg,
        var(--bb-h-line-color, #5B21B6) 0px,
        var(--bb-h-line-color, var(--bb-primary, #7C3AED)) 10px,
        transparent 10px,
        transparent 18px
    );
}

/* Dotted */
.wp-block-branike-heading.has-bb-line--dotted::after {
    background: repeating-linear-gradient(
        90deg,
        var(--bb-h-line-color, #5B21B6) 0px,
        var(--bb-h-line-color, var(--bb-primary, #7C3AED)) 4px,
        transparent 4px,
        transparent 10px
    );
    border-radius: 99px;
}

/* Wave — SVG data URL, farba baked-in cez --bb-h-line-bg (JS generuje) */
.wp-block-branike-heading.has-bb-line--wave::after {
    background-image: var(--bb-h-line-bg);
    background-repeat: repeat-x;
    background-size: 20px var(--bb-h-line-h, 6px);
    background-position: center;
    background-color: transparent;
    height: max(var(--bb-h-line-h, 3px), 6px);
    border-radius: 0;
}

/* Gradient */
.wp-block-branike-heading.has-bb-line--gradient::after {
    background: var(--bb-h-line-grad, linear-gradient(90deg, #5B21B6, #7C3AED));
}

/* ── Typing cursor (CSS-only) ─────────────────────────────────────────────── */
/*
 * CURSOR: vždy v ::after (inline, ZA textom).
 * PODČIARA + CURSOR: cursor ostáva v ::after, linka sa presunie do ::before
 * (position:absolute, kotví sa na bottom heading elementu).
 * Heading dostane position:relative pre správne kotvenie ::before.
 */

.wp-block-branike-heading.has-typing-animation::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    font-weight: 400;
    line-height: 1;
    vertical-align: baseline;
    animation: bb-h-cursor 1.1s step-end infinite;
}

/* Keď je aktívna aj podčiara: cursor ostáva v ::after, ::after sa resetuje z line štýlov */
.wp-block-branike-heading.has-bb-line.has-typing-animation {
    position: relative; /* pre ::before absolute positioning */
}

/* Reset ::after z line štýlov — cursor preberá prioritu */
.wp-block-branike-heading.has-bb-line.has-typing-animation::after {
    content: '|' !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    margin-top: 0 !important;
    margin-left: 2px !important;
    font-weight: 400;
    border-radius: 0 !important;
    animation: bb-h-cursor 1.1s step-end infinite !important;
}

/* Linka presunie do ::before (absolute, kotví sa dole) */
.wp-block-branike-heading.has-bb-line.has-typing-animation::before {
    content: '' !important;
    position: absolute;
    bottom: 0;
    height: var(--bb-h-line-h, 3px);
    width: var(--bb-h-line-w, 60%);
    border-radius: 2px;
    display: block !important;
    animation: none !important;
}

/* Zarovnanie ::before linky */
.wp-block-branike-heading.has-bb-line--left.has-typing-animation::before   { left: 0; right: auto; }
.wp-block-branike-heading.has-bb-line--center.has-typing-animation::before { left: 50%; transform: translateX(-50%); }
.wp-block-branike-heading.has-bb-line--right.has-typing-animation::before  { right: 0; left: auto; }

/* Typy linky pre ::before */
.wp-block-branike-heading.has-bb-line--solid.has-typing-animation::before {
    background: var(--bb-h-line-color, var(--bb-primary, #7C3AED));
}
.wp-block-branike-heading.has-bb-line--dashed.has-typing-animation::before {
    background: repeating-linear-gradient(
        90deg,
        var(--bb-h-line-color, #5B21B6) 0px,
        var(--bb-h-line-color, var(--bb-primary, #7C3AED)) 10px,
        transparent 10px,
        transparent 18px
    );
}
.wp-block-branike-heading.has-bb-line--dotted.has-typing-animation::before {
    background: repeating-linear-gradient(
        90deg,
        var(--bb-h-line-color, #5B21B6) 0px,
        var(--bb-h-line-color, var(--bb-primary, #7C3AED)) 4px,
        transparent 4px,
        transparent 10px
    );
    border-radius: 99px;
}
.wp-block-branike-heading.has-bb-line--wave.has-typing-animation::before {
    background-image: var(--bb-h-line-bg);
    background-repeat: repeat-x;
    background-size: 20px var(--bb-h-line-h, 6px);
    background-position: center;
    background-color: transparent;
    height: max(var(--bb-h-line-h, 3px), 6px);
    border-radius: 0;
}
.wp-block-branike-heading.has-bb-line--gradient.has-typing-animation::before {
    background: var(--bb-h-line-grad, linear-gradient(90deg, #5B21B6, #7C3AED));
}

@keyframes bb-h-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-branike-heading.has-typing-animation::after,
    .wp-block-branike-heading.has-bb-line.has-typing-animation::after {
        animation: none !important;
        content: '' !important;
        display: none !important;
    }
}

/* ── Entrance animations ──────────────────────────────────────────────────── */

.wp-block-branike-heading.bb-h-anim-ready[data-bb-anim="fade-in"]     { opacity: 0; }
.wp-block-branike-heading.bb-h-anim-ready[data-bb-anim="slide-up"]    { opacity: 0; transform: translateY(24px); }
.wp-block-branike-heading.bb-h-anim-ready[data-bb-anim="slide-left"]  { opacity: 0; transform: translateX(-24px); }
.wp-block-branike-heading.bb-h-anim-ready[data-bb-anim="slide-right"] { opacity: 0; transform: translateX(24px); }
.wp-block-branike-heading.bb-h-anim-ready[data-bb-anim="scale-in"]    { opacity: 0; transform: scale(0.93); }
.wp-block-branike-heading.bb-h-anim-ready[data-bb-anim="blur-in"]     { opacity: 0; filter: blur(6px); }

.wp-block-branike-heading.bb-h-anim-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition:
        opacity   var(--bb-h-dur, 0.6s) var(--bb-h-ease, ease) var(--bb-h-delay, 0s),
        transform var(--bb-h-dur, 0.6s) var(--bb-h-ease, ease) var(--bb-h-delay, 0s),
        filter    var(--bb-h-dur, 0.6s) var(--bb-h-ease, ease) var(--bb-h-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-branike-heading.bb-h-anim-ready,
    .wp-block-branike-heading.bb-h-anim-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ── Underline draw animation ─────────────────────────────────────────────── */
/*
 * Podčiara sa "nakreslí" sprava doľava keď blok vstúpi do view.
 * JS pridá .bb-h-line-drawn (po entrance animácii alebo cez IO).
 * --bb-h-draw-delay: JS nastaví = duration + delay entrance animácie.
 */

.wp-block-branike-heading.has-bb-line.has-line-draw-anim::after {
    width: 0 !important;
    transition: width var(--bb-h-dur, 0.7s) ease-out var(--bb-h-draw-delay, 0s);
}

.wp-block-branike-heading.has-bb-line.has-line-draw-anim.bb-h-line-drawn::after {
    width: var(--bb-h-line-w, 60%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-branike-heading.has-bb-line.has-line-draw-anim::after {
        width: var(--bb-h-line-w, 60%) !important;
        transition: none !important;
    }
}

/* ── Word highlight reveal animation ─────────────────────────────────────── */
/*
 * Zvýraznené slová (mark.bb-hl via branike/highlight format type) sa
 * animovane "odhalia" — background-size expanzia zľava doprava.
 * JS pred triggerom: vezme backgroundColor z inline style, nastaví
 * ako --bb-hl-c, a následne pridá .bb-h-word-revealed na heading.
 */

.wp-block-branike-heading.has-word-reveal mark.bb-hl {
    background-color: transparent !important;
    background-image: linear-gradient(var(--bb-hl-c, #fde68a), var(--bb-hl-c, #fde68a));
    background-size: 0% 88%;
    background-position: left 90%;
    background-repeat: no-repeat;
    border-radius: 2px;
    /* Stagger per mark: JS nastaví --bb-hl-delay individuálne */
    transition: background-size var(--bb-h-dur, 0.6s) ease-out var(--bb-hl-delay, var(--bb-h-draw-delay, 0s));
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.wp-block-branike-heading.has-word-reveal.bb-h-word-revealed mark.bb-hl {
    background-size: 100% 88%;
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-branike-heading.has-word-reveal mark.bb-hl {
        background-color: revert !important;
        background-image: none !important;
        background-size: auto !important;
        transition: none !important;
    }
}

/* ── Block styles ─────────────────────────────────────────────────────────── */

/* Accent — tučnejší, väčší letter-spacing */
.wp-block-branike-heading.is-style-accent {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Outlined — len obrys textu */
.wp-block-branike-heading.is-style-outlined {
    -webkit-text-stroke: 2px currentColor;
    color: transparent;
}

/* Display — extra veľké, thin weight pre kontrast */
.wp-block-branike-heading.is-style-display {
    font-size: clamp(2.5em, 7vw, 6em);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.03em;
}