/*
 * NTWOOD site chrome — header, mobile nav panel, footer, floating contact dock.
 *
 * ── WHY ONE FILE, LOADED ON EVERY PAGE ──
 *
 * The chrome renders from two places: the three Elementor widgets
 * (`ntw_site_header`, `ntw_site_footer`, `ntw_contact_dock`) and the theme's own
 * header.php / footer.php fallback, which is what runs before anything is seeded
 * and if Elementor Pro is absent. Both emit the SAME markup, so both need the
 * same stylesheet — putting these rules in per-widget CSS would leave the
 * fallback chrome unstyled on a brand-new install, which is the first thing
 * anyone sees.
 *
 * Handle `ntw-chrome`. The theme registers it; build.sh copies this file to
 * newtechwood-widgets/assets/css/fallback/ and the plugin registers the same
 * handle behind a `wp_style_is` guard, so it loads once either way.
 *
 * Depends on tokens.css + core.css.
 */

/* =====================================================================
 * HEADER
 * ================================================================== */

.ntw-header {
	position: fixed; inset: 0 0 auto; z-index: 80; padding-block: 18px;
	border-bottom: 1px solid transparent;
	transition: background .35s, padding .35s, border-color .35s;
}

/*
 * The scrim. Without it the nav sits on whatever the hero photograph happens to
 * be, and the catalog photography is bright timber in sunlight. Measured with
 * the scrim over the worst case: 8.8:1 for the nav links.
 *
 * NOT `mix-blend-mode: difference`, which was tried on a sibling project: it
 * makes the logo unreadable over light photography and inverts the nav's own
 * hover background.
 */
.ntw-header::before {
	content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(13, 17, 14, .7), rgba(13, 17, 14, 0));
	transition: opacity .35s;
}
.ntw-header.is-stuck {
	background: rgba(13, 17, 14, .84);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	padding-block: 10px; border-color: var(--line);
}
.ntw-header.is-stuck::before { opacity: 0; }

.ntw-header__in { display: flex; align-items: center; gap: 28px; }

/*
 * TWO classes on the image, deliberately. A one-class height cap (0,1,0) loses to
 * any plugin rule shaped `.plugin img { height: auto }` (0,1,1) — hoangsao's logo
 * rendered at its natural 128px inside a 75px bar on exactly the pages where one
 * such rule applied, and was correct everywhere else.
 */
.ntw-logo { display: inline-flex; align-items: center; }
.ntw-logo .ntw-logo__img { height: 42px; width: auto; }

/* The typographic lockup, used when Site Identity has no logo file. It is never
   an empty <img>: a broken placeholder is worse than no image at all. */
.ntw-logo__mark { display: inline-flex; align-items: baseline; gap: 2px; font: 500 1.45rem/1 var(--f-display); letter-spacing: -.02em; color: var(--mist); }
.ntw-logo__mark b { font-weight: 500; color: var(--green); }
.ntw-logo__sub { display: block; margin-top: 4px; font: 500 8.5px/1 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: var(--mist-faint); }

.ntw-nav { margin-left: auto; }
.ntw-nav ul { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.ntw-nav a {
	position: relative; font-size: 14px; letter-spacing: .04em;
	color: var(--mist-dim); transition: color .25s;
}
.ntw-nav a::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
	background: var(--green); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease);
}
.ntw-nav a:hover { color: var(--mist); }
.ntw-nav a:hover::after { transform: scaleX(1); }

/*
 * The current-item underline keys off `[aria-current]`, which WordPress sets for
 * a genuine current page. On a one-page section nav it must be driven from the
 * slide in view instead — see inc/menus.php. Never key off `.current-menu-item`:
 * WordPress marks EVERY same-page anchor as current, so a nav of anchors renders
 * entirely highlighted at rest.
 */
.ntw-nav a[aria-current] { color: var(--mist); }
.ntw-nav a[aria-current]::after { transform: scaleX(1); }

.ntw-header__cta { display: flex; align-items: center; gap: 10px; }
.ntw-header__cta .ntw-btn { min-height: 42px; padding: 0 18px; font-size: 14px; }

.ntw-burger {
	display: none; position: relative; width: 44px; height: 44px;
	border-radius: 50%; border: 1px solid var(--line-2);
}
.ntw-burger span, .ntw-burger span::before, .ntw-burger span::after {
	position: absolute; left: 13px; width: 18px; height: 1.5px; background: var(--mist); content: '';
	transition: transform .3s var(--ease), opacity .2s;
}
.ntw-burger span { top: 21px; }
.ntw-burger span::before { left: 0; top: -6px; }
.ntw-burger span::after { left: 0; top: 6px; }
.ntw-burger[aria-expanded="true"] span { background: transparent; }
.ntw-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.ntw-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* =====================================================================
 * P6 — HEADER SEARCH + PRODUCT MEGA PANEL
 * ================================================================== */

/*
 * A round icon button. `background: transparent` is NOT optional: a bare <button>
 * inherits the user-agent ButtonFace fill — a pale disc with an unreadable glyph on
 * the dark bar. Same trap hoangsao recorded for .hs-iconbtn.
 */
.ntw-iconbtn {
	display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; flex: none;
	border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
	color: var(--mist); cursor: pointer; transition: border-color .25s, color .25s;
}
.ntw-iconbtn:hover, .ntw-iconbtn[aria-expanded="true"] { border-color: var(--mist); }
.ntw-iconbtn i { font-size: 15px; }

/* The toggle exists only WITH JavaScript; without it the form shows inline. */
.ntw-searchtoggle { display: none; }
.ntw-js .ntw-searchtoggle { display: inline-grid; }

.ntw-header__in { position: relative; }
.ntw-hsearch { display: flex; align-items: center; gap: 6px; margin: 0; }
.ntw-hsearch__in {
	flex: 1 1 auto; min-width: 0; width: 100%; height: 42px; padding: 0 16px;
	border: 1px solid var(--line-2); border-radius: 999px; background: var(--ink-2);
	color: var(--mist); font: 400 14px/1 var(--f-body);
}
.ntw-hsearch__in::placeholder { color: var(--mist-faint); }
.ntw-hsearch__in:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.ntw-hsearch__go { color: var(--green); }
/* No JS: a compact inline field in the bar (desktop only — see RESPONSIVE). */
.ntw-header .ntw-hsearch { width: 220px; }
/*
 * JS: a panel under the bar, RIGHT-anchored and never wider than the viewport.
 * Left-anchored it would hang off the right edge on a narrow screen, unreachable
 * because the bar is fixed.
 */
.ntw-js .ntw-header .ntw-hsearch {
	display: none; position: absolute; top: calc(100% + 12px); right: var(--pad);
	width: min(440px, calc(100vw - 2 * var(--pad))); padding: 10px;
	border: 1px solid var(--line); border-radius: 18px; background-color: var(--ink-3);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.ntw-js .ntw-header .ntw-hsearch.is-open { display: flex; }

/* The mega panel. Every nav li is a positioning context for its panel. */
.ntw-nav li { position: relative; }
.ntw-nav__item--mega { display: flex; align-items: center; gap: 2px; }
.ntw-nav__more {
	display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: var(--mist-dim); cursor: pointer;
}
.ntw-nav__more:hover { color: var(--mist); }
.ntw-nav__more i { font-size: 11px; transition: transform .25s var(--ease); }
.ntw-nav__item--mega.is-open .ntw-nav__more i { transform: rotate(180deg); }
.ntw-mega {
	position: absolute; top: calc(100% + 20px); left: -16px; z-index: 2;
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px;
	width: min(560px, calc(100vw - 2 * var(--pad))); padding: 24px 28px;
	border: 1px solid var(--line); border-radius: 18px; background-color: var(--ink-3);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
/* A bridge over the 20px gap, so the pointer can travel from the item to the panel. */
.ntw-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.ntw-nav__item--mega:hover > .ntw-mega,
.ntw-nav__item--mega.is-open > .ntw-mega {
	opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease);
}
.ntw-nav .ntw-mega ul { display: grid; gap: 12px; }
.ntw-mega__title { margin: 0 0 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist-faint); }
.ntw-nav .ntw-mega a { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--mist-dim); }
.ntw-mega__n { font-size: 12px; color: var(--mist-faint); white-space: nowrap; }

/* A submenu the client built in wp-admin gets a plain dropdown. */
.ntw-nav .sub-menu {
	position: absolute; top: calc(100% + 16px); left: -16px; z-index: 2;
	display: grid; gap: 12px; min-width: 220px; padding: 18px 20px;
	border: 1px solid var(--line); border-radius: 14px; background-color: var(--ink-3);
	opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
}
.ntw-nav li:hover > .sub-menu,
.ntw-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transition: opacity .25s; }

/* =====================================================================
 * FOOTER
 * ================================================================== */

.ntw-footer {
	border-top: 1px solid var(--line); padding-block: 56px 110px;
	color: var(--mist-dim); font-size: 14px;
}
/* the bottom padding leaves room for the dock, which is fixed above it */
.ntw-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ntw-footer h4 {
	margin: 0 0 14px; font: 500 12px/1 var(--f-body);
	letter-spacing: .2em; text-transform: uppercase; color: var(--mist-faint);
}
.ntw-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ntw-footer a:hover { color: var(--green); }
.ntw-footer .ntw-logo .ntw-logo__img { height: 52px; margin-bottom: 16px; }
.ntw-footer__legal {
	margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
	font-size: 12.5px; color: var(--mist-faint);
}

/* =====================================================================
 * FLOATING CONTACT DOCK
 *
 * A round toggle in one bottom corner that opens a pill of channels beside it.
 *
 * ── THE CORNER IS A SETTING, AND THAT IS NOT GOLD-PLATING ──
 *
 * Elementor Pro ships its own Floating Buttons feature at `z-index: 10000`, and
 * the Einna chatbox launcher (einna/) sits at 2147483647. This dock is at 85 and
 * loses to both. When one of those owns the right-hand corner, the only fix that
 * does not involve an unwinnable z-index war is to move to the other corner.
 * ================================================================== */

.ntw-cdock {
	--cd-edge: 24px; --cd-size: 58px;
	position: fixed; z-index: 85;
	bottom: calc(var(--cd-edge) + env(safe-area-inset-bottom));
	right: calc(var(--cd-edge) + env(safe-area-inset-right));
	display: flex; flex-direction: row-reverse; align-items: center; gap: 10px;
}

/*
 * `row-reverse` keeps the toggle on the OUTSIDE so the pill opens inward, toward
 * the middle of the screen. Without it the pill expands past the viewport edge —
 * invisible in the markup, and only visible at the moment it is clicked.
 */
.ntw-cdock--left {
	right: auto;
	left: calc(var(--cd-edge) + env(safe-area-inset-left));
	flex-direction: row;
}
.ntw-cdock--left .ntw-cdock__list { transform-origin: left center; justify-content: flex-start; }
.ntw-cdock--left .ntw-cdock__list { transform: translateX(-12px) scale(.96); }
.ntw-cdock--left.is-open .ntw-cdock__list { transform: none; }

/* the full-screen mobile menu owns the screen while it is open */
.ntw-nav-open .ntw-cdock { visibility: hidden; }

.ntw-cdock__toggle {
	position: relative; flex: none; width: var(--cd-size); height: var(--cd-size);
	border-radius: 50%; display: grid; place-items: center;
	background: var(--green-btn); color: #fff; font-size: 21px;
	box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--mist), 0 14px 32px -10px rgba(23, 130, 0, .7);
	transition: background .25s, transform .3s var(--ease);
}
.ntw-cdock__toggle:hover { background: var(--green-btn-hot); transform: scale(1.05); }
.ntw-cdock__toggle:focus-visible { outline-offset: 6px; border-radius: 50%; }
.ntw-cdock__toggle i { grid-area: 1 / 1; transition: opacity .2s, transform .3s var(--ease); }
.ntw-cdock__off { opacity: 0; transform: rotate(-90deg); }
.ntw-cdock.is-open .ntw-cdock__on { opacity: 0; transform: rotate(90deg); }
.ntw-cdock.is-open .ntw-cdock__off { opacity: 1; transform: none; }

/* Two soft rings after load, then still. A dock that pulses forever is noise. */
.ntw-anim .ntw-cdock__toggle::after {
	content: ''; position: absolute; inset: -5px; border-radius: 50%;
	border: 2px solid var(--green); opacity: 0; pointer-events: none;
	animation: ntw-cd-ring 2.4s var(--ease) 2.2s 2;
}
@keyframes ntw-cd-ring {
	0% { opacity: .8; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.45); }
}

/*
 * The pill.
 *
 * `wrap-reverse`: if the channels do not fit one row (all eight on a phone) the
 * overflow wraps UPWARD, keeping the first row beside the toggle.
 *
 * Hidden with `visibility`, not `display`, so the fade can run — and so the
 * hidden links leave the tab order, which `opacity: 0` alone would not do.
 */
.ntw-cdock__list {
	display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px;
	margin: 0; padding: 8px; list-style: none;
	max-width: calc(100vw - 2 * var(--cd-edge) - var(--cd-size) - 10px);
	border-radius: 30px; background: rgba(19, 25, 20, .94); border: 1px solid var(--line-2);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
	opacity: 0; visibility: hidden;
	transform: translateX(12px) scale(.96); transform-origin: right center;
	transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s;
}
.ntw-cdock.is-open .ntw-cdock__list {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .25s, transform .35s var(--ease);
}

.ntw-cdock__btn {
	position: relative; display: grid; place-items: center; width: 44px; height: 44px;
	border-radius: 50%; border: 1px solid var(--line-2); color: var(--mist); font-size: 16px;
	transition: background .2s, border-color .2s, transform .25s var(--ease);
}
.ntw-cdock__btn:hover { background: rgba(233, 237, 230, .08); border-color: var(--mist-dim); transform: translateY(-2px); }
.ntw-cdock__btn--tel { background: var(--green-btn); border-color: var(--green-btn); color: #fff; }
.ntw-cdock__btn--tel:hover { background: var(--green-btn-hot); border-color: var(--green-btn-hot); }
.ntw-cdock__btn--zalo { background: #0068FF; border-color: #0068FF; color: #fff; }
.ntw-cdock__btn--zalo:hover { background: #0057D6; border-color: #0057D6; }
.ntw-cdock__btn--facebook { background: #1877F2; border-color: #1877F2; color: #fff; }
.ntw-cdock__btn--messenger { background: #0084FF; border-color: #0084FF; color: #fff; }
.ntw-cdock__btn--youtube { background: #FF0000; border-color: #FF0000; color: #fff; }
.ntw-cdock__btn--tiktok { background: #010101; border-color: var(--line-2); color: #fff; }
.ntw-cdock__btn--instagram { background: #E4405F; border-color: #E4405F; color: #fff; }

/* The label, for pointer users only; screen readers already have aria-label. */
@media (hover: hover) {
	.ntw-cdock__btn::after {
		content: attr(data-tip); position: absolute; bottom: calc(100% + 12px); left: 50%;
		padding: 6px 10px; border-radius: 8px; background: var(--mist); color: var(--ink);
		font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none;
		opacity: 0; transform: translate(-50%, 4px);
		transition: opacity .2s, transform .25s var(--ease);
	}
	.ntw-cdock__btn:hover::after, .ntw-cdock__btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
}

/* =====================================================================
 * RESPONSIVE
 * ================================================================== */

@media (max-width: 960px) {
	/*
	 * `backdrop-filter` makes the header the containing block of its fixed
	 * children, which would shrink the full-screen nav panel to the header's own
	 * height. Dropping it while the panel is open is the fix.
	 */
	.ntw-nav-open .ntw-header {
		backdrop-filter: none; -webkit-backdrop-filter: none;
		background: transparent; border-color: transparent;
	}
	.ntw-burger { display: block; }
	.ntw-header__cta .ntw-btn--ghost { display: none; }
	.ntw-header__cta { margin-left: auto; }
	/*
	 * NEGATIVE z-index on the open panel. The panel is a later DOM sibling than
	 * the logo, so at `auto` it covers the logo and the burger that closes it. It
	 * is still above the page because the header itself is a stacking context.
	 */
	.ntw-nav {
		position: fixed; inset: 0; z-index: -1; margin: 0;
		display: grid; place-items: center; background: rgba(13, 17, 14, .97);
		opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
	}
	.ntw-nav.is-open { opacity: 1; visibility: visible; transition: opacity .35s; }
	.ntw-nav ul { flex-direction: column; align-items: center; gap: 26px; }
	.ntw-nav a { font: 500 1.5rem/1.3 var(--f-display); color: var(--mist); letter-spacing: -.01em; }
	.ntw-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	/* P6: the full-screen panel can now be taller than a phone (an open mega). */
	.ntw-nav { overflow-y: auto; padding-block: 90px 40px; }
	/* No JS: the burger is JS-driven anyway, so the inline field gives way. */
	.ntw-header .ntw-hsearch { display: none; }
	/* The mega column sits INLINE in the panel, collapsed until its toggle opens it. */
	.ntw-nav__item--mega { flex-wrap: wrap; justify-content: center; }
	.ntw-mega {
		position: static; flex-basis: 100%; display: none; width: auto; padding: 14px 0 0;
		grid-auto-flow: row; gap: 18px; border: 0; background: transparent; box-shadow: none;
		opacity: 1; visibility: visible; transform: none; transition: none; text-align: center;
	}
	.ntw-mega::before { content: none; }
	.ntw-nav__item--mega:hover > .ntw-mega { display: none; }
	.ntw-nav__item--mega.is-open > .ntw-mega { display: grid; }
	.ntw-nav .ntw-mega ul { gap: 10px; justify-items: center; }
	.ntw-nav .ntw-mega a { font: 400 1rem/1.4 var(--f-body); color: var(--mist-dim); }
	.ntw-nav__more { width: 36px; height: 36px; }
	.ntw-nav .sub-menu { position: static; display: grid; gap: 10px; padding: 12px 0 0; border: 0; background: transparent; opacity: 1; visibility: visible; justify-items: center; }
	.ntw-nav .sub-menu a { font: 400 1rem/1.4 var(--f-body); }
}

@media (max-width: 400px) {
	/* 320px: logo + search + quote + burger must fit one row with no overflow. */
	.ntw-header__in { gap: 12px; }
	.ntw-header__cta { gap: 6px; }
	.ntw-iconbtn { width: 36px; height: 36px; }
	.ntw-burger { width: 40px; height: 40px; }
	.ntw-burger span { left: 11px; top: 19px; }
}

@media (max-width: 720px) {
	.ntw-header__cta .ntw-btn--green { min-height: 40px; padding: 0 14px; }
	.ntw-header__cta .ntw-btn--green .ntw-btn__txt { display: none; }
	.ntw-logo .ntw-logo__img { height: 34px; }
	.ntw-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.ntw-cdock { --cd-edge: 16px; --cd-size: 52px; }
	/* the toast is centred, the dock is bottom-right: on a phone they overlap */
	.ntw-toast { bottom: 88px; }
}