/* ==========================================================================
   REBUILD REBRAND RESKIN — global restyle of existing page content.

   Scope: pages still using the default page.php shell (i.e. NOT the
   fully-custom facelift templates — front-page.php, page-hire-fde.php,
   template-service.php, which build their own markup and dequeue this
   entirely). Enqueued by edge_reskin_assets() in functions.php.

   Intent: restyle the real, EXISTING block content of ~37 live
   service/industry pages to match the new design system, without
   touching a single row in the database. These pages are built almost
   entirely from a small set of Spectra/Ultimate Addons for Gutenberg
   (UAGB) blocks plus the Cool Timeline plugin — confirmed by inspecting
   the real rendered HTML of two pilot pages (Generative AI Development,
   Healthcare). Targeting those block classes directly means this one
   stylesheet cascades across all pages built with the same blocks,
   instead of per-page custom work.

   Astra's core CSS, Bootstrap, and the child theme's existing CSS are
   NOT dequeued here (unlike the facelift templates) — they're still
   doing real layout/grid work (.row/.col-*) that these pages depend on.
   This file only layers typography/color/spacing on top.
   ========================================================================== */

:root {
	--reskin-orange: #FF5900;
	--reskin-ink: #0A1628;
	--reskin-body-muted: #748398;
	--reskin-surface: #F6F7F8;
	--reskin-border: #E7EAEF;
	--reskin-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Base typography ---- */

.entry-content,
.entry-content p,
.entry-content li,
.entry-content span:not([class*="icon"]) {
	font-family: var(--reskin-font);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content .uagb-heading-text {
	font-family: var(--reskin-font);
	font-weight: 500;
	color: var(--reskin-ink);
	letter-spacing: -0.01em;
}

.entry-content p,
.entry-content li {
	color: var(--reskin-body-muted);
	line-height: 1.6;
}

/* ---- UAGB Info Box (service cards, industry cards, stat highlights —
   all three use the same block; only the content differs) ---- */

.entry-content .wp-block-uagb-info-box {
	background: var(--reskin-surface) !important;
	background-image: none !important;
	border: 1px solid var(--reskin-border) !important;
	border-radius: 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.entry-content .wp-block-uagb-info-box:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(10, 22, 40, 0.08);
}

.entry-content .uagb-ifb-title-wrap {
	margin-bottom: 8px;
}

.entry-content .uagb-ifb-title {
	font-family: var(--reskin-font);
	font-weight: 600;
	color: var(--reskin-ink);
	letter-spacing: -0.01em;
}

.entry-content .uagb-ifb-desc,
.entry-content .uagb-ifb-desc p {
	font-family: var(--reskin-font);
	color: var(--reskin-body-muted);
	line-height: 1.5;
}

/* Stat-highlight variant: a large number as the "title" with no icon.
   Spectra gives these no distinguishing class from a regular card, so
   this targets info-boxes with no icon image — the shared visual
   pattern across every stat block found so far. */
.entry-content .wp-block-uagb-info-box:not(:has(.uagb-ifb-left-title-image)) .uagb-ifb-title {
	font-size: clamp(28px, 2.2vw, 36px);
	font-weight: 700;
	color: var(--reskin-orange);
}

/* ---- Buttons / CTAs ---- */

.entry-content .uagb-buttons-repeater,
.entry-content .wp-block-button__link,
.entry-content .uagb-buttons__outer-wrap a {
	font-family: var(--reskin-font);
	font-weight: 500;
	background: var(--reskin-orange) !important;
	border-color: var(--reskin-orange) !important;
	border-radius: 6px !important;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.entry-content .uagb-buttons-repeater:hover,
.entry-content .wp-block-button__link:hover,
.entry-content .uagb-buttons__outer-wrap a:hover {
	opacity: 0.9;
}

/* ---- Cool Timeline (process steps) ---- */

.entry-content .timeline-block-time {
	font-family: var(--reskin-font);
	font-weight: 700;
	color: var(--reskin-orange);
}

.entry-content .timeline-content,
.entry-content .timeline-block-detail {
	font-family: var(--reskin-font);
}

.entry-content .timeline-content h3,
.entry-content .timeline-content h4 {
	color: var(--reskin-ink);
	font-weight: 600;
}

.entry-content .timeline-content p {
	color: var(--reskin-body-muted);
}

/* ---- UAGB FAQ accordion ---- */

.entry-content .wp-block-uagb-faq-child {
	border: 1px solid var(--reskin-border);
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: hidden;
}

.entry-content .uagb-faq-questions {
	font-family: var(--reskin-font);
	font-weight: 500;
	color: var(--reskin-ink);
}

.entry-content .uagb-faq-content,
.entry-content .uagb-faq-content p {
	font-family: var(--reskin-font);
	color: var(--reskin-body-muted);
}

.entry-content .uagb-faq-icon-wrap svg,
.entry-content .uagb-faq-icon-wrap {
	color: var(--reskin-orange);
}

/* ---- Hardcoded #ff0000 UAGB containers (pilot page: Generative AI
   Development, ID 21505) ----
   These pages have real, hand-set backgroundColor:#ff0000 baked into
   specific uagb/container blocks — not a bug, just an old design choice
   that clashes with the new palette. UAGB writes its own background-color
   rule WITHOUT !important (confirmed in the page's cached
   wp-content/uploads/uag-plugin/assets/*/uag-css-21505.css), so a plain
   !important override here reliably wins.

   ".services-card" is a real shared className already on 5 of these
   (the industries grid) — that one rule is reusable on any page that
   reuses the same className. The other two below are NOT reusable as-is:
   UAGB gives containers without a custom className only an auto-generated
   "uagb-block-{id}" class that's unique per block instance, so rolling
   this out to the other ~36 pages means repeating this same
   inspect-the-cached-CSS-file process per page to find their own red
   block ids (or, going forward, asking whoever edits these pages to add
   a shared className like "services-card" to any red block, the same way
   the industries grid already does — that would make this reusable). */

.entry-content .services-card {
	background: var(--reskin-surface) !important;
	border: 1px solid var(--reskin-border) !important;
}

/* "Global Generative AI Delivery Capabilities" banner — full-width proof
   section, has white text already, so swap red for the homepage's dark
   navy instead of the light surface color. */
.entry-content .uagb-block-1003dd9d {
	background: var(--reskin-ink) !important;
	border-color: transparent !important;
}

/* "On-Demand Developers" stat card in the "Why Choose WildnetEdge" grid —
   same info-box pattern as the other (already-neutral) cards around it,
   just with its own red wrapper background on top. */
.entry-content .uagb-block-59c7e816 {
	background: var(--reskin-surface) !important;
	border-color: var(--reskin-border) !important;
}