/* Horgász Fogásnapló – alap stílusok. A színek a téma felülírhatja a --hfn-* változókkal. */
.hfn {
	--hfn-szin: #2f6b4f;
	--hfn-szin-sotet: #1f4a36;
	--hfn-hatter: #f5f8f6;
	--hfn-keret: #dbe5df;
	--hfn-szoveg-halvany: #7a7f80;
	--hfn-radius: 10px;
	--hfn-serif: "Source Serif 4", "Source Serif Pro", Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
	--hfn-kiemelo: #0e6a8a;
	--hfn-szoveg: #222;
	--hfn-kartya-hatter: #ebebeb;
	--hfn-arnyek: 0 2px 6px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
	--hfn-arany: #d4a017;
	--hfn-arany-sotet: #9a7209;
	margin: 1.5em 0;
}

/* Statisztika */
.hfn .hfn-stat__kartyak { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1em; }
.hfn .hfn-stat__kartya { position: relative; background: var(--hfn-kartya-hatter); border-radius: 4px; box-shadow: var(--hfn-arnyek); padding: 1.4em 1.2em; }
.hfn .hfn-stat__szam { display: block; font-family: var(--hfn-serif); font-size: 2.6em; font-style: italic; line-height: 1.1; color: var(--hfn-kiemelo); }
.hfn .hfn-stat__szam small, .hfn .hfn-kartya__suly small { font-size: .38em; font-style: normal; margin-left: .25em; }
.hfn .hfn-stat__cimke { display: block; font-family: var(--hfn-serif); font-size: .95em; color: var(--hfn-szoveg-halvany); margin-top: .4em; }
.hfn .hfn-stat__kartya--kiemelt { box-shadow: inset 0 0 0 2px var(--hfn-arany), var(--hfn-arnyek); }
.hfn .hfn-stat__kartya--kiemelt .hfn-stat__szam { color: var(--hfn-arany-sotet); }
.hfn .hfn-stat__serleg { position: absolute; top: .9em; right: .9em; color: var(--hfn-arany); }
.hfn .hfn-stat__serleg svg { width: 28px; height: 28px; }
.hfn .hfn-stat__fajok { list-style: none; margin: 1.2em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.hfn .hfn-stat__fajok li { font-family: var(--hfn-serif); background: var(--hfn-kartya-hatter); border-radius: 999px; padding: .3em .9em; font-size: .9em; }

/* Kártyák – „fogásnapló” stílus */
.hfn .hfn-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2em; }
.hfn .hfn-kartya { container-type: inline-size; background: var(--hfn-kartya-hatter); border-radius: 4px; overflow: hidden; box-shadow: var(--hfn-arnyek); display: flex; flex-direction: column; }
.hfn .hfn-kartya__kepdoboz { position: relative; }
.hfn .hfn-kartya__kep { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #d9dcdc; }
.hfn .hfn-kartya__kep img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.hfn .hfn-kartya__kep:hover img { transform: scale(1.03); }
.hfn .hfn-kartya__kep--ures { display: flex; align-items: center; justify-content: center; color: #b9c2c4; background: repeating-linear-gradient(135deg, #e1e4e4 0 12px, #dadede 12px 24px); }
.hfn .hfn-kartya__test { padding: 1.6em 1.9em 1.8em; font-family: var(--hfn-serif); }
.hfn .hfn-kartya__cr { display: inline-block; vertical-align: middle; margin-left: .5em; padding: .15em .5em; border-radius: 4px; background: #d9dfe0; color: var(--hfn-szoveg-halvany); font-size: .6em; font-weight: 600; letter-spacing: .08em; }
.hfn .hfn-kartya__cim { margin: 0; padding: 0; letter-spacing: normal; text-transform: none; text-decoration: none; font-family: var(--hfn-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--hfn-szoveg); overflow-wrap: break-word; hyphens: auto; }
.hfn .hfn-kartya__suly { margin: .15em 0 0; font-size: 2.8em; font-style: italic; line-height: 1.1; color: var(--hfn-kiemelo); }
.hfn .hfn-kartya__hossz { font-size: .32em; font-style: normal; color: var(--hfn-szoveg-halvany); margin-left: .6em; }
.hfn .hfn-kartya__meta { margin: 1.3em 0 0; font-size: .95em; color: var(--hfn-szoveg-halvany); }
.hfn .hfn-pont { margin: 0 .6em; }
.hfn .hfn-kartya__megjegyzes { margin: .9em 0 0; font-size: .95em; font-style: italic; color: var(--hfn-szoveg); }
.hfn .hfn-reszletek { display: grid; grid-template-columns: auto 1fr; gap: .35em 1em; margin: 1.1em 0 0; padding-top: 1em; border-top: 1px solid #d4d8d8; font-size: .95em; }
.hfn .hfn-reszletek dt { font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: var(--hfn-szoveg-halvany); padding-top: .15em; }
.hfn .hfn-reszletek dd { margin: 0; }

/* Aznapi időjárás, légnyomás, holdfázis */
.hfn .hfn-nap { --hfn-ikon-hatter: var(--hfn-kartya-hatter); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; margin: 1.2em 0 0; padding-top: 1.1em; border-top: 1px solid #d4d8d8; text-align: center; }
.hfn .hfn-nap__elem { display: flex; flex-direction: column; align-items: center; gap: .15em; min-width: 0; color: var(--hfn-szoveg); }
.hfn .hfn-nap__elem .hfn-ikon { width: 30px; height: 30px; color: #44494b; margin-bottom: .2em; }
.hfn .hfn-nap__elem strong { font-size: .85em; font-weight: 600; line-height: 1.2; }
.hfn .hfn-nap__elem small { font-size: .75em; color: var(--hfn-szoveg-halvany); line-height: 1.2; }

/* Rekord hal */
.hfn .hfn-kartya--rekord { box-shadow: 0 0 0 2px var(--hfn-arany), var(--hfn-arnyek); }
.hfn .hfn-serleg { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .4em; padding: .4em .85em .4em .65em; border-radius: 999px; background: var(--hfn-arany); color: #3b2a00; font-family: var(--hfn-serif); font-size: .82em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* Tippek */
.hfn .hfn-tippek__osszesito { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2em; margin-bottom: 2em; }
.hfn .hfn-tippek__blokk { background: var(--hfn-kartya-hatter); border-radius: 4px; box-shadow: var(--hfn-arnyek); padding: 1.3em 1.5em; font-family: var(--hfn-serif); }
.hfn .hfn-tippek__blokk h4 { margin: 0 0 .8em; padding: 0; line-height: 1.4; font-family: var(--hfn-serif); font-size: .78rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--hfn-kiemelo); }
.hfn .hfn-tippek__blokk ol { margin: 0; padding-left: 1.2em; }
.hfn .hfn-tippek__blokk li { margin-bottom: .3em; }
.hfn .hfn-tippek__blokk li span { display: block; font-size: .85em; color: var(--hfn-szoveg-halvany); }

/* Űrlap */
.hfn .hfn-urlap { display: grid; gap: 1em; background: var(--hfn-hatter); border: 1px solid var(--hfn-keret); border-radius: var(--hfn-radius); padding: 1.3em; }
.hfn .hfn-urlap label { display: flex; flex-direction: column; gap: .3em; font-weight: 600; font-size: .95em; }
.hfn .hfn-urlap__sor { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1em; }
.hfn .hfn-urlap input[type="text"], .hfn .hfn-urlap input[type="number"], .hfn .hfn-urlap input[type="date"],
.hfn .hfn-urlap select, .hfn .hfn-urlap textarea { width: 100%; box-sizing: border-box; padding: .55em .7em; border: 1px solid var(--hfn-keret); border-radius: 6px; font: inherit; font-weight: 400; background: #fff; }
.hfn .hfn-urlap small { font-weight: 400; color: var(--hfn-szoveg-halvany); }
.hfn .hfn-urlap .hfn-urlap__check { flex-direction: row; align-items: center; gap: .5em; font-weight: 400; }
.hfn .hfn-gomb { background: var(--hfn-szin); color: #fff; border: 0; border-radius: 6px; padding: .8em 1.6em; font-size: 1em; font-weight: 600; cursor: pointer; justify-self: start; }
.hfn .hfn-gomb:hover, .hfn .hfn-gomb:focus { background: var(--hfn-szin-sotet); }

/* Üzenetek, táblázat, lapozó */
.hfn-uzenet { padding: .9em 1.1em; border-radius: 6px; margin-bottom: 1em; border-left: 4px solid; }
.hfn-uzenet--ok { background: #e8f5ec; border-color: #2e8b57; }
.hfn-uzenet--hiba { background: #fdecea; border-color: #c0392b; }
.hfn-uzenet--figyelem { background: #fff6e0; border-color: #e0a100; }
.hfn-uzenet--info { background: var(--hfn-hatter, #f5f8f6); border-color: var(--hfn-szin, #2f6b4f); }
.hfn .hfn-ures { color: var(--hfn-szoveg-halvany); font-style: italic; }
.hfn .hfn-tabla { width: 100%; border-collapse: collapse; margin-top: .5em; font-size: .95em; }
.hfn .hfn-tabla th, .hfn .hfn-tabla td { text-align: left; padding: .5em; border-bottom: 1px solid var(--hfn-keret); }
.hfn .hfn-feltoltes__alcim, .hfn .hfn-tippek__alcim { margin: 1.5em 0 .7em; padding: 0; font-family: var(--hfn-serif); font-size: 1.4rem; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--hfn-szoveg); }
.hfn .hfn-lapozo { margin-top: 1.5em; display: flex; gap: .4em; flex-wrap: wrap; }
.hfn .hfn-lapozo .page-numbers { padding: .4em .8em; border: 1px solid var(--hfn-keret); border-radius: 6px; text-decoration: none; }
.hfn .hfn-lapozo .current { background: var(--hfn-szin); color: #fff; border-color: var(--hfn-szin); }

/* A súly mérete a kártya szélességéhez igazodik; a halfaj kisebb, a súly a hangsúlyos. */
@container (max-width: 520px) {
	.hfn .hfn-kartya__suly { font-size: clamp(2.2rem, 13cqi, 2.8rem); }
	.hfn .hfn-kartya__test { padding: 1.3em 1.4em 1.5em; }
}

/* Évválasztó és évcímek a listában */
.hfn .hfn-evek { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 1.5em; font-family: var(--hfn-serif); }
.hfn .hfn-evek a { padding: .35em 1em; border-radius: 999px; background: var(--hfn-kartya-hatter); color: var(--hfn-szoveg); text-decoration: none; font-size: .95em; }
.hfn .hfn-evek a:hover, .hfn .hfn-evek a:focus { color: var(--hfn-kiemelo); }
.hfn .hfn-evek a.aktiv { background: var(--hfn-kiemelo); color: #fff; }
.hfn .hfn-ev-cim { font-family: var(--hfn-serif); font-size: 1.6rem; line-height: 1.3; letter-spacing: normal; text-transform: none; font-style: italic; font-weight: 400; color: var(--hfn-kiemelo); margin: 1.6em 0 .7em; padding-bottom: .3em; border-bottom: 1px solid #d4d8d8; }
.hfn.hfn-lista > .hfn-ev-cim:first-of-type { margin-top: 0; }

/* Vendég azonosítása e-mail címmel */
.hfn .hfn-urlap__vendeg { border: 0; margin: 0; padding: 0 0 1em; border-bottom: 1px solid var(--hfn-keret); display: grid; gap: 1em; min-width: 0; }
.hfn .hfn-urlap input[type="email"] { width: 100%; box-sizing: border-box; padding: .55em .7em; border: 1px solid var(--hfn-keret); border-radius: 6px; font: inherit; font-weight: 400; background: #fff; }
.hfn .hfn-urlap__uj { display: grid; gap: .8em; padding: 1em; background: #fff6e0; border-left: 4px solid #e0a100; border-radius: 6px; }
.hfn .hfn-urlap__uj[hidden] { display: none; }
.hfn .hfn-urlap__uj-info { margin: 0; font-size: .92em; }
.hfn .hfn-csapda { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Lista nézet: soronként egy fogás, ugyanazokkal az adatokkal, mint a kártya */
.hfn .hfn-sorok { container-type: inline-size; display: grid; gap: .8em; }
.hfn .hfn-sor { display: grid; grid-template-columns: 88px minmax(0, 1.1fr) auto minmax(300px, 1.2fr); grid-template-areas: "kep fo suly nap" "kep reszl reszl reszl"; align-items: center; column-gap: 1.4em; padding: .8em 1.2em .8em .8em; background: var(--hfn-kartya-hatter); border-radius: 4px; box-shadow: var(--hfn-arnyek); font-family: var(--hfn-serif); }
.hfn .hfn-sor__kep { grid-area: kep; align-self: start; display: block; width: 88px; height: 88px; border-radius: 3px; overflow: hidden; background: #d9dcdc; }
.hfn .hfn-sor__kep img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfn .hfn-sor__kep.hfn-kartya__kep--ures { display: flex; align-items: center; justify-content: center; }
.hfn .hfn-sor__kep.hfn-kartya__kep--ures svg { width: 42px; height: 21px; }
.hfn .hfn-sor__fo { grid-area: fo; min-width: 0; }
.hfn .hfn-sor .hfn-kartya__meta { margin: .3em 0 0; font-size: .9em; }
.hfn .hfn-nowrap { white-space: nowrap; }
.hfn .hfn-sor__suly { grid-area: suly; margin: 0; font-size: 2.2em; white-space: nowrap; }
.hfn .hfn-sor__nap { grid-area: nap; min-width: 0; }
.hfn .hfn-sor__reszletek { grid-area: reszl; min-width: 0; }
.hfn .hfn-sor__reszletek .hfn-reszletek { margin-top: .9em; padding-top: .8em; }
.hfn .hfn-sor--rekord { box-shadow: inset 4px 0 0 var(--hfn-arany), 0 0 0 2px var(--hfn-arany), var(--hfn-arnyek); }
.hfn .hfn-serleg.hfn-serleg--sor { position: static; margin-bottom: .45em; padding: .25em .7em .25em .5em; font-size: .7em; box-shadow: none; white-space: nowrap; }
.hfn .hfn-serleg--sor svg { width: 14px; height: 14px; }

/* Tömör időjárás-sáv a sorban: ikon balra, szöveg mellette */
.hfn .hfn-sor .hfn-nap { margin: 0; padding: 0; border-top: 0; gap: .8em; text-align: left; }
.hfn .hfn-sor .hfn-nap__elem { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5em; align-items: center; justify-items: start; }
.hfn .hfn-sor .hfn-nap__elem .hfn-ikon { grid-row: span 2; width: 24px; height: 24px; margin: 0; }

/* Keskenyebb tartalom (pl. 620 px-es témaoszlop, tablet): az időjárás a sor alá kerül */
@container (max-width: 760px) {
	.hfn .hfn-sor { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "kep fo suly" "nap nap nap" "reszl reszl reszl"; row-gap: .7em; column-gap: 1em; padding: .8em; }
	.hfn .hfn-sor__kep { width: 72px; height: 72px; }
	.hfn .hfn-sor__suly { font-size: 1.9em; }
	.hfn .hfn-sor .hfn-nap { padding-top: .7em; border-top: 1px solid #d4d8d8; }
	.hfn .hfn-sor__reszletek .hfn-reszletek { margin-top: 0; }
}
/* Telefon: az időjárás elemei újra ikon fölött szöveg, hogy kiférjenek */
@container (max-width: 420px) {
	.hfn .hfn-sor .hfn-nap { text-align: center; gap: .4em; }
	.hfn .hfn-sor .hfn-nap__elem { display: flex; flex-direction: column; align-items: center; }
	.hfn .hfn-sor .hfn-nap__elem .hfn-ikon { margin-bottom: .2em; }
	.hfn .hfn-sor { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "kep fo" "kep suly" "nap nap" "reszl reszl"; row-gap: .3em; }
	.hfn .hfn-sor__kep { width: 64px; height: 64px; }
	.hfn .hfn-sor__suly { font-size: 1.7em; align-self: start; }
	.hfn .hfn-sor .hfn-nap { margin-top: .5em; }
}

/* Képnézegető (lightbox) – a body-ba kerül, ezért saját változókkal */
.hfn-nagyit { cursor: zoom-in; }
html.hfn-galeria-nyitva { overflow: hidden; }
.hfn-galeria { --hfn-g-arany: #d4a017; --hfn-g-kiemelo: #7cc7e0; --hfn-g-serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif; position: fixed; inset: 0; z-index: 999999; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; background: rgba(12, 16, 18, .97); color: #f2f2f2; font-family: var(--hfn-g-serif); }
.hfn-galeria[hidden] { display: none; }
.hfn-galeria .hfn-galeria__szinpad { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 56px 72px 12px; }
.hfn-galeria .hfn-galeria__kep { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: opacity .2s; }
.hfn-galeria.hfn-galeria--tolt .hfn-galeria__kep { opacity: .25; }
.hfn-galeria .hfn-galeria__toltes { position: absolute; width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: hfn-forog .8s linear infinite; display: none; }
.hfn-galeria.hfn-galeria--tolt .hfn-galeria__toltes { display: block; }
@keyframes hfn-forog { to { transform: rotate(360deg); } }

.hfn-galeria .hfn-galeria__adatok { display: grid; justify-items: center; gap: .35em; max-width: 720px; width: 100%; margin: 0 auto; padding: 10px 20px 4px; text-align: center; box-sizing: border-box; }
.hfn-galeria .hfn-galeria__rekord { display: inline-block; padding: .3em .9em; border-radius: 999px; background: var(--hfn-g-arany); color: #3b2a00; font-size: .8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hfn-galeria .hfn-galeria__fo { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .3em .8em; }
.hfn-galeria .hfn-galeria__faj { font-size: 1.3em; font-weight: 600; }
.hfn-galeria .hfn-galeria__suly { font-size: 2em; font-style: italic; color: var(--hfn-g-kiemelo); line-height: 1.1; }
.hfn-galeria .hfn-galeria__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .2em 1.2em; font-size: .95em; color: #c4c9cb; }
.hfn-galeria .hfn-galeria__cr { color: #9fd3b0; }
.hfn-galeria .hfn-galeria__uzenet { font-style: italic; font-size: .95em; color: #e2e2e2; max-width: 60ch; }
.hfn-galeria .hfn-galeria__szamlalo { text-align: center; font-size: .8em; letter-spacing: .1em; color: #8e9496; padding: 4px 0 14px; min-height: 1em; }

/* Gombok: a téma (pl. Elementor) gombstílusait teljesen felülírjuk */
.hfn-galeria .hfn-galeria__nyil, .hfn-galeria .hfn-galeria__bezar { position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 400 34px/1 Arial, sans-serif; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; transition: background .15s; min-height: 0; }
.hfn-galeria .hfn-galeria__nyil:hover, .hfn-galeria .hfn-galeria__bezar:hover, .hfn-galeria .hfn-galeria__nyil:focus-visible, .hfn-galeria .hfn-galeria__bezar:focus-visible { background: rgba(255, 255, 255, .28); color: #fff; outline: 2px solid #fff; outline-offset: 2px; }
.hfn-galeria .hfn-galeria__nyil { top: 45%; width: 52px; height: 52px; transform: translateY(-50%); padding-bottom: 4px; }
.hfn-galeria .hfn-galeria__nyil[hidden] { display: none; }
.hfn-galeria .hfn-galeria__nyil--elozo { left: 12px; }
.hfn-galeria .hfn-galeria__nyil--kovetkezo { right: 12px; }
.hfn-galeria .hfn-galeria__bezar { top: 10px; right: 12px; width: 44px; height: 44px; font-size: 30px; padding-bottom: 3px; }

@media (max-width: 600px) {
	.hfn-galeria .hfn-galeria__szinpad { padding: 56px 8px 8px; }
	.hfn-galeria .hfn-galeria__nyil { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; font-size: 28px; }
	.hfn-galeria .hfn-galeria__szamlalo { padding-bottom: 26px; }
	.hfn-galeria .hfn-galeria__suly { font-size: 1.6em; }
}

/* Tippek a fogáslista alatt */
.hfn .hfn-lista__tippek { margin-top: 2.8em; padding-top: 1.6em; border-top: 1px solid #d4d8d8; }
.hfn .hfn-lista__tippek .hfn-tippek__alcim { margin-top: 0; }
.hfn .hfn-tippek__bevezeto { font-family: var(--hfn-serif); color: var(--hfn-szoveg-halvany); margin: 0 0 1.2em; }
.hfn .hfn-urlap small.hfn-urlap__hozzajarulas { display: block; margin-top: .1em; font-style: italic; }