/* GDV Aroma Deep Dive — Public Styles */

/* The palette follows the theme: the fallbacks are only there so the plugin still
   renders sanely on a site that does not define these. Change a colour in the theme
   and the plugin follows, rather than drifting away from it. */
:root {
	--gdv-add-text:          var(--text-color, #444444);
	--gdv-add-primary:       var(--yellow, #e1ad4e);
	--gdv-add-primary-light: #fdf6e3;
	--gdv-add-secondary:     var(--green, #427a7b);
	--gdv-add-hover:         var(--hover, #f0605c);
	--gdv-add-error:         #EF7B45;
	--gdv-add-bg:            #ffffff;
	--gdv-add-border:        #e0e0e0; /* decorative: cards, containers, dividers */
	--gdv-add-border-input:  #909090; /* UI components: inputs, tabs, pagination — 3.2:1 on white, RGAA 3.3 */
	--gdv-add-radius:        6px;

	/* These two chain to gdv-public-ui, which these screens already load, so secondary
	   text and the focus ring match every other plugin on the site instead of each one
	   picking its own grey. The fallbacks are that library's own values, for the case
	   where it is not active: #666666 is 5.74:1 on white and #8a6100 is 5.54:1, where
	   the greys this block used to carry were 3.54:1 and no ring existed at all. */
	--gdv-add-text-faint:    var(--gdv-ui-text-faint, #666666);
	--gdv-add-focus:         var(--gdv-ui-focus, #8a6100);
}

.gdv-add-vspace {
	margin: 1.5em 0 0 0;
}

.gdv-add-vspace-border {
	margin: 2em 0;
	border-bottom: 1px solid grey;
}

/* ===== Utilities ===== */
.gdv-add-hidden,
.is-hidden {
	display: none !important;
}

/* ===== Category tabs ===== */
.gdv-add-cat-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.gdv-add-cat-tab {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 20px;
	border: 1px solid var(--gdv-add-border-input);
	color: var(--gdv-add-text);
	text-decoration: none;
	font-size: 0.95rem;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.gdv-add-cat-tab:hover,
.gdv-add-cat-tab.is-active {
	background: var(--gdv-add-primary);
	border-color: var(--gdv-add-primary);
	color: #ffffff;
}

/* ===== Grid search ===== */
.gdv-add-grid-search {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
}

.gdv-add-search-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--gdv-add-border-input);
	border-radius: var(--gdv-add-radius);
	font-size: 1rem;
}

/* The grid's search button is .gdv-ui-btn--primary. See the Buttons section. */

/* ===== Grid ===== */
.gdv-add-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Fixed column counts (columns="n"): the cards split the whole container width
   between them instead of leaving an empty track on a wide screen. */
.gdv-add-grid--cols-1 {
	grid-template-columns: minmax(0, 1fr);
}

.gdv-add-grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gdv-add-grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gdv-add-grid--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gdv-add-grid--cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gdv-add-grid--cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gdv-add-grid-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gdv-add-border);
	border-radius: var(--gdv-add-radius);
	overflow: hidden;
	background: var(--gdv-add-bg);
	transition: box-shadow 0.2s;
}

.gdv-add-grid-item:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.gdv-add-grid-link {
	text-decoration: none;
}

.gdv-add-grid-thumb {
	position: relative;
	overflow: hidden;
}

.gdv-add-grid-thumb img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.gdv-add-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Dark on the yellow, not white. White on --gdv-add-primary #e1ad4e is 2.04:1, and
   the badge is a word a person reads, not a graphic: #5a3d00 gives 4.89:1 and keeps
   the badge the brand yellow. */
.gdv-add-badge--new {
	background: var(--gdv-add-primary);
	color: #5a3d00;
}

.gdv-add-grid-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px;
}

.gdv-add-grid-tax {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.gdv-add-cat-label {
	font-size: 0.875rem;
	background: #fdefc3;
	color: #7a5510;
	padding: 2px 8px;
	border-radius: 10px;
}

.gdv-add-tag-label {
	font-size: 0.875rem;
	background: #c8dcdc;
	color: #1e5657;
	padding: 2px 8px;
	border-radius: 10px;
}

h2.gdv-add-grid-title a,
h2.gdv-add-grid-title a:hover,
h2.gdv-add-grid-title a:focus,
h2.gdv-add-grid-title a:visited {
	color: var(--gdv-add-primary);
	text-decoration: none;
}

.gdv-add-grid-excerpt {
	color: #666;
	margin: 0 0 10px;
	line-height: 1.65;
}

.gdv-add-grid-byline {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 0.95rem;
	color: #555;
	margin-bottom: 10px;
}

.gdv-add-grid-author {
	font-weight: 600;
	color: var(--gdv-add-secondary);
}

.gdv-add-grid-date {
	font-style: italic;
}

.gdv-add-grid-author-link {
	position: relative;
	z-index: 1;
	color: var(--gdv-add-secondary);
	text-decoration: none;
	font-weight: 600;
}

.gdv-add-grid-author-link:hover {
	text-decoration: underline;
}

/* Separator dot — only rendered when both author and date are present */
.gdv-add-grid-author + .gdv-add-grid-date::before {
	content: '·';
	margin-right: 10px;
}

.gdv-add-grid-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--gdv-add-text-faint); /* #888 was 3.54:1 on white; this is 5.74:1 */
}

.gdv-add-grid-counts {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.gdv-add-grid-counts > span {
	white-space: nowrap;
}

.gdv-add-grid-action {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	margin-left: auto;
}

/* Grid cards: stack the meta at the bottom and give the counts and CTA
   their own full-width rows instead of squeezing them side by side. */
.gdv-add-grid .gdv-add-grid-meta {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 14px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 0.95rem;
}

.gdv-add-grid .gdv-add-grid-counts {
	flex-wrap: wrap;
	color: #777;
}

/* The row is full width and centres what is in it. The button inside it is as
wide as its own label, like every other button. It used to be align-items:
stretch with the CTA at width: 100%, which is the pattern the shared rule
replaces. */
.gdv-add-grid .gdv-add-grid-action {
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 6px;
	margin-left: 0;
}

.gdv-add-single .gdv-add-grid-meta {
	justify-content: center;
}

.gdv-add-single .gdv-add-grid-byline {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 1rem;
	border-top: 1px solid var(--gdv-add-border);
	border-bottom: 1px solid var(--gdv-add-border);
	padding: 12px 0;
	margin: 16px 0 20px;
}

.gdv-add-single .gdv-add-grid-author {
	font-size: 1rem;
}

/* Hide separator dot in stacked single-article layout */
.gdv-add-single .gdv-add-grid-author + .gdv-add-grid-date::before {
	content: none;
}

/* Body copy matches a Blog article (.single-gdv_article in the theme): a visitor
   moving between the two reads the same prose at the same size. */
.gdv-add-single-body {
	margin-top: 1rem;
	font-size: 1.125rem;
}

.gdv-add-single-body p {
	margin-bottom: 1.2em;
}

/*
The card's call to action is .gdv-ui-btn--primary --small, and "Notify me"
deliberately carries the same weight as "Download": an article a visitor cannot
have yet is exactly the one whose interest is worth capturing, so both are the
same button.

This was a fifth filled-primary button under a sixth name. It was missed in the
first pass of the migration because it is a button by role and not by class
name: nothing in it says "btn".
*/

.gdv-add-grid-cta-note {
	display: block;
	font-size: 0.875rem;
	color: var(--gdv-add-text-faint);
	margin-bottom: 6px;
}

.gdv-add-download-count {
	color: var(--gdv-add-text-faint);
}

.gdv-add-no-results {
	color: var(--gdv-add-text-faint);
	font-style: italic;
}

/* ===== Pagination ===== */
.gdv-add-pagination {
	display: flex;
	gap: 6px;
	margin-top: 32px;
	justify-content: center;
}

.gdv-add-page-link {
	padding: 6px 12px;
	border: 1px solid var(--gdv-add-border-input);
	border-radius: var(--gdv-add-radius);
	color: var(--gdv-add-text);
	text-decoration: none;
	font-size: 0.95rem;
}

.gdv-add-page-link.is-active,
.gdv-add-page-link:hover {
	background: var(--gdv-add-primary);
	border-color: var(--gdv-add-primary);
	color: #ffffff;
}

/* ===== "View all articles" link under a teaser grid ===== */
.gdv-add-grid-more {
	margin-top: 28px;
	text-align: center;
}

/* "Show more" is the full-size button, not the card's smaller one, so it needs
no rule of its own beyond the centring its container already gives it. */

/* ===== Search hero ===== */
.gdv-add-search-hero {
	padding: 40px 24px;
	background: var(--gdv-add-primary-light);
	border-radius: var(--gdv-add-radius);
	text-align: center;
}

.gdv-add-search-hero-label {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 16px;
	color: var(--gdv-add-text);
}

.gdv-add-search-hero-row {
	display: flex;
	gap: 8px;
	max-width: 560px;
	margin: 0 auto;
}

.gdv-add-search-hero-input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--gdv-add-border-input);
	border-radius: var(--gdv-add-radius);
	font-size: 1rem;
}

/* The hero's search button is .gdv-ui-btn--primary. See the Buttons section. */

/* ===== Single page wrapper ===== */
.gdv-add-single-page {
	width: 100%;
	padding: 48px 24px;
	box-sizing: border-box;
}

/* ===== Single article ===== */
.gdv-add-single {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}

.gdv-add-admin-link {
	margin: 0 0 24px;
	text-align: center;
	font-size: 0.92em;
	opacity: 0.6;
}

.gdv-add-single-thumb img {
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	border-radius: var(--gdv-add-radius);
	margin-bottom: 24px;
}

.gdv-add-single-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.gdv-add-single-title {
}


/* ===== Download area ===== */
.gdv-add-download-area {
	margin-top: 40px;
	padding: 32px;
	background: var(--gdv-add-bg);
	border-radius: var(--gdv-add-radius);
	border: 1px solid var(--gdv-add-border);
}

.gdv-add-form-title {
	font-size: 1.3rem;
	margin: 0 0 20px;
	color: var(--gdv-add-text);
}

.gdv-add-form-row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.gdv-add-form-field {
	margin-bottom: 16px;
}

.gdv-add-form-field label {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--gdv-add-text);
}

.gdv-add-form-field input[type="text"],
.gdv-add-form-field input[type="email"] {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--gdv-add-border-input);
	border-radius: var(--gdv-add-radius);
	font-size: 1rem;
	background: var(--gdv-add-bg);
	box-sizing: border-box;
}

/* Reset theme toggle-switch styles for our checkboxes */
.gdv-add-form input[type="checkbox"]:not(.ai-checkbox-input) {
	appearance: auto;
	-webkit-appearance: auto;
	width: 16px;
	height: 16px;
	min-width: 16px;
	background-color: transparent;
	border-radius: 3px;
	position: static;
	cursor: pointer;
	transition: none;
	vertical-align: middle;
	flex-shrink: 0;
	margin-top: 2px;
}

.gdv-add-form input[type="checkbox"]:not(.ai-checkbox-input)::before {
	display: none;
}

.gdv-add-form input[type="checkbox"]:not(.ai-checkbox-input):checked {
	background-color: transparent;
}

.gdv-add-form input[type="checkbox"]:not(.ai-checkbox-input):hover {
	background-color: transparent;
}

.gdv-add-form-field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.gdv-add-form-field--checkbox label {
	font-weight: 400;
	cursor: pointer;
}

/* Inline SVG written by GDV_Add_Icons. Stroke follows currentColor. */
.gdv-add-form-field--checkbox label svg.lucide {
	display: inline-block;
	vertical-align: -0.125em;
}

.gdv-add-rgpd {
	font-size: 0.9rem;
	color: #666;
	margin: 12px 0 20px;
	line-height: 1.65;
}

.gdv-add-rgpd a {
	color: var(--gdv-add-secondary);
}

.gdv-add-rgpd-text {
	display: block;
}

.gdv-add-rgpd-text:first-child {
	font-weight: 600;
	color: var(--gdv-add-text);
	margin-bottom: 4px;
}

.gdv-add-rgpd-text + .gdv-add-rgpd-text {
	font-style: italic;
}

/* ===== Buttons =====

This plugin no longer styles buttons. They are .gdv-ui-btn from gdv-public-ui,
asked for in Plugin::enqueue_public_assets().

What was here: a .gdv-add-btn base opening with `all: unset`, which is what
escaping the theme's own bare-button styling had come to, plus --primary and
--secondary. Those two set the same background as each other and as the base, so
"secondary" was a name with no styling behind it: every button on these screens
was the same filled primary. They are now genuinely different, secondary being
outlined.

Two more went with them, .gdv-add-search-btn and .gdv-add-search-hero-btn, which
were the same filled button again under two further names. Both are --primary.

The uppercase is not carried over. It was this plugin's alone, nothing else on
the site shouts, and a shared button that changes case per plugin is not shared.
*/

/* ===== Form error / status ===== */
.gdv-add-form-error {
	color: var(--gdv-add-error);
	font-size: 0.95rem;
	margin-top: 12px;
	min-height: 20px;
}

.gdv-add-login-hint {
	font-size: 0.92rem;
	color: #666;
	margin-top: 16px;
}

.gdv-add-login-hint a {
	color: var(--gdv-add-secondary);
}

/* ===== Download success ===== */
.gdv-add-success-msg {
	font-size: 1.1rem;
	color: var(--gdv-add-primary);
	font-weight: 600;
	margin-bottom: 24px;
}

/* ===== Related articles ===== */
.gdv-add-related {
	margin-top: 32px;
}

.gdv-add-related-title {
	font-size: 1.1rem;
	margin-bottom: 16px;
	color: var(--gdv-add-text);
}

.gdv-add-related-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gdv-add-related-link {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	text-decoration: none;
	color: var(--gdv-add-text);
	padding: 12px;
	border: 1px solid var(--gdv-add-border-input);
	border-radius: var(--gdv-add-radius);
	background: var(--gdv-add-bg);
	transition: box-shadow 0.2s;
}

.gdv-add-related-link:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.gdv-add-related-thumb {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.gdv-add-related-item-title {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.gdv-add-related-excerpt {
	font-size: 0.9rem;
	color: #666;
}

/* ===== Already downloaded ===== */
.gdv-add-already-downloaded {
	margin-bottom: 20px;
}

/* ===== Notices ===== */
.gdv-add-notice {
	padding: 1rem;
	border-radius: var(--gdv-add-radius);
	border: 1px solid;
	border-left-width: 4px;
	font-size: 1rem;
	line-height: 1.6;
}

.gdv-add-notice p {
	margin: 0;
}

.gdv-add-notice .gdv-ui-btn {
	margin-top: 16px;
}

.gdv-add-notice--info {
	background: #edf4fb;
	border-color: #b3d1ed;
	border-left-color: var(--gdv-add-secondary);
	color: #1a4f7f;
}

.gdv-add-notice--error {
	background: #fef3ee;
	border-color: #f7c5a8;
	border-left-color: var(--gdv-add-error);
	color: #8b3a1a;
}

.gdv-add-notice--warning {
	background: #fff8ee;
	border-color: #f0d090;
	border-left-color: var(--gdv-add-primary);
	color: #6b4c00;
}

.gdv-add-notice--muted {
	background: #f5f5f5;
	border-color: #ddd;
	border-left-color: #aaa;
	color: #555;
}

/* Reader announcement: the brand accent, so it reads as an invitation from the
   author rather than as one of the system status notices above. */
.gdv-add-notice--callout {
	background: var(--gdv-add-primary-light);
	border-color: #ecd5a4;
	border-left-color: var(--gdv-add-primary);
	color: var(--gdv-add-text);
}

.gdv-add-callout {
	display: block;
	margin-top: 32px;
	font-size: 1.125rem;
}

/* Speakers of the linked event: a face and a name, no biography. The row wraps
   on narrow screens rather than shrinking the portraits. */
.gdv-add-callout-speakers {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-top: 20px;
}

.gdv-add-callout-speaker {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gdv-add-callout-speaker__photo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gdv-add-callout-speaker__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gdv-add-callout-speaker__initials {
	font-size: 1.1rem;
	font-weight: 600;
	color: #777777;
	letter-spacing: 0.03em;
}

.gdv-add-callout-speaker__info {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.gdv-add-callout-speaker__name {
	font-weight: 600;
}

.gdv-add-callout-speaker__title {
	font-size: 0.9em;
	color: #6f6f6f;
}

/* ===== Article status badges (inline, in grid card body) ===== */
.gdv-add-grid-status {
	margin-bottom: 8px;
}

.gdv-add-status-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.gdv-add-status-badge--scheduled {
	background: #dce9f5;
	color: #1a4f7f;
}

.gdv-add-status-badge--in-revision {
	background: #fef3e0;
	color: #7a4f00;
}

.gdv-add-status-badge--unavailable {
	background: #f0f0f0;
	color: #666;
}

/* ===== Status-specific grid item ===== */
/*
The fade sits on the image, not on the card. Dimming the whole card took its text
down with it: the excerpt landed at 3.36:1 and the title at 3.06:1, both under the
4.5:1 floor, and the words a reader most needs on a withdrawn article are the ones
saying it is withdrawn. The status badge already carries that in words, so the card
loses nothing by reading at full strength.
*/
.gdv-add-grid-item--unavailable .gdv-add-grid-thumb {
	opacity: 0.75;
}

/* ===== Status-specific CTA variants ===== */
/*
A withdrawn article renders this as a plain span, not a link. It is a status
label rather than a button, which is why it is not .gdv-ui-btn: nothing here can
be clicked, and giving it a button's shape would say otherwise.

It keeps the card CTA's size and radius so the row does not jump between an
available article and a withdrawn one.
*/
.gdv-add-grid-cta--unavailable,
.gdv-add-grid-cta--unavailable:hover {
	display: inline-block;
	padding: 0.45em 0.9em;
	border-radius: var(--gdv-add-radius);
	background: #e0e0e0;
	color: #555555; /* #666 was 4.35:1 on #e0e0e0, just under the floor; this is 5.65:1 */
	font-size: 0.875rem;
	font-weight: 400;
	cursor: default;
	text-decoration: none;
}

/* ===== Status notices on single article ===== */
.gdv-add-status-notice {
	margin-top: 40px;
}

.gdv-add-download-area .gdv-add-status-notice {
	margin-top: 0;
	margin-bottom: 20px;
}

/* ===== More articles (static block below download area) ===== */
.gdv-add-more-articles {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--gdv-add-border);
}

.gdv-add-more-articles-title {
	margin: 0 0 24px;
	color: var(--gdv-add-text);
}

/* auto-fit rather than a fixed three, so the row also reads on a tablet and does not
   stretch two cards across the width of three when the site has only two articles. */
.gdv-add-more-articles-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

/* The card is not a link. Only the title and "Read" are, so the card itself gets no
   lift, no shadow and no pointer: those would promise a click target that is not there.
   The teal top edge is what the eye lands on where the image used to be. */
.gdv-add-more-articles-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--gdv-add-border);
	border-top: 3px solid var(--gdv-add-secondary);
	border-radius: var(--gdv-add-radius);
	background: var(--gdv-add-bg);
}

.gdv-add-more-articles-card-eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 0.875rem; /* the front-end floor for supporting text; 0.75rem would be 12px */
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gdv-add-text-faint);
}

/* The long selector is what beats the theme. neve-child styles every heading it does
   not recognise with `h3:not(.widget-title):not(.extract-title)`, which counts as two
   classes and an element and so outranks a single class: the card titles would render
   centred, at 1.35em, in the Cantata One serif, none of which suits a three-up card.
   Matching that count exactly would leave it to stylesheet order, hence one class more.
   The serif and the centring are set back explicitly, because the theme also reaches
   these through `h1, h2, h3, h4, h5`, which this rule does not outrank on its own. */
.gdv-add-more-articles-grid .gdv-add-more-articles-card h3.gdv-add-more-articles-card-heading {
	margin: 0 0 10px;
	font-family: inherit;
	font-size: 1.25rem; /* a clear step above the 1rem excerpt; 1.05rem left no hierarchy */
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	letter-spacing: normal;
}

.gdv-add-more-articles-card-link {
	display: block;
	font-weight: 600;
	color: var(--gdv-add-secondary);
	text-decoration: none;
	transition: color 0.15s;
}

.gdv-add-more-articles-card-link:hover {
	color: var(--gdv-add-primary);
	text-decoration: underline;
}

/* No line clamp: the excerpt is shown whole. flex: 1 still holds the byline and the
   link below it at the foot of every card, so the row stays even while the tallest
   excerpt sets its height. */
.gdv-add-more-articles-card-excerpt {
	flex: 1;
	margin: 0 0 16px;
	font-size: 1rem; /* prose a person reads, so the body minimum, not the supporting one */
	line-height: 1.6;
	color: var(--gdv-add-text-faint);
}

/* The rule turns the byline and the link below it into a card footer, so the metadata
   reads as a group rather than as two more paragraphs of the excerpt. */
.gdv-add-more-articles-card-byline {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 12px;
	border-top: 1px solid var(--gdv-add-border);
	font-size: 0.875rem;
	color: var(--gdv-add-text-faint);
}

/* The author is metadata, not a third thing competing with the title and "Read" for
   the eye, so it carries the byline's colour and shows it is a link on hover. */
.gdv-add-more-articles-card-author-link {
	color: inherit;
	text-decoration: none;
}

.gdv-add-more-articles-card-author-link:hover {
	color: var(--gdv-add-secondary);
	text-decoration: underline;
}

/* Separator dot between author and date */
.gdv-add-more-articles-card-author + .gdv-add-more-articles-card-date::before {
	content: '·';
	margin-right: 8px;
}

.gdv-add-more-articles-card-cta {
	align-self: flex-start;
	margin-top: 12px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--gdv-add-secondary);
	text-decoration: none;
	transition: color 0.15s;
}

.gdv-add-more-articles-card-cta:hover {
	color: var(--gdv-add-primary);
	text-decoration: underline;
}

.gdv-add-more-articles-card-link:focus-visible,
.gdv-add-more-articles-card-author-link:focus-visible,
.gdv-add-more-articles-card-cta:focus-visible {
	outline: 2px solid var(--gdv-add-focus);
	outline-offset: 2px;
}

/* ===== How to cite ===== */
.gdv-add-citation {
	margin-top: 32px;
	padding: 16px 20px;
	border: 1px solid var(--gdv-add-border);
	border-radius: var(--gdv-add-radius);
	background: #fafafa;
}

.gdv-add-citation-label {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6e6e6e; /* 4.9:1 on #fafafa — RGAA 3.2 AA */
	margin: 0 0 8px;
}

.gdv-add-citation-text {
	font-size: 0.92rem;
	line-height: 1.7;
	color: #555; /* 6.4:1 on #fafafa — RGAA 3.2 AA */
	margin: 0 0 12px;
}

.gdv-add-citation-text cite {
	font-style: italic;
}

/* overflow-wrap keeps a long permanent URL inside the card without breaking it
   after an arbitrary letter, which is what word-break: break-all was doing. */
.gdv-add-citation-url {
	color: var(--gdv-add-secondary);
	overflow-wrap: anywhere;
	text-decoration: none;
}

.gdv-add-citation-url:hover {
	text-decoration: underline;
}

/* "all: unset" is what keeps the theme's yellow block button off this control, but
   it also discards the properties a button needs to look like one: the browser
   default of inline-block and centred text both go with it, leaving the element to
   inherit the paragraph's left alignment and to be stretched by any theme rule that
   targets bare buttons. On mobile that rendered as a full-width box with the label
   pinned left, indistinguishable from a text input. Each of those is restored here
   rather than left to the cascade. */
/*
"Copy the citation" is .gdv-ui-btn--secondary --small.

Its own rules are gone, with one kept: a 44px minimum height, which is the touch
target this button was given deliberately and which the shared --small does not
guarantee on its own.

Its contrast ratios were written into this stylesheet, #767676 for the outline
and #5c5c5c for the label, and they are why gdv-public-ui now has a separate
--gdv-ui-border-strong token. The shared --secondary used the divider grey for
its outline, which is around 1.3:1 on a near-white page, well under the 3:1 an
interactive control's boundary needs. This button had the right answer before
the shared library did.

gdv-add-citation-copy stays on the element as the hook assets/js/public.js binds
to.
*/
.gdv-add-citation-copy {
	min-height: 44px;
}

/* ===== Review area ===== */
.gdv-add-review-area {
	margin-top: 40px;
	padding: 32px;
	background: var(--gdv-add-bg);
	border-radius: var(--gdv-add-radius);
	border: 1px solid var(--gdv-add-border);
}

/* Star rating widget (reverse-order radio trick) */
.gdv-add-star-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	margin-top: 6px;
}

.gdv-add-star-rating input[type="radio"] {
	display: none;
}

.gdv-add-star-rating label {
	font-size: 2rem;
	color: #ccc;
	cursor: pointer;
	line-height: 1;
	transition: color 0.1s;
}

/* Highlight checked star and all following labels (lower values in DOM order) */
.gdv-add-star-rating input[type="radio"]:checked ~ label {
	color: var(--gdv-add-primary);
}

/* Hover preview: reset all on container hover, then light up hovered + lower */
.gdv-add-star-rating:hover label {
	color: #ccc;
}

.gdv-add-star-rating label:hover,
.gdv-add-star-rating label:hover ~ label {
	color: var(--gdv-add-primary);
}

.gdv-add-review-textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--gdv-add-border-input);
	border-radius: var(--gdv-add-radius);
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.65;
	resize: vertical;
	box-sizing: border-box;
}

.gdv-add-review-byline {
	font-size: 0.95rem;
	color: #666;
	margin: 0 0 20px;
}

/* ===== Reviews list ===== */
.gdv-add-reviews {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--gdv-add-border);
}

.gdv-add-reviews-title {
	margin: 0 0 16px;
	color: var(--gdv-add-text);
}

.gdv-add-reviews-aggregate {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

.gdv-add-reviews-average {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--gdv-add-text);
	line-height: 1;
}

.gdv-add-reviews-stars {
	font-size: 1.5rem;
	line-height: 1;
}

.gdv-add-reviews-count {
	font-size: 0.95rem;
	color: #666;
}

.gdv-add-star {
	display: inline-block;
}

.gdv-add-star--full {
	color: var(--gdv-add-primary);
}

.gdv-add-star--half {
	color: var(--gdv-add-primary);
	opacity: 0.6;
}

.gdv-add-star--empty {
	color: #ddd;
}

/* A fixed three columns had no breakpoint under it, so at 320px the reviews sat in
   three 90px strips. auto-fit wraps them instead, the same way both article grids do. */
.gdv-add-reviews-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	align-items: start;
}

.gdv-add-review-item {
	padding: 20px;
	border: 1px solid var(--gdv-add-border);
	border-radius: var(--gdv-add-radius);
	background: var(--gdv-add-bg);
}

.gdv-add-review-header {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.gdv-add-review-author {
	font-weight: 600;
	color: var(--gdv-add-text);
}

.gdv-add-review-stars {
	font-size: 1rem;
	line-height: 1;
}

.gdv-add-review-date {
	font-size: 0.9rem;
	color: var(--gdv-add-text-faint);
	margin-left: auto;
}

.gdv-add-review-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--gdv-add-text);
}

/* ===== Responsive ===== */

/* A fixed column count is a wide-screen instruction only: below tablet width the
   cards would be too narrow to read, so they fall back to two and then one. */
@media ( max-width: 960px ) {
	.gdv-add-grid--cols-3,
	.gdv-add-grid--cols-4,
	.gdv-add-grid--cols-5,
	.gdv-add-grid--cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media ( max-width: 600px ) {
	.gdv-add-grid--cols-2,
	.gdv-add-grid--cols-3,
	.gdv-add-grid--cols-4,
	.gdv-add-grid--cols-5,
	.gdv-add-grid--cols-6 {
		grid-template-columns: minmax(0, 1fr);
	}

	.gdv-add-form-row--half {
		grid-template-columns: 1fr;
	}

	/* ===== Grid Wrap ===== */
	.gdv-add-grid-wrap {
		padding: 0 0.5rem;
	}

	/* ===== Grid Search ===== */
	.gdv-add-grid-search {
		flex-direction: column;
		align-items: center;
	}

	/* The field takes the row; the button beside it does not. A button is as
	wide as its label at every width. */
	.gdv-add-search-input {
		width: 100%;
	}

	.gdv-add-search-hero-row {
		flex-direction: column;
	}

	.gdv-add-single-page {
		padding: 24px 16px;
	}

	.gdv-add-download-area {
		padding: 20px 16px;
	}

	.gdv-add-review-area {
		padding: 20px 16px;
	}

	.gdv-add-review-date {
		margin-left: 0;
	}
}