/**
 * Pilates Rockhampton — site styles.
 *
 * Loaded after Blocksy's stylesheet, so plain selectors override the parent
 * without needing !important.
 *
 * Prefer Blocksy's Customizer for anything it exposes (colours, fonts,
 * header/footer layout). Use this file for things the Customizer cannot
 * express — that keeps the two from fighting each other.
 *
 * Blocksy exposes its palette as CSS custom properties, so use those rather
 * than hard-coded hex values. That way a palette change in the Customizer
 * flows through here too:
 *
 *   var(--theme-palette-color-1)  … through  --theme-palette-color-8
 *   var(--theme-text-color)
 *   var(--theme-link-initial-color)
 *   var(--theme-content-spacing)
 *
 * Sections below are placeholders, ready for the fixes on the review list.
 */

/* -----------------------------------------------------------------
 * 1. Base / typography
 * -------------------------------------------------------------- */

/* The "New to Pilates" popup's close button was 32px, too small for a
   fingertip; 44px is the usual minimum. The id outranks the theme rule. */
#popmake-1037 .pum-content + .pum-close {
	top: -18px;
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 40px;
}

/* -----------------------------------------------------------------
 * 2. Header & navigation
 * -------------------------------------------------------------- */

/* Social icons. Blocksy draws each one as a filled circle 2.5× the icon
 * size, so the default felt oversized next to the logo — and on tablet
 * widths the row wrapped, dropping the last circle onto the hero logo.
 * One size token shrinks the circle and the icon together; nowrap keeps
 * the row on one line (at this size all five fit with room to spare).
 *
 * Selector is (0,3,0) — class + attribute inside .ct-header — because
 * Blocksy's global.css addresses these same tokens at (0,3,0) via
 * '[data-header*="type-1"] [data-id="socials"].ct-header-socials', both
 * at top level and again inside its mobile media query. Matching that
 * weight lets source order decide, and this file loads later. */
.ct-header .ct-header-socials[data-id="socials"] {
	--theme-icon-size: 14px;
	--items-spacing: 10px;
	--wrap: nowrap;
}

/* Gift voucher. Blocksy's header button is a text pill, the odd shape out in
 * a row of circles. Draw it as a fifth circle: the socials' size and spacing,
 * brand purple, with a gift glyph (Lucide "gift", ISC licence). The label
 * stays in the markup for screen readers and as a tooltip; the offcanvas
 * menu and footer spell it out. Blocksy sizes the pill through tokens on
 * [data-size], so those are overridden rather than its padding rules. */
/* Blocksy gives every header item a 10px margin each side, which puts 20px
   between this circle and the socials against their own 10px; drop the
   trailing one. */
.ct-header .ct-header-cta[data-id="button"] {
	--margin: 0 0 0 10px;
}

.ct-header .ct-header-cta[data-id="button"] .ct-button {
	--theme-button-min-height: 35px;
	--theme-button-padding: 0;
	--theme-button-font-size: 0;
	width: 35px;
	border-radius: 50%;
	justify-content: center;
}

/* On desktop Blocksy uses this pseudo-element as the button's hover shadow:
   absolute, transparent and behind it. Put it back in flow. */
.ct-header .ct-header-cta[data-id="button"] .ct-button::before {
	content: "";
	display: block;
	position: static;
	opacity: 1;
	z-index: auto;
	border-radius: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='4' rx='1'/><path d='M12 8v13'/><path d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/><path d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8' width='18' height='4' rx='1'/><path d='M12 8v13'/><path d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/><path d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/></svg>") center / contain no-repeat;
}

/* Hamburger. Blocksy's trigger is the bare 24px glyph, a small thing to hit
   with a thumb. A pseudo-element widens the tap area to 44px without moving
   anything; clicks on it land on the button. */
.ct-header .ct-header-trigger {
	position: relative;
}

.ct-header .ct-header-trigger::after {
	content: "";
	position: absolute;
	inset: -10px;
}

/* Mobile: the icons take the logo's place.
 *
 * Below the tablet breakpoint the row cannot hold all three items — a 24px
 * hamburger, a ~117px centred logo and a ~215px run of circles inside
 * 375px — so the icons ended up sitting on the logo. Only ~106px is free
 * beside the logo, which is two icons at a decent tap size, not five.
 *
 * Rather than collapse the icons behind a toggle, drop the logo and let the
 * icons have the space: on a phone they are the useful half (call, email,
 * the two socials), and the brand is not lost — the offcanvas panel carries
 * the logo when the menu opens, and the page itself leads with it.
 *
 * That leaves the hamburger and a ~215px icon run inside ~329px of content
 * width, which fits with room to spare and needs no JavaScript. */
@media (max-width: 999.98px) {
	.ct-header [data-row="middle"] [data-id="logo"] {
		display: none;
	}
}

/* Sticky header background. Blocksy's sticky state paints the row flat
 * white (palette colour 8), which read as a dead strip against the rest
 * of the page. Echo the hero's gold→pink wash instead, kept light so the
 * dark icons and menu text keep their contrast. Selector matches the
 * specificity of the rule global.css emits (0,4,0); this file loads
 * later, so source order settles it without !important. */
[data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
	background-color: #fdf3f7;
	background-image: linear-gradient(
		90deg,
		rgba(251, 212, 143, 0.5) 0%,
		rgba(255, 196, 252, 0.5) 100%
	);
}

/* Header logo. The big logo lives in the hero, so the header's own logo
 * item stays hidden at the top of the page and fades in once the sticky
 * state engages — a compact brand mark for the bar without doubling the
 * hero logo underneath it. */
.ct-header [data-id="logo"] {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.ct-header [data-sticky*="yes"] [data-id="logo"] {
	opacity: 1;
	visibility: visible;
}

.ct-header [data-id="logo"] .site-logo-img,
.ct-header [data-id="logo"] img {
	max-height: 44px;
	width: auto;
}

/* Offcanvas (hamburger) panel. Blocksy paints it flat white below the
 * tablet breakpoint; wash it with the same gold→pink as the sticky bar
 * so the menu feels like part of the header it slides out of. Kept
 * light, so the dark menu text keeps its contrast. */
[data-header*="type-1"] #offcanvas .ct-panel-inner {
	background-color: #fdf3f7;
	background-image: linear-gradient(
		160deg,
		rgba(251, 212, 143, 0.5) 0%,
		rgba(255, 196, 252, 0.5) 100%
	);
}

/* -----------------------------------------------------------------
 * 3. Home page
 * -------------------------------------------------------------- */

/* Phones. Long centred paragraphs are hard to read - every line starts in a
   different place - so the class-card descriptions and the studio paragraph
   after the prices go left. Short centred lines (price notes) stay centred.
   And stacked, the white price cards lose their edges against the white page,
   so all three get a hairline to keep reading as cards. */
@media (max-width: 767.98px) {
	/* Weighted to beat core's ":root .has-text-align-center" and Stackable
	   3.20's doubled ".stk-block.stk-block [class*=has-text-align-]". */
	:root .stk-17d3694 .stk-block .stk-block-text__text,
	:root .stk-d8d5ed7 + p.has-text-align-center {
		text-align: left;
	}

	.stk-a4dc2a8 .stk-block-column {
		box-shadow: inset 0 0 0 1px var(--theme-palette-color-5, #e2e7ed);
	}
}

/* Google reviews. The plugin makes each review a 76px scrolling box; iOS hides
   the scrollbar, so reviews looked cut off mid-sentence. Clamp to 8 lines with
   a real ellipsis instead - no cap at all left short reviews in huge cards. */
#g-review.layout_style-1 .g-review .gr-inner-body {
	max-height: none;
	overflow: visible;
}

#g-review.layout_style-1 .g-review .gr-inner-body p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	line-clamp: 8;
	overflow: hidden;
}

/* "Pilates to Suit Everyone" is the page's H1 (seo-tune.php; the hero is
   the logo), kept at the size it had as an h3. Phones keep the block's
   own 25px. */
.stk-99466fa .stk-block-heading__text {
	font-size: 30px;
}

/* No review dates. "2 years ago" beside a five-star review only dates it;
   the plugin's own hide-date switch is a paid feature, and it is this rule. */
#g-review .gr-stars .time {
	display: none;
}

/* -----------------------------------------------------------------
 * 3a. Gift voucher form
 * -------------------------------------------------------------- */

/* Simple Pay's button is set to no style of its own (see
   style-gift-voucher-button.php), which leaves the browser default. Dress
   it as the site's pill buttons, at a size a thumb can find. Weighted above
   the plugin's ".simpay-styled .simpay-btn:not(.stripe-button-el)". */
.simpay-form-control button.simpay-btn.simpay-payment-btn {
	min-height: 48px;
	padding: 12px 40px;
	border: 0;
	border-radius: 50px;
	background: var(--theme-palette-color-1, #7224ff);
	color: #fff;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.simpay-form-control button.simpay-btn.simpay-payment-btn:hover,
.simpay-form-control button.simpay-btn.simpay-payment-btn:focus-visible {
	background: var(--theme-palette-color-2, #ff3e00);
	color: #fff;
}

.simpay-form-control button.simpay-btn.simpay-payment-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* The page around the form (see design-gift-voucher-page.php): a voucher
   preview beside the form, quick-pick amounts, three steps, fine print. */
.pr-voucher {
	--pr-gold: #e9b949;
	--pr-ink: var(--theme-palette-color-4, #111518);
	--pr-line: #d9dee6;
}

.pr-voucher__intro {
	max-width: 62ch;
	margin: 0 auto 2.5rem;
	text-align: center;
	font-size: 1.1rem;
}

.pr-voucher__layout {
	gap: 2.5rem;
	align-items: flex-start;
}

/* Voucher preview card. Dark with the gold of the logo, so it reads as the
   real thing. Names and amount fill in as the form is typed. */
.pr-voucher-card {
	position: relative;
	overflow: hidden;
	padding: 1.75rem 1.75rem 1.5rem;
	border-radius: 20px;
	color: #fff;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(233, 185, 73, 0.28), transparent 55%),
		var(--pr-ink);
	box-shadow: 0 18px 40px -24px rgba(17, 21, 24, 0.6);
}

.pr-voucher-card__logo {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	padding: 4px;
}

.pr-voucher-card__kicker {
	margin: 0 0 2.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pr-gold);
}

.pr-voucher-card__amount {
	margin: 0 0 1.5rem;
	font-family: "Merriweather", Georgia, serif;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

.pr-voucher-card__amount.is-low {
	color: rgba(255, 255, 255, 0.5);
}

.pr-voucher-card__names {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 0 0 1.5rem;
}

.pr-voucher-card__names dt {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.pr-voucher-card__names dd {
	margin: 0.2rem 0 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.pr-voucher-card__foot {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px dashed rgba(255, 255, 255, 0.28);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
}

.pr-voucher__photo {
	margin: 1.5rem 0 0;
}

.pr-voucher__photo img {
	border-radius: 20px;
}

/* The form, in a card like the class cards. */
.pr-voucher__form {
	padding: 1.75rem;
	border-radius: 20px;
	background: var(--theme-palette-color-7, #f8f9fb);
}

.pr-voucher__heading {
	margin-top: 0;
}

.pr-voucher__form .simpay-checkout-form .simpay-conditional-field + .simpay-conditional-field {
	margin-top: 1.1rem;
}

.pr-voucher__form .simpay-form-control label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: var(--pr-ink);
}

.pr-voucher__form .simpay-form-control input[type="text"],
.pr-voucher__form .simpay-form-control input[type="email"],
.pr-voucher__form .simpay-form-control input[type="tel"],
.pr-voucher__form .simpay-form-control input[type="number"] {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--pr-line);
	border-radius: 12px;
	background: #fff;
	font-size: 1rem;
	box-shadow: none;
}

.pr-voucher__form .simpay-form-control input:focus {
	outline: none;
	border-color: var(--theme-palette-color-1, #7224ff);
	box-shadow: 0 0 0 3px rgba(114, 36, 255, 0.15);
}

.pr-voucher__form .simpay-form-control .simpay-payment-btn {
	width: 100%;
	margin-top: 0.5rem;
}

/* Quick picks. Authored in the page, moved above the amount field by
   voucher-page.js. */
.pr-voucher-picks {
	margin: 0 0 1.1rem;
}

.pr-voucher-picks__label {
	margin: 0 0 0.35rem;
	font-weight: 600;
	color: var(--pr-ink);
}

.pr-voucher-picks__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pr-voucher-picks__row button {
	min-height: 40px;
	padding: 0.4rem 1rem;
	border: 1px solid var(--theme-palette-color-1, #7224ff);
	border-radius: 50px;
	background: #fff;
	color: var(--theme-palette-color-1, #7224ff);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.pr-voucher-picks__row button[aria-pressed="true"] {
	background: var(--theme-palette-color-1, #7224ff);
	color: #fff;
}

.pr-voucher-picks__hint {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--theme-palette-color-3, #636c72);
}

/* How it works: three numbered steps. */
.pr-voucher-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 1.5rem 0 2.5rem;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.pr-voucher-steps li {
	counter-increment: step;
	padding-left: 3.25rem;
	position: relative;
}

.pr-voucher-steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--theme-palette-color-1, #7224ff);
	color: #fff;
	font-family: "Merriweather", Georgia, serif;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pr-voucher-steps strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--pr-ink);
}

.pr-voucher-steps span {
	color: var(--theme-palette-color-3, #636c72);
}

.pr-voucher__fine {
	max-width: 60ch;
	margin: 0 auto;
	text-align: center;
	font-size: 0.9rem;
	color: var(--theme-palette-color-3, #636c72);
}

@media (max-width: 781px) {
	.pr-voucher__layout {
		gap: 1.5rem;
	}

	.pr-voucher__form {
		padding: 1.25rem;
	}

	.pr-voucher-steps {
		grid-template-columns: 1fr;
	}

	.pr-voucher-card__amount {
		font-size: 2.5rem;
	}
}

/* -----------------------------------------------------------------
 * 4. Class schedule
 * -------------------------------------------------------------- */

/* A table: one row per day inside a single bordered frame, the day cell
   beside its sessions. Colours match Tracy's spreadsheet; the type is
   always in the text as well. */
/* Day names are labels, so they take the body face. Captured here because
   Blocksy redefines --theme-font-family on h1-h6 themselves (see section 5). */
.pr-schedule {
	--pr-schedule-label-font: var(--theme-font-family);
	--pr-schedule-line: #e4def0;
}

.pr-schedule__days {
	border: 1px solid var(--pr-schedule-line);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.pr-schedule__day + .pr-schedule__day {
	border-top: 1px solid var(--pr-schedule-line);
}

/* From tablet up the day cell runs the full height of its row; on a phone
   it heads the row instead. */
@media (min-width: 690px) {
	.pr-schedule__day {
		display: grid;
		grid-template-columns: 8.5rem 1fr;
	}

	.pr-schedule .pr-schedule__day-name {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.pr-schedule .pr-schedule__day-name {
	margin: 0;
	padding: 0.6rem 0.75rem;
	background: #5b1ccc;
	color: #fff;
	font-family: var(--pr-schedule-label-font);
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
}

/* auto-fill keeps every cell the same width, so sessions line up down
   the page as well as across it; unused slots read as empty cells. */
.pr-schedule__sessions {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 3px;
	margin: 0;
	padding: 3px;
	list-style: none;
}

.pr-schedule__session {
	margin: 0;
	border-radius: 4px;
	line-height: 1.3;
	text-align: center;
	color: #1f2933;
}

/* The link fills the cell, so the whole slot is the tap target. Scoped
   under .pr-schedule to beat the theme's a:hover colour. */
/* Extra bottom padding gives the icon its own strip, so long labels like
   "Total Body Fitness" can't run into it. */
.pr-schedule .pr-schedule__link {
	position: relative;
	display: block;
	height: 100%;
	padding: 0.5rem 0.6rem 1.35rem;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}

.pr-schedule .pr-schedule__link:hover {
	color: inherit;
	background: rgba(17, 21, 24, 0.06);
}

.pr-schedule .pr-schedule__link:focus-visible {
	outline: 2px solid #5b1ccc;
	outline-offset: 2px;
}

/* The tappable cue. #6b7280 clears 3:1 on all three cell colours. */
.pr-schedule__book {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 14px;
	height: 14px;
	color: #6b7280;
}

.pr-schedule__time {
	display: block;
	font-weight: 700;
}

.pr-schedule__name {
	display: block;
	font-size: 0.875rem;
}

.pr-schedule__session--private  { background: #fdeada; }
.pr-schedule__session--tbf      { background: #c1e4c5; }
.pr-schedule__session--beginner { background: #d2dbe5; }

.pr-schedule__note,
.pr-schedule__updated {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	text-align: center;
}

/* Muted by colour, not opacity: #6b7280 on white is 4.8:1. */
.pr-schedule__updated {
	margin-top: 0.25rem;
	color: #6b7280;
}

/* -----------------------------------------------------------------
 * 5. Footer
 *
 * The footer had drifted into three unrelated type treatments — the
 * links column came from a Stackable block forcing Bahnschrift and a
 * gradient text fill, the headings were Merriweather, and everything
 * else fell back to the system stack across five different sizes with
 * ad-hoc opacity on top.
 *
 * Everything below runs off the tokens in .ct-footer: two sizes, two
 * text colours, one heading treatment. Opacity is not used to make text
 * quieter — that stacks unpredictably and wrecked the contrast of the
 * ABN line. Colour is set explicitly instead.
 *
 * Contrast against the footer's #111518, measured:
 *   --pr-footer-text  #868f97  5.6:1   passes AA
 *   --pr-footer-bright #e2e7ed 14.8:1  headings and hover
 * The previous #636c72 body colour was 3.4:1, which failed.
 * -------------------------------------------------------------- */

.ct-footer {
	--pr-footer-text: #868f97;
	--pr-footer-bright: var(--theme-palette-color-5, #e2e7ed);
	--pr-footer-size-body: 0.9375rem;
	--pr-footer-size-sm: 0.8125rem;
	--pr-footer-leading: 1.75;

	/* The body face, captured here rather than used directly on the
	   headings below.
	   Blocksy's heading typography redefines --theme-font-family *on the
	   h1-h6 elements themselves* (to Merriweather), so a var() read inside
	   a heading rule resolves to the heading font, not the body font —
	   setting 'font-family: var(--theme-font-family)' on an h3 is a no-op
	   that looks like it should work. Reading it here, on a div where the
	   variable is not shadowed, resolves it to the real body stack; the
	   headings then inherit that resolved value. */
	--pr-footer-label-font: var(--theme-font-family);
}

.ct-footer [data-row="middle"] > .ct-container {
	align-items: start;
	column-gap: clamp(2rem, 6vw, 5rem);
	row-gap: 3rem;
}

/* One body treatment for every column, whatever block produced it.
 *
 * Body size steps down one notch from the site's 16px body copy — at
 * full size the footer read heavier than the quiet, secondary role it
 * plays on the page. This selector's specificity (0,2,1) already beats
 * Blocksy's '.ct-widget > *' (0,1,0), so no !important is needed.
 *
 * :is() keeps these selectors at a predictable weight (0,2,1), which
 * the two-class overrides further down clear cleanly. */
.ct-footer [data-row="middle"] :is(p, li) {
	font-size: var(--pr-footer-size-body);
	line-height: var(--pr-footer-leading);
	color: var(--pr-footer-text);
}

.ct-footer [data-row="middle"] a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ct-footer [data-row="middle"] a:hover,
.ct-footer [data-row="middle"] a:focus-visible {
	color: var(--pr-footer-bright);
}

/* Fine print — the one deliberate step down from body size. Two
   classes deep so it beats the (0,2,1) default above. */
.ct-footer [data-row="middle"] .pr-footer__note {
	font-size: var(--pr-footer-size-sm);
}

/* Column headings.
 *
 * These were Merriweather, the site's heading face, on the reasoning that
 * matching the headings elsewhere was the consistent choice. In practice it
 * read badly: Merriweather is a text serif with heavy, bracketed serifs, and
 * at 12.8px in all-caps with tracking those serifs turn to noise — the
 * letterforms muddy together instead of reading as a crisp label.
 *
 * The rule these follow is by role, not by tag. Merriweather is for headings
 * that are read as prose — the h2s up the page. These are interface labels
 * that name a column, closer to the nav than to a headline, so they take the
 * body face and earn their emphasis from weight, caps and tracking instead.
 *
 * font-family comes from the token above, not from --theme-font-family
 * directly — see the note there for why the direct read silently fails. */
.pr-footer__heading {
	font-family: var(--pr-footer-label-font);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pr-footer-bright);
	margin: 0 0 1rem;
}

.pr-footer__heading--tight {
	margin-top: 2rem;
}

/* --- Column one: brand ------------------------------------------ */

.pr-footer__logo img {
	max-width: 100%;
	height: auto;
}

.pr-footer__tagline {
	margin: 1rem 0 0;
	max-width: 26ch;
}

/* --- Column two: links ------------------------------------------ */

.pr-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pr-footer__links li + li {
	margin-top: 0.55rem;
}

/* The link text is 18px tall; pad the tap target to 28px and pull the
   padding back out with margins so the list spacing stays as it is. */
.pr-footer__links a {
	display: inline-block;
	padding: 5px 0;
	margin: -5px 0;
}

/* --- Column three: visiting and contact -------------------------- */

.pr-footer__address {
	margin: 0 0 0.75rem;
}

.pr-footer__note {
	margin: 0 0 0.9rem;
	max-width: 34ch;
}

.pr-footer__directions {
	margin: 0;
	font-weight: 600;
}

/* The one call to action down here, so it gets the bright treatment
   rather than inheriting the muted body colour. Scoped deep enough to
   clear the generic footer link rule above. */
.ct-footer [data-row="middle"] .pr-footer__directions a {
	color: var(--pr-footer-bright);
}

.pr-footer__contact {
	margin: 0;
}

/* --- Copyright bar ---------------------------------------------- */

.ct-footer [data-row="bottom"] {
	font-size: var(--pr-footer-size-sm);
	color: var(--pr-footer-text);
}

/* Blocksy colours copyright links #ff0000 from the Customizer; links here
   read as the text around them, as in the columns above. */
.ct-footer [data-row="bottom"] a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ct-footer [data-row="bottom"] a:hover,
.ct-footer [data-row="bottom"] a:focus-visible {
	color: var(--pr-footer-bright);
}

/* The ABN now sits beside the copyright. Fade the divider rather than
   the text either side of it, so both read at full strength. */
.pr-copyright__sep {
	margin: 0 0.35em;
	opacity: 0.45;
}

/* On a phone, put the ABN on its own line - wrapping left the divider orphaned. */
@media (max-width: 689.98px) {
	.pr-copyright__sep {
		display: none;
	}

	.pr-copyright__abn {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-footer :is([data-row="middle"], [data-row="bottom"]) a {
		transition: none;
	}
}

@media (max-width: 999px) {
	.ct-footer [data-row="middle"] > .ct-container {
		row-gap: 2.5rem;
	}

	.pr-footer__heading--tight {
		margin-top: 1.5rem;
	}
}

/* Blocksy's default footer grid drops straight from 3 columns to a full
 * single-column stack at its tablet breakpoint (max-width: 999.98px) — so
 * anything narrower than a small laptop stacked, including tablets and
 * large phones in landscape. Hold 2 columns through that range instead,
 * via the same --grid-template-columns custom property Blocksy's own
 * dynamic CSS sets on this element, and let the true single-column stack
 * happen only below 640px, where Blocksy's mobile CSS already takes over. */
@media (min-width: 640px) and (max-width: 999.98px) {
	.ct-footer [data-row="middle"] > div {
		--grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* -----------------------------------------------------------------
 * 6. Utilities
 * -------------------------------------------------------------- */