/* ==========================================================================
   WorkGuru section styles
   Everything colour/type/space related resolves to theme.json custom properties.
   Only what theme.json cannot express lives here.
   ========================================================================== */

/* --- Vertical rhythm -----------------------------------------------------
   One rule instead of per-block margins: the eyebrow/heading/lede stack
   composes the same way in every section.                                  */

.wg-eyebrow            { margin: 0 0 var(--wp--preset--spacing--30); }
.wg-h2                 { margin: 0 0 var(--wp--preset--spacing--40); max-width: 26ch; }
.wg-h1                 { margin: 0 0 var(--wp--preset--spacing--40); }
.wg-lede               { margin: 0 0 var(--wp--preset--spacing--70); max-width: 62ch; }
.wg-lede.wg-center     { margin-left: auto; margin-right: auto; text-align: center; }
.wg-h2.has-text-align-center { margin-left: auto; margin-right: auto; }

/* Archivo Black is heavy; it needs negative tracking to read well large. */
.wg-h1 { letter-spacing: -0.022em; line-height: 1.06; }
.wg-h2 { letter-spacing: -0.015em; line-height: 1.14; }
:is(h1, h2, h3) { text-wrap: balance; }
/* Safety net. "MANUFACTURERS" at the H1 size on a 360px screen is close to the
   line, and Archivo Black is a good deal wider than any fallback - so how it
   measures locally is not evidence. This guarantees a long word wraps instead
   of pushing the page sideways, and only ever engages when it would otherwise
   overflow. */
:is(h1, h2, h3, h4) { overflow-wrap: break-word; }
.wg-lede, .wg-card p { text-wrap: pretty; }

/* --- Eyebrow ------------------------------------------------------------ */

.wg-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
}
.wg-on-dark .wg-eyebrow { color: var(--wp--preset--color--accent-bright); }

/* --- Dark sections ------------------------------------------------------ */

.wg-on-dark,
.wg-on-dark p,
.wg-on-dark li                  { color: #cfd6e8; }
.wg-on-dark :is(h1,h2,h3,h4)    { color: var(--wp--preset--color--base); }
/*
 * Bright teal for links on a dark section - but NOT for buttons.
 *
 * A button label is an `<a>`, so the unscoped version of this rule repainted the
 * filled button's white label bright teal while its background stayed brand
 * teal: 1.99:1, on the hero of every page on the site. It is the reason "Book a
 * demo" looked washed out next to "Start free trial" - the primary CTA was the
 * unreadable one.
 */
.wg-on-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--accent-bright); }
.wg-on-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

/* --- Breadcrumb --------------------------------------------------------- */

.wg-crumb {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: #8f9bb3;
	letter-spacing: .01em;
}
.wg-crumb a      { color: inherit; text-decoration: none; }
.wg-crumb a:hover{ color: var(--wp--preset--color--accent-bright); text-decoration: underline; }
.wg-crumb span   { opacity: .45; margin: 0 .35em; }

/* --- Hero --------------------------------------------------------------- */

.wg-hero-grid            { gap: var(--wp--preset--spacing--80); align-items: center; }
.wg-hero-copy > *        { margin-left: 0; margin-right: 0; }
.wg-hero-copy > *:last-child  { margin-bottom: 0; }
.wg-hero-media           { display: flex; }
.wg-hero-media > *       { width: 100%; margin: 0; }
/* Breadcrumb sits above the hero grid, aligned to the container edge. */
.wg-crumbwrap            { margin-block: 0 var(--wp--preset--spacing--60); }
.wg-crumbwrap > .wg-crumb{ margin: 0; }
.wg-hero .wg-lede        { margin-bottom: var(--wp--preset--spacing--60); }
.wg-hero-shot            { margin: 0; }
.wg-hero-shot img        { border-radius: 15px; box-shadow: 0 24px 60px rgba(0,0,0,.34); }

.wg-trust {
	list-style: none;
	padding: 0;
	margin: var(--wp--preset--spacing--60) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}
.wg-trust li { position: relative; padding-left: 1.35rem; }
.wg-trust li::before {
	content: "";
	position: absolute; left: 0; top: .5em;
	width: .55rem; height: .55rem; border-radius: 50%;
	background: var(--wp--preset--color--accent-bright);
}

/* --- Card grids ---------------------------------------------------------
   Rows align because the grid is a real grid. Cards stretch to equal height. */

/* Card grids are `alignwide`, which theme.json caps at 1200px - but every
   wg-* component caps at 1180. That 20px difference put every card row 10px
   left of every heading. One column width, declared once. */
.wg-cards            { gap: var(--wp--preset--spacing--50); align-items: stretch;
                       width: min(100%, var(--wg-col, 1180px)); margin-inline: auto; }
.wg-cards > *        { margin: 0; }

/* --- Full-bleed section flow -------------------------------------------- */
/*
 * Every section on these pages is `alignfull` and carries its own top and bottom
 * padding, so the root 24px block gap between siblings renders as a band of bare
 * page background between them.
 *
 * It has been there since the first industry page and was invisible, because
 * adjacent sections were nearly always both white. The feature hub template put
 * a mint section directly above a navy one and the band showed up immediately.
 * Measured on staging: 24px between all six sections of a hub page, and again
 * between header, main, the CTA band and the footer.
 */
.wp-site-blocks > * + *,
.entry-content > .alignfull + .alignfull,
main > .wp-block-post-content + .alignfull,
main > .alignfull + .alignfull { margin-block-start: 0; }

/* Quiet line under a card grid - the "every area page lists the detail beneath
   it" note on the features archive. Constrained to the same column as the grid
   so it does not run to the padding edge, which at 1920 is 274px wider. */
.wg-archive-note {
	width: min(100%, var(--wg-col, 1180px));
	margin: var(--wp--preset--spacing--70) auto 0;
	color: var(--wp--preset--color--text);
}
.wg-archive-note a { color: var(--wp--preset--color--accent-deep); }

.wg-card {
	padding: var(--wp--preset--spacing--60);          /* 30px, measured */
	border-radius: 15px;                              /* measured */
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--card-line);   /* 2px #b2e4e2, measured */
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wg-card > *              { margin: 0 !important; }
.wg-card :is(h3, h4)      { letter-spacing: -.005em; }
.wg-card p                { color: var(--wp--preset--color--text); }

/* On a tinted section the card needs to stay white to lift off it. */
/* Card border is already the tinted teal, so it reads correctly on every
   light section without an override. */

/* On navy, a translucent panel rather than a white slab. */
.wg-on-dark .wg-card {
	background: rgba(255,255,255,.055);
	border-color: rgba(255,255,255,.13);
	box-shadow: none;
}

/* Cards that are entirely a link. */
.wg-card-link:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 10px 28px rgba(0,166,156,.16);
	transform: translateY(-2px);
}
.wg-on-dark .wg-card-link:hover {
	border-color: var(--wp--preset--color--accent-bright);
	background: rgba(255,255,255,.09);
	box-shadow: none;
}
.wg-card-link :is(h3,h4) a { text-decoration: none; color: inherit; }
.wg-card-link :is(h3,h4) a::after { content: " →"; opacity: .5; font-weight: 400; }
.wg-card-link:hover :is(h3,h4) a { color: var(--wp--preset--color--accent-deep); }
.wg-on-dark .wg-card-link:hover :is(h3,h4) a { color: var(--wp--preset--color--accent-bright); }

.wg-card-sm { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }

/* The outcome cards are phrased as the reader's own question. */
.wg-card-q :is(h3,h4) { color: var(--wp--preset--color--accent-deep); }

/* --- Numbered process -------------------------------------------------- */

.wg-steps {
	counter-reset: wgstep;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--50);
}
.wg-steps li {
	counter-increment: wgstep;
	position: relative;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50)
	         var(--wp--preset--spacing--50) 3.4rem;
	border-radius: 12px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.11);
	font-weight: 500;
	color: #fff;
}
.wg-steps li::before {
	content: counter(wgstep);
	position: absolute;
	left: var(--wp--preset--spacing--50);
	top: var(--wp--preset--spacing--50);
	width: 1.65rem; height: 1.65rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-bright);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: .72rem;
	display: grid; place-items: center;
	line-height: 1;
}

/* --- Accordions (FAQ and objections) ----------------------------------- */

/* Wide container, capped and left-aligned. A full 1180px accordion puts the
   "+" a screen away from the question; centring it in the wide container
   leaves a gutter that reads as a mistake. */
.wg-faq {
	border-top: 2px solid var(--wp--preset--color--card-line);
	width: min(100%, 860px);
	margin-inline: 0 auto;
}
.wg-faq .wp-block-details {
	border-bottom: 2px solid var(--wp--preset--color--card-line);
	padding: var(--wp--preset--spacing--50) 0;
	margin: 0;
}
.wg-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
	line-height: 1.4;
}
.wg-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.wg-faq .wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-deep);
	transition: transform .2s ease;
}
.wg-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.wg-faq .wp-block-details p {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: 68ch;
	color: var(--wp--preset--color--text);
}
.wg-on-dark .wg-faq,
.wg-on-dark .wg-faq .wp-block-details { border-color: rgba(255,255,255,.14); }
.wg-on-dark .wg-faq summary { color: #fff; }

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

.wp-block-buttons { gap: var(--wp--preset--spacing--40); }
.wp-block-button__link {
	transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
	box-shadow: 0 1px 2px rgba(9,12,76,.10);
}
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(5,178,166,.26); }
.is-style-outline > .wp-block-button__link {
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--accent-deep);
	box-shadow: none;
}
.is-style-outline > .wp-block-button__link:hover {
	background: rgba(5,178,166,.08);
	box-shadow: none;
}
.wg-on-dark .is-style-outline > .wp-block-button__link { color: #fff; }
.wg-on-dark .is-style-outline > .wp-block-button__link:hover { background: rgba(255,255,255,.10); }

/* --- Query results grid ------------------------------------------------ */

.wp-block-query .wg-cards > li,
.wp-block-post-template.wg-cards > li {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--card-line);
	border-radius: 15px;
	overflow: hidden;
	padding: 0 0 var(--wp--preset--spacing--50);
	list-style: none;
}

/*
 * The inner padding belongs to items that ARE the card. An item that CONTAINS a
 * card must not get it, or the rule below would also strip the card's own
 * padding - measured on /outcomes/, every card came out `36px 0px` with its text
 * running into the border.
 */
.wp-block-post-template.wg-cards > li:not(:has(> .wg-card)) > :not(figure) {
	padding-inline: var(--wp--preset--spacing--50);
}

/*
 * ...unless the item already contains a card.
 *
 * The rule above styles the <li> itself as the card, for grids whose items are
 * bare post-title + excerpt. The five archive and hub templates instead wrap
 * their contents in an explicit `.wg-card` group, so both boxes were drawing the
 * same 2px border and 15px radius - a card inside a card, on industries,
 * outcomes, features and integrations. Measured on /features/: li and .wg-card
 * both `2px solid rgb(178,228,226)`, both `15px`.
 *
 * The li steps back rather than the templates changing, so a grid built by hand
 * in the editor gets the same treatment automatically.
 */
.wp-block-post-template.wg-cards > li:has(> .wg-card),
.wp-block-query .wg-cards > li:has(> .wg-card) {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	padding: 0;
}

.wp-block-post-template.wg-cards img { border-radius: 0; width: 100%; }

/* --- Small screens ---------------------------------------------------- */

/* --- Responsive ---------------------------------------------------------
   Breakpoints match the existing site (Oxygen): 1200 / 991 / 767 / 479.
   Type is fluid via clamp() in theme.json, so these handle layout only.     */

/* Tablet: multi-column card grids halve. */
@media (max-width: 991px) {
	.wg-hero-grid { grid-template-columns: 1fr !important; }
	.wg-hero-shot { order: -1; }
	.wg-cards     { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.wg-steps     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile landscape: single column throughout. */
@media (max-width: 767px) {
	.wg-cards { grid-template-columns: 1fr !important; }
	.wg-steps { grid-template-columns: 1fr; }
	.wg-h2, .wg-lede { max-width: none; }
	.wp-block-buttons { flex-direction: column; align-items: stretch; }
	.wp-block-button, .wp-block-button__link { width: 100%; text-align: center; }
	.wg-trust { gap: var(--wp--preset--spacing--30); }
	.wg-trust li { flex: 0 0 100%; }
}

/* Mobile portrait: tighten padding, keep tap targets generous. */
@media (max-width: 479px) {
	.wg-card       { padding: var(--wp--preset--spacing--50); }
	.wg-steps li   { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40)
	                 var(--wp--preset--spacing--50) 3rem; }
	.wg-faq .wp-block-details summary { font-size: var(--wp--preset--font-size--medium); }
	.wg-crumb      { margin-bottom: var(--wp--preset--spacing--40); }
	.wg-hero-shot img { border-radius: 12px; }
}

/* --- Archive and hub cards: visual interest ----------------------------- */
/*
 * A title and two lines of excerpt in a bordered box is information, not a card
 * anyone wants to click. Three cheap additions, all CSS, no template change and
 * nothing for anyone to maintain per page:
 *
 *   an accent edge   a 4px gradient along the top, so the card has a top
 *   the arrow        a bottom-right chevron that slides on hover - the standard
 *                    signal that a whole card is a link
 *   the lift         raise and shadow on hover, matched to the blog cards
 */
.wp-block-post-template.wg-cards > li:has(> .wg-card) > .wg-card {
	position: relative;
	overflow: hidden;
	padding-block-end: calc(var(--wp--preset--spacing--60) + 1.5rem);
}
.wp-block-post-template.wg-cards > li:has(> .wg-card) > .wg-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--accent-bright) 100%);
	opacity: .85;
}
.wp-block-post-template.wg-cards > li:has(> .wg-card) > .wg-card::after {
	content: "→";
	position: absolute;
	right: var(--wp--preset--spacing--60);
	bottom: var(--wp--preset--spacing--50);
	font-size: 1.125rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-deep);
	transition: transform .18s;
}
.wp-block-post-template.wg-cards > li:has(> .wg-card):hover > .wg-card::after {
	transform: translateX(4px);
}
.wp-block-post-template.wg-cards > li:has(> .wg-card) {
	transition: transform .15s, box-shadow .15s;
	border-radius: 15px;
}
.wp-block-post-template.wg-cards > li:has(> .wg-card):hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(9, 12, 76, .10);
}
/* The card title carries the weight, so it gets the room. */
.wp-block-post-template.wg-cards > li:has(> .wg-card) .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	line-height: 1.2;
}
.wp-block-post-template.wg-cards > li:has(> .wg-card) .wp-block-post-excerpt {
	margin-block: 0;
	color: var(--wp--preset--color--text);
}
.wp-block-post-template.wg-cards > li:has(> .wg-card) .wp-block-post-excerpt__more-text {
	display: none;
}

/* On a dark section the accent edge and arrow need the brighter teal. */
.wg-on-dark .wp-block-post-template.wg-cards > li:has(> .wg-card) > .wg-card::after {
	color: var(--wp--preset--color--accent-bright);
}

/* --- Hub sections on an archive ------------------------------------------ */
/*
 * Replaces the child list that used to live inside a hub card.
 *
 * The old shape was: one card per area, with its features as a two-column list of
 * bare links inside it. That gave every feature about eighteen characters and no
 * description, and it made a product with 63 feature pages read as a directory.
 * Now the area is the section and the feature is the card, so both get a heading
 * and a sentence.
 *
 * `.wg-hubsecs` is the outer post-template: `layout: default` inside an
 * `alignfull` query, so each <li> is a full-width band and the alternating
 * background reaches the edge of the viewport. The section inside it is
 * `alignwide`, which is what keeps the content on the same 1180px column as
 * every other section on the site.
 */
.wg-hubsecs {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wg-hubsecs > li {
	padding-block: var(--wp--preset--spacing--90);
}
/* Banded rather than ruled: nine sections separated by hairlines read as a long
   table, and the eye stops counting. */
.wg-hubsecs > li:nth-child(even) {
	background: var(--wp--preset--color--surface);
}

.wg-hubsec .wg-sechead {
	margin-block-end: var(--wp--preset--spacing--60);
}
/* The area title is a link to the hub page, and should not look like body copy. */
.wg-hubsec .wp-block-post-title a {
	color: var(--wp--preset--color--text-strong);
	text-decoration: none;
}
.wg-hubsec .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* The section's own description. Capped so it does not run the full 1180px. */
/*
 * The section description runs the full content column.
 *
 * `.wg-lede` caps at 62ch and `.wg-sechead .wg-lede` at 54ch, which is right for
 * a page whose hero lede sits beside a screenshot. Here it wrapped after about
 * half the column and left the heading, the description and a four-card row all
 * ending at three different places.
 *
 * Uncapped on purpose, at Tony's call. A 1180px line of 17px text is a long
 * measure by the usual rule, but these are one or two sentences under a heading,
 * not body copy - the reader is scanning for the area they want, not reading a
 * paragraph.
 */
.wg-hubsec .wp-block-post-excerpt,
.wg-hubsec .wg-sechead .wg-lede,
.wg-hubsec .wg-lede {
	max-width: none;
	margin-block: 0;
}
/* Same for the heading: "Team, Security & Permissions" hit the 26ch cap and
   wrapped where the sector headings above it did not. */
.wg-hubsec .wg-h2,
.wg-hubsec .wp-block-post-title {
	max-width: none;
}
.wg-hubsec .wp-block-query {
	margin-block-start: 0;
}

/*
 * Archive cards keep equal heights.
 *
 * Tried the opposite for one build - `align-items: start`, so a card sized to its
 * own text - on the reasoning that twelve one-line summaries stretched to the
 * tallest in the row leaves dead space. Reverted at Tony's call: a ragged bottom
 * edge across four columns reads as broken more than empty space reads as filler,
 * and the `→` in the bottom-right corner needs a consistent baseline to sit on.
 *
 * `height: 100%` on .wg-card plus the grid's default stretch does it, so this
 * only has to not get in the way - the rule is here to say so, because "why do
 * these cards stretch" is otherwise a five-minute question.
 */
.wg-hubsec .wg-cards { align-items: stretch; }
.wg-hubsec .wg-cards .wg-card { height: 100%; }

@media (max-width: 599px) {
	.wg-hubsecs > li {
		padding-block: var(--wp--preset--spacing--70);
	}
}

/* --- Staging preview markers -------------------------------------------- */
/* Only ever rendered on a non-production install - see inc/staging-preview.php. */

.wg-status-flag {
	display: inline-block;
	margin-left: .5em;
	padding: .1em .45em;
	border-radius: 4px;
	background: #fdefc7;
	color: #7a5b00;
	font-family: var(--wp--preset--font-family--body);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}

.wg-preview-flag {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 99;
	padding: .4rem .75rem;
	border-radius: 999px;
	background: #7a5b00;
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	pointer-events: none;
}

/* --- Footer link tap targets -------------------------------------------- */
/*
 * Sixteen footer links measured 20px tall against the 24px minimum, which is
 * what "touch targets do not have sufficient size or spacing" was pointing at.
 * Padding rather than font-size: the footer type stays where the design put it,
 * and the hit area grows around it.
 */
footer .wp-block-navigation-item__content,
footer li > a,
footer .wp-block-list a {
	display: inline-block;
	padding-block: 3px;
	min-height: 24px;
}
footer .wp-block-list li + li { margin-block-start: 2px; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.wg-card, .wp-block-button__link { transition: none; }
	.wg-card-link:hover, .wp-block-button__link:hover { transform: none; }
}