/**
 * DTF category components.
 *
 * Additive only. Nothing here restyles an existing selector: every rule is
 * scoped to a class introduced by inc/dtf.php or inc/dtf-faq.php, so the
 * existing pages keep rendering exactly as they did.
 *
 * Tokens come from style.css. No new colours, radii or type sizes are invented.
 */

/* Shared small print under a component. */
.dv-note {
	margin: var(--dv-md) 0 0;
	color: var(--dv-ink-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

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

.dv-table-wrap {
	/* A price table is wider than a phone. Scrolling it beats shrinking the
	   figures until they cannot be read. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--dv-line);
	border-radius: var(--dv-r-md);
	background: var(--dv-bg);
}

.dv-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.dv-table th,
.dv-table td {
	padding: 14px var(--dv-md);
	text-align: left;
	border-bottom: 1px solid var(--dv-line);
	white-space: nowrap;
}

.dv-table thead th {
	background: var(--dv-surface-alt);
	font-weight: var(--dv-fw-bold);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dv-ink-muted);
}

.dv-table tbody th {
	font-weight: var(--dv-fw-medium);
	color: var(--dv-ink);
}

.dv-table tbody tr:last-child th,
.dv-table tbody tr:last-child td {
	border-bottom: 0;
}

.dv-table tbody tr:hover {
	background: var(--dv-surface);
}

.dv-table__muted {
	color: var(--dv-ink-muted);
}

.dv-chip--save {
	background: var(--dv-accent);
	color: var(--dv-accent-ink);
	border-color: var(--dv-accent);
	font-weight: var(--dv-fw-bold);
}

@media (max-width: 599px) {
	/* Stack the price grid into one block per size, so no horizontal scroll is
	   needed on a phone and each figure keeps its column label. */
	.dv-table--prices,
	.dv-table--prices thead,
	.dv-table--prices tbody,
	.dv-table--prices tr,
	.dv-table--prices th,
	.dv-table--prices td {
		display: block;
		white-space: normal;
	}

	.dv-table--prices thead {
		display: none;
	}

	.dv-table--prices tbody tr {
		border-bottom: 1px solid var(--dv-line);
		padding: var(--dv-sm) 0;
	}

	.dv-table--prices tbody tr:last-child {
		border-bottom: 0;
	}

	.dv-table--prices tbody th {
		border-bottom: 0;
		padding-bottom: var(--dv-xs);
		font-weight: var(--dv-fw-bold);
	}

	.dv-table--prices tbody td {
		border-bottom: 0;
		display: flex;
		justify-content: space-between;
		gap: var(--dv-md);
		padding: 6px var(--dv-md);
	}

	.dv-table--prices tbody td::before {
		content: attr(data-label);
		color: var(--dv-ink-muted);
		font-size: 0.8125rem;
	}
}

/* -------------------------------------------------------------------------
 * Specification list
 * ---------------------------------------------------------------------- */

.dv-specs {
	margin: 0;
	border: 1px solid var(--dv-line);
	border-radius: var(--dv-r-md);
	overflow: hidden;
	background: var(--dv-bg);
}

.dv-specs__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-xs) var(--dv-md);
	padding: 14px var(--dv-md);
	border-bottom: 1px solid var(--dv-line);
}

.dv-specs__row:last-child {
	border-bottom: 0;
}

.dv-specs__label {
	flex: 0 0 auto;
	min-width: 190px;
	margin: 0;
	font-weight: var(--dv-fw-medium);
	color: var(--dv-ink-muted);
	font-size: 0.875rem;
}

.dv-specs__value {
	flex: 1 1 220px;
	margin: 0;
	color: var(--dv-ink);
	font-weight: var(--dv-fw-medium);
}

/* -------------------------------------------------------------------------
 * Numbered flow
 * ---------------------------------------------------------------------- */

.dv-flow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dv-md);
	counter-reset: dvflow;
}

@media (min-width: 700px) {
	.dv-flow {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--dv-md) var(--dv-lg);
	}
}

.dv-flow__item {
	display: flex;
	align-items: flex-start;
	gap: var(--dv-md);
	padding: var(--dv-md);
	background: var(--dv-bg);
	border: 1px solid var(--dv-line);
	border-radius: var(--dv-r-md);
}

.dv-flow__num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--dv-r-pill);
	background: var(--dv-ink);
	color: #fff;
	font-weight: var(--dv-fw-bold);
	font-size: 0.9375rem;
	line-height: 1;
}

.dv-flow__item:first-child .dv-flow__num {
	background: var(--dv-accent);
}

.dv-flow__body {
	display: block;
}

.dv-flow__title {
	display: block;
	font-weight: var(--dv-fw-bold);
	color: var(--dv-ink);
	margin-bottom: 2px;
}

.dv-flow__note {
	display: block;
	color: var(--dv-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Chips
 * ---------------------------------------------------------------------- */

.dv-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--dv-sm);
}

.dv-chips > li {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * FAQ
 * ---------------------------------------------------------------------- */

.dv-faq {
	border: 1px solid var(--dv-line);
	border-radius: var(--dv-r-md);
	overflow: hidden;
	background: var(--dv-bg);
}

.dv-faq__item {
	border-bottom: 1px solid var(--dv-line);
}

.dv-faq__item:last-child {
	border-bottom: 0;
}

.dv-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dv-md);
	padding: var(--dv-md);
	cursor: pointer;
	font-weight: var(--dv-fw-bold);
	color: var(--dv-ink);
	line-height: 1.45;
	list-style: none;
}

/* Replace the native disclosure triangle with the theme chevron. */
.dv-faq__q::-webkit-details-marker {
	display: none;
}

.dv-faq__q::marker {
	content: "";
}

.dv-faq__q:hover {
	background: var(--dv-surface);
}

.dv-faq__item:focus-within .dv-faq__q {
	background: var(--dv-surface);
}

.dv-faq__marker {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--dv-ink-muted);
	transition: transform 0.18s var(--dv-ease);
}

.dv-faq__item[open] .dv-faq__marker {
	transform: rotate(180deg);
	color: var(--dv-accent);
}

.dv-faq__a {
	padding: 0 var(--dv-md) var(--dv-md);
	color: var(--dv-ink-muted);
	line-height: 1.7;
	max-width: 72ch;
}

.dv-faq__a p {
	margin: 0 0 var(--dv-sm);
}

.dv-faq__a p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Shipping terms
 * ---------------------------------------------------------------------- */

.dv-shipterms {
	padding: var(--dv-lg);
	border: 1px solid var(--dv-line);
	border-radius: var(--dv-r-md);
	background: var(--dv-surface);
}

.dv-shipterms__headline {
	display: flex;
	align-items: center;
	gap: var(--dv-md);
	padding-bottom: var(--dv-md);
	margin-bottom: var(--dv-md);
	border-bottom: 1px solid var(--dv-line);
}

.dv-shipterms__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
}

.dv-shipterms__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: var(--dv-fw-display);
	line-height: 1.2;
	color: var(--dv-ink);
}

.dv-shipterms__amount {
	margin: 2px 0 0;
	color: var(--dv-ink-muted);
}

.dv-shipterms__amount .woocommerce-Price-amount {
	font-weight: var(--dv-fw-bold);
	color: var(--dv-accent);
}

.dv-shipterms__rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dv-sm);
}

.dv-shipterms__rules li {
	display: flex;
	align-items: flex-start;
	gap: var(--dv-sm);
	color: var(--dv-ink-muted);
	line-height: 1.6;
	font-size: 0.9375rem;
}

.dv-shipterms__rules .dv-icon {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--dv-accent);
}

/* -------------------------------------------------------------------------
 * Resource links
 * ---------------------------------------------------------------------- */

.dv-reslinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dv-md);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.dv-reslinks__item {
	margin: 0;
}

.dv-reslink {
	display: flex;
	align-items: center;
	gap: var(--dv-md);
	height: 100%;
	padding: var(--dv-md);
	border: 1px solid var(--dv-line);
	border-radius: var(--dv-r-md);
	background: var(--dv-bg);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s var(--dv-ease), transform 0.18s var(--dv-ease);
}

.dv-reslink:hover,
.dv-reslink:focus-visible {
	border-color: var(--dv-ink);
	transform: translateY(-2px);
}

.dv-reslink__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--dv-r-sm);
	background: var(--dv-surface-alt);
	color: var(--dv-accent);
}

.dv-reslink__body {
	flex: 1 1 auto;
	min-width: 0;
}

.dv-reslink__title {
	display: block;
	font-weight: var(--dv-fw-bold);
	color: var(--dv-ink);
}

.dv-reslink__note {
	display: block;
	font-size: 0.875rem;
	color: var(--dv-ink-muted);
	line-height: 1.5;
}

.dv-reslink__arrow {
	flex: 0 0 auto;
	color: var(--dv-ink-muted);
}

.dv-reslink:hover .dv-reslink__arrow {
	color: var(--dv-accent);
}

/* -------------------------------------------------------------------------
 * Coming soon panel
 * ---------------------------------------------------------------------- */

.dv-soon {
	padding: var(--dv-lg);
	border: 1px dashed var(--dv-line);
	border-radius: var(--dv-r-md);
	background: var(--dv-surface);
	text-align: center;
}

.dv-soon__badge {
	display: inline-block;
	margin: 0 0 var(--dv-md);
	padding: 6px 14px;
	border-radius: var(--dv-r-pill);
	background: var(--dv-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: var(--dv-fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dv-soon__body {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--dv-ink-muted);
	line-height: 1.7;
}

.dv-soon__body p {
	margin: 0 0 var(--dv-sm);
}

.dv-soon__body p:last-child {
	margin-bottom: 0;
}

.dv-soon .dv-btn-wrap {
	margin-top: var(--dv-lg);
	justify-content: center;
}

/* -------------------------------------------------------------------------
 * Page-level helpers for the DTF content pages
 * ---------------------------------------------------------------------- */

/* A plain content column for the policy-style and resource pages, so long
   prose keeps a readable measure instead of running the full 1280px. */
.dv-prose {
	max-width: 74ch;
}

.dv-prose h2 {
	margin-top: var(--dv-lg);
}

.dv-prose h3 {
	margin-top: var(--dv-md);
}

.dv-prose ul,
.dv-prose ol {
	padding-left: 1.25em;
	line-height: 1.7;
	color: var(--dv-ink-muted);
}

.dv-prose li {
	margin-bottom: var(--dv-xs);
}

/* Two-column split used by several DTF sections. */
.dv-split {
	display: grid;
	gap: var(--dv-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.dv-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--dv-xl);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dv-reslink,
	.dv-faq__marker {
		transition: none;
	}

	.dv-reslink:hover,
	.dv-reslink:focus-visible {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Ordering path cards outside the hero
 * ---------------------------------------------------------------------- */

/* sections.css positions the "coming soon" badge absolutely in the card's
   bottom-right corner, but only reserves room for it inside the hero
   (.dv-hero .dv-path:has(.dv-path__badge) { padding-bottom: 26px }). Used as a
   standalone section on the DTF pages the badge lands on top of the note, so
   the same room is reserved here. Additive: the hero rule is untouched. */
.dv-section:not(.dv-hero) .dv-path:has(.dv-path__badge) {
	padding-bottom: 26px;
}

@media (max-width: 559px) {
	/* One card per row, and sections.css returns the badge to the title line,
	   so the reserved space is no longer needed. */
	.dv-section:not(.dv-hero) .dv-path:has(.dv-path__badge) {
		padding-bottom: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Order-by-size configurator
 * ---------------------------------------------------------------------- */

/* The [dvc_order_by_size] template's root (.dvc) intentionally carries no
   max-width: it is a shortcode, so the host page owns its measure. Embedded
   directly in page content it therefore ran the full viewport width while the
   copy around it sat inside .dv-wrap. Placing it in a .dv-wrap fixes the
   alignment; this only adds the gap under the intro copy, so the heading and
   the configurator read as one block rather than two sections. */
.dv-configurator {
	margin-top: var(--dv-lg);
}

/* The admin-only "development rates" notice is full-bleed inside the
   configurator. Pull it back in line with the panels below it. */
.dv-configurator .dvc-notice--admin {
	margin-top: 0;
}

/* Standalone document column --------------------------------------------- */
/* .dv-prose is normally one column inside .dv-split, where hugging the left
   is correct. On a policy page it is the ONLY column, so it must centre in
   the wrap instead of leaving several hundred pixels of dead space to its
   right. Separate modifier so the split layouts are untouched. */
.dv-prose--doc { margin-inline: auto; }

/* Split with a media cell ------------------------------------------------ */
/* The video sits in its own grid cell above the left-hand steps, so the two
   text columns share the second row and start at exactly the same height.
   Stacked below 900px in source order: video, steps, then the settings
   text, matching the desktop reading order. */
.dv-split--media .dv-split__media .dv-video { margin: 0; }
@media (min-width: 900px) {
  .dv-split--media { row-gap: 20px; }
  .dv-split--media .dv-split__media { grid-column: 1; grid-row: 1; }
  .dv-split--media .dv-split__steps { grid-column: 1; grid-row: 2; }
  .dv-split--media .dv-split__text  { grid-column: 2; grid-row: 2; }
}