/*
 * Feature 004: Brand Theme Refresh (Phase 1)
 * Spec: Dev Docs/Feature, Spec and Implementation/004-brand-theme-refresh-spec.md
 *
 * Loaded only when the paragon_brand_refresh_mode option is 'on' (or 'preview'
 * for administrators); see inc/brand-refresh.php.
 *
 * Cascade strategy (spec "CSS Cascade Strategy"):
 * - Every rule is prefixed with body.pg-brand-refresh, which out-ranks the
 *   single-class rules in Fusion page CSS and Customizer Additional CSS.
 * - !important is used only where an existing layer forces the same property
 *   with !important or an inline style attribute; each such block says which.
 * - Colors, spacing, and radii come from the tokens below, never literals.
 */

/* Montserrat Bold as WOFF2 (78 KB) instead of the 244 KB TTF registered by the Custom Fonts plugin.
   A later @font-face for the same family and weight wins. */
@font-face {
	font-family: "Montserrat Regular";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/Montserrat-Bold.woff2") format("woff2");
}

/* Content also sets inline font-family "Montserrat", which font-style.css registers at 400 only,
   so bold text in that family is synthesized. Give it the real bold face. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/Montserrat-Bold.woff2") format("woff2");
}

:root {
	/* Color (contrast ratios verified in the spec) */
	--pg-purple: #330170;
	--pg-purple-hover: #4a1f8c;
	--pg-purple-deep: #26005a;
	--pg-footer-top: #2a0063;    /* footer fade start: deeper than brand purple so the footer stays quiet */
	--pg-footer-bottom: #1f004c; /* footer fade end */
	--pg-purple-tint: #d9ccef;
	--pg-orange: #ff5000;
	--pg-orange-strong: #cc3d00;
	--pg-orange-deep: #a33000;
	--pg-ink: #3f3f3f;
	--pg-ink-muted: #5f6070;
	--pg-surface: #f2f3f7;
	--pg-border: #e3e4ea;
	--pg-border-strong: #8a8c99;
	--pg-error: #b42318;
	--pg-white: #ffffff;
	--pg-ribbon: linear-gradient(90deg, var(--pg-purple) 0%, var(--pg-purple) 35%, var(--pg-orange) 100%);

	/* Spacing, radius, elevation */
	--pg-space-1: 8px;
	--pg-space-2: 16px;
	--pg-space-3: 24px;
	--pg-space-4: 32px;
	--pg-space-5: 48px;
	--pg-space-6: 64px;
	--pg-space-7: 96px;
	--pg-section-y: 64px;
	--pg-radius-sm: 4px;
	--pg-radius-md: 12px;
	--pg-shadow-card: 0 1px 2px rgba(51, 1, 112, 0.06), 0 8px 24px rgba(51, 1, 112, 0.08);
	--pg-measure: 72ch;
	--pg-font: "Montserrat Regular", "Montserrat", Arial, sans-serif;
}

@media (max-width: 544px) {
	:root {
		--pg-section-y: 48px;
	}
}

/* ------------------------------------------------------------------ */
/* Base text                                                           */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh,
body.pg-brand-refresh .entry-content,
body.pg-brand-refresh .entry-content p,
body.pg-brand-refresh .entry-content li {
	color: var(--pg-ink);
}

/* Legacy content hard-codes Arial, Helvetica, Calibri, and Times in inline style attributes
   (70 spans on Custom NGS Panels alone). Inline styles need !important. */
body.pg-brand-refresh .entry-content [style*="arial" i],
body.pg-brand-refresh .entry-content [style*="helvetica" i],
body.pg-brand-refresh .entry-content [style*="calibri" i],
body.pg-brand-refresh .entry-content [style*="times" i],
body.pg-brand-refresh .site-footer [style*="arial" i] {
	font-family: var(--pg-font) !important;
}

/* ------------------------------------------------------------------ */
/* Headings                                                            */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh h1,
body.pg-brand-refresh h2,
body.pg-brand-refresh h3,
body.pg-brand-refresh .entry-title,
body.pg-brand-refresh .product_title {
	font-family: var(--pg-font);
	font-weight: 700;
	color: var(--pg-ink);
	letter-spacing: -0.01em;
}

body.pg-brand-refresh .product_title,
body.pg-brand-refresh .entry-content > h1 {
	font-size: 40px;
	line-height: 1.2;
}

/* Legacy burnt-orange (#C55A11) section headings are inline styles in 58 posts; some render as rgb(). */
body.pg-brand-refresh .entry-content :is(h1, h2, h3, h4):is([style*="c55a11" i], [style*="197, 90, 17"]),
body.pg-brand-refresh .entry-content :is(h1, h2, h3, h4) :is([style*="c55a11" i], [style*="197, 90, 17"]) {
	color: var(--pg-ink) !important;
}

body.pg-brand-refresh .entry-content :is([style*="c55a11" i], [style*="197, 90, 17"]) {
	color: var(--pg-orange-strong) !important;
}

/* Brand orange #FF5000 is set as inline text color in 200 posts, but it is 3.28:1 on white.
   Use the accessible orange for text only; styles that mention a background are left alone
   so white-on-orange boxes keep their text color. */
body.pg-brand-refresh .entry-content :is([style*="color: #ff5000" i], [style*="color:#ff5000" i], [style*="color: rgb(255, 80, 0)"]):not([style*="background" i]) {
	color: var(--pg-orange-strong) !important;
}

@media (max-width: 544px) {
	body.pg-brand-refresh .product_title,
	body.pg-brand-refresh .entry-content > h1 {
		font-size: 30px;
	}

	/* Home hero headline: Fusion sets its size inline, so !important is required. */
	body.pg-brand-refresh.home .entry-content h1,
	body.pg-brand-refresh.home .entry-content h1 * {
		font-size: 32px !important;
		line-height: 1.2 !important;
	}

	body.pg-brand-refresh .entry-content h2 {
		font-size: 26px;
	}
}

/* ------------------------------------------------------------------ */
/* Links                                                               */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh a {
	color: var(--pg-purple);
}

body.pg-brand-refresh a:hover,
body.pg-brand-refresh a:focus-visible {
	color: var(--pg-orange-strong);
}

body.pg-brand-refresh .entry-content a:not(.fusion-button):not(.button):hover,
body.pg-brand-refresh .entry-content a:not(.fusion-button):not(.button):focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Orange inline links on the gray home hero (#F2F3F7) must use the deep orange: #CC3D00 is 4.47:1 there. */
body.pg-brand-refresh .entry-content a[style*="ff5000" i],
body.pg-brand-refresh .entry-content a [style*="ff5000" i],
body.pg-brand-refresh .entry-content [style*="ff5000" i] a {
	color: var(--pg-orange-deep) !important;
}

/* ------------------------------------------------------------------ */
/* Focus                                                               */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh a:focus-visible,
body.pg-brand-refresh button:focus-visible,
body.pg-brand-refresh input:focus-visible,
body.pg-brand-refresh select:focus-visible,
body.pg-brand-refresh textarea:focus-visible,
body.pg-brand-refresh [tabindex]:focus-visible {
	outline: 2px solid var(--pg-purple);
	outline-offset: 2px;
}

body.pg-brand-refresh .site-footer a:focus-visible,
body.pg-brand-refresh .ast-title-bar-wrap a:focus-visible {
	outline-color: var(--pg-white);
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh .ast-primary-header-bar {
	border-bottom: 1px solid var(--pg-border);
}

body.pg-brand-refresh .site-logo-img .custom-logo-link img {
	width: 216px;
	max-width: 216px;
	height: auto;
}

@media (max-width: 921px) {
	body.pg-brand-refresh .site-logo-img .custom-logo-link img {
		width: 172px;
		max-width: 172px;
	}
}

/* Astra's builder menu colors items with .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link
   and similar chains; the .ast-builder-menu prefix below out-ranks them. */
body.pg-brand-refresh .ast-builder-menu .main-header-menu .menu-item > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu .astra-child-custom-login-logout-link > a,
body.pg-brand-refresh .ast-header-search .astra-search-icon {
	color: var(--pg-ink);
}

body.pg-brand-refresh .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu .menu-item.focus > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu .menu-item.current-menu-item > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu .menu-item.current-menu-ancestor > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu .astra-child-custom-login-logout-link > a:hover {
	color: var(--pg-purple);
}

@media (min-width: 922px) {
	body.pg-brand-refresh .main-header-menu > .current-menu-item > .menu-link,
	body.pg-brand-refresh .main-header-menu > .current-menu-ancestor > .menu-link {
		text-decoration: underline;
		text-decoration-color: var(--pg-orange);
		text-decoration-thickness: 2px;
		text-underline-offset: 10px;
	}
}

/* A page listed under two top-level menus (for example RNA Fusion under Technology and under
   Application > Oncology) makes WordPress mark both as current. Highlight only one, in this order:
   the top-level item that is the page itself, then the one whose dropdown lists the page directly,
   then the leftmost. The others keep their normal color and no underline (hover still works). */
body.pg-brand-refresh .ast-builder-menu .main-header-menu:has(> .current-menu-item) > .current-menu-ancestor:not(.current-menu-item):not(:hover):not(.focus) > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu:has(> .current-menu-parent) > .current-menu-ancestor:not(.current-menu-item):not(.current-menu-parent):not(:hover):not(.focus) > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu > .current-menu-item ~ .current-menu-item:not(:hover):not(.focus) > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu > .current-menu-parent ~ .current-menu-parent:not(.current-menu-item):not(:hover):not(.focus) > .menu-link,
body.pg-brand-refresh .ast-builder-menu .main-header-menu:not(:has(> .current-menu-item, > .current-menu-parent)) > .current-menu-ancestor ~ .current-menu-ancestor:not(:hover):not(.focus) > .menu-link {
	color: var(--pg-ink);
	text-decoration: none;
}

body.pg-brand-refresh .main-header-menu .sub-menu {
	border-top: 2px solid var(--pg-purple);
	box-shadow: var(--pg-shadow-card);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* Text case: uppercase, because CSS cannot turn labels typed in       */
/* capitals ("LEARN MORE") into sentence case; see the plan's          */
/* decisions table.                                                    */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh .fusion-button,
body.pg-brand-refresh .button,
body.pg-brand-refresh button.button,
body.pg-brand-refresh input[type="submit"],
body.pg-brand-refresh .gform_wrapper .gform_button,
body.pg-brand-refresh .ast-button,
body.pg-brand-refresh .wp-block-button__link {
	font-family: var(--pg-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.3;
	border-radius: var(--pg-radius-sm) !important; /* Fusion page CSS sets radius on .ib-sj-btn1/.ib-sj-hbtn */
	min-height: 44px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.pg-brand-refresh .fusion-button .fusion-button-text {
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Primary: every Fusion button unless mapped to a variant below, plus WooCommerce, YITH quote,
   and Gravity Forms submit buttons. Fusion page CSS forces borders with !important. */
body.pg-brand-refresh .fusion-button,
body.pg-brand-refresh:is(.woocommerce, .woocommerce-page) .button,
body.pg-brand-refresh .woocommerce .button,
body.pg-brand-refresh .woocommerce button.button,
body.pg-brand-refresh .woocommerce a.button,
body.pg-brand-refresh .add-request-quote-button.button,
body.pg-brand-refresh .single_add_to_cart_button,
body.pg-brand-refresh .single_link_to_cart_button,
body.pg-brand-refresh .gform_wrapper .gform_button,
body.pg-brand-refresh .gform_wrapper input[type="submit"],
body.pg-brand-refresh #place_order {
	background: var(--pg-orange-strong) !important;
	border: 0 !important;
	color: var(--pg-white) !important;
	box-shadow: none !important;
}

body.pg-brand-refresh .fusion-button .fusion-button-text,
body.pg-brand-refresh .fusion-button i {
	color: var(--pg-white) !important;
}

body.pg-brand-refresh .fusion-button:hover,
body.pg-brand-refresh .fusion-button:focus-visible,
body.pg-brand-refresh:is(.woocommerce, .woocommerce-page) .button:hover,
body.pg-brand-refresh .woocommerce .button:hover,
body.pg-brand-refresh .woocommerce a.button:hover,
body.pg-brand-refresh .add-request-quote-button.button:hover,
body.pg-brand-refresh .single_add_to_cart_button:hover,
body.pg-brand-refresh .single_link_to_cart_button:hover,
body.pg-brand-refresh .gform_wrapper .gform_button:hover,
body.pg-brand-refresh #place_order:hover {
	background: var(--pg-orange-deep) !important;
	color: var(--pg-white) !important;
}

/* Some pages force the Gravity Forms submit color with #gform_submit_button_N { ... !important }.
   :not(#pg-x) adds ID-level specificity without naming a page-specific ID. */
body.pg-brand-refresh .gform_wrapper .gform_button:not(#pg-x) {
	background: var(--pg-orange-strong) !important;
	color: var(--pg-white) !important;
}

body.pg-brand-refresh .gform_wrapper .gform_button:not(#pg-x):hover {
	background: var(--pg-orange-deep) !important;
}

/* Secondary: purple outline. .ib-sj-hbtn is the hero "Contact Us"; .ib-sj-more are the three
   method-card "Learn more" buttons, demoted so each region has one primary action. */
body.pg-brand-refresh .fusion-button.ib-sj-hbtn,
body.pg-brand-refresh .fusion-button.ib-sj-more,
body.pg-brand-refresh ul.products li.product .button {
	background: transparent !important;
	border: 2px solid var(--pg-purple) !important;
	color: var(--pg-purple) !important;
}

body.pg-brand-refresh .fusion-button.ib-sj-hbtn .fusion-button-text,
body.pg-brand-refresh .fusion-button.ib-sj-more .fusion-button-text {
	color: var(--pg-purple) !important;
}

body.pg-brand-refresh .fusion-button.ib-sj-hbtn:hover,
body.pg-brand-refresh .fusion-button.ib-sj-more:hover,
body.pg-brand-refresh ul.products li.product .button:hover {
	background: var(--pg-purple-hover) !important;
	border-color: var(--pg-purple-hover) !important;
	color: var(--pg-white) !important;
}

body.pg-brand-refresh .fusion-button.ib-sj-hbtn:hover .fusion-button-text,
body.pg-brand-refresh .fusion-button.ib-sj-more:hover .fusion-button-text {
	color: var(--pg-white) !important;
}

/* On dark backgrounds: white fill, purple text (.ib-sj-gbtn sits on the purple home CTA band). */
body.pg-brand-refresh .fusion-button.ib-sj-gbtn {
	background: var(--pg-white) !important;
	border: 0 !important;
}

body.pg-brand-refresh .fusion-button.ib-sj-gbtn .fusion-button-text {
	color: var(--pg-purple) !important;
}

body.pg-brand-refresh .fusion-button.ib-sj-gbtn:hover {
	background: var(--pg-purple-tint) !important;
}

/* ------------------------------------------------------------------ */
/* Page title banners (Astra Advanced Headers)                         */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh .ast-title-bar-wrap {
	position: relative;
	background-color: var(--pg-purple) !important; /* Additional CSS sets it per page with !important */
}

/* Banner height is left to each page (Astra padding, page Custom CSS such as height: 39vw); the brand
   layer only restyles. The inner box fills a banner that has an explicit height, so the overlay reaches
   the bottom edge; with an automatic height, height: 100% has no effect. */
body.pg-brand-refresh .ast-title-bar-wrap .ast-inside-advanced-header-content {
	position: relative;
	isolation: isolate;
	height: 100%;
	overflow: hidden; /* clips the title scrim's fade-out on normal banners */
}

/* One brand treatment for every banner photo, replacing Astra's mixed mauve and slate overlays:
   a light, uniform brand tint, so different photos read as one family without losing their colors. */
body.pg-brand-refresh .ast-title-bar-wrap .ast-inside-advanced-header-content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(51, 1, 112, 0.22);
	pointer-events: none;
}

/* Title scrim: deep purple behind the title row only, fading to clear, so the photo's subject stays
   natural. On a normal banner the title row fills the banner; on a tall photo banner (height set by the
   page) it covers only the area around the title and fades out over 160px below it. Left-aligned titles (layout 1)
   get a left scrim; white text keeps 3:1 or better at the end of a long title over a pure-white photo,
   helped by the text shadow below (spec, Page title banners). */
body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-layout {
	position: relative;
}

body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-layout::before {
	content: "";
	position: absolute;
	inset: 0 0 -160px; /* the fade-out runs below the title row: clipped on normal banners, visible on tall ones */
	z-index: -1;
	background: linear-gradient(90deg, rgba(38, 0, 90, 0.75) 0%, rgba(38, 0, 90, 0.55) 40%, rgba(38, 0, 90, 0) 75%);
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
	pointer-events: none;
}

/* Centered titles (layout 2): the scrim sits behind the center instead. */
body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-layout-2::before {
	background: radial-gradient(ellipse 42% 85% at 50% 50%, rgba(38, 0, 90, 0.7) 0%, rgba(38, 0, 90, 0.4) 55%, rgba(38, 0, 90, 0) 100%);
}

/* Signature ribbon accent under every banner. It reuses the ::after that Astra uses for its overlay,
   so top: auto is needed to release Astra's top: 0. */
body.pg-brand-refresh .ast-title-bar-wrap::after {
	content: "";
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--pg-ribbon);
}

body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-title,
body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-title * {
	color: var(--pg-white) !important; /* page CSS forces title color on some pages */
	font-weight: 700 !important;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Soft shadow keeps white text readable where the scrim fades out over a light photo. */
body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-title,
body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-breadcrumb {
	text-shadow: 0 1px 3px rgba(20, 0, 50, 0.6), 0 2px 18px rgba(20, 0, 50, 0.45);
}

body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-breadcrumb,
body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-breadcrumb * {
	color: var(--pg-white);
	font-size: 14px;
}

@media (max-width: 544px) {
	body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-title,
	body.pg-brand-refresh .ast-title-bar-wrap .ast-advanced-headers-title * {
		font-size: 30px !important; /* Additional CSS sets per-page mobile sizes */
	}
}

/* Single product pages: the product H1 already names the product. */
body.pg-brand-refresh.single-product .ast-title-bar-wrap {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

/* Deep, quiet purple: one continuous fade across the whole footer (rows are transparent, so no seams).
   Brighter brand purple is kept for banners and the Home CTA band; the ribbon line on top is the only accent. */
body.pg-brand-refresh .site-footer {
	position: relative;
	background: linear-gradient(180deg, var(--pg-footer-top) 0%, var(--pg-footer-bottom) 100%);
	border-top: 4px solid transparent;
	border-image: var(--pg-ribbon) 1;
}

/* Astra insets the footer columns by the above-footer row's left padding (5em on desktop); tablet and
   phone inherit it, which leaves the columns off-center. Use a 20px gutter there instead. */
@media (max-width: 921px) {
	body.pg-brand-refresh .site-footer .site-above-footer-wrap {
		padding-left: 20px !important; /* Astra dynamic CSS sets the row padding */
		padding-right: 20px !important;
	}

	body.pg-brand-refresh .site-footer .site-above-footer-inner-wrap {
		max-width: none;
		width: 100%;
	}
}

/* Rows are transparent so the footer gradient shows through (Astra sets row colors in its dynamic CSS). */
body.pg-brand-refresh .site-footer .site-above-footer-wrap,
body.pg-brand-refresh .site-footer .site-primary-footer-wrap {
	background: transparent !important;
	border: 0 !important;
}

body.pg-brand-refresh .site-footer .site-above-footer-wrap {
	padding-top: var(--pg-space-5);
	padding-bottom: var(--pg-space-5);
}

body.pg-brand-refresh .site-footer .site-below-footer-wrap {
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
	padding-top: var(--pg-space-3);
	padding-bottom: var(--pg-space-3);
}

body.pg-brand-refresh .site-footer,
body.pg-brand-refresh .site-footer p,
body.pg-brand-refresh .site-footer li,
body.pg-brand-refresh .site-footer span,
body.pg-brand-refresh .site-footer strong,
body.pg-brand-refresh .site-footer div {
	color: var(--pg-purple-tint);
}

body.pg-brand-refresh .site-footer .widget-title,
body.pg-brand-refresh .site-footer h2,
body.pg-brand-refresh .site-footer h3,
body.pg-brand-refresh .site-footer h4,
body.pg-brand-refresh .site-footer strong,
body.pg-brand-refresh .site-footer b {
	color: var(--pg-white);
}

body.pg-brand-refresh .site-footer .widget-title,
body.pg-brand-refresh .site-footer h2,
body.pg-brand-refresh .site-footer h3,
body.pg-brand-refresh .site-footer h4 {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: none;
}

body.pg-brand-refresh .site-footer a {
	color: var(--pg-white);
	text-decoration: none;
}

/* Astra's footer builder colors widget text and links with
   .footer-widget-area[data-section] .footer-widget-area-inner (0,3,1); match that chain to win. */
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner,
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner p,
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner li,
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner span {
	color: var(--pg-purple-tint);
}

body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner a,
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner strong,
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner b,
body.pg-brand-refresh .site-footer .footer-widget-area .widget-title {
	color: var(--pg-white);
}

/* Additional CSS turns footer link hovers #1e73be with class-only selectors. */
body.pg-brand-refresh .site-footer a:hover,
body.pg-brand-refresh .site-footer a:focus-visible,
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner a:hover,
body.pg-brand-refresh .site-footer .footer-widget-area .footer-widget-area-inner a:focus-visible,
body.pg-brand-refresh .site-footer .ib-sj-footer a:hover,
body.pg-brand-refresh .site-footer .footer-adv-widget-4 a:hover {
	color: var(--pg-white);
	text-decoration: underline;
	text-decoration-color: var(--pg-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Colored social PNGs (the black X icon disappears on purple): render them white. */
body.pg-brand-refresh .site-footer .pg-social-icons img,
body.pg-brand-refresh .site-footer img[src*="icons8-"],
body.pg-brand-refresh .site-footer img[data-src*="icons8-"] {
	filter: brightness(0) invert(1);
}

body.pg-brand-refresh .site-footer .fusion-social-network-icon {
	color: var(--pg-white) !important; /* inline brand colors */
}

body.pg-brand-refresh .site-footer .ast-footer-copyright,
body.pg-brand-refresh .site-footer .ast-footer-copyright * {
	color: var(--pg-purple-tint);
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Cards: hand-built Fusion product tiles on the store pages           */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh .fusion-column-liftup-border > .fusion-column-wrapper {
	border: 1px solid var(--pg-border) !important; /* inline border style */
	border-radius: var(--pg-radius-md);
	background: var(--pg-white);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.pg-brand-refresh .fusion-column-liftup-border:hover > .fusion-column-wrapper {
	border-color: transparent !important;
	box-shadow: var(--pg-shadow-card);
}

body.pg-brand-refresh .fusion-column-liftup-border .fusion-column-inner-bg {
	border-radius: var(--pg-radius-md);
}

/* Fusion content boxes: #747474 on #F0F0F0 is 4.1:1. */
body.pg-brand-refresh .fusion-content-boxes .content-box-wrapper.content-wrapper-background {
	background-color: var(--pg-surface) !important; /* set inline by Fusion */
	border-radius: var(--pg-radius-md);
}

body.pg-brand-refresh .fusion-content-boxes .content-container,
body.pg-brand-refresh .fusion-content-boxes .content-container * {
	color: var(--pg-ink-muted);
}

body.pg-brand-refresh .fusion-content-boxes .content-box-heading {
	color: var(--pg-ink) !important; /* Fusion sets heading color inline */
	font-weight: 700;
}

/* Home testimonial slider heading (#FF5000 via class rules on a #F2F3F7 band). */
body.pg-brand-refresh .ib-ss-testi-slide .ss-testislider-heading,
body.pg-brand-refresh .ib_font_18 {
	color: var(--pg-orange-strong);
}

/* ------------------------------------------------------------------ */
/* WooCommerce                                                         */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh .woocommerce ul.products li.product,
body.pg-brand-refresh.woocommerce ul.products li.product {
	background: var(--pg-white);
	border: 1px solid var(--pg-border);
	border-radius: var(--pg-radius-md);
	padding: var(--pg-space-2);
	transition: box-shadow 0.2s ease;
}

body.pg-brand-refresh .woocommerce ul.products li.product:hover,
body.pg-brand-refresh.woocommerce ul.products li.product:hover {
	box-shadow: var(--pg-shadow-card);
}

body.pg-brand-refresh ul.products li.product .astra-shop-thumbnail-wrap,
body.pg-brand-refresh ul.products li.product .woocommerce-loop-product__link img {
	background: var(--pg-surface);
	border-radius: calc(var(--pg-radius-md) - 4px);
}

body.pg-brand-refresh ul.products li.product .ast-woo-product-category {
	color: var(--pg-ink-muted);
	opacity: 1;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.pg-brand-refresh ul.products li.product .woocommerce-loop-product__title {
	color: var(--pg-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

body.pg-brand-refresh .woocommerce .price,
body.pg-brand-refresh.woocommerce .price,
body.pg-brand-refresh.single-product .summary .price {
	color: var(--pg-ink) !important;
	font-weight: 700;
}

body.pg-brand-refresh .woocommerce-breadcrumb,
body.pg-brand-refresh .woocommerce-breadcrumb a {
	color: var(--pg-ink-muted);
	font-size: 14px;
}

body.pg-brand-refresh .woocommerce-breadcrumb a:hover {
	color: var(--pg-purple);
}

body.pg-brand-refresh.single-product .summary .stock,
body.pg-brand-refresh.single-product .summary .stock.in-stock {
	color: var(--pg-ink-muted);
	font-weight: 700;
}

body.pg-brand-refresh.single-product .summary .stock.in-stock::before {
	content: "\2713\00a0";
	color: var(--pg-purple);
}

body.pg-brand-refresh.single-product .woocommerce-tabs ul.tabs li a {
	color: var(--pg-ink-muted);
	font-weight: 700;
}

body.pg-brand-refresh.single-product .woocommerce-tabs ul.tabs li.active a,
body.pg-brand-refresh.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--pg-purple);
}

body.pg-brand-refresh.single-product .woocommerce-tabs ul.tabs li.active {
	border-top-color: var(--pg-purple) !important;
	box-shadow: inset 0 -3px 0 var(--pg-purple);
}

body.pg-brand-refresh.single-product .woocommerce-tabs .panel > p,
body.pg-brand-refresh.single-product .woocommerce-tabs .panel > ul,
body.pg-brand-refresh.single-product .woocommerce-tabs .panel > div > p {
	max-width: var(--pg-measure);
}

/* Notices */
body.pg-brand-refresh .woocommerce-message,
body.pg-brand-refresh .woocommerce-info,
body.pg-brand-refresh .woocommerce-error {
	background: var(--pg-white) !important;
	color: var(--pg-ink) !important;
	border: 1px solid var(--pg-border) !important;
	border-left: 4px solid var(--pg-purple) !important;
	border-radius: var(--pg-radius-sm);
}

body.pg-brand-refresh .woocommerce-message::before,
body.pg-brand-refresh .woocommerce-info::before {
	color: var(--pg-purple) !important;
}

body.pg-brand-refresh .woocommerce-error {
	border-left-color: var(--pg-error) !important;
}

body.pg-brand-refresh .woocommerce-error::before {
	color: var(--pg-error) !important;
}

/* Cart/checkout step indicator (Astra Pro): inactive steps are faded with opacity. */
body.pg-brand-refresh #ast-checkout-wrap a,
body.pg-brand-refresh #ast-checkout-wrap .ast-disable-click,
body.pg-brand-refresh #ast-checkout-wrap p {
	opacity: 1;
	color: var(--pg-ink-muted);
}

body.pg-brand-refresh #ast-checkout-wrap .ast-current,
body.pg-brand-refresh #ast-checkout-wrap .ast-current p {
	color: var(--pg-purple);
}

/* Sticky add-to-cart bar (Astra Pro) */
body.pg-brand-refresh .ast-sticky-add-to-cart {
	border-top: 1px solid var(--pg-border);
	box-shadow: 0 -8px 24px rgba(51, 1, 112, 0.08);
}

/* ------------------------------------------------------------------ */
/* Forms: Gravity Forms, WooCommerce, YITH quote                       */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
body.pg-brand-refresh .gform_wrapper select,
body.pg-brand-refresh .gform_wrapper textarea,
body.pg-brand-refresh .woocommerce form .input-text,
body.pg-brand-refresh .woocommerce form select,
body.pg-brand-refresh .woocommerce form textarea,
body.pg-brand-refresh .ywraq-form-table-wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.pg-brand-refresh .ywraq-form-table-wrapper textarea {
	border: 1px solid var(--pg-border-strong);
	border-radius: var(--pg-radius-sm);
	background-color: var(--pg-white);
	color: var(--pg-ink);
	font-size: 16px;
}

body.pg-brand-refresh .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
body.pg-brand-refresh .gform_wrapper select,
body.pg-brand-refresh .woocommerce form .input-text {
	min-height: 44px;
}

body.pg-brand-refresh .gform_wrapper input:focus,
body.pg-brand-refresh .gform_wrapper select:focus,
body.pg-brand-refresh .gform_wrapper textarea:focus,
body.pg-brand-refresh .woocommerce form .input-text:focus {
	border-color: var(--pg-purple);
	outline: 2px solid var(--pg-purple);
	outline-offset: 0;
}

body.pg-brand-refresh .gform_wrapper .gfield_label,
body.pg-brand-refresh .woocommerce form .form-row label {
	color: var(--pg-ink);
	font-size: 14px;
	font-weight: 700;
}

body.pg-brand-refresh .gform_wrapper .gfield_description,
body.pg-brand-refresh .gform_wrapper .ginput_complex label {
	color: var(--pg-ink-muted);
}

body.pg-brand-refresh .gform_wrapper .gfield_required {
	color: var(--pg-error);
}

body.pg-brand-refresh .gform_wrapper .gfield_error input,
body.pg-brand-refresh .gform_wrapper .gfield_error select,
body.pg-brand-refresh .gform_wrapper .gfield_error textarea {
	border-color: var(--pg-error);
}

body.pg-brand-refresh .gform_wrapper .validation_message,
body.pg-brand-refresh .gform_wrapper .gform_validation_errors {
	color: var(--pg-error);
}

/* ------------------------------------------------------------------ */
/* Images                                                              */
/* ------------------------------------------------------------------ */

/* Round content and WooCommerce images site-wide (owner request, 2026-09-25).
   No !important: any image Fusion already gave its own shape (avatar circles, a custom
   border radius set through the image-frame options) carries that as an inline style, which
   always wins over this class rule, so intentional shapes are preserved automatically.
   .entry-content covers Fusion Builder page/post content, plus the Cart, Checkout, and My
   Account pages (WooCommerce shortcodes render inside the page's .entry-content there).
   .ast-woocommerce-container covers Astra's dedicated WooCommerce templates (single product
   gallery, related/upsell products, shop/category loops), which render outside .entry-content.
   .ib-tackling-img keeps its own hand-designed offset-shadow card treatment (7px radius) on
   the Home customer-spotlight image, via :not() rather than a specificity fight.
   Fusion's blog-grid and flex-slider modules force border-radius:0 on their images, but
   neither is used on any published page (checked 2026-09-25), so no override is added for
   them; revisit if Phase 2 content work introduces one. */
body.pg-brand-refresh .entry-content img:not(.ib-tackling-img),
body.pg-brand-refresh .ast-woocommerce-container img {
	border-radius: var(--pg-radius-md);
}

/* Content boxes get the same 12px corner as images and cards: Fusion columns with a background
   color or image (set inline by the builder), species tiles, and testimonial quote bubbles, in page
   content and in WooCommerce shop and category descriptions (the Store page header is built there).
   Designed shapes such as the arrow-shaped workflow steps (.ib-card-inner) are not touched. */
body.pg-brand-refresh :is(.entry-content, .page-description, .term-description) .fusion-column-wrapper[style*="background-color"],
body.pg-brand-refresh :is(.entry-content, .page-description, .term-description) .fusion-column-wrapper[style*="background-image"],
body.pg-brand-refresh :is(.entry-content, .page-description, .term-description) .species-grid-container .grid-item,
body.pg-brand-refresh :is(.entry-content, .page-description, .term-description) .fusion-testimonials blockquote q {
	border-radius: var(--pg-radius-md);
}

/* Fusion sections (rows) round only when boxed inside the page, never when they run edge to edge,
   which varies by page template and page Custom CSS. The horizontal radius is computed from how much
   narrower the section is than the window (100% is the section's own width here): within 24px of the
   window width it is 0, so the corner stays square; boxed sections get the full 12px. A transparent
   section shows no change. */
body.pg-brand-refresh :is(.entry-content, .page-description, .term-description) .fusion-fullwidth {
	border-radius: clamp(0px, calc((100vw - 100% - 24px) * 1000), var(--pg-radius-md)) / var(--pg-radius-md);
}

/* ------------------------------------------------------------------ */
/* Sidebar widgets                                                     */
/* ------------------------------------------------------------------ */

body.pg-brand-refresh #secondary .widget {
	background: var(--pg-surface);
	border-radius: var(--pg-radius-md);
	padding: var(--pg-space-4);
}

body.pg-brand-refresh #secondary .widget-title {
	color: var(--pg-ink);
	font-size: 20px;
	font-weight: 700;
}