﻿/**
Theme Name: Peptide Dictionary
Theme URI: https://devjoo.com/peptide-dictionary/
Author: Devjoo
Author URI: https://devjoo.com/
Description: A lightweight, high-performance WordPress theme designed specifically for peptide research databases, dosage protocols, and scientific archives. Features clean, structured content layouts, seamless Custom Post Type integration, and fully responsive typography optimized for readability and fast page load times.
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: peptide-dictionary
Tags: dosage protocols, peptide research, scientific archives, custom post types, responsive design, fast loading, clean layouts

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
/* Default body links — do not override CTAs, nav utilities, or white text. */
a:not(.text-white):not([class*="bg-brand"]):not([class*="bg-sky"]):not([class*="bg-secondary"]):not([class*="text-slate-"]):not([class*="text-brand-"]):not([class*="text-secondary"]):not(.pd-toc-link):not(.pd-post-nav-card):not(.footer-link),
a:link:not(.text-white):not([class*="bg-brand"]):not([class*="bg-sky"]):not([class*="bg-secondary"]):not([class*="text-slate-"]):not([class*="text-brand-"]):not([class*="text-secondary"]):not(.pd-toc-link):not(.pd-post-nav-card):not(.footer-link),
a:visited:not(.text-white):not([class*="bg-brand"]):not([class*="bg-sky"]):not([class*="bg-secondary"]):not([class*="text-slate-"]):not([class*="text-brand-"]):not([class*="text-secondary"]):not(.pd-toc-link):not(.pd-post-nav-card):not(.footer-link) {
	color: #4a5568;
}

a:hover:not(.text-white):not([class*="bg-brand"]):not([class*="bg-sky"]):not([class*="text-slate-"]):not([class*="text-brand-"]):not([class*="text-secondary"]):not(.pd-toc-link):not(.pd-post-nav-card):not(.footer-link),
a:focus:not(.text-white):not([class*="bg-brand"]):not([class*="bg-sky"]):not([class*="text-slate-"]):not([class*="text-brand-"]):not([class*="text-secondary"]):not(.pd-toc-link):not(.pd-post-nav-card):not(.footer-link),
a:active:not(.text-white):not([class*="bg-brand"]):not([class*="bg-sky"]):not([class*="text-slate-"]):not([class*="text-brand-"]):not([class*="text-secondary"]):not(.pd-toc-link):not(.pd-post-nav-card):not(.footer-link) {
	color: #3498db;
}

/* Remove default browser dotted focus/active outline on links sitewide. */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:focus-visible,
a:active {
	outline: none !important;
	outline-offset: 0 !important;
	-webkit-tap-highlight-color: transparent;
}

/* Primary / solid CTA buttons keep white label in every state.
   Only solid brand shades — NOT light tints (bg-brand-50/100) used for nav active. */
a.text-white,
a.text-white:link,
a.text-white:visited,
a.text-white:hover,
a.text-white:focus,
a.text-white:active,
a[class*="bg-brand-500"],
a[class*="bg-brand-500"]:link,
a[class*="bg-brand-500"]:visited,
a[class*="bg-brand-500"]:hover,
a[class*="bg-brand-500"]:focus,
a[class*="bg-brand-500"]:active,
a[class*="bg-brand-600"],
a[class*="bg-brand-600"]:link,
a[class*="bg-brand-600"]:visited,
a[class*="bg-brand-600"]:hover,
a[class*="bg-brand-600"]:focus,
a[class*="bg-brand-600"]:active,
a[class*="bg-brand-700"],
a[class*="bg-brand-700"]:link,
a[class*="bg-brand-700"]:visited,
a[class*="bg-brand-700"]:hover,
a[class*="bg-sky"],
a[class*="bg-sky"]:link,
a[class*="bg-sky"]:visited,
a[class*="bg-sky"]:hover,
.pd-supply-card-btn,
.pd-supply-card-btn:link,
.pd-supply-card-btn:visited,
.pd-supply-card-btn:hover,
.pd-ref-btn,
.pd-ref-btn:link,
.pd-ref-btn:visited,
.pd-ref-btn:hover {
	color: #fff !important;
}

/* Header nav active pill — brand text on light tint only. */
nav[aria-label="Primary"] a.bg-brand-50,
nav[aria-label="Primary"] a.bg-brand-50:link,
nav[aria-label="Primary"] a.bg-brand-50:visited,
nav[aria-label="Primary"] a.bg-brand-50:hover,
nav[aria-label="Primary"] a.bg-brand-50:focus,
nav[aria-label="Primary"] a[aria-current="page"],
nav[aria-label="Primary"] a[aria-current="page"]:link,
nav[aria-label="Primary"] a[aria-current="page"]:visited {
	color: #15803d !important;
}

/* Inactive top-level nav links + mega triggers: slate by default, brand on hover. */
nav[aria-label="Primary"] > a:not(.bg-brand-50):not([aria-current="page"]),
nav[aria-label="Primary"] > a:not(.bg-brand-50):not([aria-current="page"]):link,
nav[aria-label="Primary"] > a:not(.bg-brand-50):not([aria-current="page"]):visited,
nav[aria-label="Primary"] > div > button {
	color: #334155 !important;
}
nav[aria-label="Primary"] > a:not(.bg-brand-50):not([aria-current="page"]):hover,
nav[aria-label="Primary"] > a:not(.bg-brand-50):not([aria-current="page"]):focus,
nav[aria-label="Primary"] > div > button:hover,
nav[aria-label="Primary"] > div > button:focus {
	color: #15803d !important;
}

/* Dark hero breadcrumbs — past routes must stay readable on slate-900 */
.bg-slate-900 nav[aria-label="Breadcrumb"] a,
.bg-slate-900 nav[aria-label="Breadcrumb"] a:link,
.bg-slate-900 nav[aria-label="Breadcrumb"] a:visited {
	color: #94a3b8 !important; /* slate-400 */
}
.bg-slate-900 nav[aria-label="Breadcrumb"] a:hover,
.bg-slate-900 nav[aria-label="Breadcrumb"] a:focus {
	color: #e2e8f0 !important; /* slate-200 */
}
.bg-slate-900 nav[aria-label="Breadcrumb"] {
	color: #94a3b8;
}
.bg-slate-900 nav[aria-label="Breadcrumb"] .text-slate-700,
.bg-slate-900 nav[aria-label="Breadcrumb"] > span:not(.text-white):not(.text-slate-300):not(.text-slate-400) {
	color: #64748b; /* slate-500 separators */
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
/* Mobile-first: no side floats (prevents squeezed text columns). */
.alignleft,
.alignright {
	display: block;
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
	max-width: 100%;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

@media screen and (min-width: 1280px) {
	.alignleft {

		/*rtl:ignore*/
		float: left;

		/*rtl:ignore*/
		margin-right: 1.5em;
		margin-left: 0;
		margin-bottom: 1.5em;
	}

	.alignright {

		/*rtl:ignore*/
		float: right;

		/*rtl:ignore*/
		margin-left: 1.5em;
		margin-right: 0;
		margin-bottom: 1.5em;
	}
}

.safe-area{
	max-width: 1280px;
	margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   Single Peptide — Article typography
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Reconstitution Guide banner + table title ──────────────────────────── */

.pd-guide-banner {
	/* Brand primary green (matches site / screenshot). */
	background:
		radial-gradient( circle at 92% 18%, rgba(255,255,255,.14) 0%, transparent 42% ),
		linear-gradient( 180deg, #3d8a6a 0%, #307055 55%, #265A44 100% );
	box-shadow: 0 4px 14px rgba(48, 112, 85, 0.22);
}

/* Two short brand-green bars — banner accent */
.pd-guide-banner-icon {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 4px;
}
.pd-guide-banner-icon span {
	display: block;
	width: 8px;
	height: 14px;
	border-radius: 2px;
	background: #a7f3d0; /* brand tint on green banner */
}
.pd-guide-banner-icon span:last-child {
	background: #6ee7b7;
	height: 10px;
	width: 8px;
}

.pd-table-title-bar {
	display: inline-block;
	width: 4px;
	height: 1.15em;
	border-radius: 2px;
	background: #307055; /* brand primary */
	flex-shrink: 0;
}

/*
 * Spacing matching the reference:
 *  – ~100px after the blue banner (before table title)
 *  – ~100px after the table (before Frequency / body text)
 */
.pd-reconstitution-guide.space-y-5 > :not([hidden]) ~ :not([hidden]) {
	/* neutralize Tailwind space-y so our explicit gaps win */
	margin-top: 0;
}
.pd-reconstitution-guide .pd-guide-banner {
	margin-bottom: 50px;
}
.pd-reconstitution-guide .pd-table-title {
    margin-bottom: 18px !important;
}
.pd-reconstitution-guide .pd-guide-table-wrap {
	margin-bottom: 32px !important;
}
.pd-reconstitution-guide .pd-article-text + .pd-info-note {
	margin-top: 2.25rem !important;
}

.pd-guide-table-wrap {
	overflow: hidden;
	border: 1px solid #c3e0d0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(48, 112, 85, 0.10);
}
.pd-guide-table-wrap > .overflow-x-auto {
	border: none !important;
	border-radius: 0 !important;
	overflow-x: auto;
}
.pd-reconstitution-guide table {
	margin: 0;
	border-collapse: collapse;
	width: 100%;
}
.pd-reconstitution-guide table thead tr {
	background: #307055 !important; /* brand primary */
}
.pd-reconstitution-guide table thead th {
	color: #fff !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.7rem;
	border: none !important;
	padding: 0.85rem 1rem !important;
}
.pd-reconstitution-guide table tbody tr {
	background: #fff !important;
}
.pd-reconstitution-guide table tbody tr + tr {
	border-top: 1px solid #eef2f7;
}
.pd-reconstitution-guide table tbody td {
	padding: 0.75rem 1rem !important;
	vertical-align: middle;
	border: none !important;
	line-height: 1.4;
}
/* Kill empty TinyMCE leftovers that inflate the last row */
.pd-reconstitution-guide table tbody td p {
	margin: 0;
}
.pd-reconstitution-guide table tbody td p:empty,
.pd-reconstitution-guide table tbody td br:only-child {
	display: none;
}
.pd-reconstitution-guide table tbody tr:last-child td {
	padding-bottom: 0.75rem !important;
}

/* Important note — pale yellow info callout */
.pd-info-note {
	margin-top: 0.25rem;
	padding: 0.85rem 1.15rem;
	background: #fff9e6;
	border: 1px solid #f5e6b8;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #57534e;
	font-style: italic;
	text-align: center;
}
.pd-info-note p {
	margin: 0;
}
.pd-info-note strong,
.pd-info-note b {
	font-style: normal;
	color: #44403c;
}

/* ── Sticky TOC ──────────────────────────────────────────────────────────── */

.pd-toc-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.pd-toc-link {
	/* font-semibold always — active state uses color/bg only, so text doesn't jump */
	font-weight: 600;
}

/* ── Card grid (supplies / supplier cards) ──────────────────────────────── */

.pd-supply-card-btn {
	background: #307055; /* brand primary */
	color: #fff !important;
}
.pd-supply-card-btn:visited,
.pd-supply-card-btn:hover,
.pd-supply-card-btn:focus,
.pd-supply-card-btn:active {
	color: #fff !important;
}
.pd-supply-card-btn:hover {
	background: #265A44;
}
.pd-supply-card-media img {
	max-height: 140px;
	width: auto;
	margin: 0 auto;
}

/* Featured image → card blend.
   Sits over the bottom of the image and fades it into the white card so the
   image has no hard cut-off edge against the body text. */
.pd-featured-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* overlap by 1px to avoid a hairline seam */
	height: 90px;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba( 255, 255, 255, 0 )    0%,
		rgba( 255, 255, 255, 0.55 ) 45%,
		rgba( 255, 255, 255, 0.88 ) 75%,
		#ffffff                     100%
	);
}

/* ── Callout box (e.g. "Related dosage pages:") ─────────────────────────── */

.pd-callout {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: #ebf5fb;                 /* secondary tint */
	border-left: 4px solid #3498db;      /* secondary */
	border-radius: 0 0.5rem 0.5rem 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: #334155;
}
.pd-callout .pd-callout-label {
	color: #0f172a;
	font-weight: 700;
	margin-right: 0.25rem;
}
.pd-callout p {
	display: inline;
	margin: 0;
}
.pd-callout p + p {
	display: block;
	margin-top: 0.75rem;
}
.pd-callout a,
.pd-callout a:link,
.pd-callout a:visited {
	color: #3498db !important;
	font-weight: 600;
	text-decoration: underline;
}
.pd-callout a:hover {
	color: #2176ae !important;
	text-decoration: underline;
}
.pd-callout ul,
.pd-callout ol {
	margin: 0.5rem 0 0 1.25rem;
}

/* Each section block */
.pd-article-section {
	padding-bottom: 2rem;
}
.pd-article-section + .pd-article-section {
    margin-top: 0 !important;
    padding-top: 20px;
}
/* No trailing gap on the final section inside the article card. */
.pd-article-section:last-child {
	padding-bottom: 0;
}

/* Headings */
.pd-h2 {
	font-size: 1.375rem;   /* ~22px */
	font-weight: 800;
	color: #0f172a;        /* slate-900 */
	line-height: 1.3;
	margin-bottom: 0.875rem;
	padding-bottom: 0.625rem;
	border-bottom: 2px solid #e2e8f0;
}
.pd-h3 {
	font-size: 1.125rem;   /* 18px */
	font-weight: 700;
	color: #1e293b;
	line-height: 1.35;
	margin-top: 0.25rem;
	margin-bottom: 0.625rem;
}
.pd-h4 {
	font-size: 0.9375rem;  /* 15px */
	font-weight: 700;
	color: #334155;
	line-height: 1.4;
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
}
.pd-section, .pd-article-section{
	margin-top: 40px !important;
}
/* Section title with Lucide icon (reference card layout) */
.pd-section-head {
	margin-bottom: 1.125rem;
}
.pd-section-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1.375rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.3;
	margin: 0;
}
.pd-section-title.pd-h3,
h3.pd-section-title {
	font-size: 1.125rem;
}
.pd-section-title.pd-h4,
h4.pd-section-title {
	font-size: 1rem;
}
.pd-section-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: #307055; /* brand primary */
	flex-shrink: 0;
	stroke-width: 2;
}
.pd-section-accent {
	display: block;
	width: 2rem;
	height: 3px;
	background: #307055;
	border-radius: 2px;
	margin-top: 0.55rem;
}
.pd-section-rule {
	display: block;
	width: 100%;
	height: 1px;
	background: #e2e8f0;
	margin-top: 0.75rem;
}
.pd-section-title--no-icon {
	gap: 0;
}

/* No title/heading: drop scroll offset and top margin */
.pd-section--no-heading,
.pd-article-section.pd-section--no-heading {
	scroll-margin-top: 0 !important;
	margin-top: 0 !important;
}
.pd-article-section.pd-section--no-heading {
	padding-top: 0;
}
.pd-article-section + .pd-article-section.pd-section--no-heading {
	border-top: none;
	padding-top: 0;
}

/* Evidence footer on peptide singles */
.pd-evidence-footer {
	margin-top: 2rem;
	padding: 0.9rem 1.15rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 0.625rem;
	text-align: center;
}
.pd-evidence-footer-text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: #475569;
}
.pd-evidence-footer-text strong {
	color: #0f172a;
	font-weight: 700;
}
.pd-evidence-footer-sep {
	margin: 0 0.35rem;
	color: #94a3b8;
}
.pd-evidence-footer-link,
.pd-evidence-footer-link:link,
.pd-evidence-footer-link:visited {
	color: #4a5568;
	text-decoration: none;
	font-weight: 500;
}
.pd-evidence-footer-link:hover {
	color: #3498db;
	text-decoration: underline;
}
.pd-evidence-footer-muted {
	color: #64748b;
}

/* Important Notes callout */
.pd-important-note {
	margin-top: 0.5rem !important;
}
.pd-important-note-card {
	background: #fbf6e9;
	border: 1px solid #f0e4c4;
	border-radius: 0.75rem;
	padding: 1.15rem 1.25rem 1.25rem;
}
.pd-important-note-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.65rem;
}
.pd-important-note-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background: #e74c3c; /* danger */
	color: #fff;
	flex-shrink: 0;
}
.pd-important-note-icon {
	width: 0.85rem;
	height: 0.85rem;
	stroke-width: 2.5;
	color: #fff;
}
.pd-important-note-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: #c0392b; /* danger */
	line-height: 1.3;
}
.pd-important-note-body {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #57534e;
}
.pd-important-note-body p {
	margin: 0 0 0.75rem;
}
.pd-important-note-body p:last-child {
	margin-bottom: 0;
}
.pd-important-note-body strong,
.pd-important-note-body b {
	color: #1e293b;
	font-weight: 700;
}

/* References cards */
.pd-references .pd-section-head {
	margin-bottom: 1.25rem;
}
.pd-ref-list {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}
.pd-ref-card {
	background: #fff;
	border: 1px solid #e8eef5;
	border-left: 3px solid #3498db;
	border-radius: 0.75rem;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
	padding: 1rem 1.15rem 1.1rem;
}
.pd-ref-card-top {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 0.4rem;
}
.pd-ref-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: #3498db;
}
.pd-ref-quote-icon {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.5;
}
.pd-ref-name {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #334155;
	line-height: 1.35;
}
.pd-ref-info {
	margin: 0 0 0.85rem;
	padding-left: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: #64748b;
}
.pd-ref-dash {
	margin-right: 0.2rem;
	color: #94a3b8;
}
.pd-ref-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 1.5rem;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: #307055;
	color: #fff !important;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background 0.15s ease;
}
.pd-ref-btn:visited,
.pd-ref-btn:hover,
.pd-ref-btn:focus,
.pd-ref-btn:active {
	color: #fff !important;
}
.pd-ref-btn:hover {
	background: #265A44;
}
.pd-ref-btn--disabled {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

@media screen and (max-width: 640px) {
	.pd-ref-info,
	.pd-ref-btn {
		margin-left: 0;
		padding-left: 0;
	}
	.pd-ref-info {
		padding-left: 0;
	}
}

/* Rich-text body */
.pd-article-text {
	font-size: 0.9375rem;  /* 15px — comfortable reading size */
	color: #334155;        /* slate-700 */
	line-height: 1.8;
}
.pd-article-text p {
	margin-top: 0;
	margin-bottom: 1rem;
}
.pd-article-text p:last-child { margin-bottom: 0; }

/* Rich text content from the editor — always secondary blue regardless of global rules. */
.pd-article-text a,
.pd-article-text a:link,
.pd-article-text a:visited {
	color: #3498db !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pd-article-text a:hover,
.pd-article-text a:focus {
	color: #2176ae !important;
}

/* Gutenberg / editor content on pages and posts (entry-content fallback). */
.entry-content a:not(.wp-block-button__link):not(.pd-solid-brand-btn):not(.pd-toc-link),
.entry-content a:not(.wp-block-button__link):not(.pd-solid-brand-btn):not(.pd-toc-link):link,
.entry-content a:not(.wp-block-button__link):not(.pd-solid-brand-btn):not(.pd-toc-link):visited {
	color: #3498db !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.entry-content a:not(.wp-block-button__link):not(.pd-solid-brand-btn):hover,
.entry-content a:not(.wp-block-button__link):not(.pd-solid-brand-btn):focus {
	color: #2176ae !important;
}
.entry-content ol,
.entry-content ol.wp-block-list {
	list-style: decimal !important;
	list-style-position: outside !important;
	padding-left: 1.6rem;
}
.entry-content ul,
.entry-content ul.wp-block-list {
	list-style: disc !important;
	list-style-position: outside !important;
	padding-left: 1.6rem;
}
.entry-content li {
	display: list-item !important;
}

.pd-article-text strong,
.pd-article-text b   { color: #0f172a; font-weight: 700; }

.pd-article-text em,
.pd-article-text i   { font-style: italic; }

.pd-article-text ul,
.pd-article-text ol {
	margin: 0.25rem 0 1rem 1.5rem;
	padding: 0;
}
.pd-article-text ul { list-style: disc; }
.pd-article-text ol { list-style: decimal; }
.pd-article-text li {
	margin-bottom: 0.35rem;
	padding-left: 0.25rem;
}
.pd-article-text li::marker { color: #3498db; }

.pd-article-text blockquote {
	border-left: 3px solid #3498db;
	margin: 1.25rem 0;
	padding: 0.625rem 1rem;
	background: #ebf5fb;
	border-radius: 0 0.5rem 0.5rem 0;
	font-style: italic;
	color: #374151;
}

/* Inline citations / superscript */
.pd-article-text sup {
	font-size: 0.65em;
	vertical-align: super;
	line-height: 1;
	color: #3498db;
	font-weight: 700;
}
.pd-article-text sub {
	font-size: 0.65em;
	vertical-align: sub;
	line-height: 1;
	color: #3498db;
}
.pd-article-text sup a {
	color: #4a5568;
	text-decoration: none;
	font-weight: 700;
}
.pd-article-text sup a:hover { color: #3498db; text-decoration: underline; }

/* Rich editor images — mobile full-width stack; desktop honors alignment */
.pd-article-text .pd-rich-media {
	display: block;
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	margin: 1rem 0 1.25rem;
	box-sizing: border-box;
}
.pd-article-text .pd-rich-media img,
.pd-article-text .pd-rich-media-img {
	display: block;
	float: none !important;
	width: 100%;
	max-width: 100% !important;
	height: auto !important;
	margin: 0;
}
.pd-article-text img {
	display: block;
	max-width: 100%;
	height: auto;
}
.pd-article-text .alignleft,
.pd-article-text .alignright,
.pd-article-text .aligncenter,
.pd-article-text .wp-caption {
	float: none !important;
	display: block;
	width: 100% !important;
	max-width: 100%;
	margin: 1rem 0;
}

@media screen and (min-width: 1024px) {
	.pd-article-text .pd-rich-media--right {
		float: right;
		clear: right;
		width: 38%;
		max-width: 280px;
		margin: 0.15rem 0 1.25rem 1.25rem;
	}
	.pd-article-text .pd-rich-media--left {
		float: left;
		clear: left;
		width: 38%;
		max-width: 280px;
		margin: 0.15rem 1.25rem 1.25rem 0;
	}
	.pd-article-text .pd-rich-media--center {
		float: none;
		width: auto;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
	.pd-article-text .pd-rich-media--none {
		float: none;
		width: 100%;
		max-width: 100%;
	}
	.pd-article-text::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Tables inside rich content */
.pd-article-text table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	margin: 1rem 0;
}
.pd-article-text th {
	background: #f8fafc;
	color: #1e293b;
	font-weight: 700;
	text-align: left;
	padding: 0.5rem 0.75rem;
	border: 1px solid #e2e8f0;
}
.pd-article-text td {
	padding: 0.45rem 0.75rem;
	border: 1px solid #e2e8f0;
	color: #334155;
}
/* Visited links: no purple — match default link color, except solid CTAs / nav utilities. */
a:visited:not(.text-white):not([class*="bg-brand"]):not([class*="bg-sky"]):not([class*="bg-secondary"]):not([class*="text-slate-"]):not([class*="text-brand-"]):not([class*="text-secondary"]):not(.pd-toc-link):not(.pd-post-nav-card):not(.footer-link) {
	color: #4a5568;
}
.pd-supply-card-btn:visited,
.pd-ref-btn:visited,
a.text-white:visited,
a[class*="bg-sky"]:visited,
a.pd-solid-brand-btn:visited {
	color: #fff !important;
}

/* Outline/ghost archive link button — always show brand text, never white. */
a.pd-archive-link-btn,
a.pd-archive-link-btn:visited,
a.pd-archive-link-btn:focus {
	color: #1a6b4a !important; /* brand-700 */
	text-decoration: none !important;
}
a.pd-archive-link-btn:hover {
	color: #fff !important;
}
/* Dropdown menu links must never go white, even when visited. */
.pd-user-dropdown a:visited {
	color: #334155 !important;
}
.pd-user-dropdown a[class*="text-red"]:visited {
	color: #dc2626 !important;
}

/* Protocol card CTA button — lock white text against all global link overrides. */
a.pd-protocol-card-btn,
a.pd-protocol-card-btn:visited,
a.pd-protocol-card-btn:hover,
a.pd-protocol-card-btn:focus {
	color: #fff !important;
	text-decoration: none !important;
}

/* ── Auth page ──────────────────────────────────────────────────────────── */
/*
 * WordPress injects generic form styles (input, select, textarea) that
 * override Tailwind. All rules here use !important to win that specificity
 * battle without touching WP core CSS.
 */

/* Tab pill container */
/* Auth tab switcher — scoped inside the auth card only, not footer grids */
.page-template-page-auth .pd-auth-tabs {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	padding: 6px !important;
	background: rgba(241,245,249,.8) !important;
	border-radius: 1rem !important;
	border: 1px solid rgba(226,232,240,.6) !important;
	gap: 0 !important;
}

/* Tab buttons */
.page-template-page-auth .pd-auth-tabs button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 10px 12px !important;
	border-radius: .75rem !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	border: none !important;
	cursor: pointer !important;
	transition: all .15s !important;
	background: transparent !important;
	box-shadow: none !important;
	width: 100% !important;
}

/* Auth form inputs — reset WP overrides */
.page-template-page-auth input[type="text"],
.page-template-page-auth input[type="email"],
.page-template-page-auth input[type="password"],
.page-template-page-auth input[type="checkbox"] {
	width: 100% !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: .75rem !important;
	font-size: .75rem !important;
	font-weight: 500 !important;
	color: #1e293b !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color .2s, background .2s !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.page-template-page-auth input[type="text"],
.page-template-page-auth input[type="email"],
.page-template-page-auth input[type="password"] {
	padding: 10px 40px 10px 40px !important;
	line-height: 1.4 !important;
	height: auto !important;
}

.page-template-page-auth input[type="text"]:focus,
.page-template-page-auth input[type="email"]:focus,
.page-template-page-auth input[type="password"]:focus {
	border-color: #307055 !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(48,112,85,.15) !important;
}

.page-template-page-auth input[type="checkbox"] {
	width: 1rem !important;
	height: 1rem !important;
	padding: 0 !important;
	border-radius: .25rem !important;
	cursor: pointer !important;
}

/* Icon positioning inside inputs */
.page-template-page-auth .relative > svg,
.page-template-page-auth .relative > i[data-lucide] {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	width: 16px !important;
	height: 16px !important;
	color: #94a3b8 !important;
}

/* Eye-toggle button inside password field */
.page-template-page-auth .relative > button[type="button"] {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	color: #94a3b8 !important;
	line-height: 1 !important;
}
.page-template-page-auth .relative > button[type="button"]:hover {
	color: #475569 !important;
}

/* Submit buttons */
.page-template-page-auth button[type="submit"] {
	width: 100% !important;
	padding: 12px 24px !important;
	background: #307055 !important;
	color: #fff !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	border-radius: .75rem !important;
	border: none !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
	transition: background .2s !important;
	line-height: 1 !important;
}
.page-template-page-auth button[type="submit"]:hover {
	background: #265a44 !important;
}

/* Labels */
.page-template-page-auth label {
	display: block !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	color: #334155 !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	margin-bottom: 8px !important;
}

.page-template-page-auth label.flex {
	display: flex !important;
	align-items: flex-start !important;
	text-transform: none !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}

/* ── Custom checkbox (auth forms) ───────────────────────────────────────── */
.page-template-page-auth label.pd-check-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin-bottom: 0 !important;
	padding-top: 2px;
	font-size: .75rem !important;
	font-weight: 500 !important;
	color: #475569 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.5 !important;
	cursor: pointer !important;
}

/* Real input: visually hidden but still focusable & label-activatable */
.pd-check-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* The visible box */
.pd-check-box {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	border: 2px solid #cbd5e1;
	border-radius: 4px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s, border-color .15s;
}

/* Checkmark hidden until checked */
.pd-check-box svg {
	width: 10px;
	height: 10px;
	stroke: #fff;
	stroke-width: 3;
	fill: none;
	opacity: 0;
	transition: opacity .12s;
}

.pd-check-input:checked + .pd-check-box {
	background: #1a7a4e;
	border-color: #1a7a4e;
}
.pd-check-input:checked + .pd-check-box svg {
	opacity: 1;
}
.pd-check-input:focus-visible + .pd-check-box {
	box-shadow: 0 0 0 3px rgba(26,122,78,.25);
}

/* Error state — unchecked after a submit attempt */
.pd-check-box.pd-check-box--error {
	border-color: #f87171;
}
.pd-check-label .pd-check-text--error {
	color: #dc2626 !important;
}

/* Auth card and forms */
.page-template-page-auth .space-y-4 > * + * {
	margin-top: 1rem !important;
}
.page-template-page-auth .space-y-6 > * + * {
	margin-top: 1.5rem !important;
}

/* ── User avatar dropdown ───────────────────────────────────────────────── */
.pd-user-dropdown a {
	color: #334155 !important;
	text-decoration: none;
}
.pd-user-dropdown a:hover {
	color: #1e293b !important;
}
.pd-user-dropdown a.text-red-600,
.pd-user-dropdown a[class*="text-red"] {
	color: #dc2626 !important;
}
.pd-user-dropdown a.text-red-600:hover,
.pd-user-dropdown a[class*="text-red"]:hover {
	color: #b91c1c !important;
}

/* ── Policy page typography (.pd-policy-body) ───────────────────────────── */
.pd-policy-body {
	font-size: .9375rem;
	line-height: 1.8;
	color: #334155;
}
.pd-policy-body h1 {
	font-size: 2rem;
	font-weight: 900;
	color: #0f172a;
	margin: 0 0 1.25rem;
	line-height: 1.2;
}
.pd-policy-body h2 {
	font-size: 1.2rem;
	font-weight: 800;
	color: #0f172a;
	margin: 2.5rem 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid #e8f5ef;
	scroll-margin-top: 6rem;
}
.pd-policy-body h3 {
	font-size: 1rem;
	font-weight: 700;
	color: #1e293b;
	margin: 1.5rem 0 .5rem;
}
.pd-policy-body p {
	margin: 0 0 1.1rem;
	color: #475569;
}
.pd-policy-body p.pd-calc-syringe-desc {
	margin-top: 1.25rem !important;
	margin-bottom: 0 !important;
}
.pd-policy-body ul,
.pd-policy-body ol,
.pd-policy-body ul.wp-block-list,
.pd-policy-body ol.wp-block-list {
	margin: 0 0 1.25rem 0;
	padding: 0 0 0 1.6rem;
	color: #475569;
}
.pd-policy-body ul,
.pd-policy-body ul.wp-block-list {
	list-style: disc !important;
	list-style-position: outside !important;
}
.pd-policy-body ol,
.pd-policy-body ol.wp-block-list {
	list-style: decimal !important;
	list-style-position: outside !important;
}
.pd-policy-body li {
	margin-bottom: .65rem;
	padding-left: .25rem;
	display: list-item !important;
}
.pd-policy-body li::marker {
	color: #3498db;
	font-weight: 700;
}
.pd-policy-body strong {
	font-weight: 700;
	color: #1e293b;
}
.pd-policy-body em {
	font-style: italic;
	color: #64748b;
}
.pd-policy-body a,
.pd-policy-body a:link,
.pd-policy-body a:visited {
	color: #3498db !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pd-policy-body a:hover,
.pd-policy-body a:focus {
	color: #2176ae !important;
}
.pd-policy-body blockquote {
	border-left: 3px solid #307055;
	margin: 1.5rem 0;
	padding: .75rem 1.25rem;
	background: #f0f7f4;
	border-radius: 0 .5rem .5rem 0;
	color: #1e293b;
	font-style: italic;
}

/* ── Request protocol page form ─────────────────────────────────────────── */
.page-template-page-request-protocol .pd-req-label {
	display: block !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	color: #475569 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	margin-bottom: 8px !important;
}
/* Scope to the page form only — exclude #wpadminbar inputs */
.page-template-page-request-protocol .pd-req-form input[type="text"],
.page-template-page-request-protocol .pd-req-form input[type="email"],
.page-template-page-request-protocol .pd-req-form select,
.page-template-page-request-protocol .pd-req-form textarea {
	width: 100% !important;
	padding: 11px 16px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: .75rem !important;
	font-size: .85rem !important;
	color: #1e293b !important;
	background: #f8fafc !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .15s, background .15s, box-shadow .15s !important;
	line-height: 1.5 !important;
	height: auto !important;
}
.page-template-page-request-protocol .pd-req-form input[type="text"]:focus,
.page-template-page-request-protocol .pd-req-form input[type="email"]:focus,
.page-template-page-request-protocol .pd-req-form select:focus,
.page-template-page-request-protocol .pd-req-form textarea:focus {
	border-color: #307055 !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(48,112,85,.12) !important;
}
.page-template-page-request-protocol .pd-req-form input[type="checkbox"] {
	width: 1rem !important;
	height: 1rem !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: .25rem !important;
	border: 1px solid #cbd5e1 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}
/* Error state */
.page-template-page-request-protocol .pd-req-form .pd-req-input-err {
	border-color: #ef4444 !important;
	background: #fff5f5 !important;
}
/* Space between form fields */
.page-template-page-request-protocol .pd-req-form.space-y-5 > * + * {
	margin-top: 1.4rem !important;
}
.page-template-page-request-protocol .pd-req-form .grid.gap-4 {
	gap: 1rem !important;
}
/* Submit button */
.page-template-page-request-protocol .pd-req-form button[type="submit"] {
	padding: 10px 24px !important;
	background: #307055 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	font-size: .85rem !important;
	cursor: pointer !important;
	transition: background .15s !important;
}
.page-template-page-request-protocol .pd-req-form button[type="submit"]:hover {
	background: #265a44 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Contents Section — Flexible Block Styles
   (pd-cb-* for content-block sub-blocks; pd-list-* for list variants)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared alert base */
.pd-alert {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	border-left: 4px solid transparent;
	align-items: flex-start;
}
.pd-alert-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
}
.pd-alert-body { flex: 1; }
.pd-alert-heading {
	font-weight: 700;
	font-size: .875rem;
	margin: 0 0 4px;
}
.pd-alert-content { font-size: .85rem; line-height: 1.6; }
.pd-alert-content p { margin: 0 0 .5em; }
.pd-alert-content p:last-child { margin-bottom: 0; }

/* Alert variants */
.pd-alert--info    { background: #eff6ff; border-left-color: #3b82f6; }
.pd-alert--info    .pd-alert-icon { color: #3b82f6; }
.pd-alert--info    .pd-alert-content { color: #1e40af; }

.pd-alert--success { background: #f0fdf4; border-left-color: #22c55e; }
.pd-alert--success .pd-alert-icon { color: #16a34a; }
.pd-alert--success .pd-alert-content { color: #15803d; }

.pd-alert--warning { background: #fffbeb; border-left-color: #f59e0b; }
.pd-alert--warning .pd-alert-icon { color: #d97706; }
.pd-alert--warning .pd-alert-content { color: #92400e; }

.pd-alert--danger  { background: #fef2f2; border-left-color: #ef4444; }
.pd-alert--danger  .pd-alert-icon { color: #dc2626; }
.pd-alert--danger  .pd-alert-content { color: #991b1b; }

/* ── List styles ── */

.pd-list-heading {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #94a3b8;
	margin-bottom: 10px;
}

/* Numbered Cards */
.pd-list-numbered-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: nc;
}
.pd-numbered-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.pd-numbered-card-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 50%;
	background: #307055;
	color: #fff;
	font-size: .8rem;
	font-weight: 800;
	flex-shrink: 0;
}
.pd-numbered-card-text {
	font-size: .875rem;
	line-height: 1.65;
	color: #334155;
	padding-top: 4px;
}

/* Bullet List */
.pd-list-unordered {
	list-style: disc;
	padding-left: 1.4em;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pd-list-unordered li {
	font-size: .875rem;
	color: #475569;
	line-height: 1.65;
}
.pd-list-unordered li::marker { color: #307055; }

/* Plain Ordered */
.pd-list-ordered {
	list-style: decimal;
	padding-left: 1.4em;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pd-list-ordered li {
	font-size: .875rem;
	color: #475569;
	line-height: 1.65;
}
.pd-list-ordered li::marker { color: #307055; font-weight: 600; }

/* Two-Column Plain */
.pd-list-column-plain {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.pd-list-column-plain li {
	font-size: .875rem;
	color: #475569;
	padding: 4px 0;
	border-bottom: 1px solid #f1f5f9;
	line-height: 1.5;
}
@media (max-width: 640px) {
	.pd-list-column-plain { grid-template-columns: 1fr; }
}

/* Shaded Row List */
.pd-list-opacity-bg {
	list-style: none;
	padding: 0;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
}
.pd-list-opacity-bg li {
	font-size: .875rem;
	color: #334155;
	padding: 10px 16px;
	border-bottom: 1px solid #e2e8f0;
	line-height: 1.5;
}
.pd-list-opacity-bg li:last-child { border-bottom: none; }
.pd-list-opacity-bg li:nth-child(even) { background: #f8fafc; }

/* Tag / Pill Grid */
.pd-list-grid-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pd-grid-btn {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	font-size: .8rem;
	font-weight: 600;
	border-radius: 30px;
	background: #f0f7f4;
	color: #307055;
	border: 1px solid #c6ddd4;
	line-height: 1.4;
}

/* -- Single post navigation ---------------------------------------------- */
/* ── Post prev/next navigation cards ──────────────────────────────────── */
.pd-post-nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
}
.pd-post-nav-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: .875rem 1rem;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: .75rem;
	color: #475569 !important;
	text-decoration: none !important;
	transition: border-color .15s, box-shadow .15s;
}
.pd-post-nav-card:hover {
	border-color: #86efac;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.pd-post-nav-card--next {
	text-align: right;
}
.pd-post-nav-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #94a3b8;
}
.pd-post-nav-card--next .pd-post-nav-label { justify-content: flex-end; }
.pd-post-nav-title {
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.35;
	color: #334155;
}

/* -- Archive pagination --------------------------------------------------- */
.pd-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: center;
}
.pd-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border-radius: .5rem;
	font-size: .8rem;
	font-weight: 600;
	color: #475569;
	border: 1px solid #e2e8f0;
	background: #fff;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.pd-pagination .page-numbers:hover {
	background: #f0faf5;
	border-color: var(--color-brand-400, #4ade80);
	color: var(--color-brand-700, #15613c);
}
.pd-pagination .page-numbers.current {
	background: var(--color-brand-600, #1a6b43);
	border-color: var(--color-brand-600, #1a6b43);
	color: #fff;
}
.pd-pagination .page-numbers.dots { border: none; background: none; }

/* ── Footer link hover (overrides global link colour) ─────────────────── */
.footer-link {
	display: block;
	font-size: .875rem;
	color: #94a3b8 !important;
	text-decoration: none;
	transition: color .15s;
}
.footer-link:hover { color: #fff !important; }

/* Strip list styles from WP nav menus rendered inside footer columns */
.footer-links ul,
.footer-links .menu {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.footer-links li {
	padding: 0 !important;
	margin: 0 0 6px !important;
}
.footer-links li::before { display: none !important; }

/* ── Mega-menu dropdown links ────────────────────────────────────────────────
   Root cause: Tailwind modifier classes like "hover:bg-brand-50" and
   "hover:text-brand-700" contain the substrings "bg-brand"/"text-brand-",
   making [class*="bg-brand"] and [class*="text-brand-"] attribute selectors
   fire on plain nav links. Avoid substring selectors entirely — use explicit
   custom classes instead.

   .pd-mega-dropdown   — white panel wrapper (peptides + blog dropdowns)
   .pd-mega-brand-link — "Browse all" / "View All Articles" (brand green)
   .pd-mega-cta        — solid green CTA button (white label)              */

/* Default: all links in the panel → dark slate */
.pd-mega-dropdown a,
.pd-mega-dropdown a:link,
.pd-mega-dropdown a:visited {
	color: #334155 !important;
	text-decoration: none !important;
}
.pd-mega-dropdown a:hover,
.pd-mega-dropdown a:focus {
	color: #15803d !important;
}
/* Brand-coloured archive / view-all text links */
.pd-mega-brand-link,
.pd-mega-brand-link:link,
.pd-mega-brand-link:visited {
	color: #15803d !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.pd-mega-brand-link:hover,
.pd-mega-brand-link:focus {
	color: #166534 !important;
}
/* Solid CTA button — keep white label.
   Scoped inside .pd-mega-dropdown to get specificity (0,3,0) and beat the
   default panel rule .pd-mega-dropdown a:link (0,2,1). */
.pd-mega-dropdown .pd-mega-cta,
.pd-mega-dropdown .pd-mega-cta:link,
.pd-mega-dropdown .pd-mega-cta:visited,
.pd-mega-dropdown .pd-mega-cta:hover,
.pd-mega-dropdown .pd-mega-cta:focus {
	color: #fff !important;
}
/* Post/guide card title links */
.pd-card-title-link,
.pd-card-title-link:link,
.pd-card-title-link:visited {
	color: inherit;
	text-decoration: none;
}
.pd-card-title-link:hover,
.pd-card-title-link:focus {
	color: #15803d !important;
	text-decoration: none;
}

/* Post card thumbnail / placeholder */
.pd-card-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f1f5f9;
}
.pd-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pd-card-thumb-placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	min-height: 100%;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f1f5f9 0%, #ecfdf5 55%, #d1fae5 100%);
}

/* ── Homepage FAQ ───────────────────────────────────────────────────────── */
.pd-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.pd-faq-item {
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	filter: none !important;
	outline: none !important;
}
.pd-faq-item--open {
	border-color: #bbf7d0 !important;
}
.pd-faq-q {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	text-align: left;
	padding: 1rem 1.15rem !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
.pd-faq-num {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	color: #64748b;
}
.pd-faq-num--open {
	background: #1a7a4e !important;
	color: #fff !important;
}
.pd-faq-q-text {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}
.pd-faq-chevron {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	transition: transform 0.2s;
}
.pd-faq-a {
	padding: 0 1.15rem 1rem 3.15rem !important;
}
.pd-faq-a p {
	margin: 0 !important;
	font-size: 0.875rem;
	line-height: 1.65;
	color: #475569;
	border-left: 2px solid #4ade80;
	padding-left: 0.75rem;
}

/* ── Homepage subscribe form ────────────────────────────────────────────── */
.pd-subscribe-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 36rem;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.pd-subscribe-row {
		flex-direction: row;
		align-items: stretch;
	}
}
.pd-subscribe-input,
input.pd-subscribe-input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 1rem 1.25rem !important;
	padding-left: 1.25rem !important;
	font-size: 0.9375rem !important;
	line-height: 1.4 !important;
	color: #1e293b !important;
	box-shadow: none !important;
}
.pd-subscribe-input::placeholder {
	color: #94a3b8 !important;
}
.pd-subscribe-input:focus {
	outline: none !important;
	border-color: #1a7a4e !important;
	box-shadow: 0 0 0 3px rgba(26, 122, 78, 0.12) !important;
}
.pd-subscribe-btn {
	flex-shrink: 0;
	padding: 1rem 2rem !important;
	background: #1a7a4e !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 0.9375rem !important;
	border: 0 !important;
	border-radius: 12px !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: background 0.15s;
}
.pd-subscribe-btn:hover {
	background: #15613c !important;
}
.pd-subscribe-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Homepage calculator — beat Underscores input[type=number]{padding:3px} */
#calculator input[type="number"],
#calculator select {
	padding: 0.75rem 3rem 0.75rem 1rem !important;
	border-radius: 0.75rem !important;
	border: 1px solid #e2e8f0 !important;
	color: #0f172a !important;
	box-sizing: border-box !important;
}
#calculator select {
	padding-right: 1rem !important;
}
#calculator input[type="number"]:focus,
#calculator select:focus {
	border-color: #1a7a4e !important;
	outline: none !important;
}

/* Protocol card size pills — never overflow the card */
.pd-size-pill {
	max-width: 100% !important;
	white-space: normal !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
	line-height: 1.35 !important;
	height: auto !important;
}
