/* ============================================================================
 * PK Peptides — Brand Design Tokens
 * ----------------------------------------------------------------------------
 * Single source of truth for brand color + type tokens, mirrored by the
 * presets in theme.json. Enqueued by functions.php on the front end and added
 * as an editor style so the editor matches the published site.
 *
 * Identity: clinical, B2B research-supply. Slate navy primary, white / light-gray
 * grounds, charcoal text, restrained teal accent. No decorative warm colors.
 *
 * Structure:
 *   1. :root  — raw brand values (the palette) + type tokens
 *   2. Semantic aliases — intent-named tokens that reference the raw values
 *   3. Usage guardrails (commented) — WCAG contrast rules per pairing
 *
 * CONTRAST SUMMARY (verified programmatically; AA = 4.5:1 normal / 3:1 large):
 *   On WHITE #FFFFFF:
 *     Charcoal   #1B1F24  16.56:1  -> AAA. Default body + UI text.
 *     Slate Navy #1E3A5F  11.50:1  -> AAA. Headings, primary buttons.
 *     Teal       #2C7A7B   5.03:1  -> AA. Links + accent (normal text OK).
 *     Steel Gray #5A6470   6.01:1  -> AA. Secondary / muted text.
 *   On LIGHT GRAY #F4F6F8:
 *     Charcoal   15.29:1 (AAA) | Navy 10.62:1 (AAA) | Teal 4.64:1 (AA) | Steel 5.55:1 (AA)
 *   Inverse (light on dark):
 *     White on Navy 11.50:1 (AAA) | White on Teal 5.03:1 (AA) | White on Navy-deep 14.76:1 (AAA)
 *   DECORATIVE-ONLY (fails small-text contrast):
 *     Hairline   #D5DBE1   1.40:1  -> borders/dividers ONLY. Never text or text bg.
 * (Recompute if any hex changes.)
 * ========================================================================== */

:root {
	/* --- 1. Raw brand palette ------------------------------------------- */
	--pk-slate-navy:   #1E3A5F; /* primary */
	--pk-white:        #FFFFFF; /* primary ground */
	--pk-gray-light:   #F4F6F8; /* alt ground / surface */
	--pk-charcoal:     #1B1F24; /* text */
	--pk-teal:         #2C7A7B; /* accent — AA, usable as normal text */
	--pk-steel:        #5A6470; /* secondary / muted text — AA */
	--pk-hairline:     #D5DBE1; /* DECORATIVE ONLY — borders/dividers */

	/* Tonal helpers derived from the palette (hovers / deep fills). */
	--pk-navy-deep:    #16293F; /* darker navy for hover/active + dark sections */
	--pk-teal-deep:    #245F60; /* darker teal for hover/active (AAA on white) */

	/* --- Type tokens ---------------------------------------------------- */
	--pk-font-heading: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pk-font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Accessible type scale. Body base = 19px (1.1875rem). ~1.25 ratio. */
	--pk-text-small:    1rem;       /* 16px — fine print, captions */
	--pk-text-body:     1.1875rem;  /* 19px — base body size */
	--pk-text-lg:       1.375rem;   /* 22px — lead paragraphs */
	--pk-text-h3:       1.75rem;    /* 28px */
	--pk-text-h2:       2.25rem;    /* 36px */
	--pk-text-h1:       3rem;       /* 48px — display */

	--pk-leading-body:    1.6;  /* comfortable line-height for 19px reading */
	--pk-leading-heading: 1.2;
	--pk-weight-body:     400;
	--pk-weight-strong:   600;
	--pk-weight-heading:  600;

	/* --- 2. Semantic aliases (use THESE in component CSS) --------------- */
	--pk-color-bg:            var(--pk-white);
	--pk-color-surface:       var(--pk-gray-light);
	--pk-color-text:          var(--pk-charcoal); /* 16.56:1 on white — AAA */
	--pk-color-text-muted:    var(--pk-steel);    /* 6.01:1 on white — AA  */
	--pk-color-heading:       var(--pk-slate-navy); /* 11.50:1 on white — AAA */
	--pk-color-link:          var(--pk-teal);     /* 5.03:1 on white — AA */
	--pk-color-link-hover:    var(--pk-slate-navy); /* 11.50:1 — AAA */
	--pk-color-accent:        var(--pk-teal);     /* AA as text/links/accents */
	--pk-color-border:        var(--pk-hairline); /* decorative only — 1.40:1 */

	/* Button: navy field + white label = 11.50:1 (AAA). Hover -> teal field +
	 * white label = 5.03:1 (AA). Both clear normal-text contrast. */
	--pk-btn-bg:         var(--pk-slate-navy);
	--pk-btn-text:       var(--pk-white);
	--pk-btn-bg-hover:   var(--pk-teal);
}

/* ----------------------------------------------------------------------------
 * Base element styling. theme.json drives most of this for block output; these
 * rules ensure consistency on non-block / classic markup and editor surfaces.
 * -------------------------------------------------------------------------- */
body,
.editor-styles-wrapper {
	background-color: var(--pk-color-bg);
	color: var(--pk-color-text);
	font-family: var(--pk-font-body);
	font-size: var(--pk-text-body);
	line-height: var(--pk-leading-body);
	font-weight: var(--pk-weight-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pk-font-heading);
	color: var(--pk-color-heading);
	line-height: var(--pk-leading-heading);
	font-weight: var(--pk-weight-heading);
}

h1 { font-size: var(--pk-text-h1); font-weight: 700; }
h2 { font-size: var(--pk-text-h2); }
h3 { font-size: var(--pk-text-h3); }

a {
	color: var(--pk-color-link);      /* teal 5.03:1 on white — AA normal text */
	text-decoration: underline;
}
a:hover,
a:focus {
	color: var(--pk-color-link-hover); /* navy 11.50:1 — AAA */
}

/* Muted/secondary text helper (steel gray — AA on white + light gray). */
.pk-text-muted { color: var(--pk-color-text-muted); }

/* ----------------------------------------------------------------------------
 * Decorative-only guardrails.
 * The Hairline color MUST NOT be used as text color or as a text background
 * (1.40:1 — fails). Allowed: borders, rules, dividers, non-text graphic strokes.
 * -------------------------------------------------------------------------- */
.pk-rule      { border: 0; border-top: 1px solid var(--pk-color-border); }
.pk-surface   { background-color: var(--pk-color-surface); }
.pk-border    { border: 1px solid var(--pk-color-border); }

/* Dark section helper (e.g. footer / callout): white text on deep navy = AAA. */
.pk-section--dark {
	background-color: var(--pk-navy-deep);
	color: var(--pk-white);
}
.pk-section--dark a { color: #FFFFFF; text-decoration: underline; }

/* ----------------------------------------------------------------------------
 * Homepage hero (.pk-hero) — photographic lab background with the product vial
 * on the right; a left-to-right navy gradient keeps the left-aligned copy
 * legible while the vial stays visible on the right.
 * -------------------------------------------------------------------------- */
.pk-hero .wp-block-cover__image-background { object-position: center right; }
/* Pull the copy off the far-left edge so it lines up with the page content
 * grid (the wide sections below) and reads closer to center, instead of
 * hugging the viewport edge. Falls back to the normal gutter on narrow screens. */
.pk-hero .wp-block-cover__inner-container {
	padding-left: clamp(1.25rem, 11vw, 15rem);
}
.pk-hero h1,
.pk-hero p { text-shadow: 0 1px 3px rgba(10, 20, 38, 0.45); }
/* Trust markers under the CTA: white icon + label chips that wrap gracefully. */
.pk-hero__features {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	color: var(--pk-white);
}
.pk-hero__features li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pk-hero__features svg { color: var(--pk-teal); flex: 0 0 auto; }
@media (max-width: 600px) {
	.pk-hero__features { gap: 0.6rem 1.1rem; }
	.pk-hero__features li { font-size: 0.74rem; }
}

/* Accent text helper — teal already clears AA at normal size; bump weight for
 * emphasis without relying on color alone. */
.pk-accent-text {
	color: var(--pk-color-accent);
	font-weight: 600;
}

/* ----------------------------------------------------------------------------
 * Brand logo (Site Logo block / custom-logo).
 * The custom_logo asset is the NAVY wordmark, which reads on white/light grounds
 * (header + the light footer). On a dark ground use the white variant: the rule
 * below renders the navy logo as white via a filter inside .pk-section--dark, so
 * no separate markup/attachment is needed for dark areas.
 * -------------------------------------------------------------------------- */
.custom-logo,
.wp-block-site-logo img {
	height: 64px;        /* the tight-cropped lockup fills the header band */
	width: auto;
	max-width: 100%;
}
@media (max-width: 600px) {
	.custom-logo, .wp-block-site-logo img { height: 48px; }
}
.wp-block-site-logo { line-height: 0; display: inline-flex; align-items: center; }

/* Footer logo slot a touch smaller; dark sections flip the logo to white. */
footer .wp-block-site-logo img,
.wp-block-template-part footer .wp-block-site-logo img { height: 40px; }
.pk-section--dark .wp-block-site-logo img,
.pk-section--dark .custom-logo {
	filter: brightness(0) invert(1); /* navy artwork -> white on dark ground */
}

/* ----------------------------------------------------------------------------
 * Homepage "Quality & transparency" cards (.pk-card)
 * Icon chip + concise lead + collapsible Details, with subtle hover lift.
 * -------------------------------------------------------------------------- */
.pk-card {
	box-shadow: 0 1px 2px rgba(27, 31, 36, 0.05), 0 2px 6px rgba(27, 31, 36, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pk-card:hover,
.pk-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(30, 58, 95, 0.14);
}
.pk-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: rgba(30, 58, 95, 0.06); /* navy tint chip */
}
.pk-card h3 { margin-top: 0.25rem; }
.pk-card details.pk-card__more {
	margin-top: 0.85rem;
	border-top: 1px solid var(--pk-color-border);
	padding-top: 0.7rem;
}
.pk-card details.pk-card__more > summary {
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--pk-teal);
	font-size: 0.95rem;
}
.pk-card details.pk-card__more > summary::-webkit-details-marker { display: none; }
.pk-card details.pk-card__more > summary::after { content: " \25B8"; } /* ▸ */
.pk-card details.pk-card__more[open] > summary::after { content: " \25BE"; } /* ▾ */
.pk-card details.pk-card__more p { margin: 0.5rem 0 0; }

/* Visible focus outline for keyboard users (navy, AAA on white/light grounds). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--pk-color-heading);
	outline-offset: 2px;
}