/*
Theme Name: Babadlo
Theme URI: https://babadlo.sk
Description: Téma pre bábkové divadlo Babadlo s remeselným vzhľadom podľa loga divadla. Ručne kreslené obrysy, ošúchaná opona, prešívané rámčeky a farby z loga.
Author: belimit.sk
Author URI: https://belimit.sk
Template: bricks
Version: 1.6.2
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: babadlo
*/
/* =========================================================================
1. FARBY A PREMENNÉ (dajú sa použiť aj v Bricks: var(--bb-blue) atď.)
========================================================================= */
:root{
--bb-ink:#151A30; /* atrament – texty, obrysy */
--bb-ink-2:#2A3150;
--bb-paper:#FBF6EC; /* papier – pozadie */
--bb-paper-2:#F1E8D5;
--bb-white:#FFFFFF;
--bb-blue:#2E6BE6; /* modrá stuha z loga */
--bb-blue-soft:#BFD3FA; /* svetlomodrý kruh z loga */
--bb-gold:#F0D290; /* zlatý lem stuhy z loga */
--bb-wood:#C99A5B;
--bb-scene-po:#2E6BE6; /* scéna Prešov */
--bb-scene-ba:#F08A24; /* scéna Bratislava */
--bb-scene-pu:#3FAE5A; /* scéna Púchov */
--bb-muted:#6B6F80;
--bb-line:#E2D6BE;
/* farby prešívaných rámčekov (ako repertoár na pôvodnom webe) */
--bb-frame-1:#E9A21A; --bb-frame-2:#B57CF0; --bb-frame-3:#F2A766;
--bb-frame-4:#3FA2D9; --bb-frame-5:#7DB33A; --bb-frame-6:#3FBF9A;
--bb-font-head:"Bricolage Grotesque", system-ui, sans-serif;
--bb-font-body:"Figtree", system-ui, sans-serif;
--bb-radius:7px;
}
body{font-family:var(--bb-font-body);color:var(--bb-ink);background:var(--bb-paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--bb-font-head);letter-spacing:-.015em}
/* =========================================================================
2. RUČNE KRESLENÝ OBRYS + TIEŇ → trieda .bb-outline
Obrys a tieň sa kreslia cez pseudo-element s filtrom #bb-wobble,
takže čiara je nepresná ako v logu, ale text a fotky ostávajú ostré.
Nastavenia: --bb-bw (hrúbka), --bb-bc (farba čiary), --bb-sh (tieň).
========================================================================= */
.bb-outline{position:relative;border:var(--bb-bw,2px) solid transparent;border-radius:var(--bb-radius);background-clip:padding-box;--bb-sh:4px 4px 0 var(--bb-ink)}
.bb-outline::before{content:"";position:absolute;inset:calc(-1 * var(--bb-bw,2px));border:var(--bb-bw,2px) solid var(--bb-bc,var(--bb-ink));border-radius:inherit;box-shadow:var(--bb-sh);filter:url(#bb-wobble);pointer-events:none;z-index:1}
.bb-outline--lg{--bb-bw:2.5px;--bb-sh:6px 6px 0 var(--bb-ink)}
.bb-outline--gold{--bb-sh:6px 6px 0 var(--bb-gold)}
.bb-outline--flat{--bb-sh:none}
/* nity v rohoch ako na stuhe loga → .bb-rivets */
.bb-rivets{position:relative}
.bb-rivets::after{content:"";position:absolute;inset:6px;pointer-events:none;z-index:2;
background:radial-gradient(circle,var(--bb-rivet,var(--bb-ink)) 0 1.9px,transparent 2.4px) top left/6px 6px no-repeat,
radial-gradient(circle,var(--bb-rivet,var(--bb-ink)) 0 1.9px,transparent 2.4px) top right/6px 6px no-repeat,
radial-gradient(circle,var(--bb-rivet,var(--bb-ink)) 0 1.9px,transparent 2.4px) bottom left/6px 6px no-repeat,
radial-gradient(circle,var(--bb-rivet,var(--bb-ink)) 0 1.9px,transparent 2.4px) bottom right/6px 6px no-repeat}
/* =========================================================================
3. TLAČIDLÁ → .bb-btn + .bb-btn--gold / --blue / --paper
========================================================================= */
.bb-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--bb-font-body);font-weight:700;font-size:16px;line-height:1.2;padding:13px 22px;color:var(--bb-ink);background:var(--bb-white);border:2px solid transparent;border-radius:var(--bb-radius);position:relative;cursor:pointer;transition:transform .12s;text-decoration:none}
.bb-btn::before{content:"";position:absolute;inset:-2px;border:2px solid var(--bb-ink);border-radius:inherit;box-shadow:var(--bb-sh,3px 3px 0 var(--bb-ink));filter:url(#bb-wobble);pointer-events:none}
.bb-btn:hover{transform:translate(-1px,-1px);--bb-sh:5px 5px 0 var(--bb-ink)}
.bb-btn:active{transform:translate(2px,2px);--bb-sh:1px 1px 0 var(--bb-ink)}
.bb-btn--gold{background:var(--bb-gold)}
.bb-btn--blue{background:var(--bb-blue);color:#fff}
.bb-btn--paper{background:var(--bb-paper)}
/* =========================================================================
4. NADPIS S RUČNE KRESLENOU ČIAROU → .bb-underline
========================================================================= */
.bb-underline{display:inline-block;padding-bottom:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 7' stroke='%23F0D290' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 12px no-repeat}
/* =========================================================================
5. PREŠÍVANÝ RÁMČEK NA FOTKU → .bb-frame (+ .bb-frame--1 … --6)
Do rámčeka stačí vložiť obrázok, rámček nemusí byť v Photoshope.
========================================================================= */
.bb-frame{position:relative;padding:11px;background:var(--bb-fc,var(--bb-frame-1));border:2.5px solid transparent;border-radius:6px;background-clip:padding-box}
.bb-frame::after{content:"";position:absolute;inset:-2.5px;border:2.5px solid var(--bb-ink);border-radius:inherit;filter:url(#bb-wobble);pointer-events:none}
.bb-frame::before{content:"";position:absolute;inset:3px;border:3px dotted var(--bb-ink);border-radius:4px;opacity:.8;filter:url(#bb-wobble);pointer-events:none;z-index:1}
.bb-frame img{display:block;width:100%;height:auto;object-fit:cover;border:2px solid var(--bb-ink);position:relative}
.bb-frame--1{--bb-fc:var(--bb-frame-1)}.bb-frame--2{--bb-fc:var(--bb-frame-2)}.bb-frame--3{--bb-fc:var(--bb-frame-3)}
.bb-frame--4{--bb-fc:var(--bb-frame-4)}.bb-frame--5{--bb-fc:var(--bb-frame-5)}.bb-frame--6{--bb-fc:var(--bb-frame-6)}
/* =========================================================================
6. STUHA S NÁZVOM (tvar zo stuhy loga) → .bb-ribbon (+ .bb-ribbon--blue)
========================================================================= */
.bb-ribbon{display:inline-block;position:relative;isolation:isolate;padding:8px 30px;font-family:var(--bb-font-head);font-weight:800;font-size:21px;line-height:1.15;text-align:center;color:var(--bb-ink)}
.bb-ribbon::before{content:"";position:absolute;inset:0 -2px;z-index:-1;filter:url(#bb-wobble);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M1.5 1.5 H198.5 L188 20 L198.5 38.5 H1.5 L12 20 Z' fill='%23F0D290' stroke='%23151A30' stroke-width='2.5' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.bb-ribbon--blue{color:#fff}
.bb-ribbon--blue::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M1.5 1.5 H198.5 L188 20 L198.5 38.5 H1.5 L12 20 Z' fill='%232E6BE6' stroke='%23151A30' stroke-width='2.5' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* =========================================================================
7. OKRÚHLA PEČIATKA VEKU (kruh z loga) → .bb-age 3+rokov
========================================================================= */
.bb-age{width:66px;height:66px;border-radius:50%;background:var(--bb-blue-soft);display:inline-flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--bb-font-head);font-weight:800;font-size:21px;line-height:1;position:relative}
.bb-age::before{content:"";position:absolute;inset:0;border:2px solid var(--bb-ink);border-radius:50%;box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 5.5px var(--bb-ink);filter:url(#bb-wobble);pointer-events:none}
.bb-age small{font:700 8px var(--bb-font-body);letter-spacing:.04em;text-transform:uppercase}
/* =========================================================================
8. OPONA → shortcode [babadlo_opona] alebo trieda .bb-curtain na