/*
 * GoAudits checklist styles (goaudits-core, Checklists module).
 *
 * Reproduces the live (Rife) look of the checklist markup after the switch to
 * Hello Elementor, independent of the theme and of Elementor kit button styles.
 * Every selector is scoped to checklist markup: the question card class
 * .elementor-element-qcabtus, the slim wrapper .scrollable-content, the library
 * tile .template-item, or body.page-id-5500. Nothing here targets bare elements.
 *
 * Load order matters: this file is in <head>, the checklist pages' own inline
 * <style> block (page 5500 HTML widget + [goa_get_checklist_slim] output) comes
 * later, so on equal specificity the page's own rules still win, as they did
 * over Rife. Higher-specificity rules below copy the FINAL computed values, so
 * they never fight the page's own CSS.
 *
 * background-color / color on the answer buttons are never !important: the
 * toggle3() JS colours the selected answer with inline styles.
 *
 * Sources (live, 8 Nov 2026):
 *   [A] Rife Customizer "Additional CSS" (#wp-custom-css) — "Custom CSS for Library blocks"
 *   [R] rife-free/style.css — input[type=text|date], [hidden], input transitions, h1–h6
 *   [U] apollo13 user.css — system font stack, link colour #4da387
 *   [P] page 5500 / slim inline <style> — .button, .button1, .btn-action, td, summary
 *   [E] Elementor frontend.css — .elementor-button base + size-xs/size-sm
 */

/* ---------- [A] Library blocks, copied as-is (already scoped to qcabtus) ---------- */
.elementor-element.elementor-element-qcabtus.elementor-position-right .elementor-image-box-img {
	margin-left: 10px;
}
.elementor-element.elementor-element-qcabtus.elementor-position-left .elementor-image-box-img {
	margin-right: 10px;
}
.elementor-element.elementor-element-qcabtus.elementor-position-top .elementor-image-box-img {
	margin-bottom: 10px;
}
.elementor-element.elementor-element-qcabtus .elementor-image-box-wrapper .elementor-image-box-img {
	width: 100% !important;
}
.elementor-element.elementor-element-qcabtus .elementor-image-box-wrapper .elementor-image-box-img img {
	opacity: 1;
}
.elementor-element.elementor-element-qcabtus .elementor-image-box-wrapper {
	text-align: center;
}
.elementor-element.elementor-element-qcabtus .elementor-image-box-title {
	margin-bottom: 20px;
}
.elementor-element.elementor-element-qcabtus .elementor-image-box-content .elementor-image-box-title {
	font-size: 18px;
	text-transform: none;
	font-style: normal;
	line-height: 1.2em;
	letter-spacing: -0.8px;
}
.elementor-element.elementor-element-qcabtus .elementor-image-box-content .elementor-image-box-description {
	color: #777777;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	font-style: normal;
	line-height: 1.5em;
}
.elementor-element.elementor-element-qcabtus > .elementor-widget-container {
	padding: 30px 5px 30px 5px;
	background-color: #ffffff;
	border-radius: 10px 10px 10px 10px;
}
.elementor-element.elementor-element-qcabtus:hover .elementor-widget-container {
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.elementor-element.elementor-element-qcabtus .elementor-widget-container {
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

/* ---------- Library tiles ([goa_get_templates], [goa_get_checklists], [goa_get_checklists_name]) ---------- */
/* [U] links are brand green (Hello would make them #c36). */
.template-item > a,
.template-item > a:hover,
.template-item > a:focus {
	color: #4da387;
}
.template-item > a:hover {
	text-decoration: underline; /* [R] a:hover */
}
/* [R]+[U] headings: black, weight 500, system font (Hello: inherit colour). */
.template-item .elementor-element-qcabtus .elementor-image-box-title {
	color: #000000;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: normal;
}

/* ---------- Breadcrumbs on page 5500 ---------- */
.page-id-5500 #breadcrumbs.breadcrumbs a,
.page-id-5500 #breadcrumbs.breadcrumbs a:hover {
	color: #4da387; /* [U] */
}
.page-id-5500 #breadcrumbs.breadcrumbs a:hover {
	text-decoration: underline; /* [R] */
}

/* ---------- Section bars: details > summary ([P], pinned against Hello) ---------- */
.page-id-5500 details > summary,
.scrollable-content details > summary {
	display: list-item;
	outline: none;
	background-color: #263746;
	color: #fff;
	padding: 14px 14px 14px 14px;
	margin: 1px 1px 10px 1px;
	border-radius: 10px;
	cursor: pointer;
	/* Rife body typography (Additional CSS body rule + user.css font stack). */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.7;
}

/* ---------- Question card internals ---------- */
/* Question title: Hello sets h3 margin-top .5rem and its own font; Rife used browser default 1em + system font. */
.elementor-element.elementor-element-qcabtus .elementor-image-box-content h3.elementor-image-box-title {
	margin-top: 1em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Table: [P] no borders/stripes. Hello adds cell borders, 15px padding, zebra + hover backgrounds. */
.elementor-element.elementor-element-qcabtus table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin: 0;
	background-color: transparent;
	font-size: inherit;
}
.elementor-element.elementor-element-qcabtus table tr,
.elementor-element.elementor-element-qcabtus table td {
	border: none;
	background-color: transparent;
}
.elementor-element.elementor-element-qcabtus table td {
	width: 50%;
	padding: 0 0 0.8rem 0;
	text-align: left; /* [R] th, td */
	vertical-align: middle;
	line-height: inherit;
}
.elementor-element.elementor-element-qcabtus table tbody > tr:nth-child(odd) > td,
.elementor-element.elementor-element-qcabtus table tbody tr:hover > td {
	background-color: transparent;
}

/* Labels: Hello makes them inline-block with line-height 1. */
.elementor-element.elementor-element-qcabtus label {
	display: inline;
	line-height: inherit;
	vertical-align: baseline;
}

/* [R] [hidden] inputs stay hidden. */
.elementor-element.elementor-element-qcabtus input[hidden] {
	display: none;
}

/* Answer buttons (Yes / No / N/A): [P] .button + .button1, white outlined.
   Selected state = inline background/colour from toggle3(). */
.elementor-element.elementor-element-qcabtus input.button.button1[type="button"] {
	-webkit-appearance: button;
	appearance: button;
	display: inline-block;
	box-sizing: border-box;
	width: 200px;
	height: auto;
	margin: 4px 8px;
	padding: 10px 0px 10px 0px;
	border: 1px solid #d6d6d6;
	border-radius: 3px;
	background-color: rgb(249, 250, 251);
	color: #808080;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.5s, border-color 0.5s, color 0.5s; /* [R] */
}
/* Rife had no hover state; Hello and kits turn [type=button]:hover pink/coloured. */
.elementor-element.elementor-element-qcabtus input.button.button1[type="button"]:hover,
.elementor-element.elementor-element-qcabtus input.button.button1[type="button"]:focus,
.elementor-element.elementor-element-qcabtus input.button.button1[type="button"]:active {
	background-color: rgb(249, 250, 251);
	color: #808080;
	border-color: #d6d6d6;
	outline: none;
	text-decoration: none;
}

/* Text / date / comment fields: [R] input[type=text|date] beat .button1 on live, so
   these are Rife's values + .button margin; width/text-align come from inline styles. */
.elementor-element.elementor-element-qcabtus input.button.button1[type="text"],
.elementor-element.elementor-element-qcabtus input.button.button1[type="date"] {
	display: inline-block;
	box-sizing: border-box;
	max-width: 450px;
	height: 40px;
	margin: 4px 8px;
	padding: 9px 15px 7px;
	border: 1px solid transparent;
	border-radius: 0;
	background-color: #f5f5f5;
	color: #5b5b5b;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.5s, border-color 0.5s, color 0.5s;
}
.elementor-element.elementor-element-qcabtus input.button.button1[type="text"]:hover,
.elementor-element.elementor-element-qcabtus input.button.button1[type="text"]:focus,
.elementor-element.elementor-element-qcabtus input.button.button1[type="date"]:hover,
.elementor-element.elementor-element-qcabtus input.button.button1[type="date"]:focus {
	border-color: #d4d4d4;
	outline: none;
}

/* Photo / Comment: [P] .btn-action on [E] .elementor-button.elementor-size-xs
   (radius 2px + 13px font from size-xs; padding 6px is inline). */
.elementor-element.elementor-element-qcabtus a.elementor-button.elementor-size-xs.btn-action {
	display: inline-block;
	margin: 4px 8px;
	border: 1px solid #d6d6d6;
	border-radius: 2px;
	background-color: rgb(249, 250, 251);
	color: #808080;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: all 0.3s;
}
.elementor-element.elementor-element-qcabtus a.elementor-button.elementor-size-xs.btn-action:hover,
.elementor-element.elementor-element-qcabtus a.elementor-button.elementor-size-xs.btn-action:focus,
.elementor-element.elementor-element-qcabtus a.elementor-button.elementor-size-xs.btn-action:visited {
	background-color: rgb(249, 250, 251);
	color: grey; /* [P] .elementor-button:hover */
	text-decoration: none;
}

/* Green "Upload" button: [E] .elementor-button.elementor-size-sm; green background is inline. */
.elementor-element.elementor-element-qcabtus a.elementor-button-link.elementor-button.elementor-size-sm {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
}