/**
 * CSRTech: LUMCON plugin
 *
 * Overrides for the `asset-shortcodes.css` stylesheet loaded by the CSRTech:
 * LUMCON plugin. Replaces hardcoded hex values, vendor-prefixed rules, and
 * legacy IE hacks with the site's design tokens so all plugin output stays in
 * sync with the design system. Plugin markup cannot be edited, so this is CSS
 * only.
 *
 * Lives in the LUMCON child theme because the CSRTech plugin is specific to
 * this site. Enqueued via lumcon/config/enqueue-csrtech-form-styles.php.
 *
 * Relies on the theme's global CSS custom properties (e.g. --color-primary-base,
 * --font-family-body, --spacing-10), so it stays in sync with the design tokens.
 */

/* =====[ Dispersants bibliography (.lumcon-dsb-*) ]============== */

.lumcon-dsb-txt {
	font-size: var(--font-size-md);
	padding: var(--spacing-20);
	border-radius: var(--border-radius-md);
}

table.lumcon-dsb-simple th {
	font-weight: var(--font-weight-strong);
	padding: var(--spacing-05);
}

table.lumcon-dsb-simple td {
	padding: var(--spacing-05);
}

/* =====[ Oil Gas bibliography (.lumcon-obg-*): tables ]========== */

table.lumcon-obg-simple th {
	font-weight: var(--font-weight-strong);
	padding: var(--spacing-05);
}

table.lumcon-obg-simple td {
	padding: var(--spacing-05);
}

table.lumcon-obg-simple tr:nth-child(odd) {
	background-color: var(--color-primary-100);
}

/* =====[ Oil Gas bibliography (.lumcon-obg-*): box ]============= */

div.lumcon-obg-txt {
	font-size: var(--font-size-md);
	padding: var(--spacing-20);
	border-radius: var(--border-radius-md);
}

div.lumcon-obg-cat {
	margin: var(--spacing-40);
	font-size: var(--font-size-h4);
}

div.lumcon-obg-box {
	padding: var(--spacing-10);
}

div.lumcon-obg-extract {
	margin-block-start: var(--spacing-20);
}

/* =====[ Bibliography search forms (.lumcon-dsb-*, .lumcon-obg-*) ]=== */

/*
 * Plugin v1.0.3 rebuilt the dispersants and oil/gas search forms from <table>
 * markup to accessible <fieldset>/<legend>/<label> markup laid out on a flex
 * grid: .lumcon-{dsb,obg}-form > fieldset > .lumcon-{dsb,obg}-grid >
 * .lumcon-{dsb,obg}-field. These rules lay the fields out as a wrapping flexbox
 * (stacking to full width on mobile) and map the plugin's hardcoded control
 * styles onto the site's input/button tokens so the forms match Gravity Forms.
 */

.lumcon-dsb-form,
.lumcon-obg-form {
	margin-block: 0 var(--spacing-40);
}

/* Fieldset is a layout-only wrapper: strip its native chrome. */
.lumcon-dsb-fieldset,
.lumcon-obg-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* Legend acts as the form's heading. */
.lumcon-dsb-legend,
.lumcon-obg-legend {
	margin-block-end: var(--spacing-20);
	padding: 0;
	color: var(--text-color);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-strong);
	text-transform: capitalize;
}

/* Field row: wrapping flexbox. Controls are bottom-aligned so the label-less
   submit button lines up with the inputs that sit beneath their labels. */
.lumcon-dsb-grid,
.lumcon-obg-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--form-fields-gap-vertical, var(--spacing-30)) var(--form-fields-gap-horizontal, var(--spacing-60));
}

/* Each field: label stacked over its control. Grows to share the row, but keeps
   a sensible min width so it wraps to its own line on narrow screens. */
.lumcon-dsb-field,
.lumcon-obg-field {
	display: flex;
	flex: 1 1 10rem;
	flex-direction: column;
	gap: var(--spacing-10);
	min-width: 8rem;
}

/* Keyword field gets priority width (mirrors GF's grid). */
.lumcon-dsb-field--keywords,
.lumcon-obg-field--keywords {
	flex-grow: 2;
	flex-basis: 16rem;
}

/* Submit shrinks to its content and never grows. */
.lumcon-dsb-field--submit,
.lumcon-obg-field--submit {
	flex: 0 0 auto;
	min-width: 0;
}

/* Field labels act as Gravity Forms field labels (.gfield_label). */
.lumcon-dsb-field label,
.lumcon-obg-field label {
	color: var(--text-color);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-strong);
	line-height: 1.2;
}

/* Field controls: replace the plugin's hardcoded border, background, and
   font-size values with input tokens so the fields match GF inputs. */
.lumcon-dsb-field input,
.lumcon-dsb-field select,
.lumcon-obg-field input,
.lumcon-obg-field select {
	width: 100%;
	box-shadow: none;
	padding-block: var(--input-padding-block);
	padding-inline: var(--input-padding-inline);
	border: var(--border-size-sm) solid var(--input-border-color);
	border-radius: var(--input-border-radius);
	background-color: var(--input-background-color);
	font-size: var(--input-font-size);
}

.lumcon-dsb-field option,
.lumcon-obg-field option {
	background-color: var(--input-background-color);
}

/* Cancel the plugin's gradient and defer to the theme's button tokens. */
.lumcon-dsb-field--submit button,
.lumcon-obg-field--submit button {
	width: unset;
	background-image: none;
	background-color: var(--button-background-color);
}

.lumcon-dsb-field--submit button:hover,
.lumcon-obg-field--submit button:hover {
	background-image: none;
	background-color: var(--button-background-color--hover, var(--button-background-color--shifted, var(--button-background-color)));
}

.lumcon-dsb-field--submit button:active,
.lumcon-obg-field--submit button:active {
	background-image: none;
	background-color: var(--button-background-color--active, var(--button-background-color--shifted, var(--button-background-color)));
}

/* Oil/gas "browse" row holds the Quarterly Issues + Compilations forms side by
   side; they wrap to a column on narrow screens. */
.lumcon-obg-browse {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-60);
	margin-block-end: var(--spacing-40);
}

.lumcon-obg-browse .lumcon-obg-form {
	flex: 1 1 18rem;
	margin-block-end: 0;
}

/* The inline browse forms size their select + submit to content. */
.lumcon-obg-grid--inline .lumcon-obg-field {
	flex-basis: auto;
}

/* Stack every field to full width on mobile. (Breakpoint matches the theme's
   "tablet-md": 56rem.) Labels now travel with their controls, so nothing is
   hidden — each field keeps its visible label. */
@media (max-width: 55.999rem) {
	.lumcon-dsb-field,
	.lumcon-obg-field,
	.lumcon-obg-grid--inline .lumcon-obg-field {
		flex-basis: 100%;
	}
	.lumcon-obg-browse {
		gap: var(--spacing-40);
	}
}

/* =====[ DEPRECATED — old table-based form CSS (commented out) ]===== *
 *
 * Superseded by the flex rules above. CSRTech plugin v1.0.3 rebuilt the search
 * forms from <table> markup to <fieldset> markup, so every selector below
 * targets table elements the shortcodes no longer emit. Kept here (disabled)
 * for reference / rollback; inner comment markers were flattened so the whole
 * block can live inside one CSS comment.
 *
 * .lumcon-obg-form .lumcon-dsb-table {
 *   width: 100%;
 *   table-layout: fixed;            -- keyword field priority width; rest even
 *   border-collapse: collapse;
 * }
 *
 * .lumcon-obg-form .lumcon-dsb-table th,
 * .lumcon-obg-form .lumcon-dsb-table td {
 *   margin: 0; padding: 0; border: 0; background: none;
 *   text-align: start; vertical-align: bottom;   -- align label-less submit
 * }
 *
 * .lumcon-obg-form .lumcon-dsb-table tbody tr {
 *   display: flex; flex-direction: column; gap: var(--spacing-20);
 * }
 *
 * .lumcon-obg-form .lumcon-dsb-table thead th {   -- header cells = GF labels
 *   padding-block-end: var(--spacing-10);
 *   color: var(--text-color);
 *   font-size: var(--font-size-md);
 *   font-weight: var(--font-weight-strong);
 *   line-height: 1.2;
 * }
 *
 * .lumcon-obg-form .lumcon-dsb-table tbody td {
 *   padding-inline-end: var(--form-fields-gap-horizontal, var(--spacing-60));
 * }
 * .lumcon-obg-form .lumcon-dsb-table tbody td:last-child { padding-inline-end: 0; }
 *
 * form.lumcon-obg-form select {            -- !important beat inline width:69%
 *   width: 100% !important; box-shadow: none;
 *   padding-block: var(--input-padding-block);
 *   padding-inline: var(--input-padding-inline);
 *   border: var(--border-size-sm) solid var(--input-border-color);
 *   border-radius: var(--input-border-radius);
 *   background-color: var(--input-background-color);
 *   font-size: var(--input-font-size);
 * }
 * form.lumcon-obg-form option { background-color: var(--input-background-color); }
 *
 * form.lumcon-obg-form input,
 * form.lumcon-obg-form textarea {
 *   width: 100% !important; box-shadow: none;
 *   padding: var(--input-padding-block) var(--input-padding-inline);
 *   border: var(--border-size-sm) solid var(--input-border-color);
 *   border-radius: var(--input-border-radius);
 *   background-color: var(--input-background-color);
 *   font-size: var(--input-font-size);
 * }
 *
 * form.lumcon-obg-form button {
 *   width: unset !important; background-image: none;
 *   background-color: var(--button-background-color);
 * }
 * form.lumcon-obg-form button:hover {
 *   background-image: none;
 *   background-color: var(--button-background-color--hover, var(--button-background-color--shifted, var(--button-background-color)));
 * }
 * form.lumcon-obg-form button:active {
 *   background-image: none;
 *   background-color: var(--button-background-color--active, var(--button-background-color--shifted, var(--button-background-color)));
 * }
 *
 * @media (max-width: 55.999rem) {           -- stack controls, hide label row
 *   .lumcon-obg-form { display: flex; flex-direction: column; gap: var(--spacing-20); }
 *   .lumcon-obg-form .lumcon-dsb-table { table-layout: auto; }
 *   .lumcon-obg-form .lumcon-dsb-table thead { display: none; }
 *   .lumcon-obg-form .lumcon-dsb-table tbody, ... tbody tr,
 *   table.lumcon-obg-table tbody, ... tbody tr { display: flex; flex-direction: column; }
 *   ... tbody td { display: block; width: 100%; padding-inline-end: 0; text-align: start; }
 *   ... tbody td + td { margin-block-start: var(--form-fields-gap-vertical, var(--spacing-50)); }
 * }
 *
 * .lumcon-obg-form .lumcon-dsb-table thead th:first-child,
 * .lumcon-obg-form .lumcon-dsb-table tbody td:first-child { width: 100%; }
 */