/* ==========================================================================
   Marygrove Wordle
   All styles scoped under .marygrove-wordle so nothing leaks onto the host
   page. Mobile-first; the board/keys scale fluidly within a 480px max width.
   ========================================================================== */

/* Host integration: at <=767px Elementor flips its flex Container to
   flex-wrap: wrap (its --flex-wrap-mobile default). On a column-direction
   container that makes the game's tall child wrap into a new column and the
   container collapses its height, so the following footer rides up over the
   keyboard. Force nowrap on the Container (and its boxed inner) that holds the
   game. Scoped via :has() so only the container wrapping the game is affected. */
.e-con:has(.marygrove-wordle),
.e-con:has(.marygrove-wordle) > .e-con-inner {
	flex-wrap: nowrap;
}

.marygrove-wordle {
	/* ---- Brand tokens ---- */
	--mgw-mint: #3DBFA0;
	--mgw-mint-dark: #2a9e82;
	--mgw-mint-darker: #1f7a64;
	--mgw-mint-light: #e6f7f3;
	--mgw-mint-tile: #2a9e82;
	--mgw-charcoal: #1e2a28;
	--mgw-warm: #D4874A;
	--mgw-yellow: #FAC600;
	--mgw-yellow-dark: #e0b200;
	--mgw-absent: #4a5250;
	--mgw-surface: #f4f8f7;
	--mgw-border: #c8dbd8;
	--mgw-muted: #5a7570;

	font-family: 'Nunito', sans-serif;
	max-width: 480px;
	margin: 0 auto;
	padding: 0.75rem 0.75rem 2rem;
	background: transparent;
	box-sizing: border-box;
	/* NOTE: do NOT set position + z-index here. It creates a stacking context on
	   the game root, which traps the fixed end-game overlay inside it — the sticky
	   nav / other elements would then paint over the modal regardless of its high
	   z-index. The footer-overlap issue is handled by flex-wrap:nowrap below. */
}

.marygrove-wordle *,
.marygrove-wordle *::before,
.marygrove-wordle *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Visually hidden but available to screen readers. */
.marygrove-wordle__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ---- Status / message ----------------------------------------------------- */
.marygrove-wordle__message {
	text-align: center;
	min-height: 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mgw-charcoal);
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}

/* ---- Board ---------------------------------------------------------------- */
.marygrove-wordle__board {
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	gap: 5px;
	width: 100%;
	max-width: 300px;
	margin: 0 auto 0.75rem;
}

.marygrove-wordle__row {
	display: grid;
	gap: 5px;
}

/* Shake feedback when a guess isn't in the word list. */
.marygrove-wordle__row--invalid {
	animation: mgw-shake 0.45s;
}

@keyframes mgw-shake {
	10%, 90% { transform: translateX(-2px); }
	20%, 80% { transform: translateX(4px); }
	30%, 50%, 70% { transform: translateX(-7px); }
	40%, 60% { transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
	.marygrove-wordle__row--invalid {
		animation: none;
	}
}

.marygrove-wordle__tile {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	border: 2px solid var(--mgw-border);
	border-radius: 6px;
	color: var(--mgw-charcoal);
	background: #fff;
	transition: transform 0.06s;
	user-select: none;
}

.marygrove-wordle__tile--filled {
	border-color: var(--mgw-mint);
	transform: scale(1.05);
}

.marygrove-wordle__tile--correct {
	background: var(--mgw-mint-tile);
	border-color: var(--mgw-mint-tile);
	color: #fff;
	transform: none;
}

.marygrove-wordle__tile--present {
	background: var(--mgw-warm);
	border-color: var(--mgw-warm);
	color: #fff;
	transform: none;
}

.marygrove-wordle__tile--absent {
	background: var(--mgw-absent);
	border-color: var(--mgw-absent);
	color: #d4dbd9;
	transform: none;
}

/* ---- Hint ----------------------------------------------------------------- */
.marygrove-wordle__hint-row {
	text-align: center;
	margin: 24px 0;
	min-height: 22px;
}

/* Plain mint text link (deliberately not button-like, so it reads differently
   from the on-screen keyboard keys). */
.marygrove-wordle .marygrove-wordle__hint-link {
	font-size: 13px;
	font-family: 'Nunito', sans-serif;
	color: var(--mgw-mint-dark);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.marygrove-wordle .marygrove-wordle__hint-link:hover,
.marygrove-wordle .marygrove-wordle__hint-link:focus {
	/* Override Elementor's button:hover/:focus (it adds a dark background). */
	background: none;
	color: var(--mgw-mint-darker);
}

.marygrove-wordle__hint-link[hidden] {
	display: none;
}

/* Promo-bar style banner revealed in place once the link is clicked. */
.marygrove-wordle__hint-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--mgw-mint);
	border-radius: 7px;
	padding: 8px 14px;
}

.marygrove-wordle__hint-bar[hidden] {
	display: none;
}

/* ---- Keyboard ------------------------------------------------------------- */
/* Each row stretches to the full width; keys flex to split the space evenly so
   the keyboard uses all available room (especially on mobile). */
.marygrove-wordle__keyboard {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: stretch;
	margin-bottom: 1rem;
}

.marygrove-wordle__kb-row {
	display: flex;
	gap: 4px;
	width: 100%;
}

.marygrove-wordle .marygrove-wordle__key {
	flex: 1 1 0;
	height: 46px;
	min-width: 0;
	padding: 0 2px;
	border: 1.5px solid var(--mgw-border);
	border-radius: 6px;
	background: var(--mgw-surface);
	color: var(--mgw-charcoal);
	font-size: 12px;
	font-weight: 700;
	font-family: 'Nunito', sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	transition: transform 0.06s, background 0.12s;
}

.marygrove-wordle .marygrove-wordle__key:active {
	transform: scale(0.93);
}

.marygrove-wordle .marygrove-wordle__key--wide {
	flex: 1.6 1 0;
	font-size: 11px;
}

.marygrove-wordle .marygrove-wordle__key--correct {
	background: var(--mgw-mint-tile);
	border-color: var(--mgw-mint-tile);
	color: #fff;
}

.marygrove-wordle .marygrove-wordle__key--present {
	background: var(--mgw-warm);
	border-color: var(--mgw-warm);
	color: #fff;
}

.marygrove-wordle .marygrove-wordle__key--absent {
	background: var(--mgw-absent);
	border-color: var(--mgw-absent);
	color: #a0b0ae;
}

/* Neutralise Elementor's button:hover / button:focus (dark background). Each
   key keeps its own colour on hover/focus instead of going black. */
.marygrove-wordle .marygrove-wordle__key:hover,
.marygrove-wordle .marygrove-wordle__key:focus {
	background: var(--mgw-surface);
	border-color: var(--mgw-border);
	color: var(--mgw-charcoal);
}

.marygrove-wordle .marygrove-wordle__key--correct:hover,
.marygrove-wordle .marygrove-wordle__key--correct:focus {
	background: var(--mgw-mint-tile);
	border-color: var(--mgw-mint-tile);
	color: #fff;
}

.marygrove-wordle .marygrove-wordle__key--present:hover,
.marygrove-wordle .marygrove-wordle__key--present:focus {
	background: var(--mgw-warm);
	border-color: var(--mgw-warm);
	color: #fff;
}

.marygrove-wordle .marygrove-wordle__key--absent:hover,
.marygrove-wordle .marygrove-wordle__key--absent:focus {
	background: var(--mgw-absent);
	border-color: var(--mgw-absent);
	color: #a0b0ae;
}

/* ---- Prize overlay (modal popup, no close affordance) --------------------- */
.marygrove-wordle__overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	overflow-y: auto;
	background: rgba(15, 26, 24, 0.72);
}

.marygrove-wordle__overlay[hidden] {
	display: none;
}

.marygrove-wordle__modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--mgw-mint-light);
	border: 1.5px solid var(--mgw-mint);
	border-radius: 12px;
	padding: 1.5rem 1.25rem 1.25rem;
	text-align: center;
	text-wrap: balance;
	box-shadow: 0 12px 40px rgba(15, 26, 24, 0.35);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
}

/* Close button — only rendered (via [hidden]) once the entry is submitted. */
.marygrove-wordle .marygrove-wordle__close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 30px;
	height: 30px;
	min-width: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--mgw-charcoal);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
}

.marygrove-wordle .marygrove-wordle__close:hover,
.marygrove-wordle .marygrove-wordle__close:focus {
	background: rgba(0, 0, 0, 0.06);
	color: var(--mgw-mint-dark);
}

.marygrove-wordle__close[hidden] {
	display: none;
}

/* Result preview (emoji grid) + "Copy Your Results" link. */
/* Inline SVG icons (replaces the Tabler icon font). */
.marygrove-wordle__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	vertical-align: -0.15em;
}

.marygrove-wordle__results {
	margin: 2px 0 8px;
}

/* Root-class prefix so these win over theme `pre` styles (which add a background,
   padding and border on the live site). */
.marygrove-wordle .marygrove-wordle__results-grid {
	font-family: inherit;
	font-size: 15px;
	line-height: 1.15;
	letter-spacing: 2px;
	white-space: pre;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	background: transparent;
}

.marygrove-wordle__results-grid:empty {
	display: none;
}

.marygrove-wordle .marygrove-wordle__copy-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: none;
	background: none;
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: var(--mgw-mint-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.marygrove-wordle .marygrove-wordle__copy-link:hover,
.marygrove-wordle .marygrove-wordle__copy-link:focus {
	background: none;
	color: var(--mgw-mint-darker);
}

/* Primary post-submit action: the required National Awning Week signup. */
.marygrove-wordle__referral {
	margin-top: 12px;
	padding: 12px;
	border: 1.5px solid var(--mgw-mint);
	border-radius: 10px;
	background: #fff;
}

.marygrove-wordle__referral[hidden] {
	display: none;
}

.marygrove-wordle__referral-lead {
	font-size: 15px;
	font-weight: 700;
	color: var(--mgw-charcoal);
	margin-bottom: 4px;
}

.marygrove-wordle__referral-text {
	font-size: 12px;
	line-height: 1.45;
	color: var(--mgw-muted);
	margin-bottom: 10px;
}

.marygrove-wordle .marygrove-wordle__referral-btn {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: none;
	border-radius: 8px;
	background: var(--mgw-yellow);
	color: var(--mgw-charcoal);
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s;
}

.marygrove-wordle .marygrove-wordle__referral-btn:hover,
.marygrove-wordle .marygrove-wordle__referral-btn:focus {
	background: var(--mgw-yellow-dark);
	color: var(--mgw-charcoal);
}

.marygrove-wordle__referral-note {
	font-size: 11px;
	line-height: 1.4;
	color: var(--mgw-muted);
	margin-top: 8px;
}

/* Secondary post-submit call-to-action (share for bonus points). */
.marygrove-wordle__done-cta {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--mgw-border);
}

.marygrove-wordle__done-cta[hidden] {
	display: none;
}

.marygrove-wordle__done-prompt {
	font-size: 12px;
	font-weight: 700;
	color: var(--mgw-muted);
	margin-bottom: 8px;
}

/* Root class prefix raises specificity to beat Elementor's `.elementor-kit-425 h3`
   rule (class + element), which otherwise overrides font-size/line-height. */
.marygrove-wordle .marygrove-wordle__prize-title {
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--mgw-charcoal);
	margin-bottom: 8px;
}

.marygrove-wordle__prize-body {
	font-size: 13px;
	color: #3d6560;
	margin-bottom: 12px;
	line-height: 1.55;
	font-weight: 500;
}

.marygrove-wordle__prize-body[hidden] {
	display: none;
}

/* ---- Share buttons -------------------------------------------------------- */
.marygrove-wordle__share-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--mgw-muted);
	margin: 4px 0 2px;
}

.marygrove-wordle__share-row {
	display: flex;
	gap: 6px;
}

/* Base/hover flipped: the resting state uses the mint tint so the buttons blend
   into the modal background (secondary), and they turn solid white on hover. This
   keeps visual emphasis on the primary referral CTA above. */
.marygrove-wordle .marygrove-wordle__share-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 9px 6px;
	border-radius: 7px;
	border: 1.5px solid var(--mgw-mint);
	background: var(--mgw-mint-light);
	color: var(--mgw-charcoal);
	font-size: 12px;
	font-weight: 700;
	font-family: 'Nunito', sans-serif;
	cursor: pointer;
	transition: transform 0.06s, background 0.12s, border-color 0.12s, color 0.12s;
}

.marygrove-wordle .marygrove-wordle__share-btn:hover,
.marygrove-wordle .marygrove-wordle__share-btn:focus {
	background: #fff;
	border-color: var(--mgw-border);
	color: var(--mgw-charcoal);
}

.marygrove-wordle .marygrove-wordle__share-btn:active {
	transform: scale(0.96);
}

.marygrove-wordle__share-note {
	font-size: 11px;
	font-weight: 700;
	color: var(--mgw-mint-dark);
	text-align: center;
	margin-top: 6px;
}

.marygrove-wordle__share-note[hidden] {
	display: none;
}

/* Once a platform is shared: locked-in green "+10 earned" state. */
.marygrove-wordle .marygrove-wordle__share-btn--shared,
.marygrove-wordle .marygrove-wordle__share-btn--shared:hover,
.marygrove-wordle .marygrove-wordle__share-btn--shared:focus {
	background: var(--mgw-mint);
	border-color: var(--mgw-mint);
	color: #fff;
}

/* ---- Entry form ----------------------------------------------------------- */
.marygrove-wordle__entry-form {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.marygrove-wordle__entry-form[hidden] {
	display: none;
}

.marygrove-wordle__entry-form input[type="text"],
.marygrove-wordle__entry-form input[type="email"] {
	width: 100%;
	padding: 9px 12px;
	border-radius: 7px;
	border: 1.5px solid var(--mgw-border);
	background: #fff;
	color: var(--mgw-charcoal);
	font-size: 14px;
	font-family: 'Nunito', sans-serif;
	font-weight: 500;
}

.marygrove-wordle__entry-form input[type="text"]:focus,
.marygrove-wordle__entry-form input[type="email"]:focus {
	outline: none;
	border-color: var(--mgw-mint);
}

.marygrove-wordle .marygrove-wordle__submit-btn {
	padding: 9px;
	border-radius: 7px;
	border: none;
	background: var(--mgw-yellow);
	color: var(--mgw-charcoal);
	font-size: 14px;
	font-weight: 700;
	font-family: 'Nunito', sans-serif;
	cursor: pointer;
	transition: background 0.1s;
}

.marygrove-wordle .marygrove-wordle__submit-btn:hover,
.marygrove-wordle .marygrove-wordle__submit-btn:focus {
	background: var(--mgw-yellow-dark);
	color: var(--mgw-charcoal);
}

.marygrove-wordle__submit-btn {
	margin-top: 4px;
}

/* Consent line — small, left-aligned, just above the submit button. */
.marygrove-wordle__consent {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	text-align: left;
	font-size: 11px;
	line-height: 1.4;
	color: var(--mgw-muted);
	font-weight: 500;
	margin-top: 2px;
}

.marygrove-wordle .marygrove-wordle__consent input[type="checkbox"] {
	width: 15px;
	height: 15px;
	min-width: 15px;
	margin: 1px 0 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--mgw-mint);
}

.marygrove-wordle__consent a {
	color: var(--mgw-mint-dark);
	text-decoration: underline;
}

.marygrove-wordle__confirm-msg {
	font-size: 13px;
	font-weight: 700;
	color: var(--mgw-mint-dark);
	text-align: center;
	margin-top: 6px;
	padding: 4px 8px;
}

.marygrove-wordle__confirm-msg[hidden] {
	display: none;
}

.marygrove-wordle__form-error {
	font-size: 12px;
	font-weight: 700;
	color: #c0392b;
	text-align: center;
	margin-top: 6px;
}

.marygrove-wordle__form-error[hidden] {
	display: none;
}

/* ---- Focus visibility (accessibility) ------------------------------------- */
.marygrove-wordle button:focus-visible,
.marygrove-wordle input:focus-visible {
	outline: 2px solid var(--mgw-mint-dark);
	outline-offset: 2px;
}