/*
 * Brand defaults for Elementor-built content only (pages, templates, header,
 * footer). Deliberately NOT done as Elementor kit "Theme Style": kit rules
 * target every button, input, label, heading and link on the site
 * (.elementor-kit-8 button {...}) and would restyle Tutor LMS screens.
 *
 * Colours and fonts come from the kit globals (widgets use them by default)
 * and from tokens.css. Per-widget settings in Elementor still win over these.
 */

/* ---------------------------------------------------------------------------
 * Buttons (style guide). Pills are 43px tall: text left, arrow right.
 *   default            filled teal, navy on hover        ("Button 1")
 *   .fdi-btn-outline   2px teal outline, fills on hover  ("Button 2")
 *   .fdi-btn-light     2px white outline, on dark/photo backgrounds
 * ------------------------------------------------------------------------- */
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	min-height: 43px;
	padding: 9.5px 30px;
	border: 0;
	border-radius: var(--fdi-radius-pill);
	line-height: 24px;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.elementor-widget-button .elementor-button .elementor-button-content-wrapper {
	gap: 22px;
}

.elementor-widget-button .elementor-button .elementor-button-icon svg {
	width: 12px;
	height: 12px;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible {
	background-color: var(--fdi-navy);
	color: var(--fdi-white);
}

.elementor-widget-button.fdi-btn-outline .elementor-button {
	padding: 7.5px 30px;
	border: 2px solid var(--fdi-teal);
	background-color: transparent;
	color: var(--fdi-teal);
}

.elementor-widget-button.fdi-btn-outline .elementor-button:hover,
.elementor-widget-button.fdi-btn-outline .elementor-button:focus-visible {
	background-color: var(--fdi-teal);
	color: var(--fdi-white);
}

.elementor-widget-button.fdi-btn-light .elementor-button {
	padding: 7.5px 30px;
	border: 2px solid var(--fdi-white);
	background-color: transparent;
	color: var(--fdi-white);
}

.elementor-widget-button.fdi-btn-light .elementor-button:hover,
.elementor-widget-button.fdi-btn-light .elementor-button:focus-visible {
	background-color: var(--fdi-white);
	color: var(--fdi-navy);
}

/* Filled teal pill on a navy card: navy hover would vanish, so go white. */
.elementor-widget-button.fdi-btn-on-navy .elementor-button:hover,
.elementor-widget-button.fdi-btn-on-navy .elementor-button:focus-visible {
	background-color: var(--fdi-white);
	color: var(--fdi-teal);
}

/* Arrow icons recolour with the text (SVGs from the media library carry a fixed fill). */
.elementor-widget-button .elementor-button .elementor-button-icon svg path,
.elementor-widget-button .elementor-button .elementor-button-icon svg polygon {
	fill: currentColor;
}

/* Links inside text. */
.elementor-widget-text-editor a {
	color: var(--fdi-teal);
}

.elementor-widget-text-editor a:hover {
	color: var(--fdi-navy);
}

/* ---------------------------------------------------------------------------
 * Elementor Pro forms: style guide "Text Field" - 46px pill, 1px black border.
 * ------------------------------------------------------------------------- */
.elementor-form .elementor-field-group > label,
.elementor-form .elementor-field-label {
	font-family: var(--fdi-font-body);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
	color: var(--fdi-text);
}

.elementor-form .elementor-field-group .elementor-field-textual {
	min-height: var(--fdi-input-height);
	padding: 11px 22px;
	border: var(--fdi-border);
	border-radius: var(--fdi-radius-pill);
	background-color: var(--fdi-white);
	color: var(--fdi-text);
	font-family: var(--fdi-font-body);
	font-weight: 600;
	font-size: 17px;
}

.elementor-form .elementor-field-group textarea.elementor-field-textual,
.elementor-form .elementor-field-group select[multiple].elementor-field-textual {
	border-radius: var(--fdi-radius-box);
}

.elementor-form .elementor-field-group .elementor-field-textual:focus {
	border-color: var(--fdi-teal);
	outline: none;
	box-shadow: 0 0 0 1px var(--fdi-teal);
}

.elementor-form .elementor-button {
	min-height: 43px;
	padding: 9.5px 30px;
	border-radius: var(--fdi-radius-pill);
	line-height: 24px;
}