/*
Theme Name: Szimker
Theme URI: https://szimker.hu
Author: Webgrow
Author URI: https://webgrow.hu
Description: Egyedi WordPress téma a Szimker Zrt. weboldalához (CNC szerszámgépek, brand aloldalak, kapcsolat). ACF Free + Contact Form 7 integráció.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: szimker
*/

/* =====================================================================
   SZIMKER ZRT. - Pixel-perfect responsive (mobile 212:515 + desktop 138:406)
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --color-text:           #1e1d24;
  --color-white:          #ffffff;
  --color-bg-light:       #f7f7f8;
  --color-bg-dark:        #0f263f;
  --color-accent:         #04b3e2;
  --color-brand-blue-1:   rgba(22, 57, 97, 0.6);
  --color-brand-grey:     rgb(64, 79, 95);
  --color-overlay-1:      rgba(0, 0, 0, 0.7);
  --color-overlay-2:      rgba(0, 0, 0, 0.4);

  --font-display:  'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:     'Roboto', system-ui, -apple-system, sans-serif;
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;

  --fs-12:  12px;
  --fs-14:  14px;
  --fs-16:  16px;
  --fs-24:  24px;
  --fs-32:  32px;
  --fs-40:  40px;
  --fs-48:  48px;
  --fs-56:  56px;

  --pad-x: 16px;
  --pad-y: 32px;

  --container-max:  1280px;
  --content-max:    768px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }

/* ---------- Container & utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.tagline {
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 12px;
}
.tagline--light { color: var(--color-white); }

.section-heading {
  font-size: var(--fs-32);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
.section-heading--light  { color: var(--color-white); }
.section-heading--mixed  { /* uppercase per design */ }
.section-heading--center { text-align: center; }

.lead {
  font-size: var(--fs-16);
  line-height: 1.5;
  margin-top: 32px;
}
.lead--light { color: var(--color-white); }

/* =====================================================================
   HEADER + NAVBAR + HERO
   ===================================================================== */
.site-header { position: relative; }

.navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--pad-x);
  width: 100%;
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
  position: relative;
  z-index: 200;     /* always visible above the menu overlay */
}
.navbar__logo { width: 43px; height: 43px; }
.navbar__name {
  font-weight: 700;
  font-size: var(--fs-16);
  letter-spacing: 4.8px;
  line-height: 1.5;
}

/* ============== Hamburger menu panel (Figma 155:2349 / 155:2348) ==============
   Mobile: panel covers full screen.
   Desktop: 506px wide panel on the right + semi-transparent backdrop.

   Animation: subtle slide-from-right + backdrop fade.
   Easing: cubic-bezier(0.16, 1, 0.3, 1)  — "ease-out-quart-ish",
           starts fast, settles smoothly, no bounce or overshoot.
   Duration: 500ms — long enough to feel intentional, not snappy.
*/
.navbar__menu {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100;
  justify-content: flex-end;
  /* Closed state: invisible, non-interactive */
  visibility: hidden;
  pointer-events: none;
  background: rgba(30, 29, 36, 0);
  transition:
    background .5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear .5s;       /* hide AFTER slide-out finishes */
}
.navbar.is-open .navbar__menu {
  visibility: visible;
  pointer-events: auto;
  transition:
    background .5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;        /* show instantly on open */
}

.navbar__menu-panel {
  width: 100%;                       /* mobile: full width panel */
  max-width: 100%;
  background: var(--color-bg-dark);  /* #0f263f Figma */
  padding: 112px 64px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  overflow-y: auto;
  /* Closed state: panel sits off-screen to the right */
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.navbar.is-open .navbar__menu-panel {
  transform: translateX(0);
}

.navbar__menu-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-left: auto;
}
.navbar__menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.navbar__menu-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 12px;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  text-align: right;
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.navbar__menu-link:hover { opacity: .75; }
.navbar__menu-chevron {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);  /* force white */
  transition: transform .2s ease;
}
.navbar__menu-link[aria-expanded="true"] .navbar__menu-chevron {
  transform: rotate(180deg);
}

/* Submenu (Forgalmazott termékek dropdown) */
.navbar__submenu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  padding: 0 24px;
  margin-top: 12px;
  border-right: 1px solid var(--color-white);
}
.navbar__submenu[hidden] { display: none; }
.navbar__submenu-link {
  display: block;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.navbar__submenu-link:hover { opacity: .75; }

/* Menu footer (social + copyright) */
.navbar__menu-footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
  width: 100%;
}
.navbar__menu-social {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.navbar__menu-social img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}
.navbar__menu-copy {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--color-white);
}

.navbar__hamburger {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;       /* right-align bars (matches Figma close state) */
  justify-content: center;
  padding: 4px;
  position: relative;
  z-index: 200;                /* always above the menu overlay (z-index 100) */
  cursor: pointer;
}
.navbar__hamburger span {
  display: block;
  width: 34px;                 /* default: all 3 bars equal */
  height: 5px;
  background: var(--color-white);
  transition: width .35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Open state — bars morph to Figma 155:2374/2375/2376 (23/34/17 right-aligned) */
.navbar__hamburger.is-open span:nth-child(1) { width: 23px; }
.navbar__hamburger.is-open span:nth-child(2) { width: 34px; }
.navbar__hamburger.is-open span:nth-child(3) { width: 17px; }

/* =====================================================================
   HERO SLIDER
   - Background image: continuous slow zoom (Ken Burns effect, 25s loop)
   - Title + subtitle: fade-up on initial page load
   - Progress bars: fill 0→100% on the active slide (6s per slide)
   - Auto-advance: when bar fills, next slide becomes active
   ===================================================================== */
.hero {
  position: relative;
  height: 600px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
/* Background image layer — animated zoom */
.hero__bg {
  position: absolute;
  inset: 0;
  background: url('assets/images/hero-bg.jpg') center / cover no-repeat;
  animation: heroBgZoom 25s ease-in-out infinite alternate;
  z-index: 0;
  will-change: transform;
}
@keyframes heroBgZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.10); }
}

/* YouTube / Vimeo background — iframe scaled to cover the hero area.
   The iframe is 16:9; we size it to 177.78vw × 56.25vw and centre it,
   so it always overflows the hero box on the dimension that doesn't match
   16:9 — the same effect as `object-fit: cover` for images. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-bg-dark);
}
.hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Scale the iframe ~120% larger than the container so YouTube's corner UI
     (Watch on YouTube, next-video chip, share button) is pushed outside
     the .hero__video clipping box (overflow: hidden hides them). */
  width: 213.36vh;
  height: 120vh;
  min-width: 120%;
  min-height: 67.5vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
  pointer-events: none;
}

/* Gradient overlay — sits above bg, below content */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--color-overlay-1) 0%, rgba(102,102,102,0) 89.4%),
    linear-gradient(90deg, var(--color-overlay-2) 0%, var(--color-overlay-2) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: var(--pad-x) var(--pad-x) var(--pad-y);
  align-items: center;
  position: relative;
  z-index: 2;          /* above .hero__bg and .hero__overlay */
}

.hero__content {
  width: 100%;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Scale font with viewport, but keep narrow phones safe.
     Lower vw multiplier so long single words (e.g. "MATSUURA") don't overflow. */
  font-size: clamp(24px, 7vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  /* Break long single words if they would overflow the container. */
  overflow-wrap: anywhere;
  word-break: normal;
  /* Slow & gentle fade-up on initial page load.
     - 1.8s duration (cinematic, not snappy)
     - 10px travel (very subtle, not "obvious" motion)
     - cubic-bezier(0.22, 1, 0.36, 1) ≈ ease-out-quint, very gradual landing */
  opacity: 0;
  transform: translateY(10px);
  animation: heroTextIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.hero__subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: 1;
  opacity: 0;
  transform: translateY(10px);
  /* Subtitle arrives 0.6s after title — generous stagger lets each settle */
  animation: heroTextIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}
@keyframes heroTextIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* On slide change — JS clones the title/subtitle to retrigger this animation.
   The hero gets `.is-changing` class on first slide change, so subsequent
   refreshes use shorter delays (no big intro stagger). */
.hero.is-changing .hero__title {
  animation-delay: 0s;
}
.hero.is-changing .hero__subtitle {
  animation-delay: 0.35s;
}

/* Mobile dots */
.hero__dots {
  display: flex;
  align-items: center;
  gap: 0;
}
.hero__dot {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: transparent;
  cursor: pointer;
}
.hero__dot::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.45);  /* dim inactive */
  transition: background .35s ease;
}
.hero__dot.is-active::before {
  background: var(--color-white);          /* pure white when active */
}

/* Desktop labeled progress bars (Figma 138:415) - hidden on mobile */
.hero__bars {
  display: none;
  align-items: flex-end;
  gap: 10px;
}
.hero__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  /* Per Figma: short labels share min 120px width;
     long labels (ATC, Offset calibration) grow to fit content. */
  min-width: 120px;
  flex: 0 0 auto;
  background: transparent;
  cursor: pointer;
}
.hero__bar-track {
  display: block;
  width: 100%;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  transition: height .35s ease, background .35s ease;
}
.hero__bar.is-active .hero__bar-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
}
.hero__bar-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;                          /* default empty */
  background: var(--color-white);
}
/* Active slide: white progress fills 0→100% over --slide-duration */
.hero__bar.is-active .hero__bar-progress {
  animation: barProgress var(--slide-duration, 6s) linear forwards;
}
@keyframes barProgress {
  from { width: 0; }
  to   { width: 100%; }
}
.hero__bar-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
  transition: opacity .35s ease;
}
.hero__bar.is-active .hero__bar-label { opacity: 1; }

/* =====================================================================
   INTRO SECTIONS
   ===================================================================== */
.intro {
  padding: var(--pad-y) 0;
  background: var(--color-white);
}
.intro--products .container { padding-block: 0; }

.intro--services {
  background: var(--color-bg-dark);
  padding: var(--pad-y) 0;
}
.intro--services .lead { color: var(--color-white); }

/* =====================================================================
   BRAND CARDS
   ===================================================================== */
.brands { background: var(--color-white); }
.brands__grid {
  display: flex;
  flex-direction: column;
}

.brand-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--color-text);
  background:
    linear-gradient(90deg, var(--color-white) 0%, var(--color-white) 100%),
    linear-gradient(90deg, var(--color-brand-blue-1) 0%, var(--color-brand-blue-1) 100%),
    linear-gradient(90deg, var(--color-brand-grey) 0%, var(--color-brand-grey) 100%);
}

.brand-card__logo-wrap {
  height: 40px;
  display: flex;
  align-items: center;
}
.brand-card__logo {
  /* Default: max-width / max-height constraints take over (see addendum at end). */
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.brand-card__desc {
  color: var(--color-text);
  font-size: var(--fs-16);
  line-height: 1.5;
}
.brand-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.2;
  transition: gap .2s ease;
}
.brand-card__link:hover { gap: 12px; }
.brand-card__link img { width: 24px; height: 24px; }

/* =====================================================================
   SERVICE CARDS
   ===================================================================== */
.services {
  background: var(--color-bg-dark);
  padding: var(--pad-y) 0;
  color: var(--color-white);
}
/* Mobile: container is normal (constrained), cards are boxed with borders.
   Intro section ("Szolgáltatásaink / Teljes körű támogatás") appears ABOVE
   the cards on mobile via flex column-reverse on the container. */
@media (max-width: 767px) {
  .services > .container {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }
  .intro--services { margin-bottom: 8px; }
}
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  background: transparent;
}
.service-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.service-card__icon { width: 40px; height: 40px; }
.service-card__title {
  color: var(--color-white);
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.service-card__desc {
  color: var(--color-white);
  font-size: var(--fs-16);
  line-height: 1.5;
}
.service-card__desc p { margin: 0; }
.service-card__desc p + p { margin-top: 1em; }
.service-card__desc strong { font-weight: 700; }

/* =====================================================================
   ABOUT US
   ===================================================================== */
.about { background: var(--color-bg-light); }
.about .container {
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about__list li {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about__list h3 {
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  text-transform: uppercase;
}
.about__list p {
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-text);
}

.about__image,
.why-us__image {
  height: 400px;
  width: 100%;
  overflow: hidden;
  background: #ddd;
}
.about__image img,
.why-us__image img {
  width: 100%; height: 100%; object-fit: cover;
}

/* =====================================================================
   WHY US
   ===================================================================== */
.why-us { background: var(--color-bg-light); }
.why-us .container {
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat__number {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: 1.2;
  color: var(--color-text);
}
.stat__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-text);
}

/* =====================================================================
   CTA
   ===================================================================== */
.cta {
  background: var(--color-bg-dark);
  padding: 64px var(--pad-x);
  color: var(--color-white);
}
.cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  max-width: var(--content-max);
}
.cta__title {
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.cta__lead {
  font-size: var(--fs-16);
  line-height: 1.5;
}
.cta__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  border: 1px solid var(--color-white);
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
  text-align: center;
  width: 100%;
}
.btn--primary { background: var(--color-white); color: var(--color-text); }
.btn--primary:hover { background: transparent; color: var(--color-white); }
.btn--secondary { background: transparent; color: var(--color-white); }
.btn--secondary:hover { background: var(--color-white); color: var(--color-text); }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq {
  background: var(--color-bg-light);
  padding: 64px var(--pad-x);
}
.faq .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: var(--container-max);
}
.faq .section-heading { max-width: var(--content-max); margin-inline: auto; }

.accordion {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin-inline: auto;
  width: 100%;
}

.accordion__item {
  border-bottom: 1px solid var(--color-text);
  padding: 16px;
}
.accordion__question {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: 1.2;
  color: var(--color-text);
  text-transform: uppercase;
}
.accordion__question::-webkit-details-marker { display: none; }
.accordion__question > span:first-child { flex: 1; }

/* Icon: a single + that slowly rotates 45° on open → forms an ×.
   Same easing & duration as the answer height, so they feel synchronized. */
.accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-image: url('assets/icons/faq-plus.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .7s cubic-bezier(0.65, 0, 0.35, 1);
  /* cubic-bezier(0.65, 0, 0.35, 1) = ease-in-out-cubic — smooth, elegant,
     symmetric for both opening and closing */
}
.accordion__item[open] .accordion__icon {
  transform: rotate(45deg);     /* + → × */
}

/* Answer: explicit pixel-height animation, JS-controlled.
   The `!important` overrides the UA `details:not([open]) > :not(summary){display:none}`
   so the height transition can run even when [open] is being removed. */
.accordion__item .accordion__answer {
  display: block !important;
  height: 0;
  overflow: hidden;
  transition: height 0.4s linear;
}
.accordion__item .accordion__answer > * {
  padding-top: 16px;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-text);
}

/* =====================================================================
   CONTACT BAR
   ===================================================================== */
.contact-bar {
  background: var(--color-accent);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.contact-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1.5;
  white-space: nowrap;
}
.contact-bar__item img { width: 15px; height: 15px; flex-shrink: 0; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-white);
}
.site-footer .container {
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
}
.footer__brand img { width: 43px; height: 43px; }
.footer__brand span {
  font-weight: 700;
  font-size: var(--fs-16);
  letter-spacing: 4.8px;
  line-height: 1.5;
}

.footer__nav {
  display: flex;
  flex-direction: column;
}
.footer__nav li a {
  display: flex;
  align-items: center;
  padding: 12px;
  color: var(--color-white);
  font-size: var(--fs-16);
  line-height: 1.5;
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copy {
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--color-white);
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__social a img { width: 24px; height: 24px; }

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--color-white);
}
.footer__legal a { text-decoration: underline; }

/* =====================================================================
   DESKTOP — Figma frame 138:406 (1440x800)
   ===================================================================== */
@media (min-width: 768px) {
  :root {
    --pad-x: 64px;       /* Figma --page-padding/padding-global */
    --pad-y: 64px;
  }

  /* Navbar — Figma desktop: hamburger STAYS, no inline menu.
     max-width + margin: auto matches the hero__inner so the logo and the
     hero title share the same vertical line on every viewport. */
  .navbar {
    padding: 24px 64px;
    height: 88px;
    max-width: var(--container-max);
    margin-inline: auto;
  }

  /* Open menu — desktop: 506px-wide panel on right + semi-transparent backdrop */
  .navbar.is-open .navbar__menu {
    background: rgba(30, 29, 36, 0.4);  /* Figma 155:2348 backdrop */
  }
  .navbar__menu-panel {
    width: 506px;
    max-width: 506px;
  }

  /* Hero — Figma 138:407 */
  .hero { height: 800px; }
  .hero__bg {
    background-image:
      url('assets/images/hero-bg-desktop-overlay.png'),
      url('assets/images/hero-bg-desktop.jpg');
    background-size: cover, cover;
    background-position: center, center;
  }
  .hero__inner {
    padding: 64px;
    max-width: var(--container-max);
    margin-inline: auto;
    gap: 32px;
    align-items: flex-start;
  }
  .hero__title { font-size: var(--fs-56); max-width: 861px; }
  .hero__subtitle { font-size: var(--fs-40); max-width: 861px; }

  .hero__dots { display: none; }
  .hero__bars { display: flex; }

  /* Intros */
  .intro { padding: 80px 0; }
  .intro .lead { max-width: var(--content-max); }
  .intro--services .container,
  .intro--products .container { padding-inline: 64px; }

  /* Brand cards - 2 columns */
  .brands__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .brand-card { border-right: 1px solid var(--color-text); }
  .brand-card:nth-child(2n) { border-right: none; }

  /* Services - desktop full-width grid, 3 cols × 2 rows. Last card spans
     both rows in col 3. Vertical dividers extend full grid height (gap=1px
     with grid background). Horizontal divider between row 1 and row 2
     appears only in cols 1-2 (the wide card spans the row gap in col 3). */
  .services { padding: 0; }
  /* Full-width container override (same approach as .brands). */
  .services > .container {
    max-width: none;
    padding-inline: 0;
  }
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0;
    max-width: none;
    margin-inline: 0;
  }
  .service-card {
    /* Default inner padding between cards. */
    padding: 48px 32px;
    border: 0;
    background-color: var(--color-bg-dark);
  }
  /* Outer-edge cards: pad to align with the page container content edge. */
  .services__grid > .service-card:nth-child(1),
  .services__grid > .service-card:nth-child(3) {
    padding-left: max(64px, calc((100vw - 1280px) / 2 + 64px));
  }
  .service-card--wide {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding-right: max(64px, calc((100vw - 1280px) / 2 + 64px));
  }

  /* About + Why us side-by-side.
     64px horizontal padding aligns text content with the other sections. */
  .about, .why-us {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .about .container,
  .why-us .container { padding: 80px 64px; max-width: 640px; }
  .about__image, .why-us__image { height: 100%; min-height: 500px; }

  /* Why-us: REVERSED order — image LEFT, text content RIGHT (per Figma) */
  .why-us__image { grid-column: 1; grid-row: 1; }
  .why-us .container { grid-column: 2; grid-row: 1; margin-inline-start: 0; }

  /* Stats: 2x2 grid (35+ | X+) / (Y+ | 85%) */
  .stats {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 32px;
  }

  /* CTA */
  .cta { padding: 96px 64px; }
  .cta__title { font-size: var(--fs-40); }
  .cta__actions { flex-direction: row; justify-content: center; width: auto; }
  .btn { width: auto; min-width: 240px; }

  /* FAQ */
  .faq { padding: 96px 64px; }

  /* Contact bar */
  .contact-bar { flex-direction: row; gap: 48px; padding: 16px 64px; }
  .contact-bar__item { font-size: var(--fs-14); }

  /* Footer */
  .site-footer .container {
    padding: 64px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px 64px;
    align-items: start;
  }
  .footer__brand { grid-column: 1; grid-row: 1; }
  .footer__nav {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
  }
  .footer__row {
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 32px;
  }
  .footer__legal {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start;
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  /* Brand cards stay 2 columns even on wider screens */
  .cta__title { font-size: 48px; }
}

/* =====================================================================
   BRAND SUBPAGE — DESKTOP OVERRIDES
   ===================================================================== */
@media (min-width: 768px) {
  .hero--brand .hero__inner--brand {
    padding: 64px;
    align-items: flex-start;
  }
  .hero__lead { font-size: var(--fs-16); }

  .product-categories { padding: 112px 0; }
  .product-categories .container { padding-inline: 64px; max-width: var(--container-max); }
  .product-category + .product-category { padding-top: 64px; }

  /* Per Figma: every product-grid is a 3-column track. Fewer items
     simply occupy the leftmost cells; remaining columns stay empty.
     Cards: 426px wide each (= (1312 - 32 gap) / 3). */
  .product-grid,
  .product-grid--1,
  .product-grid--2,
  .product-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
  }

  .brand-rep { padding: 112px 0; }
  .brand-rep__container {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
  }
  .brand-rep__heading,
  .brand-rep__lead { flex: 1 1 0; min-width: 0; }
  .brand-rep__title { font-size: var(--fs-40); }

  .brand-services { padding: 0 0 112px; }
  .brand-services__grid { grid-template-columns: repeat(4, 1fr); }
  .brand-service { padding: 64px; }

  /* CTA on brand subpages: title centered larger */
  .cta__title { font-size: var(--fs-32); }
}

@media (min-width: 1024px) {
  .hero--brand .hero__title { font-size: var(--fs-40); }
  .hero__lead { max-width: 600px; }
}

/* =====================================================================
   KAPCSOLAT — DESKTOP OVERRIDES
   ===================================================================== */
@media (min-width: 768px) {
  .contact-page__inner {
    flex-direction: row;
    gap: 64px;
    padding: 64px;
    align-items: stretch;
    /* Match the hero's container constraints so left/right paddings align
       on all viewports (hero uses max-width: var(--container-max) + auto margin) */
    max-width: var(--container-max);
    margin-inline: auto;
  }
  .contact-form,
  .contact-info { flex: 1 1 0; min-width: 0; }
  .contact-form { padding: 48px; }
  .contact-form__title { font-size: var(--fs-40); }

  /* Form fills its column height; allow message field to grow */
  .contact-form { height: auto; }

  .contact-info__map { height: 339px; margin-top: auto; }
}

/* =====================================================================
   BRAND PAGES (Matsuura, CMZ, Takisawa, Acra, Gentiger)
   Reuses .hero structure but without slider — static title + lead.
   ===================================================================== */

/* Brand page hero (no slider pagination) */
.hero--brand .hero__inner--brand {
  align-items: flex-start;       /* left-align text on all viewports */
  padding: 32px 16px 48px;
}
.hero--brand .hero__content { gap: 24px; }
.hero__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-white);
  max-width: 600px;
  /* Slow gentle fade-up like .hero__subtitle */
  opacity: 0;
  transform: translateY(10px);
  animation: heroTextIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

/* Per-brand hero backgrounds */
.hero__bg--matsuura {
  background-image:
    url('assets/images/matsuura/hero-bg-3.png'),
    url('assets/images/matsuura/hero-bg-2.jpg'),
    url('assets/images/matsuura/hero-bg-1.jpg');
  background-size: cover, cover, cover;
  background-position: center;
}
.hero__bg--cmz {
  background-image:
    url('assets/images/cmz/hero-bg-4.png'),
    url('assets/images/cmz/hero-bg-3.png'),
    url('assets/images/cmz/hero-bg-2.jpg'),
    url('assets/images/cmz/hero-bg-1.jpg');
  background-size: cover, cover, cover, cover;
  background-position: center;
}
.hero__bg--takisawa {
  background-image:
    url('assets/images/takisawa/hero-bg-3.png'),
    url('assets/images/takisawa/hero-bg-2.jpg'),
    url('assets/images/takisawa/hero-bg-1.jpg');
  background-size: cover, cover, cover;
  background-position: center;
}
.hero__bg--acra {
  background-image:
    url('assets/images/acra/hero-bg-3.png'),
    url('assets/images/acra/hero-bg-2.jpg'),
    url('assets/images/acra/hero-bg-1.jpg');
  background-size: cover, cover, cover;
  background-position: center;
}
.hero__bg--gentiger {
  background-image:
    url('assets/images/gentiger/hero-bg-3.png'),
    url('assets/images/gentiger/hero-bg-2.jpg'),
    url('assets/images/gentiger/hero-bg-1.jpg');
  background-size: cover, cover, cover;
  background-position: center;
}

/* =====================================================================
   PRODUCT CATEGORIES (brand subpages)
   ===================================================================== */
.product-categories {
  background: var(--color-white);
  padding: 64px 0;
}
.product-categories .container {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.product-category {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 32px;
}
.product-category + .product-category {
  border-top: 1px solid var(--color-bg-dark);
  padding-top: 64px;
}

/* Per-brand accent colour for the heading's left border.
   Each brand page sets --brand-accent on <body>; default = Matsuura green. */
body.brand-matsuura { --brand-accent: #009f50; }   /* zöld */
body.brand-cmz      { --brand-accent: #003da5; }   /* kék */
body.brand-takisawa { --brand-accent: #231916; }   /* sötétbarna/fekete */
body.brand-acra     { --brand-accent: #336; }      /* sötét navy */
body.brand-gentiger { --brand-accent: #eb1e0b; }   /* piros */

.product-category__header {
  border-left: 5px solid var(--brand-accent, #009f50);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-bg-dark);
}
.product-category__title {
  font-size: var(--fs-32);
  font-weight: 700;
  line-height: 1.2;
  /* Long unbreakable Hungarian words (e.g. "megmunkálóközpontok") can overflow
     on narrow viewports — allow breaking mid-word as a last resort. */
  overflow-wrap: anywhere;
}
.product-category__lead {
  font-size: var(--fs-16);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.product-grid {
  display: grid;
  gap: 16px;
  /* No explicit grid-template-columns here:
     - Mobile: items naturally fall into single column via grid auto-flow.
     - Desktop (≥768px): @media rule below forces repeat(3, 1fr).
     Avoiding `1fr` here prevents source-order conflicts with the @media override. */
}

.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-bg-dark);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Hover: inset box-shadow simulates a thicker (3px) border without
     layout shift. No translate or drop-shadow — just the border thickens. */
  transition: box-shadow .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover {
  box-shadow: inset 0 0 0 2px var(--color-bg-dark);
}
/* Legacy modifier kept as no-op so existing markup won't change visuals */
.product-card--featured { }
.product-card__image {
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-bg-dark);
}
.product-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.product-card__desc {
  font-size: 14px;
  line-height: 1.5;
}
.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-bg-dark);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.2;
  margin-top: auto;
  transition: gap .25s ease;
}
.product-card__link:hover { gap: 14px; }
.product-card__link img { width: 24px; height: 24px; }

/* =====================================================================
   BRAND REPRESENTATION INTRO ("Teljeskörű Matsuura képviselet")
   ===================================================================== */
.brand-rep {
  background: var(--color-bg-dark);
  color: var(--color-white);
  padding: 64px 0;
}
.brand-rep__container {
  display: flex;
  gap: 32px;
  /* flex-direction set per breakpoint below to avoid source-order conflicts
     with the @media (min-width: 768px) override (which sets row on desktop). */
}
@media (max-width: 767px) {
  .brand-rep__container { flex-direction: column; }
}
.brand-rep__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.brand-rep__title {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.brand-rep__lead {
  font-size: var(--fs-16);
  line-height: 1.5;
}

/* =====================================================================
   BRAND SERVICE TILES (4-card row, dark navy)
   ===================================================================== */
.brand-services {
  background: var(--color-bg-dark);
  padding: 0 0 64px;
}
.brand-services__grid {
  display: grid;
  /* No explicit columns; mobile gets auto-flow 1-column,
     desktop gets repeat(4, 1fr) from the @media override above. */
}
.brand-service {
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background:
    linear-gradient(90deg, var(--color-bg-dark) 0%, var(--color-bg-dark) 100%),
    linear-gradient(90deg, rgba(228, 228, 231, 0.3) 0%, rgba(228, 228, 231, 0.3) 100%);
}
.brand-service__icon { width: 40px; height: 40px; }
.brand-service__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  text-transform: uppercase;
}

/* =====================================================================
   KAPCSOLAT (CONTACT) PAGE
   Two-column layout: form (left, dark navy) + contact info (right, light)
   ===================================================================== */
.hero__bg--kapcsolat {
  background-image:
    url('assets/images/kapcsolat/hero-bg-4.png'),
    url('assets/images/kapcsolat/hero-bg-3.png'),
    url('assets/images/kapcsolat/hero-bg-2.jpg'),
    url('assets/images/kapcsolat/hero-bg-1.jpg');
  background-size: cover, cover, cover, cover;
  background-position: center;
}

.contact-page {
  background: var(--color-white);
}
.contact-page__inner {
  display: flex;
  gap: 32px;
  padding: 32px 16px;
  /* flex-direction set per breakpoint to avoid source-order conflicts */
}
@media (max-width: 767px) {
  .contact-page__inner { flex-direction: column; }
}

/* LEFT — form on dark navy panel */
.contact-form {
  background: var(--color-bg-dark);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: 1;
  color: var(--color-white);
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form__field--grow { flex: 1 1 auto; min-height: 120px; }
.contact-form__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-white);
}
.contact-form__input,
.contact-form__textarea {
  width: 100%;
  height: 48px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--color-white);
  outline: none;
  border-radius: 0;
  transition: border-color .25s ease;
}
.contact-form__textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  border-color: var(--color-accent);
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

.contact-form__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.5;
  cursor: pointer;
}
.contact-form__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-white);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.contact-form__checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--color-white);
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--color-accent);
  color: var(--color-text);
  border: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  cursor: pointer;
  transition: opacity .25s ease;
  white-space: nowrap;
  align-self: flex-start;
}
.contact-form__submit:hover { opacity: .85; }

/* RIGHT — contact info column */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-info__heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: #79787f;
  letter-spacing: 0;
}
.contact-info__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.contact-info__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.contact-info__body {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}
.contact-info__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-16);
  line-height: 1.5;
}
.contact-info__value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--color-text);
}
.contact-info__value--link {
  text-decoration: underline;
  transition: opacity .2s ease;
}
.contact-info__value--link:hover { opacity: .7; }

.contact-info__map {
  width: 100%;
  height: 250px;
  margin-top: 16px;
  overflow: hidden;
}
.contact-info__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================================
   SECTION SCROLL-ON-VIEW ENTRY ANIMATIONS
   - Pure opacity fade (no lift) — looks cleaner on coloured-background
     sections where a vertical translate would be visually jarring.
   ===================================================================== */
[data-animate] {
  opacity: 0;
  transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
[data-animate].is-visible {
  opacity: 1;
}

/* =====================================================================
   ACCESSIBILITY / MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-animate] {
    opacity: 1 !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* =====================================================================
   BRAND CARD — logo sizing per Figma (200x53 desktop, 151x40 mobile).
   On smaller phones, scale down further so the logo doesn't dominate the card.
   ===================================================================== */
.brand-card__logo-wrap {
  height: 56px;
  display: flex;
  align-items: center;
}
.brand-card__logo {
  /* Small phones: smaller cap to match the proportionally narrower card. */
  max-width: 120px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
/* Larger phones / small tablets — match Figma mobile spec (151x40). */
@media (min-width: 480px) {
  .brand-card__logo {
    max-width: 150px;
    max-height: 40px;
  }
}
/* Desktop — match Figma desktop spec (200x53). */
@media (min-width: 1024px) {
  .brand-card__logo {
    max-width: 200px;
    max-height: 53px;
  }
}
.brand-card__desc:empty {
  display: none;
}

/* =====================================================================
   KAPCSOLAT HERO HEIGHT — Figma 138:1879 = 312 (desktop) / 215:3735 = 420 (mobile)
   The 312/420 in Figma includes the navbar overlay (absolute, 88/72px). Our
   .hero element shares its top edge with the navbar, so the .hero height needs
   to MATCH the Figma frame total — otherwise the title overlaps the logo.
   ===================================================================== */
body.page-kapcsolat .hero { height: 420px; }
@media (min-width: 768px) {
  body.page-kapcsolat .hero { height: 312px; }
}
body.page-kapcsolat .hero--brand .hero__inner--brand {
  padding: 24px 16px 32px;
}
body.page-kapcsolat .hero__title { font-size: var(--fs-32); }
@media (min-width: 768px) {
  body.page-kapcsolat .hero__title { font-size: var(--fs-40); }
}
body.page-kapcsolat .hero__lead {
  font-size: var(--fs-16);
  max-width: 600px;
}

/* =====================================================================
   CF7 FORM — match the dark navy contact form design
   Per Figma: transparent inputs with 1px white border, light-blue submit.
   ===================================================================== */
.contact-form__title { text-transform: uppercase; }

.contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 24px; }
.contact-form .wpcf7-form p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: 1.5;
}
/* Remove CF7's <br> between label and input */
.contact-form .wpcf7-form p br { display: none; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]) {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--color-white);
  border-radius: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: 1.5;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form .wpcf7-form-control.wpcf7-textarea {
  min-height: 220px;
  resize: vertical;
}
.contact-form .wpcf7-form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.contact-form .wpcf7-form-control:focus {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

/* Submit button — light sky blue per Figma */
.contact-form .wpcf7-submit,
.contact-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  margin-top: 8px;
  background: #7dd3fc;
  color: var(--color-bg-dark, #0f263f);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
  align-self: flex-start;
}
.contact-form .wpcf7-submit:hover,
.contact-form input[type="submit"]:hover { background: #38bdf8; }

/* CF7 acceptance / checkbox styling */
.contact-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.contact-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.contact-form .wpcf7-list-item-label { color: rgba(255, 255, 255, 0.85); }
.contact-form .wpcf7-acceptance input[type="checkbox"] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 4px;
  accent-color: var(--color-accent, #04b3e2);
}

/* CF7 response messages */
.contact-form .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--color-white) !important;
  font-size: var(--fs-16);
}
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #ff8080 !important;
  color: #ff8080 !important;
}
.contact-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: #4ade80 !important;
  color: #4ade80 !important;
}
.contact-form .wpcf7-not-valid-tip {
  color: #ff8080;
  font-size: 14px;
  margin-top: 4px;
}
.contact-form .wpcf7-not-valid {
  border: 2px solid #ff8080 !important;
  outline-color: #ff8080 !important;
}

/* =====================================================================
   INTRO SECTIONS — 2-column desktop layout (Figma Layout / 353)
   Desktop: tagline + heading on the left col, lead on the right col.
   Mobile:  stacked (default block flow).
   Applies to both .intro--products and .intro--services.
   ===================================================================== */
@media (min-width: 768px) {
  /* Products intro — .container is the grid (3 stacked direct children).
     Services intro — .intro--services itself is the grid (it lives inside its
     own .services > .container which is now full-width, so we also constrain
     the intro to container width here). */
  .intro--products .container,
  .intro--services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: center;
  }
  .intro--products .container { padding-inline: 64px; }
  .intro--services {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 64px;
    padding-block: var(--pad-y);
  }
  .intro--products .tagline,
  .intro--services .tagline {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .intro--products .section-heading,
  .intro--services .section-heading {
    grid-column: 1;
    grid-row: 2;
    margin: 12px 0 0;
  }
  .intro--products .lead,
  .intro--services .lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    max-width: none;
    align-self: center;
  }
}

/* =====================================================================
   BRANDS — full-width edge-to-edge grid (override .container constraints).
   The borders (top, right between cols) extend edge-to-edge, but each card's
   inner content is inset so it visually aligns with the .container content
   above (e.g. the "MINŐSÉG ÉS MEGBÍZHATÓSÁG" heading).
   ===================================================================== */
.brands > .container {
  max-width: none;
  padding-inline: 0;
}
@media (min-width: 768px) {
  /* Default inner padding between cards (col 1 right / col 2 left side) */
  .brand-card { padding: var(--pad-y) 32px; }
  /* Left column outer edge: pad to align with the page container content edge.
     Container max-width 1280 + 64px padding-inline (intro override). */
  .brand-card:nth-child(odd) {
    padding-left: max(64px, calc((100vw - 1280px) / 2 + 64px));
  }
  /* Right column outer edge: same on the right side. */
  .brand-card:nth-child(even) {
    padding-right: max(64px, calc((100vw - 1280px) / 2 + 64px));
  }
}

/* Phone list (kapcsolat oldal) — 3 number rows with name + link */
.contact-info__phones { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.contact-info__phones li { display: flex; flex-direction: column; gap: 2px; }
.contact-info__phone-name {
  font-family: var(--font-body);  /* Roboto */
  font-weight: 700;               /* bold */
  font-size: var(--fs-12);        /* 12px */
  line-height: 1.5;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .contact-info__phones li { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* Allow long Hungarian compound words to break on narrow mobile viewports. */
.section-heading,
.brand-rep__heading,
.product-category__title,
.product-category__lead,
.cta__title,
.hero__lead,
.brand-card__desc,
.about__list h3,
.about__list p {
  overflow-wrap: anywhere;
}