/* Teetablett – header and footer details Astra free has no settings for:
   sticky header, menu underline, footer column titles and stacked column spacing. */

/* Sticky header */
#masthead {
	position: sticky;
	top: 0;
	z-index: 99;
}
body.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar #masthead { top: 46px; }
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens. */
	body.admin-bar #masthead { top: 0; }
}

/* Slimmer header: Astra pads the logo by 1em above and below and has no setting for it,
   so the header could not get lower than about 80px. The row height itself is Astra's setting. */
#masthead .site-branding.ast-site-identity {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* Phone header: keep the "Menüü" label on one line on narrow (360px) screens. */
#ast-mobile-header .menu-toggle,
#ast-mobile-header .menu-toggle .mobile-menu-wrap {
	white-space: nowrap;
}

/* Desktop menu: a line under the word on hover and on the current page.
   Colours come from Astra's menu colour settings (currentColor). */
#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
	text-decoration-color: transparent;
	transition: color 300ms, text-decoration-color 300ms;
}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:hover,
#ast-desktop-header .main-header-menu > .menu-item > .menu-link:focus-visible,
#ast-desktop-header .main-header-menu > .current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu > .current-menu-ancestor > .menu-link {
	text-decoration-color: currentColor;
}

/* Footer column titles ("LEHT", "KONTAKT"): design typography. Colour and size come from Astra. */
.site-primary-footer-wrap .widget-title {
	font-family: var(--font-body, "DM Sans"), "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* Stacked footer columns on tablet and phone need air between them. */
@media (max-width: 921px) {
	/* Specific enough to beat Astra's stacked-row rule (margin-bottom: 10px). */
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-section.site-footer-section-2.site-footer-primary-section-2 {
		margin-bottom: 28px;
	}
}

/* Language flag (TranslatePress [language-switcher]) in Astra's header HTML element, after the cart:
   just the flag (4:3, slightly rounded corners), no box, at the far right of the header row and centred with the other icons. */
.ast-header-html-1 .ast-builder-html-element {
	display: flex;
	align-items: center;
	gap: 16px;
}
.ast-header-html-1 .trp-language-switcher,
.ast-header-html-1 .trp-language-switcher .trp-current-language-item__wrapper {
	display: flex;
	align-items: center;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.ast-header-html-1 .trp-language-switcher a.trp-language-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	transition: opacity 300ms;
}
.ast-header-html-1 .trp-language-switcher a.trp-language-item:hover {
	opacity: 0.8;
}
.ast-header-html-1 .trp-language-switcher {
	--flag-size: 26px; /* TranslatePress sizes its flags with this variable */
}
.ast-header-html-1 .trp-language-switcher .trp-flag-image {
	width: 26px;
	margin: 0;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(43, 58, 49, 0.12);
}
/* Phone: the flag goes after the menu button. The HTML element's wrappers step aside
   (display: contents) so cart and flag can be ordered around the menu button. */
#ast-mobile-header .site-header-primary-section-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
#ast-mobile-header .ast-header-html-1,
#ast-mobile-header .ast-header-html-1 .ast-header-html,
#ast-mobile-header .ast-header-html-1 .ast-builder-html-element,
#ast-mobile-header .ast-header-html-1 .trp-shortcode-switcher__wrapper {
	display: contents;
}
/* WordPress adds empty paragraphs around the shortcodes. */
.ast-header-html-1 .ast-builder-html-element > p:empty {
	display: none;
}
#ast-mobile-header .ast-header-html-1 .tp-cart { order: 1; }
#ast-mobile-header .site-header-primary-section-right > .ast-builder-layout-element:not(.ast-header-html-1) {
	order: 2;
	padding-left: 0; /* Astra's 10px would make the gap before the menu button bigger than after it */
}
#ast-mobile-header .ast-header-html-1 .trp-language-switcher { order: 3; }

/* Product names: "Vanaema teetabletid", the second word kept together (see includes/shop.php). */
.tpb-name-sub {
	white-space: nowrap; /* same size as the name; kept as a unit so it never splits */
}