/**
 * Vagyonnyilatkozatok — statikus oldalak komponensei.
 *
 * Feltételesen betöltve (inc/vny-komponensek.php), NEM a style.css része:
 * a style.css SCSS-ből fordul, és élesen jellemzően nincs gulp. Így ezek a
 * komponensek build nélkül is módosíthatók.
 *
 * Konvenciók a témából: nagy doboz 20px, gomb 8px, mező 10px radius;
 * színek a theme.json palettájából (primary #201747).
 */

/* ============================================================================
   1. Lépések — számozott folyamat-lista (core/list, is-style-lepesek)
   ----------------------------------------------------------------------------
   Sima <ol> marad, hogy a szerkesztők bővíteni és átrendezni tudják: a
   számozás és az összekötő vonal magától követi. A szám CSS-counterből jön,
   nem a markupból.
   ========================================================================== */

ol.wp-block-list.is-style-lepesek {
  list-style: none;
  counter-reset: vny-lepes;
  margin: 2em 0;
  padding: 0;
}

ol.wp-block-list.is-style-lepesek > li {
  counter-increment: vny-lepes;
  position: relative;
  /* Hely a számkörnek + a szöveg behúzása a körhöz képest.
     A bal padding a kör jobb széléhez van szabva (kör 30px, -16px eltolással a
     jobb széle 14px-nél van), hogy a szöveg ne szakadjon el a számoktól. */
  padding: 0 0 1.6em 2.4em;
  margin-left: 15px;
}

/* A függőleges vonal — pszeudó-elem, NEM border-left.
   A border a listaelem teljes magasságában futna, ezért az első kör FÖLÖTT is
   megjelent egy lógó szakasz. Így viszont pontosan a kör közepétől indul
   (top: 18px = a kör 3px-es eltolása + a 30px sugara), és a következő elem
   tetejéig tart, tehát a körök közt folytonos marad.
   A vízszintes pozíció a kör közepére van lőve: a kör left:-16px + 15px sugár
   = -1px, a 2px-es vonal közepe ugyanitt. */
ol.wp-block-list.is-style-lepesek > li::after {
  content: "";
  position: absolute;
  left: -2px;
  /* Végig, a listaelem tetejétől az aljáig — a kör takarja a maga szakaszát.
     Ha csak a kör közepétől indulna, minden kör FÖLÖTT 3px rés maradna. */
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--wp--preset--color--primary, #201747);
  z-index: 0;
}

/* Az ELSŐ körnél a vonal a kör közepétől indul, nem lóg ki fölé.
   (18px = a kör 3px-es eltolása + 15px sugár.) */
ol.wp-block-list.is-style-lepesek > li:first-child::after {
  top: 18px;
}

/* Az UTOLSÓ körnél a vonal a kör közepéig tart, alatta nem folytatódik. */
ol.wp-block-list.is-style-lepesek > li:last-child::after {
  top: 0;
  bottom: auto;
  height: 18px;
}

/* Egyetlen lépés esetén nincs mit összekötni. */
ol.wp-block-list.is-style-lepesek > li:first-child:last-child::after {
  content: none;
}

ol.wp-block-list.is-style-lepesek > li:last-child {
  padding-bottom: 0;
}

/* A számkör — a vonalra ültetve, balra kilógatva. */
ol.wp-block-list.is-style-lepesek > li::before {
  content: counter(vny-lepes) ".";
  position: absolute;
  left: -16px;
  /* A kör közepe a cím sorának közepére essen — -2px-nél a szám felcsúszott
     a címhez képest. */
  top: 3px;
  /* A kör a vonal FÖLÉ: a ::after (vonal) később rajzolódik, ezért alapból
     átfutott a számokon. */
  z-index: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--primary, #201747);
  color: #ffffff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* A lépés címe: a <strong> az első elem a listaelemben. */
ol.wp-block-list.is-style-lepesek > li > strong {
  display: block;
  color: var(--wp--preset--color--primary, #201747);
  margin-bottom: 0.45em;
  /* A cím a számkör magasságához igazodik. */
  padding-top: 4px;
}

/* A szerkesztő a cím után <br>-t tesz, de a <strong> már blokk-szintű — a kettő
   együtt dupla sortörést adott. A <br> itt fölösleges, a hézagot a margó adja. */
ol.wp-block-list.is-style-lepesek > li > strong + br {
  display: none;
}

@media (max-width: 767px) {
  ol.wp-block-list.is-style-lepesek > li {
    padding-left: 2em;
  }
}

/* ============================================================================
   1/b. Letölthető dokumentumok doboz (core/group, is-style-dokumentumok)
   ----------------------------------------------------------------------------
   Halvány lila doboz, benne kisbetűs-nagybetűs cím és egy VÍZSZINTES linksor,
   minden link előtt sötétkék körben ülő dokumentum-ikon.

   Az ikon inline SVG (data-URI), mert a téma `images/dokumentumok_icon.png`-je
   ugyanez az ikon, de SÖTÉT változatban — a terven fehér, sötét körben. Egyetlen
   háttérképként a kör és az ikon együtt kell, amit PNG-vel csak két elemből
   lehetne kirakni. Ha előkerül a fehér ikon-változat, ez a blokk egy sorral
   cserélhető.
   ========================================================================== */

.wp-block-group.is-style-dokumentumok {
  background-color: var(--wp--preset--color--secondary, #F1EFF4);
  border-radius: 20px;
  padding: 2em 2.4em;
  margin: 2.5em 0;
}

.wp-block-group.is-style-dokumentumok > :first-child {
  margin-top: 0;
}

/* A cím: kicsi, ritkított, nagybetűs — a terv szerint. */
.wp-block-group.is-style-dokumentumok h2,
.wp-block-group.is-style-dokumentumok h3,
.wp-block-group.is-style-dokumentumok h4 {
  margin: 0 0 1.4em;
  color: var(--wp--preset--color--primary, #201747);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A linkek egy sorban, tördeléssel — nem felsorolásként. */
.wp-block-group.is-style-dokumentumok ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* A vízszintes köz szűkebb, mint elsőre: 2.4em-mel a négy link már nem fért
     ki egy sorba a 994px-es tartalomsávban, és tördelt. */
  gap: 1.2em 1.7em;
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

.wp-block-group.is-style-dokumentumok li {
  margin: 0;
}

.wp-block-group.is-style-dokumentumok li a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--wp--preset--color--primary, #201747);
  text-decoration: underline;
  /* Egy link felirata ne törjön két sorba az ikonja mellett. */
  white-space: nowrap;
}

.wp-block-group.is-style-dokumentumok li a::before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23201747'/%3E%3Crect x='13' y='11' width='14' height='18' rx='1.6' fill='%23ffffff'/%3E%3Crect x='15.6' y='14.2' width='8.8' height='1.7' rx='0.85' fill='%23201747'/%3E%3Crect x='15.6' y='17.8' width='8.8' height='1.7' rx='0.85' fill='%23201747'/%3E%3Crect x='15.6' y='21.4' width='5.8' height='1.7' rx='0.85' fill='%23201747'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .wp-block-group.is-style-dokumentumok {
    padding: 1.6em;
  }
  .wp-block-group.is-style-dokumentumok ul {
    gap: 1em 1.4em;
  }
}

/* ============================================================================
   2. GYIK — a Yoast FAQ blokk lenyílóvá téve
   ----------------------------------------------------------------------------
   A Yoast adja a markupot ÉS a strukturált adatot (FAQPage / Question /
   acceptedAnswer). Azt nem bántjuk — csak a megjelenést ültetjük rá, hogy a
   schema sértetlen maradjon. A gomb-szerepet és az aria-expanded-et a
   js/vny-faq.js teszi hozzá; JS nélkül minden válasz nyitva marad (ez a
   szándékolt fallback: a tartalom sosem érhetetlen el).
   ========================================================================== */

.schema-faq.wp-block-yoast-faq-block {
  background: #ffffff;
  border-radius: 20px;
  padding: 0.5em 2em;
  margin-bottom: 2em;
}

.schema-faq .schema-faq-section {
  border-bottom: 1px solid #E2DDDF;
  padding: 0;
}

.schema-faq .schema-faq-section:last-child {
  border-bottom: none;
}

/* A kérdés-sor. A JS <button>-t csinál belőle; a stílus mindkét állapotra jó. */
.schema-faq .schema-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  width: 100%;
  padding: 1.4em 0;
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
  color: var(--wp--preset--color--primary, #201747);
  font-weight: 700;
  cursor: pointer;
}

/* A nyíl. Ugyanaz az ikon, mint a téma többi nyilas eleménél. */
.schema-faq .schema-faq-question::after {
  content: url(/wp-content/themes/pm-core/images/Header_Bejelentes-nyil.png);
  flex: 0 0 30px;
  width: 30px;
  height: 15px;
  transition: transform 0.25s ease;
}

/* Nyitott állapotban a nyíl felfelé fordul. */
.schema-faq .schema-faq-section.is-open .schema-faq-question::after {
  transform: rotate(-90deg);
}

.schema-faq .schema-faq-question:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary, #201747);
  outline-offset: 2px;
}

/* A válasz. A JS zárja be; JS nélkül végig látszik. */
.schema-faq .schema-faq-answer {
  margin: 0;
  padding: 0 0 1.6em;
}

.schema-faq .schema-faq-section.is-closed .schema-faq-answer {
  display: none;
}