:root {
  --color0: #ffffff;
  --color1: #c20437;
  --color2: #004186;
  --color3: #7fa0c2;
  --color4: #a6bcd5;
  --color5: #bfcfe1;
  --color6: #d9e2ed;
  --color7: #e5ecf3;
  --scrollbar-thumb-color1: #ee99a9;
  --scrollbar-track-color1: #d7597b;
  --scrollbar-thumb-color2: #99b3cf;
  --scrollbar-track-color2: #4070a4;
  --scrollbar-thumb-color5: #7fa0c2;
  --scrollbar-track-color5: #d9e2ed;
  --scrollbar-thumb-color7: #bfcfe1;
  --scrollbar-track-color7: #ffffff;
}

@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/segmdl2.ttf");
}

@font-face {
  font-family: "HSwiss 721 Extended";
  src: url("../fonts/hsw721e.ttf");
}

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  color: var(--color2);
}

h1 {
  margin: 0;
  font-size: 34px;
  font-weight: inherit;
}

h2 {
  margin: 0;
  font-size: 28px;
  font-weight: inherit;
}

h3 {
  margin: 0;
  font-size: 22px;
  font-weight: inherit;
}

h4 {
  margin: 0;
  font-size: 20px;
  font-weight: inherit;
}

h5 {
  margin: 0;
  font-size: 18px;
  font-weight: inherit;
}

h6 {
  margin: 0;
  font-size: 16px;
  font-weight: inherit;
}

figure {
  margin: 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
}

.is-vertically-aligned-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-style-rounded img {
  border-radius: 34px;
  width: 100%;
  height: auto;
}


main ul {
  list-style: none;
  padding: 0;
}

main ul li {
  padding-left: 2em;
  position: relative;
  margin-block: 8px;
}

main ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1em;
  height: 1em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 142"><polygon fill="%23c20437" points="0.0,28.2843 28.2843,0.0 98.9949,70.7107 28.2843,141.4214 0.0,113.1371 42.4264,70.7107"/></svg>') no-repeat center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.lekerekitett {
  border-radius: 34px;
}

.hatter-0 {
  background: var(--color0);
}

.hatter-1 {
  background: var(--color1);
}

.hatter-2 {
  background: var(--color2);
}

.hatter-3 {
  background: var(--color3);
}

.hatter-4 {
  background: var(--color4);
}

.hatter-5 {
  background: var(--color5);
}

.hatter-6 {
  background: var(--color6);
}

.hatter-7 {
  background: var(--color7);
}

.hatter-8 {
  background: var(--color8);
}

.betuszin-0 {
  color: var(--color0);
}

.betuszin-1 {
  color: var(--color1);
}

.betuszin-2 {
  color: var(--color2);
}

.betuszin-3 {
  color: var(--color3);
}

.betuszin-4 {
  color: var(--color4);
}

.betuszin-5 {
  color: var(--color5);
}

.betuszin-6 {
  color: var(--color6);
}

.betuszin-7 {
  color: var(--color7);
}

.betuszin-8 {
  color: var(--color8);
}

.szinatmenet-0-7 {
  background: linear-gradient(to bottom, transparent 0%, transparent 10%, var(--color7) 10%, var(--color7) 100%);
}

.container-box {
  padding: 10px 60px;
}

.text-box {
  padding: 50px;
}

.no-padding {
  padding: unset;
}

/* Bal oldali görgethető doboz */
.scroll-box {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-color: var(--color8) transparent;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
  padding: 3px;
}

/* Jobb oldali kép */
.image-box img {
  height: 340px;
  width: auto;
  border-radius: 34px;
}

/* Oszlopok reszponzív viselkedése */

.wp-block-columns {
  display: flex;
  justify-content: space-between;
  padding: 15px 60px;
  gap: 3rem;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

/* A kártyák rugalmasan zsugorodnak, de van minimum szélességük */
.profile-card {
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  border-radius: 34px;
  overflow: hidden;
  width: 300px;
}

/* Kép: teljes szélesség, megtartott arány */
.profile-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tartalom */
.card-content {
  min-height: 90px;
  padding: 1rem;
  background: var(--color4);
}
.card-content h3 {
  margin: 0.5rem 0 0.3rem;
}
.card-content p {
  margin: 0;
}


@media (max-width: 1024px) {
  .scroll-box {
    max-height: unset;
  }
  .image-box img {
    height: auto;
    width: 100%;
    border-radius: 34px;
  }
  .text-box {
    padding: 20px;
  }
  .wp-block-columns {
    flex-direction: column;
    padding: 10px 10px;
  }
  .rounded-image img {
    max-width: 500px;
  }
}