/* ==================================================================
 * WEMountain sales-site styling
 *
 * The new look, applied to the sales pages only.
 *
 * Everything here hangs off `body.wem-header-v2`, the class added by
 * wemountain_header_v2_body_class() on exactly the pages that render the new
 * header. Courses, lessons, topics, quizzes and the member community never
 * receive that class, so their fonts, colours and buttons are left alone.
 * That is deliberate: doing this through Elementor's global fonts and colours
 * would repaint the training pages too.
 *
 * The homepage is excluded with :not(.wem-landing), because landing.css
 * already draws it to the design in full and the two should not compete.
 *
 * To take a single page back out, drop the class for it:
 *
 *   add_filter( 'wemountain_header_v2_active', function ( $active ) {
 *       return is_page( 'some-page' ) ? false : $active;
 *   } );
 * ================================================================== */

:root {
	--wem-blue: #0047e0;
	--wem-ink: #141414;
}

/* ------------------------------------------------------------------ *
 * 1. Headings
 *
 * The sales pages set headings in Helvetica and Work Sans. The design uses
 * Big Shoulders, heavy and uppercase. Only the family, weight and casing are
 * touched; each page keeps the sizes it was built with, so nothing reflows.
 * ------------------------------------------------------------------ */

/* Headings written straight into a page, outside Elementor's own widgets. */
body.wem-header-v2:not(.wem-landing) :is(h1, h2, h3) {
	font-family: "Big Shoulders", sans-serif;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: .01em;
}

body.wem-header-v2:not(.wem-landing) :is(h1, h2) {
	text-transform: uppercase;
}

/*
 * Elementor prints its own rule for every heading widget, shaped like
 * `.elementor-53411 .elementor-element.elementor-element-ab12cd
 * .elementor-heading-title`. That outranks a selector scoped only to the page,
 * which is why naming the element wrapper here matters: it lifts these above
 * Elementor's generated CSS without resorting to !important, so a heading that
 * was deliberately styled by hand can still win.
 */
body.wem-header-v2:not(.wem-landing) .elementor-element .elementor-heading-title {
	font-family: "Big Shoulders", sans-serif;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: .01em;
}

body.wem-header-v2:not(.wem-landing) .elementor-element :is(h1, h2).elementor-heading-title {
	text-transform: uppercase;
}

/*
 * Headings in the parts of a page that are not editorial: cards, product
 * summaries, widgets and anything the shop prints. These read as labels rather
 * than statements, so they keep their original face. They carry one more class
 * than the rules above so that they win.
 */
body.wem-header-v2:not(.wem-landing) :is(
	.woocommerce,
	.elementor-widget-woocommerce-product-data-tabs,
	.bb-card,
	.widget,
	.elementor-posts,
	.elementor-loop-container
) :is(h1, h2, h3, .elementor-heading-title),
body.wem-header-v2:not(.wem-landing) :is(
	.woocommerce,
	.elementor-widget-woocommerce-product-data-tabs,
	.bb-card,
	.widget,
	.elementor-posts,
	.elementor-loop-container
) .elementor-element .elementor-heading-title {
	font-family: inherit;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
}

/* ------------------------------------------------------------------ *
 * 2. Buttons
 *
 * Square blue rectangles in Work Sans become the design's black pill. A
 * button that was given its own colour in Elementor keeps it, because those
 * carry an inline style that outranks this sheet.
 * ------------------------------------------------------------------ */

body.wem-header-v2:not(.wem-landing) :is(
	.elementor-button,
	.elementor-button-wrapper .elementor-button
) {
	border-radius: 999px;
	background-color: var(--wem-ink);
	color: #fff;
	font-family: "Big Shoulders", sans-serif;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background-color .25s ease;
}

body.wem-header-v2:not(.wem-landing) :is(
	.elementor-button,
	.elementor-button-wrapper .elementor-button
):is(:hover, :focus-visible) {
	background-color: var(--wem-blue);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 3. The brand blue
 *
 * The pages use the older, lighter blue with a cyan for accents. These bring
 * the two that appear as flat fills over to the design's deeper blue. Photo
 * overlays and gradients are left alone, since changing those would alter the
 * images themselves.
 * ------------------------------------------------------------------ */

/*
 * Dividers keep whatever colour they were given.
 *
 * They were briefly forced to brand blue. One of them, the rule across the
 * gift-voucher hero, is deliberately transparent on the live site
 * (--divider-color: #00000000), so recolouring it drew a blue line straight
 * across the photograph. A divider's colour is a per-instance decision.
 */

body.wem-header-v2:not(.wem-landing) a:not(.elementor-button):not(.wem-nav-link):hover {
	color: var(--wem-blue);
}

/* ------------------------------------------------------------------ *
 * 4. The footer
 *
 * The footer's six column headings are set in an old cyan that is not in the
 * palette. They become brand blue, which reads 7.05:1 on the white ground
 * they sit on.
 *
 * This lives here rather than in ds.css on purpose. The footer is one
 * component shared by every sales page, including the course pages held back
 * from the design-system restyle, and a footer that changed colour from page
 * to page would look more broken than one that is uniformly off-brand.
 *
 * The class is repeated to outrank Elementor's per-element rule, which
 * carries four classes of its own.
 * ------------------------------------------------------------------ */

body.wem-header-v2.wem-header-v2 footer.elementor-location-footer h5.elementor-heading-title {
	color: var(--wem-blue);
}

/* ------------------------------------------------------------------ *
 * 5. Homepage hero
 *
 * Layout, colour and type are set on the blocks themselves in Elementor, so
 * they stay editable. Only the two things Elementor cannot express go here:
 * a measure in characters rather than pixels, and a headline that scales
 * smoothly with the window instead of stepping at each breakpoint.
 * ------------------------------------------------------------------ */

/*
 * Only the measures live here. Sizes and colours are set on the blocks in
 * Elementor so they can be edited there.
 *
 * 13 characters rather than the design's 12: the French headline is half again
 * as long as the English one and ran to five lines at 12.
 */
body.wem-header-v2 .wem-hero-h1 .elementor-heading-title {
	max-width: 13ch;
}

body.wem-header-v2 .wem-hero-lead,
body.wem-header-v2 .wem-hero-lead p {
	max-width: 56ch;
	line-height: 1.6;
}

/*
 * Most buttons on the site are the ink pill set in section 2. The design gives
 * the opening call to action the brand blue instead, so a button carrying this
 * class keeps blue. The class is set on the block in Elementor, so an editor
 * can add or remove it there.
 */
body.wem-header-v2.wem-header-v2 .wem-cta-blue .elementor-button {
	background-color: var(--wem-blue);
}

body.wem-header-v2.wem-header-v2 .wem-cta-blue .elementor-button:is(:hover, :focus-visible) {
	background-color: var(--wem-blue-pressed, #0032a4);
}

/* ------------------------------------------------------------------ *
 * 6. Section openings
 *
 * The design opens a section with the heading on the left, held to a short
 * measure, and the copy on the right at a comfortable reading width. The
 * columns themselves are containers in Elementor; only the measures and the
 * body colour are here, since Elementor cannot express a width in characters.
 * ------------------------------------------------------------------ */

body.wem-header-v2 .wem-sec-h2 .elementor-heading-title {
	max-width: 13ch;
}

body.wem-header-v2 .wem-sec-lead,
body.wem-header-v2 .wem-sec-lead p {
	max-width: 56ch;
	color: var(--wem-stone);
	line-height: 1.6;
}

body.wem-header-v2 .wem-sec-lead p + p {
	margin-top: 1.1em;
}

/* ------------------------------------------------------------------ *
 * 6. Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body.wem-header-v2 :is(.elementor-button) {
		transition-duration: .01ms !important;
	}
}