/*
	Theme Name:   Jannah Child
	Theme URI:    https://personex.ir/
	Description:  Jannah child theme implementing the Personex Design System (Bright Mode default) for the articles section.
	Author:       Personex
	Author URI:   https://personex.ir
	Template:     jannah
	Version:      2.0.0
	License:      license purchased
	License URI:  http://themeforest.net/licenses/regular_extended
	Text Domain:  jannah-child
*/

/*
 * Layer order:
 *   assets/css/tokens.css  -> Personex tokens (loaded first, see functions.php)
 *   style.css (this file)  -> maps tokens onto Jannah's variables and components
 *
 * The site is RTL: prefer logical properties (inline-start / inline-end).
 */

/* ==========================================================================
   1. Jannah variable bridge
   ========================================================================== */

:root {
	--brand-color: var(--px-brand-blue);
	--dark-brand-color: #1a4ad6;
	--bright-color: #ffffff;
	--base-color: var(--px-text-primary);

	--main-nav-background: var(--px-bg-surface);
	--main-nav-secondry-background: var(--px-bg-surface-sunken);
	--main-nav-primary-color: var(--px-brand-blue);
	--main-nav-contrast-primary-color: #ffffff;
	--main-nav-text-color: var(--px-text-primary);
	--main-nav-secondry-text-color: var(--px-text-muted);
	--main-nav-main-border-color: var(--px-border-light);
	--main-nav-secondry-border-color: var(--px-border-light);

	--tie-buttons-color: var(--px-action);
	--tie-buttons-text: var(--px-on-action);
	--tie-buttons-hover-color: var(--px-action-hover);
	--tie-buttons-hover-text: var(--px-on-action);
	--tie-buttons-radius: var(--px-radius-lg);

	--tie-dark-skin-bg-main: var(--px-bg-inverse);
	--tie-dark-skin-bg: #121e45;
}

/* ==========================================================================
   2. Base & typography
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body,
#tie-body {
	font-family: var(--px-font-family);
	font-size: var(--px-fs-body);
	line-height: var(--px-leading-normal);
	color: var(--px-text-secondary);
	background-color: var(--px-bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--px-text-primary);
	font-weight: 800;
	line-height: var(--px-leading-tight);
}

a {
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

::selection {
	background: var(--px-selection);
	color: var(--px-text-primary);
}

:focus-visible {
	outline: 3px solid var(--px-focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Top bar
   ========================================================================== */

#top-nav {
	background-color: var(--px-bg-surface-sunken);
	border-bottom: 1px solid var(--px-border-light);
	color: var(--px-text-secondary);
}

#top-nav .topbar-today-date,
#top-nav .components > li > a,
#top-nav .breaking-news a {
	font-size: var(--px-fs-meta);
	font-weight: 600;
	color: var(--px-text-secondary);
}

#top-nav .components > li > a:hover,
#top-nav .breaking-news a:hover {
	color: var(--px-accent-text);
}

.breaking-title {
	background: var(--px-brand-blue);
	color: #fff;
	border-radius: var(--px-radius-full);
	font-weight: 700;
	font-size: 12px;
}

.breaking-title .breaking-icon {
	animation: px-pulse 2.4s ease-in-out infinite;
}

@keyframes px-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* ==========================================================================
   4. Header & main navigation
   ========================================================================== */

.theme-header,
.theme-header .header-container {
	background: var(--px-bg-surface);
}

.theme-header #logo img {
	height: auto;
}

.main-nav-wrapper,
#main-nav {
	background: var(--px-bg-surface);
	border-color: var(--px-border-light);
	box-shadow: none;
}

#main-nav {
	border-top: 1px solid var(--px-border-light);
	border-bottom: 1px solid var(--px-border-light);
}

#main-nav .main-menu > ul > li > a {
	position: relative;
	color: var(--px-text-primary);
	font-size: 15px;
	font-weight: 700;
}

#main-nav .menu > li:hover > a,
#main-nav .menu > li.tie-current-menu > a {
	color: var(--px-accent-text);
	background: var(--px-bg-surface-hover);
}

/* Jannah draws the current item as a 5px bar + dark dash; replace with a bloom line */
#main-nav .menu > li.tie-current-menu {
	border-bottom: 0;
	margin-bottom: 0;
}

#main-nav .menu > li.tie-current-menu > a::after {
	content: "";
	position: absolute;
	inset-inline: 16px;
	bottom: 0;
	left: auto;
	right: auto;
	top: auto;
	width: auto;
	height: 3px;
	margin: 0;
	transform: none;
	border-radius: var(--px-radius-full) var(--px-radius-full) 0 0;
	background: var(--px-gradient-bloom);
}

#main-nav .main-menu ul ul,
#main-nav .main-menu .sub-menu {
	background: var(--px-bg-surface);
	border: 1px solid var(--px-border-light);
	border-radius: var(--px-radius-md);
	box-shadow: var(--px-shadow-md);
	overflow: hidden;
}

#main-nav .main-menu ul ul li a {
	color: var(--px-text-secondary);
	font-weight: 600;
}

#main-nav .main-menu ul ul li:hover > a {
	background: var(--px-neutral-blue-tint);
	color: var(--px-brand-ink);
}

#main-nav #search {
	border-radius: var(--px-radius-full);
	overflow: hidden;
	background: var(--px-bg-surface-sunken);
	border: 1px solid var(--px-border-light);
}

#main-nav #search-input {
	background: transparent;
	color: var(--px-text-primary);
	border: 0;
	box-shadow: none;
}

#main-nav #search-submit {
	background: var(--px-action);
	color: #fff;
	border-radius: var(--px-radius-full);
}

#main-nav #search-submit:hover {
	background: var(--px-action-hover);
}

/* ==========================================================================
   5. Cards: every Jannah block is a .container-wrapper
   Solid surface, crystal border, soft blue shadow, 24px radius.
   ========================================================================== */

.container-wrapper {
	background: var(--px-bg-surface);
	border: 1px solid var(--px-border-light);
	border-radius: var(--px-radius-2xl);
	box-shadow: none;
	color: var(--px-text-secondary);
}

.container-wrapper .container-wrapper {
	border: 0;
	box-shadow: none;
	background: transparent;
	border-radius: 0;
}

/* Block / widget titles: hairline + short bloom bar */
.block-head-1 .the-global-title,
.block-head-1 .comment-reply-title {
	font-size: var(--px-fs-card-lg);
	font-weight: 800;
	line-height: var(--px-leading-tight);
	color: var(--px-text-primary);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--px-border-light);
}

.block-head-1 .the-global-title::before,
.block-head-1 .comment-reply-title::before {
	display: none;
}

.block-head-1 .the-global-title::after,
.block-head-1 .comment-reply-title::after {
	left: auto;
	right: auto;
	inset-inline-start: 0;
	bottom: -2px;
	width: 56px;
	height: 4px;
	border-radius: var(--px-radius-full);
	background: var(--px-gradient-bloom);
}

.widget-title-icon {
	display: none;
}

.widget-title .the-subtitle {
	font-size: var(--px-fs-card-lg);
	font-weight: 800;
	color: var(--px-text-primary);
}

.widget li,
.widget_categories li {
	border-color: var(--px-border-light);
}

.widget li a {
	color: var(--px-text-secondary);
	font-weight: 600;
}

.widget li a:hover {
	color: var(--px-accent-text);
}

/* Tags */
.tagcloud a,
.post-bottom-tags a,
.tag-cloud-link {
	background: var(--px-bg-surface-sunken);
	color: var(--px-text-secondary);
	border: 1px solid var(--px-border-light);
	border-radius: var(--px-radius-full);
	font-size: 13px !important; /* WP tag cloud writes an inline font-size */
	font-weight: 600;
	padding: 4px 14px;
}

.tagcloud a:hover,
.post-bottom-tags a:hover,
.tag-cloud-link:hover {
	background: var(--px-tag-bg);
	color: var(--px-tag-text);
	border-color: transparent;
}

/* ==========================================================================
   6. Post lists & cards
   ========================================================================== */

#posts-container .post-item {
	border-color: var(--px-border-light);
}

.post-item .post-title a,
.related-item .post-title a {
	color: var(--px-text-primary);
	font-weight: 800;
	line-height: var(--px-leading-tight);
}

.post-item .post-title a:hover,
.related-item .post-title a:hover {
	color: var(--px-accent-text);
}

/* Card headings stay within two lines (typography rule) */
#posts-container .post-title,
.related-item .post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-excerpt {
	color: var(--px-text-secondary);
	line-height: var(--px-leading-relaxed);
}

.post-thumb,
.featured-area .single-featured-image img {
	border-radius: var(--px-radius-md);
	overflow: hidden;
}

/* Category pill */
a.post-cat {
	background: var(--px-tag-bg);
	color: var(--px-tag-text);
	border-radius: var(--px-radius-full);
	font-size: 13px;
	font-weight: 800;
	padding-inline: 14px;
}

a.post-cat:hover {
	background: var(--px-brand-blue);
	color: #fff;
}

.post-meta,
.post-meta a,
.post-meta .meta-item {
	font-size: var(--px-fs-meta);
	font-weight: 600;
	color: var(--px-text-muted);
}

.post-meta a:hover {
	color: var(--px-accent-text);
}

/* ==========================================================================
   7. Buttons & forms
   ========================================================================== */

.button,
a.button,
.more-link,
button[type="submit"],
input[type="submit"],
.wp-block-button__link {
	font-weight: 700;
	background: var(--px-action);
	color: var(--px-on-action);
	border: 0;
	border-radius: var(--px-radius-lg);
	transition: background-color 0.2s ease, transform 0.2s var(--px-ease), box-shadow 0.2s ease;
}

.button:hover,
a.button:hover,
.more-link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--px-action-hover);
	color: var(--px-on-action);
	transform: translateY(-2px);
	box-shadow: var(--px-shadow-bloom);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	color: var(--px-text-primary);
	background: var(--px-bg-surface);
	border: 1px solid var(--px-border-strong);
	border-radius: var(--px-radius-md);
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder,
textarea::placeholder {
	color: var(--px-text-muted);
	opacity: 1;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: var(--px-brand-blue);
	box-shadow: 0 0 0 4px var(--px-focus-ring);
}

/* ==========================================================================
   8. Single article
   ========================================================================== */

#breadcrumb,
#breadcrumb a,
#breadcrumb .delimiter {
	font-size: var(--px-fs-meta);
	font-weight: 600;
	color: var(--px-text-muted);
}

#breadcrumb a:hover {
	color: var(--px-accent-text);
}

.entry-header .post-title.entry-title {
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 900;
	line-height: 1.4;
	color: var(--px-text-primary);
}

h1.page-title {
	font-size: var(--px-fs-section);
	font-weight: 800;
	color: var(--px-text-primary);
}

.entry-content {
	font-size: 17px;
	line-height: var(--px-leading-relaxed);
	color: var(--px-text-secondary);
}

.entry-content p,
.entry-content li {
	color: var(--px-text-secondary);
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: var(--px-text-primary);
	font-weight: 800;
	line-height: var(--px-leading-tight);
}

.entry-content h2 { font-size: clamp(24px, 2.6vw, 30px); }
.entry-content h3 { font-size: 22px; }
.entry-content h4 { font-size: var(--px-fs-card-lg); }

.entry-content a:not(.button):not(.wp-block-button__link) {
	color: var(--px-accent-text);
	text-decoration: underline;
	text-decoration-color: rgba(37, 99, 255, 0.35);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.entry-content a:not(.button):not(.wp-block-button__link):hover {
	color: var(--px-brand-purple);
	text-decoration-color: currentColor;
}

.entry-content li::marker {
	color: var(--px-brand-blue);
	font-weight: 800;
}

.entry-content img {
	border-radius: var(--px-radius-md);
}

.entry-content figcaption,
.wp-caption-text {
	font-size: var(--px-fs-meta);
	color: var(--px-text-muted);
}

/* Blockquote: tinted card with a bloom bar on the reading-start edge */
.entry-content blockquote {
	position: relative;
	margin: 1.8em 0;
	padding: 20px 28px;
	background: var(--px-neutral-blue-tint);
	background: color-mix(in srgb, var(--px-brand-blue) 9%, var(--px-bg-surface));
	border: 0;
	border-radius: var(--px-radius-lg);
	color: var(--px-text-primary);
	font-size: 19px;
	font-weight: 700;
	line-height: var(--px-leading-relaxed);
	overflow: hidden;
}

.entry-content blockquote::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: auto;
	right: auto;
	inset-inline-start: 0;
	width: 5px;
	height: auto;
	background: var(--px-gradient-bloom);
}

.entry-content blockquote p {
	margin: 0;
	color: inherit;
}

/* Tables */
.entry-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--px-border-light);
	border-radius: var(--px-radius-md);
	overflow: hidden;
	font-size: 15px;
}

.entry-content th {
	background: var(--px-bg-surface-sunken);
	color: var(--px-text-primary);
	font-weight: 800;
	text-align: start;
}

.entry-content th,
.entry-content td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--px-border-light);
}

.entry-content tr:last-child td {
	border-bottom: 0;
}

.entry-content code,
.entry-content kbd {
	background: var(--px-bg-surface-sunken);
	color: var(--px-text-primary);
	border-radius: 6px;
}

.entry-content pre {
	background: var(--px-bg-inverse);
	color: var(--px-text-on-inverse);
	border: 0;
	border-radius: var(--px-radius-md);
	direction: ltr;
	text-align: left;
}

.entry-content pre code {
	background: transparent;
	color: inherit;
}

#reading-position-indicator {
	background: var(--px-gradient-bloom);
	height: 4px;
}

.share-buttons .share-links a {
	border-radius: var(--px-radius-md);
	font-weight: 700;
}

.about-author .author-avatar img,
.comment-author img.avatar,
.meta-author-avatar img {
	border-radius: 50%;
}

.about-author .author-name a {
	color: var(--px-text-primary);
	font-weight: 800;
}

.about-author .author-bio {
	color: var(--px-text-secondary);
}

/* ==========================================================================
   9. Comments
   ========================================================================== */

.comment-list .comment-body {
	border-color: var(--px-border-light);
}

.comment-author .fn,
.comment-author .fn a {
	color: var(--px-text-primary);
	font-weight: 800;
}

.comment-metadata,
.comment-metadata a {
	font-size: var(--px-fs-meta);
	font-weight: 600;
	color: var(--px-text-muted);
}

.comment-content p {
	color: var(--px-text-secondary);
}

.comment-list .reply a.comment-reply-link {
	background: var(--px-bg-surface-sunken);
	color: var(--px-accent-text);
	border-radius: var(--px-radius-full);
	font-size: 13px;
	font-weight: 700;
	padding: 3px 14px;
}

.comment-list .reply a.comment-reply-link:hover {
	background: var(--px-tag-bg);
	color: var(--px-tag-text);
}

.comment-form label {
	font-weight: 700;
	color: var(--px-text-primary);
}

/* ==========================================================================
   10. Pagination
   ========================================================================== */

.pages-numbers li a,
.pages-numbers li span,
.pages-nav a,
.show-more-button,
.load-more-button {
	border-radius: var(--px-radius-full);
	border: 1px solid var(--px-border-strong);
	background: var(--px-bg-surface);
	color: var(--px-text-primary);
	font-weight: 700;
}

.pages-numbers li.current span,
.pages-numbers li a:hover,
.pages-nav a:hover,
.show-more-button:hover,
.load-more-button:hover {
	background: var(--px-action);
	border-color: var(--px-action);
	color: #fff;
}

/* ==========================================================================
   11. Footer: Brand Ink canvas (Jannah dark-skin area)
   ========================================================================== */

#footer {
	background: var(--px-bg-inverse);
	color: var(--px-text-on-inverse-muted);
}

#footer .container-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

#footer .widget-title .the-subtitle,
#footer h3,
#footer h4 {
	color: #fff;
}

#footer .widget-title {
	border-color: rgba(255, 255, 255, 0.12);
}

#footer a,
#footer .widget li a {
	color: var(--px-text-on-inverse);
}

#footer a:hover,
#footer .widget li a:hover {
	color: var(--px-brand-cyan);
}

#footer .widget,
#footer .widget p,
#footer .textwidget,
#footer p,
#footer li {
	color: var(--px-text-on-inverse-muted);
}

#site-info {
	background: var(--px-bg-inverse-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--px-text-on-inverse-muted);
	font-size: var(--px-fs-meta);
}

#site-info a {
	color: var(--px-text-on-inverse);
}

#site-info a:hover {
	color: var(--px-brand-cyan);
}

#go-to-top {
	background: var(--px-action);
	color: #fff;
	border-radius: var(--px-radius-full);
	box-shadow: var(--px-shadow-bloom);
}

#go-to-top:hover {
	background: var(--px-action-hover);
}

/* ==========================================================================
   12. Dark mode (html.dark-skin is toggled together with data-theme="dark")
   ========================================================================== */

[data-theme="dark"] .theme-header,
[data-theme="dark"] .main-nav-wrapper,
[data-theme="dark"] #main-nav,
[data-theme="dark"] #main-nav .main-menu-wrapper,
[data-theme="dark"] #main-nav .main-menu,
[data-theme="dark"] #top-nav .breaking,
[data-theme="dark"] #top-nav .breaking-news,
[data-theme="dark"] #top-nav .breaking-news li,
[data-theme="dark"] #top-nav .ticker-wrapper,
[data-theme="dark"] #top-nav .ticker-content,
[data-theme="dark"] #top-nav .ticker-swipe,
[data-theme="dark"] #top-nav .ticker-swipe span {
	background: var(--px-bg-surface);
	color: var(--px-text-primary);
}

[data-theme="dark"] #main-nav .menu > li > a,
[data-theme="dark"] #top-nav .breaking-news a {
	color: var(--px-text-primary);
}

/* The logo is a raster-like <img>; keep it legible on dark */
[data-theme="dark"] #logo img {
	background: #fff;
	border-radius: var(--px-radius-md);
	padding: 6px 12px;
}

[data-theme="dark"] .entry-content a:not(.button) {
	text-decoration-color: rgba(122, 162, 255, 0.45);
}

[data-theme="dark"] .entry-content blockquote {
	background: rgba(37, 99, 255, 0.14);
}

/* ==========================================================================
   13. Responsive & motion
   ========================================================================== */

@media (max-width: 767px) {
	.container-wrapper {
		border-radius: var(--px-radius-lg);
	}

	.entry-content {
		font-size: var(--px-fs-body);
	}

	.entry-content blockquote {
		padding: 16px 20px;
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}