/*
Theme Name: Kimia Talebi
Theme URI: https://kimiatalebi.com
Author: ابر کوروش
Author URI: https://kourosh.cloud
Description: Custom block theme for the Kimia Talebi English academy — navy/gold brand system, Vazirmatn typography, RTL Persian.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: kimia-talebi
*/

html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* Mobile header — matches Hero-Mobile.dc.html exactly: just logo + title +
   hamburger, no inline CTA button (that button was also the root cause of an
   earlier bug where the logo would vanish entirely below 600px — removing it
   resolved that too, confirmed via headless-Chrome check). */
@media (max-width: 600px) {
	header.wp-block-group {
		padding-top: 18px !important;
		padding-bottom: 18px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
	}
	/* The logo+title wrapper is itself a flex item; without min-width:0 a flex
	   item can't shrink below its content's intrinsic width even though the
	   title text inside has overflow:hidden — that only clips the title's own
	   box, not its parent, so the whole header row was overflowing past the
	   viewport and getting clipped at the physical right edge. */
	header.wp-block-group > .wp-block-group {
		min-width: 0;
		flex-shrink: 1;
	}
	header .wp-block-site-title {
		font-size: 16px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 110px;
		min-width: 0;
		display: inline-block;
	}
	header .wp-block-buttons {
		display: none !important;
	}
	header .wp-block-navigation {
		flex-shrink: 0;
	}
}

/* Core's Navigation block only auto-collapses to a hamburger below 600px,
   assuming there's room for a full inline link row above that. Moving
   "آموزش رایگان"/"نظرات زبان‌آموزان"/"سوالات متداول" into a "دوره‌ها" submenu
   dropped the top-level row from 9 items to 6, so the inline row now fits
   down to ~1100px (previously needed up to 1650px with the flat list).
   Re-check this upper bound if more top-level nav items are ever added. */
@media (min-width: 601px) and (max-width: 1100px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Podcast archive cards: no visible "play" button — the whole card is the
   click target (image + title), matching the client's request to keep it to
   a single obvious click rather than a separate labelled button. */
.kt-podcast-card-link {
	position: absolute;
	inset: 0;
	font-size: 0;
	color: transparent;
	text-decoration: none;
}
.kt-podcast-card-link:hover {
	text-decoration: none;
}

/* Single episode page: the hero image itself is the "play" click target
   (per client's request — no separate labelled button), via a transparent
   full-cover button whose url is bound to the kt_podcast_source_url meta. */
.kt-podcast-play-overlay {
	position: absolute;
	inset: 0;
	margin: 0;
}
.kt-podcast-play-overlay .wp-block-button {
	height: 100%;
}
.kt-podcast-play-overlay .wp-block-button__link {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	padding: 0;
	border-radius: 16px;
}

/* Desktop nav had no hover feedback at all — add a gold color shift plus a
   small underline that grows in from the center on hover/focus. */
header .wp-block-navigation-item__content {
	position: relative;
	transition: color 0.2s ease;
}
header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: #D9B370;
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform 0.25s ease;
}
header .wp-block-navigation-item__content:hover,
header .wp-block-navigation-item__content:focus {
	color: #D9B370 !important;
}
header .wp-block-navigation-item__content:hover::after,
header .wp-block-navigation-item__content:focus::after {
	transform: scaleX(1);
}
header .wp-block-navigation-item__content:active {
	color: #B58944 !important;
}

.kt-nav-compact .wp-block-navigation-item__content {
	font-size: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.kt-nav-compact.wp-block-navigation {
	gap: 19px;
}

/* Nav got more compact (17px→15px, tighter gaps) — the CTA button next to
   it was sized for the old wider menu and now reads oversized in contrast. */
.kt-nav-cta .wp-block-button__link {
	font-size: 14px;
	padding-top: 9px;
	padding-bottom: 9px;
	padding-right: 16px;
	padding-left: 16px;
}

/* "دوره‌ها" now holds "آموزش رایگان"، "نظرات زبان‌آموزان" و "سوالات متداول"
   as a submenu, so the top-level row shrank from 9 items to 6 — the dropdown
   needs its own dark/gold styling since core's default is plain white. */
.kt-nav-compact .wp-block-navigation__submenu-container {
	background: #101B33;
	border: 1px solid rgba(217,179,112,0.25);
	border-radius: 10px;
	padding: 8px;
	min-width: 210px;
	box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.kt-nav-compact .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #F7F1E3;
	font-size: 15px;
	padding: 10px 14px;
	white-space: nowrap;
}
.kt-nav-compact .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}
.kt-nav-compact .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.kt-nav-compact .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: rgba(217,179,112,0.12);
	border-radius: 6px;
}
.kt-nav-compact .wp-block-navigation-submenu__toggle {
	color: inherit;
}

/* "کلاس آنلاین" — deliberately attention-grabbing, it's an external link to
   a different subdomain the client wants to actively drive traffic to. */
.kt-nav-blink .wp-block-navigation-item__content {
	animation: kt-nav-blink-fade 1.4s ease-in-out infinite;
}
@keyframes kt-nav-blink-fade {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}

/* Small "live" status dot — a permanent, always-on indicator that the
   online class platform is up (not a real-time health check, just a
   constant visual signal — the client confirmed the class itself never
   needs to be toggled off, so this never needs to reflect real status). */
.kt-nav-blink .wp-block-navigation-item__content {
	position: relative !important;
	padding-inline-start: 16px !important;
}
.kt-nav-blink .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22C55E;
	box-shadow: 0 0 6px rgba(34,197,94,0.85);
	animation: kt-nav-dot-pulse 1.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes kt-nav-dot-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(34,197,94,0.85); }
	50% { opacity: .35; box-shadow: 0 0 2px rgba(34,197,94,0.4); }
}

/* Shop archive: with a product count that isn't a clean multiple of the
   3-column grid, the last row's lone card sat stuck at the grid's start
   (right, in RTL) looking stranded. Centering the flex row instead lets an
   incomplete last row sit balanced in the middle. */
.wp-block-woocommerce-product-collection .wc-block-product-template {
	justify-content: center;
}