/* ==========================================================================
   COMMUNITY CSS - page-community.php only (see inc/enqueue.php).
   Covers the hero, the social cards, the ambassador panel and the
   application form/modal.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   Deep navy with two soft radial highlights rather than a flat block - it
   reads as a considered header instead of a coloured band, and costs nothing
   (no image, no extra request).
   -------------------------------------------------------------------------- */
.community-hero {
	position: relative;
	overflow: hidden;
	/* The same flat surface as the homepage hero, the stats bar and the footer.
	   Kept as the bare token rather than a gradient stack so it can't drift
	   away from them the way the old three-stop version had. */
	background: var(--color-navy-dark);
	color: #fff;
	padding-block: 64px 72px;
	text-align: center;
}
/* Depth without a gradient. A full-width band of flat navy with centred text
   and no photo behind it reads as dead space, so this lays two very low
   blooms over it - teal from above, a hint of accent from below right. Both
   are faint enough that the surface still reads as the same flat navy as the
   rest of the site; they only stop the corners from going lifeless.
   On a pseudo-element so the base colour above stays a single token. */
.community-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(820px 340px at 50% -25%, rgba(2, 139, 147, 0.30), transparent 68%),
		radial-gradient(560px 260px at 96% 118%, rgba(241, 143, 19, 0.12), transparent 64%);
}
.community-hero__inner {
	position: relative;
	max-width: 760px;
}
.community-hero__title {
	margin: 0 0 16px;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.community-hero__lead {
	margin: 0 auto;
	max-width: 620px;
	font-size: clamp(15px, 2vw, 17.5px);
	line-height: 1.65;
	color: #C2DDE0;
}

/* --- The two paths -------------------------------------------------------------
   This page offers two separate things, and previously you had to scroll to
   find that out. Putting the choice in the hero makes the page's structure
   the first thing you see.

   The card stacks: icon and title on one line, then the description, then the
   link. Laying all three across one row squeezed the copy into a narrow
   middle column and broke the titles across awkward lines.
   ---------------------------------------------------------------------------- */
.community-paths {
	display: grid;
	gap: 14px;
	margin-top: 34px;
	text-align: left;
}
.community-path {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 22px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.community-path:hover {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.32);
	transform: translateY(-3px);
}
/* The ambassador path is the page's real conversion, so it carries the accent
   - the one orange element above the fold here. */
.community-path--accent {
	border-color: rgba(241, 143, 19, 0.5);
	background: rgba(241, 143, 19, 0.1);
}
.community-path--accent:hover {
	background: rgba(241, 143, 19, 0.18);
	border-color: var(--color-accent);
}
.community-path__head {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 12px;
}
.community-path__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: #7FE3E8;
}
.community-path--accent .community-path__icon {
	background: rgba(241, 143, 19, 0.18);
	color: var(--color-accent);
}
.community-path__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
.community-path__text {
	display: block;
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.65;
	color: #B9C9DA;
}
/* Pushed to the bottom so the two cards' links line up even when their
   descriptions run to different lengths. */
.community-path__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}
.community-path--accent .community-path__cta {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}
.community-path:hover .community-path__cta {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.4);
}
.community-path--accent:hover .community-path__cta {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}
.community-path__cta svg {
	transition: transform 0.16s ease;
}
.community-path:hover .community-path__cta svg {
	transform: translateX(3px);
}

@media (min-width: 760px) {
	.community-paths {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.community-path,
	.community-path__cta,
	.community-path__cta svg {
		transition: none;
	}
	.community-path:hover {
		transform: none;
	}
}

/* --- Shared section heading ------------------------------------------------ */
.community-section__head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 34px;
}
.community-section__title {
	margin: 0 0 8px;
	font-size: clamp(23px, 3.2vw, 30px);
	letter-spacing: -0.015em;
	color: var(--color-navy-900);
}
.community-section__sub {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 15.5px;
}
.community-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 18px 20px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: 14px;
	text-align: center;
}

/* --- Social cards ----------------------------------------------------------
   auto-fit means the grid reflows on its own between one and three columns,
   so it stays right whether the client has two platforms configured or five.
   -------------------------------------------------------------------------- */
.social-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 18px;
}
.social-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.05);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* A tint of the platform's own colour washing down from the top edge - enough
   to identify the card at a glance without turning it into a brand block. */
.social-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--social-brand, var(--color-primary));
}
.social-card:hover,
.social-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(16, 24, 40, 0.12);
	border-color: rgba(15, 23, 42, 0.12);
}
.social-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--social-brand, var(--color-primary-ink));
	color: #fff;
	flex: 0 0 auto;
}
.social-card__icon svg {
	width: 22px;
	height: 22px;
}
.social-card__body {
	display: block;
	flex: 1 1 auto;
}
.social-card__name {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	margin-bottom: 5px;
}
.social-card__blurb {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
}
.social-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--social-brand, var(--color-primary));
}
.social-card__cta svg {
	transition: transform 0.18s ease;
}
.social-card:hover .social-card__cta svg {
	transform: translateX(3px);
}

/* Brand colours, set once as a custom property each card's parts read from. */
.social-card--instagram { --social-brand: #d62976; }
.social-card--facebook  { --social-brand: #1877f2; }
.social-card--linkedin  { --social-brand: #0a66c2; }
.social-card--tiktok    { --social-brand: #111827; }
.social-card--whatsapp  { --social-brand: #1da851; }

/* Instagram's mark is a gradient in its brand guidelines, so the tile gets
   the real thing while the rest of the card uses the flat fallback above. */
.social-card--instagram .social-card__icon {
	background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}

@media (prefers-reduced-motion: reduce) {
	.social-card,
	.social-card__cta svg {
		transition: none;
	}
	.social-card:hover {
		transform: none;
	}
}

/* --- Ambassador panel ------------------------------------------------------ */
.community-ambassador {
	padding-top: 0;
}
.ambassador-panel {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 32px;
	padding: clamp(26px, 4vw, 46px);
	border-radius: var(--radius-lg);
	background: var(--color-navy-dark);
	/* The one orange element on this page below the fold. It sits on a dark
	   surface, where the accent is 7.48:1 rather than the 2.42:1 it manages on
	   white, and it marks the panel that holds the page's actual conversion. */
	border-top: 3px solid var(--color-accent);
	color: #fff;
}
/* Same treatment as the hero above: a single soft teal bloom out of the top
   corner instead of a gradient, so the panel matches the site's flat dark
   surfaces while still having a light source. */
.ambassador-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(600px 280px at 100% 0%, rgba(2, 139, 147, 0.32), transparent 66%);
}
/* The bloom is painted over the panel background, so its contents have to be
   lifted above it or the text sits underneath. */
.ambassador-panel__content,
.ambassador-steps {
	position: relative;
	z-index: 1;
}
.ambassador-panel__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7FC6CC;
}
.ambassador-panel__title {
	margin: 0 0 14px;
	font-size: clamp(23px, 3.4vw, 32px);
	line-height: 1.18;
	letter-spacing: -0.015em;
}
.ambassador-panel__desc {
	margin: 0 0 26px;
	max-width: 52ch;
	font-size: 15.5px;
	line-height: 1.7;
	color: #C2DDE0;
}
.ambassador-panel__cta {
	font-size: 15px;
	padding: 14px 24px;
	white-space: normal;
}
/* Sits under the call to action rather than inside the form, so it is read
   before applying rather than at the point of submitting. The same terms are
   also linked from the consent checkbox in the form itself. */
.ambassador-panel__terms {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: #B9C9DA;
}
.ambassador-panel__terms svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--color-accent);
}
.ambassador-panel__terms a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ambassador-panel__terms a:hover {
	color: var(--color-accent);
}

/* --- "What happens next" steps --------------------------------------------- */
.ambassador-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	align-content: start;
}
.ambassador-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.ambassador-step__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.ambassador-step__body {
	flex: 1 1 auto;
	min-width: 0;
}
.ambassador-step__title {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
	margin-bottom: 3px;
}
.ambassador-step__text {
	display: block;
	font-size: 13.5px;
	line-height: 1.6;
	color: #A9CBCF;
}
.ambassador-step__num {
	flex: 0 0 auto;
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, 0.16);
}

@media (min-width: 900px) {
	.ambassador-panel {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: center;
		gap: 46px;
	}
}

/* --- Status notice ---------------------------------------------------------- */
.community-notice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 22px;
	padding: 13px 16px;
	border-radius: var(--radius-md);
	font-size: 14px;
	line-height: 1.55;
}
.community-notice svg {
	flex: 0 0 auto;
	margin-top: 1px;
}
/* Both tints were left over from the palette that preceded the rebrand - the
   green in particular was the old --color-resources value, which no longer
   exists anywhere else on the site. Re-tuned to the current success and
   danger hues, kept light enough to stay legible on the dark panel. */
.community-notice.is-success {
	background: rgba(46, 169, 122, 0.16);
	border: 1px solid rgba(46, 169, 122, 0.45);
	color: #CFF3E2;
}
.community-notice.is-error {
	background: rgba(204, 42, 30, 0.18);
	border: 1px solid rgba(204, 42, 30, 0.5);
	color: #FFD9D5;
}

/* --- Application form ------------------------------------------------------
   Rendered as an ordinary section by default so it works without JS. The
   .is-modal class is added by assets/js/ambassador-apply.js, and only then
   does any of the overlay behaviour below apply.
   -------------------------------------------------------------------------- */
.ambassador-apply {
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px 64px;
}
.ambassador-apply__dialog {
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
	padding: clamp(22px, 3.5vw, 34px);
}
.ambassador-apply__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}
.ambassador-apply__title {
	margin: 0 0 5px;
	font-size: clamp(19px, 2.6vw, 23px);
	letter-spacing: -0.01em;
	color: var(--color-navy-900);
}
.ambassador-apply__sub {
	margin: 0;
	font-size: 13.5px;
	color: var(--color-text-muted);
}
.ambassador-apply__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-text-muted);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.ambassador-apply__close:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.ambassador-apply__row {
	display: grid;
	gap: 0 16px;
}
/* --- Photo field ----------------------------------------------------------
   The native control is styled rather than replaced by a fake button: it
   keeps keyboard and screen-reader behaviour, and on mobile it opens the
   camera/gallery picker for free.
   -------------------------------------------------------------------------- */
.ambassador-apply__form input[type="file"] {
	width: 100%;
	font-size: 14px;
	padding: 10px 12px;
	background: #fff;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.ambassador-apply__form input[type="file"]:hover {
	border-color: var(--color-primary);
}
.ambassador-apply__form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	color: var(--color-navy-900);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}
.ambassador-apply__form input[type="file"]::file-selector-button:hover {
	background: #DCEDEF;
}
.form-hint {
	margin: 7px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--color-text-muted);
}
.form-error {
	margin: 7px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-danger);
}
.form-error[hidden] {
	display: none;
}

.ambassador-apply__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 22px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--color-text-muted);
}
.ambassador-apply__consent input {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
}
.ambassador-apply__consent a {
	color: var(--color-primary);
	text-decoration: underline;
}
.ambassador-apply__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ambassador-apply__actions .btn {
	flex: 1 1 auto;
	justify-content: center;
}

@media (min-width: 640px) {
	.ambassador-apply__row {
		grid-template-columns: 1fr 1fr;
	}
	.ambassador-apply__actions .btn {
		flex: 0 0 auto;
	}
}

/* --- Modal mode (JS only) --------------------------------------------------- */
.ambassador-apply.is-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	max-width: none;
	margin: 0;
	padding: 0;
	display: none;
}
.ambassador-apply.is-modal.is-open {
	display: block;
}
.ambassador-apply.is-modal .ambassador-apply__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(1, 34, 79, 0.55);
	backdrop-filter: blur(2px);
}
.ambassador-apply.is-modal .ambassador-apply__dialog {
	position: relative;
	/* Sits just off the top on desktop and scrolls internally, so a long form
	   on a short screen can still reach its submit button. */
	max-width: 760px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	margin: 24px auto;
	animation: mindship-apply-in 0.2s ease;
}

@keyframes mindship-apply-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Full-screen on phones - a floating card with margins wastes the little
   width there is, and the on-screen keyboard eats the rest. */
@media (max-width: 599px) {
	.ambassador-apply.is-modal .ambassador-apply__dialog {
		max-width: none;
		max-height: 100%;
		height: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ambassador-apply.is-modal .ambassador-apply__dialog {
		animation: none;
	}
}