/* =========================================================
   Global Variables – Retro + Biomorph Design System
   ========================================================= */
:root{
  /* Core (Complementary) Palette */
  --clr-primary: #4b8f8c;      /* teal retro */
  --clr-primary-dark: #356463;
  --clr-accent: #d95d39;       /* vivid orange */
  --clr-accent-dark: #b74a2f;
  --clr-bg: #fdf6ec;           /* warm retro paper */
  --clr-bg-dark: #222222;
  --clr-text: #333333;
  --clr-text-light: #ffffff;

  /* Gradients */
  --grad-primary: linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);
  --grad-dark: linear-gradient(135deg,var(--clr-bg-dark) 0%,var(--clr-primary-dark) 100%);

  /* Radius & Shadows */
  --radius-lg: 1.25rem;
  --shadow-md: 0 6px 16px rgba(0,0,0,.15);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.25);

  /* Transition */
  --transition-base: all .25s ease;
}

/* =========================================================
   Base Typography & Utilities
   ========================================================= */
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',sans-serif;
  background-color:var(--clr-bg);
  color:var(--clr-text);
  line-height:1.65;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Space Grotesk',sans-serif;
  line-height:1.2;
  color:var(--clr-bg-dark);
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
section{position:relative;padding-top:4rem;padding-bottom:4rem;}
img{max-width:100%;display:block;height:auto;}
a{color:var(--clr-primary);transition:var(--transition-base);}
a:hover,a:focus{color:var(--clr-accent);text-decoration:none;}

/* =========================================================
   Buttons – Global
   ========================================================= */
.btn,
button,
input[type='submit']{
  display:inline-block;
  background:var(--clr-accent);
  color:var(--clr-text-light);
  padding:.75rem 2rem;
  border:none;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition-base);
  box-shadow:var(--shadow-md);
}
.btn:hover,
button:hover,
input[type='submit']:hover{background:var(--clr-accent-dark);box-shadow:var(--shadow-lg);}
.btn:focus{outline:3px solid var(--clr-primary);outline-offset:2px;}

/* =========================================================
   Cards & Image Handling
   ========================================================= */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.card-image,
.image-container{
  width:100%;
  height:260px;
  overflow:hidden;
  position:relative;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{padding:1.5rem;width:100%;flex:1 1 auto;}

/* =========================================================
   Hero Section
   ========================================================= */
#hero{
  padding-top:120px; /* header offset */
  color:var(--clr-text-light);
  text-align:center;
}
#hero h1,#hero p{color:var(--clr-text-light);}
#hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  z-index:0;
}
#hero>*{position:relative;z-index:1;}
/* Canvas overlay already absolute via HTML */

/* =========================================================
   Particle Animation (simple) 
   ========================================================= */
@keyframes float{
  0%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-20px) scale(1.08);}
  100%{transform:translateY(0) scale(1);}
}
.particle{
  position:absolute;
  background:rgba(255,255,255,.15);
  border-radius:50%;
  animation:float 6s ease-in-out infinite;
  pointer-events:none;
}

/* =========================================================
   Parallax Helper
   ========================================================= */
.parallax{
  background-attachment:fixed;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* =========================================================
   Glassmorphism 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-lg);
}

/* =========================================================
   Navigation
   ========================================================= */
header{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:var(--transition-base);
}
header.scrolled{background:rgba(34,34,34,.85);}

/* Burger */
#burgerBtn span{transition:var(--transition-base);}
#mobileMenu a{padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.15);}
#mobileMenu a:last-child{border:none;}

/* =========================================================
   Links 'Číst dál'
   ========================================================= */
.link-more{
  font-weight:600;
  position:relative;
  padding-right:1.5rem;
}
.link-more::after{
  content:'→';
  position:absolute;
  right:0;
  top:0;
  transition:transform .2s;
}
.link-more:hover::after{transform:translateX(4px);}

/* =========================================================
   Social Links in Footer
   ========================================================= */
footer a{color:#fdf6ec;}
footer a:hover{color:var(--clr-accent);}
footer ul{list-style:none;padding:0;margin:0;}

/* Icons (optional text icons) */
.social-link{
  font-weight:700;
  position:relative;
}
.social-link::before{
  content:'#';
  margin-right:.25rem;
  color:var(--clr-accent);
}

/* =========================================================
   Legal Pages Padding & Success Page
   ========================================================= */
body.legal{padding-top:100px;}
body.success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--grad-primary);
  color:var(--clr-text-light);
  text-align:center;
}

/* =========================================================
   Animations & Hover for Cards
   ========================================================= */
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);transition:var(--transition-base);}

/* =========================================================
   Forms & Inputs
   ========================================================= */
input[type='text'],
input[type='email'],
textarea{
  border:none;
  border-radius:.5rem;
  background:#fff;
  width:100%;
  padding:1rem;
  color:var(--clr-text);
  box-shadow:inset 0 0 0 2px transparent;
  transition:var(--transition-base);
}
input[type='text']:focus,
input[type='email']:focus,
textarea:focus{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--clr-accent);
}

/* =========================================================
   Scroll Reveal Reset (helps SR lib)
   ========================================================= */
[data-sr]{visibility:hidden;}

/* =========================================================
   Media Queries
   ========================================================= */
@media(max-width:768px){
  section{padding-top:3rem;padding-bottom:3rem;}
  .card-image,.image-container{height:200px;}
}

@media(max-width:480px){
  .btn,button,input[type='submit']{padding:.6rem 1.5rem;font-size:.9rem;}
}
#burgerBtn{
  display: none;
}