/* ==========================================================================
   WHNF 2026 Global Competitions — the entry form and the entry fee.

   Written after the form itself, which was the bug: the markup shipped with no
   styles at all, so the honeypot field was on show to real visitors and every
   control fell back to Divi's defaults.

   Someone is paying an entry fee at the end of this, so the form has to feel
   deliberate: one decision per step, the fee visible where the choice is made,
   and nothing hidden that a person needs to see.

   ONE DESIGN. The form is not a separate thing bolted to the end of the page —
   it inherits the page's tokens (--c-navy, --c-gold, --c-sky …) declared on
   .whnf26-comp in competition.css, and repeats its card shape: 14–16px radius,
   1px #E3EAF5 hairline, the same navy headings and the same Poppins. Every
   fallback below is the literal value of that token, so this file still reads
   correctly if it is ever loaded on its own.

   MOBILE FIRST. The single-column layouts below are the default and the
   multi-column grids are the enhancement, because most of the people entering
   this competition will do it on a 360px or 390px phone. Every ratio in a
   comment was computed from the two values as shipped.
   ========================================================================== */

.whnf26-comp--enter {
	background: linear-gradient(180deg, #fff 0%, var(--c-ivory, #FFF9F0) 100%);
	scroll-margin-top: 90px;          /* the fixed header must not cover the heading */
}

/* THE BUG THIS FILE EXISTS FOR. The honeypot is bait for bots and must never
   be seen or reachable by a person — but it must stay in the accessibility
   tree's blind spot rather than be display:none, which some bots detect. */
.whnf26-comp__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* The conditional fieldsets and the Harināma date are toggled with the hidden
   attribute by competition.js. An author `display` declaration outranks the
   user-agent [hidden] rule whatever its specificity, so anything here that
   sets display has to say so again — without this the drawing fields and the
   Harināma date appear for the wrong competition. */
.whnf26-comp__fs[hidden],
.whnf26-comp__f[hidden],
.whnf26-comp__choice[hidden] { display: none !important; }

/* --- Shell ---------------------------------------------------------------- */
.whnf26-comp__form {
	margin-top: clamp(22px, 3vw, 32px);
	padding: clamp(18px, 3.4vw, 34px);
	background: #fff;
	border: 1px solid var(--c-line, #E3EAF5);
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(11, 42, 77, .06);
}

.whnf26-comp__fs {
	margin: 0 0 26px;
	padding: 22px 0 0;
	border: 0;
	border-top: 1px solid #EDF2F9;
	min-width: 0;                     /* a fieldset will not shrink below its content without this */
}
.whnf26-comp__fs:first-of-type { border-top: 0; padding-top: 0; }
.whnf26-comp__fs > legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 14px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--c-navy, #0b2a4d);    /* 14.46:1 on white */
}

/* --- Step 1: choosing the competition, with the fee at the point of choice - */
.whnf26-comp__choices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.whnf26-comp__choice {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: start;
	column-gap: 12px;
	row-gap: 4px;
	padding: 15px 16px;
	border: 2px solid var(--c-line, #E3EAF5);
	border-radius: 12px;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s ease, background .15s ease;
}
.whnf26-comp__choice input {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 20px; height: 20px;
	margin: 2px 0 0;
	accent-color: var(--c-blue, #1E4DB7);
	cursor: pointer;
}
.whnf26-comp__choice-t {
	grid-column: 2;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: var(--c-navy, #0b2a4d);    /* 14.46:1 */
}
.whnf26-comp__choice-f {
	grid-column: 2;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: #173B8C;                   /* 10.29:1 on white */
}
.whnf26-comp__choice:hover { border-color: #B9D4F2; background: #F7FAFF; }
/* :has is well supported now; the fallback is simply a less obvious selection,
   never an unusable form. */
.whnf26-comp__choice:has(input:checked) { border-color: var(--c-blue, #1E4DB7); background: #F2F7FF; }
.whnf26-comp__choice:has(input:focus-visible) { outline: 3px solid var(--c-blue, #1E4DB7); outline-offset: 2px; }

/* --- Fields --------------------------------------------------------------- */
.whnf26-comp__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-bottom: 0;
}
.whnf26-comp__f { display: block; margin-bottom: 16px; }
/* Spans the whole row wherever one of these is dropped inside a __row grid. */
.whnf26-comp__f--full { grid-column: 1 / -1; }
.whnf26-comp__f > span {
	display: block;
	margin-bottom: 6px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-navy, #0b2a4d);
}
/* The <em> carries either the required asterisk or a parenthetical note, and
   nothing in the markup tells them apart — so both read as quiet annotation
   rather than dressing "(if applicable)" up as an error colour. */
.whnf26-comp__f > span em { font-style: normal; font-weight: 500; color: #5A687C; }  /* 5.67:1 */
.whnf26-comp__f small {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.55;
	color: #5A687C;                   /* 5.67:1 on white */
}

/* Divi styles bare inputs; these declarations are scoped tightly enough to win. */
.whnf26-comp__form input[type="text"],
.whnf26-comp__form input[type="email"],
.whnf26-comp__form input[type="tel"],
.whnf26-comp__form input[type="url"],
.whnf26-comp__form input[type="date"],
.whnf26-comp__form input[type="number"],
.whnf26-comp__form input[type="file"],
.whnf26-comp__form select {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;                 /* past the 44px target floor */
	padding: 12px 14px;
	box-sizing: border-box;
	border: 1px solid #CFDAEB;
	border-radius: 10px;
	background: #FBFDFF;
	font-family: inherit;
	font-size: 16px;                  /* 16px everywhere stops iOS zooming on focus */
	line-height: 1.4;
	color: var(--c-navy, #0b2a4d);    /* 14.18:1 on the field ground */
	transition: border-color .15s ease, box-shadow .15s ease;
}
.whnf26-comp__form input::placeholder { color: #5A687C; opacity: 1; }  /* 5.56:1 */
.whnf26-comp__form input:hover,
.whnf26-comp__form select:hover { border-color: #B9D4F2; }
.whnf26-comp__form input:focus,
.whnf26-comp__form select:focus {
	outline: 3px solid var(--c-blue, #1E4DB7);
	outline-offset: 1px;
	border-color: var(--c-blue, #1E4DB7);
	background: #fff;
}
/* The artwork upload is a drop target, not a text box. */
.whnf26-comp__form input[type="file"] {
	padding: 12px;
	background: #fff;
	border-style: dashed;
	border-width: 2px;
	cursor: pointer;
}
.whnf26-comp__form input[type="file"]:hover { border-color: var(--c-blue, #1E4DB7); background: #F7FAFF; }

/* --- Declaration ---------------------------------------------------------- */
.whnf26-comp__check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	background: #F7FAFF;
	border: 1px solid var(--c-line, #E3EAF5);
	border-radius: 12px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #3F4C5E;                   /* 8.34:1 on #F7FAFF */
	cursor: pointer;
}
.whnf26-comp__check input {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	margin: 1px 0 0;
	accent-color: var(--c-blue, #1E4DB7);
	cursor: pointer;
}
.whnf26-comp__check:has(input:focus-visible) { outline: 3px solid var(--c-blue, #1E4DB7); outline-offset: 2px; }

/* --- The fee, restated where the decision is finally made ----------------- */
.whnf26-comp__pay {
	margin-top: 8px;
	padding: 20px;
	border: 1px solid #EADFCE;
	border-radius: 14px;
	background: var(--c-ivory, #FFF9F0);
}
.whnf26-comp__paysum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #EADFCE;
}
.whnf26-comp__paysum-k {
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8A5300;                   /* 6.05:1 on ivory */
}
.whnf26-comp__paysum-v {
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(18px, 2.4vw, 24px);
	font-weight: 700;
	color: var(--c-navy, #0b2a4d);    /* 13.81:1 on ivory */
}

.whnf26-comp__submitrow { margin: 0; }
.whnf26-comp__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	padding: 14px 28px;
	border: 0;
	cursor: pointer;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	color: #fff;                      /* 7.50:1 on Divine Blue */
}
.whnf26-comp__feenote { font-weight: 700; }
.whnf26-comp__finenote {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #3F4C5E;                   /* 8.34:1 on ivory */
}
.whnf26-comp__lock { flex: 0 0 auto; }

/* --- Messages ------------------------------------------------------------- */
.whnf26-comp__flash {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.6;
}
.whnf26-comp__flash--ok  { background: #EAF7EF; border-left: 4px solid #146c43; color: #0F5132; }  /* 8.49:1 */
.whnf26-comp__flash--bad { background: #FDF1EC; border-left: 4px solid #c2410c; color: #8A2F08; }  /* 7.62:1 */
.whnf26-comp__closed {
	padding: 18px 20px;
	background: #F1F5F9;
	border-radius: 12px;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3F4C5E;
}

/* ==========================================================================
   The entry fee — Razorpay
   Shown after an entry is saved. It is the last thing between a person and a
   confirmed entry, so it sits above the form and is the loudest thing here.
   It deliberately carries no name, no email, no phone and no age: the drawing
   competition's entrants are schoolchildren.
   ========================================================================== */
.whnf26-pay {
	margin: 0 0 26px;
	padding: clamp(18px, 2.6vw, 26px);
	background: #F2F7FF;
	border: 1px solid #C7DCF7;
	border-left: 4px solid var(--c-blue, #1E4DB7);
	border-radius: 14px;
}
.whnf26-pay__lead {
	margin: 0 0 16px;
	font-size: 15.5px;
	line-height: 1.65;
	color: #23324a;                   /* 12.00:1 on the panel */
}
.whnf26-pay__lead strong { color: var(--c-navy, #0b2a4d); }  /* 13.44:1 */
.whnf26-pay__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

/* The single most important button on the page once an entry exists. It is
   deeper and larger than the page's other calls to action and it is the only
   one that carries a gold ring, so it cannot be mistaken for one of them. */
.whnf26-pay__go {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 16px 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--c-blue, #1E4DB7) 0%, #123c69 100%);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, .55), 0 8px 22px rgba(11, 42, 77, .24);
	color: #fff !important;           /* 7.50:1 at the lightest end of the gradient */
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.whnf26-pay__go:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, .8), 0 12px 28px rgba(11, 42, 77, .3);
}
.whnf26-pay__go:focus-visible { outline: 3px solid var(--c-navy, #0b2a4d); outline-offset: 4px; }
.whnf26-pay__go.is-busy { opacity: .6; cursor: progress; transform: none; }
.whnf26-pay__fee {
	flex: 1 1 100%;
	font-size: 14px;
	line-height: 1.55;
	color: #3F4C5E;                   /* 8.11:1 on the panel */
}

.whnf26-pay__msg { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; font-weight: 600; }
.whnf26-pay__msg:empty { display: none; }
.whnf26-pay__msg.is-ok  { color: #0F5132; }   /* 9.36:1 */
.whnf26-pay__msg.is-bad { color: #8A2F08; }   /* 8.43:1 */

.whnf26-pay__test {
	margin: 16px 0 0;
	padding: 10px 14px;
	background: #FFF7E6;
	border: 1px dashed #E0B354;
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #5C4408;                   /* 8.62:1 on the amber */
	overflow-wrap: break-word;
}

.whnf26-pay--done { background: #EAF7EF; border-color: #A9D9BF; border-left-color: #146c43; }
.whnf26-pay--done p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #0F5132; }  /* 8.49:1 */
.whnf26-pay--off  { background: #F1F5F9; border-color: #D5DEE9; border-left-color: #5A687C; }
.whnf26-pay--off p { margin: 0; font-size: 15px; line-height: 1.65; color: #3F4C5E; }

/* --- Back to the rules ----------------------------------------------------
   The form has its own page now, so it needs its own way home. A 48px tap
   target, left-aligned under the form, never dressed as a call to action —
   the call to action is the submit button above it. */
.whnf26-comp__backrow { margin: 22px 0 0; }
.whnf26-comp__back {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 4px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #173B8C;                   /* 10.29:1 on white */
	text-decoration: underline;
	text-underline-offset: 3px;
}
.whnf26-comp__back:hover,
.whnf26-comp__back:focus-visible { color: var(--c-navy, #0b2a4d); }
/* Nothing in the form may push the viewport sideways at 320px. */
.whnf26-comp__form,
.whnf26-comp__form * { min-width: 0; max-width: 100%; }
.whnf26-comp__form label,
.whnf26-pay p { overflow-wrap: break-word; }

/* ==========================================================================
   Wider screens — the enhancement, not the default
   ========================================================================== */
@media (min-width: 620px) {
	.whnf26-comp__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 16px;
	}
	.whnf26-comp__submit { width: auto; }
	.whnf26-pay__go { width: auto; flex: 0 0 auto; }
	.whnf26-pay__fee { flex: 1 1 auto; }
}

@media (min-width: 780px) {
	.whnf26-comp__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.whnf26-comp__choice {
		grid-template-columns: 20px 1fr;
		padding: 16px 16px 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.whnf26-comp__choice,
	.whnf26-comp__form input,
	.whnf26-comp__form select,
	.whnf26-pay__go { transition: none; }
	.whnf26-pay__go:hover { transform: none; }
}

@media print {
	.whnf26-pay,
	.whnf26-comp__form { box-shadow: none; }
	.whnf26-pay__go,
	.whnf26-comp__submit { display: none !important; }
}