/*
 * Revia Homes - header, mobile drawer, footer.
 *
 * @package Revia_Homes
 */

/* --------------------------------------------------------------------------
 * Header
 *
 * Fixed, and two-state. On the front page it starts transparent over the photo
 * hero and turns to paper once the hero's bottom passes under it; everywhere
 * else it is in the light state from the start.
 *
 * The whole switch is ONE colour change. The nav links inherit their colour and
 * the hamburger draws itself with currentColor, so flipping .rh-is-solid repaints
 * the bar without a second rule per element - which is what makes the 400ms
 * transition look like one movement instead of six.
 * ----------------------------------------------------------------------- */

.rh-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 80;
	display: flex;

	/*
	 * The height stays HERE, on the element that carries the border.
	 * box-sizing is border-box, so min-height on this box includes the 1px
	 * bottom border and the bar measures --rh-header-h exactly. Moving the
	 * min-height onto the inner div instead made the bar 1px taller than the
	 * token, and two things read that token as gospel: .rh-drawer pins its top
	 * to it, and .rh-header-spacer reserves it on sub-pages. Measured, that
	 * slid the drawer 1px under the bar and left the spacer 1px short.
	 */
	min-height: var(--rh-header-h);
	padding-inline: var(--rh-gutter-header);
	color: var(--rh-paper);
	background: transparent;
	border-bottom: 1px solid transparent;
	backdrop-filter: none;
}

/*
 * The bar spans the window; its CONTENTS stop at --rh-max, like everything
 * else on the page.
 *
 * This wrapper was missing, and the theme disagreed with itself about it: the
 * footer has had .rh-footer__inner from the start, and .rh-wrap centres the
 * body. Only the header ran to the window edge. Measured before it existed,
 * the wordmark sat 56px from the left at every width while the footer's moved
 * with the page - 256.5px apart at 1920, 576.5px at 2560, and growing without
 * limit. The prototype has the container too (Revia Homes.dc.html:43,
 * max-width: 1440px; margin: 0 auto).
 *
 * The background, the border and the blur stay on .rh-header, because those
 * are the BAR; only the layout moves in here.
 */
.rh-header__inner {
	/* Stretches to the bar's own height; the bar owns the height. */
	width: 100%;
	max-width: var(--rh-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--rh-header-gap);
}

/*
 * The transition is ARMED by the script, one style flush after it has set the
 * first state (assets/js/site.js). Otherwise a page that opens already scrolled
 * - a reload with the browser restoring the scroll position, or a link into a
 * section - would show the header fading from white-over-nothing to dark, for
 * 400ms, as its first impression.
 */
.rh-header.rh-is-armed {
	transition:
		color var(--rh-t-header) var(--rh-ease),
		background-color var(--rh-t-header) var(--rh-ease),
		border-color var(--rh-t-header) var(--rh-ease);
}

.rh-header.rh-is-solid,
.rh-header--light {
	color: var(--rh-ink);
	background: var(--rh-header-bg);
	border-bottom-color: var(--rh-line);
	backdrop-filter: blur(14px);
}

.rh-header--light {
	background: var(--rh-header-bg-sub);
}

.rh-header__brand {
	display: block;
	flex: 0 0 auto;
	color: inherit;
	line-height: 0;
}

.rh-header__brand svg {
	width: var(--rh-wordmark-header);
	height: auto;
}

.rh-header__nav {
	margin-left: auto;
}

.rh-header__nav .rh-nav__list {
	display: flex;
	align-items: center;
	gap: var(--rh-nav-gap);
}

.rh-header__nav a {
	color: inherit;
	font-family: var(--rh-font-body);
	font-weight: var(--rh-w-regular);
	font-size: var(--rh-t-nav);

	/*
	 * normal, not the body's 1.8. The prototype declares no line-height on
	 * this run; ours inherited the body's, which made the box 7.6px taller
	 * than the design at 1440px. The BAR does not move - its height is
	 * min-height: --rh-header-h and the items are centred - but the
	 * current-item underline sat 3.8px further from the word than it should.
	 */
	line-height: normal;
	letter-spacing: var(--rh-ls-nav);
	text-transform: uppercase;
	white-space: nowrap;
	padding-bottom: var(--rh-nav-underline);
	border-bottom: 1px solid transparent;
}

/*
 * The handoff distinguishes the two pages here, and so does this.
 *
 * On the FRONT page the links are color: inherit in both states - white over
 * the photograph, and the header's own ink once it turns solid, so the whole
 * bar moves as one. On a SUB-page they are one step quieter than the wordmark
 * (--rh-body), which is what keeps the brand the loudest thing in a bar that
 * never changes.
 */
.rh-header--light .rh-header__nav a {
	color: var(--rh-body);
}

.rh-header__nav a:hover,
.rh-header__nav a:focus-visible {
	color: var(--rh-gold-text);
}

/* The page you are on. */
.rh-header__nav a[aria-current] {
	color: var(--rh-ink);
	border-bottom-color: var(--rh-gold-ink);
}

.rh-header:not(.rh-is-solid):not(.rh-header--light) .rh-header__nav a[aria-current] {
	color: var(--rh-paper);
	border-bottom-color: var(--rh-paper);
}

/*
 * The contact item is a bordered box, not an underlined word - the handoff's
 * menu table calls it "Kapcsolat (gomb)" and its prototype draws it with
 * border: 1px solid currentColor and padding: 12px 22px
 * (Revia Homes.dc.html:51). currentColor again, so it follows the header's one
 * colour change like everything else in the bar.
 */
.rh-header__nav .rh-nav__cta a {
	border: 1px solid currentColor;
	padding: var(--rh-btn-pad-box);
}

/*
 * The hamburger, at the prototype's own size (Revia Homes.dc.html:53-56):
 * 46x46, three 20x1.5px bars, 5px apart.
 *
 * It used to be 44x44 with 18x1px bars, on the reading that the handoff never
 * named them - it does, in the prototype - which drew the button smaller and
 * fainter than the design. There is no accessibility cost to following it
 * here, which is why this is a plain fidelity fix and not a deviation: 46px
 * clears the 44px minimum target size that the old value was chosen for, with
 * 2px to spare.
 *
 * THE BAR IS 2px, NOT THE PROTOTYPE'S 1.5, AND THAT IS THE WHOLE DEVIATION.
 * 1.5px cannot be drawn on a 1x display, so the browser rounds - and with the
 * prototype's numbers the three bars round DIFFERENTLY. The pitch is bar +
 * gap = 1.5 + 5 = 6.5px, so consecutive bars start half a pixel apart:
 * measured fractional offsets 0.25 / 0.75 / 0.25, and measured from the
 * screenshot's pixels, solid #232323 with no antialiasing, the bars came out
 *
 *     2 / 1 / 2 CSS px at 1x   and   2 / 1 / 2 at 2x (4 / 2 / 4 device px)
 *
 * - the middle one half the weight of its neighbours, at every viewport width
 * and both densities. The prototype does the same thing in the other phase
 * (1 / 2 / 1); it is the design's arithmetic, not a transcription error.
 *
 * Three bars can only round alike if the pitch is a whole number, and there
 * are three ways to get one. Measured, all from pixels:
 *
 *     gap 5.5, bar 1.5  -> pitch 7  -> 1 / 1 / 1
 *     gap 5,   bar 2    -> pitch 7  -> 2 / 2 / 2      <- this one
 *     gap 5,   bar 1    -> pitch 6  -> 1 / 1 / 1
 *
 * The gap stays the prototype's 5px because moving it is the change that
 * looks smaller and is not: at 1 / 1 / 1 the bars render at exactly the
 * thickness the 18x1px version rendered at, which would quietly undo the
 * "fainter than the design" half of this fix. 2px is where two of the three
 * bars already were.
 */
.rh-header__toggle {
	margin-left: auto;
	width: 46px;
	height: 46px;
	border: 1px solid currentColor;
	color: inherit;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}

/*
 * A CLASS, not `.rh-header__toggle span`.
 *
 * The descendant selector matched every span in the button - including the
 * fourth one, the .screen-reader-text that carries the accessible name. That
 * rule is (0,1,1) and the helper is (0,1,0), so the helper lost: measured, the
 * name's box was 20 x 2 px, display: block, position: absolute, sitting exactly
 * on the middle bar (y = 30.5). Nothing showed, but only because
 * clip-path: inset(50%) paints nothing - a fourth real bar, or the loss of the
 * clip-path, would have made it visible at once, and the accessible name's box
 * was 20 x 2 instead of the helper's intended 1 x 1.
 */
.rh-header__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

/* --------------------------------------------------------------------------
 * Mobile drawer
 *
 * A panel under the header, not an overlay: the header stays readable and the
 * page does not jump. It closes on any link, on Escape, and when the viewport
 * grows back past the breakpoint.
 * ----------------------------------------------------------------------- */

.rh-drawer {
	display: none;
	position: fixed;
	inset: var(--rh-header-h) 0 auto;
	z-index: 79;
	max-height: calc(100vh - var(--rh-header-h));
	overflow-y: auto;
	flex-direction: column;
	background: var(--rh-paper);
	color: var(--rh-ink);
	border-top: 1px solid var(--rh-line);
	padding: 8px var(--rh-gutter-header) 24px;
}

.rh-drawer.rh-is-open {
	display: flex;
}

.rh-drawer .rh-nav__list {
	display: flex;
	flex-direction: column;
}

.rh-drawer a {
	display: block;
	padding: var(--rh-drawer-item-pad);
	border-bottom: 1px solid var(--rh-line-4);
	color: var(--rh-ink);
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-drawer);
	line-height: normal;
	letter-spacing: var(--rh-ls-drawer);
	text-transform: uppercase;
}

.rh-drawer a[aria-current] {
	color: var(--rh-gold-text);
}

.rh-drawer .rh-nav__cta a {
	margin-top: var(--rh-drawer-cta-top);
	border-bottom: 0;
	background: var(--rh-ink);
	color: var(--rh-paper);
	text-align: center;
	padding: var(--rh-drawer-item-pad);

	/* The prototype's own pair for this one button (Revia Homes.dc.html:64) -
	   a step larger than the drawer's items and less spaced than a button. */
	font-size: var(--rh-t-drawer-cta);
	letter-spacing: var(--rh-ls-nav);
}

.rh-drawer .rh-nav__cta a:hover {
	background: var(--rh-gold-ink);
	color: var(--rh-paper);
}

/*
 * THE navigation breakpoint - change round V2, 2026-09-28: 1180px.
 *
 * Decision F1 (2026-09-13) first moved it from the handoff's 940px to 1100px,
 * because the menu grew to six items. Measured afterwards, 1100px did not
 * actually fit, and decision D (2026-09-14) took it to 1150px. Round V2 renamed
 * the third item "Referenciák" (decision log 21): at 1150px it still fits, but
 * by +1.6px with a Windows scrollbar - so 1180px, where the headroom is back
 * to what it was (+20.3px with a scrollbar, +35.3px without). The reasoning
 * and the numbers are in tokens.css, next to the token.
 *
 * Written the mobile-first way round, so that 1180px itself is the first width
 * with the full bar: "a hamburger-kuszob 1180 px, folotte teljes nav, alatta
 * drawer". At 1179px it is the drawer. Both widths are in the round's
 * screenshot set for exactly this reason.
 *
 * The number also lives in tokens.css as --rh-nav-breakpoint, which is what
 * assets/js/site.js reads. A media query cannot read a custom property, so this
 * is the one unavoidable copy of it - change tokens.css first, then this, then
 * the script's fallback. docs/designrendszer.md repeats the rule.
 */
.rh-header__toggle {
	display: flex;
}

.rh-header__nav {
	display: none;
}

@media (min-width: 1180px) {

	.rh-header__nav {
		display: block;
	}

	.rh-header__toggle {
		display: none;
	}

	.rh-drawer,
	.rh-drawer.rh-is-open {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */

/*
 * The footer paints the darkest surface in the theme, so it declares all three
 * foregrounds itself rather than borrowing two of them from the .rh-on-dark
 * class footer.php also prints on it.
 *
 * That class is still there and still correct - it says "dark is behind this
 * text" - but until now it was LOAD-BEARING, and one line of a template is a
 * thin place for a contrast guarantee to live. Measured with the co-class
 * removed and nothing else changed: a plain link came out 1.11:1 and an
 * .rh-eyebrow 3.44, while the motto stayed at 6.92 because it reads
 * --rh-gold-light directly. Same values as before with the class present
 * (15.39 / 6.92 / 6.92), so nothing about today's footer moves - the
 * guarantee just stops depending on the markup.
 */
.rh-footer {
	background: var(--rh-ink-deep);
	color: var(--rh-body-dark);
	padding: var(--rh-footer-y) var(--rh-gutter) var(--rh-footer-y-end);

	--rh-link: var(--rh-paper-warm);
	--rh-gold-text: var(--rh-gold-light);

	/*
	 * The three text steps, for the same reason as the two above: the footer
	 * paints, so the footer answers. Measured before this line, with a
	 * .rh-title and a .rh-lead placed in the footer - which is an ordinary
	 * thing for a phase-4 footer CTA to contain - 1.11:1 and 2.03:1. Their old
	 * dark pair named .rh-section--ink and .rh-on-dark and stopped there.
	 */
	--rh-strong-text: var(--rh-paper-warm);
	--rh-body-text: var(--rh-body-dark);
	--rh-muted-text: var(--rh-muted-dark);
}

.rh-footer__inner {
	max-width: var(--rh-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-footer-inner-gap);
	align-items: flex-start;
	justify-content: space-between;
}

.rh-footer__brand svg {
	width: var(--rh-wordmark-footer);
	height: auto;
	color: var(--rh-paper-warm);
}

.rh-footer__motto {
	margin-top: 14px;
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-chip);
	line-height: normal;
	letter-spacing: var(--rh-ls-badge);
	text-transform: uppercase;
	color: var(--rh-gold-light);
	margin-right: calc(-1 * var(--rh-ls-badge));
}

.rh-footer__nav .rh-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-footer-nav-gap);
}

.rh-footer__nav a {
	font-family: var(--rh-font-body);
	font-size: var(--rh-t-footer-nav);
	line-height: normal;
	letter-spacing: var(--rh-ls-footer-nav);
	text-transform: uppercase;
	color: var(--rh-body-dark);
}

.rh-footer__nav a:hover,
.rh-footer__nav a:focus-visible {
	color: var(--rh-gold-light);
}

.rh-footer__bottom {
	max-width: var(--rh-max);
	margin-inline: auto;
	margin-top: var(--rh-footer-bottom-top);
	border-top: 1px solid var(--rh-ink-line-2);
	padding-top: var(--rh-footer-rule-top);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-size: var(--rh-t-chip);
	line-height: normal;

	/*
	 * --rh-muted-dark, not --rh-muted. tokens.css says of --rh-muted that it is
	 * the lightest grey allowed ON LIGHT, and this is the footer: 12px type on
	 * --rh-ink-deep measured 3.35:1, below AA. --rh-muted-dark is the handoff's
	 * own pair for a label on a dark surface (4.1, "Cimke sotet hatteren"), and
	 * here it measures 5.19:1.
	 */
	color: var(--rh-muted-dark);
}

/*
 * The last row (phase 6): what the law asks the footer to carry - the cookie
 * settings control, and (5.) the legal pages and the broker registration
 * number. The bottom row's small type and quiet colour, one rule further down.
 */
.rh-footer__legal {
	max-width: var(--rh-max);
	margin-inline: auto;
	margin-top: var(--rh-footer-legal-top);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--rh-footer-legal-gap);
	font-size: var(--rh-t-chip);
	line-height: normal;
	color: var(--rh-muted-dark);
}

.rh-footer__legalnav .rh-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-footer-legal-gap);
}

/* The links read as links beside the quieter registration number: one text step up. */
.rh-footer__legalnav a {
	color: var(--rh-body-dark);
}

.rh-footer__legalnav a:hover,
.rh-footer__legalnav a:focus-visible {
	color: var(--rh-gold-light);
}

/*
 * The company details (phase 8, F6-1, decision log 88): the footer's last
 * line, the field's lines in one row - it wraps only where the screen is
 * narrower than the line. The legal row's small type and quiet colour.
 */
.rh-footer__company {
	max-width: var(--rh-max);
	margin-inline: auto;
	margin-top: var(--rh-footer-legal-top);
	font-size: var(--rh-t-chip);
	line-height: normal;
	color: var(--rh-muted-dark);
	overflow-wrap: anywhere;
}