/*
 * Shared components for the frontpage and the Podcast, Speaking, Contact and
 * Blog pages.
 *
 * Every rule is scoped to the `.sj-page` wrapper group that exists in both
 * the saved content and the block editor canvas. Layout, column widths,
 * image sizes, spacing, colours and font sizes are left to block settings;
 * this file only supplies the brand fonts, a few decorative details and
 * keyboard focus styles that blocks cannot express.
 */

.sj-page {
	--sj-gold: #fbac0e;
	--sj-ink: #001524;
	--sj-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sj-serif: "Libre Baskerville", georgia, "Times New Roman", serif;
	--global-body-font-family: var(--sj-sans);
	--global-heading-font-family: var(--sj-serif);
	font-family: var(--sj-sans);
}

/* Kadence sets headings to `inherit` in the editor; heading blocks have no font-family control here. */
.sj-page .wp-block-heading {
	font-family: var(--sj-serif);
}

/* A sans-serif heading, such as the frontpage hero title and topic names. */
.sj-page .sj-sans {
	font-family: var(--sj-sans);
}

@media (prefers-reduced-motion: no-preference) {

	html:has(.sj-page) {
		scroll-behavior: smooth;
	}
}

.sj-page [id] {
	scroll-margin-top: 1rem;
}

/* A serif accent line set in a paragraph block. */
.sj-page .sj-serif {
	font-family: var(--sj-serif);
}

/*
 * Comfortable line length for intro paragraphs; centred when the block is
 * centred. The element and block classes outrank the editor's own max-width
 * reset inside Kadence rows, so the editor shows the same line length.
 */
.sj-page p.sj-measure.wp-block-paragraph {
	max-width: 36rem;
}

.sj-page p.sj-measure.wp-block-paragraph.has-text-align-center {
	margin-inline: auto;
}

/* Eyebrow label followed by a short gold rule, as in the Canva pages. */
.sj-page .sj-rule::after {
	content: "";
	display: inline-block;
	width: 3.5rem;
	height: 1px;
	margin-left: 1rem;
	vertical-align: middle;
	background: var(--sj-gold);
}

/* Keyboard focus on dark and gold backgrounds. */
.sj-page .kb-button:focus-visible,
.sj-page .kadence-video-popup-link:focus-visible,
.sj-page .wp-block-button__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--sj-ink);
}

/*
 * Video popup thumbnail: a white ring around the block's "stacked" play
 * button, matching Canva. The free block saves but does not output its
 * play-button colour settings, so the ring is drawn here.
 */
.sj-page .kt-video-svg-icon-style-stacked {
	border: 3px solid rgba(255, 255, 255, 0.9);
	background: rgba(0, 0, 0, 0.35);
}

/* Contact form card: Forminator renders its own markup, so it is styled here. */
.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] {
	font-family: var(--sj-sans);
}

.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] input:not([type="checkbox"]):not([type="radio"]),
.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] textarea {
	border-radius: 6px;
}

.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit {
	border-radius: 6px;
	background-color: var(--sj-gold);
	color: var(--sj-ink);
	font-family: var(--sj-sans);
	font-weight: 700;
}

.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover {
	background-color: #ffc247;
	color: var(--sj-ink);
}

/* Forminator removes focus outlines; restore a visible keyboard ring. */
.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] input:focus-visible,
.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] textarea:focus-visible,
.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] select:focus-visible,
.sj-page .sj-form-card .forminator-ui.forminator-custom-form[data-design] button:focus-visible {
	outline: 3px solid var(--sj-ink);
	outline-offset: 2px;
}

/* Frontpage book cover: a soft shadow that follows the cut-out shape. */
.sj-page .sj-book img {
	filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.28));
}

/* Frontpage topic grid spacing; Kadence turns off the block gap setting. */
.sj-page .sj-topics {
	gap: 2rem 1.5rem;
}

/* Frontpage topic names: keep long words such as "Entrepreneurship" whole. */
.sj-page .sj-topic__title {
	hyphens: manual;
	overflow-wrap: normal;
	word-break: normal;
}

/* Frontpage hero portrait: on phones, cap its size and centre it. */
@media (max-width: 767px) {

	.sj-page .sj-portrait img {
		display: block;
		max-width: min(100%, 26rem);
		margin-inline: auto;
	}
}

/*
 * Blog page. The grid, card colours, border, padding and font sizes are
 * Query Loop and group block settings; these rules add the gaps (Kadence
 * turns off the block gap setting), the title accent, the card shadow and
 * corner clipping, the gold edge on cards without a featured image, and
 * link and pagination states.
 */
.sj-page .sj-blog .wp-block-post-template {
	gap: clamp(1.5rem, 2.5vw, 2rem);
}

.sj-page .sj-blog-card {
	gap: 0;
}

/* Kadence adds a bottom margin to groups; without it, cards with no image start straight at the text. */
.sj-page .sj-blog-card > .sj-blog-card__media {
	margin: 0;
}

.sj-page .sj-blog-card__body {
	gap: 0.75rem;
}

.sj-page .sj-accent::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: 1rem;
	background: var(--sj-gold);
}

.sj-page .wp-block-post-title {
	font-family: var(--sj-serif);
}

/* Keep the intro left-aligned in the editor too, where blocks are centred by default. */
.sj-page .sj-blog__intro .sj-measure {
	margin-left: 0;
}

.sj-page .sj-blog-card {
	height: 100%;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 21, 36, 0.04), 0 6px 20px rgba(0, 21, 36, 0.05);
}

.sj-page .sj-blog-card:not(:has(.wp-block-post-featured-image)) {
	box-shadow: inset 0 3px 0 var(--sj-gold), 0 1px 2px rgba(0, 21, 36, 0.04), 0 6px 20px rgba(0, 21, 36, 0.05);
}

.sj-page .sj-blog-card .wp-block-post-featured-image {
	margin: 0;
}

.sj-page .sj-blog-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.sj-page .sj-blog .wp-block-post-title a {
	text-decoration: none;
}

.sj-page .sj-blog .wp-block-post-title a:hover,
.sj-page .sj-blog .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sj-page .sj-blog a:focus-visible {
	outline: 2px solid var(--sj-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.sj-page .wp-block-query-pagination {
	gap: 0.5rem;
	font-weight: 500;
}

.sj-page .wp-block-query-pagination a,
.sj-page .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border-radius: 6px;
	color: var(--sj-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sj-page .wp-block-query-pagination .page-numbers.current {
	background: var(--sj-ink);
	color: #fff;
	text-decoration: none;
}

.sj-page .wp-block-query-no-results a {
	color: var(--sj-ink);
	text-decoration: underline;
}

/* Photo collage: a slight tilt on wide screens only; sizes come from the image blocks. */
@media (min-width: 1025px) {

	.sj-page .sj-collage > .wp-block-image:nth-child(odd) {
		rotate: -2deg;
	}

	.sj-page .sj-collage > .wp-block-image:nth-child(even) {
		rotate: 2deg;
	}
}