/*
 * Reusable pieces. Each one replaces a specific Elementor widget:
 *   .br-nav          → nav-menu            .br-cards      → image + heading columns
 *   .br-mobile-panel → mobmenu plugin      .br-note       → nyil01 + text-editor pairs
 *   .br-acc          → accordion           .br-button     → button
 *   .br-pdf          → embedpress_pdf
 */

/* --------------------------------------------------------------- desktop nav */

.br-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.br-nav__item {
	position: relative;
}

/*
 * Hover pointer: a 3px accent overline that slides in from the left.
 * This is Elementor's "overline + slide" nav pointer, reproduced from its own
 * rules — a 10px stub parked at left:-20px that grows to the full width, with
 * Elementor's easing curve and 0.3s duration.
 */
.br-nav__link {
	position: relative;
	overflow: hidden;
}

.br-nav__link::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: -20px;
	width: 10px;
	height: 3px;
	z-index: 2;
	background-color: var(--br-accent);
	/*
	 * Kifejezetten `left` és `width`, nem `all`. Az `all` minden tulajdonságra
	 * figyel, amit a böngésző animálhatónak tart — itt csak ez a kettő változik,
	 * és a szűkítés egyben megelőzi, hogy egy jövőbeli szabály véletlenül
	 * animálódjon ezen az elemen.
	 */
	/*
	 * Kifejezetten `left` és `width`, nem `all`. Az `all` minden tulajdonságra
	 * figyel, amit a böngésző animálhatónak tart — itt csak ez a kettő változik.
	 *
	 * Ez az EGYETLEN hely, ahol az Elementor időzítése és görbéje marad: ide
	 * írták, és a rövid úton mozgó vékony vonalon a „pattanás” szándék. Az
	 * oldal többi mozgása a base.css mozgás-rendszerét használja.
	 */
	transition:
		left var(--br-mutato-ido) var(--br-mutato-gorbe),
		width var(--br-mutato-ido) var(--br-mutato-gorbe);
}

.br-nav__item:hover > .br-nav__link::before,
.br-nav__link:focus-visible::before,
.br-nav__item.current-menu-item > .br-nav__link::before,
.br-nav__item.current-menu-ancestor > .br-nav__link::before,
.br-nav__item.current-page-ancestor > .br-nav__link::before {
	left: 0;
	width: 100%;
}

/* the dropdown items carry no pointer */
.br-nav__sub .br-nav__link::before {
	content: none;
}

.br-nav__link span {
	text-align: start;
}

.br-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 13px 20px;
	font-family: var(--br-font-display);
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	/*
	 * Változón keresztül, nem közvetlenül.
	 *
	 * A mobil panel ugyanezt a `.br-nav__link` osztályt használja, csak magenta
	 * háttéren. Amíg a színek itt be voltak égetve, a panelnek minden egyes
	 * állapotot külön felül kellett írnia — és amelyiket kifelejtettük, ott a
	 * menüpont a magenta hátterén magenta betűvel jelent meg. Mérve: a
	 * „Nyereményjáték” a /nyeremenyek/, /nyertesek/ és /szabalyzatok/ oldalakon
	 * 1,02 : 1 kontraszttal, vagyis láthatatlanul.
	 *
	 * Így a mobil panel EGY helyen mondja meg a saját két színét, és minden
	 * jövőbeli állapot-osztály (current-menu-parent, current-page-parent, …)
	 * automatikusan a helyes értéket kapja.
	 */
	color: var(--br-nav-szin, var(--br-text));
	white-space: nowrap;
}

.br-nav__link {
	/* a visszaút; az odaút a hover-szabályban, rövidebben */
	transition: color var(--br-ki-mikro) var(--br-gorbe-be);
}

.br-nav__item:hover > .br-nav__link,
.br-nav__link:focus-visible,
.br-nav__item.current-menu-item > .br-nav__link,
.br-nav__item.current-menu-ancestor > .br-nav__link,
.br-nav__item.current-page-ancestor > .br-nav__link {
	color: var(--br-nav-szin-aktiv, var(--br-accent));
	transition: color var(--br-be-mikro) var(--br-gorbe-be);
}

.br-nav__caret {
	width: 0.7em;
	height: 0.7em;
	flex: none;
}

/* submenu */
.br-nav__sub {
	position: absolute;
	inset-inline-start: 20px;
	top: 100%;
	z-index: 10;
	min-width: 156px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--br-white);

	/*
	 * ── NINCS ELMOSOTT ÁRNYÉK ─────────────────────────────────────────────
	 *
	 * Ami itt volt (`0 2px 8px rgb(0 0 0 / 20%)`), az az ÉN hozzátételem volt,
	 * nem az eredetiből jött. Az Elementor Pro legördülője összesen ennyi
	 * (elementor-pro/assets/css/widget-nav-menu.min.css):
	 *
	 *     .elementor-nav-menu--dropdown { background-color:#fff; font-size:13px }
	 *
	 * Se árnyék, se keret. Az eltávolítás tehát KÖZELEBB visz az eredetihez.
	 *
	 * És önmagában is hibás volt: ezen az oldalon minden él kemény — a címsáv
	 * magenta kerete, a kártyák közötti hajszálvonal, a lábléc sávjai, a
	 * süti-sáv magenta felső vonala. Egy szórt szürke pamacs a fehér fejlécen
	 * nem határol meg semmit, csak elmossa; a kártyát pedig épp a fehér
	 * fejléc-háttértől kell elválasztani, amihez a blur a legrosszabb eszköz.
	 *
	 * Helyette hajszálvonal, nulla lekerekítéssel: ugyanaz az 1 képpontos
	 * `--br-secondary`, amivel az `hr` és a kártyák közötti vonal is dolgozik.
	 * A kártyának ÉLE van, nem glóriája.
	 */
	border: 1px solid var(--br-secondary);

	/*
	 * A kártya nyitása és ZÁRÓDÁSA is animált.
	 *
	 * A `visibility` léptékes tulajdonság: nem tud fokozatosan változni. Ha
	 * simán felsoroljuk, a záródás pillanatában a kártya eltűnik, és az
	 * áttűnésnek nincs mit átúsztatnia. A `visibility 0s linear <idő>` ezt
	 * oldja: a láthatóság váltása a teljes időtartam VÉGÉRE tolódik, tehát a
	 * kártya kirajzolva marad, amíg elhalványul. Nyitáskor a hover-szabály
	 * `0s`-t ad, így ott azonnal látszik.
	 *
	 * IDŐZÍTÉS: felszín-idő, aszimmetrikusan — 200 ms be, 140 ms ki. A 6
	 * képpontos elmozdulás nem „utazás”, hanem billentés, ezért a `transform`
	 * is az ÁTTŰNÉS görbéjét kapja, mindkét irányban: a kettőnek egyetlen
	 * mozdulatnak kell látszania, és egy gyorsuló kilépés itt csak azt érné el,
	 * hogy a kártya sokáig jól látszik, majd kipattan.
	 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity var(--br-ki-felszin) var(--br-gorbe-be),
		transform var(--br-ki-felszin) var(--br-gorbe-be),
		visibility 0s linear var(--br-ki-felszin);
}

.br-nav__item:hover > .br-nav__sub,
.br-nav__item:focus-within > .br-nav__sub,
.br-nav__item.is-open > .br-nav__sub {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity var(--br-be-felszin) var(--br-gorbe-be),
		transform var(--br-be-felszin) var(--br-gorbe-be),
		visibility 0s;
}

/*
 * A legördülő elemein a szín már animált (a .br-nav__link örökli), a HÁTTÉR
 * viszont nem volt — hoveren a magenta kitöltés beugrott és kiugrott.
 */
.br-nav__sub .br-nav__link {
	transition: color var(--br-ki-mikro) var(--br-gorbe-be),
		background-color var(--br-ki-mikro) var(--br-gorbe-be);
	padding: 10px 20px;
	font-family: var(--br-font-body);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	white-space: normal;
}

.br-nav__sub .br-nav__link:hover,
.br-nav__sub .br-nav__link:focus-visible,
.br-nav__sub .current-menu-item > .br-nav__link {
	background: var(--br-primary);
	color: var(--br-white);
	transition: color var(--br-be-mikro) var(--br-gorbe-be),
		background-color var(--br-be-mikro) var(--br-gorbe-be);
}

/* a legördülő magenta kiemelése a magenta panelen nem látszana — ott nincs */
.br-mobile-nav .br-nav__sub .br-nav__link:hover,
.br-mobile-nav .br-nav__sub .br-nav__link:focus-visible,
.br-mobile-nav .br-nav__sub .current-menu-item > .br-nav__link {
	background: none;
}

.br-nav__toggle--adjacent {
	display: none;
}

/* ---------------------------------------------------------- mobile nav panel */

/*
 * A sötétítő fátyol.
 *
 * SZÁNDÉKOSAN a panel időzítését és GÖRBÉJÉT kapja, nem a sajátját.
 *
 * Az áttűnésre önmagában a lassuló görbe járna (elöl esik nagyot, gyorsan
 * kikerül az útból) — de itt az áttetszőség nem önálló mozgás, hanem a fiók
 * kísérője. Ha a fátyol a saját, elöl nagyot eső profilját követné, a
 * záródáskor kitisztulna, MIELŐTT a fiók kiért volna a képből: pontosan az a
 * kettéhasadás, amit az előző körben javítottunk, csak most nem a `display`,
 * hanem a görbe okozná.
 *
 * A csatolás tehát erősebb szempont, mint a tulajdonságonkénti tisztaság.
 */
.br-mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgb(0 0 0 / 50%);
	opacity: 0;
	transition: opacity var(--br-ki-panel) var(--br-gorbe-ki);
}

.br-mobile-overlay.is-open {
	opacity: 1;
	transition: opacity var(--br-be-panel) var(--br-gorbe-be);
}

.br-mobile-overlay[hidden],
.br-mobile-panel[hidden] {
	display: none;
}

.br-mobile-panel {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 9999;
	/*
	 * Szélesebb, mint a korábbi 70% volt: egy 390px-es telefonon az 273 képpontot
	 * adott, amiben a hosszabb menüpontok és a lábrész sorai törtek. A 88% mellett
	 * marad egy csík az oldalból, tehát látszik, hogy ez egy réteg — nem külön
	 * lap —, és a kívülre koppintás is kényelmesen célozható.
	 */
	width: min(88%, 380px);
	background: var(--br-primary);
	color: var(--br-white);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	padding: 0 0 32px;
	transform: translateX(100%);
	/*
	 * A fiók 342 képpontot utazik egy 390 képpontos telefonon — ez az oldal
	 * leghosszabb mozgása, tehát a panel-idő járna neki, és ez az az egy hely,
	 * ahol a görbe-aszimmetria valóban ELMOZDULÁST ír le:
	 *
	 *   • befelé lassuló (`--br-gorbe-be`): azonnal indul, a végén leül —
	 *     a fiók „megérkezik”, nem beesik;
	 *   • kifelé gyorsuló (`--br-gorbe-ki`): lágyan elszakad, aztán elmegy.
	 *     Egy lassuló kilépés itt azt jelentené, hogy a fiók a legnagyobb
	 *     részét az első ötödben teszi meg, majd az utolsó képpontokon
	 *     vánszorog — ez az, ami elakadásnak látszik.
	 */
	transition: transform var(--br-ki-panel) var(--br-gorbe-ki);
}

.br-mobile-panel.is-open {
	transform: translateX(0);
	transition: transform var(--br-be-panel) var(--br-gorbe-be);
}

/*
 * A panel fejrésze: csak a záró gomb, jobbra igazítva, a magenta felületen.
 * Nincs benne logó és nincs fehér sáv — egy fehér csík kizárólag egy × jellel
 * önmagában nem mond semmit, a panel pedig így egyetlen összefüggő felület.
 */
.br-mobile-panel__head {
	display: flex;
	justify-content: flex-end;
	padding: 10px 12px 4px;
}

.br-mobile-panel__close {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	font-size: 22px;
	line-height: 1;
	color: var(--br-white);
}

.br-mobile-nav__list,
.br-mobile-nav .br-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.br-mobile-nav .br-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/*
 * A menüpontokon SEMMILYEN hover-jelölés nincs: se aláhúzás, se becsúszó sáv,
 * se elmozduló szöveg. Érintőképernyőn a hover amúgy sem állapot, hanem egy
 * villanás a koppintás pillanatában — a mozgás ott zajt csinál, nem
 * információt ad. A sorokat a köztük futó vékony vonal tagolja, ennyi elég.
 */
.br-mobile-nav .br-nav__item {
	position: relative;
	border-block-end: 1px solid rgb(255 255 255 / 16%);
}

.br-mobile-nav .br-nav__item:last-child {
	border-block-end: 0;
}

.br-mobile-nav .br-nav__link {
	position: relative;
	flex: 1 1 auto;
	padding: 14px 20px;
	font-family: var(--br-font-display);
	font-size: 17px;
	line-height: 24px;
	color: var(--br-white);
	/* a desktop .br-nav__link 0.3s-os szín-átmenetét is kikapcsoljuk: fehérről
	   fehérre nem látszana, de ne maradjon ott felesleges animáció */
	transition: none;
}

/* a desktop menü becsúszó mutatóját itt kifejezetten ki kell kapcsolni,
   különben a .br-nav__link öröklött ::before-ja fehér pontként megjelenne */
.br-mobile-nav .br-nav__link::before {
	content: none;
}

/*
 * A panel egyetlen helyen mondja meg mindkét színt. Nincs több állapotonkénti
 * felülírás, és nincs fajsúly-verseny a desktop szabályokkal — azok is ezt a
 * két változót olvassák.
 */
.br-mobile-nav {
	--br-nav-szin: var(--br-white);
	--br-nav-szin-aktiv: var(--br-white);
}

.br-mobile-nav .br-nav__caret {
	display: none;
}

/* the parent row gets its own toggle so submenus work without hover */
.br-mobile-nav .br-nav__toggle--adjacent {
	display: block;
	flex: none;
	width: 44px;
	height: 44px;
	position: relative;
}

.br-mobile-nav .br-nav__toggle--adjacent::before {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	content: '+';
	font-size: 22px;
	line-height: 1;
	color: var(--br-white);
}

.br-mobile-nav .br-nav__item.is-open > .br-nav__toggle--adjacent::before {
	content: '−';
}

.br-mobile-nav .br-nav__sub {
	flex: 1 0 100%;
	position: static;
	display: none;
	visibility: visible;
	opacity: 1;
	min-width: 0;
	background: none;
	box-shadow: none;
	/*
	 * A KERET NULLÁZÁSA. Ez a szabály eddig a hátteret és az árnyékot vette le
	 * a desktop legördülő-kártyáról, a KERETET viszont nem — mert akkor még
	 * nem volt kerete. Amikor a kártya árnyéka helyett hajszálvonalat kapott
	 * (`border: 1px solid var(--br-secondary)`), az átszivárgott ide is, és a
	 * magenta panelen világos négyszögként rajzolódott ki az almenü köré.
	 *
	 * Tanulság a szabályhoz: ami a desktop kártyát HATÁROLJA, azt itt mind le
	 * kell venni — a panelen nem kártya van, hanem behúzott lista.
	 */
	border: 0;
}

.br-mobile-nav .br-nav__item.is-open > .br-nav__sub {
	display: block;
}

.br-mobile-nav .br-nav__sub .br-nav__link {
	padding-inline-start: 40px;
	font-family: var(--br-font-display);
	font-size: 15px;
	font-weight: 400;
	background: none;
	color: var(--br-white);
}

.br-mobile-nav .br-nav__sub .br-nav__link:hover,
.br-mobile-nav .br-nav__sub .br-nav__link:focus-visible {
	background: none;
}

/*
 * A panel lábrésze: ugyanaz a négy hivatkozás, ami a lábléc magenta sávjában
 * is szerepel, ugyanazokkal az ikonokkal. Halványabb és kisebb, mint a menü —
 * másodlagos tartalom, nem versenyez a navigációval. Fölötte egy elválasztó
 * sáv, ami a menüpontok közötti vonalnál erősebb: a kettő nem egyenrangú.
 */
.br-mobile-panel__foot {
	/*
	 * `auto` és nem fix érték: a lábrész a panel ALJÁRA kerül, ha a menü rövid
	 * (most négy pont), és közvetlenül a menü alá csúszik, ha a menü hosszú.
	 * Fix felső margóval a rövid menü alatt egy nagy üres magenta mező maradna,
	 * ami befejezetlennek látszik.
	 */
	margin-block-start: auto;
	padding: 22px 20px 0;
	border-block-start: 3px solid rgb(255 255 255 / 28%);
}

.br-mobile-panel__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.br-mobile-panel__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	font-size: 13px;
	line-height: 18px;
	color: rgb(255 255 255 / 82%);
	transition: color var(--br-ki-mikro) var(--br-gorbe-be);
}

.br-mobile-panel__links a:hover,
.br-mobile-panel__links a:focus-visible {
	color: var(--br-white);
	transition: color var(--br-be-mikro) var(--br-gorbe-be);
}

/* az ikonok egy oszlopban álljanak, hogy a szövegek is egy vonalra essenek */
.br-mobile-panel__links .br-svg {
	flex: none;
	width: 15px;
	height: 15px;
	fill: currentColor;
}

body.br-menu-open {
	overflow: hidden;
}

/* -------------------------------------------------------------- inline icons */

.br-svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
	flex: none;
	vertical-align: -0.125em;
}

/* ------------------------------------------------------------------- buttons */

.br-button,
.wp-block-button__link {
	display: inline-block;
	padding: 12px 24px;
	background: #145c88;
	color: var(--br-white);
	font-family: var(--br-font-body);
	font-size: 15px;
	line-height: 15px;
	font-weight: 500;
	text-align: center;
	border-radius: 3px;
	/*
	 * `all` volt itt, ami két hiba egyben:
	 *
	 *   1. Az `all` mindenre figyel, amit a böngésző animálhatónak tart — a
	 *      `:focus-visible` fókuszgyűrűjére is, tehát a billentyűzetes jelzés
	 *      0,3 s alatt HALVÁNYULT BE, ahelyett hogy azonnal ott lenne.
	 *   2. A `:hover` szabály ezen a gombon egyetlen olyan tulajdonságot sem
	 *      változtatott, ami eltér az alapállapottól (`color` ott is fehér),
	 *      tehát az átmenetnek semmit nem volt mit animálnia: a lap
	 *      legfontosabb gombja NEM VÁLASZOLT a mutatóra.
	 *
	 * Az eredeti sem adott neki hover-hátteret — de ez a hiányosság volt, nem
	 * szándék: egy „KATTINTSON IDE” feliratú felület, ami a mutató alatt
	 * mozdulatlan, nem viselkedik kattinthatóként. A sötétítés a saját kékjének
	 * (#145c88) sötétebb foka, ugyanaz a viszony, mint a süti-sáv elsődleges
	 * gombján.
	 */
	transition: background-color var(--br-ki-mikro) var(--br-gorbe-be);
}

.br-button:hover,
.br-button:focus-visible,
.br-button:visited,
.wp-block-button__link:hover {
	color: var(--br-white);
}

.br-button:hover,
.br-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: #104a6e;
	transition: background-color var(--br-be-mikro) var(--br-gorbe-be);
}

/* a 404 lap magenta gombja a saját palettájából sötétít */
.br-button--accent:hover,
.br-button--accent:focus-visible {
	background-color: #6d1044;
}

/* the 404 page used the accent colour, a wider pad and a 4px radius */
.br-button--accent {
	background: var(--br-accent);
	padding: 15px 30px;
	border-radius: 4px;
	font-size: 16px;
	line-height: 16px;
	text-transform: uppercase;
}



/* the 404 button carried a left-arrow, 12px from its label */
.br-button--icon {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* --------------------------------------------------------------- icon cards */

/*
 * The four "how you can take part" columns and the prize grids: a circular
 * magenta icon over a caption, with a hairline rule between columns.
 */
.br-cards {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A kártyarács egy <ul>, és a törzsszöveg listáira szánt 40 képpontos behúzás
 * (`.br-content ul`, fajsúly 0,1,1) elviszi a fenti `padding: 0`-t (0,1,0).
 * Ettől az egész rács jobbra csúszik: mérve a nyeremény-kártyák középpontja
 * 1440px-en 740 volt a 720 helyett, 390px-en 215 a 195 helyett — az élesen
 * mindkettő pontosan a viewport közepén áll (719,5 és 195).
 *
 * A behúzás a bekezdésbe írt listáknak való, egy rácsnak nem. Kétosztályos
 * szelektorral (0,2,0) vesszük vissza.
 */
.br-content .br-cards {
	padding-inline: 0;
}

/*
 * minmax(0, 1fr) és nem 1fr.
 *
 * A csupasz `1fr` valójában `minmax(auto, 1fr)`, és az `auto` nem enged a
 * sáv min-content mérete alá. Egy hosszabb szó a feliratban ezért nem tördel,
 * hanem SZÉTFESZÍTI a rácsot: 540–667px között a négyoszlopos sáv 690px-re
 * nőtt, és az egész lapot vízszintesen húzhatóvá tette. Mérve, nem elméleti.
 * A 0-s alsó határ engedi a sávot zsugorodni, a szöveg pedig tördel.
 */
.br-cards--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.br-cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.br-cards--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.br-cards--ruled > *:not(:last-child) {
	border-inline-end: 3px solid var(--br-primary);
}

.br-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-inline: 10px;
}

.br-card__icon {
	display: block;
	width: 55%;
	max-width: 156px;
	height: auto;
	margin-inline: auto;
}

.br-card__label {
	margin: 0 22px;
	font-family: var(--br-font-body);
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
}

.br-card__note {
	margin: 0;
	font-family: var(--br-font-display);
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	text-transform: none;
	text-align: center;
	color: var(--br-text);
}

/* Four across is kept all the way down to 480px, as on the original. */
@media (max-width: 480px) {
	.br-cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.br-cards--4.br-cards--ruled > *:not(:last-child) {
		border-inline-end: 0;
	}

	.br-cards--4.br-cards--ruled > :nth-child(odd) {
		border-inline-end: 3px solid var(--br-primary);
	}

	.br-cards--4 > * {
		padding-block: 20px;
	}

	.br-cards--3,
	.br-cards--2 {
		grid-template-columns: 1fr;
	}

	.br-cards--3.br-cards--ruled > *,
	.br-cards--2.br-cards--ruled > * {
		border-inline-end: 0;
	}
}

/* --------------------------------------------------- arrow note (nyil + text) */

.br-notes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.br-notes--single {
	grid-template-columns: 1fr;
}

.br-note {
	display: grid;
	grid-template-columns: 31px 1fr;
	gap: 0 33px;
	align-items: start;
}

.br-note__arrow {
	display: block;
	width: 31px;
	height: auto;
	margin-top: 2px;
}

.br-note__body {
	font-family: var(--br-font-body);
	font-size: 16px;
	line-height: 24px;
}

.br-note__body p {
	margin: 0;
}

.br-note__body strong,
.br-note__body b {
	font-weight: 700;
}

@media (max-width: 1024px) {
	.br-note {
		grid-template-columns: 21px 1fr;
		gap: 0 10px;
	}

	.br-note__arrow {
		width: 21px;
	}
}

@media (max-width: 480px) {
	.br-notes {
		grid-template-columns: 1fr;
		gap: 51px 0;
	}

	.br-note {
		grid-template-columns: 36px 1fr;
		gap: 0 12px;
	}

	.br-note__arrow {
		width: 36px;
	}
}

/* -------------------------------------------------------------- accordion */

/*
 * Native <details>, so it works with JavaScript disabled and is keyboard
 * accessible for free. The chevron pair is the client's own uploaded SVG.
 */
.br-acc {
	border: 0;
}

.br-acc + .br-acc {
	margin-top: 0;
}

.br-acc__summary {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 20px 10px 62px;
	list-style: none;
	cursor: pointer;
	font-family: var(--br-font-display);
	font-size: 17px;
	line-height: 17px;
	font-weight: 400;
	color: var(--br-text);
}

.br-acc__summary::-webkit-details-marker {
	display: none;
}

.br-acc__summary::before {
	flex: none;
	width: 14px;
	height: 14px;
	background: var(--br-acc-closed) center/contain no-repeat;
	content: '';
	/*
	 * The original swapped between two chevron files, which flipped instantly.
	 * They are the same shape 90° apart, so one file is rotated instead — on the
	 * panel's own timing, so the arrow turns while the panel moves.
	 */
	transition: transform var(--br-acc-duration) var(--br-acc-easing);
}

/*
 * The panel is animated from JS (see nav.js) to match the 400ms slide the old
 * accordion used: height and vertical padding together, so it unrolls instead of
 * snapping. `overflow: hidden` is what lets it clip while the height changes.
 */
.br-acc[data-animating] > .br-acc__body {
	overflow: hidden;
	will-change: height;
}

.br-acc[open] > .br-acc__summary::before {
	transform: rotate(-90deg);
}

/*
 * While closing, the element keeps [open] until the animation ends (the panel is
 * still on screen), so the arrow is turned back from here instead.
 */
.br-acc[data-closing] > .br-acc__summary::before {
	transform: none;
}

.br-acc__body {
	padding: 4px 20px 14px 85px;
	font-family: var(--br-font-body);
	font-size: 15px;
	line-height: 22.5px;
}

.br-acc__body > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ PDF box */

.br-pdf {
	margin: 0 0 20px;
}

.br-pdf__frame {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 500px;
	border: 1px solid var(--br-secondary);
	background: var(--br-secondary);
}

.br-pdf__fallback {
	margin-top: 10px;
	font-family: var(--br-font-body);
	font-size: 14px;
}

@media (max-width: 767px) {
	.br-pdf__frame {
		height: 60vh;
		min-height: 320px;
	}
}

/* ------------------------------------------------------- Gravity Forms trim */

/*
 * Gravity Forms keeps its own stylesheet; these only restore the type and the
 * 600px column the form sat in on the old site.
 */
/*
 * The form sat in a 600px column, and the form itself was 504px wide inside it —
 * left-aligned, not centred. Field widths (and therefore the three date
 * dropdowns) all follow from that.
 */
.br-form {
	max-width: 600px;
	margin-inline: auto;
	padding-inline: 10px;
}

.br-form .gform_wrapper {
	max-width: 504px;
}

/* labels sat tighter to their inputs than the theme default */
.br-form .gform_wrapper .gform-field-label {
	margin-bottom: 4px;
}

/* rows sat 19px apart, not the theme default 40px */
.br-form .gform_wrapper .gform_fields {
	row-gap: 15px;
}

/* the year/month/day selects share one row instead of stacking */
.br-form .gfield--type-date .ginput_complex > [class*='gfield_date_dropdown'] {
	flex: 1 1 0;
	min-width: 0;
}

.br-form .gfield--type-date select {
	width: 100%;
}

.br-form .gform_wrapper,
.br-form .gform_wrapper label,
.br-form .gform_wrapper legend,
.br-form .gform_wrapper input,
.br-form .gform_wrapper select,
.br-form .gform_wrapper textarea,
.br-form .gform_wrapper button {
	font-family: var(--br-font-system);
}

.br-form .gform_wrapper .gform_title {
	font-family: var(--br-font-display);
}

/*
 * No button styling here on purpose: the original let Gravity Forms' own theme
 * framework render it (an outlined button in the theme link colour), and the
 * shortcode carries theme="orbital" so that CSS is loaded.
 */

/*
 * A magenta panelen a fókuszgyűrű FEHÉR.
 *
 * A base.css az akcentus-színt (#881455) használja, ami a panel hátterén
 * (#8c0052) gyakorlatilag láthatatlan — mérve a két szín között alig van
 * eltérés. Aki billentyűzettel használja a menüt, nem látta volna, hol jár.
 *
 * Ez NEM mond ellent annak, hogy megnyitáskor ne legyen doboz az × körül: ott
 * a fókusz programozottan érkezik a PANELRE (lásd nav.js), ami nem vált ki
 * `:focus-visible`-t. Ez a szabály csak akkor lép működésbe, ha valaki
 * ténylegesen Tab-bal navigál — és akkor a jelzés indokolt.
 */
.br-mobile-panel :focus-visible {
	outline-color: var(--br-white);
}

/*
 * MAGA A PANEL viszont nem kap gyűrűt.
 *
 * A megnyitáskor ide érkezik a fókusz (párbeszédablak-minta), és a Chrome a
 * programozott fókuszt a `tabindex="-1"` konténeren is `:focus-visible`-nek
 * veszi — mérve. Egy teljes panel köré rajzolt kontúr viszont nem mond semmit:
 * a felhasználó nem tud „a panelre” kattintani, csak a benne lévő elemekre.
 * A jelzés ott van a helyén, és ott meg is marad (lásd a fenti szabályt).
 *
 * A `:focus` is szerepel, mert a Safari a kettőt eltérően kezeli.
 */
.br-mobile-panel:focus,
.br-mobile-panel:focus-visible {
	outline: none;
}