/**
 * Header / footer layout fixes for the UAE HFB templates.
 *
 * Why a plugin stylesheet: on this site's Elementor 4.3.5, several
 * panel controls (container direction switch, typography popover)
 * proved unreachable for both automation and repeated manual tries,
 * so the header (post 2369) and footer (post 2376) templates carry
 * structure and content only, and their layout lives here.
 *
 * Header selectors use the elements' stable data-id classes.
 * Footer selectors are structural (the footer widgets are placed
 * after this file ships), scoped under .elementor-2376.
 */

/* ---------- Header (post 2369) ---------- */

/* Outer container: CSS grid so the two site-name headings can stack
   in one column while logo, menu, switcher and button share the row. */
.elementor-2369 .elementor-element-0121b5a {
	display: grid !important;
	grid-template-columns: auto auto 1fr auto auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 1px;
	align-items: center;
	padding: 18px 48px !important;
}

.elementor-2369 .elementor-element-2271ddf { /* logo image */
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
}

/* Logo size (v0.2.2, user feedback 2026-10-15): the widget set no
   explicit size, so the mark rendered smaller than the two-line
   site name. Pin it at 56px — a touch taller than the name block. */
.elementor-2369 .elementor-element-2271ddf img {
	width: 56px !important;
	height: 56px !important;
	max-width: none;
	object-fit: contain;
}

.elementor-2369 .elementor-element-6a32c50 { /* site name, zh line */
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0;
}

.elementor-2369 .elementor-element-3cbb40f { /* site name, EN line */
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin: 0;
}

.elementor-2369 .elementor-element-eef8bc0 { /* nav menu */
	grid-column: 3;
	grid-row: 1 / 3;
	justify-self: end;
	align-self: center;
}

.elementor-2369 .elementor-element-ccf87a4 { /* language switcher */
	grid-column: 4;
	grid-row: 1 / 3;
	align-self: center;
}

.elementor-2369 .elementor-element-66022f0 { /* subscribe button */
	grid-column: 5;
	grid-row: 1 / 3;
	align-self: center;
}

.elementor-2369 .elementor-element-6a32c50 .elementor-heading-title {
	font-size: 21px !important;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fr-ink);
}

.elementor-2369 .elementor-element-3cbb40f .elementor-heading-title {
	font-size: 11px !important;
	font-weight: 500;
	letter-spacing: .18em;
	line-height: 1.3;
	color: var(--fr-muted);
}

.elementor-2369 a.hfe-menu-item:hover {
	color: var(--fr-accent) !important;
}

/* Mobile header (Design Bible C02): keep the desktop grid, just
   re-track it — brand zone (logo + name + subscribe, tagline on
   its own slim line) over a nav zone (menu links left, language
   switch right). No hamburger: the HFE menus are forced open by
   the max-width:1024px block further down. */
@media (max-width: 767px) {
	.elementor-2369 .elementor-element-0121b5a {
		grid-template-columns: 48px 1fr auto;
		grid-template-rows: auto auto auto;
		column-gap: 12px;
		row-gap: 4px;
		padding: 14px 20px 12px !important;
	}

	.elementor-2369 .elementor-element-2271ddf { /* logo */
		grid-column: 1;
		grid-row: 1;
	}

	.elementor-2369 .elementor-element-2271ddf img {
		width: 48px !important;
		height: 48px !important;
	}

	.elementor-2369 .elementor-element-6a32c50 { /* site name */
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	.elementor-2369 .elementor-element-66022f0 { /* subscribe */
		grid-column: 3;
		grid-row: 1;
		align-self: center;
	}

	.elementor-2369 .elementor-element-3cbb40f { /* tagline */
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.elementor-2369 .elementor-element-3cbb40f .elementor-heading-title {
		font-size: 10px !important;
		white-space: nowrap;
	}

	.elementor-2369 .elementor-element-eef8bc0 { /* nav menu */
		grid-column: 1 / 3;
		grid-row: 3;
		justify-self: start;
		align-self: center;
		margin-top: 8px;
	}

	.elementor-2369 .elementor-element-ccf87a4 { /* language */
		grid-column: 3;
		grid-row: 3;
		justify-self: end;
		align-self: center;
		margin-top: 8px;
	}

	/* The template gives menu links 15px side padding; at phone
	   width that wraps the third link onto its own row. Tighten
	   so all three sit on the nav row. */
	.elementor-2369 .elementor-element-eef8bc0 .menu-item a.hfe-menu-item {
		padding: 6px 9px !important;
		font-size: 15px;
	}
}

/* Narrow phones (acceptance width 360px and below): the three nav
   links no longer fit the nav cell (columns 1-2) at 15px, and the
   HFE list does not wrap by default, so the links overflow into
   the language-switch cell and collide with it (QA 2026-10-23).
   Let the list wrap inside its own cell, tighten the links a
   step further, and keep each link and the language switch on a
   single line. */
@media (max-width: 560px) {
	/* The nav widget is justify-self:start (<=767px block), so it
	   sizes to its max-content — the unwrapped one-line menu —
	   and spills over the language cell no matter what flex-wrap
	   says: the flex container is never width-constrained.
	   Stretch the widget to its grid area (columns 1-2) so the
	   list gets a real width to wrap against (fix v0.9.4; the
	   v0.9.3 wrap-only attempt did not take effect for this
	   reason). */
	.elementor-2369 .elementor-element-eef8bc0 {
		min-width: 0;
		justify-self: stretch;
	}

	.elementor-2369 .elementor-element-eef8bc0 .hfe-nav-menu {
		flex-wrap: wrap !important;
		row-gap: 2px;
	}

	.elementor-2369 .elementor-element-eef8bc0 .menu-item a.hfe-menu-item {
		padding: 6px 7px !important;
		font-size: 14px;
		white-space: nowrap;
	}

	.elementor-2369 .elementor-element-ccf87a4 {
		white-space: nowrap;
	}
}

/* HFE hides every nav menu under its tablet breakpoint (1024px):
   the <nav> gets visibility:hidden + opacity:0 + height:0 and a
   hamburger toggle appears. The B design has no hamburger — not
   in the header (C02), not in the footer — so force the menus
   open and the toggles off at and below that breakpoint. Also
   kills the mobile-only white strip above the header (a top
   margin somewhere in the header stack). */
@media (max-width: 1024px) {
	.elementor-2369 .hfe-nav-menu__toggle,
	.elementor-2376 .hfe-nav-menu__toggle {
		display: none !important;
	}

	.elementor-2369 nav.hfe-nav-menu__layout-horizontal,
	.elementor-2376 nav.hfe-nav-menu__layout-vertical {
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		background: transparent !important;
	}

	.elementor-2369 .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-2376 .hfe-nav-menu__layout-vertical .hfe-nav-menu {
		visibility: visible !important;
		opacity: 1 !important;
	}

	.elementor-2369 .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-2369 .hfe-nav-menu__layout-horizontal .hfe-nav-menu li {
		width: auto !important;
	}

	/* The widget's dropdown styling also paints the list itself
	   white (background on ul/li, row borders) — with the menu
	   forced in-flow on the dark frame that reads as a white box
	   with ghost text. Strip the paint at every level; the frame
	   background shows through and the light link colours (set in
	   the dark-frame section) take over. */
	.elementor-2369 nav.hfe-nav-menu__layout-horizontal,
	.elementor-2369 .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-2369 .hfe-nav-menu__layout-horizontal .hfe-nav-menu li,
	.elementor-2369 .hfe-nav-menu__layout-horizontal a.hfe-menu-item,
	.elementor-2376 nav.hfe-nav-menu__layout-vertical,
	.elementor-2376 .hfe-nav-menu__layout-vertical .hfe-nav-menu,
	.elementor-2376 .hfe-nav-menu__layout-vertical .hfe-nav-menu li,
	.elementor-2376 .hfe-nav-menu__layout-vertical a.hfe-menu-item {
		background: transparent !important;
	}

	.elementor-2369 .hfe-nav-menu__layout-horizontal .hfe-nav-menu li,
	.elementor-2376 .hfe-nav-menu__layout-vertical .hfe-nav-menu li {
		border: none !important;
	}

	/* At the breakpoint HFE's JS also flags the <nav> as
	   hfe-dropdown, and the template's own CSS then paints each
	   link white (#fff) with a grey separator line under it —
	   the exact white bars in the owner's 2026-10-17 screenshots.
	   Those rules are not !important; override them head-on. */
	.elementor-2369 nav.hfe-dropdown .menu-item a.hfe-menu-item,
	.elementor-2369 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item,
	.elementor-2376 nav.hfe-dropdown .menu-item a.hfe-menu-item,
	.elementor-2376 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item {
		background-color: transparent !important;
	}

	.elementor-2369 nav.hfe-dropdown li.menu-item,
	.elementor-2369 nav.hfe-dropdown-expandible li.menu-item,
	.elementor-2376 nav.hfe-dropdown li.menu-item,
	.elementor-2376 nav.hfe-dropdown-expandible li.menu-item {
		border-bottom: none !important;
	}

	.elementor-2369 .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		justify-content: flex-start !important;
	}

	#masthead,
	.elementor-2369,
	.elementor-2369 .elementor-element-0121b5a {
		margin-top: 0 !important;
	}

	.elementor-2369 .elementor-element-0121b5a {
		--margin-top: 0px !important;
	}
}

/* ---------- Footer (post 2376) ---------- */

/* The footer outer container (8a50187) is a BOXED container, unlike
   the header's full-width one: Elementor wraps its children in
   .e-con-inner, and the layout has to target that inner wrapper.
   (v0.1.3 targeted the outer container's children directly and the
   row never formed — fixed in 0.1.4 against the live DOM.) */

/* Outer container: full-width background, top border, padding.
   Background/border/padding live here because the editor's style
   section for the container would not expand reliably. */
.elementor-2376 .elementor-element.elementor-element-8a50187 {
	background: var(--fr-paper);
	border-top: 1px solid var(--fr-line);
	padding: 38px 48px 44px;
}

/* Inner wrapper: CSS grid, same technique as the header.
   v0.1.4 used a flex row here: the row formed, but Elementor's own
   flex-item rules for .e-con children collapsed the groups to
   ~1-character width and left the disclosure in the same row.
   Grid tracks size the columns directly, so v0.1.5 switches. */
.elementor-2376 .elementor-element-8a50187 > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	row-gap: 28px;
	align-items: start;
}

/* Column groups: grid items; internally still a flex column
   (column title above its menu). */
.elementor-2376 .e-con-inner > .e-con {
	min-width: 0;
	flex-direction: column !important;
	gap: 10px;
}

/* Column titles */
.elementor-2376 .e-con-inner > .e-con .elementor-heading-title {
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.4;
	color: var(--fr-muted);
}

/* Footer menus: force a vertical link stack whatever layout the
   widget was saved with, and hide the hamburger toggle. */
.elementor-2376 .hfe-nav-menu__toggle {
	display: none !important;
}

.elementor-2376 ul.hfe-nav-menu {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px;
}

.elementor-2376 a.hfe-menu-item {
	color: var(--fr-ink) !important;
	font-size: 14.5px;
	line-height: 1.5;
	padding: 4px 0 !important;
}

.elementor-2376 a.hfe-menu-item:hover {
	color: var(--fr-accent) !important;
}

/* Brand mark (v0.2.2): the rabbit above the first footer column.
   The footer groups are Elementor containers with no image widget,
   so the mark is injected as a ::before flex item using the logo
   bundled with this plugin (assets/fr-logo.svg, path relative to
   this stylesheet — stays correct on any domain). */
.elementor-2376 .elementor-element-159ad4c::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	background: url("fr-logo.svg") no-repeat center / contain;
	margin-bottom: 4px;
}

/* Disclosure line (554326f): spans all grid columns, so it lands
   on its own row under the three column groups. */
.elementor-2376 .elementor-element.elementor-element-554326f {
	grid-column: 1 / -1;
}

.elementor-2376 .elementor-element-554326f .elementor-heading-title {
	font-size: 12.5px !important;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.7;
	color: var(--fr-muted);
}

@media (max-width: 767px) {
	.elementor-2376 .elementor-element.elementor-element-8a50187 {
		padding: 32px 24px 36px;
	}

	.elementor-2376 .elementor-element-8a50187 > .e-con-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.elementor-2376 .elementor-element-8a50187 > .e-con-inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/* Footer group 1's text heading duplicates the rabbit brand
	   mark on small screens and renders on top of it; the
	   ::before logo already heads the column (as on desktop,
	   where the heading is likewise not shown). */
	.elementor-2376 .elementor-element-593bfbf {
		display: none !important;
	}

	/* With the heading hidden, the group keeps its saved flex-row
	   arrangement and the menu widget slides under the ::before
	   logo — the owner's 2026-10-17 screenshot shows the rabbit
	   sitting on top of the first link (文章總覽). Force the
	   group into a column so the logo takes its own row above
	   the menu, and keep the forced-open nav in normal flow. */
	.elementor-2376 .elementor-element-159ad4c {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.elementor-2376 .elementor-element-159ad4c::before {
		flex: 0 0 auto;
		margin-bottom: 10px;
	}

	.elementor-2376 .elementor-element-159ad4c .elementor-widget-hfe-nav-menu {
		width: 100%;
		margin-top: 0 !important;
	}

	.elementor-2376 .elementor-element-159ad4c nav.hfe-nav-menu__layout-vertical {
		position: static !important;
	}
}

@media (max-width: 1024px) {
	/* Root cause of the persisting overlap (confirmed by a fresh
	   controlled render on 0.6.6): Elementor's base stylesheet
	   positions .e-con::before absolutely (it is the container's
	   background-overlay layer), so the footer brand mark never
	   enters the flow — it paints over the first flex item, the
	   menu. The base ::before rule in this plugin sets size and
	   background but never position. Force the mark back into
	   the flow at and below the tablet breakpoint, where the
	   forced-open menus live; the desktop arrangement (heading
	   widget visible, mark heading the column) is untouched. */
	.elementor-2376 .elementor-element-159ad4c::before {
		position: relative !important;
		flex: 0 0 auto;
	}
}

/* ---------- Phase 1: dark frame (design B, v0.5.0) ----------
 * Colour-only overrides: the grid/flex layout above is unchanged.
 * The frame (header + footer) goes deep charcoal; page content
 * keeps the warm-white reading surfaces until each page template
 * is rebuilt. Link states follow the B spec: normal / hover /
 * current / focus-visible are deliberately distinct. */

.elementor-2369,
.elementor-2369 .elementor-element-0121b5a {
	background: var(--fr-bg);
}

/* The header container carries an Elementor --margin-bottom: 18px
 * (outer spacing). On the dark frame that gap shows the page
 * background as a light strip between header and content — the
 * B header sits flush, so the margin goes. */
.elementor-2369 .elementor-element-0121b5a {
	--margin-bottom: 0px !important;
	margin-bottom: 0 !important;
}

.elementor-2369 .elementor-element-6a32c50 .elementor-heading-title {
	color: var(--fr-text) !important;
}

.elementor-2369 .elementor-element-3cbb40f .elementor-heading-title {
	color: var(--fr-muted) !important;
}

.elementor-2369 a.hfe-menu-item {
	color: var(--fr-text) !important;
}

.elementor-2369 a.hfe-menu-item:hover {
	color: var(--fr-accent) !important;
}

.elementor-2369 .current-menu-item > a.hfe-menu-item,
.elementor-2369 a.hfe-menu-item[aria-current="page"] {
	color: var(--fr-accent);
}

.elementor-2369 a.hfe-menu-item:focus-visible {
	outline: 2px solid var(--fr-accent);
	outline-offset: 3px;
}

/* Language switch (user directive 2026-10-16): the current
 * language reads in the coral accent ("red"), the other language
 * is a white link; hovering the link turns it coral too. */
.elementor-2369 .elementor-element-ccf87a4 .fr-lang-current {
	color: var(--fr-accent) !important;
	font-weight: 700;
}

.elementor-2369 .elementor-element-ccf87a4 .fr-lang-link {
	color: var(--fr-text) !important;
}

.elementor-2369 .elementor-element-ccf87a4 .fr-lang-link:hover {
	color: var(--fr-accent) !important;
}

.elementor-2369 .elementor-element-ccf87a4 .fr-lang-sep {
	color: var(--fr-muted);
}

.elementor-2369 .elementor-element-66022f0 .elementor-button {
	background-color: var(--fr-accent);
	color: var(--fr-bg);
}

.elementor-2369 .elementor-element-66022f0 .elementor-button:hover {
	filter: brightness(.94);
}



/* Footer frame */
.elementor-2376 .elementor-element.elementor-element-8a50187 {
	background: var(--fr-bg);
	border-top: 1px solid var(--fr-surface);
}

.elementor-2376 .e-con-inner > .e-con .elementor-heading-title {
	color: var(--fr-muted) !important;
}

.elementor-2376 a.hfe-menu-item {
	color: var(--fr-text) !important;
}

.elementor-2376 a.hfe-menu-item:hover {
	color: var(--fr-accent) !important;
}

.elementor-2376 a.hfe-menu-item:focus-visible {
	outline: 2px solid var(--fr-accent);
	outline-offset: 2px;
}

.elementor-2376 .elementor-element-554326f .elementor-heading-title {
	color: var(--fr-muted) !important;
}