/* ------------------------------------------------------------------
   Global Theme Variables – Glassmorphism + Biomorphic Neutral Palette
-------------------------------------------------------------------*/
:root{
    /* Neutrals */
    --color-bg:#f5f7fa;
    --color-surface:#ffffff;
    --color-text:#333333;
    --color-heading:#222222;
    /* Accent */
    --color-accent:#4f7cff;
    --color-accent-dark:#3e63d4;
    /* Glassmorphism */
    --glass-bg:rgba(255,255,255,0.15);
    --glass-border:rgba(255,255,255,0.35);
    --glass-shadow:0 4px 40px rgba(0,0,0,0.08);
    /* Gradients */
    --gradient-overlay:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55));
    --gradient-accent:linear-gradient(135deg,#4f7cff 0%,#8cb8ff 100%);
    /* Typography */
    --font-main:'Lato',sans-serif;
    --font-heading:'Roboto',sans-serif;
    /* Radius & Spacing */
    --radius:14px;
    --radius-pill:999px;
    --gap:1.5rem;
}
/* -------------------------------------------------------
   Base Reset & Typography
--------------------------------------------------------*/
*,
*::before,
*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-main);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--color-heading);
    line-height:1.2;
    margin-bottom:0.5em;
}
/* Headings inside hero must stay white */
.hero .title,
.hero .subtitle{color:#ffffff;}
/* Bulma section tweak – natural height */
.section{padding:4rem 1.5rem;}
/* -------------------------------------------------------
   Glassmorphism Helper
--------------------------------------------------------*/
.glass{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-radius:var(--radius);
    box-shadow:var(--glass-shadow);
}
/* -------------------------------------------------------
   Cards & Image Containers
--------------------------------------------------------*/
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border-radius:var(--radius);
    overflow:hidden;
}
.card-image,
.image-container{
    width:100%;
    height:300px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.card-content{padding:var(--gap);}

/* -------------------------------------------------------
   Buttons & Interactive Elements
--------------------------------------------------------*/
button,
input[type='submit'],
.btn{
    cursor:pointer;
    font-family:var(--font-heading);
    border:none;
    border-radius:var(--radius-pill);
    padding:0.75rem 1.75rem;
    background:var(--color-accent);
    color:#ffffff;
    font-size:1rem;
    transition:all .3s ease;
}
button:hover,
input[type='submit']:hover,
.btn:hover{
    background:var(--color-accent-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,0.12);
}
button:active,
input[type='submit']:active,
.btn:active{
    transform:translateY(0);
    box-shadow:none;
}
/* Anchor & "Číst dál" link */
a{color:var(--color-accent);text-decoration:none;transition:color .2s;}
a:hover{text-decoration:underline;color:var(--color-accent-dark);}
.read-more{font-weight:600;position:relative;padding-right:1rem;}
.read-more::after{
    content:'→';
    position:absolute;
    right:0;
    transition:transform .3s;
}
.read-more:hover::after{transform:translateX(4px);}

/* -------------------------------------------------------
   Navbar Custom
--------------------------------------------------------*/
.navbar.is-transparent{
    background:transparent;
    backdrop-filter:blur(6px);
}
.navbar-burger span{background:var(--color-heading);}

/* -------------------------------------------------------
   Hero Section
--------------------------------------------------------*/
.hero{
    position:relative;
    color:#ffffff;
    background-size:cover;
    background-repeat:no-repeat;
}
.hero-background::after{
    content:'';
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    background:var(--gradient-overlay);
}
.biomorphic-shape{
    position:absolute;
    width:350px;height:350px;
    background:var(--gradient-accent);
    opacity:0.15;
    border-radius:58% 42% 55% 45%/54% 52% 48% 46%;
    top:-120px;right:-120px;
    animation:blob 12s infinite alternate;
    pointer-events:none;
}
@keyframes blob{
    0%{border-radius:58% 42% 55% 45%/54% 52% 48% 46%;}
    100%{border-radius:45% 55% 35% 65%/60% 40% 60% 40%;}
}

/* -------------------------------------------------------
   Statistics Widgets
--------------------------------------------------------*/
.stat-widget{padding:2rem 1rem;}
.stat-widget .title{font-size:2.25rem;margin-bottom:0.25rem;}
.stat-widget .subtitle{font-size:0.9rem;letter-spacing:0.5px;color:var(--color-text);}

/* -------------------------------------------------------
   FAQ Component
--------------------------------------------------------*/
details{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:var(--radius);
    margin-bottom:1rem;
    padding:1rem 1.25rem;
    cursor:pointer;
}
details[open]{box-shadow:var(--glass-shadow);}
details summary{
    font-weight:600;
    outline:none;
    list-style:none;
}
details summary::-webkit-details-marker{display:none;}

/* -------------------------------------------------------
   Footer
--------------------------------------------------------*/
.footer{
    background:var(--color-surface);
    padding:2rem 1rem;
    text-align:center;
    font-size:0.95rem;
}
.footer a{margin:0 0.25rem;}
/* Social text links styling */
.footer a:hover{text-decoration:underline;}
/* -------------------------------------------------------
   Success Page Utility
--------------------------------------------------------*/
.success-hero,
.hero.is-fullheight.is-primary{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}
/* -------------------------------------------------------
   Privacy & Terms Spacing
--------------------------------------------------------*/
.page-legal{padding-top:100px;}
/* -------------------------------------------------------
   Particle Animation (canvas replacement with pseudo)
--------------------------------------------------------*/
.particles{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    overflow:hidden;pointer-events:none;
}
.particle{
    position:absolute;
    width:6px;height:6px;
    background:rgba(255,255,255,0.35);
    border-radius:50%;
    animation:floatUp linear infinite;
}
@keyframes floatUp{
    0%{transform:translateY(0) scale(1);}
    100%{transform:translateY(-100vh) scale(0.5);}
}
/* Quick generator of 30 particles */
@media (prefers-reduced-motion:no-preference){
    .particles .particle:nth-child(odd){animation-duration:8s;}
    .particles .particle:nth-child(even){animation-duration:12s;}
}

/* -------------------------------------------------------
   Responsive Tweaks
--------------------------------------------------------*/
@media (max-width:1023px){
    .navbar-menu{backdrop-filter:blur(12px);}
}
@media (max-width:768px){
    .card-image,.image-container{height:220px;}
}
/* -------------------------------------------------------
   Utility Classes
--------------------------------------------------------*/
.text-center{text-align:center;}
.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}