/*
Theme Name:   BecomeCNA - Divi Child Theme
Description:  BecomeCNA child theme, based on Divi 5.
Author:       SpinGroup
Author URI:   https://www.spingroup.com
Template:     Divi
Version:      1.0.0
*/

/*
* Global layer only: resets, element defaults, rules that genuinely apply site-wide.
* Anything belonging to one section or component goes in assets/css/<slug>.css.
*
* Brand colors, fonts and spacing belong in Divi's Global Variables and Presets, not here.
*/

/* Button
 *
 * Divi centres the hover arrow on the button (top: 50%, translateY(-50%)). The button
 * preset pads 16px top / 14px bottom and the text is 16px Arial, which together put the
 * text's optical centre 1.5px below the button's centre. Nudge the arrow to the text.
 * Same specificity as Divi's rule; this sheet loads later, so no !important.
 */

.et_pb_button::after {
	top: calc(50% + 1.5px);
}

/* Button icons: keep the glyph out of the accessible name.
 *
 * Divi draws button icons as ETmodules glyphs in ::before/::after content, and Chrome
 * puts generated content into the accessible name, so "View the roadmap" reads as
 * "View the roadmap 5". CSS alternative text (content: "x" / "") keeps the glyph and
 * names it empty. These mirror Divi's own icon rules exactly (default glyph, data-icon,
 * tablet and phone variants at Divi's breakpoints) one class more specific than its
 * preset rules, which load after this sheet. Browsers without the alt syntax ignore
 * the declaration and fall back to Divi's, so nothing breaks.
 */

html body #page-container .et_pb_section .et_pb_button {
	&::before,
	&::after {
		content: "5" / "";
	}

	&[data-icon]:not([data-icon=""]) {
		&::before,
		&::after {
			content: attr(data-icon) / "";
		}
	}

	@media (max-width: 980px) {
		&[data-icon-tablet]:not([data-icon-tablet=""]) {
			&::before,
			&::after {
				content: attr(data-icon-tablet) / "";
			}
		}
	}

	@media (max-width: 767px) {
		&[data-icon-phone]:not([data-icon-phone=""]) {
			&::before,
			&::after {
				content: attr(data-icon-phone) / "";
			}
		}
	}
}

/* Number circle
 *
 * Builder utility class: wrap a single digit in a Text module, e.g.
 * <div class="number-circle"><p>1</p></div>. Colours come from Divi's global palette
 * (Secondary on the badge, Heading colour for the digit), which measures 4.7:1 and matches
 * the orange headings it sits under. White on orange only reaches 3.1:1 at this size.
 */

.number-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: var(--gcid-secondary-color, #ff9933);
	color: var(--gcid-heading-color, #28465b);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;

	> * {
		margin: 0;
		padding: 0;
		line-height: inherit;
	}
}

/* Header row
 *
 * Divi gives the header's three columns fixed widths and lets the row wrap, so the menu
 * and the button wrap between 981px and ~1116px. Size the menu and button columns to their
 * content and let the logo shrink instead. px breakpoint to match Divi's 980px.
 *
 * The logo gives way first: a zero basis means it only gets the space left over, between
 * 100px and its own max-content (the image module's max width); past that, justify-content
 * spreads the rest as before. Only once the logo is at 100px does the menu shrink, wrapping
 * its labels onto more lines. English never gets there; GTranslate's Spanish labels are
 * nearly twice as long and ran off the page below ~1700px when they couldn't wrap.
 */

@media (min-width: 981px) {
	.et_pb_row.cna-header-row {
		--horizontal-gap: 1rem;
		flex-wrap: nowrap;

		> .et_flex_column {
			width: auto;
			flex: 0 0 auto;

			&:first-child {
				flex: 1 1 0;
				min-inline-size: 6.25rem;
				max-inline-size: max-content;
			}

			&:nth-child(2) {
				flex-shrink: 1;
			}
		}

		.et_pb_menu__menu > nav > ul {
			flex-wrap: nowrap;
		}
	}

	/* Translated pages (GTranslate sets <html lang>): the labels always wrap, so keep the
	 * logo legible at 150px and win the width back from the link padding (Divi's 11px, and
	 * the list's matching negative margin). Same line counts as 100px/11px at every width.
	 * Balanced wrapping keeps two-line labels from leaving one word on the second line. */
	html:not(:lang(en)) .et_pb_row.cna-header-row {
		> .et_flex_column:first-child {
			min-inline-size: 9.375rem;
		}

		.et_pb_menu__menu > nav > ul {
			margin-inline: -8px;

			> li {
				padding-inline: 8px;

				> a {
					text-wrap: balance;
				}
			}
		}
	}
}

/* Accessibility
 *
 * Keyboard focus ring, second colour. Divi Assistant's "keyboard navigation outline" adds
 * .keyboard-navigation-outline to the focused element and draws a 3px navy outline 5px
 * out from it. Navy alone is invisible on the navy sections (1.4.11 needs 3:1 against the
 * adjacent colour), so this fills the 5px gap with white: on light backgrounds it vanishes,
 * on navy it becomes the visible ring. Nothing else in this file is accessibility CSS on
 * purpose; see docs/accessibility.md.
 */

.keyboard-navigation-outline {
	box-shadow: 0 0 0 5px #fff;
}