/*
 * BD Trust Core - frontend styles.
 *
 * PRD s43: every rule is scoped under .bd-trust-core or a .bd- prefixed class.
 * There is no bare element selector, so nothing here can reach WooCommerce
 * markup, Elementor widgets or the theme.
 *
 * PRD s41 leaves typography, colour and spacing to Elementor where it is
 * present. These rules are therefore structural: they lay components out and
 * inherit type and colour from the theme rather than imposing a design.
 */

/*
 * Design tokens.
 *
 * These are the seam between the plugin's structure and Elementor's styling.
 * The Elementor widgets set these custom properties on the widget wrapper
 * (see src/Elementor/StyleControls.php), so one control can restyle every rule
 * that consumes the token instead of Elementor having to override each rule.
 *
 * Without Elementor the defaults below apply unchanged, which is what keeps the
 * shortcode output looking finished on its own (PRD s39, s42).
 */
.bd-trust-core {
	--bd-gap: 1rem;
	--bd-radius: 6px;
	--bd-border-width: 1px;
	--bd-border-color: rgba( 0, 0, 0, .12 );
	--bd-border: var( --bd-border-width ) solid var( --bd-border-color );
	--bd-muted: rgba( 0, 0, 0, .62 );
	--bd-card-transition: .2s;
}

/* Inherit the theme's own type rather than setting a family or size. */
.bd-trust-core *,
.bd-trust-core *::before,
.bd-trust-core *::after {
	box-sizing: border-box;
}

/* Definition lists ------------------------------------------------------ */

.bd-trust-core .bd-definitions {
	display: grid;
	gap: .5rem 1rem;
	margin: 0 0 var( --bd-gap );
}

.bd-trust-core .bd-definitions__row {
	display: grid;
	gap: .1rem;
	grid-template-columns: minmax( 8rem, 30% ) 1fr;
}

.bd-trust-core .bd-definitions dt {
	color: var( --bd-muted );
	font-weight: 600;
	margin: 0;
}

.bd-trust-core .bd-definitions dd {
	margin: 0;
}

.bd-trust-core .bd-definitions--compact {
	gap: .25rem 1rem;
}

/* Status ---------------------------------------------------------------- */

.bd-trust-core .bd-status {
	border-radius: 999px;
	display: inline-block;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.4;
	padding: .15em .7em;
}

/* Colour carries meaning here, so each status also differs in its text. */
.bd-trust-core .bd-status--verified {
	background: #e3f5e9;
	color: #12633a;
}

.bd-trust-core .bd-status--superseded,
.bd-trust-core .bd-status--archived {
	background: #f0f0f1;
	color: #4a4a4d;
}

.bd-trust-core .bd-status--draft,
.bd-trust-core .bd-status--pending {
	background: #fdf3e0;
	color: #7a4b00;
}

.bd-trust-core .bd-badge {
	background: rgba( 0, 0, 0, .06 );
	border-radius: 999px;
	display: inline-block;
	font-size: .85em;
	padding: .15em .7em;
}

.bd-trust-core .bd-meta {
	color: var( --bd-muted );
	font-size: .9em;
}

.bd-trust-core .bd-empty {
	color: var( --bd-muted );
	font-style: italic;
}

/* Buttons and links ----------------------------------------------------- */

.bd-trust-core .bd-button {
	border: var( --bd-border );
	border-radius: var( --bd-radius );
	display: inline-block;
	padding: .5em 1em;
	text-decoration: none;
}

.bd-trust-core .bd-button--primary {
	background: #174a43;
	border-color: currentColor;
}

.bd-trust-core .bd-button--primary {
	color: #fff;
	border-color: #174a43;
}

.bd-trust-core .bd-button:focus-visible,
.bd-trust-core .bd-link:focus-visible,
.bd-trust-core a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Certificate card ------------------------------------------------------ */

.bd-trust-core .bd-coa-directory__grid {
	display: grid;
	gap: var( --bd-gap );
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
}

.bd-trust-core .bd-coa-card {
	border: var( --bd-border );
	border-radius: var( --bd-radius );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bd-trust-core .bd-coa-card__media img {
	display: block;
	height: auto;
	max-width: 100%;
}

.bd-trust-core .bd-coa-card__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1rem;
}

.bd-trust-core .bd-coa-card__title {
	margin: 0;
}

.bd-trust-core .bd-coa-card__meta {
	display: grid;
	gap: .3rem;
	margin: 0;
}

.bd-trust-core .bd-coa-card__row {
	display: grid;
	gap: .1rem;
	grid-template-columns: minmax( 6rem, 40% ) 1fr;
}

.bd-trust-core .bd-coa-card__row dt {
	color: var( --bd-muted );
	margin: 0;
}

.bd-trust-core .bd-coa-card__row dd {
	margin: 0;
}

.bd-trust-core .bd-coa-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: auto;
}

/* Filters --------------------------------------------------------------- */

.bd-trust-core .bd-coa-directory__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bd-gap );
	margin-bottom: var( --bd-gap );
}

.bd-trust-core .bd-filter {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: .25rem;
	margin: 0;
}

.bd-trust-core .bd-filter label {
	color: var( --bd-muted );
	font-size: .9em;
	font-weight: 600;
}

.bd-trust-core .bd-filter--actions {
	align-self: flex-end;
	flex-direction: row;
	flex-grow: 0;
	align-items: center;
	gap: .75rem;
}

.bd-trust-core .bd-coa-directory__count {
	color: var( --bd-muted );
	margin: 0 0 var( --bd-gap );
}

/* Certificate detail ---------------------------------------------------- */

.bd-trust-core .bd-coa-section {
	border-top: var( --bd-border );
	margin-top: var( --bd-gap );
	padding-top: var( --bd-gap );
}

.bd-trust-core .bd-coa-section:first-of-type {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.bd-trust-core .bd-coa-single__actions,
.bd-trust-core .bd-product-coa__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.bd-trust-core .bd-inline-list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Product block --------------------------------------------------------- */

.bd-trust-core.bd-product-coa {
	border: var( --bd-border );
	border-radius: var( --bd-radius );
	margin: var( --bd-gap ) 0;
	padding: 1rem;
}

.bd-trust-core .bd-product-coa__heading {
	margin-top: 0;
}

/* Tables ---------------------------------------------------------------- */

/* PRD s82: wide content scrolls inside its own container so the page body
   never scrolls horizontally on a 375px screen. */
.bd-trust-core .bd-table-scroll {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
}

.bd-trust-core .bd-table {
	border-collapse: collapse;
	min-width: 32rem;
	width: 100%;
}

.bd-trust-core .bd-table th,
.bd-trust-core .bd-table td {
	border-bottom: var( --bd-border );
	padding: .6rem .75rem;
	text-align: left;
	vertical-align: top;
}

/* Experts and references ------------------------------------------------ */

.bd-trust-core .bd-guide-meta__people {
	display: grid;
	gap: var( --bd-gap );
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
}

.bd-trust-core .bd-expert-card__body {
	display: flex;
	gap: .75rem;
}

.bd-trust-core .bd-expert-card__image {
	border-radius: 50%;
	flex: 0 0 auto;
	height: 64px;
	object-fit: cover;
	width: 64px;
}

.bd-trust-core .bd-expert-card__role {
	color: var( --bd-muted );
	font-size: .85em;
	letter-spacing: .04em;
	margin: 0 0 .25rem;
	text-transform: uppercase;
}

.bd-trust-core .bd-expert-card__name {
	font-weight: 600;
	margin: 0;
}

.bd-trust-core .bd-expert-card__title,
.bd-trust-core .bd-expert-card__quals {
	color: var( --bd-muted );
	font-size: .9em;
	margin: .1rem 0 0;
}

.bd-trust-core .bd-references__list {
	display: grid;
	gap: .5rem;
}

.bd-trust-core .bd-references__publisher,
.bd-trust-core .bd-references__year,
.bd-trust-core .bd-references__doi,
.bd-trust-core .bd-references__note {
	color: var( --bd-muted );
}

.bd-trust-core .bd-related-guides__list {
	display: grid;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-trust-core .bd-related-guides__excerpt {
	color: var( --bd-muted );
	margin: .15rem 0 0;
}

/* Tier products --------------------------------------------------------- */

.bd-trust-core .bd-tier-products__grid {
	display: grid;
	gap: var( --bd-gap );
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.bd-trust-core .bd-tier-products__link {
	display: block;
	text-decoration: none;
}

.bd-trust-core .bd-tier-products__link img {
	display: block;
	height: auto;
	max-width: 100%;
}

.bd-trust-core .bd-tier-products__name {
	display: block;
	margin-top: .4rem;
}

/* Pagination ------------------------------------------------------------ */

.bd-trust-core .bd-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	list-style: none;
	margin: var( --bd-gap ) 0 0;
	padding: 0;
}

.bd-trust-core .bd-pagination .page-numbers {
	border: var( --bd-border );
	border-radius: var( --bd-radius );
	display: inline-block;
	padding: .35em .7em;
	text-decoration: none;
}

.bd-trust-core .bd-pagination .current {
	font-weight: 700;
}

/* Loading state --------------------------------------------------------- */

.bd-trust-core .bd-coa-directory.is-loading {
	opacity: .55;
}

/* Screen reader text ---------------------------------------------------- */

/* Defined here in case the theme does not provide it; scoped so it cannot
   affect the theme's own usage. */
.bd-trust-core .screen-reader-text {
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
}

/* Narrow screens -------------------------------------------------------- */

@media screen and ( max-width: 600px ) {
	.bd-trust-core .bd-definitions__row,
	.bd-trust-core .bd-coa-card__row {
		grid-template-columns: 1fr;
	}

	.bd-trust-core .bd-filter--actions {
		flex-basis: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bd-trust-core * {
		animation: none !important;
		transition: none !important;
	}
}

/* Elementor-styleable surfaces ------------------------------------------ */

/*
 * The repeated items below carry no visual treatment by default — the
 * stylesheet only lays them out. They are listed here so they are real,
 * addressable boxes: an Elementor "Cards" control can then give them a
 * background, border or shadow, and a site without Elementor stays flat and
 * unstyled exactly as before (PRD s41).
 */
.bd-trust-core .bd-methods__item,
.bd-trust-core .bd-references__item,
.bd-trust-core .bd-related-guides__item,
.bd-trust-core .bd-tier-products__item,
.bd-trust-core .bd-quality__section {
	border-color: var( --bd-border-color );
}

/* Hover transitions are declared once so the Elementor hover controls have
   something to animate. The duration is itself a token. */
.bd-trust-core .bd-coa-card,
.bd-trust-core .bd-expert-card,
.bd-trust-core .bd-methods__item,
.bd-trust-core .bd-references__item,
.bd-trust-core .bd-related-guides__item,
.bd-trust-core .bd-tier-products__item,
.bd-trust-core .bd-quality__section {
	transition:
		transform var( --bd-card-transition ) ease,
		box-shadow var( --bd-card-transition ) ease,
		background-color var( --bd-card-transition ) ease,
		border-color var( --bd-card-transition ) ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.bd-trust-core .bd-coa-card,
	.bd-trust-core .bd-expert-card,
	.bd-trust-core .bd-methods__item,
	.bd-trust-core .bd-references__item,
	.bd-trust-core .bd-related-guides__item,
	.bd-trust-core .bd-tier-products__item,
	.bd-trust-core .bd-quality__section {
		transition: none;
	}
}

/* A grid so the Layout > Columns control has something to divide. It stays a
   single column until Elementor says otherwise. */
.bd-trust-core .bd-methods__list {
	display: grid;
	gap: var( --bd-gap );
	list-style: none;
	margin: 0;
	padding: 0;
}