/* Papp és Társa — oldal funkciók
   A színek az oldal Bricks palettájából jönnek, hogy a blokkok ne
   ütközzenek a témával:
     #004437 Color #3 (mély zöld)   #d8e6da Color #2 (világos zöld)
     #fefef8 Color #1 (krém)        #373737 Color #7 (szöveg)
*/

/* ---------------------------------------------- kontakt: matek-kérdés */
/* A widget inline elemekbol all, ezert a megjelenest itt allitjuk blokkra —
   így bármelyik Bricks szövegelembe (akár címsorba) beágyazható.

   FONTOS a specificitás: a Bricks frontend.min.css-ben ez áll —
       .input, input:not([type=submit]), select, textarea
       { color: currentcolor; width: 100%; line-height: 40px; padding: 0 12px }
   Ennek specificitása 0-1-1 (elem + a :not()-ban lévő attribútum), tehát
   egy sima .papp-k__input (0-1-0) ALULMARAD vele szemben. Emiatt a mező
   a környezet szövegszínét örökölné: a sötétzöld láblécben fehér betű
   fehér mezőben = láthatatlan. Ezért a mezőre és a gombra .papp-k előtaggal
   hivatkozunk (0-2-0), ami felülírja a Bricks szabályát — !important nélkül. */
.papp-k { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.papp-k__cimke { display: block; font-size: .85em; opacity: .7; }

/* Betűméret: a KÖRNYEZETHEZ igazodik, de korlátok közt.
   Miért nem rem? Mert a Bricks a html-re 62,5%-ot állít (html{font-size:62.5%}),
   tehát ezen az oldalon 1rem = 10px — a rem-alapú méret feltűnően kicsi lenne.
   Miért nem sima em? Mert a blokk címsorba is kerül (a Kapcsolat oldalon h4-be),
   ott az öröklött 28px-es űrlap túl nagy lenne.
   A clamp mindkettőt megoldja: a láblécben pont a környező szöveg mérete (16px),
   címsorban 18px-re korlátozva. */
.papp-k .papp-k__urlap {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: clamp(14px, 1em, 18px);
	line-height: 1.5;
}
.papp-k .papp-k__kerdes {
	/* <label> — a Bricks a label-nek saját színt és alsó margót ad
	   (label{color:var(--bricks-text-light);margin-bottom:5px}), ezért
	   itt visszavesszük az öröklést, hogy a sötét láblécben is olvasható legyen. */
	display: inline-block;
	margin: 0;
	color: inherit;
	font-size: 1em;
	white-space: nowrap;
}

.papp-k .papp-k__input {
	flex: 0 0 auto;
	width: 3.4em;
	min-width: 3.4em;
	padding: 7px 8px;
	line-height: 1.3;
	text-align: center;
	border: 1px solid rgba(0, 68, 55, .45);
	border-radius: 3px;
	/* A mezőnek SAJÁT fehér háttere van, ezért nem örökölheti a környezet
	   szövegszínét — itt kötelező a kifejezett szín. */
	background: #fff;
	color: #1b2119;
	-webkit-text-fill-color: #1b2119;   /* iOS Safari a color-t felülírhatja */
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
}
.papp-k .papp-k__input::placeholder { color: #8a9187; }
.papp-k .papp-k__input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* A gomb a KÖRNYEZET színéhez igazodik: a láblécben fehér kontúr sötétzöldön,
   világos háttéren sötét kontúr. Fix sötétzöld gomb a sötétzöld láblécben
   eltűnne. */
.papp-k .papp-k__gomb {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: .95em;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .15s ease;
}
.papp-k .papp-k__gomb:hover { background: rgba(127, 127, 127, .18); }
.papp-k .papp-k__gomb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.papp-k__info { display: block; font-size: clamp(12px, .8em, 14px); line-height: 1.45; opacity: .62; }
/* Az eredmény ÖRÖKLI a környezet betűméretét és színét: a Kapcsolat oldalon
   így a feloldott szám a kártya címsor-méretében jelenik meg, ahogy tervezve volt. */
.papp-k__eredmeny { display: block; }
.papp-k__eredmeny:empty { display: none; }
.papp-k .papp-k__eredmeny a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.papp-k__eredmeny--hiba { font-size: clamp(12px, .85em, 15px); opacity: .85; }
.papp-k.papp-k--nyitva .papp-k__urlap,
.papp-k.papp-k--nyitva .papp-k__info { display: none; }

/* ---------------------------------------------- vélemények: „Rólunk írták” */
.papp-vel { display: flex; flex-direction: column; gap: 28px; width: 100%; }
.papp-vel__fej {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
}
.papp-vel__felcim { margin: 0 0 6px; font-size: .9em; opacity: .65; }
.papp-vel__cim { margin: 0; }
.papp-vel__nyilak { display: flex; gap: 8px; }
.papp-vel__nyil {
	width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(0, 68, 55, .35); background: transparent;
	color: #004437; font-size: 18px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color .15s ease, opacity .15s ease;
}
.papp-vel__nyil:hover:not(:disabled) { background: #d8e6da; }
.papp-vel__nyil:disabled { opacity: .3; cursor: default; }
.papp-vel__nyil:focus-visible { outline: 2px solid #004437; outline-offset: 2px; }

.papp-vel__sav {
	display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth;
	scroll-snap-type: x mandatory; scrollbar-width: none;
	padding-bottom: 4px; margin: 0;
}
.papp-vel__sav::-webkit-scrollbar { display: none; }
.papp-vel__sav:focus-visible { outline: 2px solid #004437; outline-offset: 4px; }

.papp-vel__elem {
	flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start;
	display: flex; flex-direction: column; justify-content: space-between;
	gap: 20px; margin: 0; padding: 24px;
	background: #d8e6da; border-radius: 3px;
}
/* <blockquote> — a Bricks alapból Georgiát, 1.3em-et, bal szegélyt és 30px
   behúzást ad neki (blockquote{...}); itt mindet visszavesszük, hogy a
   vélemény a site saját tipográfiájával jelenjen meg. */
.papp-vel .papp-vel__szoveg {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	quotes: "„" "”";
}
.papp-vel__szoveg::before { content: open-quote; }
.papp-vel__szoveg::after { content: close-quote; }
/* <figcaption> — a Bricks középre igazítja, halványítja és 1em margót ad
   (figcaption{color:var(--bricks-text-light);font-size:.9em;margin:1em 0;
   text-align:center}); a névnek balra igazítva, teljes kontraszttal a helye. */
.papp-vel .papp-vel__nev {
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}
.papp-vel .papp-vel__beosztas { display: block; font-weight: 400; opacity: .65; font-size: .85em; }

@media (max-width: 991px) {
	.papp-vel__elem { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
	.papp-vel { gap: 20px; }
	.papp-vel__elem { flex-basis: 88%; padding: 20px; }
}

/* szerkesztőnek szóló üres állapot */
.papp-vel--ures {
	border: 1px dashed rgba(0, 68, 55, .4); border-radius: 3px;
	padding: 18px 20px; background: #fefef8; color: #373737;
}
.papp-vel--ures p { margin: 0 0 8px; }
.papp-vel--ures p:last-child { margin-bottom: 0; }
.papp-vel__hint { font-size: .8em; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
	.papp-vel__sav { scroll-behavior: auto; }
	.papp-vel__nyil { transition: none; }
}