/*
Theme Name:   Donat Child (BookWork)
Description:  BookWork customisations for the Donat theme. Put all code changes here, not in the Donat parent theme, so theme updates don't overwrite them.
Author:       BookWork
Template:     donat
Version:      1.0.4
Text Domain:  donat-child
*/

/*
 * Note: Donat loads this file itself (as "donat-style" via get_stylesheet_uri()),
 * and the parent's own style.css contains only its header, so nothing needs to
 * be imported from the parent here. Donat's real styles come from
 * assets/css/style.css, which it still loads from the parent theme.
 *
 * Add custom CSS below.
 */

/*
 * Text pasted into Elementor from another site builder carries "sb-*" classes
 * and hard-coded inline pixel widths (e.g. the "BookWork for Parents/Guardians"
 * heading on How It Works is fixed at 753px), which get cut off on phones.
 * Let those elements shrink to fit their container instead.
 */
[data-sb-uuid][style*="width"] {
	width: auto !important;
	max-width: 100%;
}

/*
 * How It Works: make the "BookWork for Parents/Guardians" heading (Elementor
 * widget 4379ac2) match the step headings such as "Verify Audio", which use
 * Donat's section title style. The pasted text sets its own inline styles and
 * contains an empty 48px span that adds a blank line, so override both.
 */
.elementor-element-4379ac2 .elementor-heading-title,
.elementor-element-4379ac2 .elementor-heading-title > [data-sb-uuid] {
	font-family: "Roboto", sans-serif;
	font-size: 25px !important;
	font-weight: 800;
	line-height: 1.227 !important;
	letter-spacing: normal !important;
	text-transform: capitalize !important;
	color: #1f2937;
	margin-bottom: 0 !important;
}

.elementor-element-4379ac2 .elementor-heading-title > [data-sb-uuid] > span:empty {
	display: none;
}

@media (max-width: 1199px) {
	.elementor-element-4379ac2 .elementor-heading-title,
	.elementor-element-4379ac2 .elementor-heading-title > [data-sb-uuid] {
		line-height: 1.3 !important;
	}
}

/*
 * How It Works: indent the Parents/Guardians section (heading 4379ac2 and its
 * text widget 085437d in container a645674) so it lines up with the step
 * columns ("Verify Audio" etc.). The offsets differ per Elementor breakpoint
 * because the step columns have their own container padding.
 */
.elementor-element-4379ac2 {
	padding-left: 22px;
}

.elementor-element-085437d {
	padding-left: 24px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-4379ac2 {
		padding-left: 45px;
	}

	.elementor-element-085437d {
		padding-left: 67px;
	}
}

@media (min-width: 1025px) {
	/* Match the heading's container (no side padding) so both centre the same. */
	.elementor-element-a645674 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elementor-element-085437d {
		padding-left: 22px;
	}
}

/*
 * Header: show the "Sign in" button on all desktop widths (992px and up).
 * Donat's header widget wraps it in Bootstrap d-xl-block / d-xxl-block
 * classes, so it only appeared on screens 1400px and wider. Below 992px the
 * header switches to the mobile (hamburger) menu, which gets its own Sign in link
 * (see functions.php).
 */
@media (min-width: 992px) {
	.elementor-widget-donatheader .col-auto.d-none.d-xl-block,
	.elementor-widget-donatheader .header-button .d-xxl-block.d-none,
	.elementor-widget-donatheader .header-button a.th-btn.d-xl-block.d-none {
		display: block !important;
	}
}