/*
Theme Name:   Astra Child
Theme URI:    https://ironprogram.com
Description:  Child theme for ironprogram.com. Put every customisation here — the
              Astra parent is replaced wholesale on each theme update.
Author:       Iron Program
Template:     astra
Version:      1.2.0
Text Domain:  astra-child
*/

/* Custom CSS goes below this line. */

/*
 * Keep the language switcher on the same row as the rest of the header menu.
 *
 * Astra's header menu is a flex list with flex-wrap: wrap. The language item is
 * the widest one (flag + full language name + dropdown arrow) and sits last, so
 * as soon as the row runs short it is the item that drops onto a second line —
 * on French that happened at every desktop width, because the menu needed about
 * 728px inside a 673px slot.
 *
 * nowrap alone would just overflow, so the 16px link padding comes down to 10px
 * to buy back the ~70px needed. Measured on all three languages: one row from
 * Astra's 921px breakpoint upwards, with no spill past the container. Adding
 * more top-level menu items will eat the remaining slack, so re-check this if
 * the menu grows.
 */
@media (min-width: 922px) {

	.ast-builder-menu-1 .main-header-menu {
		flex-wrap: nowrap;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		padding-right: 10px;
		padding-left: 10px;
		white-space: nowrap;
	}
}

/*
 * Coach cards: keep the price and the "View profile" button on one baseline.
 *
 * The three cards are stretched to equal height by the columns block, but each
 * card's text is laid out from the top, so the card with the longest bio (Mouad
 * in English, Ikram in Arabic) pushed its price and button ~21px below the other
 * two, and the short cards were left with a gap under the button instead. Making
 * the card a flex column and giving the price paragraph — the last <p> in the
 * group — an auto top margin pins price and button to the bottom of every card.
 *
 * The group is a constrained layout, so WordPress gives each of its children
 * `margin-left/right: auto !important`. That is inert while the group is a
 * block, but in a flex column the auto margins beat the default stretch: every
 * child shrinks to its content width and centres itself, which turns the
 * left-aligned name and credentials centred and cuts the full-width button down
 * to the width of its label. The !important below is answering that one.
 */
.ip-coach-card {
	display: flex;
	flex-direction: column;
}

.ip-coach-card > .wp-block-group {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.ip-coach-card > .wp-block-group > * {
	margin-inline: 0 !important;
}

.ip-coach-card .wp-block-group > p:last-of-type {
	margin-top: auto !important;
}

/*
 * Video section: line the row up with the rest of the page.
 *
 * Every other section constrains its content to 80% of the viewport, so the
 * page has a consistent edge (144px in at 1440px wide). The Kadence row was
 * full-bleed with only its own 15px padding, which put the video 130px further
 * out than everything above and below it. The black background sits on the
 * outer wrapper, so constraining the inner wrap keeps the full-width band and
 * moves only the content.
 */
.video-sec .kt-row-column-wrap {
	max-width: 80%;
	margin-inline: auto;
	padding-inline: 0;
}

/*
 * The text column was top-aligned against a 427px-tall video with a 50px spacer
 * block hand-placed above the heading, which left ~230px of empty black below
 * the button on desktop and a pointless 50px gap between video and heading once
 * the columns stacked on mobile. Centre the column instead and drop the spacer.
 */
.video-sec .wp-block-spacer {
	display: none;
}

@media (min-width: 768px) {

	.video-sec .kt-row-column-wrap > .wp-block-kadence-column:last-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.video-sec .kt-row-column-wrap > .wp-block-kadence-column:last-child .kt-inside-inner-col {
		width: 100%;
	}
}

/*
 * FAQ: the 24px spacer between question pairs was also left after the last
 * answer in each column, stacking dead space on top of the section's own bottom
 * padding. Keep the spacers between pairs, drop the trailing ones.
 */
.faq-sec .wp-block-column > .wp-block-spacer:last-child {
	display: none;
}