/**
 * Artsopolis Octave — Front-end Venue Accessibility panel + Mini RTE
 *
 * Styles the accessibility checklist and the lightweight Bold/Italic/Link
 * editor (.ao-rte) used on the front-end venue submission/edit forms.
 *
 * @package ArtsopolisOctave
 */

/* ---------------------------------------------------------------------------
   Mini rich-text editor (.ao-rte)
   --------------------------------------------------------------------------- */
.ao-rte {
	border: 1px solid var(--color-rule, #e5e5e5);
	border-radius: var(--radius-sm, 4px);
	background: var(--color-paper, #fff);
	overflow: hidden;
}

.ao-rte__toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	background: var(--color-bg-warm, #f9f9f9);
	border-bottom: 1px solid var(--color-rule, #e5e5e5);
}

.ao-rte__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-sm, 4px);
	background: transparent;
	color: var(--color-ink, #252525);
	cursor: pointer;
	line-height: 1;
	font-family: var(--font-body, sans-serif);
}

.ao-rte__btn:hover {
	background: #fff;
	border-color: var(--color-rule, #e5e5e5);
}

.ao-rte__btn:focus-visible {
	outline: 2px solid var(--color-primary, #1f76b4);
	outline-offset: 1px;
}

.ao-rte__btn.is-active {
	background: #fff;
	border-color: var(--color-primary, #1f76b4);
	color: var(--color-primary, #1f76b4);
}

.ao-rte__btn-b { font-weight: 700; font-size: 15px; }
.ao-rte__btn-i { font-style: italic; font-family: Georgia, serif; font-size: 15px; }

.ao-rte__editable {
	min-height: 74px;
	padding: 10px 12px;
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.5;
	color: var(--color-ink, #252525);
	outline: none;
}

.ao-rte__editable:focus {
	box-shadow: inset 0 0 0 2px rgba(33, 125, 191, 0.25);
}

/* A required mini RTE that failed validation: the flag lands on the hidden
   textarea (the control the validator reads), so paint the visible editor
   with the same red border every other invalid control gets. */
.ao-rte:has(> .ao-rte__input[aria-invalid="true"]) {
	border-color: var(--color-error, #c0392b);
	outline: 1px solid var(--color-error, #c0392b);
}

.ao-rte__editable a { color: var(--color-link, #1f76b4); text-decoration: underline; }
.ao-rte__editable p { margin: 0 0 0.5em; }
.ao-rte__editable p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Accessibility checklist
   --------------------------------------------------------------------------- */
.ao-fe-accessibility__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: var(--space-3, 0.75rem);
}

.ao-fe-accessibility__row {
	display: grid;
	grid-template-columns: minmax(160px, 220px) 1fr;
	align-items: start;
	gap: 8px 18px;
	padding: 12px 14px;
	border: 1px solid var(--color-rule, #e5e5e5);
	border-radius: var(--radius-sm, 4px);
	background: var(--color-paper, #fff);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.ao-fe-accessibility__row.is-checked {
	border-color: var(--color-primary, #1f76b4);
	background: #f5fafd;
}

/* Left column: checkbox + label on top, ADA icon on the line beneath. */
.ao-fe-accessibility__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-top: 2px;
}

.ao-fe-accessibility__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 600;
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-ink, #252525);
	cursor: pointer;
}

.ao-fe-accessibility__checkbox {
	flex: 0 0 auto;
	margin: 0;
}

.ao-fe-accessibility__label { line-height: 1.3; }

/* PNG icon: self-contained dark tile with a white glyph — displayed as-is. */
.ao-fe-accessibility__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 34px;
	height: 34px;
}

.ao-fe-accessibility .ao-accessibility-icon {
	width: 34px;
	height: 34px;
	display: block;
}

.ao-fe-accessibility__details { min-width: 0; }

/* Dim a row's editor until its type is checked (purely cosmetic). */
.ao-fe-accessibility__row:not(.is-checked) .ao-fe-accessibility__details {
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Additional Accessibility Info
   --------------------------------------------------------------------------- */
.ao-fe-accessibility__additional {
	margin-top: var(--space-5, 1.25rem);
	padding-top: var(--space-4, 1rem);
	border-top: 1px solid var(--color-rule, #e5e5e5);
}

.ao-fe-accessibility__additional .ao-form__label { display: block; }

/* ---------------------------------------------------------------------------
   Narrow screens — stack the row into a single column.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.ao-fe-accessibility__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* ---------------------------------------------------------------------------
   Checkbox group semantics
   The accessibility checklist is wrapped in a <fieldset>/<legend> so assistive
   tech announces the group name when focus enters the checkboxes (WCAG 1.3.1).
   These resets keep the browser's default fieldset chrome from changing the
   existing visual layout.
   --------------------------------------------------------------------------- */
.ao-fe-accessibility__group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0; /* allows flex/grid children to shrink inside a fieldset */
}

.ao-fe-accessibility__legend {
	padding: 0;
	margin: 0;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Event Accessibility grid (form-accessibility-event.php + the
   accessibility-grid IIFE in dashboard.js) — columns are the six event
   accessibility types, rows are the event's own Dates & Times occurrences.
   Scoped under .ao-fe-accessibility--event so nothing here can affect the
   venue accessibility panel above, which keeps its original checkbox+detail
   list layout.
   --------------------------------------------------------------------------- */
.ao-event-accessibility-grid-wrap {
	overflow-x: auto;
	margin-top: var(--space-3, 12px);
	margin-bottom: var(--space-4, 16px);
	/* Shifts the whole column array (date column, type headings, checkbox
	   cells) left, independent of the "Accessibility Services" heading and
	   the Additional Info section above/below it. */
	margin-left: -30px;
}

.ao-event-accessibility-grid {
	/* table-layout:fixed + this class's own width give every column (the
	   date column and the 6 type columns) an equal, predictable share, so
	   6 icon+label columns fit on one row instead of each claiming
	   whatever width its content wants. */
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

.ao-event-accessibility-grid th,
.ao-event-accessibility-grid td {
	padding: var(--space-2, 8px) var(--space-1, 4px);
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--color-rule, #e5e5e5);
}

.ao-event-accessibility-grid__date-col {
	width: 22%;
	text-align: left;
	padding-left: var(--space-2, 8px) !important;
	font-weight: 600;
}

/* "Date & Time" column heading: base row size (table base - 6pt) + 4pt. */
thead .ao-event-accessibility-grid__date-col {
	font-size: calc(var(--text-base, 1rem) - 8px + 5.33px);
}

/* Each row's date/time text: base row size (table base - 6pt) + 2pt. */
tbody .ao-event-accessibility-grid__date-col {
	font-size: calc(var(--text-base, 1rem) - 8px + 2.67px);
}

/* IMPORTANT: display:flex goes on the inner wrapper div, never directly on
   the <th> itself — a flex display on a table cell takes it out of normal
   table layout in most browsers, which was collapsing each type column
   into its own full-width stacked row instead of sitting side by side in
   the header row. */
.ao-event-accessibility-grid__type-col {
	width: 13%;
}

.ao-event-accessibility-grid__type-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.ao-event-accessibility-grid__type-inner .ao-accessibility-icon {
	/* 22px + 15% */
	width: 25px !important;
	height: 25px !important;
}

.ao-event-accessibility-grid__type-label {
	/* 10px + 15% */
	font-size: 11.5px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--color-ink, #252525);
	/* Each of the 6 type labels is two words ("Audio Description", "Sign
	   Language", ...) — normal wrapping plus the narrow column width above
	   naturally breaks them onto two lines without hyphenation. */
	white-space: normal;
	word-break: normal;
}

.ao-event-accessibility-grid__cell-label {
	/* Fills the whole cell so clicking anywhere near the checkbox — not just
	   the 18x18px box itself — toggles it. A near-miss click on a bare,
	   unwrapped checkbox silently does nothing, which looks identical to
	   "my selection didn't save." */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 32px;
	cursor: pointer;
}

.ao-event-accessibility-grid__cell input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	pointer-events: none; /* the label wrapper owns the click; avoids a double-toggle */
}

/* "Select All" / "Unselect All" row — first tbody row, only rendered
   (renderGrid() in dashboard.js) once there are more than 5 date rows. */
.ao-event-accessibility-grid__select-all-row td {
	border-bottom: 1px solid var(--color-rule, #e5e5e5);
	padding-top: 4px;
	padding-bottom: 4px;
}

.ao-event-accessibility-grid__select-all-cell {
	text-align: center;
}

.ao-event-accessibility-grid__select-all-btn {
	background: none;
	border: none;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--color-primary, #1f76b4);
	text-decoration: underline;
	cursor: pointer;
}

.ao-event-accessibility-grid__select-all-btn:hover,
.ao-event-accessibility-grid__select-all-btn:focus-visible {
	color: var(--color-ink, #252525);
}

.ao-event-accessibility-grid__empty-cell {
	text-align: left !important;
	color: var(--color-ink-muted, #6b6b6b);
	font-style: italic;
	/* Left padding is the base --space-2 (8px) plus 20px to shift the
	   "add dates first" text right, independent of the cell's other
	   padding. */
	padding: var(--space-3, 12px) var(--space-2, 8px) var(--space-3, 12px) calc(var(--space-2, 8px) + 20px) !important;
	/* Matches .ao-form__hint's size — the same size as "Optional. Any other
	   accessibility details..." in the Additional Accessibility Info
	   section below. */
	font-size: var(--text-xs);
}