/*
 * Phase 07A — P2 UX fixes (Visual QA 06/10/2026). Project-owned CSS, loaded by inc/assets.php.
 * One block per finding; each block can be removed on its own.
 */

/* ---------- C-01  Mobile contact bar ----------------------------------------
 * The Button Contact VR plugin stacks 4 floating buttons at the left edge and
 * covers content on phones. Up to 849px (the theme's mobile-header breakpoint)
 * the same 4 links become one fixed bar at the bottom. Desktop is untouched.
 * Links, phone number and Zalo number are the plugin's own — not changed here. */
@media (max-width: 849px) {
	body {
		padding-bottom: calc(61px + env(safe-area-inset-bottom, 0px));
	}
	body #button-contact-vr {
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		transform: none;
		z-index: 1040; /* below the off-canvas menu and lightbox (1042+) */
		background: #fff;
		border-top: 1px solid #e3e6ea;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	body #button-contact-vr #gom-all-in-one {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	body #button-contact-vr .button-contact {
		min-width: 0;
		margin: 0;
	}
	body #button-contact-vr .button-contact .phone-vr {
		width: auto;
		height: 60px;
	}
	body #button-contact-vr .phone-vr-circle-fill,
	body #button-contact-vr .phone-bar {
		display: none;
	}
	body #button-contact-vr .button-contact .phone-vr-img-circle {
		position: static;
		display: block;
		width: auto;
		height: 60px;
		line-height: 1;
		border-radius: 0;
		overflow: visible;
		background: none;
		animation: none;
	}
	body #button-contact-vr .phone-vr-img-circle a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		height: 60px;
		line-height: 1;
		color: #1a1f2c;
		font-size: 12px;
		font-weight: 600;
		text-decoration: none;
	}
	body #button-contact-vr .phone-vr-img-circle img {
		position: static;
		transform: none;
		box-sizing: border-box;
		width: 30px;
		height: 30px;
		max-width: none;
		max-height: none;
		padding: 6px;
		border-radius: 50%;
		object-fit: contain;
	}
	body #button-contact-vr #map-vr img { background-color: #e60808; }
	body #button-contact-vr #fanpage-vr img { background-color: #1877f2; }
	body #button-contact-vr #zalo-vr img { background-color: #2196f3; }
	body #button-contact-vr #phone-vr img { background-color: #26bfe9; }
	body #button-contact-vr #map-vr a::after { content: "Chỉ đường"; }
	body #button-contact-vr #fanpage-vr a::after { content: "Facebook"; }
	body #button-contact-vr #zalo-vr a::after { content: "Zalo"; }
	body #button-contact-vr #phone-vr a::after { content: "Gọi điện"; }
	/* off-canvas menu / filter panel open: take the bar out of the way */
	html.has-off-canvas body #button-contact-vr {
		display: none;
	}
}

/* ---------- G-02  Pagination on narrow screens -------------------------------
 * Additional CSS turns ul.page-numbers into a one-line, 40px-high inline-flex
 * box; with 9+ items it is wider than a 360px screen and the "next" arrow is
 * cut off. Let the list wrap, grow in height and stay inside its container. */
@media (max-width: 849px) {
	ul.page-numbers.nav-pagination {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
		box-sizing: border-box;
		max-width: 100%;
		height: auto;
		padding-top: 6px;
		padding-bottom: 6px;
	}
}

/* ---------- C-02  Table-of-contents targets vs. sticky header ---------------
 * Sticky header is 146px high on desktop and 102px on mobile; targets stop
 * 16-24px below it. Applies to every heading target inside post/page content.
 * Needs the TOC plugin's own "Smooth Scroll" switched off, otherwise its
 * script positions the target itself and ignores this rule. */
.entry-content :is(h1, h2, h3, h4, h5, h6) > span[id],
.entry-content :is(h1, h2, h3, h4, h5, h6)[id] {
	scroll-margin-top: 162px;
}
@media (max-width: 849px) {
	.entry-content :is(h1, h2, h3, h4, h5, h6) > span[id],
	.entry-content :is(h1, h2, h3, h4, h5, h6)[id] {
		scroll-margin-top: 126px;
	}
}

/* ---------- C-03  Links inside article body ----------------------------------
 * Theme default: same dark colour as text, no underline. Scope: single posts,
 * links inside running text (paragraphs, lists, tables, quotes, captions).
 * Headings, buttons, the table of contents and share icons keep their look. */
.single-post .entry-content :is(p, li, td, th, dd, blockquote, figcaption) a:not(.button) {
	color: #00668a;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.single-post .entry-content :is(p, li, td, th, dd, blockquote, figcaption) a:not(.button):hover {
	color: #004a66;
	text-decoration-thickness: 2px;
}
.single-post .entry-content :is(p, li, td, th, dd, blockquote, figcaption) a:not(.button):focus-visible {
	outline: 2px solid #00668a;
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- G-01  Contact buttons for products without a price --------------
 * Markup comes from glory_price_contact_cta() in inc/woocommerce.php. */
.glory-contact-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 18px;
}
.glory-contact-cta .button {
	margin: 0;
}
@media (max-width: 549px) {
	.glory-contact-cta .button {
		flex: 1 1 140px;
	}
}