/* =========================================================
   GLOBAL THEME VARIABLES – RETRO + SPLIT-COMPLEMENTARY
========================================================= */
:root{
    --color-primary:#FF6B6B;     /* koralovo-červená */
    --color-secondary:#FFD93D;   /* retro žltá */
    --color-accent:#34BFA4;      /* teal zelená */
    --color-dark:#1E1E1E;        /* uhlovo čierna */
    --color-light:#FFFFFF;       /* biela */
    --color-muted:#F8F8F8;       /* jemná sivá */

    --gradient-primary:linear-gradient(135deg,#FF6B6B 0%,#FFD93D 100%);
    --gradient-accent:linear-gradient(135deg,#34BFA4 0%,#FF6B6B 100%);

    --radius-lg:1.25rem;
    --transition-base:all .35s ease;
}

/* =========================================================
   BASE TYPOGRAPHY & ELEMENTS
========================================================= */
html{scroll-behavior:smooth}
body{
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
    color:var(--color-dark);
    background-color:var(--color-muted);
}
h1,h2,h3,h4,h5,h6{
    font-family:'Raleway',sans-serif;
    font-weight:900;
    line-height:1.2;
    color:var(--color-dark);
}
h1,h2{text-shadow:1px 1px 3px rgba(0,0,0,.5)}
p{line-height:1.8}

/* =========================================================
   GLOBAL BUTTONS & LINKS
========================================================= */
.btn,button,[type="button"],input[type="submit"]{
    background:var(--gradient-primary);
    color:var(--color-light);
    padding:.9rem 2rem;
    border:none;
    border-radius:9999px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition-base);
}
.btn:hover,button:hover,input[type="submit"]:hover{
    filter:brightness(1.1);
    transform:translateY(-2px);
}
a{
    color:var(--color-primary);
    transition:var(--transition-base);
}
a:hover{color:var(--color-accent);text-decoration:underline}
.read-more{
    font-weight:600;
    position:relative;
    padding-right:1.5rem;
}
.read-more::after{
    content:'→';
    position:absolute;
    right:0;
    transition:var(--transition-base);
}
.read-more:hover::after{transform:translateX(4px)}

/* =========================================================
   LAYOUT HELPERS
========================================================= */
.section-pad{padding-top:4rem;padding-bottom:4rem}
.glass{
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:var(--radius-lg);
}
.flex-center{display:flex;align-items:center;justify-content:center}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}

/* =========================================================
   HERO
========================================================= */
#hero{
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:var(--color-light);
}
#hero .btn{box-shadow:0 8px 20px rgba(0,0,0,.35)}

/* =========================================================
   CARD COMPONENT
========================================================= */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--color-light);
    border-radius:var(--radius-lg);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
    transition:var(--transition-base);
}
.card:hover{transform:translateY(-6px)}
.card-image{
    width:100%;
    height:200px;
    overflow:hidden;
    border-top-left-radius:var(--radius-lg);
    border-top-right-radius:var(--radius-lg);
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
.card-content{padding:1.5rem}

/* =========================================================
   TIMELINE
========================================================= */
.timeline-item{
    position:relative;
    padding-left:2rem;
}
.timeline-item::before{
    content:'';
    position:absolute;
    left:-9px;top:6px;
    width:14px;height:14px;
    background:var(--color-secondary);
    border-radius:50%;
}

/* =========================================================
   MODALS
========================================================= */
.modal{
    animation:fadeIn .4s ease forwards;
}
@keyframes fadeIn{
    from{opacity:0;transform:scale(.95)}
    to{opacity:1;transform:scale(1)}
}

/* =========================================================
   MORPHING ANIMATION (decor elements)
========================================================= */
@keyframes blobMorph{
    0%{border-radius:45% 55% 60% 40%/60% 40% 55% 45%}
    50%{border-radius:70% 30% 40% 60%/30% 70% 40% 60%}
    100%{border-radius:45% 55% 60% 40%/60% 40% 55% 45%}
}
.morph{
    animation:blobMorph 12s infinite ease-in-out;
}

/* =========================================================
   PARALLAX (background movement)
========================================================= */
.parallax-bg{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}

/* =========================================================
   SOCIAL LINKS (FOOTER)
========================================================= */
.footer-social a{
    color:var(--color-light);
    font-weight:600;
}
.footer-social a:hover{color:var(--color-secondary)}

/* =========================================================
   SUCCESS PAGE
========================================================= */
.page-success{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-accent);
    color:var(--color-light);
}

/* =========================================================
   PAGES WITH EXTRA TOP PADDING
========================================================= */
.page-static{padding-top:100px}

/* =========================================================
   UTILITIES & EFFECTS
========================================================= */
.shadow-lg-custom{box-shadow:0 12px 24px rgba(0,0,0,.18)}
.fade-in{animation:fadeIn .6s both}

/* =========================================================
   RESPONSIVE TWEAKS
========================================================= */
@media (max-width:768px){
    h1{font-size:2rem}
    .card-image{height:160px}
}