/* Reading face for every page. Pinar only had Regular and ExtraBold, so
   medium text and headings collapsed into one heavy cut. */
:root {
	--pk-font: "Vazirmatn", Tahoma, sans-serif;
}

body {
	font-family: var(--pk-font);
	font-weight: 400;
}

button,
input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

.pk-heading__title {
	font-weight: 700;
	line-height: 1.35;
}

.pkh-year__num,
.pk-plan__badge,
.pk-step__label,
.pk-footer__brand {
	font-weight: 700;
}

/* Desktop header. Sizes are the approved 1920 preview; html zoom scales them with the canvas. */
.pk-dhead {
	display: none;
}

@media (min-width: 1025px) {
	.pk-header {
		position: relative;
		z-index: 30;
		height: auto;
		overflow: visible;
	}

	.pk-header__inner {
		height: 0;
		min-height: 0;
		pointer-events: none;
	}

	.pk-header__bg,
	.pk-header .pk-logo,
	.pk-header__cta,
	.pk-header .pk-nav {
		display: none !important;
	}

	.pk-dhead {
		display: block;
		position: relative;
		width: 100%;
		font-family: Vazirmatn, sans-serif;
		z-index: 2;
	}

	.pk-dhead__bar img {
		display: block;
		width: 100%;
		height: 180px;
	}

	.pk-dhead__row {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
		align-items: start;
		gap: 16px;
		padding: 0 28px;
		box-sizing: border-box;
	}

	.pk-dhead__nav {
		grid-column: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		align-self: start;
		position: relative;
		top: 35.6%;
		transform: translateY(-50%);
		gap: 22px;
		min-width: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		direction: ltr;
	}

	.pk-dhead__nav > li > a {
		display: inline-block;
		color: #575757;
		font-size: 18px;
		font-weight: 500;
		line-height: 1.4;
		text-decoration: none;
		white-space: nowrap;
	}

	.pk-dhead__nav > li > a:hover,
	.pk-dhead__nav > li > a:focus-visible,
	.pk-dhead__nav > li > a.is-current {
		color: #000;
	}

	.pk-dhead__nav > li > a.is-current {
		font-weight: 700;
	}

	.pk-dhead__more { position: relative; display: flex; align-items: center; z-index: 6; }

	.pk-dhead__morebtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 14px;
		background: transparent;
		color: #4f0f0e;
		cursor: pointer;
	}

	.pk-dhead__morebtn svg { width: 26px; height: 26px; display: block; }

	.pk-dhead__morebtn:hover,
	.pk-dhead__more.is-open .pk-dhead__morebtn {
		border-color: #a98355;
		color: #4f0f0e;
		background: #fffbf5;
	}

	.pk-dhead__drop {
		position: absolute;
		top: calc(100% + 18px);
		right: -6px;
		width: 276px;
		padding: 18px 14px 14px;
		border: 1px solid #a98355;
		border-radius: 22px;
		background: #fffbf5;
		box-shadow: 0 18px 40px rgba(79, 15, 14, .16);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}

	.pk-dhead__drop::before {
		content: "";
		position: absolute;
		top: -7px;
		right: 16px;
		width: 12px;
		height: 12px;
		background: #fffbf5;
		border-top: 1px solid #a98355;
		border-right: 1px solid #a98355;
		transform: rotate(-45deg);
	}

	.pk-dhead__more.is-open .pk-dhead__drop {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}

	.pk-dhead__orn {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 6px 12px;
	}

	.pk-dhead__orn i { flex: 1; height: 1px; background: #a98355; }
	.pk-dhead__orn svg { width: 14px; height: 14px; display: block; }

	.pk-dhead__drop a {
		display: flex;
		direction: rtl;
		align-items: center;
		gap: 12px;
		margin-top: 6px;
		padding: 10px 12px;
		border-radius: 14px;
		color: #4f0f0e;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.4;
		text-decoration: none;
		white-space: nowrap;
	}

	.pk-dhead__drop a:hover,
	.pk-dhead__drop a:focus-visible { background: #f7e8d6; }
	.pk-dhead__drop a.is-current { font-weight: 700; }

	.pk-dhead__ico {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		flex: none;
		border: 1px solid #a98355;
		border-radius: 12px;
		color: #a98355;
	}

	.pk-dhead__drop a:hover .pk-dhead__ico,
	.pk-dhead__drop a:focus-visible .pk-dhead__ico { background: #4f0f0e; color: #f7e8d6; border-color: #4f0f0e; }
	.pk-dhead__ico svg { width: 18px; height: 18px; display: block; }

	.pk-dhead__note {
		margin: 12px 6px 2px;
		color: #775951;
		font-size: 12px;
		line-height: 1.6;
		text-align: center;
	}

	.pk-dhead__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		width: calc(105.6px * 1.1);
		aspect-ratio: 307 / 357;
		transform: translate(calc(-50% - 8px), -62%);
		z-index: 2;
		pointer-events: auto;
	}

	.pk-dhead__logo img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.pk-dhead__tools {
		grid-column: 3;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		align-self: start;
		position: relative;
		top: 35.6%;
		transform: translateY(-50%);
		gap: 12px;
		min-width: 0;
		direction: ltr;
	}

	.pk-dhead__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 52px;
		padding: 0 24px;
		border-radius: 16px;
		background: #4f0f0e;
		color: #fff;
		font-size: 18px;
		font-weight: 500;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
	}

	.pk-dhead__btn:hover,
	.pk-dhead__btn:focus-visible {
		background: #6e1c1b;
		color: #fff;
	}

	.pk-dhead__flags {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.pk-dhead__flags img {
		display: block;
		width: 28px;
		height: 28px;
		object-fit: cover;
		border-radius: 50%;
	}
}

/* Mobile menu mark, 10% larger than the size already on screen. */
@media (max-width: 1024px) {
	.pk-mhead__logo {
		width: calc(79px * 1.1);
		height: calc(76px * 1.1);
	}
}

@media (max-width: 767px) {
	/* The mark is drawn for the 440px frame (83x80, shown 10% larger) and scales with the header
	   shape, so it never outgrows a narrow header or looks lost in a wide one. */
	.pk-site .pk-mhead__logo {
		width: calc(83 * 1.1 * 100vw / 440);
		height: calc(80 * 1.1 * 100vw / 440);
	}
}

/* History years: the number, title and paragraph share the arch width.
   The column is wider than the arch and right-aligns a full-width paragraph,
   so the body used to start past the title. */
@media (min-width: 1025px) {
	.pkh-year__num,
	.pkh-year__title,
	.pkh-year__desc {
		width: 172.94px;
		min-width: 172.94px;
		max-width: 172.94px;
	}

	.pkh-year__num {
		text-align: center;
	}

	.pkh-year__title,
	.pkh-year__desc {
		text-align: right;
	}
}

@media (min-width: 1920px) {
	.pkh-year__num,
	.pkh-year__title,
	.pkh-year__desc {
		width: calc(172.94px * var(--pk-wide, 1));
		min-width: calc(172.94px * var(--pk-wide, 1));
		max-width: calc(172.94px * var(--pk-wide, 1));
	}
}

/* Nav links: 44px tall hit area without moving the layout. */
.pk-dhead__nav > li > a { display: inline-block; padding: 12px 10px; margin: -12px -10px; }