/*
Theme Name:   ATLAW Child
Description:  Child theme of Astra for the ATLAW website. Presentation only; features live in the ATLAW Core plugin.
Author:       ATLAW
Template:     astra
Version:      1.0.5
Text Domain:  atlaw
*/

/**
 * Colours and fonts come from the global styles only (Elementor Global Colors /
 * Astra palette). Change them in Elementor → Site Settings or the Customizer.
 *
 * Contents: tokens · ATLAW template layout · language switcher · header ·
 * homepage sections (Elementor) · footer · CJK fallback · motion
 */

/* ---------- Tokens ---------- */
/* Same names as atlaw-core.css, so the header and Elementor sections work on pages without ATLAW widgets. */
body {
	--atlaw-primary: var(--e-global-color-primary, var(--ast-global-color-0));
	--atlaw-primary-dark: var(--ast-global-color-1, var(--atlaw-primary));
	--atlaw-heading: var(--e-global-color-secondary, var(--ast-global-color-2));
	--atlaw-text: var(--e-global-color-text, var(--ast-global-color-3));
	--atlaw-surface: var(--ast-global-color-4, Canvas);
	--atlaw-surface-alt: var(--ast-global-color-5, var(--atlaw-surface));
	--atlaw-border: var(--ast-global-color-8, currentColor);
	--atlaw-muted: color-mix(in srgb, var(--atlaw-text) 72%, transparent);
	--atlaw-heading-font: var(--e-global-typography-primary-font-family, inherit);
	--atlaw-gutter: clamp(20px, 4vw, 40px);
	--atlaw-space: clamp(56px, 8vw, 104px);
}

/* ---------- Text selection ---------- */
/* Blue, not the brand red (client request of 26/10/2026). */
::selection {
	color: #fff;
	background: #2f63d3;
}

/* ---------- Focus (whole site) ---------- */
/* Astra draws dotted outlines/borders on :focus, so a tap or click leaves a dotted box on links and
   buttons. Mouse and touch focus show nothing; keyboard focus shows one solid ring in the brand colour.
   "html body :is(...)" outweighs Astra's selectors such as ".ast-menu-toggle:focus-visible". The header
   has its own, quieter keyboard styles below (#masthead rules win by ID). */
html body :is(a, button, summary, [role="button"], [tabindex], .menu-toggle, .ast-menu-toggle):focus:not(:focus-visible) {
	outline: none;
}

html body :is(a, button, summary, [role="button"], [tabindex], .menu-toggle, .ast-menu-toggle):focus-visible {
	outline: 2px solid var(--atlaw-primary);
	outline-offset: 2px;
}

/* Fields: Astra switches the border to dotted on focus ("input[type=text]:focus"); keep it solid.
   The [type] in :is() gives this rule the weight of Astra's attribute selectors. */
html body :is(input, select, textarea, [type]):focus {
	border-style: solid;
	outline: none;
}

/* ---------- ATLAW template layout ---------- */
/* The templates are full width and bring their own containers. */
body.atlaw-template #content > .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

body.atlaw-template #primary.atlaw-page {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Pages using Elementor's "Full Width" template (Home, About Us, Contact) span the whole window,
   so section backgrounds reach the edges whatever the page's Astra container setting is. */
body.elementor-template-full-width #content > .ast-container {
	display: block;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Language switcher: [atlaw_language_switcher] ---------- */
/* Globe + "EN | VI", set apart from the menu by a hairline. */
.atlaw-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: 12px;
	padding-left: 18px;
	border-left: 1px solid var(--atlaw-border);
}

.atlaw-lang__icon {
	display: inline-flex;
	color: var(--atlaw-muted);
	transition: color 0.2s;
}

.atlaw-lang:hover .atlaw-lang__icon,
.atlaw-lang:focus-within .atlaw-lang__icon {
	color: var(--atlaw-primary);
}

.atlaw-lang ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atlaw-lang a[aria-current] {
	font-weight: 700;
}

/* Mobile header: no hairline, the switcher sits next to the menu button. */
.ast-mobile-header-wrap .atlaw-lang {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

.atlaw-lang li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	background: var(--atlaw-border);
	vertical-align: middle;
}

.atlaw-lang a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--atlaw-muted);
	transition: color 0.2s;
}

.atlaw-lang a:hover,
.atlaw-lang a[aria-current] {
	color: var(--atlaw-primary);
}

/* More than three languages: compact dropdown, no JavaScript. */
.atlaw-lang--dropdown {
	position: relative;
}

.atlaw-lang--dropdown summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--atlaw-heading);
	cursor: pointer;
	list-style: none;
}

.atlaw-lang--dropdown summary::-webkit-details-marker {
	display: none;
}

.atlaw-lang--dropdown summary::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.atlaw-lang--dropdown ul {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	flex-direction: column;
	align-items: stretch;
	min-width: 88px;
	padding: 6px 0;
	background: var(--atlaw-surface);
	border: 1px solid var(--atlaw-border);
}

.atlaw-lang--dropdown li + li::before {
	content: none;
}

/* ---------- Shared grid ---------- */
/* Astra's header and footer rows use their own container (1240px with 20px padding).
   Put them on the same grid as the content: max 1200px with the --atlaw-gutter on both sides. */
.site-header .site-primary-header-wrap,
.site-header .site-above-header-wrap,
.site-header .site-below-header-wrap,
.site-footer .ast-builder-grid-row-container-inner {
	width: min(100% - 2 * var(--atlaw-gutter), 1200px);
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Astra also caps the footer column grid at 1140px and centres it
   (".site-primary-footer-wrap[data-section] .ast-builder-grid-row"), so this needs the same weight plus one. */
.site-footer [data-section] .ast-builder-grid-row.ast-builder-footer-grid-columns {
	max-width: none;
	margin-inline: 0;
}

/* ---------- Header ---------- */
/* Structure and spacing are set in the Astra Header Builder. Here: a solid white bar with a red
   brand rule on top and a hairline below, so the menu never sits on top of page content. */
/* Pinned to the top while the page scrolls (below the admin bar when logged in). */
#masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: var(--atlaw-surface);
	border-top: 3px solid var(--atlaw-primary);
	box-shadow: 0 1px 0 var(--atlaw-border);
}

#masthead .ast-primary-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	background: var(--atlaw-surface);
	border-bottom: 0;
}

/* Under 601px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
	#masthead {
		top: 0;
	}
}

/* Fallback when the transparent header is still switched on in the Customizer. */
.ast-theme-transparent-header #masthead {
	position: sticky;
}

#masthead .main-header-menu > .menu-item > .menu-link {
	color: var(--atlaw-heading);
}

/* Keep the bar compact whatever size the uploaded logo file is. */
#masthead .custom-logo {
	width: auto;
	max-height: 56px;
}

#masthead .main-header-menu > .menu-item:hover > .menu-link,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--atlaw-primary);
}

.main-header-menu > .menu-item > .menu-link {
	position: relative;
	font-weight: 500;
}

.ast-desktop .main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	right: 1em;
	bottom: 22%;
	left: 1em;
	height: 2px;
	background: var(--atlaw-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ast-desktop .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-item > .menu-link::after,
.ast-desktop .main-header-menu > .current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

/* Drop-down menus: dark text on white whatever the Customizer colours are (the old transparent-header
   settings made it white on white). */
#masthead .main-header-menu .sub-menu {
	background: var(--atlaw-surface);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--atlaw-heading) 12%, transparent);
}

/* Astra animates menu links with "transition: all", which also delays the inherited visibility: on
   mouse-out the panel and its background vanish at once but the text stayed for 0.2s. Animate colours only. */
#masthead .main-header-menu .sub-menu .menu-link {
	color: var(--atlaw-heading);
	background: transparent;
	transition-property: color, background-color;
}

#masthead .main-header-menu .sub-menu .menu-item:hover > .menu-link,
#masthead .main-header-menu .sub-menu .current-menu-item > .menu-link,
#masthead .main-header-menu .sub-menu .menu-link:focus-visible {
	color: var(--atlaw-primary);
	background: var(--atlaw-surface-alt);
}

/* Mega menu (desktop): "Expertise" opens one panel the width of the header grid, with a column group
   per child ("Practices", "Industries"), each listing its entries in two columns. The classes come from
   atlaw_child_mega_menu_classes() in functions.php. Astra positions every drop-down under its own item and
   opens third-level menus to the side; here the panel hangs from the header row and the third level is
   always shown inside it. The mobile menu (#ast-mobile-header) keeps Astra's accordion. */
#ast-desktop-header .site-primary-header-wrap {
	position: relative;
}

#ast-desktop-header :is(.ast-builder-grid-row, .site-header-section, .ast-builder-layout-element, .ast-builder-menu, .ast-main-header-bar-alignment, .main-header-bar-navigation, .site-navigation, .main-navigation, .main-header-menu),
#ast-desktop-header .main-header-menu > .atlaw-mega {
	position: static;
}

#ast-desktop-header .main-header-menu > .atlaw-mega > .sub-menu {
	right: 0;
	left: 0;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0 clamp(32px, 4vw, 56px);
	width: auto;
	padding: 32px clamp(24px, 3vw, 40px) 36px;
}

#ast-desktop-header .main-header-menu > .atlaw-mega:focus-within > .sub-menu {
	left: 0;
	visibility: visible;
	opacity: 1;
}

/* Hover bridge between the menu item and the panel. */
#ast-desktop-header .main-header-menu > .atlaw-mega > .sub-menu::before {
	height: 24px;
}

/* Astra lays menu items out as flex rows (link, arrow, drop-down); a group is a plain column. */
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group {
	position: static;
	display: block;
	min-width: 0;
}

/* Group title ("Practices"): a small heading over a hairline, linking to the overview page. */
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group > .menu-link {
	margin-bottom: 10px;
	padding: 0 0 12px;
	font-family: var(--atlaw-heading-font);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--atlaw-heading);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--atlaw-border);
}

#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group > .sub-menu {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(20px, 2.5vw, 32px);
	width: auto;
	margin: 0;
	padding: 0;
	visibility: inherit;
	opacity: 1;
	transform: none;
	background: transparent;
	border: 0;
	box-shadow: none;
}

#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group > .sub-menu::before {
	content: none;
}

#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group .sub-menu .menu-link {
	padding: 8px 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--atlaw-heading);
	background: transparent;
	border: 0;
}

/* Hovering anywhere in a group must not colour its title; only the link under the pointer turns red. */
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group:hover > .menu-link {
	color: var(--atlaw-heading);
	background: transparent;
}

#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group > .menu-link:hover,
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group > .menu-link:focus-visible,
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group.current-menu-item > .menu-link,
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group .sub-menu .menu-item:hover > .menu-link,
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group .sub-menu .menu-link:focus-visible,
#ast-desktop-header .main-header-menu .atlaw-mega .atlaw-mega__group .sub-menu .current-menu-item > .menu-link {
	color: var(--atlaw-primary);
	background: transparent;
}

/* The groups always show their entries, so no side arrow. Astra shows it with
   "#ast-desktop-header .main-header-menu .sub-menu .menu-item.menu-item-has-children > .menu-link ...", hence the long selector. */
#ast-desktop-header .main-header-menu .atlaw-mega .sub-menu .menu-item.menu-item-has-children > .menu-link :is(.ast-icon, .ast-header-navigation-arrow, .dropdown-menu-toggle),
#ast-desktop-header .main-header-menu .atlaw-mega .sub-menu .ast-menu-toggle {
	display: none;
}

/* Focus: no square box around menu items and the language switcher. Mouse clicks show nothing;
   keyboard focus shows the same red underline / colour as hover, so it stays visible. */
#masthead a:focus,
#masthead button:focus,
.ast-mobile-popup-drawer a:focus,
.ast-mobile-popup-drawer button:focus {
	outline: none;
	box-shadow: none;
}

.ast-desktop .main-header-menu > .menu-item > .menu-link:focus-visible {
	color: var(--atlaw-primary);
}

.ast-desktop .main-header-menu > .menu-item > .menu-link:focus-visible::after {
	transform: scaleX(1);
}

#masthead .ast-mobile-header-wrap .menu-link:focus-visible,
.ast-mobile-popup-drawer .menu-link:focus-visible,
.atlaw-lang a:focus-visible {
	color: var(--atlaw-primary);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* Sub-menu arrow (mobile): Astra gives it a dotted border on focus/hover and a red border as a button.
   The arrow itself never gets a frame; the whole row of the item is highlighted instead. */
#masthead .ast-menu-toggle,
#masthead .ast-menu-toggle:hover,
#masthead .ast-menu-toggle:focus,
#masthead .ast-menu-toggle:active {
	color: inherit;
	background: transparent;
	border-color: transparent;
	border-style: solid;
	outline: none;
	box-shadow: none;
}

#masthead .ast-submenu-expanded > .ast-menu-toggle,
#masthead .ast-menu-toggle:focus-visible {
	color: var(--atlaw-primary);
}

/* Open item (or arrow focused from the keyboard): the full row, link and arrow, gets the highlight. */
#masthead .ast-mobile-header-content .menu-item.ast-submenu-expanded > .menu-link,
#masthead .ast-mobile-header-content .menu-item:has(> .ast-menu-toggle:focus-visible) > .menu-link,
.ast-mobile-popup-drawer .menu-item.ast-submenu-expanded > .menu-link {
	color: var(--atlaw-primary);
	background: var(--atlaw-surface-alt);
	box-shadow: inset 0 -2px 0 var(--atlaw-primary);
}

/* Hamburger / close buttons: keyboard focus shows a red bar under the icon, never a box. */
#masthead .menu-toggle,
#masthead .menu-toggle:hover,
#masthead .menu-toggle:focus {
	outline: none;
	box-shadow: none;
}

/* Astra draws a dotted border round the "minimal" button once it has focus (after a tap). */
#masthead .ast-mobile-menu-trigger-minimal,
#masthead .ast-mobile-menu-trigger-minimal:focus {
	border-style: none;
}

#masthead .menu-toggle:focus-visible,
.ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	box-shadow: inset 0 -2px 0 var(--atlaw-primary);
}

/* Mobile menu open: dim the page below the header (the header itself stays bright, it sits above).
   Tapping the dimmed area, the header or Esc closes the menu (atlaw-mobile-menu.js). */
body.ast-header-break-point.ast-main-header-nav-open::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--atlaw-heading) 55%, transparent);
	animation: atlaw-fade-in 0.2s ease-out;
}

/* While the menu is open the page must not scroll under the fixed backdrop. A long menu scrolls
   inside itself instead; --atlaw-menu-room is the viewport height below the header, set by
   atlaw-mobile-menu.js. Only <html> is locked; <body> must not clip (Astra gives it "overflow-x:
   hidden", which stops being passed to the viewport once <html> is hidden): a clipping body would
   become the scroll box of the sticky header, which then jumps back to the top of the page. */
html.atlaw-menu-lock {
	overflow: hidden;
}

html.atlaw-menu-lock body {
	overflow: visible;
}

html.atlaw-menu-lock body.ast-header-break-point .ast-mobile-header-content {
	max-height: var(--atlaw-menu-room, 80vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

@keyframes atlaw-fade-in {
	from {
		opacity: 0;
	}
}

/* Laptop widths (1100–1279px): tighter menu spacing so longer labels (Vietnamese) stay on one line.
   Below 1100px the mobile header takes over (astra_header_break_point in functions.php). */
@media (min-width: 1100px) and (max-width: 1279px) {
	.ast-desktop .main-header-menu > .menu-item > .menu-link {
		padding-left: 0.6em;
		padding-right: 0.6em;
	}

	.ast-desktop .main-header-menu > .menu-item > .menu-link::after {
		right: 0.6em;
		left: 0.6em;
	}

	.atlaw-lang {
		margin-left: 6px;
		padding-left: 12px;
	}
}

/* Astra's stylesheet hides the desktop header only below 921px, but its script switches to the mobile
   header at our 1100px break point (body class ast-header-break-point). Follow the body class. */
body.ast-header-break-point #ast-desktop-header {
	display: none;
}

body.ast-header-break-point #ast-mobile-header {
	display: block;
}

/* Mobile header bar: Astra adds its own 20px side padding; the shared grid above already provides the gutter. */
body.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	padding-left: 0;
	padding-right: 0;
}

/* Footer rows: Astra's Customizer adds side padding (50px on mobile); the shared grid already gives the gutter. */
.site-footer .site-primary-footer-wrap[data-section],
.site-footer .site-below-footer-wrap[data-section],
.site-footer .site-above-footer-wrap[data-section] {
	padding-left: 0;
	padding-right: 0;
}

.atlaw-lang,
.atlaw-lang ul {
	flex-wrap: nowrap;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Phones: a smaller logo and a tighter switcher so logo, "EN | VI" and the menu button fit from 350px. */
@media (max-width: 544px) {
	/* The "ATLAW" wordmark is wide: at 128px it leaves room for "EN | VI" and the menu button at 350px. */
	#masthead .custom-logo {
		max-width: 128px;
		max-height: 40px;
	}

	.atlaw-lang {
		gap: 0;
	}

	.atlaw-lang a {
		min-width: 40px;
		padding: 0 6px;
	}

	.atlaw-lang li + li::before {
		height: 10px;
	}
}

/* Mobile / tablet menu: 44px touch targets. */
.ast-mobile-header-content .main-header-menu .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-link {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* ---------- Homepage sections (Elementor containers with these CSS classes) ---------- */
/* Spacing is set through Elementor's own container variables, so it can still be changed per section in the editor. */
.e-con.atlaw-section,
.e-con.atlaw-hero,
.e-con.atlaw-band {
	--padding-top: var(--atlaw-space);
	--padding-bottom: var(--atlaw-space);
	--padding-left: var(--atlaw-gutter);
	--padding-right: var(--atlaw-gutter);
}

/* Nested containers only group widgets; they add no spacing of their own. */
.atlaw-section .e-con,
.atlaw-hero .e-con,
.atlaw-band .e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.e-con.atlaw-section--alt {
	background: var(--atlaw-surface-alt);
}

/* Hero: dark band, large type, one red rule. A background image can be set on the container in Elementor.
   More room below than above, so the text sits a little above the middle of the band. */
.e-con.atlaw-hero {
	--padding-top: clamp(56px, 8vw, 112px);
	--padding-bottom: clamp(88px, 13vw, 184px);
	background-color: var(--atlaw-heading);
	color: var(--atlaw-surface);
}

.elementor-widget-heading.atlaw-kicker .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--atlaw-primary);
}

.elementor-widget-heading.atlaw-kicker .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 36px;
	height: 2px;
	background: var(--atlaw-primary);
}

.atlaw-hero .elementor-widget-heading.atlaw-kicker .elementor-heading-title {
	color: var(--atlaw-surface);
}

/* Two lines on desktop for the homepage title. */
.atlaw-hero .elementor-widget-heading.atlaw-hero__title .elementor-heading-title {
	max-width: 28ch;
	font-family: var(--atlaw-heading-font);
	font-size: clamp(2.125rem, 1rem + 3.4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--atlaw-surface);
}

/* About a third of the screen wide on desktop. ".elementor .e-con" outweighs Elementor's
   ".elementor.elementor .e-con > .elementor-widget { max-width: 100% }". */
.elementor .e-con.atlaw-hero .elementor-widget-text-editor.atlaw-hero__lead {
	max-width: 54ch;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.6;
	color: color-mix(in srgb, var(--atlaw-surface) 82%, transparent);
}

@media (min-width: 1025px) {
	.elementor .e-con.atlaw-hero .elementor-widget-text-editor.atlaw-hero__lead {
		max-width: clamp(360px, 33vw, 480px);
	}
}

/* Section heading row: title on the left, "view all" link on the right. Section headings of the whole
   site share one size, weight and line height (client request of 25/10/2026: about 14% smaller than
   before, semibold); the plugin uses the same values for its own section titles. */
.elementor-widget-heading.atlaw-h2 .elementor-heading-title {
	max-width: 24ch;
	font-family: var(--atlaw-heading-font);
	font-size: clamp(1.625rem, 2.9vw, 2.25rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--atlaw-heading);
}

.atlaw-section .elementor-widget-text-editor.atlaw-lead {
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--atlaw-text);
}

.atlaw-lead p:last-child,
.atlaw-hero__lead p:last-child {
	margin-bottom: 0;
}

/* Buttons: Elementor Button widgets with the class atlaw-btn (solid) or atlaw-btn-ghost (outline). */
.elementor-widget-button.atlaw-btn .elementor-button,
.elementor-widget-button.atlaw-btn-ghost .elementor-button {
	min-height: 48px;
	padding: 14px 28px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 0;
	border: 1px solid var(--atlaw-primary);
	color: var(--atlaw-surface);
	background-color: var(--atlaw-primary);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.elementor-widget-button.atlaw-btn .elementor-button:hover,
.elementor-widget-button.atlaw-btn .elementor-button:focus-visible {
	color: var(--atlaw-surface);
	background-color: var(--atlaw-primary-dark);
	border-color: var(--atlaw-primary-dark);
}

/* Outline button: red border and red text; filled red on hover. On the dark hero and closing band:
   white border and white text. */
.elementor-widget-button.atlaw-btn-ghost .elementor-button {
	color: var(--atlaw-primary);
	background-color: transparent;
	border-color: var(--atlaw-primary);
}

.elementor-widget-button.atlaw-btn-ghost .elementor-button:hover,
.elementor-widget-button.atlaw-btn-ghost .elementor-button:focus-visible {
	color: var(--atlaw-surface);
	background-color: var(--atlaw-primary);
	border-color: var(--atlaw-primary);
}

.atlaw-hero .elementor-widget-button.atlaw-btn-ghost .elementor-button:not(:hover, :focus-visible),
.atlaw-band .elementor-widget-button.atlaw-btn-ghost .elementor-button:not(:hover, :focus-visible) {
	color: var(--atlaw-surface);
	border-color: var(--atlaw-surface);
}

/* Closing call to action: dark band. */
.e-con.atlaw-band {
	--padding-top: clamp(56px, 8vw, 96px);
	--padding-bottom: clamp(56px, 8vw, 96px);
	background-color: var(--atlaw-heading);
	color: var(--atlaw-surface);
}

.atlaw-band .elementor-widget-heading.atlaw-h2 .elementor-heading-title {
	color: var(--atlaw-surface);
}

.atlaw-band .elementor-widget-text-editor.atlaw-lead {
	max-width: 52ch;
	font-size: 1.0625rem;
	color: color-mix(in srgb, var(--atlaw-surface) 80%, transparent);
}

/* ---------- About Us / Contact (Elementor containers with these CSS classes) ---------- */
/* Card grid: 4 or 3 columns on desktop, 2 on tablet, 1 on phones. */
.e-con.atlaw-grid {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(var(--atlaw-cols, 3), minmax(0, 1fr));
}

.e-con.atlaw-grid--4 {
	--atlaw-cols: 4;
}

.e-con.atlaw-grid--3 {
	--atlaw-cols: 3;
}

.e-con.atlaw-grid--2 {
	--atlaw-cols: 2;
}

.e-con.atlaw-grid > .e-con {
	--width: auto;
	width: auto;
	min-width: 0;
}

@media (max-width: 1024px) {
	.e-con.atlaw-grid--4 {
		--atlaw-cols: 2;
	}
}

@media (max-width: 767px) {
	.e-con.atlaw-grid {
		--atlaw-cols: 1;
	}
}

.elementor-widget-heading.atlaw-h3 .elementor-heading-title {
	font-family: var(--atlaw-heading-font);
	font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--atlaw-heading);
}

.elementor-widget-text-editor.atlaw-text {
	font-size: max(1rem, 16px);
	line-height: 1.7;
	color: var(--atlaw-text);
}

.atlaw-text p:last-child,
.atlaw-stat__label p:last-child {
	margin-bottom: 0;
}

/* Key figures: large red number over a short label, with a rule on top. */
.atlaw-section .e-con.atlaw-stat {
	--padding-top: 24px;
	border-top: 1px solid var(--atlaw-border);
}

.elementor-widget-heading.atlaw-stat__value .elementor-heading-title {
	font-family: var(--atlaw-heading-font);
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--atlaw-primary);
}

.elementor-widget-text-editor.atlaw-stat__label {
	font-size: max(1rem, 16px);
	line-height: 1.5;
	color: var(--atlaw-heading);
}

/* Key figures as rows (homepage About, next to the text): number left, label right, hairlines between. */
.atlaw-section .e-con.atlaw-stats {
	--gap: 0px;
	--row-gap: 0px;
	align-self: center;
}

.atlaw-section .e-con.atlaw-stat--row {
	--flex-direction: row;
	--align-items: center;
	--gap: clamp(16px, 3vw, 32px);
	--padding-top: clamp(20px, 2.6vw, 30px);
	--padding-bottom: clamp(20px, 2.6vw, 30px);
}

.atlaw-section .e-con.atlaw-stat--row:last-child {
	border-bottom: 1px solid var(--atlaw-border);
}

.e-con.atlaw-stat--row > .elementor-widget-heading.atlaw-stat__value {
	flex: 0 0 auto;
	width: clamp(72px, 9vw, 120px);
}

.e-con.atlaw-stat--row > .elementor-widget-text-editor.atlaw-stat__label {
	flex: 1 1 0;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	font-weight: 500;
}

/* Key figures as a band (About Us): white figures centred on the brand colour, thin white rules
   between the columns (between the rows once they stack on phones). */
.e-con.atlaw-figures {
	--padding-top: clamp(36px, 4.5vw, 56px);
	--padding-bottom: clamp(36px, 4.5vw, 56px);
	--padding-left: var(--atlaw-gutter);
	--padding-right: var(--atlaw-gutter);
	background: var(--atlaw-primary);
	color: var(--atlaw-surface);
}

.atlaw-figures .e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.elementor .atlaw-figures .e-con.atlaw-grid {
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	gap: 0;
}

.atlaw-figures .e-con.atlaw-stat {
	--align-items: center;
	--padding-top: 8px;
	--padding-bottom: 8px;
	--padding-left: 16px;
	--padding-right: 16px;
	text-align: center;
}

.atlaw-figures .e-con.atlaw-stat + .e-con.atlaw-stat {
	border-left: 1px solid color-mix(in srgb, var(--atlaw-surface) 35%, transparent);
}

.atlaw-figures .elementor-widget-heading.atlaw-stat__value .elementor-heading-title {
	font-size: clamp(3rem, 5.5vw, 4.5rem);
	color: var(--atlaw-surface);
}

.atlaw-figures .elementor-widget-text-editor.atlaw-stat__label {
	font-size: clamp(max(1rem, 16px), 1.5vw, 1.1875rem);
	font-weight: 600;
	color: var(--atlaw-surface);
}

@media (max-width: 767px) {
	.atlaw-figures .e-con.atlaw-stat {
		--padding-top: 20px;
		--padding-bottom: 20px;
	}

	.atlaw-figures .e-con.atlaw-stat + .e-con.atlaw-stat {
		border-left: 0;
		border-top: 1px solid color-mix(in srgb, var(--atlaw-surface) 35%, transparent);
	}
}

/* Value tiles: white cards on the grey section, a short red rule on top. */
.atlaw-section .e-con.atlaw-tile {
	--padding-top: 32px;
	--padding-bottom: 32px;
	--padding-left: 28px;
	--padding-right: 28px;
	position: relative;
	background: var(--atlaw-surface);
	border: 1px solid var(--atlaw-border);
}

.e-con.atlaw-tile::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 28px;
	width: 36px;
	height: 3px;
	background: var(--atlaw-primary);
}

/* Approach steps: number, title, text, separated by a hairline. */
.atlaw-section .e-con.atlaw-step {
	--padding-top: 24px;
	border-top: 1px solid var(--atlaw-border);
}

.elementor-widget-heading.atlaw-step__num .elementor-heading-title {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--atlaw-primary);
}

/* Contact: the form sits on a light panel next to the offices. */
.atlaw-section .e-con.atlaw-panel {
	--padding-top: clamp(28px, 4vw, 48px);
	--padding-bottom: clamp(28px, 4vw, 48px);
	--padding-left: clamp(20px, 4vw, 48px);
	--padding-right: clamp(20px, 4vw, 48px);
	background: var(--atlaw-surface-alt);
}

/* WPForms: square fields and the brand button, through WPForms' own style variables. */
.atlaw-form-wrap .wpforms-container {
	--wpforms-field-border-radius: 0px;
	--wpforms-field-border-color: var(--atlaw-border);
	--wpforms-field-background-color: var(--atlaw-surface);
	--wpforms-field-text-color: var(--atlaw-heading);
	--wpforms-label-color: var(--atlaw-heading);
	--wpforms-label-sublabel-color: var(--atlaw-muted);
	--wpforms-label-error-color: var(--atlaw-primary);
	--wpforms-button-border-radius: 0px;
	--wpforms-button-background-color: var(--atlaw-primary);
	--wpforms-button-text-color: var(--atlaw-surface);
	--wpforms-button-size-height: 48px;
	--wpforms-field-size-input-height: 48px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-label-size-font-size: 15px;
	--wpforms-page-break-color: var(--atlaw-primary);
	margin: 8px 0 0;
}

.atlaw-form-wrap .wpforms-container input:not([type="submit"]),
.atlaw-form-wrap .wpforms-container textarea {
	width: 100%;
	color: var(--atlaw-heading);
	background: var(--atlaw-surface);
	max-width: 100%;
	font-size: 16px;
	border-radius: 0;
}

.atlaw-form-wrap .wpforms-container input:focus,
.atlaw-form-wrap .wpforms-container textarea:focus {
	border-color: var(--atlaw-primary);
	box-shadow: 0 0 0 1px var(--atlaw-primary);
	outline: none;
}

.atlaw-form-wrap .wpforms-container .wpforms-required-label {
	color: var(--atlaw-primary);
}

.atlaw-form-wrap .wpforms-container button[type="submit"] {
	min-height: 48px;
	padding: 12px 32px;
	font-weight: 600;
	color: var(--atlaw-surface);
	background: var(--atlaw-primary);
	border: 1px solid var(--atlaw-primary);
	border-radius: 0;
}

.atlaw-form-wrap .wpforms-container button[type="submit"]:hover,
.atlaw-form-wrap .wpforms-container button[type="submit"]:focus-visible {
	background: var(--atlaw-primary-dark);
	border-color: var(--atlaw-primary-dark);
}

.atlaw-form-wrap .wpforms-confirmation-container-full {
	color: var(--atlaw-heading);
	background: var(--atlaw-surface);
	border: 1px solid var(--atlaw-border);
	border-left: 3px solid var(--atlaw-primary);
}

/* ---------- Footer ---------- */
/* Rows are set in the Astra Footer Builder: an HTML element with [atlaw_footer] in the primary row,
   the copyright element in the below row. This gives them the dark brand band. */
/* A shade darker than the dark CTA bands, with a red rule, so the two never merge. */
.site-footer,
.site-footer .site-above-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap {
	background: color-mix(in srgb, var(--atlaw-heading) 78%, #000);
	border: 0;
}

.site-footer {
	border-top: 3px solid var(--atlaw-primary);
}

/* [atlaw_footer] ends with its own copyright row, so no space below it. */
.site-footer .site-primary-footer-wrap {
	padding-block: clamp(56px, 7vw, 88px) 0;
}

.site-footer .site-below-footer-wrap {
	padding-block: 20px;
	border-top: 1px solid color-mix(in srgb, var(--atlaw-surface) 12%, transparent);
}

.site-footer .site-below-footer-wrap .ast-footer-copyright,
.site-footer .site-below-footer-wrap p {
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--atlaw-surface) 60%, transparent);
}

.site-footer .ast-builder-html-element,
.site-footer .footer-widget-area {
	width: 100%;
}

.site-footer a {
	text-decoration: none;
}

/* The ATLAW hero sits directly under the header; remove the gap Elementor leaves above the first section. */
.atlaw-slider + .atlaw-section,
.elementor-widget-atlaw-hero-slider {
	margin-top: 0;
}

.e-con.atlaw-hero-wrap {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--gap: 0px;
}

/* ---------- CJK fallback ---------- */
/* Ready for Chinese, Japanese and Korean: the global font stays first, system CJK fonts fill in. */
body:lang(zh),
body:lang(ja),
body:lang(ko) {
	font-family: var(--e-global-typography-text-font-family, inherit), "PingFang SC", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
	line-break: strict;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.atlaw-lang a,
	.main-header-menu > .menu-item > .menu-link::after,
	.elementor-widget-button.atlaw-btn .elementor-button,
	.elementor-widget-button.atlaw-btn-ghost .elementor-button {
		transition: none;
	}
}