/*
 *	Contacts page — /contacts (templates/thavorn_new/contacts.php)
 *
 *	Standalone flat CSS: there is no SCSS build in the repo, so this file is edited
 *	directly and pulled in through the $page_css hook in sections/public_head.php.
 *	Bump the ?v= in the template when deploying.
 *
 *	Breakpoints follow scss/modules/_mixins.scss: 1199.98 / 991.98 / 767.98 / 575.98.
 */

/*	The global reset zeroes p margins, so the two-paragraph intro from `blogs` runs together. */
.cap .c-intro p + p {
	margin-top: .85em;
}

.cap .c-intro {
	line-height: 1.6;
	max-width: 1000px;
}

.c-hub {
	padding: 10px 0 0;
}

.c-hub_header {
	margin-bottom: 24px;
}

.c-hub_title {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 6px;
}

.c-hub_sub {
	color: var(--color_gray);
	font-size: 1rem;
}

/*	Primary channels — the ones people actually write to. */
.c-hub_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 16px;
}

.c-card {
	--card_color: var(--color_accent);
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 44px 20px 20px;
	border: 1px solid #e6ecf1;
	border-radius: 16px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
	cursor: pointer;
	text-align: left;
	width: 100%;
	font-family: inherit;
}

.c-card:hover,
.c-card:focus-visible {
	border-color: var(--card_color);
	box-shadow: 0 10px 28px rgba(25, 145, 202, .13);
	transform: translateY(-2px);
	outline: none;
}

.c-card_icon-wrap {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f2f7fb; /* fallback for browsers without color-mix() */
	background: color-mix(in srgb, var(--card_color) 12%, #fff);
	color: var(--card_color);
}

.c-card_icon {
	width: 26px;
	height: 26px;
	display: block;
}

.c-card_body {
	display: block;
	min-width: 0;
}

.c-card_label {
	display: block;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	margin-bottom: 3px;
}

.c-card_value {
	display: block;
	font-size: 1rem;
	color: var(--color);
	margin-bottom: 6px;
	overflow-wrap: anywhere;
}

.c-card_cta {
	display: block;
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--color_gray);
}

.c-card_arrow {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	border-right: 2px solid var(--card_color);
	border-bottom: 2px solid var(--card_color);
	transform: rotate(-45deg);
	opacity: .55;
	transition: transform .18s ease, opacity .18s ease;
}

.c-card:hover .c-card_arrow {
	opacity: 1;
	transform: rotate(-45deg) translate(2px, 2px);
}

/*	A copy-to-clipboard card (WeChat) goes nowhere — a chevron there reads as a link, so it
	gets the two-sheets copy glyph instead. */
button.c-card .c-card_arrow {
	width: 13px;
	height: 13px;
	margin-top: -4px;
	border: 2px solid var(--card_color);
	border-radius: 3px;
	transform: none;
}

button.c-card .c-card_arrow::before {
	content: '';
	position: absolute;
	left: -5px;
	top: -5px;
	width: 13px;
	height: 13px;
	border: 2px solid var(--card_color);
	border-radius: 3px;
	opacity: .45;
}

button.c-card:hover .c-card_arrow {
	transform: none;
}

/*	Social row — pages people follow, deliberately quieter than the cards above. */
.c-social {
	margin-top: 28px;
}

.c-social_caption {
	font-size: .875rem;
	color: var(--color_gray);
	margin-bottom: 10px;
}

.c-social_list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.c-social_item {
	--card_color: var(--color_accent);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid #e6ecf1;
	border-radius: 999px;
	text-decoration: none;
	color: var(--color);
	font-size: .9375rem;
	transition: border-color .18s ease, background .18s ease;
}

.c-social_item:hover {
	border-color: var(--card_color);
	background: #f7fafc;
	background: color-mix(in srgb, var(--card_color) 7%, #fff);
}

.c-social_icon {
	width: 20px;
	height: 20px;
	color: var(--card_color);
}

/*	Office block: details on the left, map on the right. */
.c-office {
	padding: 56px 0 0;
}

.c-office_grid {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
}

.c-office_facts {
	display: grid;
	gap: 22px;
	align-content: start;
}

.c-fact {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.c-fact_icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--color_accent);
}

.c-fact_label {
	font-weight: 600;
	margin-bottom: 3px;
}

.c-fact_text {
	line-height: 1.5;
}

.c-office_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.c-office_map {
	min-height: 380px;
	border-radius: 16px;
	overflow: hidden;
}

.c-office_map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/*	Toast for the copy actions (WeChat id, address). */
.c-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(12px);
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--color);
	color: #fff;
	font-size: .9375rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 9999;
}

.c-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media only screen and (max-width: 991.98px) {
	.c-office_grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.c-office_map {
		min-height: 300px;
	}
	.c-hub_title {
		font-size: 1.5rem;
	}
}

@media only screen and (max-width: 575.98px) {
	.c-hub_grid {
		grid-template-columns: 1fr;
	}
	.c-card {
		padding: 16px 40px 16px 16px;
		gap: 12px;
	}
	.c-card_icon-wrap {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}
	.c-office {
		padding-top: 40px;
	}
}