/*
 * **********************************************************************
 Theme Name:   Kadence Child
 Theme URI:    https://mahjartspace.com
 Description:  Child theme for Kadence — The Mahjongg Gallery
 Author:       The Mahjongg Gallery
 Template:     kadence
 Version:      1.0.25
 Last Updated: 2026-07-28
 License:      GNU General Public License v3 or later
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  kadence-child
 * **********************************************************************
*/

/* =============================================================================
   Design tokens
   ============================================================================= */

:root {
	--mah-header-bg: #2b7f4b;
	--mah-menu-fg:   #447a4f;
}

/* =============================================================================
   Accessibility
   ============================================================================= */

.mah-skip-link {
	background: var(--mah-header-bg);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 700;
	left: -9999px;
	padding: 8px 16px;
	position: absolute;
	text-decoration: none;
	top: -9999px;
	z-index: 99999;
}

.mah-skip-link:focus {
	left: 6px;
	top: 6px;
	position: fixed;
}

/* Visually hidden but readable by screen readers and indexed by Google */
.mah-sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* =============================================================================
   Logo
   ============================================================================= */

@media (min-width: 1025px) {
	#masthead .site-branding       { margin-left:  30px; }
	#masthead .header-navigation   { margin-right: 30px; }
}

/* ── Nav submenu hover fix ───────────────────────────────────────────────────── */
/* Kadence's JS closes submenus on mouseout before the cursor reaches them.
   Force the submenu visible via CSS :hover on the parent <li> so it stays
   open as long as the cursor is anywhere within the menu item — JS toggle
   is overridden only while hovered; click-toggle still works normally. */
@media (min-width: 1025px) {
	.header-navigation li.menu-item-has-children:hover > ul.sub-menu {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
	.header-navigation li.menu-item-has-children > ul.sub-menu {
		padding-top: 12px;
		margin-top:  -12px;
	}
}

/* ── "Corporate Consulting" 2-line nav label (desktop only) ──────────────────── */

@media (min-width: 1025px) {
	.header-navigation li.menu-item > a[href="/consulting"] {
		text-align: center;
	}
	.header-navigation li.menu-item > a[href="/consulting"]::before {
		content: 'Corporate';
		display: block;
	}
}

#masthead .custom-logo {
	max-height: 50px;
	width: auto;
	border-radius: 8px;
	/* 3D raised effect: inner highlight on top, inner shadow on bottom, layered outer drop-shadow */
	box-shadow:
		inset 0  3px  4px rgba(255, 255, 255, 0.75),
		inset 0 -3px  4px rgba(0,   0,   0,   0.45),
		inset  3px 0  4px rgba(255, 255, 255, 0.25),
		inset -3px 0  4px rgba(0,   0,   0,   0.20),
		0  4px  6px   rgba(0,   0,   0,   0.50),
		0 10px 20px   rgba(0,   0,   0,   0.40),
		0 20px 40px   rgba(0,   0,   0,   0.25);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

/* =============================================================================
   Site tagline ("Reading, Mass")
   ============================================================================= */

/* Kadence does not render .site-description in the header; inject the
   tagline via ::after on the logo anchor instead. display:block on
   the anchor lets the pseudo-element flow below the logo image. */
#masthead .site-branding a.brand {
	display: block;
	text-align: center;
}

#masthead .site-branding a.brand::after {
	content: 'Reading, Mass';
	display: block;
	color: #ffffff;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	margin-top: 2px;
}

/* =============================================================================
   Page-specific
   ============================================================================= */

/* ── Home Page ───────────────────────────────────────────────────────────────── */

/* Tile background at 50% opacity behind all page content */
.home::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/Option-1.png');
	background-repeat: repeat;
	background-size: auto;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* Hide the default Kadence entry-title and hero banner — our hero block replaces them */
.home .entry-title,
.home .entry-hero-container-inner {
	display: none;
}

/* Let the content-bg be transparent so section backgrounds show edge-to-edge */
.home .content-bg {
	background: transparent;
	padding: 0;
}

/* Full-width groups need the content container to not add extra horizontal padding */
.home .entry-content-wrap {
	padding-left: 0;
	padding-right: 0;
}

/* Resources list uses ✦ custom markers — suppress native bullets */
.home .wp-block-list {
	list-style: none;
	padding-left: 0;
}

/* ── Improve Your Game / lesson pages (page-id-196, 188, 190, 192, 194) ─────── */

.page-id-196 .entry-title,
.page-id-196 .entry-hero-container-inner,
.page-id-188 .entry-title,
.page-id-188 .entry-hero-container-inner,
.page-id-190 .entry-title,
.page-id-190 .entry-hero-container-inner,
.page-id-192 .entry-title,
.page-id-192 .entry-hero-container-inner,
.page-id-194 .entry-title,
.page-id-194 .entry-hero-container-inner {
	display: none;
}

.page-id-196 .content-bg,
.page-id-188 .content-bg,
.page-id-190 .content-bg,
.page-id-192 .content-bg,
.page-id-194 .content-bg {
	background: transparent;
	padding: 0;
}

.page-id-196 .entry-content-wrap,
.page-id-188 .entry-content-wrap,
.page-id-190 .entry-content-wrap,
.page-id-192 .entry-content-wrap,
.page-id-194 .entry-content-wrap {
	padding-left: 0;
	padding-right: 0;
}

/* ── Start Learning (page-id-16) ────────────────────────────────────────────── */

.page-id-16 .entry-title,
.page-id-16 .entry-hero-container-inner {
	display: none;
}

.page-id-16 .content-bg {
	background: transparent;
	padding: 0;
}

.page-id-16 .entry-content-wrap {
	padding-left: 0;
	padding-right: 0;
}

/* ── Mahjong History (slug: mahjong-history) ────────────────────────────────── */

.mah-history-page .entry-title {
	display: none;
}

.mah-history-page {
    background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/history_page_background.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

/* Kadence renders the boxed content background on article.content-bg, not .content-area */
.mah-history-page .content-bg {
	background: transparent;
}

.mah-history-page .entry-hero-container-inner {
	display: none;
}

/* ── Registration (slug: registration) ──────────────────────────────────────── */

.mah-registration-page {
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/tiles.png');
	background-repeat: repeat;
	background-size: auto;
}

.mah-registration-page .content-bg {
	background: transparent;
}

/* ── Teaching (slug: teaching) ──────────────────────────────────────────────── */

.mah-teaching-page .content-bg {
	background: transparent;
	padding: 0;
}

.mah-teaching-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/Option-7-1.png');
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── Team Building (slug: team-building) ─────────────────────────────────────── */

.mah-team-building-page .content-bg {
	background: transparent;
	padding: 0;
}

.mah-team-building-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/Option-6.png');
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── Events (slug: events) ───────────────────────────────────────────────────── */

.mah-events-page .content-bg {
	border-radius: 20px;
	overflow: hidden;
}

.mah-events-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/Option-8.png');
	background-repeat: repeat;
	background-size: auto;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── Start Learning (slug: start-learning) ───────────────────────────────────── */

.mah-start-learning-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/Option-4.png');
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── About Us (slug: about-us) ───────────────────────────────────────────────── */

.mah-about-page .content-bg {
	border-radius: 20px;
	overflow: hidden;
}

.mah-about-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/Option-5.png');
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── PDF Viewer (?mah-pdf-view=) ────────────────────────────────────────────── */

.mah-pdf-viewer-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/tiles.png');
	background-repeat: repeat;
	background-size: auto;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── Mah Jongg Spelling (slug: mah-jongg-spelling) ─────────────────────────── */

.mah-spelling-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/tiles.png');
	background-repeat: repeat;
	background-size: auto;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── Consulting (slug: consulting) ──────────────────────────────────────────── */

.mah-consulting-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/Community-Mahjongg.png');
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── Blog (page-id-29) ───────────────────────────────────────────────────────── */

/* Custom page-blog.php template handles all layout; strip Kadence chrome */
.page-id-29 .entry-title,
.page-id-29 .entry-hero-container-inner {
	display: none;
}

.page-id-29 .content-bg {
	background: transparent;
}

.page-id-29 .entry-content-wrap {
	padding-left: 0;
	padding-right: 0;
}

/* ── Login (slug: login) ────────────────────────────────────────────────────── */

.mah-login-page .content-bg {
	background: transparent;
}

.mah-login-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/mahjongg-login-background.webp');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* ── 404 ─────────────────────────────────────────────────────────────────────── */

.error404,
.page-id-152 {
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/06/404-1.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
	min-height: 100vh;
}

.error404 .content-bg,
.page-id-152 .content-bg {
	background: transparent;
}

.error404 .entry-hero-container-inner,
.error404 .entry-title,
.page-id-152 .entry-hero-container-inner,
.page-id-152 .entry-title {
	display: none;
}

/* With cover + center top the image fills 100vh from the top, so the
   clean cream area below "OOPS!" is always at ~70vh regardless of device */
.error404 .entry-content-wrap,
.page-id-152 .entry-content-wrap {
	padding-top: calc(70vh - 130px);
}

/* =============================================================================
   Mobile menu toggle (hamburger)
   ============================================================================= */

/* ── Search drawer (Relevanssi) ──────────────────────────────────────────────── */

/* Kadence hardcodes rgba(9,12,16,.97) on .drawer-inner — make it transparent
   so the page background shows through when the search overlay is open. */
#search-drawer.popup-drawer-layout-fullwidth .drawer-inner {
	background: transparent !important;
}

/* Cream background on the search input so it reads clearly over transparent drawer */
#search-drawer input[type="search"],
#search-drawer input[type="text"] {
	background-color: #fdf8ec !important;
	color: #000000 !important;
}

/* Black placeholder text */
#search-drawer input[type="search"]::placeholder,
#search-drawer input[type="text"]::placeholder {
	color: #000000 !important;
	opacity: 1;
}

/* Submit button: hide "Search" text, keep icon black */
#search-drawer .search-submit,
#search-drawer button[type="submit"],
#search-drawer .wp-block-search__button,
#search-drawer .wp-element-button {
	color: #000000 !important;
	font-size: 0 !important;      /* collapses text node; SVG uses explicit dimensions */
	background: transparent !important;
}

#search-drawer .search-submit svg,
#search-drawer button[type="submit"] svg,
#search-drawer .wp-block-search__button svg,
#search-drawer .wp-element-button svg {
	width: 20px;
	height: 20px;
}

#search-drawer .search-submit svg path,
#search-drawer button[type="submit"] svg path,
#search-drawer .wp-block-search__button svg path,
#search-drawer .wp-element-button svg path {
	fill: #000000 !important;
	stroke: none !important;
}

/* Green magnifying glass on hover — override Kadence's white button-hover entirely */
#search-drawer .search-submit:hover,
#search-drawer .search-submit:focus,
#search-drawer button[type="submit"]:hover,
#search-drawer button[type="submit"]:focus,
#search-drawer .wp-block-search__button:hover,
#search-drawer .wp-block-search__button:focus,
#search-drawer .wp-element-button:hover,
#search-drawer .wp-element-button:focus {
	background: transparent !important;
	background-color: transparent !important;
	color: #2b7f4b !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

#search-drawer .search-submit:hover svg,
#search-drawer .search-submit:focus svg,
#search-drawer button[type="submit"]:hover svg,
#search-drawer button[type="submit"]:focus svg,
#search-drawer .wp-block-search__button:hover svg,
#search-drawer .wp-block-search__button:focus svg,
#search-drawer .wp-element-button:hover svg,
#search-drawer .wp-element-button:focus svg {
	fill: #2b7f4b !important;
	color: #2b7f4b !important;
}

#search-drawer .search-submit:hover svg path,
#search-drawer .search-submit:focus svg path,
#search-drawer button[type="submit"]:hover svg path,
#search-drawer button[type="submit"]:focus svg path,
#search-drawer .wp-block-search__button:hover svg path,
#search-drawer .wp-block-search__button:focus svg path,
#search-drawer .wp-element-button:hover svg path,
#search-drawer .wp-element-button:focus svg path {
	fill: #2b7f4b !important;
	stroke: #2b7f4b !important;
}

/* Black browser-native clear (×) button */
#search-drawer input[type="search"]::-webkit-search-cancel-button {
	filter: invert(0%) brightness(0%);
}

/* ── Search drawer icon colour ───────────────────────────────────────────────── */

/* SVG uses fill="currentColor" — controlling color on the wrap is enough */
#search-drawer .kadence-svg-iconset {
	color: #000000;
}

/* Hover: triggered by mousing over either the (invisible) submit input or the icon */
#search-drawer input.search-submit:hover ~ .kadence-search-icon-wrap .kadence-svg-iconset,
#search-drawer .kadence-search-icon-wrap:hover .kadence-svg-iconset {
	color: #2b7f4b !important;
}

/* Block any blue background Kadence adds to the submit input on hover */
#search-drawer input.search-submit:hover {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* ── Header search icon ──────────────────────────────────────────────────────── */

/* Scale the 1em×1em SVG up ~30% and force white to contrast against the green header */
#masthead .search-toggle-open {
	font-size: 1.3em;
	color: #ffffff;
}

/* Remove Kadence's default button background so the green header shows through. */
#masthead button.menu-toggle-open {
	background: none;
}

/* SVG fill inherits via currentColor — force white so lines contrast on green. */
#masthead button.menu-toggle-open .kadence-menu-svg path {
	fill: white;
}

/* =============================================================================
   Account Menu
   ============================================================================= */

/* ── Trigger link ─────────────────────────────────────────────────────────── */

/* Higher specificity needed to beat .header-navigation li.menu-item > a { display:block } */
.header-navigation li.mah-account-item > a.mah-account-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2em;
	padding: 8px 15px;
	text-decoration: none;
	color: inherit;
}

.mah-account-icon {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	flex-shrink: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	padding: .2em;
	box-sizing: content-box;
}

.mah-account-name {
	font-size: 14px;
}

/* ── Dropdown ─────────────────────────────────────────────────────────────── */

.mah-account-item {
	position: relative;
}

.mah-account-sub {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	min-width: 160px;
	background: var(--global-palette3);
	box-shadow: 0 2px 13px rgba(0, 0, 0, .1);
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 1000;
}

.mah-account-item.mah-open .mah-account-sub {
	display: block;
}

.mah-account-sub li {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mah-account-sub li a {
	display: block;
	padding: 1em;
	color: var(--global-palette8);
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
	transition: all .2s ease-in-out;
}

.mah-account-sub li a:hover {
	color: var(--global-palette9);
	background: var(--global-palette4);
}