/* Desktop main menu dropdowns (>=800px), 2026-11-05.
   Before: hovering a section revealed its sub-links as a loose second row of text across the header, anchored to the
   left of the menu (not to the item), and moving the mouse down crossed other sections and swapped the row.
   Now: each section opens its own panel directly under it — white, gold top rule, vertical list, ▾ on sections that
   have sub-links. Opens on hover or keyboard focus; closing waits 0.25 s so the pointer can travel into the panel.
   Phones keep the drawer (sf-mobile-header.css). Loaded from functions.php (wp_head). */
@media (min-width: 800px) {
	/* the city strip below the header has z-index 100000; the open panel must sit above it */
	header.header { z-index: 100001; }
	.header .navigation .menu > li { position: relative; }
	/* room for the ▾ markers (the last item used to run under the 搜尋 button) */
	.header .navigation .menu > li > a { padding-left: 18px !important; padding-right: 18px !important; }
	.header .navigation .menu > li.menu-item-has-children > a::after {
		content: ""; display: inline-block; width: 0; height: 0; margin: 0 0 3px 6px; vertical-align: middle;
		border-style: solid; border-width: 5px 4px 0 4px; border-color: currentColor transparent transparent transparent; opacity: .7;
	}
	.header .navigation .menu > li > ul.sub-menu {
		position: absolute; top: 100%; left: 50%; z-index: 1000; display: block; width: auto; min-width: 168px;
		margin: 0; padding: 8px 0; background: #fff; border-top: 3px solid #f8c623; border-radius: 0;
		box-shadow: 0 10px 28px rgba(16, 24, 48, .18); transform: translate(-50%, 6px);
		visibility: hidden; opacity: 0; pointer-events: none;
		transition: opacity .15s ease, transform .15s ease, visibility 0s linear .25s;
		transition-delay: .25s;   /* closing waits, so the pointer can move into the panel */
	}
	/* invisible bridge over the gap between the section name and its panel */
	.header .navigation .menu > li > ul.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
	.header .navigation .menu > li:hover > ul.sub-menu,
	.header .navigation .menu > li:focus-within > ul.sub-menu,
	.header .navigation .menu > li.sfn-open > ul.sub-menu {
		visibility: visible; opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
		transition: opacity .15s ease, transform .15s ease, visibility 0s;
		transition-delay: .06s;
	}
	.header .navigation .menu > li.sfn-closed > ul.sub-menu { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
	.header .navigation .menu > li > ul.sub-menu > li { float: none; display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; }
	.header .navigation .menu > li > ul.sub-menu > li > a {
		display: block; margin: 0; padding: 9px 20px !important; font-size: 16px;   /* !important: an old first-child rule added 25px */ font-weight: 500; line-height: 1.4;
		color: #1d2230 !important; background: none; white-space: nowrap; text-align: left; text-decoration: none; border: 0;
	}
	.header .navigation .menu > li > ul.sub-menu > li > a:hover,
	.header .navigation .menu > li > ul.sub-menu > li > a:focus-visible { color: #192f65 !important; background: #f1f4fa; outline: none; box-shadow: inset 3px 0 0 #192f65; }
	.header .navigation .menu > li > ul.sub-menu > li.current-menu-item > a { color: #192f65 !important; font-weight: 700; }
	@media (prefers-reduced-motion: reduce) { .header .navigation .menu > li > ul.sub-menu { transition: none; transform: translate(-50%, 0); } }
}

/* 2026-11-07: with the old second row of sub-links gone, the menu and 搜尋 sat in the top half of the header band.
   Move them down to the logo's centre line, and nudge the menu right so it sits midway between the logo and 搜尋. */
@media (min-width: 800px) {
	.header .nav_row .navigation-wrap { padding-top: 16px; }
	.header .nav_row .navigation .search.sf-sbox { top: 18px; }   /* sf-mobile-header.css puts it at 2px; same 16px shift */
}
@media (min-width: 800px) and (max-width: 1023px) {
	/* narrower screens: tighter items so 商品推薦 does not run under 搜尋 */
	.header .navigation .menu > li > a { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (min-width: 1024px) {
	.header .nav_row .navigation .menu { margin-left: 21px; }
}