/*
 * Shared styles for the "Haqqında", "Üzvlük", "Ədəbiyyat", "Sertifikasiya",
 * and "IPMA {Level} Dərəcəsi" content-page templates (page-haqqinda.php,
 * page-uzvluk.php, page-edebiyyat.php, page-sertifikasiya.php,
 * page-derece-detail.php). Only enqueued on pages using one of those
 * templates (see inc/enqueue.php).
 */

/* ---------------------------------------------------------------------
 * Anchor sections — scroll-margin-top offsets the jump so the sticky
 * header (72px min-height, see header.css) doesn't cover the section
 * when navigated to via #haqqimizda-overview / #uzvler links.
 * ------------------------------------------------------------------- */

.content-anchor-section {
	scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------------
 * Page-title banner
 * ------------------------------------------------------------------- */

.page-title-banner {
	background: var(--azpma-bg-light);
	padding: 3.5em 1.5em;
	text-align: center;
}

.page-title-banner-inner {
	max-width: var(--ast-normal-container-width, 1200px);
	margin: 0 auto;
}

.page-title-banner-heading {
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	font-weight: 700;
	color: var(--azpma-text);
}

.page-title-banner-tagline {
	margin: 0.6em 0 0;
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--azpma-text);
	opacity: 0.7;
}

/* ---------------------------------------------------------------------
 * Body copy column
 * ------------------------------------------------------------------- */

.content-page-body {
	padding: 3.5em 1.5em;
}

.content-page-column {
	max-width: 760px;
	margin: 0 auto;
}

.content-page-tagline {
	margin: 0 0 1.5em;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--azpma-text);
	opacity: 0.75;
}

.content-page-text {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--azpma-text);
}

.content-page-text p {
	margin: 0 0 1.2em;
}

.content-page-text p:last-child {
	margin-bottom: 0;
}

.content-page-text + .content-page-text {
	margin-top: 1.2em;
}

/* ---------------------------------------------------------------------
 * Checklist (#haqqimizda-overview section)
 * ------------------------------------------------------------------- */

.content-checklist {
	list-style: none;
	margin: 2em 0 0;
	padding: 0;
}

.content-checklist-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9em;
	padding: 0.9em 0;
}

.content-checklist-icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 24px;
	height: 24px;
	margin-top: 0.15em;
	color: var(--azpma-primary);
}

.content-checklist-icon svg {
	width: 100%;
	height: 100%;
}

.content-checklist-text {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--azpma-text);
}

/* ---------------------------------------------------------------------
 * Mission / Vision cards (#uzvler section)
 * ------------------------------------------------------------------- */

.mv-section {
	padding: 0 1.5em 4.5em;
}

.mv-grid {
	max-width: var(--ast-normal-container-width, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5em;
}

.mv-card {
	padding: 2.5em 2em;
	background: var(--azpma-white);
	border: 1px solid var(--ast-global-color-6);
	border-radius: var(--azpma-radius);
}

.mv-card-icon {
	display: inline-block;
	font-size: 2.2rem;
	line-height: 1;
	margin-bottom: 0.6em;
}

.mv-card-title {
	margin: 0 0 0.6em;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--azpma-text);
}

.mv-card-text {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--azpma-text);
	opacity: 0.9;
}

.mv-card-text p {
	margin: 0 0 1em;
}

.mv-card-text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.mv-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Team block (#uzvler section — category tabs + member grid)
 * ------------------------------------------------------------------- */

.team-block {
	max-width: var(--ast-normal-container-width, 1200px);
	margin: 0 auto;
	padding: 0 1.5em 4.5em;
}

.team-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.75em;
	margin: 0 0 2.5em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid var(--ast-global-color-6);
}

.team-tab {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0.4em 0.1em;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--azpma-text);
	opacity: 0.6;
	cursor: pointer;
	position: relative;
}

.team-tab:hover,
.team-tab:focus {
	opacity: 0.85;
	background: none;
	color: var(--azpma-text);
	border-color: transparent;
}

.team-tab.is-active:hover,
.team-tab.is-active:focus {
	color: var(--azpma-primary);
}

.team-tab.is-active {
	color: var(--azpma-primary);
	opacity: 1;
}

.team-tab.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.85em;
	height: 2px;
	background: var(--azpma-primary);
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2em 1.5em;
}

.team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3em;
}

.team-card-photo {
	display: block;
	width: 96px;
	height: 96px;
	margin-bottom: 0.6em;
	border-radius: 50%;
	overflow: hidden;
	background: var(--azpma-bg-light);
}

.team-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--azpma-text);
	opacity: 0.35;
}

.team-card-photo-placeholder svg {
	width: 44%;
	height: 44%;
}

.team-card-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--azpma-text);
}

.team-card-info {
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--azpma-text);
	opacity: 0.65;
}

.team-empty {
	margin: 0;
	padding: 2.5em 1em;
	text-align: center;
	font-size: 0.95rem;
	color: var(--azpma-text);
	opacity: 0.55;
}

@media (max-width: 900px) {
	.team-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.team-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------------
 * Info tabs (page-uzvluk.php — Tərəfdaşlıq / Fərdi Üzvlük / Tələbələr
 * Üçün / Üstünlüklər). Same visual recipe as the Team block's tabs above,
 * kept as a separate component (different class names) since it's an
 * unrelated feature on a different page.
 * ------------------------------------------------------------------- */

.info-tabs-block {
	max-width: var(--ast-normal-container-width, 1200px);
	margin: 0 auto;
	padding: 1em 1.5em 4.5em;
}

.info-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.75em;
	margin: 0 0 2.5em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid var(--ast-global-color-6);
}

.info-tab {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0.4em 0.1em;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--azpma-text);
	opacity: 0.6;
	cursor: pointer;
	position: relative;
}

.info-tab:hover,
.info-tab:focus {
	opacity: 0.85;
	background: none;
	color: var(--azpma-text);
	border-color: transparent;
}

.info-tab.is-active {
	color: var(--azpma-primary);
	opacity: 1;
}

.info-tab.is-active:hover,
.info-tab.is-active:focus {
	color: var(--azpma-primary);
}

.info-tab.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.85em;
	height: 2px;
	background: var(--azpma-primary);
}

.info-panel-subheading {
	margin: 1.5em 0 0.5em;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--azpma-text);
}

.info-panel-docs-intro {
	margin: 0 0 1em;
	font-size: 0.98rem;
	color: var(--azpma-text);
	opacity: 0.8;
}

.doc-links {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.doc-links li {
	padding: 0.5em 0;
}

.doc-link {
	font-size: 0.98rem;
	font-weight: 500;
	color: var(--azpma-primary);
	text-decoration: none;
}

.doc-link:hover {
	text-decoration: underline;
}

.doc-link-pending {
	color: var(--azpma-text);
	opacity: 0.55;
	cursor: default;
}

.doc-link-action {
	font-weight: 400;
	opacity: 0.75;
}

.fee-note {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--azpma-text);
}

/* ---------------------------------------------------------------------
 * Book grid (page-edebiyyat.php)
 * ------------------------------------------------------------------- */

.book-grid-wrap {
	padding: 1em 1.5em 4.5em;
}

.book-grid {
	max-width: var(--ast-normal-container-width, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2em;
}

.book-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4em;
}

.book-cover {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4.25;
	margin-bottom: 0.6em;
	background: var(--azpma-bg-light);
	border-radius: var(--azpma-radius);
	overflow: hidden;
}

.book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.book-title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--azpma-text);
}

.book-link {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--azpma-primary);
	text-decoration: none;
}

.book-link:hover {
	color: var(--azpma-primary-dark);
	text-decoration: underline;
}

@media (max-width: 560px) {
	.book-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5em;
	}
}

/* ---------------------------------------------------------------------
 * Section sub-headings (Dərəcələr / Resertifikasiya / Yenidən
 * sertifikasiya / Tələblər / Əsas kompetensiya / Sənədlər / Digər
 * dərəcələr, etc.) — a smaller weight than .page-title-banner-heading
 * (a page's single <h1>), used to mark a sub-section within a page.
 * ------------------------------------------------------------------- */

.content-section-heading {
	margin: 0 0 1em;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	font-weight: 700;
	color: var(--azpma-text);
}

/* ---------------------------------------------------------------------
 * Checkmark lists — brand-red circular checkmark bullets, applied
 * generically to any <ul><li> an editor adds via a WYSIWYG field (not a
 * one-off hardcoded list), so future edits to bdm_content, resert_
 * documents, or a level's competency field automatically keep the same
 * look. Harmless on fields with no <ul> at all (plain paragraphs only).
 * ------------------------------------------------------------------- */

.checkmark-list ul {
	list-style: none;
	margin: 1.5em 0;
	padding: 0;
}

.checkmark-list li {
	position: relative;
	padding: 0.4em 0 0.4em 2.4em;
	line-height: 1.6;
}

.checkmark-list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0.4em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--azpma-primary);
	color: var(--azpma-white);
	font-size: 0.7rem;
	line-height: 1;
}

/* ---------------------------------------------------------------------
 * Numbered steps (yenidensert_steps, a level's documents_required) — same
 * recipe as the checkmark list above, but with the step number itself as
 * the marker, via a CSS counter (works with any <ol> length an editor
 * produces). Scoped to the top-level <ol> > <li> only (not "any li") so a
 * nested sub-bullet — e.g. documents_required's "Ərizə" item, which
 * carries its own explanatory <ul><li>Asessor tərəfindən..." — doesn't
 * also pick up a numbered circle; nested lists get a plain small/muted
 * bullet instead.
 * ------------------------------------------------------------------- */

.numbered-steps > ol {
	list-style: none;
	counter-reset: azpma-step;
	margin: 1.5em 0;
	padding: 0;
}

.numbered-steps > ol > li {
	counter-increment: azpma-step;
	position: relative;
	padding: 0.3em 0 0.3em 2.6em;
	margin-bottom: 0.9em;
	line-height: 1.6;
}

.numbered-steps > ol > li:last-child {
	margin-bottom: 0;
}

.numbered-steps > ol > li::before {
	content: counter(azpma-step);
	position: absolute;
	left: 0;
	top: 0.15em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--azpma-primary);
	color: var(--azpma-white);
	font-size: 0.85rem;
	font-weight: 700;
}

.numbered-steps > ol > li ul {
	list-style: disc;
	margin: 0.5em 0 0;
	padding-left: 1.2em;
}

.numbered-steps > ol > li ul li {
	font-size: 0.88rem;
	color: var(--azpma-text);
	opacity: 0.65;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Level cards — a badge/title/description/[price]/link card, used for
 * the Sertifikasiya page's "Dərəcələr" row (4 cards, with price) and
 * page-derece-detail.php's "Digər dərəcələr" row (3 cards, no price).
 * Same flat-card visual recipe as the front page's .front-card (thin
 * border, no shadow, --azpma-radius corners), kept as its own class
 * rather than reusing .front-card directly since front-page.css isn't
 * enqueued on either of these templates. auto-fit means the same grid
 * class works whether it holds 3 or 4 cards without a page-specific
 * column-count override.
 * ------------------------------------------------------------------- */

.level-cards-wrap {
	padding: 1em 1.5em 0;
}

.level-cards-inner {
	max-width: var(--ast-normal-container-width, 1200px);
	margin: 0 auto;
}

.level-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5em;
}

.level-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2em 1.5em;
	background: var(--azpma-white);
	border: 1px solid var(--ast-global-color-6);
	border-radius: var(--azpma-radius);
}

.level-badge {
	display: inline-block;
	margin-bottom: 0.9em;
	padding: 0.3em 0.8em;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--azpma-white);
	background: var(--azpma-primary);
	border-radius: 999px;
}

.level-card-title {
	margin: 0 0 0.6em;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--azpma-text);
}

.level-card-desc {
	margin: 0 0 1em;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--azpma-text);
	opacity: 0.85;
}

.level-card-price {
	margin: 0 0 0.5em;
	font-size: 1rem;
	font-weight: 700;
	color: var(--azpma-text);
}

.level-card-link {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--azpma-primary);
	text-decoration: none;
}

.level-card-link:hover {
	color: var(--azpma-primary-dark);
	text-decoration: underline;
}