@import url("/d/parameters.css");

body {margin: 0; padding: 0; font-family: var(--font-family); font-size: var(--base-font-size); font-weight: var(--body-font-weight); background-color: var(--body-bgcolor);line-height: 1.5;}
main { margin-top: var(--header-height) !important; display: block; position: relative; z-index: 10; padding: var(--content-padding); }

/* Címsorok, normál paragrafusok és lead -- ezek a main-en vannak */
main h1 { font-family: var(--font-title-family); font-size: 250%; font-style: italic; margin: 15px 0; }
main h2 { font-family: var(--font-family); font-size: 188%; font-weight: 600; margin-top: 25px; }
main h3 { font-family: var(--font-family); font-size: 142%; font-weight: 300; margin-bottom: 10px; }
main h3:not(:first-of-type) { margin-top: 30px; color: darkgreen; font-weight: 500; }
main p { text-align: justify; color: #424242; font-weight: 300; margin-bottom: 1.2em; padding: 0 var(--content-padding); }
.lead { font-weight: 600; font-size: 1.15em; color: var(--color-lead); display: block; margin-bottom: 1.5em; padding: 0 var(--content-padding); }
main h6.author { text-align: right; color: var(--color-author);}
main h3.postdate { text-align: right; color: var(--color-postdate);x font-size: 110%; font-weight: 200;}

/* 2. FEJLÉC Mobil fejléc fix */
header { 
	position: fixed !important; top: 0 !important; left: 0; width: 100%; height: var(--header-height); 
	z-index: 9999; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box;
	background-color: var(--primary-color);
}
.logo { display: flex; align-items: center; height: 100%; }
.motto h1 { color: var(--motto-color); font-size: var(--motto-size); font-weight: 800; font-style: italic;
	margin: 0; line-height: var(--header-height); float: left; padding-left: 20px; 
}
.menu-toggle { background: #333; color: white; border: 1px solid #555; padding: 8px 12px; cursor: pointer; margin: 0; font-weight: 800; }

#menu {
	display: none;
	position: absolute;
	top: var(--header-height);
	left: 0; width: 100%;
	background-color: var(--color-menu-bg);
	z-index: 1000;
}

#menu.open { display: block; }

.menu-container { padding: 20px; }
.blog-menu summary { list-style: none; cursor: pointer; color: #FFF; font-weight: 800; padding: 8px 0; font-size: 13px; }
.blog-menu ul { list-style: none; padding-left: 15px; margin: 5px 0; }
.blog-menu details details { margin-left: 15px; border-left: 1px solid #444; padding-left: 10px; }

#menu a { text-decoration: none; color: #BBB; font-size: 11px; padding: 4px 0; display: block; }
#menu a:hover { color: #FFF; }

.yt-sm { width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0; }


/* 4. CÍMKEFELHŐ (Visszaállítva minden részlet) */
#allLabels {
  display: flex;
  flex-wrap: wrap;
  /*gap: 2px;*/
  align-items: center;
}

#allLabels h1,
#allLabels h2,
#allLabels h3,
#allLabels h4 {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: inherit;
  display: inline-block;
  vertical-align: middle;
}

#allLabels h1 a,
#allLabels h2 a,
#allLabels h3 a,
#allLabels h4 a {
	display: inline-block;
	padding: 0px 3px;
	margin: 0px 1px;
	text-decoration: none;
	border-radius: 1px;
	font-variant: all-petite-caps;
}

#allLabels a:hover { background-color: #FC08; }

#allLabels h1.label1 a { color: #fff; font-weight: 600; font-size: 15px; background-color: #6CF8}
#allLabels h2.label2 a { color: #fff; font-weight: 500; font-size: 13px; background-color: #6CF7}
#allLabels h3.label3 a { color: #eee; font-weight: 400; font-size: 12px; background-color: #6CF6}
#allLabels h3.label4 a { color: #eee; font-weight: 300; font-size: 11px; background-color: #6CF5}
#allLabels h4.label5 a { color: #ddd; font-weight: 200; font-size: 10px; background-color: #6CF4}
.labelnum {   font-size: 10px;  color: #aaa;  font-weight: 100;  margin-left: 0px;}

/* 5. KÉPKEZELÉS (Lapos design, árnyékok nélkül) */
.pic-wrap { margin: 20px 0; width: 100%; text-align: center; }
.pic-wrap img { width: 100%; height: auto; border: 1px solid #eee; display: block; transition: opacity 0.3s; }
.pic-wrap img:hover { opacity: 0.8; }

figcaption, .picAbstract { 
	font-size: 11px; color: #777; text-align: center; 
	margin-top: 6px; font-weight: 300; display: block;
}

/* 6. ASZTALI NÉZET (768px+) */
@media (min-width: 768px) {
	#menu {
		position: fixed;
		width: var(--menu-width);
		height: 100vh;
		background-color: var(--color-menu-bg);
		display: block;
		/*overflow-y: auto;*/
	}
	#content { margin-left: var(--menu-width); }
	.menu-toggle { display: none; }

	/* Hasábok */
	.main-columns { display: flex; gap: 42px; padding: var(--fullwidth-padding); align-items: flex-start; }
	.main-columns.reverse { flex-direction: row-reverse; }
	.left-column { flex: 2; }
	.right-column { flex: 1; display: flex; flex-direction: column; gap: 20px; }

	/* Befloatolt képek */
	.picL { float: left; margin: 0 40px 20px 0; max-width: 38%; }
	.picR { float: right; margin: 0 0 20px 40px; max-width: 38%; }


	.pic-row {
		display: flex;
		flex-direction: row;
		align-items: flex-end; /* Alulra igazít: Orsi lába megmarad! */
		justify-content: center;
		gap: 15px;
		margin: 25px 0;
	}

	.pic-row .pic-wrap {
		flex: 0 1 auto; /* Csak akkora helyet foglal, amekkora a kép */
		max-width: 100%;
	}

	.pic-row img {
		display: block;
		width: auto;
		height: auto;
		max-height: 380px; /* Itt korlátozzuk a magasságot, de NEM vágunk */
		max-width: 100%;
		border: 1px solid #eee;
		object-fit: contain; /* Biztonsági háló: soha nem vág */
	}

}

#meteo: { padding: 12px auto;}
#meteo iframe {
	width: 242px;
	height: 539px;
}


#footer {
    clear: both; /* Megszünteti az esetleges úsztatásokat */
    display: block !important; /* Biztosítja, hogy ne legyen rejtve */
    position: relative;
    z-index: 10;
}




/* LightBox trükkök */
#modal01 img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
}

.w3-modal { background-color: rgba(0,0,0,0.8);}

.w3-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  transition: all 0.4s ease;
}

.w3-modal.show .w3-modal-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}