/* ==========================================================
   3D Fúzió Bt. – közös stíluslap
   A magyar, német és angol oldal egyaránt ezt használja.
   A galéria külön szabályai: assets/mintak-galeria.css

   Tartalom:
   1. Színek és alapbeállítások
   2. Általános elemek, billentyűzetes navigáció
   3. Oldal kerete és tartalma
   4. Fejléc, márkajel, menü és nyelvválasztó
   5. Címek és szövegek
   6. Bemutatkozás és nagy logó
   7. Termékkártyák
   8. Korábbi, szöveges mintalista
   9. Kapcsolat
   10. Lábléc
   11. Kisebb képernyők
   12. Csökkentett mozgás
   ========================================================== */

/* 1. SZÍNEK ÉS ALAPBEÁLLÍTÁSOK */

:root {
  color-scheme: dark;

  --bg: #101b2b;        /* Alap háttér */
  --surface: #18263a;   /* Kártyák háttere */
  --surface2: #1e3046;  /* Aktív menüpont háttere */
  --line: #35475a;      /* Elválasztó vonalak */
  --ink: #f3f7fa;       /* Alap szövegszín */
  --muted: #b7c6d3;     /* Bekezdések színe */
  --cyan: #75d4f0;      /* Világoskék kiemelés */
  --pink: #ef77aa;      /* Rózsaszín kiemelés */

  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  font-size: 15px;
}

/* 2. ÁLTALÁNOS ELEMEK, BILLENTYŰZETES NAVIGÁCIÓ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 5%, #1d344b 0, transparent 30rem),
    var(--bg);
  color: var(--ink);
  line-height: 1.65;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Az „Ugrás a tartalomra” link csak fókuszban válik láthatóvá. */
.skip {
  position: absolute;
  top: 10px;
  left: -9999px;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--bg);
}

.skip:focus {
  left: 10px;
}

/* 3. OLDAL KERETE ÉS TARTALMA */

.site-shell {
  display: flex;
  flex-direction: column;
  width: min(100% - 3rem, 1120px);
  min-height: 100vh;
  margin: auto;
}

main {
  flex: 1;
  padding: clamp(3rem, 7vw, 6.5rem) 0 5rem;
}

/* 4. FEJLÉC, MÁRKAJEL, MENÜ ÉS NYELVVÁLASZTÓ */

.site-header {
  /* Görgetés közben a képernyő tetején marad. */
  position: sticky;
  top: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand small {
  font-size: 0.75em;
  font-weight: 500;
}

/* A bal felső kis „3D” jel: CSS rajzolja a három színsávot. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.55rem;
  background: linear-gradient(
    135deg,
    #46bde5 0 48%,
    #df5797 49% 75%,
    #dca64d 76%
  );
  color: #081827;
  font-size: 0.9rem;
  font-weight: 900;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.2rem;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

nav a {
  padding: 0.48rem 0.78rem;
  border-radius: 0.55rem;
  color: var(--muted);
  font-size: 0.93rem;
  text-decoration: none;
}

nav a:hover,
nav a[aria-current="page"] {
  background: var(--surface2);
  color: var(--ink);
}

nav a[aria-current="page"] {
  box-shadow: inset 0 -2px var(--cyan);
}

.languages {
  display: flex;
  gap: 0.3rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.languages a {
  padding: 0.35rem 0.45rem;
  border-radius: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.languages a:hover,
.languages a[aria-current="true"] {
  background: var(--surface2);
  color: var(--ink);
}

/* 5. CÍMEK ÉS SZÖVEGEK */

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 13ch;
  margin-bottom: 1.55rem;
  font-size: clamp(2.55rem, 5.3vw, 4.8rem);
  font-weight: 730;
  line-height: 1.09;
  letter-spacing: -0.055em;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

p {
  max-width: 62ch;
  color: var(--muted);
}

/* A főcím fölötti kis felirat. */
.eyebrow {
  margin-bottom: 1.25rem;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* A nagyobb méretű bevezető bekezdés. */
.lead {
  max-width: 53ch;
  color: #e4edf3;
  font-size: clamp(1.15rem, 1.8vw, 1.38rem);
  line-height: 1.55;
}

.page-head {
  max-width: 800px;
  margin-bottom: 3.4rem;
}

.page-head h1 {
  max-width: 18ch;
}

.text-link {
  display: inline-flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding-bottom: 0.18rem;
  border-bottom: 1px solid #75d4f066;
  color: var(--cyan);
  font-weight: 650;
  text-decoration: none;
}

.text-link:hover {
  color: #fff;
}

/* 6. BEMUTATKOZÁS ÉS NAGY LOGÓ */

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(285px, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.intro-copy > p:not(.eyebrow) {
  margin-bottom: 1.4rem;
}

/* A logót körülvevő doboz. */
.logo-card {
  max-width: 470px;
  justify-self: end;
  background: #fff;
  border-radius: 1.15rem;
  box-shadow: 0 25px 70px #050d17a0;
  overflow: hidden;
}

/* A dobozon belüli kép. */
.logo-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* 7. TERMÉKKÁRTYÁK */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  min-height: 300px;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

/* A termékkártya és a régi mintalista kis azonosító felirata. */
.card-index,
.sample-number {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.card h2 {
  margin-top: 2.3rem;
}

.card p {
  margin-bottom: 0;
}

/* 8. KORÁBBI, SZÖVEGES MINTALISTA
   A JPG/TXT galéria más osztályokat és külön CSS-fájlt használ. */

.sample-list {
  border-top: 1px solid var(--line);
}

.sample {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.sample h2 {
  margin-bottom: 0.6rem;
}

.sample p {
  margin-bottom: 0;
}

/* 9. KAPCSOLAT */

.contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.contact-panel h2 {
  font-size: 1.65rem;
}

.contact-note {
  padding-left: 1.6rem;
  border-left: 2px solid var(--pink);
}

.contact-note .eyebrow {
  color: var(--pink);
}

/* 10. LÁBLÉC */

footer {
  /* Nagy képernyőn görgetés közben alul marad. */
  position: sticky;
  bottom: 0;
  z-index: 100;

  display: block;
  padding: 0.6rem 0 0.35rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: #99adbe;
  font-size: 0.85rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.rights {
  max-width: none;
  margin: 1rem 0 0;
  color: #90a5b6;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* A láblécen belül közelebb kerül a jogi sor az első sorhoz. */
footer .rights {
  margin-top: 0.25rem;
  margin-bottom: 0;
  line-height: 1.3;
}

/* 11. KISEBB KÉPERNYŐK
   A max-width a képernyő/ablak szélességét jelöli CSS-pixelben.
   A keskenyebb képernyőkre írt szabályok kerülnek későbbre. */

/* 950 px szélességig: a fejléc két sorba rendeződik. */
@media (max-width: 950px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.2rem;
  }

  .header-right {
    justify-content: flex-start;
  }
}

/* 850 px szélességig: az oszlopok egymás alá kerülnek. */
@media (max-width: 850px) {
  .two-column {
    grid-template-columns: 1fr;
  }

  .logo-card {
    width: min(100%, 420px);
    justify-self: start;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: unset;
  }

  .card h2 {
    margin-top: 1.5rem;
  }
}

/* 650 px szélességig: a lábléc normál módon gördül az oldallal.
   Ez a szabály a közös footer szabály UTÁN van, így érvényesül. */
@media (max-width: 650px) {
  footer {
    position: static;
  }
}

/* 560 px szélességig: további mobilos térközök és elrendezés. */
@media (max-width: 560px) {
  .site-shell {
    width: min(100% - 2rem, 1120px);
  }

  .site-header {
    padding: 1.1rem 0;
  }

  .header-right {
    display: block;
  }

  nav {
    margin: 0 -0.4rem;
  }

  nav a {
    padding: 0.44rem 0.5rem;
    font-size: 0.9rem;
  }

  .languages {
    margin-top: 0.75rem;
    padding-left: 0;
    border-left: 0;
  }

  main {
    padding: 3.3rem 0 4rem;
  }

  h1 {
    font-size: clamp(2.35rem, 11vw, 3.3rem);
  }

  .sample {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1.5rem 0;
  }

  .contact-panel {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.5rem;
  }

  .contact-note {
    padding: 1rem 0 0;
    border-left: 0;
    border-top: 2px solid var(--pink);
  }

  .footer-top {
    flex-direction: column;
  }
}

/* 12. CSÖKKENTETT MOZGÁS
   A rendszer ilyen beállításánál kikapcsoljuk a sima görgetést. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}