/*
 * **********************************************************************
 * Kadence Child Theme — On-line Mahjongg Page
 *
 * Styles for the [online_mahjongg_page] shortcode. Loaded only on the
 * page with slug "online-mahjongg".
 *
 * @package  KadenceChild
 * @version  1.2.3
 * @updated  2026-08-25
 * **********************************************************************
 */

/* =============================================================================
   Page chrome — hide default title bar, round the boxed container
   ============================================================================= */

.mah-online-mahjongg-page .entry-title,
.mah-online-mahjongg-page .entry-hero-container-inner {
	display: none;
}

/* Kadence's #primary carries a fixed 80px margin-top for its title
   area regardless of whether a title renders — zero it so the hero
   sits flush under the header instead of leaving a gap of tiled
   background between the nav and the hero. */
.mah-online-mahjongg-page #primary {
	margin-top: 0;
}

/* background-color default matches Appearance -> Site Configuration ->
   Online Mahjongg -> "Card list background opacity" (10%); the admin
   setting overrides this via inline CSS injected at wp_head. */
.mah-online-mahjongg-page .content-bg {
	background-color: rgba(255, 255, 255, .1);
	border-radius: var(--mah-radius-xl);
	overflow: hidden;
}

/* =============================================================================
   Hero
   ============================================================================= */

.om-hero {
	background: linear-gradient(135deg, var(--mah-green) 0%, var(--mah-green-mid) 100%);
	/* Left/right -2rem still bleeds the hero to the edges of the
	   rounded content-bg card; top is 0 (not -2rem) so the hero keeps
	   the same ~32px gap under the header as the teaching/team-building/
	   consulting pages, instead of sitting flush against it. */
	margin: 0 -2rem 32px;
	padding: 64px 24px;
	text-align: center;
}

.om-hero__inner {
	max-width: 700px;
	margin: 0 auto;
}

.om-hero__eyebrow {
	color: rgba(255, 255, 255, .85);
	font-size: var(--mah-font-md);
	line-height: 1.5;
	margin: 0 0 8px;
}

.om-hero__title {
	color: var(--mah-white);
	font-size: var(--mah-font-hero);
	margin: 0 0 16px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.om-hero__lead {
	color: rgba(255, 255, 255, .95);
	font-size: var(--mah-font-md2);
	font-weight: 600;
	margin: 0;
}

@media ( max-width: 767px ) {
	.om-hero {
		margin: -1.5rem -1.5rem 24px;
		padding: 48px 20px;
	}
}

/* =============================================================================
   Resource list
   ============================================================================= */

.om-list {
	display: flex;
	flex-direction: column;
	gap: var(--mah-space-5);
	margin: 0 auto;
	max-width: 720px;
	padding: 0 4px 8px;
}

.om-card {
	align-items: flex-start;
	background: var(--mah-grey-100);
	border: 1px solid var(--mah-grey-200);
	border-radius: var(--mah-radius-lg);
	color: inherit;
	display: flex;
	gap: var(--mah-space-5);
	padding: var(--mah-space-6);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.om-card:hover,
.om-card:focus-visible {
	border-color: var(--mah-green);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

/* Size default matches Appearance -> Site Configuration -> Online
   Mahjongg -> "Favicon size" (80px); the admin setting overrides this
   via inline CSS injected at wp_head. */
.om-card__icon {
	background: var(--mah-white);
	border: 1px solid var(--mah-grey-200);
	border-radius: 50%;
	flex-shrink: 0;
	height: 80px;
	object-fit: contain;
	padding: 10px;
	width: 80px;
}

.om-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.om-card__name {
	color: var(--mah-green-dark);
	font-family: var(--mah-font-display);
	font-size: var(--mah-font-lg2);
	font-weight: 600;
}

.om-card__desc {
	color: var(--mah-grey-700);
	font-size: var(--mah-font-base-sm);
	line-height: 1.5;
}

.om-card__url {
	color: var(--mah-green);
	font-size: var(--mah-font-sm2);
	font-weight: 600;
	margin-top: 4px;
}

@media ( max-width: 480px ) {
	.om-card {
		gap: var(--mah-space-4);
		padding: var(--mah-space-5);
	}
}