/* ==========================================================================
   Szócikktár – katalóguskártyák, betűfiókos szekrény, Arcképcsarnok
   A színek és betűk a változókkal a témához igazíthatók (pl. a téma stíluslapjában:
   .szt-lap, .szt-kartya { --szt-akcent: #7a1f1f; }).
   ========================================================================== */

:root {
	--szt-papir: #efe3bf;
	--szt-papir-vilagos: #fbf6e6;
	--szt-tinta: #2b2118;
	--szt-tinta-halvany: #6b5a3c;
	--szt-akcent: #8a2b22;
	--szt-link: #6e2a22;
	--szt-rez: #b08d57;
	--szt-rez-vilagos: #d9bd84;
	--szt-fa: #45301a;
	--szt-fa-sotet: #2b1d10;
	--szt-gepiras: "Courier New", Courier, monospace;
	--szt-cim-font: inherit;
}

.szt-oldal { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.szt-lap { max-width: 1160px; margin: 0 auto; padding: 1.2rem 0 3rem; }
.szt-lap *, .szt-kartya, .szt-kartya * { box-sizing: border-box; }
.szt-morzsa { margin: 0 0 1rem; font-size: .9rem; opacity: .85; }
.szt-morzsa a { text-decoration: none; }
.szt-morzsa a:hover { text-decoration: underline; }

/* --- Kereső, kategóriák ---------------------------------------------------- */

.szt-kereso { display: flex; align-items: stretch; gap: .5rem; max-width: 640px; margin: 0 auto 1rem; }
.szt-kereso input[type="search"] {
	flex: 1; min-width: 0; margin: 0; padding: .55rem .8rem; font: inherit;
	background: var(--szt-papir-vilagos); color: var(--szt-tinta); border: 1.5px solid var(--szt-rez); border-radius: 2px;
}
.szt-kereso button, .szt-gomb {
	display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: .45rem .9rem;
	font-family: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
	background: var(--szt-rez); color: #1a140c; border: 1.5px solid var(--szt-rez); border-radius: 2px; cursor: pointer; text-decoration: none;
}
.szt-kereso button:hover, .szt-gomb:hover { background: var(--szt-rez-vilagos); color: #1a140c; }
.szt-kereso .szt-gomb--veletlen { margin-left: auto; white-space: nowrap; background: transparent; color: inherit; }
.szt-kereso .szt-gomb--veletlen:hover { background: var(--szt-rez); color: #1a140c; }
@media (max-width: 560px) { .szt-kereso { flex-wrap: wrap; } .szt-kereso input[type="search"] { flex-basis: 60%; } .szt-kereso .szt-gomb--veletlen { margin-left: 0; } }

.szt-kategoriak { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.szt-kategoriak li { margin: 0; padding: 0; }
.szt-kategoriak li::before { content: none; }
.szt-kategoriak a { display: block; padding: .22rem .8rem; border: 1.5px solid var(--szt-rez); border-radius: 999px; font-size: .88rem; text-decoration: none; color: inherit; }
.szt-kategoriak a:hover { border-color: var(--szt-rez-vilagos); }
.szt-kategoriak a[aria-current="true"] { background: var(--szt-rez); color: #1a140c; }

/* --- A katalógus fiókos szekrénye: sötét fa fiókok, sárgaréz címketartó, fogantyúgyűrű --- */

.szt-betuk {
	margin: 0 auto 1.6rem; padding: 12px; max-width: 640px;
	background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.03) 18%, rgba(0,0,0,.08) 52%, rgba(255,255,255,.04) 80%, rgba(0,0,0,.2)), var(--szt-fa-sotet);
	border: 1px solid #120c06; border-radius: 4px;
	box-shadow: inset 0 0 0 3px #3b2816, inset 0 0 0 4px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.35);
}
.szt-betuk ul { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.szt-betuk li { margin: 0; padding: 0; }
.szt-betuk li::before { content: none; }
.szt-betuk a, .szt-betuk .is-ures {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
	height: 3.3rem; padding-top: 7px; text-decoration: none !important;
	background:
		repeating-linear-gradient(93deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px, rgba(0,0,0,.05) 7px 9px, transparent 9px 15px),
		linear-gradient(#5a3d22, var(--szt-fa) 55%, #3a2814);
	border: 1px solid #1b1108; border-radius: 2px;
	box-shadow: inset 1px 1px 0 rgba(255,236,200,.14), inset -1px -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.4);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.szt-betuk__cimke {
	display: grid; place-items: center; min-width: 1.7rem; height: 1.3rem; padding: 0 3px;
	font-family: Georgia, serif; font-size: .85rem; font-weight: 700; line-height: 1; color: #3b2a14;
	background: #efe4c4; border: 2px solid var(--szt-rez); border-radius: 2px;
	box-shadow: 0 0 0 1px #6d5126, inset 0 1px 2px rgba(0,0,0,.18);
}
.szt-betuk a::after, .szt-betuk .is-ures::after {
	content: ""; width: 14px; height: 8px; border: 2px solid var(--szt-rez); border-top: 0; border-radius: 0 0 8px 8px;
	box-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.szt-betuk__db {
	position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 2;
	padding: 1px 6px; font-size: .7rem; line-height: 1.4; white-space: nowrap; color: #1a140c; background: var(--szt-rez-vilagos); border-radius: 2px;
	opacity: 0; pointer-events: none; transition: opacity .15s;
}
.szt-betuk a:hover, .szt-betuk a:focus-visible { filter: brightness(1.18); transform: translateY(1px); }
.szt-betuk a:hover .szt-betuk__db, .szt-betuk a:focus-visible .szt-betuk__db { opacity: 1; }
.szt-betuk a[aria-current="true"] {
	transform: translateY(-3px) scale(1.06); z-index: 1; filter: brightness(1.25);
	box-shadow: inset 1px 1px 0 rgba(255,236,200,.2), 0 6px 0 -1px #1b1108, 0 9px 14px rgba(0,0,0,.6);
}
.szt-betuk a[aria-current="true"] .szt-betuk__cimke { background: #fff6dc; border-color: var(--szt-rez-vilagos); }
.szt-betuk .is-ures { filter: saturate(.4) brightness(.7); opacity: .55; }
.szt-betuk .is-ures .szt-betuk__cimke { background: #a8997a; color: #5d4f37; border-color: #6d5c3e; box-shadow: none; }
.szt-betuk .is-ures::after { border-color: #6d5c3e; }
@media (max-width: 560px) {
	.szt-betuk { padding: 8px; }
	.szt-betuk ul { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
	.szt-betuk a, .szt-betuk .is-ures { height: 2.9rem; padding-top: 6px; }
	.szt-betuk__cimke { min-width: 0; width: calc(100% - 8px); max-width: 1.6rem; height: 1.15rem; font-size: .78rem; border-width: 1px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .szt-betuk a { transition: none; } }

.szt-bevezeto { margin: 1.6rem 0; font-size: 1.05rem; text-align: center; }

/* --- A kihúzott fiók ------------------------------------------------------- */

.szt-fiok {
	padding: 1rem 1rem 1.4rem; border: 1px solid #5b4326; border-radius: 4px;
	background: linear-gradient(180deg, #3a2a18, #2a1e11);
	box-shadow: inset 0 6px 14px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .05);
}
.szt-fiok__cim { margin: 0 0 1rem; font-size: 1.25rem; color: var(--szt-rez-vilagos); }
.szt-fiok__cim span { font-size: .85rem; font-weight: 400; opacity: .7; margin-left: .5rem; }
.szt-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 1rem; }
.szt-fiok .szt-nincs-talalat { color: #e8dcc0; }
.szt-nincs-talalat { opacity: .8; }
.szt-lapozo { margin-top: 1.2rem; text-align: center; }
.szt-lapozo .page-numbers { display: inline-block; padding: .2rem .6rem; margin: 0 .1rem; border: 1px solid rgba(217, 189, 132, .45); color: var(--szt-rez-vilagos); text-decoration: none; }
.szt-lapozo .current { background: var(--szt-rez); color: #1a140c; }

/* --- A kártya -------------------------------------------------------------- */

.szt-kartya {
	position: relative; padding: 0 1.1rem 2.4rem 3.1rem; border-radius: 3px; overflow: hidden;
	background-color: var(--szt-papir);
	background-image:
		linear-gradient(to right, transparent 0 2.4rem, rgba(176, 60, 50, .35) 2.4rem calc(2.4rem + 1px), transparent calc(2.4rem + 1px)),
		radial-gradient(120% 90% at 50% 0, rgba(255, 255, 255, .35), transparent 60%),
		radial-gradient(90% 70% at 100% 100%, rgba(150, 110, 40, .22), transparent 70%);
	color: var(--szt-tinta); border: 1px solid #cdbb88; text-align: left;
	box-shadow: 0 1px 0 #cdbb88, 0 6px 14px rgba(0, 0, 0, .3);
}
.szt-kartya a { color: var(--szt-link); text-decoration-color: rgba(110, 42, 34, .45); }
.szt-kartya a:hover { color: var(--szt-tinta); }
.szt-kartya__lyuk {
	position: absolute; left: 50%; bottom: .65rem; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%;
	background: var(--szt-fa-sotet); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .5);
}
.szt-kartya__fej {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem;
	margin: 0 -1.1rem .6rem -3.1rem; padding: 1rem 1.1rem .5rem 3.1rem; border-bottom: 1px solid rgba(176, 60, 50, .55);
}
.szt-kartya__bely {
	display: inline-block; padding: .05rem .5rem; transform: rotate(-3deg); opacity: .88;
	font: 700 .72rem/1.5 var(--szt-gepiras); letter-spacing: .14em; color: var(--szt-akcent);
	border: 2px solid var(--szt-akcent); border-radius: 2px; mix-blend-mode: multiply;
}
.szt-kartya__rejtett { font: 700 .66rem/1.5 var(--szt-gepiras); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #8a2b22; padding: 0 .4rem; border-radius: 2px; }
.szt-kartya__nev { flex-basis: 100%; margin: 0; padding: 0; border: 0; font-family: var(--szt-gepiras); font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--szt-tinta); letter-spacing: 0; text-transform: none; }
.szt-kartya--teljes .szt-kartya__nev { font-size: 1.6rem; }
.szt-kartya__nev a { color: inherit; text-decoration: none; }
.szt-kartya__nev a:hover { text-decoration: underline; }
.szt-kartya__torzs::after { content: ""; display: table; clear: both; }
.szt-kartya__kep { float: right; margin: 0 0 .5rem .9rem; width: 84px; padding: 3px; background: var(--szt-papir-vilagos); border: 1px solid #b9a56c; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transform: rotate(1.5deg); }
.szt-kartya--teljes .szt-kartya__kep { width: 170px; }
.szt-kartya__kep img { display: block; width: 100%; height: auto; margin: 0; filter: sepia(.35) contrast(1.03); }
.szt-kartya__kep figcaption.szt-kartya__kepjog { margin-top: 4px; font-size: .68rem; line-height: 1.3; font-style: italic; color: var(--szt-tinta-halvany); text-align: right; }
.szt-kartya .szt-kartya__kepjog a { color: var(--szt-tinta-halvany); }
.szt-kartya__meghat { margin: 0 0 .6rem; font-size: 1.02rem; font-style: italic; line-height: 1.45; }
.szt-kartya__adatok { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .8rem; margin: 0; font-size: .92rem; line-height: 1.45; }
.szt-kartya__adatok dt { margin: 0; font-family: var(--szt-gepiras); font-size: .74rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--szt-tinta-halvany); padding-top: .14rem; }
.szt-kartya__adatok dd { margin: 0; }
.szt-kartya__tobb { clear: both; margin: .7rem 0 0; font-family: var(--szt-gepiras); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.szt-kartya__tobb a { color: var(--szt-tinta-halvany); text-decoration: none; border-bottom: 1px dotted currentColor; }
.szt-kartya__tobb a:hover, .szt-kartya__tobb a:focus { color: inherit; border-bottom-style: solid; }
.szt-kartya__lasd { clear: both; margin: .7rem 0 0; font-size: .92rem; }
.szt-kartya__lasd > span { font-family: var(--szt-gepiras); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--szt-tinta-halvany); margin-right: .3rem; }
.szt-nincs { opacity: .6; border-bottom: 1px dashed currentColor; cursor: help; }
@media (max-width: 560px) {
	.szt-kartya--teljes .szt-kartya__kep { width: 120px; }
	.szt-kartya__adatok { grid-template-columns: 1fr; }
	.szt-kartya__adatok dt { padding-top: .3rem; }
}

/* --- A szócikk oldala ------------------------------------------------------ */

.szt-szocikk .szt-kartya--teljes { max-width: 820px; margin: 0 auto 1.6rem; padding-bottom: 2.6rem; }
.szt-szocikk .szt-morzsa { max-width: 820px; margin-left: auto; margin-right: auto; }
.szt-szoveg { max-width: 760px; margin: 0 auto; font-size: 1.08rem; }
.szt-szoveg > :first-child { margin-top: 0; }
.szt-vissza { max-width: 760px; margin: 2rem auto 0; font-size: .95rem; }
.szt-vissza .szt-cedula-gomb { display: inline; padding: 0 !important; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; color: inherit !important; font: inherit !important; text-decoration: underline; cursor: pointer; }
.szt-vissza .szt-cedula-gomb[hidden] { display: none; }
.szt-cedula-iv { display: none; }

/* --- Beágyazott kártya és widget ------------------------------------------ */

.szt-beagyazott { margin: 1.4em 0; }
.szt-beagyazott__tovabb, .szt-nap__tobb { margin: 8px 0 0; text-align: right; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.szt-nap .szt-kartya { padding-left: 1.1rem; background-image: radial-gradient(120% 90% at 50% 0, rgba(255, 255, 255, .35), transparent 60%); }
.szt-nap .szt-kartya__fej { margin-left: -1.1rem; padding-left: 1.1rem; }

/* --- Arcképcsarnok ----------------------------------------------------------- */

.szt-szarny { margin: 0 0 2.4rem; }
.szt-szarny__cim { margin: 0 0 1.1rem; padding-bottom: .4rem; font-size: 1.35rem; border-bottom: 1px solid var(--szt-rez); }
.szt-arckepek { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem 1rem; }
.szt-arckep { margin: 0; padding: 0; }
.szt-arckep::before { content: none; }
.szt-arckep a { display: block; text-align: center; text-decoration: none; color: inherit; }
.szt-arckep__keret {
	display: block; width: 130px; height: 168px; margin: 0 auto .6rem; overflow: hidden;
	border-radius: 50% / 52%; border: 6px double var(--szt-rez);
	background: radial-gradient(circle at 50% 35%, #d8c89d, #a8946a); box-shadow: 0 5px 14px rgba(0, 0, 0, .4), inset 0 0 12px rgba(0, 0, 0, .35);
	transition: border-color .2s;
}
.szt-arckep:hover .szt-arckep__keret { border-color: var(--szt-rez-vilagos); }
.szt-arckep__keret img { width: 100%; height: 100%; margin: 0; object-fit: cover; filter: sepia(.45) contrast(1.05); display: block; }
.szt-arckep__keret svg { width: 100%; height: 100%; fill: rgba(60, 44, 24, .55); }
.szt-arckep__nev { display: block; font-family: var(--szt-cim-font); font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.szt-arckep__al { display: block; margin-top: .15rem; font-size: .82rem; opacity: .75; line-height: 1.3; }
.szt-csarnok__jog { margin: 18px 0 0; font-size: .82rem; font-style: italic; text-align: center; opacity: .8; }
@media (max-width: 560px) {
	.szt-arckepek { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	.szt-arckep__keret { width: 108px; height: 140px; }
}

/* --- Nyomtatható cédula (5 × 3 hüvelyk) vágójelekkel ---------------------- */

@media print {
	html.szt-cedula-nyomtat, html.szt-cedula-nyomtat body { background: #fff !important; }
	html.szt-cedula-nyomtat body * { visibility: hidden !important; }
	html.szt-cedula-nyomtat .szt-cedula-iv, html.szt-cedula-nyomtat .szt-cedula-iv * { visibility: visible !important; }
	html.szt-cedula-nyomtat .szt-cedula-iv { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding-top: 12mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.szt-cedula-iv__lap { position: relative; width: 127mm; height: 76.2mm; margin: 0 auto; }
	.szt-cedula-iv__lap .szt-kartya { width: 127mm; height: 76.2mm; margin: 0 !important; padding: 0 6mm 6mm 12.5mm !important; overflow: hidden; box-shadow: none !important; border: .3pt solid #bbb !important; font-size: 8.6pt; line-height: 1.3; }
	.szt-cedula-iv__lap .szt-kartya__fej { margin: 0 -6mm 1.5mm -12.5mm; padding: 4mm 6mm 1.5mm 12.5mm; }
	.szt-cedula-iv__lap .szt-kartya__nev { font-size: 11.5pt !important; }
	.szt-cedula-iv__lap .szt-kartya__meghat { margin: 0 0 1.5mm; font-size: 8.8pt; }
	.szt-cedula-iv__lap .szt-kartya__bely { font-size: 6.5pt; }
	.szt-cedula-iv__lap .szt-kartya__adatok { font-size: 8pt; gap: 0 3mm; }
	.szt-cedula-iv__lap .szt-kartya__adatok dt { font-size: 6.4pt; }
	.szt-cedula-iv__lap .szt-kartya__kep { width: 20mm !important; margin: 0 0 1mm 2mm; transform: none; box-shadow: none; }
	.szt-cedula-iv__lap .szt-kartya__lasd { margin-top: 1.5mm; font-size: 7.6pt; }
	.szt-cedula-iv__lap .szt-kartya__lasd > span { font-size: 6.4pt; }
	.szt-cedula-iv__lap .szt-kartya__lyuk { width: 4mm; height: 4mm; margin-left: -2mm; bottom: 2.5mm; background: none; box-shadow: none; border: .4pt dashed #8a7a5a; }
	.szt-cedula-iv__jel { position: absolute; width: 6mm; height: 6mm; border: 0 solid #000; }
	.szt-cedula-iv__jel.is-bf { left: -8mm; top: -8mm; border-right-width: .3pt; border-bottom-width: .3pt; }
	.szt-cedula-iv__jel.is-jf { right: -8mm; top: -8mm; border-left-width: .3pt; border-bottom-width: .3pt; }
	.szt-cedula-iv__jel.is-ba { left: -8mm; bottom: -8mm; border-right-width: .3pt; border-top-width: .3pt; }
	.szt-cedula-iv__jel.is-ja { right: -8mm; bottom: -8mm; border-left-width: .3pt; border-top-width: .3pt; }
	.szt-cedula-iv__forras { margin: 12mm auto 0; width: 127mm; font-family: Georgia, serif; font-size: 7pt; color: #666; text-align: center; word-break: break-all; }
	.szt-vissza, .szt-kereso, .szt-betuk { display: none !important; }
}