/*
Theme Name: Lumina Chess Academy
Theme URI: https://rook.axiomthemes.com/
Description: Child theme of Rook for Lumina Chess Academy. Deliberately minimal — Rook's own colours, typography and layout are left untouched. This stylesheet only provides the structural helpers the imported page content needs (placeholder notices, editor-only notes, section dividers), all drawn from Rook's own theme variables so they follow the active colour scheme.
Author: Trendlance Innovations
Author URI: https://axiomthemes.com/
Version: 2.0.0
Tested up to: 6.8
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rook
Template: rook
*/

/* ============================================================
   LUMINA CHESS ACADEMY — structural helpers only.

   No fonts, no palette, no button restyling. Everything below
   uses Rook's own CSS variables (--theme-color-*), so if you
   change the colour scheme in Customize, these follow it.

   If a rule here is not doing a job the content needs, it has
   been removed on purpose.
   ============================================================ */


/* ------------------------------------------------------------
   1. Editor-only notes — MUST stay hidden from visitors.
   These are the build notes left in the page content for
   whoever is filling the site in. Deleting this rule makes
   them public.
   ------------------------------------------------------------ */

.lum-editor-note {
	display: none;
}

.block-editor-block-list__layout .lum-editor-note,
.editor-styles-wrapper .lum-editor-note {
	display: block;
	background: rgba(255, 200, 0, 0.09);
	border-left: 3px solid rgba(180, 130, 20, 0.55);
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	font-size: 0.88rem;
	line-height: 1.5;
}


/* ------------------------------------------------------------
   2. Placeholder notices — visible on purpose, so an unfinished
   section says what belongs there instead of looking broken.
   Delete each one from the page as you fill it in.
   ------------------------------------------------------------ */

.lum-placeholder {
	border: 1px dashed var(--theme-color-bd_color, #ccc);
	background: var(--theme-color-alt_bg_color, rgba(0, 0, 0, 0.02));
	padding: 1.4rem 1.6rem;
	margin: 1.5rem 0;
}

.lum-placeholder p {
	margin: 0 0 0.7rem;
}

.lum-placeholder p:last-child {
	margin-bottom: 0;
}

.lum-placeholder strong {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--theme-color-alt_link, inherit);
}


/* ------------------------------------------------------------
   3. Rank strip — an eight-square divider between sections.
   Uses Rook's own title and background colours, so it matches
   whatever scheme is active.
   ------------------------------------------------------------ */

.lum-rank {
	display: flex;
	width: 100%;
	height: 8px;
	margin: 3rem 0;
	overflow: hidden;
}

.lum-rank span {
	flex: 1;
	background: var(--theme-color-alt_bg_color, #eee);
}

.lum-rank span:nth-child(odd) {
	background: var(--theme-color-title, #222);
}

.lum-rank--lapis span:nth-child(odd),
.lum-rank--brass span:nth-child(odd) {
	background: var(--theme-color-link, #666);
}

.lum-rank--sm {
	height: 5px;
	max-width: 120px;
	margin: 0 0 1.25rem;
}


/* ------------------------------------------------------------
   4. Cards — a light container so column groups read as
   distinct items. Border only; no background, no shadow.
   ------------------------------------------------------------ */

.lum-card {
	border: 1px solid var(--theme-color-bd_color, #e0e0e0);
	padding: 1.6rem;
	height: 100%;
}

.lum-card > *:first-child { margin-top: 0; }
.lum-card > *:last-child  { margin-bottom: 0; }

.lum-card--level {
	border-left-width: 3px;
	border-left-color: var(--theme-color-link, #666);
}


/* ------------------------------------------------------------
   5. Bands — full-width sections. Padding, plus Rook's own
   alternate background; the theme decides the colours.
   ------------------------------------------------------------ */

.lum-band {
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
	margin: 2.5rem 0;
}

.lum-band--paper {
	background: var(--theme-color-alt_bg_color, rgba(0, 0, 0, 0.03));
}

.lum-band--ink {
	background: var(--theme-color-title, #1a1a1a);
}

.lum-band--ink,
.lum-band--ink h1,
.lum-band--ink h2,
.lum-band--ink h3,
.lum-band--ink h4,
.lum-band--ink p,
.lum-band--ink li {
	color: var(--theme-color-bg_color, #fff);
}


/* ------------------------------------------------------------
   6. Eyebrow labels and meta lines — small uppercase markers
   above headings, and the date/time detail lines.
   ------------------------------------------------------------ */

.lum-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--theme-color-meta, #777);
	margin-bottom: 0.9rem;
}

.lum-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--theme-color-bd_color, #ddd);
}

.lum-band--ink .lum-eyebrow {
	color: var(--theme-color-bg_color, #fff);
	opacity: 0.75;
}

.lum-band--ink .lum-eyebrow::after {
	background: currentColor;
	opacity: 0.3;
}

.lum-meta {
	font-size: 0.85rem;
	color: var(--theme-color-meta, #777);
}

.lum-lead {
	font-size: 1.12em;
	line-height: 1.6;
	max-width: 62ch;
}


/* ------------------------------------------------------------
   7. Tables — schedules, fees, results.
   ------------------------------------------------------------ */

.lum-table table {
	width: 100%;
	border-collapse: collapse;
}

.lum-table th {
	text-align: left;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--theme-color-meta, #777);
	padding: 0.7rem 1rem;
	border-bottom: 2px solid var(--theme-color-title, #333);
	font-weight: 600;
}

.lum-table td {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--theme-color-bd_color, #e5e5e5);
	vertical-align: top;
}


/* ------------------------------------------------------------
   8. FAQ accordions — core/details blocks.
   ------------------------------------------------------------ */

.wp-block-details {
	border-bottom: 1px solid var(--theme-color-bd_color, #e5e5e5);
	padding: 1.1rem 0;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--theme-color-link, #666);
	font-size: 1.3rem;
	line-height: 1;
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--theme-color-link, #666);
	outline-offset: 3px;
}


/* ------------------------------------------------------------
   9. Buttons inside the dark band — Rook's outline style is
   invisible against a dark background, so it is inverted here.
   This is the only place Rook's button styling is touched.
   ------------------------------------------------------------ */

.lum-band--ink .is-style-outline .wp-block-button__link {
	color: var(--theme-color-bg_color, #fff);
	border-color: var(--theme-color-bg_color, #fff);
}

.lum-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.6rem;
}


/* ------------------------------------------------------------
   10. Images inside cards and columns — fill the width and sit
   flush with the card padding.
   ------------------------------------------------------------ */

.lum-card .wp-block-image {
	margin: 0 0 1.1rem;
}

.lum-card .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Coach headshots stay square regardless of what gets uploaded,
   so the six cards line up even with mixed source photos. */
.lum-card .wp-block-image.size-full img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.wp-block-image img {
	max-width: 100%;
	height: auto;
}