/* =========================================================
   myristonets – style.css
   D-system: “Creative”, Accent scheme: “Complementary”
   Fonts: Inter (headings), IBM Plex Sans (body)
   ========================================================= */

/* ---------- CSS VARIABLES ---------- */
:root{
    /* Core palette */
    --clr-primary: #00b894;          /* sRGB green */
    --clr-primary-dark: #008f6a;
    --clr-secondary: #ff7675;        /* coral red (complement) */
    --clr-secondary-dark: #e05656;
    --clr-accent: #0984e3;           /* vivid blue for subtle accents */

    /* Neutrals & backgrounds */
    --clr-bg-light: #f9f9fb;
    --clr-bg-dark: #222222;
    --clr-text: #333333;
    --clr-text-light: #ffffff;

    /* Gradients */
    --gradient-main: linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-secondary) 100%);
    --gradient-dark: linear-gradient(180deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.6) 100%);
    
    /* Typography scale – adaptive */
    --fs-300: clamp(.875rem, 2vw, 1rem);
    --fs-400: clamp(1rem, 2.2vw, 1.125rem);
    --fs-500: clamp(1.25rem, 2.8vw, 1.375rem);
    --fs-600: clamp(1.5rem, 4vw, 1.75rem);
    --fs-700: clamp(1.875rem, 5vw, 2.25rem);
    --fs-800: clamp(2.25rem, 7vw, 2.75rem);

    /* Spacing */
    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --radius: .5rem;
    --shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* ---------- GLOBAL RESETS & BASE ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

body{
    margin:0;
    font-family:'IBM Plex Sans',sans-serif;
    font-size:var(--fs-400);
    color:var(--clr-text);
    background-color:var(--clr-bg-light);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Inter',sans-serif;
    color:var(--clr-text);
    line-height:1.2;
    margin:0 0 var(--space-sm);
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.15); /* additional contrast */
}

p{margin:0 0 var(--space-md);}

img{display:block;max-width:100%;height:auto;}

/* ---------- LAYOUT HELPERS ---------- */
.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 var(--space-sm);
}

.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.section{
    padding:var(--space-lg) 0;
}

.alt-bg{
    background-color:var(--clr-bg-light);
}

.center{text-align:center;}

/* ---------- HEADER ---------- */
.site-header{
    position:sticky;
    top:0;
    width:100%;
    background-color:var(--clr-bg-light);
    box-shadow:0 2px 4px rgba(0,0,0,.06);
    z-index:1000;
}

.logo a{
    font-family:'Inter',sans-serif;
    font-size:var(--fs-600);
    font-weight:800;
    color:var(--clr-primary);
    text-decoration:none;
}

.nav-list{
    list-style:none;
    display:flex;
    gap:var(--space-md);
    margin:0;
    padding:0;
}

.nav-list a{
    text-decoration:none;
    color:var(--clr-text);
    font-weight:600;
    position:relative;
}

.nav-list a::after{
    content:'';
    position:absolute;
    left:0;bottom:-4px;
    width:0;height:2px;
    background:var(--clr-primary);
    transition:width .3s ease;
}
.nav-list a:hover::after{width:100%;}

.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:transparent;
    border:none;
    cursor:pointer;
}
.burger span{
    width:24px;height:3px;
    background:var(--clr-text);
    transition:all .3s;
}

/* ---------- HERO ---------- */
.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:70vh;
    color:var(--clr-text-light);
    text-align:center;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}
.hero-title{
    font-size:var(--fs-800);
    color:#ffffff;
    margin-bottom:var(--space-sm);
}
.hero-subtitle{
    max-width:800px;
    margin:0 auto var(--space-md);
    font-size:var(--fs-500);
    color:#ffffff;
}

.hero::before{/* dark overlay fallback */
    content:'';
    position:absolute;
    inset:0;
    background:var(--gradient-dark);
    z-index:0;
}
.hero-content{position:relative;z-index:1;}

/* ---------- BUTTONS ---------- */
.btn,
button,
input[type='submit']{
    display:inline-block;
    font-family:'Inter',sans-serif;
    font-weight:600;
    padding:.75em 1.5em;
    border-radius:var(--radius);
    border:none;
    cursor:pointer;
    transition:background .3s ease,transform .25s ease;
    text-decoration:none;
    color:var(--clr-text-light);
    background:var(--clr-primary);
}
.btn-secondary{
    background:var(--clr-secondary);
}
.btn-primary:hover,
.btn-secondary:hover,
button:hover,
input[type='submit']:hover{
    transform:translateY(-2px);
    background:var(--clr-primary-dark);
}
.btn-secondary:hover{background:var(--clr-secondary-dark);}

/* ---------- LINK “Číst / Read more” ---------- */
.read-more{
    color:var(--clr-accent);
    font-weight:600;
    text-decoration:none;
    position:relative;
}
.read-more::after{
    content:'';
    position:absolute;left:0;bottom:-3px;
    width:100%;height:2px;background:var(--clr-accent);
    transform:scaleX(0);transform-origin:left;
    transition:transform .3s;
}
.read-more:hover::after{transform:scaleX(1);}

/* ---------- CARDS ---------- */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#ffffff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    margin:var(--space-md) auto;
    max-width:100%;
}
.card-image{
    width:100%;
    height:280px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content{
    padding:var(--space-md);
}

/* ---------- CAROUSEL ---------- */
.carousel{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:90%;
    gap:var(--space-md);
    overflow-x:auto;
    padding-bottom:var(--space-sm);
    scroll-snap-type:x mandatory;
}
.carousel .card{scroll-snap-align:start;min-width:280px;}

/* ---------- COMMUNITY & OTHER SECTIONS ---------- */
.about-grid,
.community-grid{
    display:grid;
    gap:var(--space-md);
}
@media(min-width:768px){
    .about-grid{
        grid-template-columns:repeat(2,1fr);
        align-items:start;
    }
}

/* ---------- CONTACT FORM ---------- */
.contact-form{
    max-width:700px;
    margin:0 auto;
    display:grid;
    gap:var(--space-md);
}
.form-group{
    display:flex;
    flex-direction:column;
}
.form-group label{
    margin-bottom:.25rem;
    font-weight:600;
}
.form-group input,
.form-group textarea{
    border:1px solid #ccc;
    border-radius:var(--radius);
    padding:.75em 1em;
    font-family:'IBM Plex Sans',sans-serif;
    font-size:var(--fs-400);
    transition:border-color .3s;
}
.form-group input:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--clr-primary);
}

/* ---------- FOOTER ---------- */
.site-footer{
    background:var(--clr-bg-dark);
    color:#ffffff;
    padding:var(--space-lg) 0 var(--space-md);
    font-size:var(--fs-300);
}
.footer-nav{
    list-style:none;
    display:flex;
    gap:var(--space-sm);
    margin:0;padding:0;
}
.footer-nav a{
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
}
.footer-nav a:hover{color:var(--clr-secondary);}
.social-links a{
    color:#ffffff;
    font-weight:600;
    text-decoration:none;
    margin:0 .25rem;
    transition:color .3s ease;
}
.social-links a:hover{color:var(--clr-primary);}

/* ---------- BURGER / MOBILE NAV ---------- */
@media(max-width:768px){
    .burger{display:flex;}
    .nav-list{
        position:fixed;
        top:70px;right:-110%;
        flex-direction:column;
        background:var(--clr-bg-light);
        width:250px;height:calc(100% - 70px);
        padding:var(--space-md);
        overflow-y:auto;
        gap:var(--space-sm);
        transition:right .3s ease;
    }
    .nav-list.open{right:0;
        display: flex;
     flex-direction: column;
     min-height: 400px;
    }
    footer .flex-between {
        flex-direction: column;
    }
}

/* ---------- MORPHING ANIMATION ---------- */
@keyframes morph{
    0%{border-radius:42% 58% 27% 73% / 56% 45% 55% 44%;}
    50%{border-radius:73% 27% 62% 38% / 28% 57% 43% 72%;}
    100%{border-radius:42% 58% 27% 73% / 56% 45% 55% 44%;}
}
.morph{
    animation:morph 8s ease-in-out infinite;
}

/* ---------- GLASSMORPHISM UTILITY ---------- */
.glass{
    background:rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.3);
    border-radius:var(--radius);
}

/* ---------- UTILITIES ---------- */
.no-select{user-select:none;}
.hidden{display:none!important;}

/* ---------- SUCCESS PAGE ---------- */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* ---------- LEGAL PAGES PADDING ---------- */
.legal-page{padding-top:100px;}

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

/* ---------- READABILITY OVER IMAGES ---------- */
.overlay-dark{
    position:relative;
    color:#ffffff;
}
.overlay-dark::before{
    content:'';
    position:absolute;inset:0;
    background:rgba(0,0,0,.5);
    z-index:0;
}
.overlay-dark > *{position:relative;z-index:1;}

/* ---------- RESPONSIVE TYPOGRAPHY ---------- */
.section-title{
    font-size:var(--fs-700);
    margin-bottom:var(--space-md);
}
.hero .btn{margin-top:var(--space-sm);}

/* ---------- EXTERNAL LINKS STYLE ---------- */
.external-links{
    list-style:none;
    padding:0;
    max-width:800px;
    margin:0 auto;
}
.external-links li{
    margin-bottom:var(--space-sm);
}
.external-links a{
    color:var(--clr-accent);
    font-weight:700;
    text-decoration:none;
}
.external-links a:hover{text-decoration:underline;}

/* =========================================================
   END OF FILE
   ========================================================= */

html,body{
    overflow-x: hidden;
}