/* =========================================================================
   Dětská diskotéka — podstránky a chybové stránky ve vzhledu „Disko párty"
   Načítá se až za disko.css a používá jeho barvy, písma i patičku.
   ========================================================================= */

.sub-page{display:flex;flex-direction:column;min-height:100vh}
.sub-page main{position:relative;z-index:2;flex:1;padding:0 var(--gutter) 84px}

/* ---------- Hlavička: hlava kapybary + logo ---------- */
.sub-hero{position:relative;z-index:2;display:flex;justify-content:center;padding:22px var(--gutter) 6px}
.sub-brand{display:inline-flex;align-items:center;gap:10px;max-width:100%;color:inherit;text-decoration:none;border-radius:20px}
.sub-brand picture{flex:none}
.sub-brand__img{width:54px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transform:rotate(-6deg);transition:transform .25s var(--ease-pop)}
.sub-brand:hover .sub-brand__img{transform:rotate(6deg) scale(1.08)}
.sub-brand:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}
.sub-brand__logo{display:block;font-family:var(--font-display);font-size:clamp(1.45rem,6.8vw,2.3rem);line-height:1.05;letter-spacing:.015em;white-space:nowrap}
.sub-brand__logo .logo-word{display:inline-block;white-space:nowrap}
.sub-brand__logo .logo-word+.logo-word{margin-left:.3em}

/* ---------- Obsah ---------- */
.policy-container{max-width:820px;margin:0 auto}
.back-link{
    display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:14px 0 22px;padding:6px 18px 6px 10px;
    font-family:var(--font-display);font-size:1rem;line-height:1.1;color:#fff;text-decoration:none;
    background:var(--night-3);border:3px solid var(--violet);border-radius:999px;box-shadow:0 4px 0 var(--night-0);
    transition:transform .18s var(--ease-pop);
}
.back-link .material-symbols-outlined,.back-link .material-icons{font-size:22px;color:var(--violet)}
.back-link:hover{transform:translateX(-4px) rotate(-1.5deg)}
.back-link:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.policy-header{display:flex;flex-direction:column;align-items:center;margin:0 0 58px;text-align:center}
.policy-title{
    display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;
    font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,8.4vw,3rem);line-height:1.1;color:#fff;text-wrap:balance;
}
.policy-title .material-symbols-outlined,.policy-title .material-icons{
    display:grid;place-items:center;width:66px;height:66px;border-radius:50%;font-size:34px;
    color:#1a0b3f;background:var(--pink);box-shadow:0 0 0 4px #fff,0 6px 0 4px var(--night-0);transform:rotate(-10deg);
}
.policy-header p{margin-top:12px;font-size:1.1rem;font-weight:700;color:var(--ink-soft)}
.policy-header::after{
    content:'';width:128px;height:14px;margin-top:14px;background:var(--pink);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 14'%3E%3Cpath d='M3 7c8-6 13-6 21 0s13 6 21 0 13-6 21 0 13 6 21 0 13-6 21 0 13 6 17 1' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 14'%3E%3Cpath d='M3 7c8-6 13-6 21 0s13 6 21 0 13-6 21 0 13 6 21 0 13-6 21 0 13 6 17 1' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Sekce jako karty se samolepkou, barvy se střídají po šestkách */
.policy-section{
    --c:var(--pink);
    position:relative;margin:0 0 50px;padding:46px 20px 20px;border-radius:28px;
    background:var(--night-3);border:3px solid var(--c);box-shadow:var(--drop);
}
.policy-section:nth-of-type(6n+2){--c:var(--orange)}
.policy-section:nth-of-type(6n+3){--c:var(--yellow)}
.policy-section:nth-of-type(6n+4){--c:var(--lime)}
.policy-section:nth-of-type(6n+5){--c:var(--cyan)}
.policy-section:nth-of-type(6n){--c:var(--violet)}
.policy-section .section-title{
    display:block;max-width:none;margin:0 0 10px;text-align:left;
    font-size:clamp(1.25rem,4.8vw,1.5rem);line-height:1.2;color:var(--c);
}
.policy-section .section-title::after{content:none}
.policy-section .section-title .material-symbols-outlined,
.policy-section .section-title .material-icons{
    position:absolute;top:-30px;left:20px;display:grid;place-items:center;width:62px;height:62px;border-radius:20px;
    font-size:32px;color:#1a0b3f;background:var(--c);box-shadow:0 0 0 4px #fff,0 6px 0 4px var(--night-0);transform:rotate(-8deg);
}
.policy-section:nth-of-type(even) .section-title .material-symbols-outlined,
.policy-section:nth-of-type(even) .section-title .material-icons{transform:rotate(7deg)}

.section-content{color:var(--ink-soft)}
.section-content p{margin:0 0 12px}
.section-content p:last-child{margin-bottom:0}
.section-content ul{margin:10px 0 14px;padding-left:1.4em}
.section-content ul:last-child{margin-bottom:0}
.section-content li{margin-bottom:6px}
.section-content li::marker{color:var(--c)}
.section-content strong{color:var(--ink)}
.section-content a{color:var(--cyan);font-weight:700}
.section-content a:hover{color:var(--yellow)}
.highlight{color:var(--yellow);font-weight:800}

.contact-box{margin:14px 0;padding:16px 18px;text-align:center;border-radius:20px;background:rgba(63,213,255,.1);border:3px dashed var(--cyan);color:var(--ink-soft)}
.contact-box h3{margin-bottom:8px;font-family:var(--font-display);font-weight:400;font-size:1.25rem;color:var(--cyan)}
.contact-box p{margin:4px 0}
.contact-box a{color:var(--cyan)!important;font-weight:800;overflow-wrap:anywhere}
.contact-box a:hover{color:var(--yellow)!important}
.policy-container>.contact-box{margin:0 0 30px}

.social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:18px 0 6px}
.social-links a{
    --c:#ff2d3d;--cd:#a8101c;
    display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:10px 20px;
    font-family:var(--font-display);font-size:1.05rem;line-height:1.1;color:#fff;text-decoration:none;
    background:var(--c);border:3px solid #fff;border-radius:999px;box-shadow:0 5px 0 var(--cd);
    transition:transform .18s var(--ease-pop),box-shadow .18s ease;color-scheme:only light;
}
.social-links a:nth-child(2){--c:#1ed760;--cd:#0f7a36;color:#03140a}
.social-links a:nth-child(3){--c:#fa2d55;--cd:#a3102d}
.social-links a:hover{transform:translateY(-3px) rotate(-2deg)}
.social-links a:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cd)}
.social-links .bi{width:1.3em;height:1.3em}

.code-block{
    margin:14px 0 4px;padding:14px 16px;border-radius:16px;background:var(--night-0);border:2px solid rgba(255,255,255,.12);
    font-family:ui-monospace,Consolas,'Courier New',monospace;font-size:.85rem;line-height:1.6;color:var(--lime);
    white-space:pre-line;overflow-x:auto;
}
.last-update{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-size:.92rem;color:var(--ink-mute)}
.last-update .material-icons,.last-update .material-symbols-outlined{font-size:20px}

/* ---------- Chybové stránky ---------- */
.error-container{max-width:640px;margin:0 auto;padding:18px 0 10px;text-align:center}
.error-code{display:flex;justify-content:center;margin-bottom:4px;font-family:var(--font-display);font-size:clamp(5rem,26vw,8.5rem);line-height:1.05;letter-spacing:.02em}
.error-emoji{margin:12px 0 8px;font-size:3rem;line-height:1.2}
.error-title{margin:0 0 10px;font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,6.6vw,2.4rem);line-height:1.15;color:#fff;text-wrap:balance}
.error-message{margin:0 auto 26px;max-width:34ch;font-size:1.1rem;color:var(--ink-soft)}
.server-message{
    display:flex;align-items:center;gap:12px;max-width:520px;margin:0 auto 28px;padding:14px 18px;text-align:left;
    border-radius:20px;background:rgba(255,79,163,.12);border:3px dashed var(--pink);color:var(--ink);
}
.server-message .material-symbols-outlined{flex:none;font-size:30px;color:var(--pink)}
.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.btn{
    display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:12px 24px;
    font-family:var(--font-display);font-size:1.08rem;line-height:1.1;color:#2a1100;text-decoration:none;
    background:linear-gradient(180deg,#ffe36e,#ffc21a);border:3px solid #fff;border-radius:999px;
    box-shadow:0 6px 0 #b98400,0 16px 30px rgba(255,194,26,.2);
    transition:transform .18s var(--ease-pop),box-shadow .18s ease;color-scheme:only light;
}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b98400}
.btn .material-symbols-outlined{font-size:24px}
.btn .bi{width:1.3em;height:1.3em}
.btn-secondary{color:#fff;background:linear-gradient(180deg,#ff5a5a,#e0182b);box-shadow:0 6px 0 #8f0c18,0 16px 30px rgba(224,24,43,.2)}
.btn-secondary:active{box-shadow:0 2px 0 #8f0c18}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

@media (min-width:600px){
    .sub-hero{padding-top:30px}
    .sub-brand__img{width:64px}
    .policy-section{padding:48px 30px 26px}
}
@media (prefers-reduced-motion:reduce){
    .sub-brand__img,.back-link,.social-links a,.btn{transition:none}
}