/* ==========================================================================
   99-wp-overrides.css — WordPress plugin CSS-ek felülírása

   ⚠️ EZ A FÁJL SZÁNDÉKOSAN NINCS @layer-ben, és SZÁNDÉKOSAN UTOLSÓNAK
   töltődik.

   A kaszkádban a layer NÉLKÜLI deklarációk MINDEN nevesített layer után
   jönnek, tehát erősebbek — függetlenül a specificity-től. A plugin CSS-ek
   (WooCommerce, JetEngine, Complianz, side cart…) layer nélküliek, így egy
   egyszerű `a { color: … }` szabályuk felülírja a téma teljes, layerbe
   szervezett stíluskészletét.

   Ezért ami plugin CSS ellen kell nyerjen, az IDE jön, layeren kívülre.
   Így nincs szükség !important-ra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sötét hátterű blokkok szövegszíne

   A sötétkék sávokban (események, CTA, lábléc, statisztika) a szöveg és a
   linkek fehérek. Ez nem eshet áldozatul egy plugin globális link-szín
   szabályának, ezért layeren kívül rögzítjük.
   -------------------------------------------------------------------------- */

.events-band,
.cta-band,
.stats-band__inner,
.site-footer {
  color: var(--color-text-invert);
}

.events-band :is(h1, h2, h3, h4, h5, h6),
.cta-band :is(h1, h2, h3, h4, h5, h6),
.stats-band__inner :is(h1, h2, h3, h4, h5, h6),
.site-footer :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-invert);
}

.event-card__title a,
.news-card__title a,
.events-band a:not(.btn),
.site-footer a:not(.btn),
.topbar__link {
  color: inherit;
}

.event-card__title a:hover,
.events-band a:not(.btn):hover,
.site-footer a:not(.btn):hover {
  color: var(--color-accent);
}

/* A sárga CTA gombok szövege a sötét sávokban is sötétkék marad */
.events-band .btn,
.cta-band .btn,
.site-footer .btn {
  color: var(--btn-color);
}

/* --------------------------------------------------------------------------
   Hír- és bejegyzés-linkek

   A kártyacímek és a lapozó linkjei nem kaphatnak plugin-eredetű aláhúzást
   és linkszínt. Aláhúzás CSAK hoverre — a hover szabálynak is itt kell
   lennie, mert a 09-home.css layerezett verzióját a layer nélküli plugin
   CSS felülírná.
   -------------------------------------------------------------------------- */

.news-featured__title a,
.news-card__title a,
.pagination .page-numbers {
  text-decoration: none;
}

.news-featured__title a:hover,
.news-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pagination .page-numbers.current {
  color: var(--color-text-invert);
}

/* --------------------------------------------------------------------------
   GUTENBERG BLOKKOK

   A blokk-könyvtár (wp-block-library) CSS-e layer nélküli, ezért erősebb a
   téma layerezett készleténél: a gomb hátterét, paddingját és a táblázat
   cellakereteit csak innen lehet átírni.

   Ugyanezek a szabályok szolgálják ki a szerkesztőt is (add_editor_style),
   így a minták beszúráskor már úgy néznek ki, ahogy a fronton fognak.
   -------------------------------------------------------------------------- */

/* --- Gomb blokk = ICF sárga pill --------------------------------------- */

.wp-block-button__link {
  padding: var(--space-3) var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);

  background-color: var(--color-accent);
  color: var(--icf-deep-blue);

  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;

  transition: background-color var(--duration-base) var(--ease);
}

.wp-block-button__link:hover {
  background-color: var(--color-accent-hover);
  color: var(--icf-deep-blue);
}

/* Körvonalas gombstílus (a blokk "Vázlat" változata) */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: var(--icf-deep-blue);
  background-color: transparent;
  color: var(--icf-deep-blue);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--icf-deep-blue);
  color: var(--color-text-invert);
}

/* --- Táblázat: kártyás megjelenés -------------------------------------- */

/* Két markup ugyanazt a képet adja: a Gutenberg táblázat blokk
   (.wp-block-table) és a régi tartalomból örökölt sima <table>. A régi
   <table> a bejegyzések és az OLDALAK törzsében is előfordul, ezért
   mindkét törzs-osztály szerepel. */
.post-single__body table,
.page-body__inner table,
.wp-block-table table {
  min-inline-size: 34rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-nav);
}

.post-single__body :is(th, td),
.page-body__inner :is(th, td),
.wp-block-table :is(th, td) {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: start;
}

.post-single__body thead :is(th, td),
.page-body__inner thead :is(th, td),
.wp-block-table thead :is(th, td) {
  border-bottom: none;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  font-weight: var(--fw-semibold);
}

.post-single__body tbody tr:nth-child(even),
.page-body__inner tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
  background-color: var(--color-bg);
}

.post-single__body tbody tr:last-child :is(th, td),
.page-body__inner tbody tr:last-child :is(th, td),
.wp-block-table tbody tr:last-child :is(th, td) {
  border-bottom: none;
}

.wp-block-table figcaption {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: start;
}

/* --- Elnökségi kártya fotója (Kapcsolat oldal) ------------------------- */

/* A blokk-könyvtár két layer nélküli szabálya ellen kell nyerni:
   `:where(figure){margin:0 0 1em}` (nulla specificitás, mégis erősebb minden
   layerezett szabálynál) és `.wp-block-image img{height:auto}`, ami
   szétvágná a négyzetes portré arányát. */
.board-card .board-card__photo,
.team-card .team-card__photo {
  margin: 0;
}

.board-card .board-card__photo img,
.team-card .team-card__photo img {
  block-size: 100%;
}

/* A csapatkártya fotója alá kell a térköz, a `:where(figure){margin:0 0 1em}`
   viszont csak felülírható, nem finomítható — ezért itt adjuk vissza. */
.team-card .team-card__photo {
  margin-block-end: var(--space-4);
}

/* --- Előadó blokk (media-text minta) ----------------------------------- */

.icf-speaker .wp-block-media-text__media img {
  border-radius: var(--radius-full);
  aspect-ratio: 1;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Logósor — a szerkesztőben rakott Csoport blokk, `logo-grid` osztállyal

   A `.logo-cards` (14-page.css) a migrált, NÉVVEL ellátott logókártyáké.
   Ez a csupasz változat: Csoport → Rács elrendezés, benne csak Kép blokkok
   (támogatók, partnerek egy esemény alján). Osztály nélkül a rács minden
   logót a saját oszlopa szélességére nyújt, így a négyzetes logó (Soft Skill
   Akadémia, 2026-os konferencia) a fekvők sokszorosára nőtt.

   Layeren KÍVÜL, mert a Csoport rácsának oszlopszáma a core
   `core-block-supports` inline stílusából jön (layer nélküli, 0,1,0) — ezt
   csak itt, és a két osztállyal (0,2,0) lehet felülírni. A kép SZÉLESSÉGÉT
   és MAGASSÁGÁT is auto-ra engedjük, mindkettőt korláttal: így az arány a
   kép saját aránya marad, és a blokk inline `object-fit` értéke nem számít.
   -------------------------------------------------------------------------- */

/* Flex, nem rács: a csonka utolsó sor (pl. egyetlen logó) így KÖZÉPEN áll,
   nem a bal oszlopban. A Csoport saját rács-beállítása (oszlopszám) ezzel
   hatástalan — a logók száma és a hely dönti el, hány fér egy sorba. */
.wp-block-group.logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8) var(--space-6);
}

.logo-grid .wp-block-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 200px;
  margin: 0;
  block-size: 96px;

  /* A flex-elem alapból a tartalma min-content szélességéig nő, ami itt a
     kép EREDETI szélessége (Z-Press 1000px, AYC 2000px): mobilon kilógtak. */
  min-inline-size: 0;
}

.logo-grid .wp-block-image > a {
  display: contents;
}

.logo-grid .wp-block-image img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Fejléc- és lábléc-logó a Woo oldalakon

   A WooCommerce `.woocommerce img, .woocommerce-page img { height: auto }`
   szabálya a body osztályán át MINDEN képre ráül — a termékoldalon a
   logóra is, ami így a 469px-es természetes méretére nőtt, és a fejléc a
   többszörösére dagadt. Layeren kívül kell visszaadni a magasságot, és
   a Woo szelektoránál (0,1,1) erősebben: a magányos osztály (0,1,0) itt
   is alulmarad, ezért a burkoló osztálya is kell elé.
   -------------------------------------------------------------------------- */

.site-header__brand .site-header__logo {
  block-size: 48px;
}

.site-footer .site-footer__logo {
  block-size: 44px;
}

/* --------------------------------------------------------------------------
   További plugin-felülírások

   Példa: WooCommerce form input
   .woocommerce form .form-row input.input-text {
     border-radius: var(--radius-md);
     padding: var(--space-3) var(--space-4);
   }
   -------------------------------------------------------------------------- */