/*
Theme Name: Gulyás Üveges – saját sablonréteg
Description: A gulyasuveges.hu saját sablonrétege a Twenty Twenty-Five blokk-sablon fölött. Csak blokk-jelölést, theme.json-t és két betűfájlt tartalmaz: nincs page builder, nincs vásárolt téma, nincs bővítmény-függés. A szerkezetet fájlok hordozzák, nem az adatbázis – ezért zip-ben átvihető a fejlesztői másolatról az élesre.
Author: Kanga Design
Template: twentytwentyfive
Version: 0.6.0
Requires at least: 6.7
Tested up to: 7.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gulyasuveges
*/

/* A formanyelv egésze a theme.json-ben van. Ide csak az kerül, amit a
   theme.json nem tud kifejezni. Tartsd rövidnek. */

/* --- Oldalsávos elrendezés --- */

/* Az oldalsáv ne nyúljon a tartalommal együtt: a saját tetején kezdődjön. */
.gu-oldalsav {
	align-self: start;
	position: sticky;
	top: 1.5rem;
}

@media (max-width: 781px) {
	.gu-oldalsav {
		position: static;
	}
}

/* --- Oldallisták az oldalsávban --- */

/* A wp:page-list alapból behúzott, felsorolásjeles lista. Az oldalsávban
   inkább linksor legyen, egymás alatt, elválasztó vonallal. */
.gu-oldalsav .wp-block-page-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gu-oldalsav .wp-block-page-list li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--keret);
}

.gu-oldalsav .wp-block-page-list li:last-child {
	border-bottom: 0;
}

.gu-oldalsav .wp-block-page-list a {
	display: block;
	padding: 0.55rem 0;
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.35;
}

.gu-oldalsav .wp-block-page-list a:hover,
.gu-oldalsav .wp-block-page-list a:focus {
	text-decoration: underline;
}

/* Az aktuális oldal jelölése a listában. */
.gu-oldalsav .wp-block-page-list .current-menu-item > a {
	font-weight: 700;
}

/* --- Fejléc --- */

/* A kör alakú logó ne nyúljon meg, és mobilon is maradjon arányos. */
.gu-fejlec .wp-block-site-logo img {
	height: auto;
}

/* A felső, sötét adatsáv linkjei aláhúzás nélkül, de fókuszban láthatóan. */
.gu-adatsav a {
	text-decoration: none;
}

.gu-adatsav a:hover,
.gu-adatsav a:focus {
	text-decoration: underline;
}

/* --- Fejléc és lábléc --- */

/* Ez a szakasz azt viszi, ami korábban a blokkok attribútumaiban volt
   (háttérszín, szövegszín, térközök, keret). A blokk-jelölés ezért
   most minimális: csak osztálynevet és elrendezést hordoz. Így nem tud
   eltérni attól, amit a blokkszerkesztő generálna – ez okozta a
   „váratlan vagy hibás tartalom" hibát. */

.gu-fejlec {
	margin-bottom: 0;
}

/* Felső, sötét adatsáv */
.gu-adatsav {
	background-color: var(--wp--preset--color--turkiz-sotet);
	color: #ffffff;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.gu-adatsav-sor {
	gap: var(--wp--preset--spacing--30);
}

.gu-adatsav p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Alsó, fehér fejsáv a logóval és a menüvel */
.gu-fejsav {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--keret);
}

.gu-fejsav-sor {
	gap: var(--wp--preset--spacing--40);
}

.gu-marka {
	gap: var(--wp--preset--spacing--20);
}

.gu-marka-szoveg {
	gap: 0;
}

.gu-marka-szoveg .wp-block-site-title a {
	color: var(--wp--preset--color--turkiz-sotet);
	text-decoration: none;
}

.gu-motto {
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--szoveg-halvany);
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* Menü */
/* A szint a navigaciora tesszuk, nem a linkekre: a core ezt a szabalyt adja
   a menupontokra -> .wp-block-navigation .wp-block-navigation-item__content
   .wp-block-navigation-item__content { color: inherit }  -- szandekosan
   duplazott osztallyal, hogy eros legyen. Barmilyen sajat link-szabaly
   alulmarad vele szemben; a konteneren beallitott szint viszont oroklik. */
.gu-menu {
	gap: var(--wp--preset--spacing--30);
	font-weight: 600;
	color: var(--wp--preset--color--turkiz-sotet);
}

.gu-menu a {
	text-decoration: none;
}

.gu-menu a:hover,
.gu-menu a:focus {
	text-decoration: underline;
}

/* Mobil menü-felület: ezt korábban az overlay-attribútumok adták */
.gu-menu .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--turkiz-sotet);
	color: #ffffff;
}



/* Lábléc */
.gu-lablec {
	background-color: var(--wp--preset--color--turkiz-sotet);
	color: #ffffff;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

.gu-lablec-oszlopok {
	gap: var(--wp--preset--spacing--40);
}

.gu-lablec h2 {
	color: #ffffff;
}

.gu-lablec p {
	font-size: var(--wp--preset--font-size--small);
}

/* A régi wp:separator helyett egy felső vonal a zárósoron */
.gu-lablec-zaro {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid #3d6b70;
	text-align: center;
}

/* Linkek a sötét sávokon. Ez korábban a blokkok elements.link ágában volt,
   azt viszont a szerver csak a látogatói oldalon alkalmazza – a szerkesztő
   vásznán a téma alap linkszíne érvényesült, ami pontosan ugyanaz a
   #17494f, mint ezeknek a sávoknak a háttere. Vagyis láthatatlanok voltak. */
.gu-adatsav a,
.gu-lablec a {
	color: #ffffff;
}

.gu-adatsav a:hover,
.gu-adatsav a:focus,
.gu-lablec a:hover,
.gu-lablec a:focus {
	color: var(--wp--preset--color--turkiz);
}

/* --- Kiemelt kép: mindenhol 16:9, hasábszélességben, vágva --- */

/* A blokk maga is kap aspectRatio + scale attribútumot a sablonfájlokban.
   Ez itt a biztosíték: ha a WordPress verziója az attribútumot nem írná ki,
   a képarány akkor is áll, és az álló vagy négyzetes kép is vágva jelenik meg
   ahelyett, hogy szétnyomná az elrendezést. */
.wp-block-post-featured-image {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
}

/* --- Tartalmi apróságok --- */

/* A visszaépített oldalak sok táblázatot hordoznak (árlisták). Kis kijelzőn
   ne lógjanak ki, hanem legyenek oldalirányban görgethetők. */
.wp-block-post-content table,
.entry-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
}

.wp-block-post-content th,
.wp-block-post-content td {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--keret);
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content thead th {
	background: var(--wp--preset--color--turkiz-halvany);
}

/* A tartalomból származó képek sose lógjanak ki. */
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* --- Akadálymentesség --- */

/* Látható fókuszjelölés mindenhol; a böngésző alapértelmezettje sötét
   háttéren gyakran elveszik. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--turkiz);
	outline-offset: 2px;
}

/* --- Kategórialista-modul ([uveges-lista] rövidkód) --- */

.gu-lista {
	margin: var(--wp--preset--spacing--40) 0;
}

.gu-lista-fejlec {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Teljes modul: kép + cím + bevezető + gomb */
.gu-lista-racs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.gu-lista-kartya {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.gu-lista-kep {
	display: block;
	line-height: 0;
}

.gu-lista-kep img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
}

.gu-lista-cim {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.gu-lista-cim a {
	text-decoration: none;
}

.gu-lista-cim a:hover,
.gu-lista-cim a:focus {
	text-decoration: underline;
}

.gu-lista-reszlet {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--szoveg-halvany);
}

/* A gomb a kártya aljára kerül, hogy a különböző hosszú
   bevezetők mellett is egy vonalban legyenek. */
.gu-lista-gomb {
	margin: auto 0 0;
	padding-top: 0.25rem;
}

.gu-lista-gomb a {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.55rem 1.1rem;
}

/* Csak cím modul – ugyanaz a linksor-forma, mint az oldalsáv listáin */
.gu-lista-cimek {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gu-lista-cimek li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--keret);
}

.gu-lista-cimek li:last-child {
	border-bottom: 0;
}

.gu-lista-cimek a {
	display: block;
	padding: 0.55rem 0;
	font-size: 0.9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.gu-lista-cimek a:hover,
.gu-lista-cimek a:focus {
	text-decoration: underline;
}

/* Az oldalsávban a teljes modul is egyhasábos, a keskeny hely miatt */
.gu-oldalsav .gu-lista-racs {
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}

/* Csak a szerkesztőnek szóló hibajelzés */
.gu-lista-hiba {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--wp--preset--color--narancs, #c4530a);
	background: var(--wp--preset--color--turkiz-halvany);
	font-size: var(--wp--preset--font-size--small);
}