/*
Theme Name: Step by Step
Theme URI: https://stepbystep.co.nz
Author: Step by Step
Description: Custom block theme for Step by Step - NZQA-accredited digital and workplace skills training. Brand colours, fonts and button styles are set in theme.json; page content is edited normally in the WordPress block editor.
Version: 1.12.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stepbystep
*/

/* ---------------------------------------------------------------------
   Readability
   ------------------------------------------------------------------ */

/*
 * Sections run the full 1160px so multi-column layouts have room. A
 * paragraph sitting on its own directly inside a section would then run
 * to roughly 140 characters a line, which is unreadable, so cap those.
 * Text inside columns is already narrow and is left alone.
 */
.wp-block-post-content > .wp-block-group > p {
	max-width: 64ch;
}

/* Headings shouldn't stretch the full width either - they read better
   broken earlier, and it stops long headings looking like body copy. */
.wp-block-post-content > .wp-block-group > h1,
.wp-block-post-content > .wp-block-group > h2 {
	max-width: 22ch;
}

/*
 * WordPress's constrained layout gives every direct child
 * `margin-inline: auto` alongside a max-width of the content size. The
 * two caps above override only the max-width, so each element kept
 * centring itself at its own narrower width - a 22ch heading and a 64ch
 * paragraph in the same section landed on different left edges, and
 * neither lined up with the buttons or columns below them.
 *
 * The fix is to give the capped elements the same left edge a normal
 * constrained child would have: half the leftover space, which is where
 * an uncapped 1160px block starts. max() clamps it to 0 once the
 * container is narrower than the content size, so narrow screens are
 * untouched. Pinning to 0 instead would look correct at 1280 but drag
 * the text to the far left edge on a wide monitor.
 *
 * Scoped to blocks that aren't explicitly centred in the editor, so
 * setting a heading to centred still behaves as expected.
 *
 * !important is required, not preferred: core emits that auto margin as
 * `margin-left: auto !important`, so no amount of specificity wins.
 */
.wp-block-post-content > .wp-block-group > p:not(.has-text-align-center):not(.has-text-align-right),
.wp-block-post-content > .wp-block-group > h1:not(.has-text-align-center):not(.has-text-align-right),
.wp-block-post-content > .wp-block-group > h2:not(.has-text-align-center):not(.has-text-align-right) {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
}

/* Let short headings break sensibly rather than leaving one orphan word. */
h1, h2, h3, h4 {
	text-wrap: balance;
}

/* ---------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------ */

/*
 * No bullets - these are navigation lists, not prose. Deliberately not
 * scoped to the footer: the 404 template and the related-policies blocks
 * on the legal pages use it too, and a footer-only rule left them
 * showing bullets with no obvious cause.
 */
.sbs-plain-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.sbs-plain-list li {
	margin-bottom: 0.45rem;
}

/* ---------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

/*
 * Links in the footer sit on navy. The site-wide link colour is a deep
 * orange chosen for white backgrounds and would be close to unreadable
 * here, so override to near-white with an orange hover.
 */
footer a {
	color: #e8eef7;
	text-decoration: none;
}

footer a:hover,
footer a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * The reversed logo is 452px wide, which fills the entire first footer
 * column and outweighs the three text columns beside it. Capped so it
 * reads as a mark rather than a banner. Raise or remove this number to
 * make it larger.
 */
footer .wp-block-image img {
	max-width: 260px;
	height: auto;
}

/* ---------------------------------------------------------------------
   Links on navy sections
   ------------------------------------------------------------------ */

/*
 * The site-wide link colour is a deep orange chosen for white
 * backgrounds. On the navy hero it computes to 2.94:1 against the
 * background - under the 4.5:1 minimum, and the contact page puts a
 * phone number and an email address there. Same problem the footer
 * already solved, so solve it the same way for any navy section.
 *
 * Buttons are excluded: their anchor is also an <a>, and it carries its
 * own colours from theme.json.
 */
.has-contrast-background-color a:not(.wp-block-button__link),
.has-contrast-2-background-color a:not(.wp-block-button__link) {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.has-contrast-background-color a:not(.wp-block-button__link):hover,
.has-contrast-2-background-color a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

/*
 * Brand: logo with the wordmark as a fallback.
 *
 * The site-logo block renders nothing at all until a logo is uploaded in
 * WordPress, which would leave the header with no branding whatsoever.
 * So the text site title sits alongside it and is hidden only once a
 * logo actually exists. If :has() is unavailable both show, which is
 * untidy but still legible - better than an empty header.
 *
 * width MUST stay auto. The logo wrapper is a flex item that sizes to its
 * content, so `width: 100%` is circular - the image asks the wrapper how
 * wide it is, the wrapper asks the image, and both resolve to zero. That
 * collapsed the logo to 0x0 and, because the fallback keys off the <img>
 * existing rather than having size, it hid the wordmark too and left the
 * header with no branding at all.
 */
.sbs-brand .wp-block-site-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 190px;
}

.sbs-brand:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

@media (max-width: 600px) {
	.sbs-brand .wp-block-site-logo img {
		max-width: 150px;
	}
}

/* Keep the nav and its button from colliding as the row wraps. */
.wp-block-navigation {
	row-gap: 0.5rem;
}

header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-2);
}

/* ---------------------------------------------------------------------
   Rhythm
   ------------------------------------------------------------------ */

/*
 * Sections define their own vertical padding, so the default gap between
 * top-level blocks would double it up and leave the page feeling loose.
 */
.wp-block-post-content > .wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------
   Long-form documents (terms, privacy)
   ------------------------------------------------------------------ */

/*
 * Legal pages set their own narrow measure on a nested group, so the
 * 64ch/22ch caps above don't apply to them. Numbered clauses need more
 * air between them than marketing copy does.
 */
.sbs-legal h2 {
	margin-top: 3rem;
	font-size: 1.5rem;
}

.sbs-legal h3 {
	margin-top: 2rem;
	font-size: 1.1rem;
	color: var(--wp--preset--color--contrast-2);
}

.sbs-legal li {
	margin-bottom: 0.4rem;
}

/*
 * Tables carry the definitions and the data-sharing matrix. Rules only
 * where they do work - a hairline under each row - rather than a box
 * around every cell.
 *
 * The overflow-x is load-bearing: without it a three-column table is
 * wider than a phone and drags the whole page sideways, which shows up
 * as every section being scrollable rather than as a wide table. Let the
 * table scroll inside its own figure instead.
 *
 * Do not add a max-width here. It would tie with core's constrained
 * layout rule on specificity, win on load order, and quietly widen every
 * table out of the 760px measure the legal pages set.
 */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	font-size: 0.95rem;
}

.wp-block-table th,
.wp-block-table td {
	border: none;
	border-bottom: 1px solid #dfe5ee;
	padding: 0.85rem 1.25rem 0.85rem 0;
	text-align: left;
	vertical-align: top;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	border-bottom-width: 2px;
	border-bottom-color: var(--wp--preset--color--contrast);
}

/* First column of a definitions table is the term being defined. */
.sbs-defs td:first-child {
	font-weight: 600;
	white-space: nowrap;
	padding-right: 2rem;
}

/* On a phone, let the term wrap rather than forcing a wide scroll for
   the sake of keeping "Hardware Loan Agreement" on one line. */
@media (max-width: 600px) {
	.sbs-defs td:first-child {
		white-space: normal;
		padding-right: 1rem;
	}
}

/* ---------------------------------------------------------------------
   Courses
   ------------------------------------------------------------------ */

.sbs-cat .sbs-eyebrow {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	margin: 0;
}

/*
 * Course cards. Framed rather than separated by whitespace alone - a
 * deliberate reversal of the earlier no-boxes preference, agreed once the
 * page grew to 33 courses and needed the extra structure.
 *
 * height:100% is what makes cards in a row match: WordPress columns are
 * flex items that already stretch, so the card only has to fill the
 * column it sits in. The tag row then uses margin-top:auto to sit on the
 * floor of the card rather than trailing the description, which is what
 * keeps the tags aligned across a row of uneven text.
 */
.sbs-course {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid #dfe5ee;
	padding: 26px 26px 22px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sbs-course:hover {
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 8px 24px rgba(19, 41, 75, 0.09);
	transform: translateY(-3px);
}

.sbs-course h3 {
	font-size: 1.1rem;
	margin: 0;
}

.sbs-course .sbs-dur {
	margin: 6px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
	font-variant-numeric: tabular-nums;
}

.sbs-course p:not(.sbs-dur):not(.sbs-tags) {
	margin: 14px 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast-2);
}

.sbs-course .sbs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto 0 0;
	padding-top: 20px;
}

.sbs-tag {
	font-size: 0.67rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	background: var(--wp--preset--color--tint);
	padding: 4px 10px;
}

.sbs-tag-nzqa {
	color: #ffffff;
	background: var(--wp--preset--color--accent-2);
}

/* On a tinted section the pale tag needs to stay distinct from the ground. */
.has-tint-background-color .sbs-tag:not(.sbs-tag-nzqa) {
	background: #e4eaf3;
}

/*
 * The single micro-credential would otherwise sit as one narrow card in a
 * wide empty row. Given the whole width, its description is held to a
 * readable measure beside the title instead of running to 1100px.
 */
.sbs-course-wide {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 10px 48px;
	align-items: start;
}

.sbs-course-wide h3 { grid-column: 1; }
.sbs-course-wide .sbs-dur { grid-column: 1; }

.sbs-course-wide p:not(.sbs-dur):not(.sbs-tags) {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-top: 0;
	max-width: 70ch;
}

.sbs-course-wide .sbs-tags {
	grid-column: 1;
	margin-top: 16px;
	padding-top: 0;
}

@media (max-width: 781px) {
	.sbs-course-wide {
		grid-template-columns: 1fr;
	}
	.sbs-course-wide p:not(.sbs-dur):not(.sbs-tags) {
		grid-column: 1;
		grid-row: auto;
		margin-top: 14px;
	}
	.sbs-course-wide .sbs-tags { grid-column: 1; }
}

/* ---------------------------------------------------------------------
   Zoho contact form
   ------------------------------------------------------------------ */

/*
 * The form is Zoho's HTML export, so its markup and class names are theirs
 * but the styling is ours. Zoho ships a 39KB stylesheet with the export;
 * it is deliberately NOT used - it carries its own typography, colours and
 * resets that fight the theme on almost every rule. This replaces it.
 *
 * Everything is scoped to .zf-templateWidth so none of it can leak into
 * the rest of the site.
 */

.zf-templateWidth {
	max-width: 640px;
}

/* Zoho lays the fields out in ul/li. Left alone they inherit the theme's
   list bullets and indent, which puts a bullet beside every field. */
.zf-templateWidth ul,
.zf-templateWidth li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zf-templateWidth .zf-clearBoth {
	clear: both;
}

/* The form's own title and description duplicate the page heading above
   it. Hidden rather than deleted so the markup still matches Zoho's
   export if it is ever re-copied. */
.zf-templateWidth .zf-tempHeadBdr,
.zf-templateWidth .zf-frmTitle,
.zf-templateWidth .zf-frmDesc {
	display: none;
}

.zf-templateWidth .zf-tempFrmWrapper {
	margin-bottom: 1.6rem;
}

.zf-templateWidth .zf-labelName {
	display: block;
	margin-bottom: 0.45rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast);
}

.zf-templateWidth .zf-important {
	color: var(--wp--preset--color--accent-2);
	font-style: normal;
}

.zf-templateWidth input[type="text"],
.zf-templateWidth textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--tint);
	border: 1px solid #d3dceb;
	border-radius: 0;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.zf-templateWidth textarea {
	min-height: 150px;
	resize: vertical;
}

.zf-templateWidth input[type="text"]:focus,
.zf-templateWidth textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}

/* First name / last name sit side by side, stacking on a narrow screen. */
.zf-templateWidth .zf-nameWrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.zf-templateWidth .zf-nameWrapper > span {
	flex: 1 1 180px;
}

/* The small caption under each sub-field ("First Name", "Number"). */
.zf-templateWidth .zf-tempContDiv span > label,
.zf-templateWidth .zf-phwrapper label {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #5c6b85;
}

.zf-templateWidth .zf-phwrapper span {
	display: block;
}

.zf-templateWidth .zf-errorMessage {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: #b3261e;
}

/* Submit button: matches the site's buttons rather than Zoho's. */
.zf-templateWidth .zf-fmFooter {
	margin-top: 2rem;
}

.zf-templateWidth .zf-submitColor {
	display: inline-block;
	padding: 0.85rem 2rem;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--accent);
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.zf-templateWidth .zf-submitColor:hover,
.zf-templateWidth .zf-submitColor:focus {
	background: var(--wp--preset--color--accent-2);
	color: #ffffff;
}

/* Give quotes presence through type rather than a rule down one side. */
.wp-block-quote {
	border: none;
	padding-left: 0;
	font-size: 1.15rem;
	line-height: 1.5;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.9rem;
	font-style: normal;
	opacity: 0.75;
}