/* ICGC Forms — the builder and the forms it makes.
 *
 * Deliberately small. The site's design system already owns type, colour and
 * the buttons (mem-btn), and adinkra.css is the most contested file in the
 * repository — more than one session edits it, so a feature that can style
 * itself from its own file should. Everything here is scoped to .frm or
 * .frm-manage and cannot reach another page.
 *
 * The body rule in adinkra.css beats a single-class font-size on any <p> inside
 * an ad-sec page, so nothing here tries to set one; sizes that must hold are set
 * on the element itself rather than on a wrapper.
 */

.frm,
.frm-manage {
	/* Centred wherever it is put, and read from the left.
	 *
	 * This lived under .ad-formpage — the class the GENERATED form pages carry —
	 * so it never reached the Forms screen itself, which carries .ad-forms. The
	 * block sat hard left in a wide column and looked like a layout bug, because
	 * it was one. A max-width with auto margins is the right default anywhere a
	 * form appears, so it belongs on the block and not on a page. */
	margin-inline: auto;
	text-align: left;
	--frm-rule:  #C9CCC2;
	--frm-ink:   #3A3226;
	--frm-dim:   #6E6656;
	--frm-gold:  #9A6B1F;
	--frm-bad:   #8A2B20;
	--frm-ok:    #2F5D3A;
	max-width: 46rem;
}

/* ---- fields ---- */

.frm-field {
	margin: 0 0 22px;
}

.frm-label {
	display: block;
	font-weight: 600;
	color: var(--frm-ink);
	margin: 0 0 6px;
}

.frm-help {
	color: var(--frm-dim);
	margin: 0 0 8px;
	font-size: 15px;
}

/* The required marker is decoration: the word "required" is not carried by a
   colour or a glyph alone, because the input's own `required` attribute is what
   a screen reader announces. This is for people scanning the page. */
.frm-req {
	color: var(--frm-gold);
	margin-left: 3px;
}

.frm input[type="text"],
.frm input[type="email"],
.frm input[type="tel"],
.frm input[type="number"],
.frm input[type="date"],
.frm select,
.frm textarea,
.frm-manage input[type="text"],
.frm-manage input[type="email"],
.frm-manage select,
.frm-manage textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;      /* Divi columns are content-box; this must not be */
	padding: 10px 12px;
	border: 1px solid var(--frm-rule);
	border-radius: 2px;
	background: #fff;
	color: var(--frm-ink);
	font: inherit;
}

.frm textarea,
.frm-manage textarea {
	resize: vertical;
	min-height: 6em;
}

.frm :focus-visible,
.frm-manage :focus-visible {
	outline: 2px solid var(--frm-gold);
	outline-offset: 2px;
}

/* ---- choices ---- */

.frm-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	cursor: pointer;
}

.frm-choice input {
	/* 20px, and a matching hit area below, because these are tapped as often as
	   they are clicked. */
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex: 0 0 auto;
}

@media (pointer: coarse) {
	.frm-choice {
		min-height: 44px;
		align-items: center;
	}
}

/* ---- the honeypot ----
 *
 * Off-screen rather than display:none. A bot that reads CSS skips a hidden
 * field; one that fills every input it finds walks into this. aria-hidden and
 * tabindex="-1" keep it away from anybody real. */
.frm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- messages ---- */

.frm-ok,
.frm-bad,
.frm-note {
	padding: 12px 14px;
	border-left: 3px solid var(--frm-rule);
	margin: 0 0 18px;
}

.frm-ok  { border-left-color: var(--frm-ok);  background: rgba(47, 93, 58, .06); }
.frm-bad { border-left-color: var(--frm-bad); background: rgba(138, 43, 32, .06); }

.frm-note { color: var(--frm-dim); }

/* ---- the manage screen ---- */

/* The design system centres headings inside an ad-sec. Right for a landing
   band, wrong here: a centred "Your Forms" floating over a left-aligned table
   reads as two blocks that were never meant to sit together. */
.frm-manage .frm-h,
.frm-manage .frm-h4,
.frm-manage p,
.frm-manage label {
	text-align: left;
}

.frm-h    { margin: 28px 0 10px; }
.frm-h4   { margin: 30px 0 10px; }
.frm-rule { border: 0; border-top: 1px solid var(--frm-rule); margin: 34px 0 0; }

.frm-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
}

.frm-table th,
.frm-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--frm-rule);
	vertical-align: top;
}

.frm-table th {
	font-weight: 600;
	color: var(--frm-dim);
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* A response table can be wider than the page. It scrolls inside itself rather
   than giving the whole page a horizontal scrollbar. */
.frm-responses {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.frm-edit {
	border: 1px solid var(--frm-rule);
	border-radius: 2px;
	padding: 16px 18px;
	margin: 0 0 16px;
	background: rgba(255, 255, 255, .5);
}

.frm-edit-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.frm-num  { font-weight: 700; color: var(--frm-gold); }
.frm-type { color: var(--frm-dim); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }

.frm-move {
	margin-left: auto;
	display: flex;
	gap: 4px;
}

.frm-inline { display: inline; }

.frm-move-btn {
	width: 34px;
	height: 34px;
	border: 1px solid var(--frm-rule);
	background: #fff;
	color: var(--frm-ink);
	border-radius: 2px;
	cursor: pointer;
	line-height: 1;
}

@media (pointer: coarse) {
	.frm-move-btn { width: 44px; height: 44px; }
}

/* A disabled control has to stay legible. --frm-rule measures about 1.25:1
   against white, so a button greyed to it vanishes and reads as a broken page —
   the mistake this site already made once with --so-rule. */
.frm-move-btn[disabled] {
	color: var(--frm-dim);
	opacity: .55;
	cursor: default;
}

.frm-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	cursor: pointer;
}

.frm-check input { width: 18px; height: 18px; }

.frm-danger {
	background: none;
	border: 0;
	color: var(--frm-bad);
	cursor: pointer;
	padding: 6px 0;
	font: inherit;
	text-decoration: underline;
}

.frm-submit { margin-top: 8px; }

.frm-manage code {
	background: rgba(0, 0, 0, .05);
	padding: 2px 6px;
	border-radius: 2px;
}

/* ---- conditional questions, in the builder ---- */

.frm-cond {
	border: 1px solid var(--frm-rule);
	border-radius: 2px;
	padding: 12px 14px;
	margin: 0 0 14px;
}

.frm-cond legend {
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--frm-dim);
	padding: 0 6px;
}

/* Three selects on one line where there is room, stacked where there is not.
   They read as a sentence — "Coming? / is / Yes" — so they should sit together
   when the width allows it. */
.frm-cond select {
	width: auto;
	min-width: 8rem;
	max-width: 100%;
	margin: 0 6px 8px 0;
}

.frm-size {
	color: var(--frm-dim);
	font-size: 14px;
	white-space: nowrap;
}

.frm-link {
	word-break: break-all;   /* a long address must not push the page sideways */
}

/* A question hidden by its condition is hidden outright rather than dimmed.
   `hidden` is set by the script; this makes sure a stylesheet elsewhere on the
   page cannot override the attribute's default display:none. */
.frm-field[hidden] {
	display: none !important;
}

/* ==========================================================================
   The generated form page

   Centred as a block, read from the left. The design system centres headings
   inside an ad-sec by default, which is right for a landing section and wrong
   for a form: a label centred over a left-aligned input reads as a mistake, and
   a column of questions that each start in a different place is hard to scan.

   Scoped to .ad-formpage — the class only the generated page carries — so a
   form dropped into some other page with its own layout keeps that page's.
   ========================================================================== */

/* The heading lines up with the questions beneath it rather than floating over
   their middle. Same column, same left edge. */
.ad-formpage .ad-hero-title h1{
	max-width: 46rem;
	margin-inline: auto;
	text-align: left;
}

/* The same thing once the page is off Divi. Two classes, not one, because
   `.icgc-page h1` centres every heading in a migrated section and forms.css is
   not guaranteed to load after adinkra.css - a one-class rule here would win
   or lose depending on enqueue order, which is not a thing to leave to chance.
   /youth-takeover-feedback/ measured the loss: its heading went from 736px and
   left-aligned to the full 1152px, centred. */
.ad-formpage.icgc-page h1,
.ad-formpage.icgc-page .icgc-page-lede {
	max-width: 46rem;
	margin-inline: auto;
	text-align: left;
}

/* ==========================================================================
   The card at the foot of Connect

   A FOURTH CARD IN THE SAME ROW, not a block underneath it. The chrome is
   copied here with explicit values rather than added to the rule in
   testimony.css that dresses the Bible class and testimony cards - which is the
   precedent announce.css set when it became the third, and for the reason
   icgc-recordings-access.php gives about grants: a rule this feature needs,
   living in a file another feature owns, disappears the next time that file is
   deployed from a stale copy. The values are that file's, measured rather than
   guessed: 34/30/30 padding, a 1px rule, 15px eyebrow, 34px title, 18px lede,
   16px button.
   ========================================================================== */

/* Four cards need a little less each than three.
 *
 * The grid is repeat(auto-fit, minmax(300px, 1fr)) with a 22px gap, which fits
 * exactly three in the 1180px row and sends a fourth onto its own line. Rather
 * than change that rule - it belongs to the pair that came first, and three is
 * still the usual number - this tightens the track only on a row that actually
 * contains a form card. When no form is open the row is untouched.
 *
 * :has() is doing real work here; a browser without it simply keeps the old
 * measure and wraps, which is what happens today anyway. */


/* ONE ROW, HOWEVER MANY CARDS THERE ARE.        (8 September 2026)
 *
 * The minimum above decides the count, and 260px in an 1180px row means four:
 * a fifth card wraps onto a line of its own and reads as an afterthought
 * rather than as one of the invitations. The number is not fixed, either -
 * cards come and go as a class starts, a form opens, an announcement window
 * closes - so raising the minimum to fit five would simply move the problem to
 * six.
 *
 * grid-auto-flow: column lays every card on one track apiece regardless of how
 * many there are, and minmax(0, 1fr) lets them share the row evenly. The 0 is
 * load-bearing: a bare 1fr floors at the content's min-content width, and a
 * long unbroken heading would then push the row wider than the page.
 *
 * Desktop only. Below Divi's 980px breakpoint the cards go back to wrapping,
 * because five 200px columns on a phone is not a row, it is a queue. A closed
 * <dialog> among the children is display:none and takes no track; an open one
 * is in the top layer and out of flow. */
@media (min-width: 981px) {
	

	/* FIVE CARDS NEED A WIDER ROW AND SMALLER TYPE THAN FOUR DID.
	 *
	 * One row was the easy half. At the site's usual 1180px measure five cards
	 * are 220px each, and a 34px display title inside 30px of side padding has
	 * 160px to wrap in - so "The New Believers Class Is In Session" came out
	 * five lines deep, the tallest card set the row, and every other card grew
	 * a hole in the middle to match it. The cards were not too tall; the type
	 * was too big for the column it had been put in.
	 *
	 * Three changes, and all three are needed - widening alone still wraps, and
	 * shrinking alone leaves the cards mean and narrow:
	 *
	 *   the row goes to 1400px, which is wider than the 1180px measure the rest
	 *     of the site keeps. Deliberate: a row of invitation cards is a band of
	 *     controls, not a column of prose, and the 1180px cap exists for reading
	 *     line length. Nothing else on the page moves.
	 *   the titles drop to 24px, the site's --t-h4, which is what a 250px column
	 *     can hold in two or three lines instead of five.
	 *   the padding comes in to 22px a side, returning 16px of text width per
	 *     card that the border was eating.
	 *
	 * Scoped to the invitations row and to desktop. Below 980px the cards wrap
	 * and get their full-size type back, because there they have the width. */
	

	.ad-contact-invites .ad-invites .frm.frm-cta,
	.ad-contact-invites .ad-invites .tst.tst-cta,
	.ad-contact-invites .ad-invites .ann.ann-cta,
	.ad-contact-invites .ad-invites .abc.abc-cta {
		padding: 26px 22px 24px;
	}

	.ad-contact-invites .ad-invites .frm.frm .frm-cta-title,
	.ad-contact-invites .ad-invites .tst.tst .tst-cta-title,
	.ad-contact-invites .ad-invites .ann.ann .ann-cta-title,
	.ad-contact-invites .ad-invites .abc.abc .abc-cta-title {
		font-size: var(--t-h4, 24px);
		line-height: 1.1;
		letter-spacing: -0.01em;
	}

	/* The eyebrow carried 25px of space beneath a 15px label, which reads as a
	   gap rather than as a label attached to its heading. */
	.ad-contact-invites .ad-invites .frm .frm-cta-eyebrow,
	.ad-contact-invites .ad-invites .tst .tst-cta-eyebrow,
	.ad-contact-invites .ad-invites .ann .ann-cta-eyebrow,
	.ad-contact-invites .ad-invites .abc .abc-cta-eyebrow {
		font-size: 13px;
		letter-spacing: .12em;
		padding-bottom: 6px;
		margin-bottom: 6px;
	}
}

.frm.frm-cta {
	display: flex;
	flex-direction: column;
	text-align: center;
	background: var(--a-surface, var(--ad-surface, #fff));
	border: 1px solid var(--a-rule, var(--ad-rule, rgba(0, 0, 0, .12)));
	/* Square, like the Bible class and testimony cards beside it. announce.css
	   rounds its own by 3px and is the odd one of the three; matching it would
	   have made two rounded cards and two square ones in the same row. */
	border-radius: 0;
	padding: 34px 30px 30px;
	box-sizing: border-box;   /* Divi columns are content-box; a card must not be */
	margin: 0;                /* the grid owns the spacing, not the card */
}

.frm .frm-cta-eyebrow {
	font-family: var(--a-disp, var(--ad-display, Futura, sans-serif));
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--a-gold, var(--ad-gold, #9A6B1F));
	margin: 0 0 10px;
	padding-bottom: 15px;
	max-width: none;
	margin-inline: 0;
}

.frm .frm-cta-title {
	font-family: var(--a-disp, var(--ad-display, Futura, sans-serif));
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--a-ink, var(--ad-text, #3A3226));
	margin: 0 0 12px;
	text-wrap: balance;
}

.frm .frm-cta-lede {
	font-family: var(--a-body, var(--ad-body, Georgia, serif));
	font-size: 18px;
	line-height: 1.6;
	color: var(--a-muted, var(--ad-text2, #6E6656));
	margin: 0 0 18px;
	max-width: 62ch;
	margin-inline: auto;
}

/* Pushed to the foot, so every button in the row lands on one line however tall
   the middle of each card grows. Without it the buttons follow the text and the
   row has four buttons at four heights. */
.frm .frm-cta-go {
	margin: auto 0 0;
}

/* The Bible class and testimony buttons, measured rather than approximated.
 *
 * A first pass had no border and white text, which looked close and was not:
 * the 2px border is 4px of height, so this button finished 72px tall beside
 * their 76px and sat a visible step higher in the row. Both are matched here -
 * a solid border in the same gold as the fill, and near-black text on it, which
 * is what those two actually compute to. */
.frm .frm-cta-btn {
	display: inline-block;
	box-sizing: border-box;   /* min-height on a content box is height ON TOP of padding */
	font-family: var(--a-disp, var(--ad-display, Futura, sans-serif));
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	background: var(--ad-gold, #A87524);
	border: 2px solid var(--ad-gold, #A87524);
	color: #14100C;
	padding: 15px 30px;
	min-height: 44px;
	text-decoration: none;
}

.frm .frm-cta-btn:hover,
.frm .frm-cta-btn:focus-visible {
	background: transparent;
	color: var(--ad-text, #14100C);
}

@media (max-width: 700px) {
	.frm.frm-cta { padding: 26px 20px 24px; }
}

/* ==========================================================================
   THE INVITES ROW ONCE /contact/ CAME OFF DIVI
   --------------------------------------------------------------------------
   The cards at the foot of Connect were laid out on .et_pb_code_inner. A code
   module is now one <div class="icgc-page-body">, and the module's own class
   sits on it rather than above it.
   ========================================================================== */
.ad-contact-invites .ad-invites.icgc-page-body:has(.frm-cta) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
@media (min-width: 981px) {
  .ad-contact-invites .ad-invites.icgc-page-body:has(.frm-cta) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
  .ad-contact-invites .icgc-page-inner { max-width: 1400px; width: 94%; }
}
.ad-contact-invites .ad-invites.icgc-page-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }