/**
 * Utilities shared by all HTPLaw widgets. Widget-specific rules live in
 * assets/css/widgets/{slug}.css.
 */

.htplaw-container {
	width: 100%;
	max-width: calc(var(--htplaw-container) + 2 * var(--htplaw-gutter));
	margin-inline: auto;
	padding-inline: var(--htplaw-gutter);
}

/* Hello Elementor ships this class too; repeated so widgets don't depend on the theme. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Buttons */
.htplaw-btn {
	--_bg: var(--htplaw-btn-bg, var(--htplaw-color-primary));
	--_color: var(--htplaw-btn-color, var(--htplaw-color-on-dark));

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 42px;
	padding: .5rem 23px;
	border: 1px solid var(--_bg);
	border-radius: var(--htplaw-radius);
	background: var(--_bg);
	color: var(--_color);
	font-family: var(--htplaw-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--htplaw-duration) var(--htplaw-ease), color var(--htplaw-duration) var(--htplaw-ease), border-color var(--htplaw-duration) var(--htplaw-ease);
}

.htplaw-btn:hover {
	background: var(--htplaw-color-accent-strong);
	border-color: var(--htplaw-color-accent-strong);
	color: var(--htplaw-color-on-dark);
}

/* Outline: Figma "View Practice Areas" (1px #0f2a3f border and text). */
.htplaw-btn--secondary {
	border-color: var(--htplaw-color-secondary);
	background: transparent;
	color: var(--htplaw-color-secondary);
}

/* Copper: Figma consultation buttons. Uses the AA-compliant copper rather
   than Figma's #b87333, which gives light text only ~3.5:1. */
.htplaw-btn--accent {
	--_bg: var(--htplaw-btn-bg, var(--htplaw-color-accent-strong));
}

.htplaw-btn--accent:hover {
	background: var(--htplaw-color-primary);
	border-color: var(--htplaw-color-primary);
}

/*
 * Section typography shared by most widgets (Figma frame 3:322).
 * Copper text uses --htplaw-color-accent-strong for WCAG AA contrast;
 * Figma's #b87333 stays for decorative, non-text elements.
 */
.htplaw-eyebrow {
	margin: 0;
	color: var(--htplaw-eyebrow-color, var(--htplaw-color-accent-strong));
	font-family: var(--htplaw-font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .13em;
	line-height: 1.4;
}

/* 43/50, -3% tracking at desktop; scales down to 32px on phones. */
.htplaw-heading-xl {
	margin: 0;
	color: var(--htplaw-heading-color, var(--htplaw-color-primary));
	font-family: var(--htplaw-font-heading);
	font-size: clamp(2rem, 1.5rem + 1.5vw, 2.6875rem);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.163;
}

/* Colour only, doubled to outrank the kit's `.elementor-kit-N h2` colour
   (white headings on navy, and the widgets' heading colour controls). */
.htplaw-heading-xl.htplaw-heading-xl {
	color: var(--htplaw-heading-color, var(--htplaw-color-primary));
}

/*
 * Sans section heading, e.g. "From engineer to Registered Patent Attorney".
 * Measured from the 4x export: Inter 600, 25px, no tracking (width fit
 * within 0.3px, ink height 23.5px). The 36px line box keeps the Timeline's
 * measured positions. The doubled class outranks the Elementor kit's
 * `.elementor-kit-N h2` rule, which would otherwise force the serif font.
 */
.htplaw-heading-lg.htplaw-heading-lg {
	margin: 0;
	color: var(--htplaw-heading-color, var(--htplaw-color-primary));
	font-family: var(--htplaw-font-body);
	font-size: clamp(1.25rem, 1rem + .8vw, 1.5625rem);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 36px;
}

/*
 * Desktop headings wrap greedily like Figma (balance changed the hero/firm
 * line breaks). Phone layouts aren't in Figma, so avoid one-word last lines.
 */
@media (max-width: 900px) {
	.htplaw-heading-xl,
	.htplaw-heading-lg {
		text-wrap: pretty;
	}
}

/* Inter 18/27, -3% tracking. */
.htplaw-lead {
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
	letter-spacing: -.03em;
	line-height: 1.5;
}

/* Highlighted words in rich text, e.g. <strong class="htplaw-highlight">
   (About Teddy: “Teddy,” in copper semibold). */
.htplaw-highlight {
	color: var(--htplaw-color-accent-strong);
	font-weight: 600;
}

.htplaw-lead > :first-child { margin-top: 0; }
.htplaw-lead > :last-child { margin-bottom: 0; }

/*
 * Article content (Single Post template, Elementor Pro's Post Content
 * widget): editor content can't break the layout on small screens. Media
 * scales, wide tables scroll inside themselves, long words/URLs wrap.
 */
.elementor-widget-theme-post-content {
	overflow-wrap: break-word;
}

.elementor-widget-theme-post-content img,
.elementor-widget-theme-post-content video,
.elementor-widget-theme-post-content iframe,
.elementor-widget-theme-post-content embed,
.elementor-widget-theme-post-content object {
	max-width: 100%;
}

.elementor-widget-theme-post-content img,
.elementor-widget-theme-post-content video {
	height: auto;
}

.elementor-widget-theme-post-content table,
.elementor-widget-theme-post-content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/*
 * Article typography (Single Post template, column class "htplaw-article"):
 * the site's heading font and sizes, copper links and accents. Doubled
 * classes outrank the Elementor kit's `.elementor-kit-N h2` rules.
 */
/* The column lines up with the banner text (site container and gutter)
   and keeps a 760px reading width. */
.htplaw-article.e-con-boxed > .e-con-inner {
	max-width: calc(var(--htplaw-container) + 2 * var(--htplaw-gutter));
	padding-inline: var(--htplaw-gutter);
}

/* Outranks Elementor's `.e-con > .e-con-inner > .elementor-widget { max-width: 100% }`. */
.htplaw-article.htplaw-article > .e-con-inner > .elementor-widget {
	width: 100%;
	max-width: 760px;
}

.htplaw-article .elementor-widget-theme-post-content > .elementor-widget-container > :first-child,
.htplaw-article .elementor-widget-theme-post-content > :first-child {
	margin-top: 0;
}

.htplaw-article.htplaw-article :is(h2, h3, h4) {
	margin: 1.6em 0 .5em;
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-heading);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
}

.htplaw-article.htplaw-article h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.875rem); }
.htplaw-article.htplaw-article h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.htplaw-article.htplaw-article h4 { font-size: 1.125rem; }

.htplaw-article :is(p, ul, ol, blockquote, figure) {
	margin: 0 0 1.2em;
}

.htplaw-article :is(ul, ol) {
	padding-left: 1.4em;
}

.htplaw-article li + li {
	margin-top: .4em;
}

.htplaw-article li::marker {
	color: var(--htplaw-color-accent-strong);
}

.htplaw-article.htplaw-article .elementor-widget-theme-post-content a {
	color: var(--htplaw-color-accent-strong);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.htplaw-article.htplaw-article .elementor-widget-theme-post-content a:hover {
	color: var(--htplaw-color-primary);
}

.htplaw-article blockquote {
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--htplaw-color-accent);
	font-weight: 600;
}

.htplaw-article figcaption {
	margin-top: 8px;
	color: var(--htplaw-color-text);
	font-size: 14px;
	font-style: normal;
}

/* A consistent 16:9 crop, whatever the upload's proportions. */
.htplaw-article.htplaw-article .elementor-widget-theme-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--htplaw-radius);
}

/*
 * Larger touch areas for standalone text links on touch screens and narrow
 * viewports: the padding enlarges the hit box and the negative margin keeps
 * the layout unchanged.
 */
@media (pointer: coarse), (max-width: 1024px) {
	.htplaw-ap__link,
	.htplaw-cta__link,
	.htplaw-sc__link,
	.htplaw-split__link,
	.htplaw-pa__link,
	.htplaw-cp__link,
	.htplaw-form-pick,
	.htplaw-blog__link,
	.htplaw-pb__crumbs a,
	.elementor-widget-post-info .elementor-post-info a {
		padding-block: 10px;
		margin-block: -10px;
	}
}

[class*="htplaw-"] :focus-visible {
	outline: var(--htplaw-focus-ring);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	[class*="htplaw-"],
	[class*="htplaw-"] *,
	[class*="htplaw-"] *::before,
	[class*="htplaw-"] *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}