/*
Theme Name: The Safety Pro Group
Theme URI: https://thesafetyprogroup.com/
Description: Child theme of Hello Elementor for The Safety Pro Group marketing site. Design styling lives in Elementor Site Settings (Global Colors, Global Fonts, Theme Style); keep this file for small overrides only.
Author: The Safety Pro Group
Template: hello-elementor
Version: 1.1.5
Text Domain: tspg-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Add your custom styles here */

/* Keyboard focus: one designed ring for every link, button, CTA, linked card and
   field. 2px dashed outline (never a border, so nothing shifts) in the Accent
   teal blue on light grounds (7.6:1 on white) and white on dark grounds
   (sections tagged .tspg-on-dark). The body prefix outranks Hello's reset
   (solid black outline + white box-shadow) and Elementor's widget focus styles. */
body :is(a[href], button, summary, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px dashed var(--e-global-color-accent);
	outline-offset: 3px;
	box-shadow: none;
}
body .tspg-on-dark :is(a[href], button, summary, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
	outline-color: var(--e-global-color-tspg_white);
}
/* Linked cards (containers rendered as links): a little more room around the card. */
body a.e-con:focus-visible {
	outline-offset: 4px;
}
main#content:focus {
	outline: none;
}

/* Skip link (Hello's "Skip to content", targets <main id="content">): hidden until
   focused, then a full-width button across the top of the page, below the admin bar. */
body .skip-link.screen-reader-text:focus {
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	padding: 16px 20px;
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-tspg_white);
	font-family: var(--e-global-typography-tspg_button-font-family), sans-serif;
	font-size: var(--e-global-typography-tspg_button-font-size);
	font-weight: var(--e-global-typography-tspg_button-font-weight);
	letter-spacing: var(--e-global-typography-tspg_button-letter-spacing);
	text-transform: var(--e-global-typography-tspg_button-text-transform);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
body .skip-link.screen-reader-text:focus-visible {
	outline: 2px dashed var(--e-global-color-tspg_white);
	outline-offset: -6px;
}
body .skip-link.screen-reader-text:hover {
	background-color: var(--e-global-color-accent);
}

/* Inline text links in paragraph copy on light grounds: Link Blue global
   (5.3:1 on white, 4.9:1 on Surface Alt), always underlined so they don't rely on color. */
.elementor-widget-text-editor a,
.elementor-icon-list-text a {
	color: var(--e-global-color-tspg_link_blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.elementor-widget-text-editor a:hover,
.elementor-icon-list-text a:hover {
	color: var(--e-global-color-secondary);
	text-decoration-thickness: 2px;
}

/* Inline text links on dark grounds: use the surrounding (global) text color,
   underlined so they stay identifiable without relying on color. */
.tspg-on-dark .elementor-widget-text-editor a,
.tspg-on-dark .elementor-icon-list-text a {
	color: inherit;
	text-decoration: underline;
}

/* Breadcrumbs (Rank Math shortcode inside the "Breadcrumb Bar" template). */
.rank-math-breadcrumb p {
	margin: 0;
}
.rank-math-breadcrumb a {
	color: var(--e-global-color-tspg_slate_500);
	text-decoration: none;
}
.rank-math-breadcrumb a:hover {
	color: var(--e-global-color-accent);
	text-decoration: underline;
}
.rank-math-breadcrumb .separator {
	margin: 0 6px;
}
.rank-math-breadcrumb .last {
	color: var(--e-global-color-secondary);
	font-weight: 600;
}

/* Data tables: real <table> markup for screen readers, styled from globals. */
.tspg-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--e-global-color-tspg_border_warm);
	border-radius: 8px;
	background: var(--e-global-color-tspg_white);
}
.tspg-table {
	width: 100%;
	min-width: 520px;
	margin: 0;
	border-collapse: collapse;
}
.tspg-table th,
.tspg-table td {
	padding: 14px 18px;
	border: 0;
	text-align: left;
	vertical-align: top;
}
.tspg-table thead th {
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-tspg_white);
	font-family: var(--e-global-typography-tspg_table_header-font-family), sans-serif;
	font-size: var(--e-global-typography-tspg_table_header-font-size);
	font-weight: var(--e-global-typography-tspg_table_header-font-weight);
	letter-spacing: var(--e-global-typography-tspg_table_header-letter-spacing);
}
.tspg-table td,
.tspg-table tbody th {
	border-top: 1px solid var(--e-global-color-tspg_border_warm);
	color: var(--e-global-color-text);
	font-size: var(--e-global-typography-tspg_card_copy-font-size);
	line-height: var(--e-global-typography-tspg_card_copy-line-height);
}
.tspg-table tbody th {
	color: var(--e-global-color-secondary);
	font-weight: 700;
}
.tspg-table tbody tr:nth-child(even) > * {
	background: var(--e-global-color-tspg_surface_alt);
}

/* Point lists: bold lead-in in Charcoal Navy, as designed. */
.tspg-points strong {
	color: var(--e-global-color-secondary);
}

/* Timeline step sub-lists (e.g. hierarchy of controls): square markers in the primary color. */
.tspg-step-list {
	margin: 12px 0 0;
	padding-left: 18px;
	list-style: square;
}
.tspg-step-list li {
	margin-bottom: 6px;
}
.tspg-step-list li::marker {
	color: var(--e-global-color-primary);
}
.tspg-step-list strong {
	color: var(--e-global-color-secondary);
}

/* FAQ accordions: no divider under the last question while it is collapsed. */
.elementor .elementor-widget.tspg-faq > .e-n-accordion > .e-n-accordion-item:last-of-type:not([open]) > .e-n-accordion-item-title {
	border-bottom-width: 0;
}

/* Long-form copy (policies, blog posts): heading scale and spacing from globals. */
.tspg-prose h2 {
	margin: 40px 0 12px;
	color: var(--e-global-color-secondary);
	font-family: var(--e-global-typography-tspg_h3_lead-font-family), sans-serif;
	font-size: var(--e-global-typography-tspg_h3_lead-font-size);
	font-weight: var(--e-global-typography-tspg_h3_lead-font-weight);
	line-height: var(--e-global-typography-tspg_h3_lead-line-height);
}
.tspg-prose h3 {
	margin: 28px 0 8px;
	color: var(--e-global-color-secondary);
	font-family: var(--e-global-typography-tspg_h3_card-font-family), sans-serif;
	font-size: var(--e-global-typography-tspg_h3_card-font-size);
	font-weight: var(--e-global-typography-tspg_h3_card-font-weight);
	line-height: var(--e-global-typography-tspg_h3_card-line-height);
}
.tspg-prose h2:first-child,
.tspg-prose h3:first-child {
	margin-top: 0;
}
.tspg-prose ul,
.tspg-prose ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.tspg-prose li {
	margin-bottom: 6px;
}
.tspg-prose li::marker {
	color: var(--e-global-color-primary);
}
.tspg-prose .elementor-widget-theme-post-content a {
	color: var(--e-global-color-tspg_link_blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Blog & News templates ---------- */

/* Pill navigation (Nav Menu widgets: Blog Categories, News Update Types). */
.tspg-pills .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tspg-pills .elementor-nav-menu--main .elementor-item {
	padding: 8px 17px;
	border: 1px solid var(--e-global-color-tspg_border_warm);
	border-radius: 999px;
	background: var(--e-global-color-tspg_surface_alt);
	color: var(--e-global-color-secondary);
}
.tspg-pills .elementor-nav-menu--main .elementor-item:hover {
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-accent);
}
.tspg-pills .elementor-nav-menu--main .elementor-item.elementor-item-active {
	border-color: var(--e-global-color-secondary);
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-tspg_white);
}
.tspg-pills .tspg-pill-news > .elementor-item:not(.elementor-item-active) {
	border-color: var(--e-global-color-tspg_sky_line);
	background: var(--e-global-color-tspg_ice_blue);
	color: var(--e-global-color-accent);
}

/* Optional pieces: hide wrappers whose dynamic content came back empty. */
.tspg-month:not(:has(.elementor-heading-title)),
.tspg-type-badge:not(:has(.elementor-heading-title)),
.tspg-news-thumb:not(:has(img)),
.tspg-news-figure:not(:has(img)),
.tspg-summary-item:not(:has(.tspg-summary-value .elementor-heading-title)),
.tspg-summary:not(:has(.tspg-summary-value .elementor-heading-title)) {
	display: none;
}

/* News feed variants (post classes from the Update Type taxonomy). The
   .elementor .e-loop-item prefix outranks Elementor's per-element CSS. */
.elementor .e-loop-item.update_type-deadline .tspg-news-card.e-con {
	border-color: var(--e-global-color-accent);
	background: var(--e-global-color-tspg_ice_blue);
}

.elementor .e-loop-item.update_type-deadline .tspg-type-badge.e-con {
	background: var(--e-global-color-accent);
}

.elementor .e-loop-item.update_type-deadline .tspg-type-badge .elementor-heading-title {
	color: var(--e-global-color-tspg_white);
}

.elementor .e-loop-item.update_type-office-notice .tspg-news-card.e-con,
.elementor .e-loop-item.update_type-announcement .tspg-news-card.e-con {
	border-width: 0 0 0 4px;
	border-color: var(--e-global-color-primary);
	border-radius: 0 8px 8px 0;
	background: var(--e-global-color-tspg_surface_alt);
}

.elementor .e-loop-item.update_type-office-notice .tspg-date-tile.e-con,
.elementor .e-loop-item.update_type-announcement .tspg-date-tile.e-con {
	border-color: transparent;
	background: transparent;
}

.elementor .e-loop-item.update_type-office-notice .tspg-date-month.e-con,
.elementor .e-loop-item.update_type-announcement .tspg-date-month.e-con {
	background: transparent;
}

.elementor .e-loop-item.update_type-office-notice .tspg-date-month .elementor-heading-title,
.elementor .e-loop-item.update_type-announcement .tspg-date-month .elementor-heading-title {
	color: var(--e-global-color-tspg_slate_500);
}

.elementor .e-loop-item.update_type-office-notice .tspg-read-update,
.elementor .e-loop-item.update_type-announcement .tspg-read-update {
	display: none;
}

.elementor .e-loop-item.update_type-office-notice .tspg-type-badge.e-con,
.elementor .e-loop-item.update_type-announcement .tspg-type-badge.e-con {
	border: 1px solid var(--e-global-color-tspg_border_warm);
	background: var(--e-global-color-tspg_white);
}

.elementor .e-loop-item.update_type-office-notice .tspg-type-badge .elementor-heading-title,
.elementor .e-loop-item.update_type-announcement .tspg-type-badge .elementor-heading-title {
	color: var(--e-global-color-text);
}

/* Linked category eyebrow above a post title. */
.tspg-eyebrow-link a {
	color: inherit;
	text-decoration: none;
}
.tspg-eyebrow-link a:hover {
	text-decoration: underline;
}

/* Post tags as pills (Post Info widget). */
.tspg-tags .elementor-post-info__terms-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0;
}
.tspg-tags .elementor-post-info__terms-list-item {
	padding: 6px 14px;
	border: 1px solid var(--e-global-color-tspg_border_warm);
	border-radius: 999px;
	background: var(--e-global-color-tspg_surface_alt);
	font-size: var(--e-global-typography-tspg_nav_pill-font-size);
	color: var(--e-global-color-secondary);
	text-decoration: none;
}
.tspg-tags .elementor-post-info__terms-list-item:hover {
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-accent);
}

/* Article body extras. */
.tspg-prose blockquote {
	margin: 12px 0 20px;
	padding: 4px 0 4px 26px;
	border-left: 3px solid var(--e-global-color-primary);
	color: var(--e-global-color-secondary);
	font-family: var(--e-global-typography-tspg_pull_quote-font-family), sans-serif;
	font-size: var(--e-global-typography-tspg_pull_quote-font-size);
	font-weight: var(--e-global-typography-tspg_pull_quote-font-weight);
	line-height: var(--e-global-typography-tspg_pull_quote-line-height);
}
.tspg-prose img {
	height: auto;
	border-radius: 8px;
}

/* Featured article without a featured image: text takes the full card. */
.tspg-featured-media:not(:has(img)) {
	display: none;
}
.elementor .tspg-featured-media:not(:has(img)) + .tspg-featured-body {
	--width: 100%;
	width: 100%;
}

/* News Update Type pills: no hover change (inactive pills keep their resting look). */
.tspg-pills--no-hover .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):hover,
.tspg-pills--no-hover .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):focus {
	border-color: var(--e-global-color-tspg_border_warm);
	background: var(--e-global-color-tspg_surface_alt);
	color: var(--e-global-color-secondary);
}

/* Subtle dot-grid background (Platforms We Support). Dots use the Border Warm global. */
.tspg-dot-grid {
	background-image: radial-gradient(var(--e-global-color-tspg_border_warm) 1px, transparent 1px);
	background-size: 22px 22px;
}

/* Header utility bar: comfortable tap targets on touch screens (WCAG 2.5.8, 24px minimum). */
@media (max-width: 860px) {
	.tspg-utility .elementor-icon-list-item > a {
		display: inline-flex;
		align-items: center;
		min-height: 28px;
	}
}

/* Cover photos: section and panel photos are real <img> tags (Image widget with class
   tspg-cover-media inside a container with class tspg-has-cover) rather than CSS
   backgrounds, so crawlers index them with their alt text. The image fills the container
   like background-size: cover and sits behind the overlay and the content. */
.e-con.tspg-has-cover {
	isolation: isolate;
}
.elementor .e-con.tspg-has-cover .elementor-widget.tspg-cover-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	max-width: none;
	margin: 0;
}
.elementor .tspg-cover-media .elementor-widget-container {
	height: 100%;
}
.elementor .tspg-cover-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Previous Page / Next Page pagination as pills (Loop Grid with class
   tspg-pill-pagination), matching the .tspg-pills links. Typography and text colors come
   from the widget's pagination settings (Nav Pill global, Secondary / Accent hover).
   Previous sits left, Next right; the unlinked placeholder Elementor prints on the
   first/last page is hidden. */
.tspg-pill-pagination .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
}
/* Elementor Pro falls back to the Secondary global (uppercase, tracked) for anything
   the Nav Pill global leaves unset. */
.elementor-widget-loop-grid.tspg-pill-pagination .elementor-pagination {
	text-transform: none;
	letter-spacing: normal;
}
.tspg-pill-pagination .elementor-pagination:has(> span.page-numbers.prev) {
	justify-content: flex-end;
}
.tspg-pill-pagination .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	padding: 8px 17px;
	border: 1px solid var(--e-global-color-tspg_border_warm);
	border-radius: 999px;
	background: var(--e-global-color-tspg_surface_alt);
	text-decoration: none;
}
.tspg-pill-pagination .elementor-pagination a.page-numbers:hover {
	border-color: var(--e-global-color-primary);
}
.tspg-pill-pagination .elementor-pagination span.page-numbers.prev,
.tspg-pill-pagination .elementor-pagination span.page-numbers.next {
	display: none;
}

/* Pill CTAs (Heading widgets with class tspg-pill-cta, Nav Pill typography): links
   sized like the site's pill links (.tspg-pills). Deep Blue (Accent) pill with white text on light
   grounds, Charcoal Navy on hover; on dark grounds the outline-button look (35% white
   border, white text) filling white on hover. Text colors come from each widget's
   color globals. In linked cards (the whole card is the link) the pill is the visual
   cue and reacts to the card's hover and focus. */
.elementor-widget-heading.tspg-pill-cta .elementor-heading-title > a,
a.e-con .elementor-widget-heading.tspg-pill-cta .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	padding: 8px 17px;
	border: 1px solid var(--e-global-color-accent);
	border-radius: 999px;
	background-color: var(--e-global-color-accent);
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.elementor-widget-heading.tspg-pill-cta .elementor-heading-title > a:hover,
a.e-con:hover .elementor-widget-heading.tspg-pill-cta .elementor-heading-title,
a.e-con:focus-visible .elementor-widget-heading.tspg-pill-cta .elementor-heading-title {
	border-color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-secondary);
}
.tspg-on-dark .elementor-widget-heading.tspg-pill-cta .elementor-heading-title > a,
.tspg-on-dark a.e-con .elementor-widget-heading.tspg-pill-cta .elementor-heading-title {
	border-color: var(--e-global-color-tspg_white_35);
	background-color: transparent;
}
.tspg-on-dark .elementor-widget-heading.tspg-pill-cta .elementor-heading-title > a:hover,
.tspg-on-dark a.e-con:hover .elementor-widget-heading.tspg-pill-cta .elementor-heading-title,
.tspg-on-dark a.e-con:focus-visible .elementor-widget-heading.tspg-pill-cta .elementor-heading-title {
	border-color: var(--e-global-color-tspg_white);
	background-color: var(--e-global-color-tspg_white);
	color: var(--e-global-color-secondary);
}

/* Cover photo that stacks on phones (container class tspg-cover-stack-mobile, e.g. the
   home hero): the whole photo shows at its 3:2 shape with the content (the consultation
   form) below it instead of over it. The overlay stays on the photo only. */
@media (max-width: 860px) {
	.elementor .e-con.tspg-cover-stack-mobile .elementor-widget.tspg-cover-media {
		position: relative;
		inset: auto;
		aspect-ratio: 3 / 2;
	}
	.e-con.tspg-cover-stack-mobile::before {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* Site menu popup: Elementor hides popup markup with this rule in popup.min.css, which
   the child theme loads without render-blocking (functions.php). The copy here keeps the
   popup hidden until that file arrives. */
[data-elementor-type="popup"]:not(.elementor-edit-area) {
	display: none;
}