/**
 * Quilting Legacies design system.
 *
 * Shared tokens and components for every AOB shortcode. Loaded only when one
 * of our shortcodes renders. Every rule is scoped to a .ql- class, and the
 * tokens live on the .ql-ds wrapper that each shortcode outputs.
 *
 * Contrast notes (WCAG 2.x):
 * - White on primary #E99B80 is 2.22:1, so never use it.
 * - Terracotta #B0573A: white on it is 4.92:1 (buttons; hover #A04F35 is
 *   5.73:1), and it is 4.92:1 as text on white (card links). Both pass AA.
 * - Light #808F92 on white is 3.35:1: fine for borders, too light for text.
 */

/*
 * Tipique ships only as Regular, uploaded to the media library. The relative
 * URL resolves from wp-content/plugins/aob-quilting-legacies/assets/css/ to
 * wp-content/uploads/, so this works on any environment with the same upload.
 * The 100 to 900 weight range matches typography.css: one face for every
 * weight, so browsers never synthesize a bold for it.
 */
@font-face {
	font-family: "Tipique";
	src: url("../../../../uploads/2026/02/Tipique-Regular.woff") format("woff");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Tokens ------------------------------------------------------------------ */

:where(.ql-ds) {
	/* Colors */
	--ql-color-primary: #e99b80;
	--ql-color-button: #b0573a;
	--ql-color-button-hover: #a04f35;
	--ql-color-dark: #1c2436;
	--ql-color-secondary: #efc894;
	--ql-color-light: #808f92;
	--ql-color-accent-bg: #fffcf6;
	--ql-color-text: #131313;
	--ql-color-surface: #ffffff;
	--ql-color-border: var(--ql-color-light);
	--ql-color-card-border: rgb(239 200 148 / 80%); /* secondary #EFC894 at 80% */
	--ql-color-link: var(--ql-color-button);

	/* Type */
	--ql-font-heading: "Tipique", sans-serif;
	--ql-font-body: "Roboto", sans-serif;
	--ql-font-size-body: max(1.125rem, 18px);
	--ql-font-size-small: max(0.9375rem, 15px);
	--ql-font-size-h3: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
	--ql-font-size-h2: clamp(1.875rem, 1.6rem + 1vw, 2.5rem);
	--ql-line-height-body: 1.6;
	--ql-line-height-heading: 1.2;

	/* Spacing scale */
	--ql-space-1: 0.25rem;
	--ql-space-2: 0.5rem;
	--ql-space-3: 0.75rem;
	--ql-space-4: 1rem;
	--ql-space-5: 1.5rem;
	--ql-space-6: 2rem;
	--ql-space-7: 3rem;
	--ql-space-8: 4rem;

	/* Layout */
	--ql-container-width: 1140px;

	/* Shape and depth */
	--ql-radius: 6px;
	--ql-radius-card: 16px;
	--ql-radius-pill: 999px;
	--ql-border-width: 1px;
	--ql-card-padding: 2.5rem;
	--ql-shadow-card: 0 4px 16px rgb(35 47 66 / 10%);
	--ql-shadow-card-hover: 0 8px 24px rgb(35 47 66 / 16%);

	/* Interaction */
	--ql-tap-min: 3rem;
	--ql-focus-color: var(--ql-color-dark);
	--ql-focus-width: 3px;
	--ql-focus-offset: 3px;
	--ql-transition: 150ms ease;
}

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

.ql-ds {
	color: var(--ql-color-text);
	font-family: var(--ql-font-body);
	font-size: var(--ql-font-size-body);
	line-height: var(--ql-line-height-body);
}

.ql-ds *,
.ql-ds *::before,
.ql-ds *::after {
	box-sizing: border-box;
}

.ql-ds .ql-heading {
	margin: 0;
	color: var(--ql-color-dark);
	font-family: var(--ql-font-heading);
	font-weight: 400; /* Tipique has no bold; avoid faux bold. */
	line-height: var(--ql-line-height-heading);
}

/*
 * Overline: matches the Shop page's "Browse our most popular categories"
 * heading (post-33448.css #c4b77cb): Tipique 16px, uppercase, 3px letter
 * spacing, line-height 1. Elementor asks for weight 500, which Tipique
 * Regular renders as 400 anyway; 400 here says so explicitly.
 */
.ql-ds .ql-overline {
	display: block;
	margin: 0;
	color: var(--ql-color-dark);
	font-family: var(--ql-font-heading);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 1;
	text-transform: uppercase;
}

/* Button ------------------------------------------------------------------ */

/* The one button style: peach fill, white bold text. */
.ql-ds .ql-button,
.ql-ds .ql-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 32px;
	border: 0;
	border-radius: 4px;
	background-color: var(--ql-color-button);
	color: #ffffff;
	font-family: var(--ql-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--ql-transition);
}

.ql-ds .ql-button:hover,
.ql-ds .ql-button:active {
	background-color: var(--ql-color-button-hover);
	color: #ffffff;
}

.ql-ds .ql-button:focus-visible {
	outline: var(--ql-focus-width) solid var(--ql-focus-color);
	outline-offset: var(--ql-focus-offset);
	box-shadow: none;
}

/* Badge ------------------------------------------------------------------- */

.ql-ds .ql-badge {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: var(--ql-space-1) var(--ql-space-3);
	border-radius: var(--ql-radius-pill);
	background-color: var(--ql-color-secondary);
	color: var(--ql-color-dark);
	font-family: var(--ql-font-body);
	font-size: var(--ql-font-size-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Card -------------------------------------------------------------------- */

/*
 * Per the Figma card reference: white, 1px warm border, 16px radius, soft
 * shadow, ~40px padding. Icon slot on top, Tipique heading, Roboto text, and
 * a text link with a peach arrow pinned to the bottom.
 */
.ql-ds .ql-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	background-color: var(--ql-color-surface);
	border: var(--ql-border-width) solid var(--ql-color-card-border);
	border-radius: var(--ql-radius-card);
	box-shadow: var(--ql-shadow-card);
}

.ql-ds .ql-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ql-space-4);
	padding: var(--ql-card-padding);
}

/* Icon slot: a line icon, no background. Decorative, so peach is fine here. */
.ql-ds .ql-card__icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--ql-space-2);
	color: var(--ql-color-primary);
}

.ql-ds .ql-card__icon svg,
.ql-ds .ql-card__icon img {
	display: block;
	width: 100%;
	max-width: 3rem;
	height: 100%;
	max-height: 3rem;
	object-fit: contain;
	object-position: left center;
}

.ql-ds .ql-card__title {
	font-size: var(--ql-font-size-h3);
}

.ql-ds .ql-card__text {
	color: var(--ql-color-text);
	font-family: var(--ql-font-body);
	font-size: 16px;
}

.ql-ds .ql-card__text p {
	margin: 0 0 var(--ql-space-3);
}

.ql-ds .ql-card__text p:last-child {
	margin-bottom: 0;
}

/* Text link at the bottom of a linked card, text and arrow in the button terracotta. */
.ql-ds .ql-card__cta,
.ql-ds .ql-card__cta:visited,
.ql-ds .ql-card__cta:hover {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	min-height: var(--ql-tap-min);
	margin-top: auto;
	color: var(--ql-color-link);
	font-family: var(--ql-font-body);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.ql-ds .ql-card__arrow {
	transition: transform var(--ql-transition);
}

/*
 * Linked card: the card's link is stretched over the whole card, so the entire
 * card is the click target while the link keeps its own accessible name.
 */
.ql-ds .ql-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--ql-radius-card);
}

.ql-ds .ql-card__link:focus,
.ql-ds .ql-card__link:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Keep real links inside card text clickable above the stretched link. */
.ql-ds .ql-card__text a {
	position: relative;
	z-index: 2;
	color: var(--ql-color-dark);
	text-decoration: underline;
}

.ql-ds .ql-card--link {
	cursor: pointer;
	transition: box-shadow var(--ql-transition), transform var(--ql-transition);
}

/* Hover lifts the card; the border stays the same in every state. */
.ql-ds .ql-card--link:hover {
	box-shadow: var(--ql-shadow-card-hover);
	transform: translateY(-2px);
}

.ql-ds .ql-card--link:hover .ql-card__arrow {
	transform: translateX(4px);
}

.ql-ds .ql-card--link:focus-within {
	outline: var(--ql-focus-width) solid var(--ql-focus-color);
	outline-offset: var(--ql-focus-offset);
}

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

/* Hidden visually, still read by screen readers. */
.ql-ds .ql-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ql-ds .ql-button,
	.ql-ds .ql-card--link,
	.ql-ds .ql-card__arrow {
		transition: none;
	}

	.ql-ds .ql-card--link:hover,
	.ql-ds .ql-card--link:hover .ql-card__arrow {
		transform: none;
	}
}