/* =========================================================
   style.css  |  SdruženéPříjmy – Modern & Eco-Minimal
   ========================================================= */

/* ---------- ROOT & THEME ---------- */
:root{
    /* Color Scheme – Monochrome + subtle accent for focus */
    --bg-main:#ffffff;
    --bg-secondary:#f2f2f2;
    --bg-dark:#111111;
    --bg-overlay:rgba(0,0,0,0.55);
    --text-main:#222222;
    --text-light:#ffffff;
    --accent:#444444;       /* smělý, ale stále monochromatický */
    --accent-hover:#000000; /* pro interakce */
    --radius:0.5rem;
    --transition:all .3s ease;
}

/* ---------- GLOBAL RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'DM Sans',Arial,Helvetica,sans-serif;
    color:var(--text-main);
    background-color:var(--bg-main);
    line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Space Grotesk',Helvetica,Arial,sans-serif;
    color:var(--text-main);
    font-weight:700;
    text-align:center;
    margin-bottom:1rem;
}
p{margin-bottom:1rem;}
a{color:var(--accent);text-decoration:none;transition:var(--transition);}
a:hover,a:focus{color:var(--accent-hover);}


/* ---------- BUTTONS (global) ---------- */
.btn,button,input[type='submit']{
    font-family:'DM Sans',sans-serif;
    border-radius:var(--radius);
    padding:.75rem 1.5rem;
    transition:var(--transition);
    border:2px solid var(--accent);
    background:var(--accent);
    color:var(--text-light);
}
.btn-outline-light,
.btn.btn-outline-light{
    border-color:var(--text-light);
    background:transparent;
}
.btn:hover,
.btn:focus,
button:hover,
input[type='submit']:hover{
    background:var(--accent-hover);
    border-color:var(--accent-hover);
    color:var(--text-light);
}

/* ---------- NAVBAR ---------- */
.navbar-brand{font-family:'Space Grotesk',sans-serif;font-weight:700;}
.nav-link{position:relative;}
.nav-link::after{
    content:'';
    position:absolute;left:0;bottom:-4px;
    width:0;height:2px;
    background-color:var(--text-light);
    transition:var(--transition);
}
.nav-link:hover::after,
.nav-link:focus::after{width:100%;}

/* ---------- HERO SECTION ---------- */
#home{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:var(--text-light);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
#home h1,#home p{color:var(--text-light);text-shadow:1px 1px 4px rgba(0,0,0,.6);}
#home .btn{border-color:#fff;}

/* ---------- SECTIONS ---------- */
section{padding:4rem 0;}
.bg-light{background-color:var(--bg-secondary)!important;}

/* ---------- TIMELINE ---------- */
.timeline::before{
    content:'';
    position:absolute;
    top:0;bottom:0;left:50%;
    width:2px;background:var(--accent);
    transform:translateX(-50%);
}
.timeline .card{border:none;background:var(--bg-main);}

/* ---------- CARD BASE ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background-color:var(--bg-main);
    border-radius:var(--radius);
}
.card-image,
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    margin:0 auto;
}
.card-content{flex:1;padding:1.5rem;}

/* ---------- PROGRESS BAR ---------- */
.progress{
    height:8px;
    border-radius:4px;
    background-color:#dcdcdc;
}
.progress-bar{
    font-size:.75rem;
    line-height:8px;
    border-radius:4px;
    background-color:var(--accent);
}

/* ---------- READ MORE LINK ---------- */
.read-more{
    display:inline-block;
    margin-top:1rem;
    font-weight:600;
    border-bottom:1px solid transparent;
}
.read-more:hover{border-color:var(--accent-hover);}

/* ---------- SOCIAL LINKS ---------- */
.social-link,
footer a{
    color:var(--text-light);
    transition:var(--transition);
}
.social-link:hover,
footer a:hover{color:#d1d1d1;}
footer ul{padding-left:0;list-style:none;}

/* ---------- MEDIA GALLERY ---------- */
#mediaGallery .image-container{height:300px;border-radius:var(--radius);}

/* ---------- PARALLAX (scroll-dependent) ---------- */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
.fade-in{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease,transform .6s ease;
}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* ---------- COOKIE POPUP ---------- */
#cookiePopup p{margin:0;padding-right:1rem;}
#cookiePopup .btn{background:var(--accent);border-color:var(--accent);}
#cookiePopup .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

/* ---------- SUCCESS PAGE ---------- */
.page-success{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:1.5rem;
    background-color:var(--bg-secondary);
}
.page-success h1{color:var(--accent);}
.page-success a.btn{margin-top:1rem;}

/* ---------- LEGAL PAGES (privacy, terms) ---------- */
.legal-page{padding-top:100px!important;}

/* ---------- UTILITIES ---------- */
.section-dark{background-color:var(--bg-dark);color:var(--text-light);}
.text-shadow-sm{text-shadow:1px 1px 3px rgba(0,0,0,.5);}
.z-index-1{z-index:1;}
/* Responsive spacing helpers */
.mt-6{margin-top:4rem!important;}
.mb-6{margin-bottom:4rem!important;}

/* ---------- MEDIA QUERIES ---------- */
@media (max-width:991.98px){
    .timeline::before{left:10px;}
    .timeline .card{margin-left:30px;}
    .card-image,.image-container{height:200px;}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{transition:none!important;}
}