/*
 * Shared front-end styles for the child theme's WPBakery elements.
 * Elements enqueue this stylesheet on demand from their render callback.
 */

.ankla-wpb-profile {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 40px 0;
	max-width: 100%;
	min-width: 0;
	text-align: center;
	width: 100%;
}

.ankla-wpb-profile__photo-frame {
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	margin: 0;
	max-width: 100%;
	position: relative;
	width: 240px;
}

.ankla-wpb-profile__photo {
	border: 5px solid #00bdde;
	border-radius: 50%;
	box-sizing: border-box;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.ankla-wpb-profile__photo--placeholder {
	background-color: #d3d3d3;
}

/*
 * Contact badges: circular icon controls sitting on the photo's edge.
 *
 * Badges start at the bottom of the circle and spread evenly by count
 * (45° apart, symmetric around the bottom). Every field (email, phone,
 * qualifications) is optional, so each badge's left/top is set inline as a
 * percentage of the frame, which tracks any frame shrinkage.
 */

.ankla-wpb-profile__contact {
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	background-color: #00bdde;
	border: 3px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
	display: flex;
	height: 48px;
	justify-content: center;
	padding: 0;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 48px;
}

/* The qualifications badge is a <button> that opens a dialog, not a link. */
button.ankla-wpb-profile__contact {
	cursor: pointer;
	font: inherit;
}

.ankla-wpb-profile__contact:hover {
	filter: brightness(0.92);
}

.ankla-wpb-profile__contact:focus-visible {
	outline: 3px solid #278cac;
	outline-offset: 3px;
}

.ankla-wpb-profile__contact-icon {
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
}

.ankla-wpb-profile__name {
	color: #000000;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	text-wrap: balance;
	white-space: normal;
}

.ankla-wpb-profile__name::after {
	background-color: #00bdde;
	content: "";
	display: block;
	height: 3px;
	margin: 10px auto 0;
	width: 40px;
}

.ankla-wpb-profile__title {
	color: #278cac;
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1.5;
	margin: 12px 0 0;
	text-transform: uppercase;
}

.ankla-wpb-profile__body {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

/*
 * Between the sm (768px) and md (992px) breakpoints the four profiles sit in
 * ~185px-wide columns, so the photo, badges, and title step down one size.
 * Names keep the same 22px size at every breakpoint for a consistent grid.
 */

@media (min-width: 768px) and (max-width: 991.98px) {
	.ankla-wpb-profile__photo-frame {
		width: 200px;
	}

	.ankla-wpb-profile__contact {
		height: 40px;
		width: 40px;
	}

	.ankla-wpb-profile__contact-icon {
		font-size: 16px;
	}

	.ankla-wpb-profile__title {
		font-size: 12px;
	}
}

/*
 * Profile "qualifications, experience and history" popup.
 *
 * A circular badge on the photo (styled like the email/phone contact badges)
 * opens this native <dialog>, which presents the field as formatted text.
 *
 * On wide viewports it is a floating popup beside the badge, positioned by
 * wpbakery-blocks.js toward the side of the badge with more room; the wide
 * rules below only set its size/shape and give a centered fallback for when the
 * script has not (or cannot) position it. On narrow viewports it is a
 * full-screen modal, handled in pure CSS with no script required.
 *
 * The panel, not the dialog, is the visible card and owns its box-shadow. The
 * dialog rules set overflow: visible because the UA's :modal rule clips with
 * overflow: auto, which would cut the panel's shadow at the dialog edge;
 * box-shadow: none suppresses the old UA's own :modal shadow (current Chrome
 * no longer paints one).
 *
 * The layout rules are scoped to the open states so the UA's `display: none`
 * for a closed <dialog> is preserved (author styles would otherwise override
 * it and leave closed dialogs visible). The dialog is a flex column so the
 * title and close button stay put and only the content scrolls on overflow.
 *
 * The :modal and [open] states are styled in separate rules, never one comma
 * list: on browsers that use the open-attribute fallback but do not recognize
 * :modal, the combined list is invalid as a whole and the [open] branch is
 * discarded, leaving the fallback without its fixed layout. A closed fallback
 * also has no UA display:none to hide it, so that is done explicitly below.
 */

.ankla-wpb-profile__bio-dialog:modal {
	background-color: transparent;
	border: 0;
	/* The UA :modal rule clips with overflow: auto; the panel owns the card shadow (box-shadow: none also drops the old UA's own). */
	box-shadow: none;
	box-sizing: border-box;
	/* Neutralize the UA `inset: 0` on :modal so each mode positions itself. */
	inset: auto;
	margin: 0;
	overflow: visible;
	padding: 0;
	position: fixed;
}

.ankla-wpb-profile__bio-dialog[open] {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	box-sizing: border-box;
	inset: auto;
	margin: 0;
	overflow: visible;
	padding: 0;
	position: fixed;
}

/*
 * Browsers without a native <dialog> have no UA rule hiding a closed custom
 * element; hide the closed fallback explicitly so its content cannot render
 * inline before activation. No-op for native <dialog>, which the UA already
 * hides while closed.
 */
.ankla-wpb-profile__bio-dialog:not([open]) {
	display: none;
}

/*
 * Some browsers (current Chromium among them) give the modal backdrop a
 * non-transparent default; make it transparent so the page behind is not
 * dimmed. The backdrop element still captures outside clicks to close.
 */
.ankla-wpb-profile__bio-dialog::backdrop {
	background-color: transparent;
}

.ankla-wpb-profile__bio-panel {
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	padding: 28px;
	position: relative;
	width: 100%;
}

.ankla-wpb-profile__bio-title {
	color: #000000;
	flex: none;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 56px 0 0;
}

.ankla-wpb-profile__bio-close {
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	appearance: none;
	background-color: transparent;
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
	color: #278cac;
	cursor: pointer;
	display: flex;
	font: inherit;
	height: 40px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 40px;
	min-width: 40px;
	padding: 0;
	position: absolute;
	right: 16px;
	text-align: center;
	top: 16px;
	width: 40px;
}

.ankla-wpb-profile__bio-close-icon {
	font-size: 20px;
	line-height: 1;
}

.ankla-wpb-profile__bio-close:hover {
	background-color: rgba(39, 140, 172, 0.12);
}

.ankla-wpb-profile__bio-close:focus-visible {
	outline: 3px solid #278cac;
	outline-offset: 2px;
}

.ankla-wpb-profile__bio-content {
	color: #000000;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	margin-top: 12px;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ankla-wpb-profile__bio-content > * + * {
	margin-top: 12px;
}

.ankla-wpb-profile__bio-content h1,
.ankla-wpb-profile__bio-content h2,
.ankla-wpb-profile__bio-content h3,
.ankla-wpb-profile__bio-content h4,
.ankla-wpb-profile__bio-content h5,
.ankla-wpb-profile__bio-content h6 {
	color: #278cac;
	font-weight: 700;
	line-height: 1.3;
}

.ankla-wpb-profile__bio-content a {
	color: #278cac;
}

.ankla-wpb-profile__bio-content ul,
.ankla-wpb-profile__bio-content ol {
	padding-left: 20px;
}

/*
 * Wide viewports: a floating popup beside the badge. The centered transform is
 * a fallback for before the script positions it (or if it is disabled); the
 * script overrides left/top/transform inline to sit next to the badge.
 */

@media (min-width: 768px) {
	.ankla-wpb-profile__bio-dialog:modal {
		display: flex;
		flex-direction: column;
		left: 50%;
		max-height: min(70vh, 640px);
		top: 50%;
		transform: translate(-50%, -50%);
		width: min(360px, calc(100vw - 32px));
	}

	.ankla-wpb-profile__bio-dialog[open] {
		display: flex;
		flex-direction: column;
		left: 50%;
		max-height: min(70vh, 640px);
		top: 50%;
		transform: translate(-50%, -50%);
		width: min(360px, calc(100vw - 32px));
	}

	.ankla-wpb-profile__bio-panel {
		max-height: min(70vh, 640px);
	}
}

/* Narrow viewports: a full-viewport modal with an inset card. */

@media (max-width: 767.98px) {
	.ankla-wpb-profile__bio-dialog:modal {
		display: flex;
		flex-direction: column;
		height: 100%;
		inset: 0;
		max-height: none;
		max-width: none;
		padding: 16px;
		width: 100%;
	}

	.ankla-wpb-profile__bio-dialog[open] {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* top/left instead of inset: the fallback may run on browsers that
		   predate inset support. */
		left: 0;
		max-height: none;
		max-width: none;
		padding: 16px;
		top: 0;
		width: 100%;
	}

	.ankla-wpb-profile__bio-panel {
		padding: 24px 20px 40px;
	}

	.ankla-wpb-profile__bio-title {
		font-size: 19px;
	}
}