/*
 * Deliberate departures from the WordPress original.
 *
 * Everything else about this site's look is carried across rather than decided: site.css holds
 * the theme and the kit, and css/pages/<slug>.css is generated from the values Elementor held.
 * This file is the opposite of both -- the places where the design was asked to change, in one
 * place so that "why does this not match the old site?" has one answer rather than a hunt.
 *
 * It loads last, after the generated stylesheets, because that is the only way a decision here
 * outranks a measured value there.
 *
 * Selectors here never use the generated kk-eN classes. Those are reassigned on every import
 * and mean nothing from one run to the next. The stable anchors are the page's own slug class
 * on <body>, the heading ids the renderer derives from the heading text, and the structural
 * classes the converter writes.
 */

/* ---------------------------------------------------------------- home */

/*
 * A heading typed inside a text editor takes the theme's #212529, which is right nearly
 * everywhere and wrong on a red band -- this one is a sub-heading inside white body copy, and
 * it was rendering near-black against brand red. The band's other headings are heading widgets
 * and are coloured per element, so this is the only one that needs saying.
 */
#and-your-examples-won-t-be-full-of-words-you-haven-t-learned { color: #fff; }

/* ---------------------------------------------------------------- getting started, vocabulary */

/*
 * Three cards across, not two and then one.
 *
 * Elementor gives each of these columns 50%, which wraps the third onto a row of its own. The
 * width is an inline custom property, so this has to be !important to reach it -- the one place
 * in this stylesheet where that is true, and only because the value it overrides is in the
 * markup rather than in a stylesheet.
 *
 * Matched on the width as well as the page: /vocabulary/ has a second row of three cards at 30%
 * that already sits on one line, and /characters/ has a pair at 50% that should stay a pair.
 */
.kk-page-getting-started .kk-col.kk-card[style*="--kk-w:50%"],
.kk-page-vocabulary .kk-col.kk-card[style*="--kk-w:50%"] { --kk-w: 33.3333% !important; }

/* ---------------------------------------------------------------- pricing */

/*
 * The section head, which Elementor leaves at the body size. 3.5556rem is 64px against the 18px
 * root, which is the size the theme gives a bare h1 -- the largest step in the scale, for the
 * one line on the page that introduces everything under it. Weight and colour already come from
 * the page stylesheet; the line-height is loosened to suit the larger size.
 */
.kk-page-pricing #everything-you-need-tokeep-learning-japanese {
	font-size: 3.5556rem;
	font-weight: 700;
	line-height: 1.4em;
}

/* The line above it is a <strong> and already renders at 700; stated on the block so the whole
   line is 700 whether or not the copy keeps its asterisks. */
.kk-page-pricing #everything-you-need-tokeep-learning-japanese,
.kk-page-pricing .kk-band--red > .kk-center:first-child { font-weight: 700; }

/*
 * The prices. They are text-editor copy rather than headings, so nothing upstream sizes them,
 * and at the body's 18px they read as small print next to the card titles above them. 3.5rem is
 * 63px.
 *
 * Anchored on the card pair rather than on a class: each plan is a dark title card followed by a
 * white card whose first line is the price.
 *
 * The line-height comes down with the size. At the body's 1.857 a 63px number sits in a 117px
 * line box, which put half a line of air between the price and the sentence under it.
 */
.kk-page-pricing .kk-card--dark + .kk-card > :first-child {
	font-size: 3.5rem;
	line-height: 1.1;
}
/* The unit stays at the body size. The importer wraps it; see CORRECTIONS. */
.kk-unit { font-size: 1rem; }

/*
 * The title cards sit directly on top of the white cards that carry the plan, so the two read as
 * one panel. Rounded at the bottom they read as two, with a seam across the middle.
 */
.kk-page-pricing .kk-card--dark { border-radius: var(--kk-radius) var(--kk-radius) 0 0; }
/* ...and the card under it is square along the top edge they share, or the seam reappears as a
   pair of notches. */
.kk-page-pricing .kk-card--dark + .kk-card { border-radius: 0 0 var(--kk-radius) var(--kk-radius); }

/*
 * The monthly plan's button is white on a white card, which leaves it edgeless. The outline is
 * the same one the design gives "See How It Works" on the home page. It holds its colours on
 * hover: an outlined button that fills with red on hover reads as a different button.
 */
.kk-page-pricing .kk-card .kk-btn--light,
.kk-page-pricing .kk-card .kk-btn--light:hover {
	background: #fff;
	color: var(--kk-primary);
	border: 1px solid var(--kk-primary);
}