/* =============================================================================
   14-advice-resources.css
   Advice & Resources page: journey steps, callout cards, markers, highlights.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* ======================
|| ADVICE & RESOURCES
   .advice_band is the shared "section" (divider line + heading spacing) — 
   put it on any <section class="container-holding thing"> on this page 
   instead of keying it to an #id, so adding a 3rd/4th section
   later doesn't mean copy-pasting id-based rules or colliding IDs.
========================= */

.advice_band {
	padding: 20px 0px 40px;
}
.advice_band > .container::before {
	content: "";
	display: block;
	height: 1px;
	background-color: var(--js-blue);
	margin-bottom: 30px;
}
.advice_band > .container > h1 {
	margin-bottom: 38px;
}

/* --- Journey steps container: 4 equal cards, 2 per row --- */
.journey_steps_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 24px;
}
@media only screen and (max-width: 640px) {
	.journey_steps_container {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* Dotted connector between the two cards in the top row ONLY. Anchored to
   the first card itself (not the whole grid), so it can only ever bridge
   into the gap on its right — there's no way for it to reach row 2. */
.journey_steps_container > .advice_callout:first-child {
	position: relative;
}
.journey_steps_container > .advice_callout:first-child::after {
	content: "";
	position: absolute;
	top: 48px;
	right: -24px;
	width: 24px;
	height: 2px;
	background-image: repeating-linear-gradient(to right, #cfe8e6 0 6px, transparent 6px 10px);
}
@media only screen and (max-width: 640px) {
	.journey_steps_container > .advice_callout:first-child::after {
		display: none; /* cards stack to 1 column below this — no row left to connect */
	}
}

/* --- Tailored support container: 
   one full-width card per topic. 
   Add more sections later by dropping in another .advice_callout, no grid math to redo. 
   If this grows into a wall of several short similar-height cards, 
   swap to grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
   instead of single-column --- */
.resources_section_container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}


/* === ADVICE CALLOUT - Dedicated card component for this page only. === */
.advice_callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	height: 100%;
	padding: 24px 26px;
	border-radius: 8px;
	background-color: var(--js-white);
	border: 2px solid var(--js-blue);
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
		border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.advice_callout:hover,
.advice_callout:focus-within {
	transform: translateY(-4px);
	border-color: #0a7a74;
	background-color: color-mix(in srgb, var(--js-blue) 8%, var(--js-white));
	box-shadow: 0 14px 30px rgba(14, 180, 171, 0.18);
}
/* Tinted cards deepen their own tint instead of flipping to the plain
   hover background above */
.advice_callout_tint:hover,
.advice_callout_tint:focus-within {
	background-color: color-mix(in srgb, var(--js-blue) 18%, var(--js-white));
}

@media only screen and (max-width: 850px) {
	.advice_callout {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.advice_callout,
	.advice_marker {
		transition: none;
	}
	.advice_callout:hover,
	.advice_callout:focus-within {
		transform: none;
	}
}

.advice_callout_tint {
	background-color: color-mix(in srgb, var(--js-blue) 12%, var(--js-white));
}

.advice_callout_inner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 14px;
	row-gap: 6px;
	/* flex: 1 1 auto; */
}
.advice_callout_inner .advice_marker {
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
}
.advice_callout_inner h2 {
	/* color: var(--js-grey); */
	grid-column: 2;
	grid-row: 1;
	margin-bottom: 5px;
	padding: 5px 0;
	font-size: 18pt;
}
.advice_callout_inner p {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	color: var(--js-grey);
	max-width: 640px;
}
.advice_callout_action {
	flex: 0 0 auto;
}

/* Vertical variant: 
	content on top, link(s) stacked below and pinned to the bottom of the card, 
	so a row of cards with uneven text still lines up */
.advice_callout_stack {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}
.advice_callout_stack .advice_callout_inner {
	flex: 1 1 auto;
}
.advice_callout_stack .advice_callout_inner p {
	max-width: none;
}
.advice_callout_stack .advice_callout_action {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: auto;
	padding-top: 10px;
}

/* Row variant: when a card has more than one action link and they should
   sit side by side instead of stacked. Wraps to a new line on narrow
   cards, so it behaves like a small list either way. */
.advice_callout_stack .advice_callout_action.advice_callout_action_row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}


/* --- Marker: the circle/square badge sitting above a card's heading -----
   .advice_marker holds the shared shape/position; add ONE modifier for what it looks like. 
   Put straight on the badge itself 
   -------------------------------------------------------------------------- */
.advice_marker {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	margin-bottom: 14px;
	border-radius: 50%;
	font-size: 18pt;
	line-height: 1;
	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out,
		color 0.2s ease-in-out;
}
/* Solid numbered circle — steps 1–4 */
.advice_marker_number {
	background-color: var(--js-blue);
	color: var(--js-white);
	font-family: "effrabold";
}
/* Outlined icon square (Bootstrap Icons) */
.advice_marker_icon {
	border-radius: 20%;
	border: 2px solid var(--js-blue);
	background-color: var(--js-white);
	color: var(--js-blue);
	font-size: 18pt;
}

/* Badges lift slightly and deepen colour when their card is hovered/focused */
.advice_callout:hover .advice_marker,
.advice_callout:focus-within .advice_marker {
	transform: translateY(-3px) scale(1.06);
}
.advice_callout:hover .advice_marker_number,
.advice_callout:focus-within .advice_marker_number {
	background-color: #0a7a74;
}
.advice_callout:hover .advice_marker_icon,
.advice_callout:focus-within .advice_marker_icon {
	background-color: var(--js-blue);
	color: var(--js-white);
}

/* Short tick above a marker to link with the card above it. 
Add straight to whichever marker should show it. */
.advice_marker_connector::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 20px;
	background-color: #cfe8e6;
}

/* --- Highlight: 
	> USAGE: "International students" note nested inside Search-for-opportunities card. 
	Its own small component, not a reused/nested .advice_callout 
	so its padding can't get knocked out by a modifier for a different card. --- */
.advice_highlight {
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: 6px;
	border-left: 4px solid var(--js-blue);
	background-color: color-mix(in srgb, var(--js-blue) 10%, var(--js-white));
}
.advice_highlight h2 {
	margin-bottom: 10px;
}
.advice_highlight p {
	margin: 0;
}

.list_resources {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.list_resources li {
	list-style: none;
	background-image: none;
	padding-left: 0;
	margin: 0;
	font-size: 12pt;
	line-height: 17pt;
}

/* minmax uses max-content, not 1fr, so a short list (3 items) doesn't get
   stretched into a few very wide tiles — items keep their natural width
   and a longer list (8 items) still wraps into neat rows either way */
.list_jobboards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
	gap: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.jobboard_item_wrap {
	margin: 0;
	padding: 0;
	list-style: none;
	background-image: none;
}
.jobboard_item_wrap a {
	display: block;
	height: 100%;
	width: 100%;
	font-size: 12pt;
	padding: 10px 15px;
	text-align: left;
	line-height: 13pt;
	text-decoration: none;
	background: var(--js-grey);
	color: var(--js-white);
	transition: all 0.15s ease-in-out;
	border: 2px solid var(--js-grey);
	border-radius: 4px;
}
.jobboard_item_wrap a:hover,
.jobboard_item_wrap a:focus-visible {
	color: #0a7a74;
	background: var(--js-white);
	border: 2px solid var(--js-blue);
}

#all_blogs_section {
	padding: 30px 0;
}

#all_blogs_section>.container::before {
	content: "";
	display: block;
	height: 1px;
	background-color: var(--js-blue);
	margin-bottom: 30px;
}

#all_blogs_section>.container>h1 {
	margin-bottom: 38px;
}