/*
 * Houston Faces – Custom Header & Mega Menu
 * Built from Figma spec (1920px frame)
 * Prefix: hf-nav-  — no Divi class conflicts
 */

/* ─────────────────────────────────────────────
   0. Reset
───────────────────────────────────────────── */
.hf-nav-wrapper *,
.hf-nav-wrapper *::before,
.hf-nav-wrapper *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.hf-nav-wrapper ul  { list-style: none; }
.hf-nav-wrapper a   { text-decoration: none; color: inherit; }
.hf-nav-wrapper img { display: block; }

/* ─────────────────────────────────────────────
   1. Design Tokens
───────────────────────────────────────────── */
.hf-nav-wrapper {
	--hf-dark:       #1F1E1C;
	--hf-bg-mid:     rgba(243, 242, 242, 0.48);
	--hf-bg-right:   #E8E3DF;
	--hf-header-h:   78px;
	--hf-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--hf-font-body:  -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
	/* SVG arrow (12×8) encoded for CSS url() – single quotes inside, < > encoded */
	--hf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M11.3536 4.03556C11.5488 3.8403 11.5488 3.52372 11.3536 3.32845L8.17157 0.146473C7.97631 -0.0487893 7.65973 -0.0487893 7.46447 0.146473C7.2692 0.341735 7.2692 0.658318 7.46447 0.85358L10.2929 3.68201L7.46447 6.51043C7.2692 6.7057 7.2692 7.02228 7.46447 7.21754C7.65973 7.4128 7.97631 7.4128 8.17157 7.21754L11.3536 4.03556ZM0 3.68201V4.18201H11V3.68201V3.18201H0V3.68201Z' fill='black'/%3E%3C/svg%3E");

	position: relative;
	z-index: 9999;
	font-family: var(--hf-font-sans);
	color: var(--hf-dark);
	height: var(--hf-header-h);
}

/* ─────────────────────────────────────────────
   2. Fixed Header Bar
───────────────────────────────────────────── */
.hf-nav-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9999;
	height: var(--hf-header-h);
	background: #fff;
	border-bottom: 1px solid #000;
	transition: box-shadow 0.25s ease;
}
.hf-nav-header--scrolled {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

.hf-nav-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 48px;
	max-width: 1920px;
	margin: 0 auto;
}

/* ─────────────────────────────────────────────
   3. Logo
───────────────────────────────────────────── */
.hf-nav-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.hf-nav-logo img {
	width: 160px;
	height: 58px;
	object-fit: contain;
}

/* ─────────────────────────────────────────────
   4. Header – Right Actions
───────────────────────────────────────────── */
.hf-nav-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* — Call Us button — */
.hf-nav-btn--call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 33px;
	padding: 3px 10px;
	background: var(--hf-dark);
	color: #fff !important;
	font-family: var(--hf-font-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	transition: opacity 0.2s;
}
.hf-nav-btn--call:hover { opacity: 0.82; }

/* — Search box — */
.hf-nav-search {
	display: flex;
	align-items: center;
	height: 33px;
	width: 175px;
	padding: 2px 12px;
	outline: 1px solid var(--hf-dark);
	outline-offset: -1px;
	background: #fff;
}
.hf-nav-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--hf-font-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--hf-dark);
	line-height: 1.6;
}
.hf-nav-search-input::placeholder { color: #D9D9D9; }
.hf-nav-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	color: var(--hf-dark);
	flex-shrink: 0;
}

/* — Language pill-toggle — */
/*
 * Figma: 88×33px outer pill (border-radius 46px, border #1F1E1C)
 * Active lang (.hf-nav-lang-link-on) → dark filled pill (42×27px, radius 58px, white text)
 * Inactive lang                       → plain text, dark color
 *
 * Specificity note: `.hf-nav-wrapper a { color: inherit }` = (0,1,1).
 * We use `.hf-nav-lang .hf-nav-lang-link` = (0,2,0) to win for inactive color.
 * We use `.hf-nav-lang .hf-nav-lang-link.hf-nav-lang-link-on` = (0,3,0) for active.
 */
.hf-nav-lang {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 88px;
	height: 33px;
	padding: 3px;
	border: 1px solid var(--hf-dark);
	border-radius: 46px;
	flex-shrink: 0;
}

/* ── Inactive (plain) – (0,2,0) beats .hf-nav-wrapper a (0,1,1) ── */
.hf-nav-lang .hf-nav-lang-link {
	flex: 1;
	text-align: center;
	font-family: var(--hf-font-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--hf-dark); /* explicit – overrides color:inherit */
	background: transparent;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}
.hf-nav-lang .hf-nav-lang-link:hover { opacity: 0.6; }

/* ── Active pill – (0,3,0) unambiguously wins over everything ── */
.hf-nav-lang .hf-nav-lang-link.hf-nav-lang-link-on {
	flex: none;
	width: 42px;
	height: 27px;
	background: var(--hf-dark);
	border-radius: 58px;
	color: #fff; /* explicit white – no inheritance issue */
}
.hf-nav-lang .hf-nav-lang-link.hf-nav-lang-link-on:hover { opacity: 0.82; }

/* — Menu toggle (hamburger ↔ close X) — */
.hf-nav-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--hf-dark);
	padding: 0;
	flex-shrink: 0;
}
.hf-nav-toggle-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hf-nav-toggle-open,
.hf-nav-toggle-close {
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.hf-nav-toggle-close {
	position: absolute;
	opacity: 0;
	transform: rotate(-90deg);
}
.hf-nav-wrapper.hf-nav-menu-open .hf-nav-toggle-open  { opacity: 0; transform: rotate(90deg); }
.hf-nav-wrapper.hf-nav-menu-open .hf-nav-toggle-close { opacity: 1; transform: rotate(0deg); }

/* ─────────────────────────────────────────────
   5. Mega Menu Panel
───────────────────────────────────────────── */
.hf-nav-panel {
	position: fixed;
	padding: 48px 0px;
	top: var(--hf-header-h);
	left: 0; right: 0;
	z-index: 9998;
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	max-height: calc(100vh - var(--hf-header-h));
	overflow-y: auto;
	/* hidden */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.hf-nav-wrapper.hf-nav-menu-open .hf-nav-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hf-nav-panel-inner {
	display: flex;
	align-items: stretch;
	max-width: 1920px;
	margin: 0 auto;
	min-height: 702px;
	gap: 26px;
}

/* ─────────────────────────────────────────────
   6. Three-Column Layout
───────────────────────────────────────────── */

/* Column 1 – left nav */
.hf-nav-col--nav {
	width: 354px; /* 74px offset + 280px content matches Figma proportion */
	flex-shrink: 0;
	padding: 0px 0px 20px 74px;
	background: #fff;
}

/* Column 2 – procedures / tabs */
.hf-nav-col--procedures {
	flex: 1;
	min-width: 0;
	background: var(--hf-bg-mid);
	padding: 20px 48px 48px 48px;
}

/* Column 3 – resources (right) */
.hf-nav-col--resources {
	width: 631px;
	flex-shrink: 0;
	background: var(--hf-bg-right);
	padding: 20px 39px 39px 39px;
}

/* ─────────────────────────────────────────────
   7. Column 1 – About / Navigation
───────────────────────────────────────────── */
.hf-nav-home-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 20px;
	background: var(--hf-dark);
	color: #fff !important;
	font-family: var(--hf-font-sans);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 0;
	transition: opacity 0.2s;
}
.hf-nav-home-link:hover { opacity: 0.82; }

.hf-nav-about {
	width: 100%;
}
.hf-nav-about-label {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	font-family: var(--hf-font-sans);
	font-size: 24px;
	font-weight: 600;
	color: #000;
	line-height: 1.1;
}

.hf-nav-about-photo {
	width: 100%;
	margin-bottom: 0;
}
.hf-nav-about-photo img {
	width: 100%;
	max-width: 283px;
	height: 255px;
	object-fit: cover;
	object-position: top center;
}

.hf-nav-about-links { margin-top: 0; }
.hf-nav-about-links li { border-bottom: 1px solid #000; }
.hf-nav-about-links li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	font-family: var(--hf-font-body);
	font-size: 16px;
	font-weight: 500;
	color: #000;
	line-height: 1.4;
	transition: opacity 0.15s;
}
.hf-nav-about-links li a:hover { opacity: 1; }

/* ─────────────────────────────────────────────
   8. Column 2 – Procedures / Tabs
───────────────────────────────────────────── */

/* Tab navigation bar */
.hf-nav-tab-nav {
	display: flex;
	gap: 10px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

/*
 * Figma: INACTIVE tabs = dark background (#1F1E1C), white text
 *        ACTIVE tab  = no background, black bold text (showing as current label)
 */
.hf-nav-tab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	padding: 16px 20px;
	background: var(--hf-dark);
	color: #fff;
	border: none;
	cursor: pointer;
	font-family: var(--hf-font-sans);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	white-space: nowrap;
	transition: opacity 0.2s;
}
.hf-nav-tab-btn:hover:not(.hf-nav-tab-btn--active) { opacity: 0.82; }

/* Active tab – plain label, not a "button" */
.hf-nav-tab-btn--active {
	background: transparent;
	color: #000;
	font-weight: 600;
	cursor: default;
}

/* Tab content panels */
.hf-nav-tab-content { display: none; }
.hf-nav-tab-content--active { display: block; }

/* Two-column link grid */
.hf-nav-tab-cols {
	display: flex;
	gap: 10px;
	margin-bottom: 28px;
}
.hf-nav-tab-cols > ul { flex: 1; }
.hf-nav-tab-cols > ul li { margin-bottom: 10px; }
.hf-nav-tab-cols > ul li a {
	font-family: var(--hf-font-body);
	font-size: 16px;
	font-weight: 500;
	color: #000;
	line-height: 1.4;
	transition: opacity 0.15s;
}
.hf-nav-tab-cols > ul li a:hover { opacity: 1; }

/* Nose Concerns section */
.hf-nav-tab-section { padding-top: 24px; }
.hf-nav-section-title {
	font-family: var(--hf-font-sans);
	font-size: 20px;
	font-weight: 600;
	color: #000;
	line-height: 1.1;
	margin-bottom: 16px;
}

/* ── Hover arrow on all content links (→ slides in on hover) ──
   Applies to: tab lists, sublevel, resources lists, about links.
   Excluded: buttons (Home, Contact Us, Call Us, lang switcher). */
.hf-nav-tab-content a,
.hf-nav-sublevel a,
.hf-nav-col--resources ul a,
.hf-nav-standalone-title,
.hf-nav-about-links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.hf-nav-tab-content a::after,
.hf-nav-sublevel a::after,
.hf-nav-col--resources ul a::after,
.hf-nav-standalone-title::after,
.hf-nav-about-links a::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 8px;
	background-image: var(--hf-arrow);
	background-repeat: no-repeat;
	background-size: 12px 8px;
	background-position: center;
	flex-shrink: 0;
	margin-left: 6px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.hf-nav-tab-content a:hover::after,
.hf-nav-sublevel a:hover::after,
.hf-nav-col--resources ul a:hover::after,
.hf-nav-standalone-title:hover::after,
.hf-nav-about-links a:hover::after {
	opacity: 1;
	transform: translateX(3px);
}

/* ── Chin dropdown toggle button ── */
.hf-nav-sub-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--hf-font-body);
	font-size: 16px;
	font-weight: 500;
	color: #000;
	line-height: 1.4;
	transition: opacity 0.15s;
}
.hf-nav-sub-toggle:hover { opacity: 0.6; }

/* Arrow: › (single right chevron) rotates to ↓ when open */
.hf-nav-sub-arrow {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	transition: transform 0.2s ease;
	transform: rotate(0deg); /* right = closed */
}
.hf-nav-has-sub--open .hf-nav-sub-arrow {
	transform: rotate(90deg); /* down = open */
}

/* Sublevel: hidden by default, shown when open */
.hf-nav-sublevel {
	display: none;
	padding-left: 0;
	margin-top: 8px;
}
.hf-nav-has-sub--open .hf-nav-sublevel {
	display: block;
}
.hf-nav-sublevel li {
	margin-bottom: 8px;
}
.hf-nav-sublevel li a {
	font-size: 15px;
	color: #000;
	padding-left: 12px;
}

/* ─────────────────────────────────────────────
   9. Column 3 – Photos / Videos / Resources
───────────────────────────────────────────── */

/* Inner 2-column layout (Figma: gap ~106px between 222px sub-cols) */
.hf-nav-resources-inner {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}

/* Left sub-col: Photos + Videos */
.hf-nav-resources-photos-col {
	flex: 0 0 222px;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

/* Right sub-col: Patient Resources + Review + Blog + Contact */
.hf-nav-resources-right-col {
	flex: 0 0 222px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Section headings */
.hf-nav-col-title {
	font-family: var(--hf-font-sans);
	font-size: 24px;
	font-weight: 600;
	color: #000;
	line-height: 1.1;
	margin-bottom: 12px;
}
.hf-nav-col-title a { color: #000; transition: opacity 0.15s; }
.hf-nav-col-title a:hover { opacity: 1; }

/* Resource link lists */
.hf-nav-col--resources ul { margin-bottom: 0; }
.hf-nav-col--resources ul li { margin-bottom: 12px; }
.hf-nav-col--resources ul li a {
	font-family: var(--hf-font-body);
	font-size: 16px;
	font-weight: 500;
	color: #000;
	display: block;
	line-height: 1.4;
	transition: opacity 0.15s;
}
.hf-nav-col--resources ul li a:hover { opacity: 1; }

/* Rhinoplasty Photos bold link */
.hf-nav-featured-link { font-weight: 700 !important; }

/* Patient Resources block */
.hf-nav-patient-block { margin-bottom: 32px; }

/* Review / Blog as clickable headings */
.hf-nav-standalone-title {
	font-family: var(--hf-font-sans);
	font-size: 24px;
	font-weight: 600;
	color: #000;
	line-height: 1.1;
	margin-bottom: 24px;
	display: block;
	transition: opacity 0.15s;
}
.hf-nav-standalone-title:hover { opacity: 1; }

/* Contact Us button */
.hf-nav-btn--contact {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 20px;
	background: var(--hf-dark);
	color: #fff !important;
	font-family: var(--hf-font-sans);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	margin-top: auto;
	transition: opacity 0.2s;
}
.hf-nav-btn--contact:hover { opacity: 0.82; }

/* ─────────────────────────────────────────────
   10. Body Offset (push page content below header)
───────────────────────────────────────────── */
body.hf-nav-active {
	padding-top: var(--hf-header-h) !important;
}

/* ─────────────────────────────────────────────
   11. Responsive
───────────────────────────────────────────── */
@media (max-width: 1730px) {
	.hf-nav-col--resources{
		width: 600px;
		padding: 20px 20px 20px 20px;
	}
	.hf-nav-col--procedures{
		padding: 20px 20px 20px 20px;
	}
	.hf-nav-tab-btn{
		min-width: 149px;
	}
}
/* Wide tablet / small desktop */
@media (max-width: 1550px) {

	.hf-nav-home-link{
		font-size: 20px;
	}
	.hf-nav-about-label{
		font-size: 20px;
	}
    .hf-nav-tab-btn {
        min-width: 120px;
        font-size: 20px;
    }
	.hf-nav-col-title{
		font-size: 20px;
	}
	.hf-nav-standalone-title{
		font-size: 20px;
	}
	.hf-nav-btn--contact{
		font-size: 20px;
	}

	.hf-nav-col--nav       { width: 300px; padding-left: 40px; }
	.hf-nav-col--resources { width: 500px; }
	.hf-nav-resources-inner { gap: 32px; }
	.hf-nav-resources-photos-col,
	.hf-nav-resources-right-col { flex: 1; }
	.hf-nav-tab-btn { min-width: 150px; font-size: 20px; }
	.hf-nav-home-link { font-size: 20px; }
	.hf-nav-col-title { font-size: 20px; }
	.hf-nav-tab-cols > ul li a{font-size: 14px;}
	.hf-nav-sublevel li a{font-size: 12px !important;}
	.hf-nav-col--resources ul li a{font-size: 14px;}
	.hf-nav-panel-inner{gap: 10px;}
}
@media (max-width: 1330px) {
	.hf-nav-col--nav       { width: 250px; padding-left: 20px; }
	.hf-nav-col--procedures { padding: 20px 20px 20px 20px; }
	.hf-nav-col--resources { width: 450px; padding: 20px 20px 20px 20px; }
	.hf-nav-resources-inner { gap: 20px; }
	.hf-nav-resources-photos-col,
	.hf-nav-resources-right-col { flex: 1; }
	.hf-nav-tab-btn { min-width: 120px; font-size: 18px; }
	.hf-nav-home-link { font-size: 18px; }
	.hf-nav-col-title { font-size: 18px; }
	.hf-nav-standalone-title{font-size: 18px;}
	.hf-nav-btn--contact{font-size: 18px;}
	.hf-nav-panel-inner{gap: 10px;}
}
@media (max-width: 1160px) {
	.hf-nav-tab-btn{
		min-width: auto;
		padding: 16px 10px;
	}
}
/* Tablet (stacked layout) */
@media (max-width: 1024px) {
	.hf-nav-panel-inner {
		flex-direction: column;
		min-height: 0;
	}

	.hf-nav-col--nav,
	.hf-nav-col--procedures,
	.hf-nav-col--resources {
		width: 100% !important;
		flex-shrink: 1;
	}

	.hf-nav-col--nav {
		padding: 24px 24px 24px 24px;
	}
	.hf-nav-about,
	.hf-nav-home-link { width: 100%; }

	.hf-nav-col--procedures {
		padding: 20px 24px 24px 24px;
	}
	.hf-nav-col--resources {
		padding: 24px;
	}

	.hf-nav-tab-nav { gap: 8px; }
	.hf-nav-tab-btn { flex: 1; min-width: 100px; font-size: 16px; padding: 12px; }
	.hf-nav-about-links li a { justify-content: flex-start; padding: 14px 16px; }
	.hf-nav-resources-photos-col,
	.hf-nav-resources-right-col { flex: 1; }
}
@media (max-width: 999px) {
	#shiftnav-toggle-main.shiftnav-toggle-style-burger_only{
		display: none !important;
	}
}
/* ── Mobile search trigger button (hidden on desktop) ── */
.hf-nav-search-trigger {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--hf-dark);
	padding: 0;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

/* ── Mobile search drawer ── */
.hf-nav-search-drawer {
	display: none; /* block only on mobile via media query */
	position: fixed;
	top: var(--hf-header-h);
	left: 0;
	right: 0;
	z-index: 9997;
	background: #fff;
	border-bottom: 1px solid #000;
	padding: 10px 16px;
	/* closed state */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.hf-nav-search-drawer.hf-nav-search-drawer--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.hf-nav-search-drawer-form {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.hf-nav-search-drawer-input {
	flex: 1;
	min-width: 0;
	height: 38px;
	padding: 4px 12px;
	border: 1px solid var(--hf-dark);
	outline: none;
	font-family: var(--hf-font-sans);
	font-size: 15px;
	color: var(--hf-dark);
	background: #fff;
}
.hf-nav-search-drawer-input::placeholder { color: #aaa; }
.hf-nav-search-drawer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hf-dark);
	border: none;
	cursor: pointer;
	color: #fff;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
}

/* Mobile */
@media (max-width: 768px) {
	.hf-nav-header-inner { padding: 0 16px; gap: 8px; }
	.hf-nav-header-actions { gap: 8px; }

	/* hide desktop search form, show icon + drawer */
	.hf-nav-search         { display: none; }
	.hf-nav-search-trigger { display: flex; }
	.hf-nav-search-drawer  { display: block; }

	.hf-nav-logo img { width: 110px; height: auto; }

	/* Language switcher – smaller pill for mobile */
	.hf-nav-lang {
		width: 76px;
		height: 28px;
		padding: 2px;
	}
	.hf-nav-lang .hf-nav-lang-link {
		font-size: 13px;
	}
	.hf-nav-lang .hf-nav-lang-link.hf-nav-lang-link-on {
		width: 36px;
		height: 22px;
	}

	.hf-nav-tab-cols { flex-direction: column; gap: 0; }
	.hf-nav-tab-cols > ul:first-child { margin-bottom: 10px; }

	.hf-nav-resources-inner { flex-direction: column; gap: 24px; }
	.hf-nav-resources-photos-col,
	.hf-nav-resources-right-col { flex: none; width: 100%; }

	.hf-nav-col-title,
	.hf-nav-home-link,
	.hf-nav-btn--contact { font-size: 18px; }
	.hf-nav-about-label { font-size: 18px; }

	.hf-nav-tab-btn { font-size: 14px; padding: 10px 12px; }
	.hf-nav-section-title { font-size: 16px; }
}

/* Small mobile – keep lang switcher but shrink further */
@media (max-width: 480px) {
	.hf-nav-header-inner { gap: 6px; padding: 0 12px; }
	.hf-nav-header-actions { gap: 6px; }
	.hf-nav-logo img { width: 95px; }

	/* Lang switcher stays visible but compact */
	.hf-nav-lang {
		display: flex;
		width: 66px;
		height: 25px;
		padding: 2px;
	}
	.hf-nav-lang .hf-nav-lang-link { font-size: 11px; }
	.hf-nav-lang .hf-nav-lang-link.hf-nav-lang-link-on {
		width: 30px;
		height: 19px;
	}

	.hf-nav-btn--call {
		height: 28px;
		padding: 2px 8px;
		font-size: 13px;
	}
	.hf-nav-toggle { width: 28px; height: 28px; }
	.hf-nav-tab-btn { min-width: 0; font-size: 13px; padding: 8px 10px; }
}

/* Extra small – 320px */
@media (max-width: 360px) {
	.hf-nav-header-inner { padding: 0 10px; gap: 5px; }
	.hf-nav-header-actions { gap: 5px; }
	.hf-nav-logo img { width: 82px; }

	.hf-nav-btn--call {
		height: 26px;
		padding: 2px 6px;
		font-size: 12px;
	}
	.hf-nav-search-trigger { width: 22px; height: 22px; }
	.hf-nav-toggle { width: 26px; height: 26px; }

	.hf-nav-lang {
		width: 58px;
		height: 22px;
		padding: 2px;
	}
	.hf-nav-lang .hf-nav-lang-link { font-size: 10px; }
	.hf-nav-lang .hf-nav-lang-link.hf-nav-lang-link-on {
		width: 26px;
		height: 16px;
	}
}