/*
Theme Name: Petro-Line
Theme URI: https://swearenginweb.design/
Author: James Swearengin
Author URI: https://swearenginweb.design/
Description: A custom WordPress block theme for Petro-Line, a TD Williamson company.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petro-line
Tags: block-theme, full-site-editing, custom-logo, featured-images, editor-style, wide-blocks
*/

/*
 * Footer (desktop-first match to design): 1px top + 10px bottom red frame,
 * generous padding, site logo, nav rule, link columns.
 */

.petro-line-footer-inner {
	box-sizing: border-box;
}


.petro-line-footer-columns {
	align-items: flex-start;
}


/* Footer: site logo (Appearance → Customize) */
.petro-line-footer-logos .wp-block-site-logo img {
	display: block;
	height: auto;
}

.petro-line-footer-logos .wp-block-site-logo figure,
.petro-line-footer-logos .wp-block-site-logo .custom-logo-link {
	margin: 0;
}

.petro-line-footer-contact a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-skip-ink: auto;
}

.petro-line-footer-contact a:hover,
.petro-line-footer-contact a:focus-visible {
	color: var(--wp--preset--color--red);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/*
 * “Open in new window” cue: add class external-window on the anchor.
 * Uses a mask so the glyph follows link color (including hover/focus).
 */
a.external-window::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.2em;
	vertical-align: -0.08em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.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;
}

.petro-line-footer-copy {
	color: inherit;
}

/* Navigation column: stretch nested Columns to full width of the footer column (flex stack). */
.petro-line-footer-nav {
	width: 100%;
	max-width: 100%;
}

.petro-line-footer-nav > .wp-block-columns {
	width: 100%;
	max-width: 100%;
	align-self: stretch;
}

.petro-line-footer-nav-rule.wp-block-separator,
.wp-block-separator.petro-line-footer-nav-rule {
	border: none;
	height: 1px;
	min-height: 1px;
	opacity: 1;
	width: 100%;
	background-color: var(--wp--preset--color--muted-grey);
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
}

.petro-line-footer-link-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.petro-line-footer-link-list li {
	display: flex;
	align-items: center;
	margin: 0 0 0.4rem;
	padding: 0;
}

.petro-line-footer-link-list li::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 3px;
	margin-right: 6px;
	background-color: var(--wp--preset--color--black, #000);
}

.petro-line-footer-link-list a {
	color: inherit;
	text-decoration: none;
}

.petro-line-footer-link-list a:hover,
.petro-line-footer-link-list a:focus-visible {
	color: var(--wp--preset--color--red);
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* Footer / contact: Google Map (fills column width; preserves 4:3) */
.petro-line-footer-map,
.petro-line-contact-map {
	width: 100%;
	max-width: 100%;
}

.petro-line-footer-map .wp-block-html,
.petro-line-contact-map .wp-block-html {
	margin: 0;
}

.petro-line-footer-map iframe,
.petro-line-contact-map iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	border: 0;
	display: block;
}


/* Top bar (dark): bright hover with strong contrast on black */
.petro-line-top-bar a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.petro-line-top-bar a:hover,
.petro-line-top-bar a:focus-visible {
	color: var(--wp--preset--color--integrity-yellow);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * Site logo link hover in header/footer (opacity 0.66 per mockup).
 * Template-part selectors match even when inner layout classes were changed
 * in the Site Editor; .petro-line-main-header covers the stock header markup.
 */
header.wp-block-template-part .wp-block-site-logo a,
footer.wp-block-template-part .wp-block-site-logo a,
.petro-line-main-header .wp-block-site-logo a {
	display: inline-block;
	opacity: 1;
	transition: opacity 0.25s ease;
}

header.wp-block-template-part .wp-block-site-logo a:hover,
header.wp-block-template-part .wp-block-site-logo a:focus-visible,
footer.wp-block-template-part .wp-block-site-logo a:hover,
footer.wp-block-template-part .wp-block-site-logo a:focus-visible,
.petro-line-main-header .wp-block-site-logo a:hover,
.petro-line-main-header .wp-block-site-logo a:focus-visible {
	opacity: 0.66;
}

/* Main header nav + CTA: match theme link / button hover behavior */
.petro-line-main-header .wp-block-navigation-item__content,
.petro-line-main-header .wp-block-navigation-submenu__toggle {
	transition: color 0.2s ease;
}

/* Current page + ancestor trail: Muted Grey (must stay below :hover so red wins on interaction) */
.petro-line-main-header .current-menu-item > .wp-block-navigation-item__content,
.petro-line-main-header .current-menu-item > .wp-block-navigation-submenu__toggle,
.petro-line-main-header .current-menu-ancestor > .wp-block-navigation-item__content,
.petro-line-main-header .current-menu-ancestor > .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--muted-grey);
}

.petro-line-main-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--muted-grey);
}

.petro-line-main-header .wp-block-navigation-item__content:hover,
.petro-line-main-header .wp-block-navigation-item__content:focus-visible,
.petro-line-main-header .wp-block-navigation-submenu__toggle:hover,
.petro-line-main-header .wp-block-navigation-submenu__toggle:focus-visible {
	color: var(--wp--preset--color--red);
}

/* Submenu: light dividers between items (theme Surface Muted) */
.petro-line-main-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(:last-child) {
	border-bottom: 1px solid var(--wp--preset--color--surface-muted);
}

/*
 * First-level submenu only (mega panel): centered under the parent top-level li; max 540px wide.
 * Scoped with __container > .has-child so nested flyouts keep core left/right.
 * DOM order: toggle or anchor, optional icon span, then ul — use general sibling combinator (~).
 * Desktop only (782px): matches core horizontal submenu breakpoint; overlay nav stays default.
 */

.petro-line-main-header .wp-block-navigation {
	overflow: visible;
}

/* Row hover (full item) */
.petro-line-main-header .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	transition: background-color 0.15s ease;
}

.petro-line-main-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover,
.petro-line-main-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:focus-within {
	background-color: var(--wp--preset--color--surface-muted);
}

/*
 * Navigation submenu “cards”: thumb (16:9) + title + optional description (see includes/nav-submenu-cards.php).
 * Top-level nav links keep a normal label; rich layout is scoped to dropdown panels only.
 */
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20, 20px);
	min-width: 0;
	text-decoration: none;
}

.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-thumb {
	display: block;
	flex: 0 0 auto;
	width: 178px;
	max-width: 38%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-muted);
	line-height: 0;
}

.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
	flex: 1;
	min-width: 0;
}

/* Keep top-level nav links and submenu parent labels visually consistent. */
.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle,
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-text .wp-block-navigation-item__label {
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 500;
	line-height: 1.25;
}

.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-text .wp-block-navigation-item__label {
	color: var(--wp--preset--color--black);
}

/* Core / overlay submenu styles often force muted color — override for readability */
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-desc,
.petro-line-main-header .wp-block-navigation__submenu-container .wp-block-navigation-item__description,
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-text .wp-block-navigation-item__description {
	display: block;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--black) !important;
	opacity: 1 !important;
	-webkit-text-fill-color: var(--wp--preset--color--black) !important;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link:hover .wp-block-navigation-item__label,
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link:focus-visible .wp-block-navigation-item__label {
	color: var(--wp--preset--color--red);
}

.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link:hover .petro-line-rich-nav-desc,
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link:hover .wp-block-navigation-item__description,
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link:focus-visible .petro-line-rich-nav-desc,
.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link:focus-visible .wp-block-navigation-item__description {
	color: var(--wp--preset--color--black) !important;
	-webkit-text-fill-color: var(--wp--preset--color--black) !important;
	opacity: 1 !important;
}

/*
 * Top-level row only: hide card chrome on direct header links.
 * Do NOT use "container > li … descendant" — that also matches submenu links nested under .has-child.
 */
.petro-line-main-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content > .petro-line-rich-nav-thumb,
.petro-line-main-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content > .petro-line-rich-nav-text > .petro-line-rich-nav-desc,
.petro-line-main-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__description {
	display: none !important;
}

.petro-line-main-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content > .petro-line-rich-nav-text {
	display: contents;
}

/* Main header: logo row + nav/actions stay horizontal on wide screens; stack on small */
.petro-line-main-header__row {
	width: 100%;
	box-sizing: border-box;
}

.petro-line-main-header__actions {
	min-width: 0;
}

.wp-block-navigation__responsive-container-open .petro-line-nav-icon,
.wp-block-navigation__responsive-container-close .petro-line-nav-icon {
	display: block !important;
	flex: 0 0 48px !important;
	height: 32px !important;
	max-height: none !important;
	max-width: none !important;
	min-height: 32px !important;
	min-width: 48px !important;
	position: relative;
	width: 48px !important;
}

.wp-block-navigation__responsive-container-open > svg,
.wp-block-navigation__responsive-container-close > svg {
	display: none !important;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	transition: color 0.24s ease;
}

.wp-block-navigation__responsive-container-open.petro-line-nav-toggle-active,
.wp-block-navigation__responsive-container-close.petro-line-nav-toggle-active {
	color: var(--wp--preset--color--red);
}

.petro-line-nav-icon::before,
.petro-line-nav-icon::after,
.petro-line-nav-icon__line {
	background-color: currentColor;
	content: "";
	display: block;
	height: 5px;
	left: 0;
	position: absolute;
	transform-origin: 50% 50%;
	transition:
		background-color 0.24s ease,
		opacity 0.18s ease,
		transform 0.24s ease;
	width: 48px;
}

.petro-line-nav-icon::before {
	top: 0;
}

.petro-line-nav-icon__line {
	top: 13.5px;
}

.petro-line-nav-icon::after {
	top: 27px;
}

.petro-line-nav-icon.is-active::before,
.petro-line-nav-toggle-active .petro-line-nav-icon::before {
	transform: translateY(13.5px) rotate(45deg);
}

.petro-line-nav-icon.is-active .petro-line-nav-icon__line,
.petro-line-nav-toggle-active .petro-line-nav-icon__line {
	opacity: 0;
	transform: scaleX(0.18);
}

.petro-line-nav-icon.is-active::after,
.petro-line-nav-toggle-active .petro-line-nav-icon::after {
	transform: translateY(-13.5px) rotate(-45deg);
}

@keyframes petro-line-mobile-backdrop-fade-in {
	from {
		background-color: transparent;
	}

	to {
		background-color: color-mix(in srgb, var(--wp--preset--color--black) 67%, transparent);
	}
}

@keyframes petro-line-mobile-drawer-slide-in {
	from {
		transform: translateX(-105%);
	}

	to {
		transform: translateX(0);
	}
}


/*
 * Homepage hero: keep front end aligned with the Site Editor.
 * Editor loads wp-block-cover-editor.css, which sets .wp-block-cover__inner-container { text-align: left }.
 * On the front, core Cover defaults to centered flex; if content-position classes are missing or overridden,
 * copy stacks in the middle. Pin layout here for .petro-line-hero-home only.
 */
.wp-block-cover.petro-line-hero-home {
	align-items: flex-start;
	justify-content: flex-start;
}

/*
 * Homepage hero: pipeline PNG over the photo/gradient, not over headline copy.
 * Works on core/cover (.wp-block-cover) or core/group (.wp-block-group) when the
 * class petro-line-hero-home is on that block. Cover: ::after above media, below
 * __inner-container. Dim 0 hides .wp-block-cover__background, so the graphic is
 * on the cover element, not on that span. Group: ::after above block background,
 * direct children z-indexed above the shape.
 */
.wp-block-cover.petro-line-hero-home .wp-block-cover__image-background,
.wp-block-cover.petro-line-hero-home .wp-block-cover__video-background,
.wp-block-cover.petro-line-hero-home .wp-block-cover__background,
.wp-block-cover.petro-line-hero-home .wp-block-cover__gradient-background {
	z-index: 0;
}

/*
 * Group-based hero (background image on the Group): same pipeline overlay as Cover.
 * Direct children sit above ::after so headings/buttons stay sharp.
 */
.wp-block-group.petro-line-hero-home {
	position: relative;
}

.wp-block-group.petro-line-hero-home > * {
	position: relative;
	z-index: 2;
}

.wp-block-cover.petro-line-hero-home::after,
.wp-block-group.petro-line-hero-home::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: url("assets/images/shape-pipeline.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	/* Fill the hero bounds so the overlay reaches every edge at very wide zoom levels. */
	background-size: 100% 100%;
	mix-blend-mode: overlay;
	opacity: 0.92;
}

.wp-block-cover.petro-line-hero-home .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	align-items: flex-start;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin-left: 0;
	margin-right: auto;
	max-width: none;
	text-align: left;
	width: 100%;
}

.petro-line-hero-home .petro-line-hero-stack {
	align-items: flex-start;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
}

.petro-line-hero-home .wp-block-buttons {
	justify-content: flex-start;
}

/* H1 + hero subheading: 6px red left accent */
.petro-line-hero-home .wp-block-heading.has-display-font-size,
.petro-line-hero-home .wp-block-paragraph.is-style-pli-h1-subheading,
.petro-line-hero-home p.is-style-pli-h1-subheading {
	border-left: 6px solid var(--wp--preset--color--red);
	padding-left: var(--wp--preset--spacing--20);
	box-sizing: border-box;
}

/*
 * Slanted 6px red left accent (group: Additional CSS class border-left-petroline-style).
 * Full height of the group; top and bottom cuts use the same 45° direction (parallel).
 */
.border-left-petroline-style {
	position: relative;
	padding-left: calc(6px + var(--wp--preset--spacing--20));
	box-sizing: border-box;
}

.border-left-petroline-style::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	background-color: var(--wp--preset--color--red);
	clip-path: polygon(0 6px, 100% 0, 100% calc(100% - 6px), 0 100%);
	pointer-events: none;
}

/* Credibility line: subtle depth on dark cover (color from preset) */
.petro-line-hero-credibility {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/*
 * Tesibis-style glare: only on .wp-block-button__link.has-red-background-color
 * (background-clip:text + background-size 200% + keyframes on background-position;
 * no !important on position — that freezes the animation). Wrapper fill via :has().
 */
@keyframes pli-text-glare-shift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* Buttons: pointer + smooth state changes */
.wp-block-button .wp-block-button__link {
	cursor: pointer;
	text-shadow: none;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		text-shadow 0.2s ease;
}

.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 3px;
}

.wp-block-button:has(> .wp-block-button__link.has-red-background-color:hover),
.wp-block-button:has(> .wp-block-button__link.has-red-background-color:focus-visible) {
	background-color: var(--wp--preset--color--black) !important;
	border-radius: 6px;
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.26);
	overflow: hidden;
}

/* On dark group backgrounds, black hover fill disappears — outline instead */
.has-black-background-color .wp-block-button:has(> .wp-block-button__link.has-red-background-color:hover),
.has-black-background-color .wp-block-button:has(> .wp-block-button__link.has-red-background-color:focus-visible) {
	background-color: transparent !important;
	box-shadow: none;
	overflow: visible;
}

.has-black-background-color .wp-block-button .wp-block-button__link.has-red-background-color {
	box-sizing: border-box;
	border: 3px solid transparent;
	border-radius: 6px;
}

.has-black-background-color .wp-block-button .wp-block-button__link.has-red-background-color:hover,
.has-black-background-color .wp-block-button .wp-block-button__link.has-red-background-color:focus-visible {
	border-color: var(--wp--preset--color--white);
}

.wp-block-button .wp-block-button__link.has-red-background-color:hover,
.wp-block-button .wp-block-button__link.has-red-background-color:focus-visible {
	background-color: transparent !important;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--white) 0%,
		var(--wp--preset--color--integrity-yellow) 28%,
		var(--wp--preset--color--white) 50%,
		var(--wp--preset--color--integrity-yellow) 72%,
		var(--wp--preset--color--white) 100%
	) !important;
	background-size: 200% 100% !important;
	background-repeat: no-repeat !important;
	background-position: 0% 50%;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	animation: pli-text-glare-shift 3s ease infinite !important;
	box-shadow: none;
	text-shadow: none;
}

/* Secondary (on dark): 3px white outline, white text, red hover */
.wp-block-button.is-style-pli-secondary .wp-block-button__link {
	box-sizing: border-box;
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 3px solid var(--wp--preset--color--white);
	font-size: 1.5rem;
	line-height: 1.3;
	font-weight: 600;
	padding: calc(0.875rem - 3px) calc(1.75rem - 3px);
	text-decoration: none;
}

.wp-block-button.is-style-pli-secondary:has(> .wp-block-button__link.has-red-background-color:hover),
.wp-block-button.is-style-pli-secondary:has(> .wp-block-button__link.has-red-background-color:focus-visible) {
	background-color: var(--wp--preset--color--red) !important;
	border-radius: 6px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.38);
	overflow: hidden;
}

.wp-block-button.is-style-pli-secondary .wp-block-button__link:not(.has-red-background-color):hover,
.wp-block-button.is-style-pli-secondary .wp-block-button__link:not(.has-red-background-color):focus-visible {
	background-color: var(--wp--preset--color--red) !important;
	background-image: none !important;
	border-color: var(--wp--preset--color--red);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.38);
	color: var(--wp--preset--color--white) !important;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.45);
}

.wp-block-button.is-style-pli-secondary .wp-block-button__link.has-red-background-color:hover,
.wp-block-button.is-style-pli-secondary .wp-block-button__link.has-red-background-color:focus-visible {
	background-color: transparent !important;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--white) 0%,
		var(--wp--preset--color--integrity-yellow) 28%,
		var(--wp--preset--color--white) 50%,
		var(--wp--preset--color--integrity-yellow) 72%,
		var(--wp--preset--color--white) 100%
	) !important;
	background-size: 200% 100% !important;
	background-repeat: no-repeat !important;
	background-position: 0% 50%;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	animation: pli-text-glare-shift 3s ease infinite !important;
	border-color: var(--wp--preset--color--red);
	box-shadow: none;
	text-shadow: none;
}

/* Outline: theme.json red fill on hover; glare only when link uses red background preset */
.wp-block-button.is-style-outline:has(> .wp-block-button__link.has-red-background-color:hover),
.wp-block-button.is-style-outline:has(> .wp-block-button__link.has-red-background-color:focus-visible) {
	background-color: var(--wp--preset--color--red) !important;
	border-radius: 6px;
	box-shadow: 0 5px 18px rgba(227, 27, 35, 0.32);
	overflow: hidden;
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-red-background-color):hover,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-red-background-color):focus-visible {
	background-color: var(--wp--preset--color--red) !important;
	background-image: none !important;
	box-shadow: 0 5px 18px rgba(227, 27, 35, 0.32);
	color: var(--wp--preset--color--white) !important;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.45);
}

.wp-block-button.is-style-outline .wp-block-button__link.has-red-background-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-red-background-color:focus-visible {
	background-color: transparent !important;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--white) 0%,
		var(--wp--preset--color--integrity-yellow) 28%,
		var(--wp--preset--color--white) 50%,
		var(--wp--preset--color--integrity-yellow) 72%,
		var(--wp--preset--color--white) 100%
	) !important;
	background-size: 200% 100% !important;
	background-repeat: no-repeat !important;
	background-position: 0% 50%;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	animation: pli-text-glare-shift 3s ease infinite !important;
	box-shadow: none;
	text-shadow: none;
}

/* H1 subheading / hero lead: 24px (paragraph block style) */
.wp-block-paragraph.is-style-pli-h1-subheading,
p.is-style-pli-h1-subheading {
	font-size: 1.5rem;
	line-height: 1.3;
}

/* Lead paragraph optional emphasis */
.wp-block-paragraph.is-style-lead,
p.is-style-lead {
	font-size: 1.125rem;
	line-height: 1.35;
}

/* Tooltipster theme: corporate black panel + red accent (Tooltipster 4 sideTip) */
.tooltipster-sidetip.tooltipster-petro-line .tooltipster-box {
	background: var(--wp--preset--color--black);
	border: 2px solid var(--wp--preset--color--red);
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.tooltipster-sidetip.tooltipster-petro-line .tooltipster-content {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	padding: 0.55rem 0.75rem;
}

.tooltipster-sidetip.tooltipster-petro-line.tooltipster-top .tooltipster-arrow-border {
	border-top-color: var(--wp--preset--color--red);
}

.tooltipster-sidetip.tooltipster-petro-line.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: var(--wp--preset--color--red);
}

.tooltipster-sidetip.tooltipster-petro-line.tooltipster-left .tooltipster-arrow-border {
	border-left-color: var(--wp--preset--color--red);
}

.tooltipster-sidetip.tooltipster-petro-line.tooltipster-right .tooltipster-arrow-border {
	border-right-color: var(--wp--preset--color--red);
}

/* -------------------------------------------------------------------------
   Sticky site header: fixed, hide on scroll down / show on scroll up (ml26-style)
   ------------------------------------------------------------------------- */

html {
	scroll-padding-top: var(--petro-line-scroll-padding, var(--petro-line-header-fallback-height, 148px));
}

.petro-line-skip-top-target {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	left: 0;
	top: 0;
}

/* Do not let the template-part wrapper create a containing block that breaks position:fixed */
header.wp-block-template-part:has(.petro-line-sticky-header) {
	margin: 0;
	padding: 0;
	border: none;
	overflow: visible;
	transform: none;
	filter: none;
	perspective: none;
}

/* Keep the footer template-part flush with the page content (no flow gap). */
footer.wp-block-template-part:has(.petro-line-footer-shell) {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* Keep the home page content flush with the header/template wrapper. */
body.home .entry-content.wp-block-post-content {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.petro-line-sticky-header.alignfull {
	margin-top: 0 !important;
}

.petro-line-sticky-header {
	left: 0;
	position: fixed !important;
	right: 0;
	top: 0;
	width: 100%;
	max-width: none;
	z-index: 99950;
	/* Transform is driven by GSAP; keep shadow transition on class only */
	transition: box-shadow 0.35s ease;
	will-change: transform;
}

.petro-line-sticky-header > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

.petro-line-sticky-header.header-sticky {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

body.admin-bar .petro-line-sticky-header {
	top: 32px;
}

/*
 * Block / Site Editor canvas: theme CSS is loaded in the editor iframe via add_editor_style.
 * Fixed header + body padding-top would cover template blocks and break selection/editing.
 */
.block-editor-iframe__body .petro-line-sticky-header,
.editor-styles-wrapper .petro-line-sticky-header {
	position: relative !important;
	top: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	z-index: auto;
	width: 100%;
	max-width: none;
	will-change: auto;
	box-shadow: none !important;
}

.block-editor-iframe__body:has(.petro-line-sticky-header),
.editor-styles-wrapper:has(.petro-line-sticky-header) {
	padding-top: 0 !important;
}

/*
 * Editor-only helper: make page featured-image cover easier to spot when
 * "Show template" is enabled in the page editor.
 */
.block-editor-iframe__body .wp-block-cover.petro-line-page-featured-media,
.editor-styles-wrapper .wp-block-cover.petro-line-page-featured-media {
	min-height: clamp(180px, 28vh, 320px);
	outline: 1px dashed color-mix(in srgb, var(--wp--preset--color--red) 40%, transparent);
	outline-offset: -1px;
}

.block-editor-iframe__body .wp-block-cover.petro-line-page-featured-media .wp-block-cover__background,
.editor-styles-wrapper .wp-block-cover.petro-line-page-featured-media .wp-block-cover__background {
	background-color: color-mix(in srgb, var(--wp--preset--color--black) 24%, transparent);
}


/*
 * Reserve top space only when the fixed header markup is present.
 * If the Site Editor saved an older header without .petro-line-sticky-header,
 * this avoids a large white band above the bar (padding with no overlay).
 */
body:has(.petro-line-sticky-header) {
	/*
	 * JS sets --petro-line-header-measured to the real fixed header height.
	 * The desktop fallback matches the saved two-row header closely enough to
	 * avoid a first-paint jump before the measurement lands.
	 */
	--petro-line-header-fallback-height: 148px;
	padding-top: var(--petro-line-header-measured, var(--petro-line-header-fallback-height));
}

/* Mobile overlay: dismiss helper class (lubepm-style) + Petro-Line palette */
html.petro-line-mobile-nav-dismissed .wp-block-navigation__responsive-container {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

html.petro-line-mobile-nav-dismissed {
	overflow: unset !important;
}


/* -------------------------------------------------------------------------
   Back to top + circular scroll progress (ml26-style, neutral black accent)
   ------------------------------------------------------------------------- */

.petro-line-to-top {
	--fill-percentage: 0%;
	align-items: center;
	backdrop-filter: blur(4px);
	background: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--black);
	bottom: max(1.25rem, var(--wp--preset--spacing--40, 40px));
	box-sizing: border-box;
	color: var(--wp--preset--color--black);
	cursor: pointer;
	display: none;
	height: 56px;
	justify-content: center;
	padding: 0;
	position: fixed;
	right: max(1.25rem, var(--wp--preset--spacing--40, 40px));
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	width: 56px;
	z-index: 99960;
}

.petro-line-to-top::before {
	background: conic-gradient(
		from 0deg,
		var(--wp--preset--color--black) 0%,
		var(--wp--preset--color--black) var(--fill-percentage),
		transparent var(--fill-percentage),
		transparent 100%
	);
	border-radius: 50%;
	content: "";
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: background 0.12s linear;
	width: 100%;
	z-index: -1;
	mask: radial-gradient(
		circle at center,
		transparent calc(50% - 3.5px),
		#000 calc(50% - 3.5px),
		#000 50%,
		transparent 50%
	);
	-webkit-mask: radial-gradient(
		circle at center,
		transparent calc(50% - 3.5px),
		#000 calc(50% - 3.5px),
		#000 50%,
		transparent 50%
	);
}

.petro-line-to-top:hover,
.petro-line-to-top:focus-visible {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	outline: none;
}

.petro-line-to-top svg {
	display: block;
	position: relative;
	transform: rotate(180deg);
	transform-origin: center;
	z-index: 1;
}

/* Attachment template: hero image + contextual navigation (templates/attachment.html) */
.petro-line-attachment-figure {
	margin: 0;
	text-align: center;
}

.petro-line-attachment-figure__img {
	box-sizing: border-box;
	display: inline-block;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

.petro-line-attachment-file__link a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.petro-line-attachment-file__link a:hover,
.petro-line-attachment-file__link a:focus-visible {
	color: var(--wp--preset--color--red);
}

.petro-line-attachment-next__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

.petro-line-attachment-next__link {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--surface-muted);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.petro-line-attachment-next__link:hover,
.petro-line-attachment-next__link:focus-visible {
	color: var(--wp--preset--color--red);
	border-bottom-color: var(--wp--preset--color--red);
	outline: none;
}

/* Attachment template: contextual related service link */
.petro-line-attachment-related {
	margin: 0;
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--surface-muted);
}

.petro-line-attachment-related__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 700;
}

.petro-line-attachment-related__body {
	margin: 0;
}

.petro-line-attachment-related__link {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--surface-muted);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.petro-line-attachment-related__link:hover,
.petro-line-attachment-related__link:focus-visible {
	color: var(--wp--preset--color--red);
	border-bottom-color: var(--wp--preset--color--red);
	outline: none;
}

/*
 * Layout / typography utilities (Additional CSS class in block → Advanced).
 * Spacing uses theme.json presets.
 */
.display-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: var(--wp--preset--spacing--60);
}

.balance-text {
	text-wrap: balance;
}

/*
 * Featured project card overlays inside Cover blocks:
 * force full cover width so gradient reaches the far edge.
 */
.wp-block-cover .wp-block-cover__inner-container > .petro-line-project-card-overlay {
	align-self: stretch;
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/*
 * Default page featured-image banner:
 * use a featured-image Cover block with parallax but keep it to one-third viewport height.
 */
 .wp-block-cover.petro-line-page-featured-media {
	border-bottom: 1px solid var(--wp--preset--color--red);
	min-height: unset;
	overflow: hidden;
	-webkit-mask-image: url("assets/images/shape-pipeline-bottom-mask.svg");
	mask-image: url("assets/images/shape-pipeline-bottom-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	padding: var(--wp--preset--spacing--60);
}

/* 1px accent stroke on the masked lower pipeline edge. */
.wp-block-cover.petro-line-page-featured-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--wp--preset--color--red);
	-webkit-mask-image: url("assets/images/shape-pipeline-bottom-stroke-mask.svg");
	mask-image: url("assets/images/shape-pipeline-bottom-stroke-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.wp-block-cover.petro-line-page-featured-media .wp-block-cover__image-background {
	object-fit: cover;
}

/*
 * Ensure the pre-image fallback stays dark, even if a block instance saved a
 * white custom overlay color inline.
 */
.wp-block-cover.petro-line-page-featured-media .wp-block-cover__background {
	background-color: var(--wp--preset--color--black) !important;
}

/* Page hero title: readable over photography when overlay dim is 0. */
.wp-block-cover.petro-line-page-featured-media .wp-block-post-title {
	max-width: 100%;
	text-shadow:
		0 0 1px rgb(0 0 0 / 0.85),
		0 1px 2px rgb(0 0 0 / 0.55),
		0 0 1.25rem rgb(0 0 0 / 0.35);
	text-wrap: balance;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

.overflow-hidden {
	overflow: hidden !important;
}

/*
 * WPForms skin (Petro-Line inputs + CTA): add the matching class on the form
 * root (same element as .wpforms-container — WPForms → Advanced → CSS Classes).
 * - Contact page: contact-form
 * - Pipeline Solutions (or other pages): pipeline-solutions-form
 */
@keyframes petro-line-contact-button-sheen {
	0% {
		transform: translateX(-130%);
	}

	100% {
		transform: translateX(130%);
	}
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container {
	--petro-line-contact-border: color-mix(in srgb, var(--wp--preset--color--black) 22%, var(--wp--preset--color--surface-muted) 78%);
	--petro-line-contact-bg: color-mix(in srgb, var(--wp--preset--color--white) 96%, var(--wp--preset--color--surface-muted) 4%);
	--petro-line-contact-text: var(--wp--preset--color--black);
	--petro-line-contact-accent: var(--wp--preset--color--red);
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container .wpforms-field-label,
:is(.contact-form, .pipeline-solutions-form).wpforms-container legend.wpforms-field-label {
	color: var(--petro-line-contact-text);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container .wpforms-field-sublabel {
	color: var(--petro-line-contact-text);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 600;
	line-height: 1.25;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select) {
	background-color: var(--petro-line-contact-bg);
	border: 2px solid var(--petro-line-contact-border);
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--petro-line-contact-text);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 500;
	line-height: 1.45;
	min-height: 3.3rem;
	padding: 0.85rem 1rem;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(.wpforms-field-medium, .wpforms-field-large) {
	max-width: 100% !important;
	width: 100% !important;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select):hover {
	background-color: var(--wp--preset--color--white);
	border-color: color-mix(in srgb, var(--petro-line-contact-accent) 38%, var(--petro-line-contact-border) 62%);
	transform: translateY(-1px);
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select):focus-visible {
	background-color: var(--wp--preset--color--white);
	border-color: var(--petro-line-contact-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--petro-line-contact-accent) 20%, transparent);
	outline: none;
	transform: translateY(-1px);
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container textarea {
	min-height: 11rem;
	padding-top: 0.95rem;
	resize: vertical;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input, textarea)::placeholder {
	color: color-mix(in srgb, var(--petro-line-contact-text) 58%, transparent);
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input, textarea, select).wpforms-error {
	border-color: var(--petro-line-contact-accent) !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--petro-line-contact-accent) 16%, transparent);
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container em.wpforms-error {
	background: transparent;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0;
	padding-right: 0;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit {
	background-color: var(--wp--preset--color--red) !important;
	border: 3px solid transparent;
	border-radius: 6px;
	box-shadow: 0 5px 18px rgba(227, 27, 35, 0.26);
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	min-height: 3.35rem;
	padding: calc(0.875rem - 3px) calc(1.75rem - 3px);
	position: relative;
	overflow: hidden;
	text-shadow: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 -140%;
	width: 46%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba(255, 255, 255, 0.12) 30%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.12) 70%,
		transparent 100%
	);
	pointer-events: none;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:hover,
:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:focus-visible {
	background-color: var(--wp--preset--color--black) !important;
	border-color: var(--wp--preset--color--red);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:hover::before,
:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:focus-visible::before {
	animation: petro-line-contact-button-sheen 0.85s ease;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--red);
	outline-offset: 3px;
}

:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:active {
	transform: translateY(0);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.26);
}

/* -------------------------------------------------------------------------
   Responsive media-query map (ordered wide to narrow)
   Keep styles token-driven; add only Petro-Line-specific rules per breakpoint.
   ------------------------------------------------------------------------- */
@media (max-width: 1800px) {
	/* Keep primary nav on one line at large/small desktop widths (e.g. 1600px). */
	.petro-line-main-header__row {
		gap: clamp(0.875rem, 1.5vw, 1.5rem) !important;
	}

	.petro-line-main-header__actions {
		gap: clamp(0.75rem, 1.2vw, 1.125rem) !important;
	}

	.petro-line-main-header .wp-block-navigation__container {
		flex-wrap: nowrap !important;
		gap: clamp(0.75rem, 1.05vw, 1.125rem) !important;
	}

	.petro-line-main-header .wp-block-navigation-item {
		white-space: nowrap;
	}

	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
		font-size: clamp(1rem, 0.92vw, 1.125rem);
	}

	.petro-line-main-header .wp-block-button .wp-block-button__link {
		font-size: clamp(1.125rem, 1.15vw, 1.375rem);
		padding: clamp(0.62rem, 0.75vw, 0.78rem) clamp(1.2rem, 1.65vw, 1.55rem);
		white-space: nowrap;
	}
}

@media (min-width: 1081px) and (max-width: 1450px) {
	/* Prevent CTA text wrap while preserving one-line nav near 1400px. */
	.petro-line-main-header {
		padding-left: clamp(0.55rem, 1.1vw, 0.9rem) !important;
		padding-right: clamp(0.55rem, 1.1vw, 0.9rem) !important;
	}

	.petro-line-main-header .wp-block-site-logo img {
		max-width: clamp(136px, 11vw, 178px);
	}

	.petro-line-main-header__actions {
		gap: clamp(0.55rem, 1vw, 0.9rem) !important;
		flex-wrap: nowrap !important;
	}

	.petro-line-main-header .wp-block-navigation__container {
		gap: clamp(0.55rem, 0.9vw, 0.82rem) !important;
	}

	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
		font-size: clamp(0.84rem, 0.8vw, 0.96rem);
	}

	.petro-line-main-header .wp-block-buttons,
	.petro-line-main-header .wp-block-button {
		flex: 0 0 auto;
	}

	.petro-line-main-header .wp-block-button .wp-block-button__link {
		font-size: clamp(0.92rem, 0.88vw, 1.04rem);
		line-height: 1.15;
		padding: 0.54rem 0.9rem;
		white-space: nowrap;
	}
}

@media (min-width: 1081px) and (max-width: 1320px) {
	/* Tighten the critical range where CTA clipping starts. */
	.petro-line-main-header .wp-block-site-logo img {
		max-width: clamp(124px, 10.4vw, 160px);
	}

	.petro-line-main-header .wp-block-navigation__container {
		gap: clamp(0.45rem, 0.65vw, 0.68rem) !important;
	}

	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
		font-size: clamp(0.79rem, 0.7vw, 0.9rem);
	}

	.petro-line-main-header .wp-block-button .wp-block-button__link {
		font-size: clamp(0.86rem, 0.78vw, 0.95rem);
		padding: 0.48rem 0.75rem;
	}
}

@media (max-width: 1260px) {
	.petro-line-main-header {
		padding-left: clamp(0.45rem, 0.9vw, 0.7rem) !important;
		padding-right: clamp(0.45rem, 0.9vw, 0.7rem) !important;
	}

	.petro-line-main-header .wp-block-navigation__container {
		gap: clamp(0.85rem, 1.55vw, 1.2rem) !important;
	}

	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.petro-line-main-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
		font-size: clamp(0.68rem, 0.56vw, 0.78rem) !important;
		line-height: 1.1;
	}

	.petro-line-main-header__actions {
		gap: clamp(0.75rem, 1.15vw, 1rem) !important;
	}

	.petro-line-main-header .wp-block-button .wp-block-button__link {
		font-size: clamp(0.8rem, 0.72vw, 0.9rem) !important;
		padding: 0.44rem 0.66rem;
	}

	.petro-line-main-header .wp-block-site-logo img {
		max-width: clamp(114px, 9.2vw, 146px);
	}

	.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-link {
		gap: clamp(0.65rem, 1vw, 0.85rem);
		padding-top: 0.42rem !important;
		padding-bottom: 0.42rem !important;
	}

	.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-thumb {
		width: clamp(118px, 13vw, 140px);
		max-width: 34%;
	}

	.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-text {
		gap: 0.18em;
	}

	.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-text .wp-block-navigation-item__label {
		font-size: clamp(0.9rem, 1.25vw, 1rem);
		line-height: 1.15;
	}

	.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-desc,
	.petro-line-main-header .wp-block-navigation__submenu-container .wp-block-navigation-item__description,
	.petro-line-main-header .wp-block-navigation__submenu-container .petro-line-rich-nav-text .wp-block-navigation-item__description {
		font-size: clamp(0.72rem, 1vw, 0.8rem);
		line-height: 1.22;
	}
}

/* Desktop: brief submenu reset after link click (lubepm / rp26 pattern) */
@media (min-width: 1081px) {
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.wp-block-navigation__submenu-container.petro-line-submenu-clicked {
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

@media (max-width: 1080px) {
	/* Match mobile trigger to 1080px (override core's narrower default). */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	.wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	/* Disable sticky behavior on tablet/mobile widths. */
	.petro-line-sticky-header {
		position: relative !important;
		top: 0 !important;
		left: auto;
		right: auto;
		transform: none !important;
		will-change: auto;
	}

	.petro-line-sticky-header.header-sticky,
	.petro-line-sticky-header.header-hidden {
		box-shadow: none;
	}

	body:has(.petro-line-sticky-header) {
		padding-top: 0;
	}

	.petro-line-main-header__actions > .wp-block-buttons {
		display: none !important;
	}

	.petro-line-top-bar .wp-block-group > .wp-block-group {
		width: 100%;
	}

	.petro-line-top-bar p,
	.petro-line-top-bar .has-small-font-size {
		margin: 0;
		font-size: clamp(0.72rem, 1.25vw, 0.82rem) !important;
		line-height: 1.25;
	}

	.petro-line-top-bar .has-text-align-right {
		text-align: left !important;
	}

	.petro-line-main-header__row,
	.petro-line-main-header__actions {
		flex-wrap: wrap !important;
	}

	.petro-line-main-header__row {
		flex-wrap: nowrap !important;
		row-gap: 0;
		align-items: center;
	}

	.petro-line-main-header .wp-block-site-logo img {
		height: auto;
		max-width: clamp(150px, 46vw, 200px);
	}

	.petro-line-main-header__actions {
		align-items: center;
		flex: 0 0 auto;
		justify-content: flex-end !important;
		margin-left: auto;
		row-gap: 0;
		width: auto;
	}

	.petro-line-main-header__actions .wp-block-navigation {
		margin: 0;
		width: auto;
	}

	.petro-line-main-header__actions .wp-block-navigation__responsive-container-open {
		align-items: center;
		display: inline-flex;
		height: 48px;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 48px;
	}

	.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
		animation: petro-line-mobile-backdrop-fade-in 0.24s ease-out both !important;
		background-color: color-mix(in srgb, var(--wp--preset--color--black) 67%, transparent);
		height: 100vh !important;
		max-height: 100vh !important;
		opacity: 1 !important;
		overflow-y: auto !important;
		padding: 0 !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 99999 !important;
	}

	.wp-block-navigation__responsive-container-open .petro-line-nav-icon,
	.wp-block-navigation__responsive-container-close .petro-line-nav-icon {
		display: block;
		flex: 0 0 48px;
		height: 32px !important;
		max-height: none !important;
		max-width: none !important;
		min-height: 32px;
		min-width: 48px;
		width: 48px !important;
	}

	.wp-block-navigation__responsive-container-close {
		align-items: center;
		color: var(--wp--preset--color--red);
		height: 48px;
		justify-content: center;
		padding: 0;
		transition: color 0.24s ease;
		width: 48px;
		z-index: 100000;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close .petro-line-nav-icon {
		opacity: 0;
		transition: opacity 0.12s ease;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close.petro-line-nav-toggle-active .petro-line-nav-icon {
		opacity: 1;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		box-sizing: border-box;
		height: 100%;
		margin: 0 !important;
		max-width: none !important;
		padding: 0 !important;
		width: 100% !important;
	}

	/* Mobile drawer layout (rp26-style): left panel, clear rows, readable links. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		--petro-line-mobile-drawer-padding: clamp(0.875rem, 3.5vw, 1.25rem);
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		left: 0;
		margin: 0 !important;
		margin-left: 0 !important;
		width: min(84vw, 420px);
		max-width: 100vw;
		min-height: 100vh;
		padding: 0 var(--petro-line-mobile-drawer-padding) !important;
		box-sizing: border-box;
		background: var(--wp--preset--color--white);
		animation: petro-line-mobile-drawer-slide-in 0.3s ease-out both;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin: 0 !important;
		margin-left: 0 !important;
		padding: 0 !important;
		padding-left: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--muted-grey) 48%, var(--wp--preset--color--surface-muted));
		margin: 0;
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
		border-bottom: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		color: var(--wp--preset--color--black);
		display: flex;
		align-items: center;
		-webkit-tap-highlight-color: color-mix(in srgb, var(--wp--preset--color--red) 30%, transparent);
		touch-action: manipulation;
		width: 100%;
		min-height: 40px;
		line-height: 1.35;
		padding: 0.5rem 0.75rem 0.5rem 1rem;
		text-align: left;
		box-sizing: border-box;
		transition:
			background-color 0.18s ease,
			color 0.18s ease,
			outline-color 0.18s ease,
			transform 0.18s ease;
	}

	.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
	.wp-block-navigation__responsive-container.is-menu-open .petro-line-current-nav-item > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open .petro-line-current-nav-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.petro-line-current-nav-link,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.petro-line-current-nav-link .wp-block-navigation-item__label {
		color: var(--wp--preset--color--red);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
		outline: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.petro-line-mobile-link-tapped {
		background-color: color-mix(in srgb, var(--wp--preset--color--red) 15%, transparent);
		color: var(--wp--preset--color--red);
		outline: 2px solid var(--wp--preset--color--red);
		outline-offset: -2px;
		transform: scale(0.98);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		padding-right: 2.9rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		position: relative;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		width: 2rem;
		height: 2rem;
		min-height: 2rem;
		padding: 0;
		color: var(--wp--preset--color--black);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s ease;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
		outline: 2px solid var(--wp--preset--color--red);
		outline-offset: 2px;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		margin-left: 0 !important;
		padding: 0 !important;
		padding-left: 0 !important;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--small, 0.95rem);
		padding: 0.42rem 0.75rem 0.42rem 1.2rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.petro-line-mobile-link-tapped {
		background-color: color-mix(in srgb, var(--wp--preset--color--red) 20%, transparent);
		color: var(--wp--preset--color--red);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: "•";
		display: inline-block;
		margin-right: 0.4rem;
		color: var(--wp--preset--color--black);
		font-size: 0.8rem;
		line-height: 1;
	}

	/* Mobile nav submenu links should be text-only (hide card image + descriptions). */
	.wp-block-navigation__responsive-container.is-menu-open .petro-line-rich-nav-link {
		display: block;
	}

	.wp-block-navigation__responsive-container.is-menu-open .petro-line-rich-nav-thumb,
	.wp-block-navigation__responsive-container.is-menu-open .petro-line-rich-nav-desc,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__description {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .petro-line-rich-nav-text {
		display: inline;
	}

	h1 {
		font-size: clamp(2.4rem, 4.2vw, 2.9rem);
	}

	h2 {
		font-size: clamp(2.05rem, 3.6vw, 2.45rem);
	}

	h3 {
		font-size: clamp(1.75rem, 3vw, 2.05rem);
	}

	h4 {
		font-size: clamp(1.5rem, 2.6vw, 1.8rem);
	}

	h5 {
		font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	}

	h6 {
		font-size: clamp(1.08rem, 1.8vw, 1.22rem);
	}
}

@media (max-width: 1024px) {
	/* Hero and section rows: tighten copy blocks and CTA spacing on tablet. */
	.petro-line-hero-home .wp-block-heading,
	.petro-line-hero-home .wp-block-heading.has-display-font-size {
		font-size: clamp(2rem, 6vw, 3rem) !important;
	}

	.petro-line-hero-home .wp-block-paragraph.is-style-pli-h1-subheading,
	.petro-line-hero-home p.is-style-pli-h1-subheading,
	.petro-line-hero-home .wp-block-paragraph[style*="font-size:24px"] {
		font-size: clamp(1.125rem, 3.2vw, 1.5rem) !important;
	}

	.petro-line-hero-home .border-left-petroline-style,
	.petro-line-hero-home .wp-block-group.border-left-petroline-style {
		padding-right: var(--wp--preset--spacing--20) !important;
	}

	/* Project cards: remove desktop indent from follow-up copy on narrow viewports. */
	.petro-line-project-card-overlay + .balance-text {
		padding-left: 0 !important;
	}

	/* Grid-heavy sections should collapse to one column before phone widths. */
	main .is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 782px) {
	.petro-line-footer-inner {
		padding-top: clamp(3rem, 6vw, 5rem) !important;
		padding-bottom: clamp(3rem, 6vw, 5rem) !important;
		padding-left: clamp(2.5rem, 5vw, 4rem) !important;
		padding-right: clamp(2.5rem, 5vw, 4rem) !important;
	}

	.petro-line-footer-columns {
		align-items: flex-start;
	}

	.petro-line-footer-columns > .wp-block-column {
		padding-top: 0.15rem;
	}

	.petro-line-main-header .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container,
	.petro-line-main-header .wp-block-navigation__container > .has-child > a.wp-block-navigation-item__content ~ .wp-block-navigation__submenu-container,
	.petro-line-main-header .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child > .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container,
	.petro-line-main-header .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child > a.wp-block-pages-list__item__link ~ .wp-block-navigation__submenu-container,
	.petro-line-main-header .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child > .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container,
	.petro-line-main-header .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child > a.wp-block-pages-list__item__link ~ .wp-block-navigation__submenu-container,
	.petro-line-main-header .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation-submenu__toggle ~ .wp-block-navigation__submenu-container,
	.petro-line-main-header .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child > a.wp-block-navigation-item__content ~ .wp-block-navigation__submenu-container {
		min-width: 12.5rem !important;
		max-width: min(540px, calc(100vw - 2rem)) !important;
		width: max-content !important;
		box-sizing: border-box;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
	}

	/* Nested flyouts: strip centering transform; core sets left/right (e.g. left:100%). */
	.petro-line-main-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		transform: none !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar .petro-line-sticky-header {
		top: 46px;
	}
}

@media (max-width: 781px) {
	main {
		--petro-line-mobile-section-padding: var(--wp--preset--spacing--40);
		--wp--style--root--padding-left: var(--wp--preset--spacing--40);
		--wp--style--root--padding-right: var(--wp--preset--spacing--40);
	}

	.petro-line-main-header {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	.petro-line-footer-inner {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	.wp-block-cover.petro-line-products-tdw-support {
		padding-right: 0;
		padding-left: 0;
	}

	body.home .wp-block-cover.alignfull:has(.petro-line-scroll-in),
	.petro-line-quality-why-choose .wp-block-cover.alignfull,
	body.page-id-20 .wp-block-cover.alignfull.is-light.has-parallax:has(.wp-image-75),
	.wp-block-cover.petro-line-quality-hse,
	.wp-block-cover.petro-line-home-cta-band {
		padding-right: 0;
		padding-left: 0;
	}

	.wp-block-cover.alignfull.is-dark:has(.wp-image-112) > .wp-block-cover__inner-container > .wp-block-group.has-link-color {
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
	}

	.wp-block-cover.alignfull.is-dark:has(.wp-image-112) > .wp-block-cover__inner-container > .wp-block-group.has-link-color > .wp-block-group.has-global-padding {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.petro-line-quality-why-choose .wp-block-cover__inner-container > .wp-block-group.has-global-padding {
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
	}

	body.page-id-20 .wp-block-cover.alignfull.is-light.has-parallax:has(.wp-image-75) > .wp-block-cover__inner-container > .wp-block-group.has-global-padding {
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
	}

	.petro-line-quality-why-choose .border-left-petroline-style {
		padding-left: calc(6px + var(--wp--preset--spacing--20)) !important;
	}

	:where(#integrity-dig-services, #maintenance-construction, #turnkey-stopple) {
		padding-top: var(--petro-line-mobile-section-padding) !important;
		padding-bottom: var(--petro-line-mobile-section-padding) !important;
	}

	.wp-block-cover.alignfull:has(:where(#engineering-support, #tdw-technologies, .is-style-pli-heading-anim)) {
		padding-right: 0;
		padding-left: 0;
	}

	.wp-block-cover__inner-container > .wp-block-group:has(:where(#engineering-support, #tdw-technologies)) {
		padding-top: var(--petro-line-mobile-section-padding) !important;
		padding-bottom: var(--petro-line-mobile-section-padding) !important;
	}

	.wp-block-cover__inner-container .wp-block-columns:has(.is-style-pli-heading-anim) {
		padding-top: var(--petro-line-mobile-section-padding) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--petro-line-mobile-section-padding) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
	}

	#contact {
		padding-top: var(--petro-line-mobile-section-padding) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}

	.petro-line-footer-nav-columns {
		flex-direction: column;
	}

	:is(.contact-form, .pipeline-solutions-form).wpforms-container .wpforms-field-row,
	:is(.contact-form, .pipeline-solutions-form).wpforms-container .wpforms-field-row-block {
		display: block;
	}

	:is(.contact-form, .pipeline-solutions-form).wpforms-container .wpforms-one-half,
	:is(.contact-form, .pipeline-solutions-form).wpforms-container .wpforms-one-third,
	:is(.contact-form, .pipeline-solutions-form).wpforms-container .wpforms-two-thirds {
		margin-left: 0 !important;
		width: 100% !important;
	}
}

@media (max-width: 768px) {
	h1 {
		font-size: clamp(1.8rem, 7.2vw, 2.2rem);
	}

	.wp-block-cover.petro-line-page-featured-media {
		padding-top: clamp(2rem, 7vw, var(--wp--preset--spacing--60));
		padding-right: var(--wp--preset--spacing--40);
		padding-bottom: clamp(2rem, 7vw, var(--wp--preset--spacing--60));
		padding-left: var(--wp--preset--spacing--40);
	}

	.wp-block-cover.petro-line-page-featured-media .wp-block-post-title {
		font-size: clamp(2.35rem, 7.2vw, 3.45rem) !important;
		line-height: 1.12 !important;
	}

	h2 {
		font-size: clamp(1.55rem, 6vw, 1.9rem);
	}

	h3 {
		font-size: clamp(1.35rem, 5vw, 1.65rem);
	}

	h4 {
		font-size: clamp(1.2rem, 4.2vw, 1.45rem);
	}

	h5 {
		font-size: clamp(1.08rem, 3.7vw, 1.25rem);
	}

	h6 {
		font-size: 1rem;
	}

	.wp-block-buttons {
		width: 100%;
		align-items: center;
	}

	.wp-block-button {
		width: 100%;
		max-width: 100%;
	}

	.wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 740px) {
	/* Keep top bar compact when utility text wraps on small screens. */
	.petro-line-top-bar {
		padding-top: 0.3rem !important;
		padding-bottom: 0.3rem !important;
		padding-left: 0.55rem !important;
		padding-right: 0.55rem !important;
	}

	.petro-line-top-bar .wp-block-group.is-layout-flex {
		gap: 0.25rem 0.55rem !important;
	}

	.petro-line-top-bar p,
	.petro-line-top-bar .has-small-font-size {
		font-size: clamp(0.64rem, 2.2vw, 0.72rem) !important;
		line-height: 1.15;
	}
}

@media (max-width: 640px) {
	h1 {
		font-size: clamp(1.65rem, 8.2vw, 2rem);
	}

	.wp-block-cover.petro-line-page-featured-media {
		padding-top: clamp(1.5rem, 6vw, 2.5rem);
		padding-right: var(--wp--preset--spacing--40);
		padding-bottom: clamp(1.5rem, 6vw, 2.5rem);
		padding-left: var(--wp--preset--spacing--40);
	}

	.wp-block-cover.petro-line-page-featured-media .wp-block-post-title {
		font-size: clamp(2.15rem, 10vw, 2.85rem) !important;
	}

	h2 {
		font-size: clamp(1.45rem, 6.7vw, 1.75rem);
	}

	h3 {
		font-size: clamp(1.28rem, 5.6vw, 1.55rem);
	}

	h4 {
		font-size: clamp(1.15rem, 4.8vw, 1.35rem);
	}

	h5 {
		font-size: clamp(1.05rem, 4vw, 1.18rem);
	}

	h6 {
		font-size: 0.95rem;
	}
}

/* -------------------------------------------------------------------------
   Motion preference media query
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.wp-block-button:has(> .wp-block-button__link.has-red-background-color:hover),
	.wp-block-button:has(> .wp-block-button__link.has-red-background-color:focus-visible) {
		background-color: transparent !important;
		box-shadow: none;
		overflow: visible;
	}

	.wp-block-button .wp-block-button__link.has-red-background-color:hover,
	.wp-block-button .wp-block-button__link.has-red-background-color:focus-visible {
		animation: none;
		background-color: var(--wp--preset--color--black) !important;
		background-image: none !important;
		color: var(--wp--preset--color--white) !important;
		-webkit-text-fill-color: unset !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		background-position: 0 0 !important;
		box-shadow: 0 5px 18px rgba(0, 0, 0, 0.26);
		text-shadow:
			0 1px 0 rgba(255, 255, 255, 0.2),
			0 2px 6px rgba(0, 0, 0, 0.45);
	}

	.has-black-background-color .wp-block-button .wp-block-button__link.has-red-background-color:hover,
	.has-black-background-color .wp-block-button .wp-block-button__link.has-red-background-color:focus-visible {
		background-color: var(--wp--preset--color--red) !important;
		border-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--white) !important;
	}

	.wp-block-button.is-style-pli-secondary:has(> .wp-block-button__link.has-red-background-color:hover),
	.wp-block-button.is-style-pli-secondary:has(> .wp-block-button__link.has-red-background-color:focus-visible) {
		background-color: transparent !important;
		box-shadow: none;
		overflow: visible;
	}

	.wp-block-button.is-style-pli-secondary .wp-block-button__link.has-red-background-color:hover,
	.wp-block-button.is-style-pli-secondary .wp-block-button__link.has-red-background-color:focus-visible {
		animation: none;
		background-color: var(--wp--preset--color--red) !important;
		background-image: none !important;
		color: var(--wp--preset--color--white) !important;
		-webkit-text-fill-color: unset !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		background-position: 0 0 !important;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.38);
		text-shadow:
			0 1px 0 rgba(255, 255, 255, 0.2),
			0 2px 6px rgba(0, 0, 0, 0.45);
	}

	.wp-block-button.is-style-outline:has(> .wp-block-button__link.has-red-background-color:hover),
	.wp-block-button.is-style-outline:has(> .wp-block-button__link.has-red-background-color:focus-visible) {
		background-color: transparent !important;
		box-shadow: none;
		overflow: visible;
	}

	.wp-block-button.is-style-outline .wp-block-button__link.has-red-background-color:hover,
	.wp-block-button.is-style-outline .wp-block-button__link.has-red-background-color:focus-visible {
		animation: none;
		background-color: var(--wp--preset--color--red) !important;
		background-image: none !important;
		color: var(--wp--preset--color--white) !important;
		-webkit-text-fill-color: unset !important;
		-webkit-background-clip: border-box !important;
		background-clip: border-box !important;
		background-position: 0 0 !important;
		box-shadow: 0 5px 18px rgba(227, 27, 35, 0.32);
		text-shadow:
			0 1px 0 rgba(255, 255, 255, 0.2),
			0 2px 6px rgba(0, 0, 0, 0.45);
	}

	.petro-line-sticky-header,
	body:has(.petro-line-sticky-header) {
		transition: none !important;
	}

	.petro-line-nav-icon::before,
	.petro-line-nav-icon::after,
	.petro-line-nav-icon__line,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		transition: none !important;
	}

	.wp-block-navigation__responsive-container.has-modal-open.is-menu-open,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		animation: none !important;
	}

	:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select),
	:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit {
		transition: none;
	}

	:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit::before {
		animation: none !important;
	}

	:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select):hover,
	:is(.contact-form, .pipeline-solutions-form).wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select):focus-visible,
	:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:hover,
	:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:focus-visible,
	:is(.contact-form, .pipeline-solutions-form).wpforms-container button.wpforms-submit:active {
		transform: none;
	}
}