/* A ".khek-sajto__cim" felirat megszunt (lasd index.js) - a frontenden a blokk
   sosem irt ki cimet, ezert a szerkesztobol is kikerult. */

/* Frontend lista */
.khek-sajto__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.khek-sajto__sor {
  display: grid;
  grid-template-columns: 145px 160px 1fr;
  align-items: baseline;
  gap: 25px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wp--preset--color--green);
  font-size: 17px;
}

.khek-sajto__sor:first-child {
  border-top: 1px solid var(--wp--preset--color--green);
}

.khek-sajto__datum {
  white-space: nowrap;
  flex-shrink: 0;
  /* Szerkesztoben (lasd index.js) ez a span nem sima szoveget, hanem
     ev/honap/nap urlapelemeket tartalmaz. A tordeles vegso menedeknek
     megmarad (nagyon szuk vasznon ne csorduljon at a szomszedos "forras"
     oszlopba), de a szerkesztoi datum-oszlop szelessege lejjebb ugy van
     beallitva, hogy a harom mezo NORMAL esetben egy sorba ferjen. Egyetlen
     szoveg-gyereknel (frontend) ennek nincs vizualis hatasa. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.khek-sajto__forras {
  font-weight: 600;
  color: var(--wp--preset--color--green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.khek-sajto__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  /* Grid-elemkent alapertelmezetten (justify-items: stretch) a teljes
     cellaszelesseget kitoltene - ezzel a hover box-shadow-ja is a teljes
     oszlopszelesseg alatt futna, nem csak a tenyleges szoveg alatt. */
  justify-self: start;
  /* A Csatolmanyok linkjeevel megegyezo szoveg-vonal tavolsaghoz (lasd
     csatolmanyok/style.css __nev), hogy a hover box-shadow-ja ugyanolyan
     kozel legyen a szoveghez. */
  line-height: 1;
}

/* box-shadow-kent adjuk hozza, nem text-decoration-kent - ugyanaz a technika
   es meret (1.5px), mint a Csatolmanyok linkjenel (lasd csatolmanyok/style.css),
   hogy ne foglaljon helyet/mozditsa el a sortavolsagot, es a bongeszo
   pixel-kerekitese se vekonyitse el. */
.khek-sajto__link:hover {
  color: var(--wp--preset--color--green);
  text-decoration: none;
  box-shadow: 0 1.5px 0 0 currentColor;
}

.khek-sajto__link--nolink {
  color: inherit;
}

/* Külső link / PDF-dokumentum jelző ikon a link szövege mellett. */
.khek-sajto__link-icon {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 6px;
  opacity: 0.7;
}

/* Csak képernyőolvasóknak - vizuálisan elrejtve, de kiolvasva egyértelművé
   teszi, hogy a link új lapon nyílik meg, illetve dokumentum-e. */
.khek-sajto__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Szerkesztő: a sor (li.khek-sajto__sor) ugyanazt a racs-elrendezest
   hasznalja, mint a frontend (lasd feljebb) - csak a mezok valnak
   kozvetlenul szerkesztheto form-elemekke, keret/hatter nelkul, hogy a
   sor kinezete nyugalmi allapotban (hover/fokusz nelkul) megegyezzen a
   kesz oldalon latott szoveggel. */
.khek-sajto__datum-mezo {
  box-sizing: border-box;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  padding: 0;
  border-radius: 3px;
}

.khek-sajto__datum-mezo--ev {
  width: 3.4em;
}

/* A SZERKESZTOBEN a datum-oszlop szelesebb, mint a kesz oldalon.

   Miert kell? A kesz oldalon itt egyetlen szoveg all ("2026. február 03.",
   ~145px), a szerkesztoben viszont harom urlapelem: az ev beviteli mezo
   (51px), a honap legordulo (63px, a leghosszabb "szept." roviditeshez
   meretezve) es a nap legordulo (41px) - a ket 6px-es kozzel egyutt 167px.
   A 145px-es oszlopban ez tordelt, tobbsoros lett: az ev, a honap es a nap
   kulon sorba kerult, es a datum ELOLVASHATATLANNA valt (az "2026 / 3 /
   febr." elrendezes ugy nezett ki, mintha a lista rendezetlen lenne, holott
   a sorrend helyes volt).

   A ".khek-sajto" osztaly csak a szerkesztoi gyokeren van rajta (lasd
   index.js useBlockProps), a mentett markup gyokere "khek-sajto__lista" -
   ezert ez a szabaly a kesz oldalt nem erinti, ott az oszlop marad 145px. */
.khek-sajto .khek-sajto__sor {
  grid-template-columns: 175px 160px 1fr;
}

.khek-sajto__datum-mezo:hover,
.khek-sajto__datum-mezo:focus {
  border-color: #ccc;
  outline: none;
  padding: 0 2px;
}

input.khek-sajto__forras {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  border-radius: 3px;
}

input.khek-sajto__forras:hover,
input.khek-sajto__forras:focus {
  border-color: #ccc;
  outline: none;
  padding: 0 2px;
}

.khek-sajto__link-btn,
.khek-sajto__torol-btn {
  flex-shrink: 0;
}

.khek-sajto__link-popover {
  padding: 16px;
  min-width: 260px;
}

.khek-sajto__ures {
  color: #757575;
  font-style: italic;
  margin: 0 0 12px;
}

.khek-sajto__toolbar {
  margin-top: 8px;
}

/* Reszponzív */
@media (max-width: 600px) {
  .khek-sajto__sor {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}