/* ======================================================
  GLOBAL DESIGN TOKENS & UTILITY CLASSES
  Design-system: Corporate + Hyperrealistic Textures
  Color-scheme: Triad
====================================================== */
:root{
    /* Core Palette */
    --clr-primary:#FF6B6B;          /* korálově červená */
    --clr-primary-dark:#E05353;
    --clr-secondary:#4ECDC4;        /* tyrkysová */
    --clr-secondary-dark:#3BB3AB;
    --clr-accent:#FFD93D;           /* zlatá */
    --clr-accent-dark:#E6C02F;

    /* Greys */
    --clr-dark:#222222;
    --clr-light:#ffffff;
    --clr-muted:#808080;

    /* Typography */
    --font-heading:'Archivo Black',sans-serif;
    --font-body:'Roboto',sans-serif;

    /* Effects */
    --radius-s:4px;
    --radius-m:8px;
    --radius-l:16px;
    --shadow-m:0 4px 14px rgba(0,0,0,.15);
    --shadow-l:0 8px 22px rgba(0,0,0,.25);

    /* Gradient backgrounds */
    --gradient-primary:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);
    --gradient-secondary:linear-gradient(135deg,var(--clr-secondary) 0%,var(--clr-accent) 100%);
    --overlay-dark:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
}

/* Typography ------------------------------------------------ */
html{font-size:16px;scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    color:var(--clr-dark);
    background-color:#fafafa;
    line-height:1.65;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--clr-dark);
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
    margin-bottom:.5em;
}

/* ======================================================
   LAYOUT HELPERS
====================================================== */
.section{padding:4rem 1.5rem;}
@media(max-width:768px){.section{padding:3rem 1rem;}}

.container.is-centered{display:flex;justify-content:center;align-items:center;}
.is-two-thirds{max-width:66%;margin:0 auto;}

/* ======================================================
   NAVIGATION
====================================================== */
.navbar{
    background:var(--clr-light);
    transition:background .3s ease;
}
.navbar.is-fixed-top{box-shadow:0 2px 8px rgba(0,0,0,.1);}
.navbar-item,
.navbar-link{font-weight:500;color:var(--clr-dark);}
.navbar-item:hover,
.navbar-link:hover{color:var(--clr-primary);}
.navbar-burger span{background:var(--clr-dark);}

/* ======================================================
   HERO SECTION
====================================================== */
#hero{
    position:relative;
    color:var(--clr-light);
}
#hero .title,#hero .subtitle{color:#ffffff;}
#hero .button{
    background:var(--clr-accent);
    border:none;
}
#hero .button:hover{background:var(--clr-accent-dark);}

/* ======================================================
   BUTTONS (GLOBAL)
====================================================== */
.btn,
button,
input[type='submit']{
    font-family:var(--font-body);
    background:var(--clr-primary);
    border:none;
    color:#fff;
    padding:.75rem 1.75rem;
    border-radius:var(--radius-m);
    cursor:pointer;
    transition:all .35s cubic-bezier(.25,1,.5,1);
    font-weight:600;
    display:inline-block;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-primary-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-m);
}
.btn:active,
button:active,
input[type='submit']:active{transform:translateY(0);box-shadow:none;}

/* ======================================================
   CARDS & CONTENT CONTAINERS
====================================================== */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#fff;
    border-radius:var(--radius-m);
    box-shadow:var(--shadow-m);
    overflow:hidden;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover{transform:translateY(-6px);}
.card-image{width:100%;height:220px;overflow:hidden;}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
.card-content{padding:1.25rem;text-align:center;}
/* link "Číst dál" */
a.read-more{
    color:var(--clr-secondary);
    font-weight:500;
    position:relative;
    transition:color .3s;
}
a.read-more::after{
    content:'';
    position:absolute;
    left:0;bottom:-2px;
    width:100%;height:2px;
    background:var(--clr-secondary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s;
}
a.read-more:hover{color:var(--clr-secondary-dark);}
a.read-more:hover::after{transform:scaleX(1);}

/* ======================================================
   BLOG CAROUSEL (simple horizontal scroll)
====================================================== */
.carousel{
    display:grid;
    gap:1rem;
    grid-auto-flow:column;
    grid-auto-columns:80%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:1rem;
}
.carousel-item{scroll-snap-align:center;}

/* ======================================================
   SWITCH (Innovation toggle example)
====================================================== */
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;}
.switch input{display:none;}
.switch .check{
    width:42px;height:24px;
    background:var(--clr-muted);
    border-radius:12px;
    position:relative;
    transition:background .3s;
}
.switch .check::before{
    content:'';
    position:absolute;
    width:18px;height:18px;
    background:#fff;border-radius:50%;
    top:3px;left:3px;
    transition:transform .3s cubic-bezier(.55,1.5,.55,1);
}
.switch input:checked + .check{background:var(--clr-primary);}
.switch input:checked + .check::before{transform:translateX(18px);}

/* ======================================================
   FORMS
====================================================== */
input[type='text'],
input[type='email'],
textarea{
    border:1px solid #ddd;
    border-radius:var(--radius-s);
    padding:.75rem 1rem;
    width:100%;
}
input:focus,textarea:focus{border-color:var(--clr-primary);outline:none;}

/* ======================================================
   FOOTER
====================================================== */
footer.footer{
    padding:2.5rem 1.5rem;
    color:#d9d9d9;
}
footer.footer a{color:#d9d9d9;text-decoration:none;transition:color .3s;}
footer.footer a:hover{color:var(--clr-accent);}

/* ======================================================
   SOCIAL LINKS (text-only)
====================================================== */
footer.footer a[href*='facebook'],
footer.footer a[href*='twitter'],
footer.footer a[href*='instagram']{
    font-weight:600;
}

/* ======================================================
   SUCCESS PAGE
====================================================== */
.success-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    text-align:center;
    background:var(--gradient-secondary);
    color:#fff;
}
.success-wrapper h1{color:#fff;text-shadow:none;}

/* ======================================================
   PRIVACY / TERMS PAGES
====================================================== */
.page-legal{padding-top:100px;padding-bottom:4rem;}

/* ======================================================
   COOKIES POPUP (base styles – override inline)
====================================================== */
#cookiePopup .button{background:var(--clr-secondary);border:none;}
#cookiePopup .button:hover{background:var(--clr-secondary-dark);}

/* ======================================================
   BACKGROUND IMAGES & OVERLAYS
====================================================== */
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center;}
.overlay-dark{background:var(--overlay-dark);}

/* ======================================================
   NON-LINEAR MOTION KEYFRAMES
====================================================== */
@keyframes floatY{
    0%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
    100%{transform:translateY(0);}
}
@keyframes subtleTilt{
    0%{transform:rotate(0deg);}
    25%{transform:rotate(1.5deg);}
    50%{transform:rotate(-1.5deg);}
    75%{transform:rotate(1deg);}
    100%{transform:rotate(0deg);}
}

/* Apply to elements via util classes */
.motion-float{animation:floatY 6s ease-in-out infinite;}
.motion-tilt{animation:subtleTilt 8s cubic-bezier(.45,.05,.55,.95) infinite;}

/* ======================================================
   GLASSMORPHIC UTILITY
====================================================== */
.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.3);
    border-radius:var(--radius-m);
}

/* ======================================================
   PARALLAX PLACEHOLDER (simple)
====================================================== */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
/* Safari fallback */
@supports(-webkit-overflow-scrolling:touch){
    .parallax{background-attachment:scroll;}
}

/* ======================================================
   ACCESSIBILITY & MISC
====================================================== */
.visually-hidden{
    position:absolute!important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
}
.navbar-burger{
    display: none;
}