/**
 * Fully custom header (see inc/custom-header.php for why Astra's header
 * builder is disabled instead of styled). Values below are tna.lv's own
 * live computed styles (getComputedStyle() against https://tna.lv/,
 * 2026-08-17), not estimates:
 *
 *   Nav row background ............ #e4e4e4, 82px tall, 1200px container
 *   Tile link ...................... padding 15px 25px, no visible
 *                                     divider (border-left is the SAME
 *                                     colour as the row background)
 *   Tile label (the <h6> tna.lv
 *   nests inside each <a>) ......... 18px / 600 / uppercase /
 *                                     letter-spacing .3px / #044a88
 *   Hover ........................... tile fill -> #f1f1f1
 *   Active (current page) .......... same #f1f1f1 fill, PLUS a 12px
 *                                     solid #ff3700 bar along the tile's
 *                                     bottom edge (a li::after, not a
 *                                     box-shadow)
 *   Row bottom border ("botline") .. 12px solid #c9c9c9, full width,
 *                                     continuous under every tile except
 *                                     where the active tile's red bar
 *                                     overlaps it
 *   Dropdown submenu ................ 300px, white, 1px solid #c9c9c9
 *                                     border, links styled the same as
 *                                     top-level tiles (not smaller/lighter)
 *   Search input ..................... #e4e4e4 bg (blends into the row),
 *                                     #0a0a0a text, no border, square
 *                                     corners, 16px, 8px padding
 *   Language switcher ............... plain text, NO pill/box background;
 *                                     current language #ff3700 / 600,
 *                                     other language #044a88 / 400
 *
 * Font: tna.lv loads "Source Sans Pro" from Google Fonts for these
 * labels. Deliberately NOT pulling in a new external font just for the
 * header -- the rest of this site already runs on the system sans-serif
 * stack (see tna-child-style / body), and adding a single Google Fonts
 * dependency for one component isn't worth the extra request + FOUC
 * risk. Size/weight/case/spacing/colour all still match; only the
 * typeface itself is the system stack instead.
 */

/* Full-bleed photo+dot backdrop behind the whole header (nav row + the
   subrow below it) -- see assets/images/hero.jpg, same file the page
   hero banners use.
   The photo layer is deliberately zoomed in (175%, not "cover"'s
   natural ~75%) and repositioned, not just top/bottom-anchored: at
   "cover" scale the scaled image exactly fills the viewport width
   with zero horizontal overflow, so EVERY pixel of the source photo's
   width is shown across the row -- including its right third, which
   is unbroken dense forest with no building in it at any height. That
   put flat, repetitive-looking tree canopy behind the search box
   (user-reported: looked like an unrelated/repeated patch, not a
   continuation of the building visible further left). Zooming in
   creates room to horizontally reposition onto a ~1100px-wide source
   window (person: 175% -> scale 1.3125x -> 1440/1.3125 ≈ 1097px
   shown) centred on the building (source x ≈ 460-1010, see
   hero_grid.jpg in scratch), so the building itself spans most of the
   row's width instead of only its left edge. Vertically, y ≈ 230-340
   keeps the roofline + top-floor windows in frame (not just sky).
   NOTE: this uses a different zoom level than .tna-hero/.tna-page-hero
   (which still use "cover", ~0.75x) -- their header-to-hero continuity
   offset is only an approximation now, not exact, since the two
   sections are no longer directly comparable pixel-for-pixel at
   different scales. Recalculate both together if either changes --
   see the comment there. */
#masthead {
	position: relative;
	background-image: url('../images/header-dot.png'), url('../images/hero.jpg');
	background-repeat: repeat, no-repeat;
	background-size: auto, 175% auto;
	/* -381px -> -663px: user asked to move the focus lower, toward the
	   middle of the source photo (1119px tall) instead of the
	   roofline/upper-facade band. -663px centres the visible ~110px-tall
	   window on source y ~560 (the image's own vertical middle),
	   showing the building's lower floors/ground-level facade instead
	   of the upper storeys. Recalculate .tna-hero/.tna-page-hero's
	   continuity offset together with this -- see the comment there. */
	background-position: left top, -245px -145px;
}

/* Nav row
------------------------------------------------------------ */

.tna-nav-bar {
	/* Semi-transparent, not solid #e4e4e4: user asked for the hero photo
	   to actually show behind the tile row (previously fully opaque,
	   hiding it completely), while keeping the tiles' own #044a88 text
	   readable against a busy image. */
	background: rgba( 228, 228, 228, 0.88 );
}

.tna-nav-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: stretch;
	border-bottom: 12px solid #c9c9c9;
}

.tna-nav-bar__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: auto;
}

.tna-nav-bar__logo img {
	max-height: 55px;
	width: auto;
	display: block;
}

.tna-nav-bar__menu {
	display: flex;
}

.tna-nav-bar__list {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tna-nav-bar__item {
	position: relative;
	display: flex;
}

.tna-nav-bar__link {
	display: flex;
	align-items: center;
	padding: 15px 10px;
	color: #044a88;
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
	text-decoration: none;
	/* tna.lv's own tiles wrap onto 2 lines rather than force the row wide
	   enough for every label on one line (confirmed in its live
	   screenshot: "NEKUSTAMĀ ĪPAŠUMA" / "APSAIMNIEKOŠANA" is 2 lines) --
	   that's what keeps 6 tiles + logo inside the 1200px container. Each
	   tile's own natural (1-line) width is its flex-basis, so only the
	   genuinely long labels end up wrapping instead of all 6 shrinking
	   evenly. */
	text-align: center;
	line-height: 1.25;
}

.tna-nav-bar__item {
	flex: 0 1 auto;
}

.tna-nav-bar__item:hover > .tna-nav-bar__link,
.tna-nav-bar__item.current-menu-item > .tna-nav-bar__link,
.tna-nav-bar__item.current-menu-ancestor > .tna-nav-bar__link,
.tna-nav-bar__item.current-menu-parent > .tna-nav-bar__link {
	background: #f1f1f1;
}

/* Active-page indicator: a 12px red bar overlapping the row's own grey
   bottom border, exactly where that tile sits -- matches tna.lv's own
   li.current::after (12px, full tile width). */
.tna-nav-bar__item.current-menu-item::after,
.tna-nav-bar__item.current-menu-ancestor::after,
.tna-nav-bar__item.current-menu-parent::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -12px;
	height: 12px;
	background: #ff3700;
}

/* Dropdown submenu (one level, matches tna.lv's own shallow flyout) --
   hover to reveal on desktop; :focus-within covers keyboard nav. */
.tna-nav-bar__submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 300px;
	background: #fff;
	border: 1px solid #c9c9c9;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 100;
}

.tna-nav-bar__item:hover > .tna-nav-bar__submenu,
.tna-nav-bar__item:focus-within > .tna-nav-bar__submenu {
	display: block;
}

.tna-nav-bar__sublink {
	display: block;
	padding: 12px 20px;
	color: #044a88;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	text-decoration: none;
}

.tna-nav-bar__subitem:hover > .tna-nav-bar__sublink,
.tna-nav-bar__sublink:focus {
	background: #f1f1f1;
}

.tna-nav-bar__link:focus-visible,
.tna-nav-bar__sublink:focus-visible {
	outline: 2px solid #044a88;
	outline-offset: -2px;
}

/* Mobile hamburger toggle (pure CSS checkbox hack -- no JS file exists
   in this theme, and one toggle doesn't warrant adding one). Hidden on
   desktop; see the 920px breakpoint below for its mobile appearance. */
.tna-mobile-toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tna-mobile-toggle-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	margin-left: auto;
}

.tna-mobile-toggle-btn span {
	display: block;
	height: 3px;
	background: #044a88;
	border-radius: 1px;
}

.tna-mobile-toggle-input:focus-visible ~ .tna-mobile-toggle-btn {
	outline: 2px solid #044a88;
	outline-offset: 2px;
}

/* Search + language subrow
------------------------------------------------------------ */

.tna-header-subrow {
	/* No background of its own -- #masthead's single photo backdrop
	   already covers this row too (it's nested inside #masthead). A
	   second, independently-cropped copy here used to re-show the SAME
	   thin sky sliver as the nav row above it (both anchored "top"
	   within their own short box), instead of the nav row and this row
	   reading as one continuous photo. */
	padding: 10px 0;
}

.tna-header-subrow__inner {
	max-width: 1200px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.2em;
}

.tna-search-form {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.tna-search-form__input {
	width: 260px;
	height: 35px;
	box-sizing: border-box;
	border: none;
	border-radius: 0;
	background: #e4e4e4;
	color: #0a0a0a;
	padding: 8px 34px 8px 12px;
	font-size: 16px;
}

.tna-search-form__input:focus {
	outline: 2px solid #044a88;
	outline-offset: -2px;
}

.tna-search-form__submit {
	position: absolute;
	right: 0;
	top: 0;
	width: 35px;
	height: 35px;
	border: none;
	background: transparent;
	padding: 0;
	color: #044a88;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tna-search-form__submit svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.tna-lang-switcher {
	display: inline-flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.6em;
}

.tna-lang-switcher .tna-lang-item {
	border-left: 1px solid #c9c9c9;
	padding-left: 0.6em;
}

.tna-lang-switcher .tna-lang-item:first-child {
	border-left: none;
	padding-left: 0;
}

.tna-lang-switcher .tna-lang-item a {
	text-transform: uppercase;
	text-decoration: none;
	color: #044a88;
	font-size: 16px;
	font-weight: 400;
	/* This subrow's photo backdrop varies a lot by page position (sky,
	   building wall, shadowed pavement) and this text has no chip/box
	   behind it -- sampling found contrast as low as ~1.2:1 in the
	   darkest patches after the header photo's focus moved lower
	   (2026-08-17). A tight white-ish halo keeps both LV's dark
	   orange-red and EN's navy readable regardless of what's behind
	   them, matching the same text-shadow trade-off already applied to
	   the hero title/subtitle (see front-page.css). */
	text-shadow:
		-1px -1px 1px rgba( 255, 255, 255, 0.75 ),
		1px -1px 1px rgba( 255, 255, 255, 0.75 ),
		-1px 1px 1px rgba( 255, 255, 255, 0.75 ),
		1px 1px 1px rgba( 255, 255, 255, 0.75 ),
		0 0 6px rgba( 255, 255, 255, 0.5 );
}

.tna-lang-switcher .tna-lang-item--current a {
	font-weight: 600;
	/* Brand #ff3700 is only ~3.3:1 against this subrow's variable photo
	   backdrop -- same accessible substitute used everywhere else on the
	   site for text (footer phone numbers, lang pill before this rewrite,
	   etc). */
	color: #b32d00;
}

/* Mobile (<=920px, same breakpoint validated earlier this session for
   the rest of the header/footer)
------------------------------------------------------------ */

@media (max-width: 920px) {
	/* The desktop zoom/reposition above (175%, -245px -302px) is tuned
	   for #masthead's desktop scale -- at mobile's much smaller scale
	   (~0.2x vs ~1.3x) those same pixel values land on a completely
	   different, arbitrary part of the photo (found: part of the
	   parking lot, faded under the tile row's tint). Revert to a plain
	   "cover" top-anchored crop here, same as before this fix; the
	   "avoid monotonous trees behind the search box" problem this
	   solves doesn't really apply on mobile anyway (the tile row is
	   hidden until the panel opens, and the visible logo/toggle row is
	   narrow enough not to span into the photo's dense-forest zone the
	   way the full desktop row did). */
	#masthead {
		background-size: auto, cover;
		background-position: left top, center top;
	}

	.tna-nav-bar__inner {
		flex-wrap: wrap;
		border-bottom: none;
	}

	.tna-nav-bar {
		border-bottom: 6px solid #ff3700;
	}

	.tna-mobile-toggle-btn {
		display: flex;
	}

	.tna-nav-bar__menu {
		display: block;
		width: 100%;
		order: 3;
	}

	.tna-nav-bar__list {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.tna-mobile-toggle-input:checked ~ .tna-nav-bar__menu .tna-nav-bar__list {
		display: flex;
	}

	.tna-nav-bar__item {
		display: block;
		width: 100%;
		border-bottom: 1px solid #c9c9c9;
	}

	.tna-nav-bar__item:last-child {
		border-bottom: none;
	}

	.tna-nav-bar__link {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 14px 12px;
	}

	.tna-nav-bar__item.current-menu-item::after,
	.tna-nav-bar__item.current-menu-ancestor::after,
	.tna-nav-bar__item.current-menu-parent::after {
		content: none;
	}

	.tna-nav-bar__item.current-menu-item > .tna-nav-bar__link,
	.tna-nav-bar__item.current-menu-ancestor > .tna-nav-bar__link,
	.tna-nav-bar__item.current-menu-parent > .tna-nav-bar__link {
		box-shadow: inset 4px 0 0 #ff3700;
	}

	/* Submenus render inline (always expanded once the panel is open)
	   rather than as a second hover/tap layer -- simpler and still fully
	   usable on a touch device. */
	.tna-nav-bar__submenu {
		display: block !important;
		position: static;
		border: none;
		background: #ececec;
		min-width: 0;
	}

	.tna-nav-bar__sublink {
		padding: 10px 12px 10px 28px;
		font-size: 15px;
	}

	.tna-header-subrow__inner {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.6em;
	}

	.tna-search-form__input {
		width: 100%;
	}
}

/* See the long note in templates.css: the pixel-pinned crop is dropped
   in favour of each band centring its own. The first layer is the tint
   overlay, so it keeps "auto". */
#masthead {
	background-size: auto, cover;
	background-position: left top, center center;
	background-repeat: repeat, no-repeat;
}

/* Same band as .tna-page-hero, so the two read as one photo. */
#masthead {
	background-position: left top, center 30%;
}

/* ------------------------------------------------------------------
   One photo, not two.

   #masthead and the hero below it each carried their own copy of
   hero.jpg, cropped to their own box. Two independent crops of the
   same photo can only line up at one viewport width, so at every other
   width the treeline broke across the seam between them -- and the
   long offset comments above are the record of chasing that alignment.

   tna.lv does not do this: the nav and search rows float over the top
   of a single hero image. So #masthead drops its photo and keeps only
   the dot texture over a transparent box, and the hero is pulled up
   underneath it (see templates.css / front-page.css). One crop, one
   scale, nothing to align.
   ------------------------------------------------------------------ */
#masthead {
	position: relative;
	z-index: 3;
	background-image: url('../images/header-dot.png');
	background-repeat: repeat;
	background-size: auto;
	background-position: left top;
	background-color: transparent;
}