/*
 * Link and focus accessibility (WCAG 2.2 AA). Shelby's handoff, 2026-10-06.
 *
 * Colours come from the Elementor globals added for this pass
 * (Site Settings → Global Colors): Link, Link Hover, Link on Dark,
 * Placeholder. Everything Elementor has a control for (menu colours, text
 * widget link colours, buttons, TOC, search icon) is set in Elementor; this
 * file only covers what it has no control for.
 */
:root {
	--ra-link: var(--e-global-color-a11ylnk, #355d77);
	--ra-link-hover: var(--e-global-color-a11ylkh, #274558);
	--ra-link-dark: var(--e-global-color-a11yftr, #c5d8e4);
	--ra-placeholder: var(--e-global-color-a11yplc, #4d6b7c);
}

/* Keyboard focus: visible on every element. The white halo in the offset
   keeps the ring readable on navy sections as well as white ones. */
:focus-visible {
	outline: 3px solid var(--ra-link);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #fff;
}
.elementor-location-footer :focus-visible {
	outline-color: #7fd0d0;
	box-shadow: none;
}

/* Skip link: theme markup, shown on focus. A white chip so it also passes
   where it lands over a navy hero (/plan/, /govern/). */
.skip-link.screen-reader-text:focus {
	color: var(--ra-link);
	background: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Links in running text can't rely on colour alone (link blue vs navy body
   text is under 3:1), so underline them. Only links inside text blocks:
   pages built in Elementor render inside a post-content widget, so a bare
   "post-content a" rule also caught card titles, card images, headshots,
   sitemap lists and FAQ titles (2026-10-14/16). Buttons are excluded. */
.elementor-widget-text-editor :is(p, li, td, dd, blockquote, figcaption) a:not(.elementor-button),
.elementor-widget-theme-post-content :is(p, li, td, dd, blockquote, figcaption) a:not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.elementor-widget-text-editor :is(p, li, td, dd, blockquote, figcaption) a:not(.elementor-button):hover,
.elementor-widget-theme-post-content :is(p, li, td, dd, blockquote, figcaption) a:not(.elementor-button):hover {
	text-decoration-thickness: 2px;
}
/* ...but not links inside any other widget nested in the content area
   (loop cards, images, sitemap, accordions, icon lists). */
.elementor-widget-theme-post-content .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) a {
	text-decoration: none;
}
/* Accordion/toggle question titles are <a> tags but act as headings, not
   links; when a FAQ sits inside a post-content area they caught the rule above. */
.elementor-widget-text-editor a.elementor-accordion-title,
.elementor-widget-theme-post-content a.elementor-accordion-title,
.elementor-widget-text-editor a.elementor-toggle-title,
.elementor-widget-theme-post-content a.elementor-toggle-title,
.elementor-widget-text-editor .e-n-accordion-item-title a,
.elementor-widget-theme-post-content .e-n-accordion-item-title a {
	text-decoration: none;
}
/* Footer legal links follow the handoff: underline on hover only. */
.elementor-location-footer .elementor-widget-text-editor a:not(.elementor-button) {
	text-decoration: none;
}
.elementor-location-footer .elementor-widget-text-editor a:not(.elementor-button):hover {
	text-decoration: underline;
}

/* Menus marked .ra-hover-underline (utility links, footer columns) and
   buttons marked .ra-hover-underline (Back to All Resources). */
.ra-hover-underline .elementor-item:hover,
.ra-hover-underline .elementor-item:focus-visible,
.ra-hover-underline .elementor-sub-item:hover,
.elementor-widget-button.ra-hover-underline .elementor-button:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Top bar: the whole bar is one link; darken "Learn More" with it. */
.ra-topbar:hover .ra-learn,
.ra-topbar:focus-visible .ra-learn {
	color: var(--ra-link-hover) !important;
	text-decoration-thickness: 2px;
}

/* Legacy HubSpot CTA buttons ("Get a Demo", "Download…") in older posts:
   white on teal (2.05). HubSpot styles them by id, so !important is needed
   to apply the handoff's rule: white text sits on the Link fill. */
.hs-cta-node a.cta_button {
	background: var(--ra-link) !important;
	color: #fff !important;
}
.hs-cta-node a.cta_button:hover,
.hs-cta-node a.cta_button:focus-visible {
	background: var(--ra-link-hover) !important;
	color: #fff !important;
}

/* Placeholders at full opacity. */
.elementor-search-form__input::placeholder,
.elementor-field::placeholder {
	color: var(--ra-placeholder);
	opacity: 1;
}

/* Homepage card highlight (for the "Ship smarter" restyle, once approved). */
span.body-highlight {
	color: #27394a !important;
	font-weight: 700;
	text-decoration: underline 3px #6ac4c4;
	text-underline-offset: 4px;
}