/* Inline sign-up forms (v0.3.986).
 *
 * THE BOX IS THE HOUSE BOX. Save This and the subscriber gate already share it exactly -- the same
 * near-white peach ground, the same 1px peach border, the same 30px/40px padding, the same 34rem
 * cap, both centred -- so "match our save this / exclusive content styles" had one answer rather
 * than a judgement. Save This adds the spotlight and the gate adds stickiness; neither belongs in
 * the flow of a post.
 *
 * `em`, NEVER `rem`, and that matters MORE here than usual. The two boxes this copies are written
 * in `rem` (21 values in save-this.css) -- which is the mistake the gate shipped with, because
 * `rem` is 16px against her 20px body. So this matches their APPEARANCE and not their units, and
 * every value is converted BY VALUE: 34rem is 544px, which is 27.2em, where a careless 34em would
 * be 680px -- a quarter too wide.
 *
 * Every colour goes through a variable with its brand hex as the fallback, so Settings reaches all
 * of it. The challenge scheme is her three brand yellows in the same relationship the peach card
 * uses: palest ground, mid border, strongest button.
 */

/* EVERY SIZE IN THIS FILE ASKS THE BOX, NOT THE WINDOW (v0.3.1005).
 * A media query measures the viewport, and these boxes are routinely not the width of it: the
 * settings preview tiles are ~330px inside a 1500px admin screen, so every one of them was
 * handed the DESKTOP sizing and crammed. Her report, on the banner: "preview looks a bit bad".
 * On a real page nothing moves -- a card in her content column is ~900px and on a phone ~370px,
 * which is what the media queries already decided. */
.jcp-signup { container-type: inline-size; container-name: jcp-signup; }

.jcp-signup-box {
	background: var( --jcp-coral-bg, #fff4ef );
	border: 1px solid var( --jcp-peach, #fec9b0 );
	box-shadow: 0 6px 28px rgba( 85, 85, 87, 0.18 );
	padding: 1.5em 2em;
	margin: 1.5em auto;
	max-width: 27.2em;
	text-align: center;
}

@container jcp-signup ( max-width: 600px ) {
	.jcp-signup-box {
		padding: 1.25em 1.1em;
	}
}

/* BIGGER ON DESKTOP, BECAUSE AN INLINE FORM IS NOT A POPUP (v0.3.1000).
 *
 * Every size in this file came from the popup, and the popup's sizes exist to fit a 390px card on a
 * 780px phone screen -- the v0.3.966 measurement, where shortening the labels took the card from
 * 843px to 736px. An inline form is not that. It sits in the post, in a ~900px content column,
 * replacing a Flodesk embed that used all of it. Hers: "the flodesk form is bigger on desktop and
 * is easier to read - ours is too small ... ours look good on mobile."
 *
 * SO THE BASE VALUES STAY THE PHONE'S AND NOTHING BELOW 601px MOVES. Scaling UP in a min-width
 * query rather than raising the base is what makes "mobile is untouched" true by construction
 * instead of true by care. The 600px block above still wins where it applies.
 *
 * ONE font-size carries all of it, because every value inside the box is in `em`: heading 27 -> 32,
 * fields 14 -> 17, button 16 -> 19, tick boxes 13 -> 16, and the gaps with them. The max-width is
 * `em` against the box's OWN font-size, so 31.7em is 760px at 24px -- NOT the 912px it would be if
 * it resolved against the 20px body. Getting that backwards is how a "slightly wider" box ends up
 * wider than her content column.
 *
 * AND THE TICK BOXES ARE DELIBERATELY NOT STRETCHED TO THE EDGES. They grow with the type and stay
 * a centred cluster. The rule further down says why, in her words, after three wrong versions --
 * `1fr` and `max-content 1fr` were both rejected. A render of this change showed the gap either
 * side of them and it read as a fault; it is the thing she asked for. */
@container jcp-signup ( min-width: 601px ) {
	.jcp-signup-box {
		font-size: 1.2em;
		max-width: 31.7em;
		padding: 1.6em 2.2em;
	}
}

/* A CHALLENGE IS NOT A FREEBIE. Both of hers are "20 days ... completely free to join", with no
 * file at the end, and they are yellow on her site today where the freebies are peach. Kept. */
.jcp-signup--challenge .jcp-signup-box {
	background: var( --jcp-challenge-bg, #fcf3cf );
	border-color: var( --jcp-challenge-border, #f8e38d );
}

.jcp-signup--challenge .jcp-signup-button {
	background: var( --jcp-challenge-btn, #f4d44f );
}

.jcp-signup--challenge .jcp-signup-form .jcp-signup-input {
	border-color: var( --jcp-challenge-border, #f8e38d );
}

.jcp-signup-heading {
	font-size: 1.35em;
	line-height: 1.25;
	font-weight: bold;
	color: var( --jcp-heading, #000000 );
	margin: 0 0 0.35em;
	text-wrap: balance;
}

.jcp-signup-sub {
	font-size: 0.85em;
	font-weight: bold;
	margin: 0 0 0.9em;
}

.jcp-signup-form {
	display: grid;
	gap: 0.5em;
}

/* TWO CLASSES, OR IT NEVER APPLIES. GeneratePress styles `input[type=email]` directly, which is
 * (0,1,1) against a single class at (0,1,0) -- and this stylesheet is linked BEFORE the theme's, so
 * matching its weight loses too. The gate's field padding was invisible on the live site for weeks
 * for exactly this reason. */
.jcp-signup-form .jcp-signup-input {
	width: 100%;
	font-size: 0.7em;
	font-family: inherit;
	padding: 0.75em 0.8em;
	border: 1px solid var( --jcp-peach, #fec9b0 );
	background: var( --jcp-bg, #ffffff );
	color: var( --jcp-text, #555557 );
}

.jcp-signup-form .jcp-signup-input:focus {
	outline: 2px solid var( --jcp-coral, #ff8d69 );
	outline-offset: 1px;
}

/* A `<button>` inherits neither the face nor the colour, so both are stated. */
.jcp-signup-button {
	font-family: inherit;
	font-size: 0.8em;
	font-weight: bold;
	cursor: pointer;
	padding: 0.7em 1.2em;
	border: 0;
	background: var( --jcp-btn-bg, #ffb197 );
	color: var( --jcp-btn-text, #000000 );
}

.jcp-signup-button:hover,
.jcp-signup-button:focus {
	color: var( --jcp-btn-text-hover, #555557 );
}

.jcp-signup-button[disabled] {
	opacity: 0.7;
	cursor: default;
}

/* CONSENT FIRST, THEN THE TICK BOXES, THEN THE BUTTON -- the popup's order, and hers. */
.jcp-signup-consent {
	font-size: 0.62em;
	color: var( --jcp-text, #555557 );
	text-align: left;
	display: flex;
	gap: 0.5em;
	margin: 0.2em 0 0;
}

.jcp-signup-consent a {
	color: var( --jcp-link, #4f857b );
}

.jcp-signup-interests-label {
	font-size: 0.7em;
	font-weight: bold;
	text-align: left;
	margin: 0.6em 0 0.25em;
}

/* CENTRED AND EVENLY SPREAD, NEVER PINNED LEFT -- hers, said plainly after I got it wrong three
   times: "Not pinned to the left. 2 rows and narrower on mobile...evenly spread and centered ...3
   rows on desktop evenly spread and centered."

   The columns are sized to their own content and the whole block is centred with
   `justify-content: center`, so there is no wide empty track for the short labels to sit against --
   which is what every earlier version did, `1fr` and `max-content 1fr` alike.

   `grid-auto-flow: column` with an explicit row count means THE ORDER IS THE LAYOUT: three rows on
   a phone puts the first three interests in the left column, two rows on a desktop fills three
   columns in pairs. Re-ordering them in the settings moves them between columns. */
.jcp-signup-interests {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat( 2, auto );
	justify-content: center;
	gap: 0.15em 1.6em;
	font-size: 0.66em;
	text-align: left;
}

/* TWO COLUMNS ON A PHONE, hers, and only possible because the labels got shorter. */
@container jcp-signup ( max-width: 600px ) {
	.jcp-signup-interests {
		grid-template-rows: repeat( 3, auto );
		gap: 0.15em 1.2em;
	}
}

.jcp-signup-interests label {
	display: flex;
	gap: 0.4em;
	align-items: center;
}

/* `.jcp-signup-error` IS STYLED IN jcp-shared.css AND MUST NOT BE RESTATED HERE (v0.3.1000).
 *
 * It used to share this rule with the typo offer below -- 0.65em in ordinary body gray, which is
 * what made the one message standing between a reader and her freebie read as fine print. The
 * warning treatment now lives once, in jcp-shared.css, for all four forms.
 *
 * AND A DECLARATION HERE WOULD WIN. jcp-shared is a DEPENDENCY of this file, and a dependency
 * prints BEFORE its dependent, so at equal specificity anything restated here beats it -- the
 * v0.3.897 lesson, where her saved colours lost to the shipped defaults for exactly this reason.
 * Removing the declarations is the fix, not out-specifying them.
 *
 * The typo offer keeps its own small gray styling on purpose: it is an offer, not a warning. The
 * popup and the gate both say so in their own comments. */
.jcp-signup-fix {
	font-size: 0.65em;
	text-align: left;
	margin: 0.2em 0 0;
	color: var( --jcp-text, #555557 );
}

.jcp-signup-fix button {
	font-family: inherit;
	font-size: 1em;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	color: var( --jcp-link, #4f857b );
}

/* The honeypot. Off-screen rather than `display: none`, which some bots skip. */
.jcp-signup-website {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Once it has been used there is nothing left to ask for. */
.jcp-signup-done .jcp-signup-form,
.jcp-signup-done .jcp-signup-sub {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
 * THE BANNER (v0.3.1003) -- the wide mint box above her footer, brought in-house.
 *
 * IT IS A SHAPE, NOT A COLOUR. `--challenge` is a scheme (yellow instead of peach) and keeps the
 * card's layout; this is the other axis. Folding them together would mean a mint challenge could
 * never exist.
 *
 * Her four notes, each of which cost a render:
 *   "as it's a tall image, it looks best on the side"
 *   "heading should be full width on desktop - same with the button - both should go over / under
 *    the image as well"
 *   "the desktop one is actually full width on my page" -- it is NOT in the article column
 *   "now you agree the button looks rediculously vide right?"
 *
 * THE LAST TWO TOGETHER ARE WHY THE BAND AND THE CONTENT ARE CAPPED DIFFERENTLY. The mint runs the
 * full width of whatever it is dropped into, as the box it replaces does; the CONTENT stops at
 * 900px. That one cap fixes three things at once -- 1230px of coral for two words, fields the same
 * width as the button, and 1100px of running text where a readable measure is about 65 characters.
 *
 * AND THE CAP IS IN PIXELS ON PURPOSE. `em` inside this box resolves against its own 1.2em (24px),
 * not her 20px body, so a 25em cap came out 1200px rather than 1000. Exactly the trap the comment
 * at the top of this file records about 34rem, one unit along.
 * ───────────────────────────────────────────────────────────────────────────────────────────── */
.jcp-signup--banner .jcp-signup-box {
	background: var( --jcp-banner-bg, #daede9 );
	border-color: var( --jcp-banner-border, #bad7d2 );
	/* THE WIDTH OF THE POST PLUS THE SIDEBAR, NOT THE WHOLE WINDOW (v0.3.1010). Hers: "it shouldnt
	   be full width it should be the width of the post + side bar." The element sits in a Kadence
	   row that runs edge to edge, so lifting the card's 27.2em cap let the mint band fill the
	   viewport. 1400px is her GeneratePress container; it is a variable so that if she ever changes
	   the theme's container she can follow it in Simple CSS rather than wait for a release. */
	/* INSET LIKE EVERY OTHER INLINE FORM (v0.3.1013). Hers: "Should be as narrow on mobile as all
	   the other inline forms." A peach card sits inside the post's content container, which her
	   theme gives a 20px gutter; this one is in a Kadence row that runs edge to edge, so it had
	   none and the mint touched both sides of her phone. `margin-inline` rather than padding,
	   so the MINT stops short of the edge rather than the text starting further in. */
	margin-inline: auto;
	max-width: min( var( --jcp-banner-max-width, 1400px ), calc( 100% - 2em ) );
	/* One declaration doing both jobs: 1400px where there is room, and 2em short of the edge where
	   there is not. At an 1880px row that is 1400; on a 390px phone it is 350. */
}

/* BIGGER THAN THE CARD'S, because this box is. Hers: "the grab now and interests font is too
   small." On a 544px card 0.8em and 0.66em sit right; in a 1400px band they read as fine print
   next to 17px fields and a 32px heading. */
.jcp-signup--banner .jcp-signup-button { font-size: 1em; }
.jcp-signup--banner .jcp-signup-interests { font-size: 0.8em; }
.jcp-signup--banner .jcp-signup-interests-label { font-size: 0.8em; }
.jcp-signup--banner .jcp-signup-consent { font-size: 0.7em; }

.jcp-signup--banner .jcp-signup-image {
	width: 100%;
	height: auto;
	display: block;
}

/* The line beside the picture. `text-wrap: balance` for the reason the heading has it, and more so
   here: at full width the sentence had room to break badly and left "Crochet Chart Symbols"
   stranded on a line of its own -- hers, "the second line text is broken up all unbalanced". */
.jcp-signup-blurb {
	margin: 0 0 0.5em;
	text-wrap: balance;
}

/* THE BANNER ASKS ITS OWN BOX, NOT THE WINDOW (v0.3.1005).
 *
 * Her report: the settings preview "looks a bit bad". The preview tile is about 330px wide inside a
 * 1500px admin window, so `@media ( min-width: 601px )` matched and the tile was handed the DESKTOP
 * two-column layout crammed into a third of the room -- the v0.3.738 lesson exactly: a media query
 * measures the WINDOW, a box is sized by its CONTAINER.
 *
 * It is not only about the preview. Dropped into a narrow column the banner should take the narrow
 * arrangement because that is what FITS, whatever the window happens to be, and no media query can
 * know that.
 *
 * THE BASE, OUTSIDE EVERY QUERY, IS THE STACKED ONE. A browser too old for container queries, and
 * anything under 361px, gets the picture above the copy in one column -- cramped but whole. The
 * side-by-side needs about 390px to read, which is a real phone; 330px is narrower than any of
 * them, and that is what the preview tile showed. */

/* STACKED, AND IN A SENSIBLE ORDER. Dissolving the two wrappers here as well makes every piece a
   grid item of the box, so `order` can put the picture straight after the line that describes it
   rather than leaving it stranded below the consent line -- which is where DOM order alone puts it,
   and which is exactly the tile she was looking at when she said the preview looked bad. */
.jcp-signup--banner .jcp-signup-box {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	/* THE FORM'S OWN `gap: 0.5em` IS LOST THE MOMENT IT IS DISSOLVED. `display: contents` removes
	   the box that carried the gap, so the two fields ended up flush against each other -- she
	   spotted it: "is there space between name field and email address?" The spacing has to go back
	   on the pieces: a row-gap wherever the box is the grid, and a margin below where the copy is a
	   block and a gap cannot reach. */
	row-gap: 0.5em;
}
.jcp-signup--banner .jcp-signup-form,
.jcp-signup--banner .jcp-signup-copy { display: contents; }
.jcp-signup--banner .jcp-signup-heading { order: 1; }
.jcp-signup--banner .jcp-signup-blurb   { order: 2; }
.jcp-signup--banner .jcp-signup-image   { order: 3; max-width: 11em; margin: 0 auto 0.6em; }
.jcp-signup--banner .jcp-signup-sub     { order: 4; }
.jcp-signup--banner .jcp-signup-input,
.jcp-signup--banner .jcp-signup-fix,
.jcp-signup--banner .jcp-signup-consent,
.jcp-signup--banner .jcp-signup-interests-label,
.jcp-signup--banner .jcp-signup-interests { order: 5; }
.jcp-signup--banner .jcp-signup-button  { order: 6; }
.jcp-signup--banner .jcp-signup-error   { order: 7; }

@container jcp-signup ( min-width: 601px ) {
	.jcp-signup--banner .jcp-signup-box {
		display: grid;
		/* THE CONTENT CAP IS ON THE COLUMNS, NOT ON PADDING (v0.3.1010).
		 *
		 * It used to be `padding-inline: max(2.2em, calc(50% - 450px))`, and that worked only for as
		 * long as the box filled its parent: a PERCENTAGE in padding resolves against the CONTAINING
		 * BLOCK, not the element. The moment the band was capped at 1400px inside an 1880px row,
		 * 50% became 940 and the padding came out at 490 a side -- 420px of content, measured, with
		 * the copy squeezed into a 178px column.
		 *
		 * Capped tracks say the same thing with no percentage in it: at most 660 + 190 and a 2em
		 * gap, centred, which is the ~900px content this was always meant to be, and it degrades by
		 * shrinking rather than by inverting. */
		grid-template-columns: minmax( 0, 660px ) minmax( 8em, 190px );
		justify-content: center;
		column-gap: 2em;
		row-gap: 0.9em;
		align-items: center;
		padding-left: 2.2em;
		padding-right: 2.2em;
	}
	/* THE FORM IS DISSOLVED, NOT BROKEN UP. The heading has to span the grid and the button has to
	   span it one row lower, and a grid can only place its own children -- but the button must stay
	   inside the form or it cannot submit. `display: contents` gives both: the layout moves, the
	   DOM does not. */
	.jcp-signup--banner .jcp-signup-form { display: contents; }
	/* PUT THE MIDDLE BACK TOGETHER. The stacked base dissolves this wrapper so the picture can be
	   ordered between the blurb and the fields; here it has to be a grid ITEM again, because the
	   rule below places it as one. Without this reset the desktop layout collapses into a single
	   column of stray pieces -- which is what the first render of this change showed. */
	.jcp-signup--banner .jcp-signup-copy { display: block; }
	/* A block, so the box's row-gap does not reach inside it. */
	.jcp-signup--banner .jcp-signup-copy > .jcp-signup-input { margin: 0 0 0.5em; }
	.jcp-signup--banner .jcp-signup-heading { grid-column: 1 / -1; grid-row: 1; }
	/* ONE grid item, not four rows. When the picture spanned the rows instead, grid shared its
	   height between them and opened a gap under the heading wide enough to read as a fault. */
	.jcp-signup--banner .jcp-signup-copy   { grid-column: 1; grid-row: 2; min-width: 0; }
	.jcp-signup--banner .jcp-signup-image  { grid-column: 2; grid-row: 2; }
	.jcp-signup--banner .jcp-signup-button { grid-column: 1 / -1; grid-row: 3; }
}

/* THE PHONE IS A DIFFERENT ARRANGEMENT, NOT A NARROWER ONE. Hers: the picture beside the "Sheets
   included" line ONLY, with the heading, "Grab your copy now", the fields and the button all full
   width. So the copy wrapper is dissolved here too -- the picture has to reach INTO it to sit
   beside the one paragraph it belongs to. */
@container jcp-signup ( min-width: 361px ) and ( max-width: 600px ) {
	.jcp-signup--banner .jcp-signup-box {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) 5.5em;
		column-gap: 0.8em;
		align-items: center;
	}
	.jcp-signup--banner .jcp-signup-form,
	.jcp-signup--banner .jcp-signup-copy { display: contents; }

	/* EVERYTHING SPANS BY DEFAULT, AND ONLY TWO THINGS OPT OUT.
	 *
	 * This used to LIST the full-width children, and the tick boxes and their label were not on the
	 * list -- so they auto-placed into the two columns and the label ended up underneath them. A
	 * rule that has to be extended for every element added later is a rule that will be forgotten,
	 * and the failure is silent: nothing errors, the form still works, it just reads as a mess.
	 *
	 * `> *` has to name the FORM and the COPY, not the box: `display: contents` changes the box
	 * tree, never the DOM tree that selectors walk. */
	.jcp-signup--banner .jcp-signup-form > *,
	.jcp-signup--banner .jcp-signup-copy > * { grid-column: 1 / -1; }

	/* The pair that sits side by side, on one explicit row. Everything else auto-places around it. */
	.jcp-signup--banner .jcp-signup-blurb { grid-column: 1; grid-row: 2; text-align: left; margin: 0; }
	.jcp-signup--banner .jcp-signup-image { grid-column: 2; grid-row: 2; }
	.jcp-signup--banner .jcp-signup-sub    { margin: 0.7em 0 0.5em; }
	.jcp-signup--banner .jcp-signup-button { margin-top: 0.5em; }
}