/*
Theme Name:   Bricks Child — Nha khoa Toàn Mỹ
Theme URI:    https://toanmydentistry.com
Description:  Bricks child theme for Nha khoa Toàn Mỹ (Cao Lãnh, Đồng Tháp).
Author:       Nha khoa Toàn Mỹ
Version:      1.0.0
Template:     bricks
Text Domain:  bricks-child
*/

/* Bricks nav-menu alignment & responsive styling for Nha khoa Toàn Mỹ header */
.brxe-nav-menu.tm-nav {
	margin: 0;
}

.brxe-nav-menu.tm-nav .bricks-nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.brxe-nav-menu.tm-nav .bricks-nav-menu > .menu-item > a {
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: background 0.2s, color 0.2s;
	text-decoration: none;
}

.brxe-nav-menu.tm-nav .bricks-nav-menu > .menu-item > a:hover,
.brxe-nav-menu.tm-nav .bricks-nav-menu > .current-menu-item > a,
.brxe-nav-menu.tm-nav .bricks-nav-menu > .current-menu-ancestor > a {
	color: var(--teal);
	background: var(--mint);
}

.brxe-nav-menu.tm-nav .bricks-nav-menu .sub-menu {
	min-width: 280px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 10px;
}

.brxe-nav-menu.tm-nav .bricks-nav-menu .sub-menu .menu-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	font-size: 14px;
	color: var(--ink-2);
	font-weight: 500;
	text-decoration: none;
}

.brxe-nav-menu.tm-nav .bricks-nav-menu .sub-menu .menu-item a:hover,
.brxe-nav-menu.tm-nav .bricks-nav-menu .sub-menu .current-menu-item > a {
	background: var(--mint);
	color: var(--teal);
}

/* Claude QA 23/10/2026: Bricks rendered #brx-header as position:fixed → it covered the top of every page (breadcrumb, hero eyebrow).
   Sticky instead; the 40px topbar scrolls away, the main bar stays (same as the demo). */
#brx-header{position:sticky!important;top:-40px;z-index:50}
@media (max-width:991px){#brx-header{top:0}}
@media (min-width:992px){.tm-nav a,.tm-nav .brx-submenu-toggle>*{white-space:nowrap}}
.tm-nav .bricks-mobile-menu a{color:var(--ink,#0E2238);font-weight:500;white-space:normal}
.tm-nav .bricks-mobile-menu .sub-menu a{color:var(--ink-2,#2B3D52);font-weight:400}
/* Claude QA: logo img collapsed to 0px inside the flex .tm-logo box */
.tm-logo img{width:auto!important;height:52px;max-width:none}
@media (max-width:991px){.tm-logo img{height:42px}}
/* Claude QA: demo CSS hides .nav ≤1100 — that also hid Bricks' own burger. Keep the nav element, Bricks hides the desktop list itself. */
@media (max-width:991px){
  .brxe-nav-menu.tm-nav{display:flex!important;align-items:center;margin-left:auto}
  .tm-nav .bricks-mobile-menu-toggle{display:block!important;width:30px;height:22px;color:var(--ink,#0E2238)}
}
/* Claude QA: backdrop-filter on the header turns it into the containing block of Bricks' fixed mobile menu
   (playbook docs/23 trap) → menu opened inside the header and pushed the page sideways. Blur moved to a pseudo-element. */
.tm-site-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important;position:relative}
.tm-site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}