/* CUSTOM THEMING VARIABLES - DARK THEME (HEALTH & NUTRITION) */
:root {
  --etrend-canvas: #0b1411;
  --etrend-surface: #14241f;
  --etrend-surface-elevated: #1e332c;
  --etrend-leaf-glow: #2ecc71;
  --etrend-leaf-hover: #27ae60;
  --etrend-citrus-bright: #f39c12;
  --etrend-text-main: #f0f7f4;
  --etrend-text-subtle: #a3c2b5;
  --etrend-hero-gradient: linear-gradient(135deg, #0b1411 0%, #16382b 50%, #0d261c 100%);
  --etrend-accent-gradient: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);

  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Style specific variables */
  --etrend-radius: 16px;
  --etrend-radius-pill: 999px;
  --etrend-shadow-deep: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* BASE STYLES */
body.eletmod-body-wrapper {
  background-color: var(--etrend-canvas);
  color: var(--etrend-text-main);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* CONTAINER CLASS */
.vitamindus-kornyezet {
  width: 100%;
  max-width: 1200px;
}

/* SCROLL-DRIVEN PROGRESS BAR (CSS ONLY) */
.eletmod-gorgetes-sáv {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--etrend-accent-gradient);
  z-index: 100;
  width: 100%;
  transform-origin: 0 50%;
  animation: eletmod-progress-anim linear;
  animation-timeline: scroll();
}

@keyframes eletmod-progress-anim {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* SCROLL-DRIVEN VIEW ANIMATIONS */
.rostos-elem-sor,
.tapasztalat-fal-kartya,
.gyakori-kerdes-doboz,
.szerves-tartalom-szakasz {
  animation: eletmod-reveal-anim linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

@keyframes eletmod-reveal-anim {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* BACKGROUND DECORATIVE PATTERN */
.tapanyag-hatter-patron {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* HEADER STYLING */
.tapanyag-fejlec-sav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(11, 20, 17, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(46, 204, 113, 0.1);
}

.eletmod-link-elem {
  color: var(--etrend-text-subtle);
  transition: color 0.3s ease;
  font-weight: 500;
}

.eletmod-link-elem:hover {
  color: var(--etrend-leaf-glow);
}

.eletmod-akcio-gomb-sm {
  background: var(--etrend-accent-gradient);
  color: #05140d;
  padding: 0.5rem 1.25rem;
  border-radius: var(--etrend-radius-pill);
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eletmod-akcio-gomb-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

/* HERO SECTION (Preset C: Gradient-only background, height 75vh) */
.etrend-fofomester-banner {
  min-height: 75vh;
  background: var(--etrend-hero-gradient);
  position: relative;
}

.eletmod-dekorativ-svg {
  position: absolute;
  right: -5%;
  top: -10%;
  width: 600px;
  height: 600px;
  pointer-events: none;
}

.eletmod-jelveny {
  color: var(--etrend-leaf-glow);
  background: rgba(46, 204, 113, 0.1);
  padding: 0.35rem 1rem;
  border-radius: var(--etrend-radius-pill);
  border: 1px solid rgba(46, 204, 113, 0.2);
}

.eletmod-fo-cimsor {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--etrend-text-main);
}

.eletmod-alcim-szoveg {
  color: var(--etrend-text-subtle);
}

/* BUTTONS */
.eletmod-fokartya-gomb {
  background: var(--etrend-accent-gradient);
  color: #05140d;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: var(--etrend-radius);
  box-shadow: var(--etrend-shadow-deep);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eletmod-fokartya-gomb:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(46, 204, 113, 0.4);
}

.eletmod-masodlagos-gomb {
  background: rgba(255, 255, 255, 0.05);
  color: var(--etrend-text-main);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
  padding: 0.9rem 2rem;
  border-radius: var(--etrend-radius);
  transition: background 0.2s ease;
}

.eletmod-masodlagos-gomb:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* SECTION PADDING REQUIREMENT */
.szerves-tartalom-szakasz {
  padding-top: 10dvh;
  padding-bottom: 10dvh;
}

.eletmod-alcim-cimke {
  color: var(--etrend-leaf-glow);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.5rem;
}

.eletmod-szekcio-cimsor {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--etrend-text-main);
  line-height: 1.2;
}

.eletmod-paragrafus {
  color: var(--etrend-text-subtle);
  line-height: 1.7;
}

/* CONTENT SECTION 1: Decorative Image Offset */
.zoldseg-kep-eltolva {
  margin-left: -1.5rem;
}

@media (max-width: 1024px) {
  .zoldseg-kep-eltolva {
    margin-left: 0;
  }
}

.eletmod-pipas-lista {
  color: var(--etrend-text-main);
}

.eletmod-pipas-lista svg {
  color: var(--etrend-leaf-glow);
}

/* FEATURES SECTION: Horizontal Icon Rows */
.rostos-ikon-korifakus {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.15);
  color: var(--etrend-leaf-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.rostos-elem-sor {
  transition: background 0.2s ease;
  border-radius: var(--etrend-radius);
  padding: 1.5rem;
}

.rostos-elem-sor:hover {
  background: var(--etrend-surface);
}

/* CTA STRIP */
.recept-akcio-szalag {
  background: var(--etrend-accent-gradient);
  color: #05140d;
}

.eletmod-elvalaszto-vonal {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 204, 113, 0.3), transparent);
  width: 100%;
}

/* CONTENT SECTION 2: Full-width surface & round clipped image */
.kaloria-teljes-sav {
  background-color: var(--etrend-surface);
}

.kor-alaku-kep-keret {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--etrend-leaf-glow);
  box-shadow: var(--etrend-shadow-deep);
}

/* TESTIMONIALS: MASONRY LAYOUT */
.tapasztalat-masonry-rács {
  column-count: 2;
  column-gap: 1.5rem;
}

@media (max-width: 768px) {
  .tapasztalat-masonry-rács {
    column-count: 1;
  }
}

.tapasztalat-fal-kartya {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  background: var(--etrend-surface);
  padding: 2rem;
  border-radius: var(--etrend-radius);
  box-shadow: var(--etrend-shadow-deep);
  border: none;
}

/* FORM / CONTACT SECTION */
.etrend-kapcsolat-formular {
  background: var(--etrend-surface-elevated);
  border-radius: var(--etrend-radius);
  box-shadow: var(--etrend-shadow-deep);
  border: 1px solid rgba(46, 204, 113, 0.2);
}

.eletmod-bevitel-mezo {
  width: 100%;
  background: rgba(11, 20, 17, 0.7);
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: var(--etrend-radius-pill);
  padding: 0.75rem 1.25rem;
  color: var(--etrend-text-main);
  outline: none;
  transition: border-color 0.2s ease;
}

textarea.eletmod-bevitel-mezo {
  border-radius: var(--etrend-radius);
}

.eletmod-bevitel-mezo:focus {
  border-color: var(--etrend-leaf-glow);
}

/* FAQ SECTION */
.gyakori-kerdes-doboz {
  background: var(--etrend-surface);
  border-radius: var(--etrend-radius);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* FOOTER */
.eletmod-lablec-sav {
  background-color: var(--etrend-canvas);
}

/* MOBILE MENU HAMBURGER (CSS ONLY) */
@media (max-width: 767px) {
  .eletmod-nav-palyak {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--etrend-surface);
    padding: 1.5rem;
    border-bottom: 1px solid rgba(46, 204, 113, 0.2);
  }

  .eletmod-menu-checkbox:checked ~ .eletmod-nav-palyak {
    display: block;
  }

  .eletmod-vonal {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--etrend-text-main);
    margin: 5px 0;
    transition: 0.3s;
  }
}