/**!
 * @file    Crossword.css  (students)
 * @desc    Styling for the student word games page (esl_wordGames.php) — the
 *          crossword grid, clue columns, and toolbar. Light theme, student brand
 *          green (var(--brand) / var(--brand-dark)). The grid sizes off a single --wg-cell
 *          custom property so it scales down on phones; the grid wrap scrolls
 *          horizontally if a puzzle is wider than the viewport.
 * @version v6 2026-08-18 - Initial version.
 * @author  Charlie Samra
 * @see     esl_wordGames.php, Crossword.js
 */

/* sw_common.css paints the whole body brand-green (var(--brand-dark) !important) as the
   site chrome colour. Content pages sit on a light surface over it — do the same
   here, then layer the puzzle + clues as white cards for depth. */
body.word-games { background-color: #eef2ef !important; }

.wg-page {
	--wg-cell: 34px;
	max-width: 1040px;
	margin: 0 auto;
	padding: 22px 18px 60px;
	overflow-x: hidden;   /* belt-and-suspenders against any child bleed */
}

/* ---- Hero ---- */
.wg-hero { margin-bottom: 16px; }
.wg-hero__title {
	margin: 0 0 6px; font-size: 1.9rem; font-weight: 800; color: #16241d;
	display: flex; align-items: center; gap: 12px;
}
.wg-hero__title i { color: var(--brand); font-size: 1.4rem; }
.wg-hero__dek { margin: 0; color: #4a5a52; font-size: 0.96rem; line-height: 1.5; max-width: 70ch; }

/* ---- Toolbar ---- */
.wg-toolbar {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
	margin: 14px 0 6px; padding: 14px 16px;
	background: #fff; border: 1px solid #e1e6eb; border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20, 50, 30, .05);
}
.wg-field { display: flex; flex-direction: column; gap: 5px; }
.wg-field__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6f8479; }
.wg-select {
	padding: 9px 12px; border-radius: 9px; border: 1px solid #cdd8d1; background: #fff;
	color: #2f4a3b; font-size: .92rem; font-family: inherit; min-width: 190px; cursor: pointer;
}
.wg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.wg-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 15px; border-radius: 9px; border: 1px solid #cfe0d5; background: #fff;
	color: var(--brand); font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.wg-btn:hover { background: #eef5f0; }
.wg-btn i { font-size: .85em; }
.wg-btn--primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); border-color: var(--brand-dark); color: #fff; }
.wg-btn--primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }

/* ---- Status line ---- */
.wg-status { min-height: 1.4em; margin: 8px 2px 0; font-size: .9rem; font-weight: 600; color: #6b7d72; }
.wg-status.is-ok   { color: var(--brand-dark); }
.wg-status.is-warn { color: #b25b00; }

/* ---- Layout: tight grid on top, two clue cards (Across | Down) below ---- */
.wg-gridwrap {
	overflow-x: auto; max-width: 100%; margin-top: 14px;
	display: flex; justify-content: center;
	background: #fff; border: 1px solid #e1e6eb; border-radius: 14px;
	box-shadow: 0 1px 2px rgba(20, 50, 30, .05); padding: 20px 16px;
}

.wg-grid {
	display: grid; gap: 0;
	background: #16241d; border: 2px solid #16241d; border-radius: 4px;
	width: max-content;
}

.wg-cell {
	position: relative; width: var(--wg-cell); height: var(--wg-cell);
	background: #fff; border: 1px solid #d3ddd6; box-sizing: border-box;
}
.wg-cell--block { background: transparent; border: none; }
.wg-cell.is-active { background: #d9efe0; }
.wg-cell.is-cursor { background: #f6e37a; }             /* the focused cell (NYT amber) */
.wg-cell.is-wrong .wg-cell__in { color: #c0392b; }

.wg-cell__num {
	position: absolute; top: 0; left: 1px; font-size: .5rem; line-height: 1.1;
	color: #6b7d72; font-weight: 700; pointer-events: none;
}
.wg-cell__in {
	width: 100%; height: 100%; border: 0; background: transparent;
	text-align: center; text-transform: uppercase;
	font-size: calc(var(--wg-cell) * 0.52); font-weight: 700; color: #16241d;
	font-family: inherit; padding: 0; caret-color: transparent;
}
.wg-cell__in:focus { outline: none; }

/* ---- Two clue cards (Across | Down) below the puzzle, always fully visible ---- */
.wg-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; align-items: start; }
@media (max-width: 560px) { .wg-clues { grid-template-columns: 1fr; } }

.wg-card {
	min-width: 0;
	border: 1px solid #e1e6eb; border-radius: 12px; background: #fff; overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 50, 30, .05);
}
.wg-card__title {
	margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
	color: var(--brand-dark); background: #eef6f0; border-bottom: 1px solid #dcebe1; padding: 8px 14px;
	display: flex; align-items: center; gap: 8px;
}
.wg-card__title i { color: var(--brand); font-size: .9em; }
.wg-cluelist { list-style: none; margin: 0; padding: 5px 0; display: flex; flex-direction: column; }
.wg-clue {
	display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 6px;
	cursor: pointer; padding: 6px 14px; font-size: .82rem; line-height: 1.32; color: #3a4a42;
	min-width: 0;
}
.wg-clue::before {
	content: attr(value); color: var(--brand); font-weight: 800; font-size: .8rem; text-align: right;
	font-variant-numeric: tabular-nums;
}
.wg-clue:hover { background: #f4f9f5; }
.wg-clue.is-active { background: #fbf3c9; color: #16241d; }
.wg-clue__text { min-width: 0; overflow-wrap: anywhere; }

/* ---- Compact cells on small screens ---- */
@media (max-width: 620px) { .wg-page { --wg-cell: 30px; padding: 16px 10px 50px; } }
@media (max-width: 380px) { .wg-page { --wg-cell: 27px; } }