/*
 * Header account link (closeout 2026-10-02). Loaded with the site header on every page, so it
 * stays tiny and self-contained (ffj.css is not loaded site-wide). Clock In tokens published
 * by the Elementor kit, each with the approved literal as a fallback. Compact secondary
 * (teal outline) control: never the sunburst primary action. 44px target like the menu items.
 */
.ffj-account-link { display: flex; align-items: center; }
.ffj-account-link .ffj-account-link__a {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 2.75rem; padding: 0.375rem 1rem;
	border: 2px solid var(--brand-primary, #0B6E69); border-radius: var(--radius-control, 10px);
	background: var(--surface, #FFFFFF); color: var(--brand-primary, #0B6E69);
	font-size: 0.9375rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.005em;
	text-decoration: none; white-space: nowrap;
	transition: background-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
}
.ffj-account-link .ffj-account-link__a:hover {
	background: var(--brand-primary-tint, #E2F2F0); color: var(--brand-primary-hover, #085854); border-color: var(--brand-primary-hover, #085854);
}
@media (prefers-reduced-motion: reduce) { .ffj-account-link .ffj-account-link__a { transition: none; } }
@media (forced-colors: active) { .ffj-account-link .ffj-account-link__a { border-color: LinkText; color: LinkText; } }

/*
 * Responsive site header (0.18.5, 2026-10-09). Works with the FFJ Header template: its nav-menu widget
 * collapses behind Elementor's menu toggle below 768px (Breakpoint: Mobile).
 * - Phones: logo, account link and menu button share one row (Elementor: no wrap, the logo may shrink); the
 *   menu opens as a full-width panel under the header. The header stays static so the screen and the on-screen keyboard keep their full height.
 * - 48em (768px) wide and 31.25em (500px) tall or more: the header sticks to the top (CSS only: no script, no spacer, no layout
 *   shift). Phones held sideways (wide but short) keep the static header.
 *   Anchors and keyboard focus scroll clear of it (scroll-padding-top), and sidebars that stick read
 *   --ffj-header-offset. --wp-admin--admin-bar--height is set by WordPress only while the admin bar shows.
 */
header.elementor-location-header { position: relative; z-index: 100; }
@media (max-width: 767px) {
	.ffj-site-header .ffj-header-logo { min-width: 0; }
	.ffj-site-header .ffj-header-logo img { max-width: 100%; height: auto; }
	.ffj-site-header .elementor-menu-toggle { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; border-radius: var(--radius-control, 10px); }
	.ffj-site-header .elementor-nav-menu--dropdown { border-top: 1px solid var(--border, #D3DFDD); border-bottom: 1px solid var(--border, #D3DFDD); box-shadow: 0 8px 16px rgba(15, 42, 46, 0.08); }
	.ffj-site-header .elementor-nav-menu--dropdown a.elementor-item { min-height: 2.75rem; }
	.ffj-site-header .elementor-nav-menu--dropdown a.elementor-item[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
}
@media (max-width: 400px) {
	.ffj-account-link .ffj-account-link__a { padding-left: 0.75rem; padding-right: 0.75rem; }
}
/* em, not px: a larger browser text size switches the sticky header off instead of letting it fill the screen. */
@media (min-width: 48em) and (min-height: 31.25em) {
	:root { --ffj-header-offset: 4.0625rem; }
	header.elementor-location-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
	html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ffj-header-offset) + 0.75rem); }
}
@media print { header.elementor-location-header { position: static; } }

/*
 * Printing (QA follow-up 2026-10-10). The Hello Elementor theme's print styles add " (address)" after every
 * link, so a printed dashboard, menu or footer fills with long URLs. Printed pages show link text only;
 * Guides keep printed addresses for outside links in their text and Sources (ffj-content.css). Screen
 * rendering is unchanged, and FFJ's generated application PDFs never use these styles.
 */
@media print { html a[href]::after { content: none !important; } }