/* ==========================================================================
   WHNF 2026 Global Competitions — /competition/

   The page's job: let a parent, a temple coordinator or a teenager see within
   one screen which competition is theirs, read only that one's rules, and
   enter. Three competitions carry up to thirteen rules each; stacked at full
   length they buried the entry form under nine thousand pixels.

   SPECIFICITY. This page renders inside Divi's #left-area / .entry-content,
   which ships rules like `.entry-content ul { list-style-type: disc }` at
   (0,1,1) and `#left-area { width: 79.125% }` at (1,0,0). Every rule below
   that has to win one of those is written to out-specify it on purpose:
   doubled classes (0,2,0) beat (0,1,1) because the class column is compared
   first, and `body:has(…) #left-area` at (1,1,1) beats (1,0,0). Nothing here
   reaches for !important except the [hidden] guards, which must beat our own
   display declarations.

   COLOUR. Every ratio in a comment below was computed from the two values as
   shipped, not estimated. #F5A623 is 2.03:1 with white and is therefore never
   used to carry text — #8A5300 (6.33:1 on white, 6.05:1 on ivory) is the warm
   text tone, and gold appears only as a rule, a border or a field behind navy
   (7.13:1).
   ========================================================================== */

.whnf26-comp {
	--c-navy:   #0b2a4d;
	--c-blue:   #1E4DB7;
	--c-deepblue: #173B8C;
	--c-maroon: #8A1B23;   /* the poster's HOLY NAME red, 9.29:1 with white */
	--c-gold:   #F5A623;
	--c-deep:   #8A5300;   /* the readable warm tone: 6.33:1 on white */
	--c-ivory:  #FFF9F0;
	--c-sky:    #E3F2FD;
	--c-ink:    #3F4C5E;   /* body copy, 8.73:1 on white */
	--c-mute:   #5A687C;   /* 5.67:1 on white */
	--c-line:   #E3EAF5;
	--c-line2:  #CFDBEC;

	/* one accent per competition, taken from the poster's three panels */
	--c-drawing: #5B2D8E;  /* 9.50:1 with white */
	--c-video:   #1E4DB7;  /* 7.50:1 with white */
	--c-reel:    #1B6B3A;  /* 6.54:1 with white */

	padding: clamp(40px, 6vw, 76px) 0;
	font-family: 'Open Sans', system-ui, -apple-system, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Host layout. This page is a landing page, not an article: it has no sidebar
   to sit beside, and Divi's 79.125% column left a third of a 1440px screen
   empty with a rule down the middle of it.
   -------------------------------------------------------------------------- */
body:has(.whnf26-comp--hero) #left-area {
	width: 100%;
	padding: 0;
	float: none;
}
body:has(.whnf26-comp--hero) #sidebar { display: none; }
body:has(.whnf26-comp--hero) #main-content .container {
	width: 100%;
	max-width: none;
	padding-top: 0;
	padding-bottom: 0;
}
body:has(.whnf26-comp--hero) #content-area { display: block; }

/* The theme prints the page title immediately above our hero, where it says
   the same words as the banner and the h1 beneath it. One title is enough,
   and ours is the one that is styled — hiding this also leaves the document
   with a single h1 instead of two. */
body:has(.whnf26-comp--hero) .entry-title.main_title { display: none; }

/* wpautop wraps the shortcode's output in a paragraph; the browser closes it
   before our first <section> and leaves empty paragraphs carrying Divi's
   bottom margin at each end. */
body:has(.whnf26-comp--hero) .entry-content > p:empty { display: none; }

/* The entry form lives on its own page now, and that page has no hero — so the
   rules above do not reach it. Divi keeps .container at width:80% at every
   width, including 360px, where that leaves the form 288px minus
   .whnf26-wrap's own 20px gutters: 248px to fill in seven fields on a phone.
   Only the small screens need this; at desktop widths 80% of 1080px is a
   perfectly good column and the form is 820px narrow inside it anyway.

   The theme's page title is deliberately NOT hidden here as it is on
   /competition/ — on this page it is the only h1 — so it gets the gutter the
   container stops supplying. */
@media (max-width: 980px) {
	body:has(.whnf26-comp--enter) #main-content .container { width: 100%; }
	body:has(.whnf26-comp--enter) .entry-title.main_title { padding-left: 20px; padding-right: 20px; }
}
body:has(.whnf26-comp--enter) .entry-content > p:empty { display: none; }
/* Visually hidden, still announced. */
.whnf26-comp .whnf26-comp__vh {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A focus ring that is visible on every ground this page uses. */
.whnf26-comp a:focus-visible,
.whnf26-comp button:focus-visible,
.whnf26-comp summary:focus-visible,
.whnf26-comp input:focus-visible,
.whnf26-comp select:focus-visible,
.whnf26-comp textarea:focus-visible {
	outline: 3px solid var(--c-blue);
	outline-offset: 2px;
	border-radius: 6px;
}
/* ==========================================================================
   Hero
   ========================================================================== */
.whnf26-comp--hero {
	background: linear-gradient(180deg, var(--c-ivory) 0%, #fff 100%);
	text-align: center;
	padding-top: clamp(18px, 3vw, 30px);
	padding-bottom: clamp(28px, 4vw, 46px);
}
.whnf26-comp__banner {
	display: block;
	width: 100%;
	max-width: 880px;
	height: auto;
	border-radius: 14px;
	margin: 0 auto clamp(20px, 3vw, 30px);
	box-shadow: 0 8px 30px rgba(11, 42, 77, .16);
}

/* The banner already carries the kicker, the title and the sub-line, in type
   the designer set. Repeating them underneath printed the same sentence twice
   in one screen. Below 760px the banner's baked-in type is too small to read,
   so there the words come back as real text and the banner steps aside. */
.whnf26-comp .whnf26-comp__title { display: none; }
.whnf26-comp__kicker {
	margin: 0 0 8px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-deep);            /* 6.05:1 on ivory */
}
.whnf26-comp .whnf26-comp__h1 {
	margin: 0 0 10px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(26px, 6.4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--c-navy);            /* 13.81:1 on ivory */
}
.whnf26-comp .whnf26-comp__h1 span {
	display: block;
	color: var(--c-maroon);          /* 8.87:1 on ivory */
}
.whnf26-comp--hero .whnf26-comp__sub {
	margin: 0 auto 20px;
	max-width: 42ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--c-mute);
}

/* --- The deadline. The most consequential fact on the page. -------------- */
.whnf26-comp__deadline {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	margin: 0 auto;
	padding: 14px 26px;
	border-radius: 14px;
	background: var(--c-navy);
	border: 2px solid var(--c-gold);
	text-align: left;
}
.whnf26-comp__deadline-k {
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-gold);            /* 7.13:1 on navy */
}
.whnf26-comp__deadline-d {
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(17px, 2.4vw, 21px);
	font-weight: 700;
	color: #fff;                     /* 14.46:1 on navy */
	line-height: 1.2;
}
.whnf26-comp__deadline-c {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--c-gold);
	color: var(--c-navy);            /* 7.13:1 */
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.whnf26-comp__deadline.is-closed { border-color: #5A687C; }
.whnf26-comp__deadline.is-closed .whnf26-comp__deadline-k { color: #DCEBFB; }
.whnf26-comp__deadline.is-closed .whnf26-comp__deadline-c {
	background: transparent;
	color: #DCEBFB;                  /* 11.92:1 on navy */
	padding-left: 0;
	font-weight: 600;
}

.whnf26-comp__cta { margin: 20px 0 0; }
.whnf26-comp .whnf26-btn { min-height: 44px; }

/* ==========================================================================
   The three cards — the chooser
   ========================================================================== */
.whnf26-comp--cards { background: #fff; padding-top: clamp(34px, 5vw, 58px); }
.whnf26-comp__eyebrow {
	margin: 0 0 6px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-deep);            /* 6.33:1 on white */
}
.whnf26-comp__eyebrow--mid { text-align: center; }

.whnf26-comp--cards .whnf26-comp__lead {
	max-width: 68ch;
	margin: 22px auto 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--c-ink);             /* 8.73:1 */
	text-align: center;
}
.whnf26-comp__pick {
	margin: clamp(26px, 4vw, 38px) 0 14px;
	text-align: center;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-navy);
}

.whnf26-comp__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.whnf26-comp__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px 20px;
	border: 1px solid var(--c-line);
	border-top: 5px solid var(--c-blue);
	border-radius: 14px;
	background: #fff;
	text-decoration: none !important;
	box-shadow: 0 2px 10px rgba(11, 42, 77, .05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.whnf26-comp__card:hover,
.whnf26-comp__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(11, 42, 77, .13);
}
.whnf26-comp__card--drawing { border-top-color: var(--c-drawing); }
.whnf26-comp__card--video   { border-top-color: var(--c-video); }
.whnf26-comp__card--reel    { border-top-color: var(--c-reel); }

.whnf26-comp__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--c-navy);
	color: #fff;                     /* 14.46:1 */
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
}
.whnf26-comp__card--drawing .whnf26-comp__num { background: var(--c-drawing); }
.whnf26-comp__card--video   .whnf26-comp__num { background: var(--c-video); }
.whnf26-comp__card--reel    .whnf26-comp__num { background: var(--c-reel); }

.whnf26-comp__card-t {
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-navy);            /* 14.46:1 */
}
.whnf26-comp__card-w {
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-mute);            /* 5.67:1 */
	flex: 1 1 auto;
}
.whnf26-comp__card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--c-line);
}
.whnf26-comp__fee {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--c-sky);
	color: var(--c-deepblue);        /* 9.01:1 on sky */
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
}
.whnf26-comp__card-go {
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-deepblue);        /* 10.29:1 on white */
}
.whnf26-comp__card-go::after { content: " \203A"; font-weight: 700; }

/* ==========================================================================
   The three competitions — head always visible, long lists folded
   ========================================================================== */
.whnf26-comp--panels {
	background: #FBFCFE;
	border-top: 1px solid var(--c-line);
	padding-top: clamp(30px, 4vw, 48px);
}
.whnf26-comp__panel {
	margin: 0 0 20px;
	border: 1px solid var(--c-line2);
	border-left: 5px solid var(--c-navy);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	/* Land a #c-… link clear of the sticky site header. */
	scroll-margin-top: 96px;
}
.whnf26-comp__panel--drawing { border-left-color: var(--c-drawing); }
.whnf26-comp__panel--video   { border-left-color: var(--c-video); }
.whnf26-comp__panel--reel    { border-left-color: var(--c-reel); }

.whnf26-comp__panel-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 24px 16px;
	background: linear-gradient(180deg, #F7FAFF 0%, #fff 100%);
	border-bottom: 1px solid var(--c-line);
}
.whnf26-comp__panel--drawing .whnf26-comp__panel-head { background: linear-gradient(180deg, #F6F2FB 0%, #fff 100%); }
.whnf26-comp__panel--video   .whnf26-comp__panel-head { background: linear-gradient(180deg, #EEF4FF 0%, #fff 100%); }
.whnf26-comp__panel--reel    .whnf26-comp__panel-head { background: linear-gradient(180deg, #EFF7F1 0%, #fff 100%); }

.whnf26-comp__num--panel { margin-top: 2px; }
.whnf26-comp__panel--drawing .whnf26-comp__num--panel { background: var(--c-drawing); }
.whnf26-comp__panel--video   .whnf26-comp__num--panel { background: var(--c-video); }
.whnf26-comp__panel--reel    .whnf26-comp__num--panel { background: var(--c-reel); }

.whnf26-comp__panel-headt { flex: 1 1 auto; min-width: 0; }
.whnf26-comp .whnf26-comp__panel-t {
	margin: 0 0 4px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(19px, 2.6vw, 24px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-navy);            /* 14.46:1 */
	text-align: left;
}
/* Divi draws a centred gradient rule under every h2; these are card headers. */
.whnf26-comp .whnf26-comp__panel-t::after { content: none; }
.whnf26-comp__panel-who {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--c-mute);            /* 5.67:1 */
}
.whnf26-comp__fee--panel { align-self: flex-start; flex: 0 0 auto; }

.whnf26-comp__panel-body { padding: 18px 24px 22px; }
.whnf26-comp .whnf26-comp__panel-lead {
	margin: 0 0 12px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--c-ink);             /* 8.73:1 */
}
.whnf26-comp .whnf26-comp__theme {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-navy);
}
.whnf26-comp .whnf26-comp__theme--top {
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--c-ivory);
	border-left: 4px solid var(--c-gold);
}
.whnf26-comp .whnf26-comp__theme strong { color: var(--c-deep); }

/* --- The folds ---------------------------------------------------------- */
.whnf26-comp__folds {
	border: 1px solid var(--c-line);
	border-radius: 12px;
	overflow: hidden;
}
.whnf26-comp__fold + .whnf26-comp__fold { border-top: 1px solid var(--c-line); }

.whnf26-comp .whnf26-comp__fold-s {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;              /* comfortably past the 44px target floor */
	padding: 13px 16px;
	background: #F7FAFF;
	cursor: pointer;
	list-style: none;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
}
.whnf26-comp .whnf26-comp__fold-s::-webkit-details-marker { display: none; }
.whnf26-comp .whnf26-comp__fold-s::marker { content: ""; }
.whnf26-comp__fold-s:hover { background: var(--c-sky); }

.whnf26-comp__fold-t {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-navy);            /* 14.46:1 */
}
.whnf26-comp__fold-n {
	flex: 0 0 auto;
	min-width: 24px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--c-line2);
	color: var(--c-mute);            /* 5.67:1 */
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
}
.whnf26-comp__fold-i {
	flex: 0 0 auto;
	width: 10px; height: 10px;
	border-right: 2.5px solid var(--c-deepblue);
	border-bottom: 2.5px solid var(--c-deepblue);
	transform: rotate(45deg);
	transform-origin: 60% 60%;
	transition: transform .18s ease;
}
.whnf26-comp__fold[open] > .whnf26-comp__fold-s { background: var(--c-sky); }
.whnf26-comp__fold[open] > .whnf26-comp__fold-s .whnf26-comp__fold-i { transform: rotate(-135deg); }

.whnf26-comp__fold-b { padding: 6px 18px 20px; }

/* --- Lists inside the folds ---------------------------------------------
   `.entry-content ul` (0,1,1) sets list-style-type:disc and a 1em pad; the
   doubled class below is (0,2,0), which wins on the class column. Before this
   the judging-criteria chips rendered as a bulleted list of pills.
   ------------------------------------------------------------------------ */
.whnf26-comp .whnf26-comp__list {
	margin: 0 0 6px;
	padding: 0 0 0 20px;
	list-style-type: disc;
	line-height: 1.65;
}
.whnf26-comp .whnf26-comp__list li {
	margin: 0 0 8px;
	padding: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--c-ink);             /* 8.73:1 */
}
.whnf26-comp .whnf26-comp__list--rules { counter-reset: whnf26rule; list-style: none; padding-left: 0; }
.whnf26-comp .whnf26-comp__list--rules li {
	counter-increment: whnf26rule;
	position: relative;
	padding: 0 0 0 34px;
	margin-bottom: 11px;
}
.whnf26-comp .whnf26-comp__list--rules li::before {
	content: counter(whnf26rule);
	position: absolute;
	left: 0; top: 1px;
	width: 23px; height: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c-sky);
	color: var(--c-deepblue);        /* 9.01:1 on sky */
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
}

/* Short criteria read better as chips than as another bulleted column. */
.whnf26-comp .whnf26-comp__list--chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0 0 6px;
}
.whnf26-comp .whnf26-comp__list--chips li {
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--c-line2);
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--c-navy);            /* 14.46:1 */
}

.whnf26-comp__cat {
	margin: 0 0 18px;
	padding: 18px 20px;
	background: var(--c-ivory);
	border-left: 4px solid var(--c-gold);
	border-radius: 10px;
}
.whnf26-comp .whnf26-comp__cat-t {
	margin: 0 0 8px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--c-navy);            /* 13.81:1 on ivory */
}
.whnf26-comp .whnf26-comp__cat .whnf26-comp__theme { margin-bottom: 10px; }
.whnf26-comp .whnf26-comp__hint {
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-mute);            /* 5.67:1 */
}
.whnf26-comp .whnf26-comp__cat .whnf26-comp__hint { color: var(--c-deep); } /* 6.05:1 on ivory */

.whnf26-comp .whnf26-comp__ask,
.whnf26-comp .whnf26-comp__note {
	margin: 16px 0 0;
	padding: 14px 18px;
	border-radius: 10px;
	background: var(--c-sky);
	border-left: 4px solid var(--c-blue);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--c-deepblue);        /* 9.01:1 on sky */
}

.whnf26-comp__cta--panel { margin: 20px 0 0; }
.whnf26-comp__cta--panel .whnf26-btn { display: inline-flex; align-items: center; }

/* ==========================================================================
   Prizes — laid out the way the poster lays them out: one first prize, then
   second and third together as "special prizes in each category".
   ========================================================================== */
.whnf26-comp--prizes {
	background: linear-gradient(135deg, var(--c-navy) 0%, #123c69 100%);
	text-align: center;
}
.whnf26-comp__prizegrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 18px;
	margin: clamp(24px, 4vw, 36px) 0 0;
}
.whnf26-comp__prize {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 26px 20px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(245, 166, 35, .32);
}
.whnf26-comp__prize--first { background: rgba(245, 166, 35, .13); border-color: var(--c-gold); }
.whnf26-comp__prize-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px; height: 32px;
	padding: 0 9px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: var(--c-gold);
	color: var(--c-navy);            /* 7.13:1 */
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
}
.whnf26-comp__prize-n--pair i { font-style: normal; opacity: .7; margin: 0 3px; }
.whnf26-comp__prize strong {
	display: block;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(19px, 2.4vw, 26px);
	font-weight: 700;
	color: var(--c-ivory);           /* 13.81:1 on navy */
	line-height: 1.2;
}
.whnf26-comp__prize--first strong { color: var(--c-gold); font-size: clamp(26px, 3.6vw, 38px); } /* 7.13:1 */
.whnf26-comp__prize span:not(.whnf26-comp__prize-n) {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.55;
	color: #DCEBFB;                  /* 11.92:1 on navy */
}
/* The certificates card carries a full sentence, not a two-word label. */
.whnf26-comp__prize--cert strong { font-size: clamp(17px, 2vw, 21px); }
.whnf26-comp__prize--cert span:not(.whnf26-comp__prize-n) { max-width: 32ch; margin-inline: auto; }

/* ==========================================================================
   The poster, for temples to pass on
   ========================================================================== */
.whnf26-comp--share { background: var(--c-ivory); }
.whnf26-comp__share {
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: center;
	gap: clamp(20px, 4vw, 36px);
	padding: clamp(20px, 3vw, 28px);
	background: #fff;
	border: 1px solid var(--c-line2);
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(11, 42, 77, .06);
}
.whnf26-comp__poster {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--c-line2);
}
/* A grid child will not shrink below its content without this, which is how a
   long word in this column pushes the whole page sideways on a phone. */
.whnf26-comp__share-t { min-width: 0; }
.whnf26-comp .whnf26-comp__share-h {
	margin: 0 0 8px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 700;
	color: var(--c-navy);
	text-align: left;
}
.whnf26-comp .whnf26-comp__share-h::after { content: none; }
.whnf26-comp--share p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-ink);             /* 8.73:1 */
}
.whnf26-comp__share-cta { margin: 0 !important; }
.whnf26-comp .whnf26-comp__dl {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 11px 24px;
	background: var(--c-navy);
	color: #fff !important;          /* 14.46:1 */
	border-radius: 999px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-weight: 600;
	text-decoration: none !important;
}
.whnf26-comp .whnf26-comp__dl span {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #DCEBFB;                  /* 11.92:1 on navy */
}
.whnf26-comp .whnf26-comp__dl:hover { background: #123c69; }

/* ==========================================================================
   Closing
   ========================================================================== */
.whnf26-comp--close { background: #fff; text-align: center; }
.whnf26-comp__chant {
	margin: 0 0 10px;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	font-size: clamp(17px, 2.4vw, 24px);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--c-maroon);          /* 9.29:1 on white */
}
.whnf26-comp .whnf26-comp__closing {
	max-width: 60ch;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-ink);             /* 8.73:1 */
}

/* ==========================================================================
   The standing link back to the form
   ========================================================================== */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.whnf26-comp__grid,
	.whnf26-comp__prizegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.whnf26-comp__share { grid-template-columns: 160px 1fr; }
}

@media (max-width: 760px) {
	/* The banner's baked-in type is unreadable at this width; the words it
	   carries come back as real text instead. */
	.whnf26-comp .whnf26-comp__banner { display: none; }
	.whnf26-comp .whnf26-comp__title { display: block; }
	.whnf26-comp--hero { padding-top: clamp(24px, 5vw, 34px); }
}

@media (max-width: 620px) {
	.whnf26-comp__grid,
	.whnf26-comp__prizegrid { grid-template-columns: 1fr; }
	.whnf26-comp__share { grid-template-columns: 1fr; text-align: left; }
	.whnf26-comp__poster { max-width: 220px; }
	.whnf26-comp__deadline { display: flex; width: 100%; }
	.whnf26-comp__panel-head { flex-wrap: wrap; padding: 18px 16px 14px; }
	.whnf26-comp__fee--panel { margin-left: 48px; }
	.whnf26-comp__panel-body { padding: 16px 16px 20px; }
	.whnf26-comp .whnf26-comp__fold-b { padding: 6px 14px 18px; }
}

/* 360–400px is the real floor: most of the phones this page will be opened on
   in India sit at 360 or 390 CSS pixels. Nothing below may scroll sideways. */
@media (max-width: 420px) {
	.whnf26-comp { padding: 30px 0; }
	.whnf26-comp .whnf26-comp__deadline { padding: 12px 16px; gap: 6px 10px; }
	.whnf26-comp__deadline-c { white-space: normal; }
	.whnf26-comp__cta .whnf26-btn,
	.whnf26-comp__cta--panel .whnf26-btn { width: 100%; justify-content: center; text-align: center; }
	.whnf26-comp__panel { border-left-width: 4px; }
	.whnf26-comp__panel-head { padding: 16px 14px 12px; gap: 10px; }
	.whnf26-comp__panel-body { padding: 14px 14px 18px; }
	.whnf26-comp__fee--panel { margin-left: 44px; }
	.whnf26-comp .whnf26-comp__fold-s { padding: 12px 12px; gap: 8px; }
	.whnf26-comp .whnf26-comp__fold-t { font-size: 14.5px; }
	.whnf26-comp .whnf26-comp__fold-b { padding: 6px 12px 16px; }
	.whnf26-comp__cat { padding: 14px 14px; }
	.whnf26-comp .whnf26-comp__list--chips li { font-size: 13px; padding: 6px 12px; }
	.whnf26-comp .whnf26-comp__list--rules li { padding-left: 30px; }
	.whnf26-comp .whnf26-comp__list--rules li::before { width: 21px; height: 21px; font-size: 11.5px; }
	.whnf26-comp__card { padding: 20px 16px 16px; }
	.whnf26-comp__prize { padding: 20px 14px; }
	.whnf26-comp .whnf26-comp__dl { width: 100%; align-items: center; }
}

/* Nothing on this page may push the viewport sideways: the rules contain long
   transliterated words, and the panels sit inside Divi's own grid. */
.whnf26-comp,
.whnf26-comp .whnf26-wrap { max-width: 100%; }
.whnf26-comp img { max-width: 100%; height: auto; }
.whnf26-comp p,
.whnf26-comp li,
.whnf26-comp h1,
.whnf26-comp h2,
.whnf26-comp h3,
.whnf26-comp summary { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
	.whnf26-comp *,
	.whnf26-comp *::before,
	.whnf26-comp *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.whnf26-comp__card:hover,
	.whnf26-comp__card:focus-visible { transform: none; }
}

/* ==========================================================================
   Print — competition.js opens every fold before the dialog appears, so a
   printed page carries all thirteen rules rather than three summaries.
   ========================================================================== */
@media print {
	.whnf26-comp {
		padding: 12pt 0;
		background: none !important;
		color: #000;
	}
	.whnf26-comp--hero,
	.whnf26-comp--prizes,
	.whnf26-comp--panels,
	.whnf26-comp--enter,
	.whnf26-comp--share,
	.whnf26-comp--close { background: none !important; }
	.whnf26-comp .whnf26-comp__title { display: block; }
	.whnf26-comp__banner { max-width: 420px; }
	.whnf26-comp__panel,
	.whnf26-comp__fold { break-inside: avoid; page-break-inside: avoid; }
	.whnf26-comp__panel { border: 1pt solid #999; margin-bottom: 14pt; }
	.whnf26-comp .whnf26-comp__fold-s { background: none !important; min-height: 0; padding: 6pt 0; }
	.whnf26-comp__folds { border: 0; }
	.whnf26-comp .whnf26-comp__list li,
	.whnf26-comp .whnf26-comp__list--chips li { color: #000; }
	.whnf26-comp .whnf26-comp__list--chips { display: block; }
	.whnf26-comp .whnf26-comp__list--chips li {
		display: inline-block;
		border: 0;
		padding: 0 10pt 0 0;
	}
	.whnf26-comp__prize { border: 1pt solid #999; }
	.whnf26-comp__prize strong,
	.whnf26-comp__prize span:not(.whnf26-comp__prize-n) { color: #000 !important; }
	.whnf26-comp__deadline,
	.whnf26-comp__deadline-d { color: #000 !important; background: none !important; border-color: #999; }
	.whnf26-comp__deadline-k,
	.whnf26-comp__deadline-c { color: #000 !important; background: none !important; }
}