/*
 * MDS Avada Shortcodes — Stylesheet
 * File: assets/mds-avada-shortcodes.css
 *
 * Color tokens map to Avada Global Colors set in Avada > Theme Options > Colors:
 *   --mds-navy     → Avada Global Color 1  (#1b2d4f)
 *   --mds-gold     → Avada Global Color 4  (#c5a95a)
 *   --mds-gold-dk  → Avada Global Color 4 darkened (#a8893a)
 *   --mds-white    → Avada Global Color 5  (#ffffff)
 *   --mds-grey-bg  → Avada Global Color 6  (#f5f5f5)
 *   --mds-text     → Avada Global Color 7  (#333333)
 *   --mds-muted    → Avada Global Color 8  (#666666)
 *   --mds-border   → #e0e0e0
 *
 * If Avada CSS Variables are available (Avada 7.7+), you can replace
 * --mds-navy with var(--awb-color1) etc. throughout this file.
 */

/* ── Token definitions ──────────────────────────────────────────────────────── */
:root {
	--mds-navy:    #1b2d4f;
	--mds-gold:    #c5a95a;
	--mds-gold-dk: #a8893a;
	--mds-white:   #ffffff;
	--mds-grey-bg: #f5f5f5;
	--mds-text:    #333333;
	--mds-muted:   #666666;
	--mds-border:  #e0e0e0;
	--mds-font:    'Helvetica Neue', Helvetica, Arial, sans-serif;
	--mds-max-w:   1100px;
	--mds-radius:  4px;
}

/* ── Section base ───────────────────────────────────────────────────────────── */
.mds-section {
	padding: 72px 24px;
	font-family: var(--mds-font);
	box-sizing: border-box;
}
.mds-section *,
.mds-section *::before,
.mds-section *::after {
	box-sizing: border-box;
}
.mds-section__inner {
	max-width: var(--mds-max-w);
	margin: 0 auto;
}
.mds-section--white { background-color: var(--mds-white); }
.mds-section--grey  { background-color: var(--mds-grey-bg); }
.mds-section--navy  { background-color: var(--mds-navy); }
.mds-centered       { text-align: center; }

/* ── Shared typography ──────────────────────────────────────────────────────── */
.mds-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mds-gold);
	margin: 0 0 10px;
}
.mds-divider {
	border: none;
	border-top: 2px solid var(--mds-gold);
	width: 50px;
	margin: 0 0 28px;
}
.mds-divider--center { margin-left: auto; margin-right: auto; }

.mds-section__heading {
	font-size: clamp(22px, 3vw, 34px);
	font-weight: 700;
	color: var(--mds-navy);
	line-height: 1.25;
	margin: 0 0 16px;
}
.mds-section__heading--light { color: var(--mds-white); }

.mds-section__subtext {
	font-size: 16px;
	color: var(--mds-muted);
	line-height: 1.75;
	max-width: 680px;
	margin: 0 0 16px;
}
.mds-centered .mds-section__subtext { margin-left: auto; margin-right: auto; }
.mds-section__subtext--light { color: rgba(255, 255, 255, 0.75); }

/* ── Shared SVG icon sizing ─────────────────────────────────────────────────── */
.mds-section svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
	vertical-align: middle;
}

/* ── Button base ────────────────────────────────────────────────────────────── */
.mds-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--mds-radius);
	font-family: var(--mds-font);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	cursor: pointer;
	border: 2px solid transparent;
}
.mds-btn svg { width: 16px; height: 16px; }

.mds-btn--primary {
	background: var(--mds-gold);
	color: var(--mds-navy);
}
.mds-btn--primary:hover { background: var(--mds-gold-dk); color: var(--mds-navy); }

.mds-btn--ghost {
	background: transparent;
	color: var(--mds-white);
	border-color: rgba(255, 255, 255, 0.5);
}
.mds-btn--ghost:hover { border-color: var(--mds-gold); color: var(--mds-gold); }

.mds-btn--navy {
	background: var(--mds-navy);
	color: var(--mds-white);
}
.mds-btn--navy:hover { opacity: 0.88; color: var(--mds-white); }

.mds-btn--full { width: 100%; justify-content: center; }

.mds-btn-group {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 28px;
}
.mds-centered .mds-btn-group { justify-content: center; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ════════════════════════════════════════════════════════════════════════════ */
.mds-hero {
	background-color: var(--mds-navy);
	padding: 52px 24px 48px;
	text-align: center;
}
.mds-hero__inner {
	max-width: 820px;
	margin: 0 auto;
}
.mds-hero__heading {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	color: var(--mds-white);
	line-height: 1.2;
	margin: 0 0 20px;
}
.mds-hero__body {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.7;
	margin: 0 0 32px;
}
.mds-hero .mds-btn-group { justify-content: center; margin-top: 0; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 2 — SCOPE CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.mds-scope__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 48px;
	text-align: left;
}
.mds-scope-card {
	background: var(--mds-white);
	border: 1px solid var(--mds-border);
	border-top: 4px solid var(--mds-gold);
	border-radius: var(--mds-radius);
	padding: 32px 28px;
}
.mds-scope-card__icon {
	width: 48px;
	height: 48px;
	background: #f0ece0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.mds-scope-card__icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--mds-gold-dk);
}
.mds-scope-card__title {
	font-size: 17px;
	font-weight: 700;
	color: var(--mds-navy);
	margin: 0 0 10px;
}
.mds-scope-card__body {
	font-size: 15px;
	color: var(--mds-muted);
	line-height: 1.7;
	margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 3 — PROCESS STEPS
   ════════════════════════════════════════════════════════════════════════════ */
.mds-steps {
	list-style: none;
	margin: 52px 0 0;
	padding: 0;
}
.mds-step {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding: 32px 0;
	border-bottom: 1px solid var(--mds-border);
}
.mds-step:first-child { border-top: 1px solid var(--mds-border); }

.mds-step__num {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--mds-navy);
	color: var(--mds-white);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mds-step__content { flex: 1; }
.mds-step__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--mds-navy);
	margin: 0 0 8px;
}
.mds-step__body {
	font-size: 15px;
	color: var(--mds-muted);
	line-height: 1.7;
	margin: 0;
}
.mds-step__arrow {
	align-self: center;
	flex-shrink: 0;
	margin-left: auto;
}
.mds-step__arrow svg {
	width: 28px;
	height: 28px;
	stroke: var(--mds-gold);
	stroke-width: 2;
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 4 — UPDATES & COMMUNICATION
   ════════════════════════════════════════════════════════════════════════════ */
.mds-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.mds-updates__intro {
	font-size: 15px;
	color: var(--mds-muted);
	line-height: 1.75;
	margin: 0 0 8px;
}
.mds-checklist {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
.mds-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 0;
	font-size: 15px;
	color: var(--mds-text);
	border-bottom: 1px solid var(--mds-border);
	line-height: 1.6;
}
.mds-checklist__item:last-child { border-bottom: none; }

.mds-check-icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: var(--mds-gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.mds-check-icon svg {
	width: 11px;
	height: 11px;
	stroke: var(--mds-navy);
	stroke-width: 3;
}

/* Contact card (navy box) */
.mds-contact-card {
	background: var(--mds-navy);
	border-radius: 6px;
	padding: 40px 36px;
	color: var(--mds-white);
}
.mds-contact-card__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--mds-gold);
	margin: 0 0 20px;
}
.mds-contact-line {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.8);
}
.mds-contact-line:last-of-type { border-bottom: none; }
.mds-contact-line svg { stroke: var(--mds-gold); }
.mds-contact-line a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}
.mds-contact-line a:hover { color: var(--mds-gold); }
.mds-contact-card__cta { margin-top: 24px; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 5 — CPD & EDUCATION
   ════════════════════════════════════════════════════════════════════════════ */
.mds-cpd__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 40px;
	text-align: left;
}
.mds-cpd-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--mds-radius);
	padding: 28px 24px;
}
.mds-cpd-card__icon {
	margin-bottom: 14px;
	display: block;
}
.mds-cpd-card__icon svg {
	width: 30px;
	height: 30px;
	stroke: var(--mds-gold);
	stroke-width: 1.6;
}
.mds-cpd-card__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--mds-white);
	margin: 0 0 8px;
}
.mds-cpd-card__body {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.65;
	margin: 0 0 16px;
}
.mds-cpd-card__link {
	display: inline-block;
	color: var(--mds-gold);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--mds-gold);
	padding-bottom: 2px;
}
.mds-cpd-card__link:hover { color: var(--mds-white); border-color: var(--mds-white); }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 6 — CTA STRIP
   ════════════════════════════════════════════════════════════════════════════ */
.mds-cta-strip {
	background: var(--mds-gold);
	padding: 48px 24px;
}
.mds-cta-strip__inner {
	max-width: var(--mds-max-w);
	margin: 0 auto;
}
.mds-cta-strip__heading {
	font-size: 28px;
	font-weight: 700;
	color: var(--mds-navy);
	margin: 0 0 10px;
}
.mds-cta-strip__body {
	font-size: 16px;
	color: var(--mds-navy);
	opacity: 0.85;
	margin: 0 0 28px;
}
.mds-cta-strip .mds-btn--navy { border-color: transparent; }


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */

/* Tablet (≤900px) */
@media (max-width: 900px) {
	.mds-two-col {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.mds-scope__grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
	.mds-section { padding: 52px 20px; }
	.mds-hero    { padding: 40px 20px; }

	.mds-scope__grid,
	.mds-cpd__grid {
		grid-template-columns: 1fr;
	}
	.mds-step       { flex-wrap: wrap; gap: 16px; }
	.mds-step__arrow { display: none; }

	.mds-btn-group { flex-direction: column; align-items: stretch; }
	.mds-btn       { justify-content: center; }

	.mds-contact-card { padding: 28px 20px; }

	.mds-cta-strip__heading { font-size: 22px; }
}