/**
 * Hutway — front-end and editor styles.
 * Written with logical properties so RTL and LTR both behave.
 */

/* Self-hosted Persian webfont (SIL OFL). Paths resolve against assets/css/. */
@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/Vazirmatn-Regular.woff2) format('woff2');
}

@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/Vazirmatn-Bold.woff2) format('woff2');
}

@font-face {
	font-family: 'Vazirmatn';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/Vazirmatn-Black.woff2) format('woff2');
}

/* ---------- base ---------- */
.hw-scheme {
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	-webkit-font-smoothing: antialiased;
}

.hw-scheme a {
	text-decoration: none;
}

.hw-scheme .wp-block-post-date,
.hw-scheme .wp-block-post-terms,
.hw-scheme .wp-block-post-author {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--muted);
}

/* dark sections: header, hero, footer, tip strip */
.hw-dark {
	background: var(--wp--preset--color--ink);
	color: #dfe3ec;
}

.hw-dark a,
.hw-dark .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: #cdd3e0;
}

.hw-dark a:hover,
.hw-dark .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: #fff;
}

.hw-dark--gradient {
	background: radial-gradient(120% 150% at 88% 0%, #26224a 0%, #12141a 60%);
}

/* ---------- logo ---------- */
.hw-logo {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 900;
	font-size: 1.25rem;
	color: #fff;
	line-height: 1.3;
}

.hw-logo__mark {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: .6rem;
	background: linear-gradient(135deg, var(--wp--preset--color--brand), var(--wp--preset--color--teal));
	color: #fff;
	font-size: 1rem;
}

.hw-logo__sub {
	display: block;
	font-size: .7rem;
	font-weight: 500;
	color: #8a93a8;
}

/* ---------- navigation ---------- */
.hw-dark .wp-block-navigation__container {
	gap: .2rem;
}

.hw-dark .wp-block-navigation-item__content {
	padding: .5rem .85rem;
	border-radius: .65rem;
	font-size: .95rem;
}

.hw-dark .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.hw-dark .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background: #1b202c;
	color: #fff;
}

/* ---------- hero ---------- */
.hw-hero__title {
	font-size: clamp(2rem, 4.4vw, 2.9rem);
	font-weight: 900;
	line-height: 1.5;
	color: #fff;
}

.hw-hero__title em {
	font-style: normal;
	color: var(--wp--preset--color--pop);
}

.hw-hero__lead {
	color: #aeb6c8;
	font-size: 1.05rem;
	max-width: 56ch;
}

.hw-hero__search {
	border-radius: 1rem;
	padding: .4rem;
	background: #fff;
}

.hw-hero__search .wp-block-search__inside-wrapper {
	background: transparent;
	border: 0;
	padding: 0;
	gap: .4rem;
}

.hw-hero__search .wp-block-search__input {
	border: 0;
	padding: .7rem .9rem;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: transparent;
}

.hw-kicker {
	display: inline-block;
	padding: .35rem .85rem;
	border-radius: 999px;
	border: 1px solid #ffffff26;
	background: #ffffff14;
	color: #cfc7ff;
	font-size: .8rem;
}

.hw-chip {
	display: inline-block;
	padding: .4rem .8rem;
	border-radius: 999px;
	border: 1px solid #ffffff1f;
	background: #ffffff10;
	color: #dde2ee !important;
	font-size: .8rem;
}

.hw-chip:hover {
	background: #ffffff22;
	color: #fff !important;
}

.hw-chip--light {
	background: #fff;
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-2) !important;
}

.hw-chip--on {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: #fff !important;
}

/* term links inside the dark post header render as chips */
.hw-chip-light {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

.hw-chip-light .wp-block-post-terms__term {
	display: inline-block;
	padding: .3rem .75rem;
	border-radius: 999px;
	border: 1px solid #ffffff1f;
	background: #ffffff10;
	font-size: .78rem;
}

.hw-chip-light .wp-block-post-terms__term:hover {
	background: #ffffff22;
}

/* ---------- cards & loops ---------- */
.hw-card-grid {
	gap: 1.2rem !important;
}

.hw-card-grid > li {
	display: flex;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.1rem;
	box-shadow: 0 1px 2px #12141a0d, 0 12px 28px #12141a0f;
	padding: 1.1rem;
	list-style: none;
}

.hw-card-grid .wp-block-post-title {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.7;
	margin: 0 0 .4rem;
}

.hw-card-grid .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
}

.hw-card-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
}

.hw-card-grid .wp-block-post-excerpt__excerpt {
	font-size: .875rem;
	color: var(--wp--preset--color--muted);
	line-height: 2;
	margin: 0;
}

.hw-card-grid .wp-block-post-featured-image img {
	border-radius: .8rem;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.hw-card-grid__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: auto;
	padding-top: .7rem;
	border-top: 1px dashed var(--wp--preset--color--line);
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- panels ---------- */
.hw-panel {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.1rem;
	box-shadow: 0 1px 2px #12141a0d, 0 12px 28px #12141a09;
	padding: 1.3rem 1.4rem;
}

.hw-panel--brand {
	background: var(--wp--preset--color--brand-soft);
	border-color: #dcd1ff;
}

.hw-panel--dark {
	background: #ffffff0d;
	border: 1px solid #ffffff1a;
	border-radius: 1.4rem;
}

.hw-panel__title {
	font-size: .95rem;
	font-weight: 800;
	margin: 0 0 .7rem;
}

/* ---------- button variants ---------- */
.hw-btn-line {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: .75rem;
	padding: .6rem 1.1rem;
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
}

.hw-btn-line:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand) !important;
}

.hw-dark .hw-btn-line {
	background: #1b202c;
	border-color: #2a2f3d;
	color: #fff !important;
}

/* ---------- tip of the day ---------- */
.hw-tip-strip {
	background: linear-gradient(100deg, #12141a 0%, #241c4a 100%);
	border-radius: 1.4rem;
	color: #fff;
	padding: 1.6rem 1.8rem;
}

.hw-tip-strip h3 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 900;
	color: #fff;
}

.hw-tip-strip p {
	margin: .35rem 0 0;
	color: #b4bbd0;
	font-size: .92rem;
}

/* ---------- article ---------- */
.hw-tldr {
	background: var(--wp--preset--color--brand-soft);
	border: 1px solid #dcd1ff;
	border-radius: 1.1rem;
	padding: 1.1rem 1.3rem;
}

.hw-tldr h4 {
	margin: 0 0 .4rem;
	font-size: .95rem;
	font-weight: 800;
	color: #4a2fbf;
}

.hw-tldr li {
	font-size: .9rem;
	color: #3a2f6b;
}

.hw-steps > * + * {
	margin-top: .8rem;
}

.hw-step {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.1rem;
	padding: 1rem 1.2rem;
}

.hw-step__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: .6rem;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-weight: 800;
	font-size: .8rem;
}

.hw-step h4 {
	margin: .1rem 0 .35rem;
	font-size: 1rem;
	font-weight: 800;
}

.hw-step p {
	margin: 0;
	font-size: .9rem;
	color: var(--wp--preset--color--muted);
}

.hw-callout {
	background: #fff7e6;
	border-inline-start: 4px solid var(--wp--preset--color--pop);
	border-radius: 0 1rem 1rem 0;
	padding: 1rem 1.2rem;
	font-size: .92rem;
	color: #6b4b00;
}

.hw-faq {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	padding: 1rem 1.2rem;
}

.hw-faq h4 {
	margin: 0;
	font-size: .95rem;
	font-weight: 800;
}

.hw-faq p {
	margin: .5rem 0 0;
	font-size: .9rem;
	color: var(--wp--preset--color--muted);
}

/* sticky sidebar on single posts */
.hw-art {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 2.2rem;
	align-items: start;
}

.hw-art__side {
	position: sticky;
	top: 1.5rem;
	display: grid;
	gap: 1rem;
}

.hw-toc {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-toc a {
	display: block;
	padding: .35rem .7rem;
	border-inline-start: 2px solid var(--wp--preset--color--line);
	font-size: .85rem;
	color: var(--wp--preset--color--ink-2);
}

.hw-toc a:hover {
	background: var(--wp--preset--color--bg);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.hw-heading-h2 {
	padding-inline-start: .9rem;
	border-inline-start: 4px solid var(--wp--preset--color--brand);
}

@media (max-width: 900px) {
	.hw-art {
		grid-template-columns: 1fr;
	}

	.hw-art__side {
		position: static;
	}
}

/* ---------- converter workbench ---------- */
.hw-workbench {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.4rem;
	box-shadow: 0 18px 44px #12141a14;
	padding: 1.4rem;
}

.hw-workbench__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.hw-seg {
	display: inline-flex;
	gap: .25rem;
	padding: .25rem;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: .8rem;
}

.hw-seg button {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .85rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	padding: .45rem 1rem;
	border-radius: .6rem;
	cursor: pointer;
}

.hw-seg button.is-on {
	background: var(--wp--preset--color--brand);
	color: #fff;
}

.hw-workbench__stat {
	font-size: .8rem;
	color: var(--wp--preset--color--muted);
}

.hw-io {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.hw-io label {
	display: block;
	font-size: .8rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-2);
	margin-bottom: .35rem;
}

.hw-io textarea {
	width: 100%;
	min-height: 150px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: .9rem;
	padding: .9rem;
	font: inherit;
	font-size: 1rem;
	line-height: 2;
	background: var(--wp--preset--color--bg);
	resize: vertical;
}

.hw-io textarea:focus {
	outline: 2px solid var(--wp--preset--color--brand-soft);
	border-color: var(--wp--preset--color--brand);
}

.hw-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: .9rem;
	font-size: .85rem;
	color: var(--wp--preset--color--ink-2);
}

.hw-opts label {
	display: flex;
	gap: .4rem;
	align-items: center;
	cursor: pointer;
}

.hw-workbench__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin-top: 1rem;
}

.hw-workbench__actions .hw-copy {
	border: 0;
	cursor: pointer;
}

.hw-workbench__note {
	margin: .9rem 0 0;
	font-size: .85rem;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--bg);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: .9rem;
	padding: .8rem 1rem;
}

@media (max-width: 700px) {
	.hw-io {
		grid-template-columns: 1fr;
	}
}

/* ---------- tables (bot commands) ---------- */
.hw-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	overflow: hidden;
	font-size: .9rem;
}

.hw-table th,
.hw-table td {
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: start;
}

.hw-table th {
	background: var(--wp--preset--color--bg);
	font-size: .8rem;
	color: var(--wp--preset--color--muted);
}

.hw-table code {
	font-family: var(--wp--preset--font-family--code);
	background: var(--wp--preset--color--brand-soft);
	color: #4a2fbf;
	padding: .1rem .5rem;
	border-radius: .4rem;
	direction: ltr;
	display: inline-block;
}

/* ---------- footer ---------- */
.hw-foot h4 {
	font-size: .9rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 .6rem;
}

.hw-foot .wp-block-navigation-link,
.hw-foot a {
	font-size: .875rem;
	padding: .2rem 0;
}

.hw-foot__bottom {
	border-top: 1px solid #1d2230;
	margin-top: 1.6rem;
	padding-top: 1rem;
	font-size: .8rem;
	color: #8a93a8;
}

/* ---------- layout shell ---------- */
.hw-shell {
	padding-inline: 1.25rem;
}

.hw-main {
	padding-block: 2rem 3rem;
}

.hw-nav-bar {
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-block: .9rem;
}

.hw-brand-row {
	align-items: center;
	gap: .6rem;
}

.hw-logo-text,
.hw-logo-text a {
	font-weight: 900;
	font-size: 1.3rem;
	line-height: 1.3;
	color: #fff;
	margin: 0;
}

.hw-nav-cta {
	margin-inline-start: auto;
}

/* ---------- hero ---------- */
.hw-hero {
	padding-block: 3.4rem 3.8rem;
}

.hw-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 2.4rem;
	align-items: center;
}

.hw-hero__title {
	margin-block: 1rem .8rem;
}

.hw-hero__search {
	max-width: 30rem;
}

.hw-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
}

.hw-hero__aside {
	padding: 1.2rem 1.3rem;
}

.hw-mini {
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .55rem;
	border-top: 1px solid #ffffff14;
	margin: 0;
}

.hw-mini .wp-block-post-title {
	font-size: .9rem;
	font-weight: 600;
	margin: 0;
}

.hw-mini .wp-block-post-title a {
	color: #eef1f7;
}

.hw-mini .wp-block-post-date {
	color: #8a93a8;
	white-space: nowrap;
	font-size: .7rem;
}

/* ---------- sections ---------- */
.hw-section {
	padding-block: 2.4rem;
}

.hw-section__head {
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-block-end: 1.4rem;
}

.hw-section__title {
	margin: 0;
	font-size: 1.55rem;
	font-weight: 900;
	line-height: 1.6;
}

.hw-section__more {
	margin: 0;
	font-size: .9rem;
	white-space: nowrap;
}

/* ---------- tool cards ---------- */
.hw-tool {
	gap: .55rem;
	height: 100%;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.1rem;
	padding: 1.2rem;
	box-shadow: 0 1px 2px #12141a0d;
}

.hw-tool__icon {
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	margin: 0;
	font-size: 1.2rem;
	background: var(--wp--preset--color--brand-soft);
	border-radius: .8rem;
}

.hw-tool h3 {
	margin: 0;
}

.hw-tool h3 a {
	color: var(--wp--preset--color--ink);
}

.hw-tool__cta {
	margin: auto 0 0;
}

.hw-tool-side {
	display: grid;
	gap: 1rem;
	align-content: start;
}

.hw-tool-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2rem;
	align-items: start;
	padding-block: 2rem;
}

.hw-tool-hero {
	padding-block: 2.2rem;
}

/* ---------- cards grid patch ---------- */
.hw-card-grid > li {
	flex-direction: column;
	gap: .5rem;
}

.hw-cards .wp-block-query-pagination {
	display: flex;
	justify-content: center;
	gap: .4rem;
	margin-top: 2rem;
}

.hw-rel {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-rel__item {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	padding: 1rem 1.1rem;
}

.hw-rel__title {
	font-size: .95rem;
	font-weight: 800;
	line-height: 1.7;
	margin: 0;
}

.hw-rel__title a {
	color: var(--wp--preset--color--ink);
}

.hw-rel__title a:hover {
	color: var(--wp--preset--color--brand);
}

.hw-rel__meta,
.hw-rel__empty {
	font-size: .72rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

@media (max-width: 900px) {
	.hw-rel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.hw-rel {
		grid-template-columns: 1fr;
	}
}

/* ---------- single / archive heads ---------- */
.hw-single-head {
	padding-block: 2.4rem 2rem;
}

.hw-single-title {
	color: #fff;
	font-size: clamp(1.7rem, 3.6vw, 2.3rem);
	margin: 0 0 .8rem;
}

.hw-meta-row {
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	color: #aeb6c8;
	font-size: .8rem;
}

.hw-meta-row a {
	color: #cdd3e0;
}

.hw-meta-row p {
	margin: 0;
}

.hw-page-head {
	padding-block: 2.4rem .6rem;
}

.hw-page-title {
	font-size: clamp(1.6rem, 3.2vw, 2.1rem);
	margin-bottom: .4rem;
}

.hw-cat-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	padding: 0;
	margin: 1.2rem 0 0;
}

.hw-cat-cloud li {
	margin: 0;
}

.hw-cat-cloud a {
	display: inline-block;
	padding: .35rem .8rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background: #fff;
	color: var(--wp--preset--color--ink-2) !important;
	font-size: .8rem;
}

.hw-cat-cloud a:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand) !important;
}

/* ---------- footer ---------- */
.hw-foot-grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	gap: 1.8rem;
}

.hw-foot-col p {
	margin: 0;
}

.hw-foot .hw-logo-text {
	margin-bottom: .6rem;
}

.hw-social {
	margin: .8rem 0 0;
	padding: 0;
}

.hw-foot__bottom {
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
}

.hw-foot__bottom p {
	margin: 0;
}

/* ---------- subscribe / tip rows ---------- */
.hw-subscribe {
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 1.6rem;
}

.hw-tip-row {
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.hw-tip-row p {
	margin: 0;
}

.hw-tip-row__cta .wp-block-button__link {
	white-space: nowrap;
}

/* ---------- tldr ---------- */
.hw-tldr__title {
	font-weight: 800;
	font-size: .95rem;
	color: #4a2fbf;
	margin: 0 0 .4rem;
}

.hw-tldr__list {
	margin: 0;
	padding-inline-start: 1.2rem;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
	.hw-foot-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.hw-hero-grid,
	.hw-tool-grid {
		grid-template-columns: 1fr;
	}

	.hw-card-grid,
	.hw-section .is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.hw-nav-cta {
		display: none;
	}
}

@media (max-width: 640px) {
	.hw-card-grid,
	.hw-related-grid,
	.hw-section .is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	.hw-foot-grid {
		grid-template-columns: 1fr;
	}

	.hw-section__head {
		align-items: flex-start;
	}
}

/* ---------- editor niceties ---------- */
.editor-styles-wrapper .hw-art__side {
	position: static;
}

.editor-styles-wrapper .alignfull {
	margin-inline: 0;
	width: auto;
}