/*
Theme Name: Steveston Heritage
Theme URI: https://historicsteveston.ca/
Description: Steveston Historical Society block theme, a child of Twenty Twenty-Five. Teal and orange heritage palette, Lato and Source Sans Pro, boxed 1200px sections, block styles and patterns for society pages, with colours tuned to WCAG 2.2 AA.
Author: Steveston Historical Society
Template: twentytwentyfive
Version: 1.3.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: steveston-heritage
*/

/*
 * Inspiration & credits
 * ---------------------
 * The layout, palette and components are modelled on RocketTheme's "Callisto"
 * theme (Gantry 5 framework), which the society's site used from 2017 to 2026.
 * No Callisto code is included: styles were rebuilt for core blocks from
 * measurements of the live site and reading Callisto's SCSS for reference
 * (typography, boxes/variations, buttons, layer content, pricing tables, forms,
 * utilities). Class and token names such as "box", "band", "label" and the
 * legacy .button/.alert/.center classes deliberately echo Callisto/Gantry so old
 * classic-editor content keeps its styling.
 *
 * Fonts: Lato and Source Sans Pro (SIL Open Font License), bundled locally.
 */

/*
 * Layout values were measured from the live Callisto site at 1280px.
 * Colours keep Callisto's hues but are darkened to pass WCAG 2.2 AA
 * (ratios noted beside each token; "on white" unless stated).
 *
 * Gantry structure → blocks:
 *   .g-container (1200px)      → constrained group (contentSize 1200px)
 *   .g-block/.g-content (box)  → any block with an is-style-shs-box-* style
 *   .g-layercontent (band)     → group with is-style-shs-band / is-style-shs-cta
 *   .g-title                   → heading with is-style-shs-label
 *
 * Sections: 1 Tokens · 2 Base & accessibility · 3 Header · 4 Buttons ·
 * 5 Bands & panels · 6 Boxes · 7 Text & media · 8 Pricing · 9 Home ·
 * 10 Blog · 10b Callisto parity · 11 Responsive · 12 Motion, forced colours & print
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */

:root {
	--shs-teal: #4a7482;          /* 5.03:1 · white text on it 5.03:1 · on panel 4.68:1 */
	--shs-teal-dark: #3b5d68;     /* white text 7.11:1 */
	--shs-teal-darker: #2e4a53;   /* hover */
	--shs-orange: #c25310;        /* white text 4.63:1 */
	--shs-orange-dark: #924a19;   /* white text 6.53:1 */
	--shs-slate: #667879;         /* white text 4.64:1 */
	--shs-slate-dark: #526061;    /* white text 6.55:1 */
	--shs-blue: #1f7f94;          /* white text 4.64:1 */
	--shs-blue-dark: #1a6678;     /* white text 6.53:1 */
	--shs-dark: #383838;
	--shs-dark-text: #bdbdbd;     /* on dark 6.24:1 */
	--shs-text: #6e6e6e;          /* 5.10:1 · on panel 4.68:1 */
	--shs-heading: #333333;       /* on showcase grey 10.3:1 */
	--shs-showcase: #e8e8e8;
	--shs-panel: #f5f5f5;
	--shs-hairline: #ebebeb;
	--shs-rule: rgba(110, 110, 110, 0.35);
	--shs-focus: #1b2a2f;
	--shs-box-pad: 0.938rem;
	--shs-radius: 0.1875rem;
	--shs-gutter: 10px;
	--shs-band-pad: clamp(1.25rem, 3vw, 2rem);
	--shs-band-title: clamp(1.5rem, 1.1rem + 1.6vw, 1.9rem);
}

/* ------------------------------------------------------------------ */
/* 2. Base & accessibility                                             */
/* ------------------------------------------------------------------ */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* Visible, high-contrast keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--shs-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On coloured backgrounds the focus ring flips to white. */
:where(.shs-header, .is-style-shs-box-teal, .is-style-shs-box-slate, .is-style-shs-box-orange, .is-style-shs-box-blue,
	.is-style-shs-box-dark, .is-style-shs-box-red, .is-style-shs-box-pink, .is-style-shs-box-purple, .shs-pricing-title)
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: #fff;
}

/* Links inside running text are underlined, so they don't rely on colour alone (WCAG 1.4.1). */
:where(p, li, dd, td, figcaption, blockquote) a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:where(p, li, dd, td, figcaption, blockquote) a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	text-decoration-thickness: 2px;
}

.shs-visually-hidden,
.shs-visually-hidden.wp-block-heading {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* SHS templates: Gantry sections sit flush (scoped so plugin templates keep their own spacing). */
.wp-site-blocks > .wp-block-template-part + .shs-main,
.wp-site-blocks > .shs-main + .wp-block-template-part,
.shs-main > * + *,
.shs-main > .wp-block-post-content > * + * {
	margin-block-start: 0;
}

.shs-main,
.shs-main > .wp-block-post-content {
	margin-top: 0;
}

.shs-main .wp-block-image {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 3. Header & navigation                                              */
/* ------------------------------------------------------------------ */

.shs-header {
	background: var(--shs-teal);
	color: #fff;
}

.shs-header__row {
	min-height: 114px;
	gap: 1rem;
}

.shs-header .shs-logo {
	margin: 0;
	padding-left: var(--shs-gutter);
	flex-shrink: 1;
}

.shs-header .shs-logo img {
	display: block;
	width: 374px;
	max-width: 100%;
	height: auto;
}

/* Gantry "Icon Menu": circle icon with label underneath, divided by rules. */
.wp-block-social-links.is-style-shs-iconmenu {
	gap: 0 !important;
	margin: 0;
	padding: 0;
}

.wp-block-social-links.is-style-shs-iconmenu .wp-social-link {
	background: none !important;
	color: #fff;
	border-radius: 0;
	margin: 16px 0;
	padding: 0 16px;
	border-right: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 16px;
}

.wp-block-social-links.is-style-shs-iconmenu .wp-social-link:last-child {
	border-right: 0;
}

.wp-block-social-links.is-style-shs-iconmenu .wp-block-social-link-anchor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 100px;
	padding: 0;
	color: #fff;
}

.wp-block-social-links.is-style-shs-iconmenu .wp-block-social-link-anchor svg {
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	padding: 7px;
	border-radius: 100%;
	background: rgba(0, 0, 0, 0.18);
	fill: currentColor;
}

.wp-block-social-links.is-style-shs-iconmenu.has-visible-labels .wp-social-link .wp-block-social-link-label {
	font-family: sourcesanspro, Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #fff;
	margin: 0;
	padding: 0;
}

.wp-block-social-links.is-style-shs-iconmenu .wp-social-link:hover .wp-block-social-link-label {
	text-decoration: underline;
}

.shs-navbar {
	background: #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid var(--shs-hairline);
	position: relative;
	z-index: 11;
}

.shs-navbar__row {
	min-height: 60px;
	gap: 0.75rem;
}

.shs-main-nav {
	padding-left: var(--shs-gutter);
}

.shs-main-nav .wp-block-navigation__container {
	gap: 0.1rem;
}

.shs-main-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--shs-text);
	padding: 0.35rem 0.5rem;
	border-radius: 3px;
	line-height: 1;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.shs-main-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.shs-main-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.shs-main-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
.shs-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background: var(--shs-teal-dark);
	color: #fff;
}

/* Submenu toggle: 16px icon, 44px target (padding + negative margin keeps the visual layout). */
.shs-main-nav .wp-block-navigation__submenu-icon {
	box-sizing: content-box;
	width: 1rem;
	height: 1rem;
	padding: 14px;
	margin: -14px -14px -14px -10px;
	border-radius: 3px;
}

.shs-main-nav .wp-block-navigation__submenu-icon:hover {
	background: rgba(0, 0, 0, 0.06);
}

.shs-main-nav .wp-block-navigation__submenu-container {
	min-width: 180px !important;
	border: 1px solid var(--shs-hairline) !important;
	border-radius: 3px;
	padding: 0.25rem;
	background: #fff !important;
}

.shs-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 1px solid var(--shs-rule);
}

.shs-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.shs-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem !important;
	line-height: 1.2;
}

.shs-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.shs-main-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: var(--shs-teal-dark);
	color: #fff;
}

/* Donate sits at the start of the nav's 20% column, as in Gantry (80/20 split). */
.shs-navbar .shs-donate {
	flex: 0 0 20%;
	justify-content: flex-start;
	padding-left: var(--shs-gutter);
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* 4. Buttons                                                          */
/* ------------------------------------------------------------------ */

.wp-block-buttons > .wp-block-button .wp-block-button__link {
	margin-bottom: 0.2rem;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.wp-block-button.is-style-shs-orange .wp-block-button__link {
	background: var(--shs-orange);
	color: #fff;
}

.wp-block-button.is-style-shs-orange .wp-block-button__link:hover,
.wp-block-button.is-style-shs-orange .wp-block-button__link:focus-visible {
	background: var(--shs-orange-dark);
	color: #fff;
}

.wp-block-button.is-style-shs-pill .wp-block-button__link {
	border-radius: 1.5rem;
}

.wp-block-button.is-style-shs-outline .wp-block-button__link {
	background: transparent;
	border-radius: 1.5rem;
	color: var(--shs-teal);
	border: 2px solid var(--shs-teal);
}

.wp-block-button.is-style-shs-outline .wp-block-button__link:hover,
.wp-block-button.is-style-shs-outline .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--shs-teal-darker);
	border-color: var(--shs-teal-darker);
}

/* Font Awesome replacements (inline SVG masks). Decorative: the button text carries the meaning. */
.wp-block-button.shs-icon-download .wp-block-button__link::before,
.wp-block-button.shs-icon-star .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.35em;
	vertical-align: -0.125em;
	background: currentColor;
	-webkit-mask: var(--shs-icon) center / contain no-repeat;
	mask: var(--shs-icon) center / contain no-repeat;
}

.wp-block-button.shs-icon-download {
	--shs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.6l3.3-3.3 1.4 1.4L12 16.4l-5.7-5.7 1.4-1.4 3.3 3.3V3zM4 18h16v3H4z'/%3E%3C/svg%3E");
}

.wp-block-button.shs-icon-star {
	--shs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* 5. Bands & panels                                                   */
/* ------------------------------------------------------------------ */

.is-style-shs-band,
.is-style-shs-cta {
	padding: var(--shs-band-pad) !important;
	text-align: center;
}

.is-style-shs-band {
	background: var(--shs-showcase);
	color: var(--shs-heading);
}

.is-style-shs-band > *,
.is-style-shs-cta > * {
	margin-block: 0;
}

.is-style-shs-band :where(h1, h2),
.is-style-shs-cta :where(h1, h2, h3) {
	font-size: var(--shs-band-title);
	line-height: 1.55;
	margin: 0;
}

.is-style-shs-cta p {
	line-height: 2rem;
	margin: 0 !important;
}

.is-style-shs-cta .wp-block-buttons {
	margin: 1rem 0 0.75rem !important;
}

.is-style-shs-cta.shs-left {
	text-align: left;
}

/* Light grey "main"/"extension" panel behind boxed sections. */
.is-style-shs-panel {
	background: var(--shs-panel);
	color: var(--shs-text);
}

.is-style-shs-panel > *,
.shs-extension > * {
	margin-block-start: 0 !important;
}

.is-style-shs-panel > .wp-block-columns.shs-inset {
	padding-block: var(--shs-gutter);
}

.is-style-shs-panel > .wp-block-columns.shs-inset + .wp-block-columns.shs-inset {
	padding-top: 0;
}

.is-style-shs-panel .wp-block-columns {
	margin-bottom: 0;
}

.shs-showcase-band {
	background: var(--shs-showcase);
}

.shs-showcase {
	margin-block: var(--shs-gutter) !important;
}

/* ------------------------------------------------------------------ */
/* 6. Boxes — usable on Group, Column, Media & Text, Details, Query,    */
/*    Quote, Pullquote, Table and Cover-free sections                  */
/* ------------------------------------------------------------------ */

[class*="is-style-shs-box-"] {
	padding: var(--shs-box-pad);
}

[class*="is-style-shs-box-"] > :first-child {
	margin-top: 0;
}

[class*="is-style-shs-box-"]:not(.is-style-shs-cta) > p:last-child,
.shs-box-plain > p:last-child {
	margin-bottom: 1.5rem;
}

/* Coloured boxes: white text; links and headings inherit it; buttons use the darker shade. */
.is-style-shs-box-teal,
.is-style-shs-box-slate,
.is-style-shs-box-orange,
.is-style-shs-box-blue {
	--shs-box-button: var(--shs-teal-dark);
	color: #fff;
}

.is-style-shs-box-teal { background: var(--shs-teal); }
.is-style-shs-box-slate { background: var(--shs-slate); --shs-box-button: var(--shs-slate-dark); }
.is-style-shs-box-orange { background: var(--shs-orange); --shs-box-button: var(--shs-orange-dark); }
.is-style-shs-box-blue { background: var(--shs-blue); --shs-box-button: var(--shs-blue-dark); }

:is(.is-style-shs-box-teal, .is-style-shs-box-slate, .is-style-shs-box-orange, .is-style-shs-box-blue, .is-style-shs-box-dark)
	:where(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button):not(.wp-block-button__link)) {
	color: inherit;
}

:is(.is-style-shs-box-teal, .is-style-shs-box-slate, .is-style-shs-box-orange, .is-style-shs-box-blue)
	:where(.wp-block-button__link, .wp-element-button):not(.has-background) {
	background: var(--shs-box-button);
	color: #fff;
}

:is(.is-style-shs-box-teal, .is-style-shs-box-slate, .is-style-shs-box-orange, .is-style-shs-box-blue)
	:where(.wp-block-button__link, .wp-element-button):not(.has-background):hover {
	background: var(--shs-dark);
	color: #fff;
}

:is(.is-style-shs-box-teal, .is-style-shs-box-slate, .is-style-shs-box-orange, .is-style-shs-box-blue)
	.is-style-shs-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.is-style-shs-box-white {
	background: #fff;
	color: var(--shs-text);
}

.is-style-shs-box-dark {
	background: var(--shs-dark);
	color: var(--shs-dark-text);
}

.is-style-shs-box-shadow {
	background: transparent;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

/* Media & Text and Details inside boxes. */
.wp-block-media-text[class*="is-style-shs-box-"] {
	padding: 0;
}

.wp-block-media-text[class*="is-style-shs-box-"] .wp-block-media-text__content {
	padding: var(--shs-box-pad) calc(var(--shs-box-pad) * 2);
}

.wp-block-details[class*="is-style-shs-box-"] summary {
	font-family: lato, Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-weight: 700;
	cursor: pointer;
}

.wp-block-quote[class*="is-style-shs-box-"],
.wp-block-pullquote[class*="is-style-shs-box-"] {
	border-left: 0;
	padding: calc(var(--shs-box-pad) * 1.5);
}

.wp-block-table[class*="is-style-shs-box-"] :where(th, td) {
	border-color: var(--shs-rule);
}

/* Unstyled Gantry .g-content: 15px padding, no background. */
.shs-box-plain,
.shs-site-card {
	padding: var(--shs-box-pad);
}

.shs-site-card > .wp-block-heading {
	margin-top: 0;
}

.shs-site-card > .wp-block-heading + p {
	margin-top: 0.5rem;
}

.shs-site-card p {
	margin-top: 0.875rem;
}

[class*="is-style-shs-box-"].shs-flush {
	padding: 0;
}

.shs-rounded,
.shs-rounded img {
	border-radius: var(--shs-radius);
	overflow: hidden;
}

/* Gantry boxes sit 10px in from the 1200px container edge. */
.shs-inset {
	margin-left: var(--shs-gutter) !important;
	margin-right: var(--shs-gutter) !important;
}

.wp-block-columns.shs-equal > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.shs-equal > .wp-block-column > [class*="is-style-shs-box-"] {
	flex: 1 1 auto;
}

/* ------------------------------------------------------------------ */
/* 7. Text & media                                                     */
/* ------------------------------------------------------------------ */

/* Gantry .g-title — works on Heading, Post Title and Query Title. */
.is-style-shs-label:where(.wp-block-heading, .wp-block-post-title, .wp-block-query-title) {
	font-size: 0.9rem;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-top: 12px;
	margin-bottom: 0;
}

[class*="is-style-shs-box-"] > .is-style-shs-label:first-child {
	margin-top: 12px;
}

.shs-center {
	text-align: center;
}

.wp-block-image.is-style-shs-framed img {
	border: 5px solid #fff;
	box-sizing: border-box;
}

.wp-block-image.shs-img-fill,
.wp-block-image.shs-img-fill img {
	height: 100%;
	width: 100%;
}

.wp-block-image.shs-img-fill img {
	object-fit: cover;
	object-position: center top;
}

.wp-block-image.shs-img-wide,
.wp-block-image.shs-img-wide a,
.wp-block-image.shs-img-wide img {
	display: block;
	width: 100%;
}

.shs-partner-grid.wp-block-gallery.has-nested-images {
	gap: 8px;
}

.shs-extension-logo img {
	max-width: 1150px;
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* 8. Pricing table (Gantry g-pricingtable)                            */
/* ------------------------------------------------------------------ */

.is-style-shs-pricing {
	border: 1px solid var(--shs-rule);
	border-radius: 3px;
	text-align: center;
	color: var(--shs-text);
	background: #fff;
	overflow: hidden;
}

.wp-block-columns.shs-pricing-row {
	gap: clamp(20px, 4vw, 50px) !important;
	margin: 0 clamp(0px, 2vw, 25px) clamp(20px, 4vw, 50px) !important;
	align-items: flex-start !important;
}

.wp-block-columns.shs-pricing-row:last-child {
	margin-bottom: 0 !important;
}

.is-style-shs-pricing > * {
	margin: 0 !important;
}

.is-style-shs-pricing .shs-pricing-title {
	background: var(--shs-teal);
	color: #fff;
	font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	padding: var(--shs-box-pad);
	overflow-wrap: anywhere;
}

.is-style-shs-pricing .shs-pricing-price {
	color: var(--shs-teal);
	font-family: lato, Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	font-weight: 700;
	line-height: 1.5;
	padding: var(--shs-box-pad);
	border-bottom: 1px solid var(--shs-rule);
}

.is-style-shs-pricing .shs-pricing-desc {
	padding: var(--shs-box-pad);
	border-bottom: 1px solid var(--shs-rule);
}

.is-style-shs-pricing ul.shs-pricing-items {
	list-style: none;
	padding: 0;
}

.is-style-shs-pricing ul.shs-pricing-items li {
	padding: var(--shs-box-pad);
	border-bottom: 1px solid var(--shs-rule);
	margin: 0;
}

.is-style-shs-pricing ul.shs-pricing-items li:last-child {
	border-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* 9. Home page pieces                                                 */
/* ------------------------------------------------------------------ */

.shs-contentlist + .shs-contentlist {
	margin-top: 20px !important;
}

.shs-contentlist-cols > .wp-block-column:first-child {
	min-height: 240px;
}

.shs-contentlist .shs-contentlist-headline {
	line-height: 1.2;
	margin: 0;
}

.shs-contentlist .shs-contentlist-subtitle {
	font-size: 0.85rem;
	line-height: 2.2rem;
	margin: 0;
}

.shs-contentlist .shs-contentlist-desc {
	margin: 0.5rem 0 1.5rem;
}

.shs-contentlist .wp-block-buttons {
	margin-top: 0;
}

.shs-footer-columns .is-style-shs-label {
	color: #000;
}

.shs-footer-columns .shs-infolist-title {
	font-size: 0.9rem;
	margin: 1.5rem 0 4px;
}

.shs-footer-columns .shs-infolist-desc {
	font-size: 0.875rem;
	line-height: 1.5;
	margin-top: 0;
}

.shs-contact-item {
	position: relative;
	padding-left: 50px;
	margin-top: 1.5rem;
}

.shs-contact-item::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 6px;
	width: 26px;
	height: 26px;
	background: var(--shs-teal);
	-webkit-mask: var(--shs-icon) center / contain no-repeat;
	mask: var(--shs-icon) center / contain no-repeat;
}

.shs-contact-item.shs-icon-map {
	--shs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.shs-contact-item.shs-icon-mail {
	--shs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zm2 2v.5l8 5 8-5V7l-8 5z'/%3E%3C/svg%3E");
}

.shs-contact-item p {
	margin: 0 !important;
}

.shs-contact-item .shs-contact-label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* 10. Blog, sidebar & footer                                          */
/* ------------------------------------------------------------------ */

.shs-news-loop .wp-block-post-title {
	margin-top: 2rem;
}

.shs-news-loop .wp-block-post-template > li:first-child .wp-block-post-title {
	margin-top: 0;
}

.shs-news-loop .wp-block-post-title a {
	color: var(--shs-teal);
	text-decoration: none;
}

.shs-news-loop .wp-block-post-title a:hover {
	color: var(--shs-teal-darker);
	text-decoration: underline;
}

.shs-entry-meta {
	font-size: 0.9rem;
}

.shs-entry-meta a {
	color: var(--shs-teal);
}

.shs-entry-meta::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.3em;
	vertical-align: -0.1em;
	background: var(--shs-teal);
	-webkit-mask: var(--shs-icon) center / contain no-repeat;
	mask: var(--shs-icon) center / contain no-repeat;
	--shs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 3v6l5 3 1-1.6-4-2.4V7z'/%3E%3C/svg%3E");
}

.shs-sidebar .wp-block-archives-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.shs-sidebar .wp-block-archives-list li {
	padding: 0.15rem 0;
}

.shs-copyright {
	background: var(--shs-panel);
	color: var(--shs-text);
}

.shs-copyright p {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* 10b. Callisto parity — typography, forms & WordPress content        */
/*      Ported from Callisto's SCSS (_typography, _tables, _forms,     */
/*      _utilities, _variations, _buttons) and Gantry Nucleus, with    */
/*      colours adjusted for AA contrast. Layout/utility/legacy-class  */
/*      rules apply only inside .shs-legacy-content, which functions.php */
/*      adds to post content that has no blocks (classic posts/pages).  */
/* ------------------------------------------------------------------ */

:root {
	--shs-red: #c0392b;           /* white text 5.44:1 */
	--shs-red-dark: #962d22;
	--shs-pink: #c2336f;          /* white text 5.12:1 */
	--shs-pink-dark: #9c2959;
	--shs-purple: #874f9a;        /* white text 5.81:1 */
	--shs-purple-dark: #6a3e79;
	--shs-grey-light: #e6e6e6;
	--shs-field-border: #8a8a8a;  /* 3.45:1 on white (non-text) */
}

/* Classic-editor content (95 of 97 posts, newsletter page): Nucleus rhythm and alignment. */
.shs-legacy-content :where(ul, ol):not([class]) {
	padding-left: 1.5rem;
}

.shs-legacy-content :where(img, figure, .wp-caption).alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

.shs-legacy-content :where(img, figure, .wp-caption).alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.shs-legacy-content :where(img, .wp-caption).aligncenter {
	display: block;
	margin: 5px auto;
}

.shs-legacy-content img.alignnone {
	margin: 5px 20px 20px 0;
}

.shs-legacy-content::after {
	content: "";
	display: table;
	clear: both;
}

.shs-legacy-content .wp-caption {
	max-width: 100%;
	padding: 5px 3px 10px;
	text-align: center;
}

.shs-legacy-content .wp-caption .wp-caption-text,
.wp-element-caption {
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--shs-text);
}

iframe,
embed,
object,
video {
	max-width: 100%;
}

/* Callisto .promo large display text. */
.shs-legacy-content .promo {
	font-family: lato, Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
	font-weight: 900;
	line-height: 1.2;
}

/* Blockquote: Callisto's 10px rule. */
.shs-legacy-content blockquote:not([class]),
.wp-block-quote:not([class*="is-style-shs-box-"]) {
	border-left: 10px solid var(--shs-rule);
	margin: 1.5rem 0;
	padding-left: 1rem;
}

:where(blockquote, .wp-block-quote) p {
	font-size: 1.1rem;
	color: var(--shs-text);
}

:where(blockquote, .wp-block-quote) cite {
	display: block;
	text-align: right;
	font-size: 1.2rem;
	font-style: normal;
	color: var(--shs-text);
}

code,
kbd,
pre,
samp {
	font-family: Menlo, Monaco, Consolas, monospace;
}

:not(pre) > code {
	background: #f9f2f4;
	color: #a91f42;               /* 6.5:1 on its background */
	padding: 0.1em 0.3em;
	border-radius: 2px;
}

pre,
.wp-block-code,
.wp-block-preformatted {
	padding: 1rem;
	margin: 1.5rem 0;
	background: #f6f6f6;
	color: #1f6a84;               /* 5.4:1 */
	border: 1px solid var(--shs-field-border);
	border-radius: var(--shs-radius);
	line-height: 1.3;
	font-size: 0.9rem;
	overflow: auto;
}

.shs-legacy-content hr:not(.wp-block-separator) {
	border: 0;
	border-bottom: 1px solid var(--shs-rule);
	margin: 1.5rem 0;
}

/* Tables (Callisto _tables + Nucleus). */
.shs-legacy-content table:not([class]),
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #c4c4c4;
}

.shs-legacy-content table:not([class]) :where(th, td),
.wp-block-table :where(th, td) {
	padding: 0.5rem;
	border: 1px solid #c4c4c4;
	text-align: left;
	vertical-align: middle;
}

.shs-legacy-content table:not([class]) th,
.wp-block-table th {
	background: #ececec;
	color: var(--shs-heading);
}

/* Form fields (Callisto _forms), including the Mailchimp newsletter embed. */
:where(input:is([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"],
	[type="search"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]),
	textarea, select) {
	background-color: #fff;
	color: var(--shs-heading);
	border: 2px solid var(--shs-field-border);
	border-radius: 3px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
	font: inherit;
	line-height: 1.5;
	padding: 0.375rem;
	max-width: 100%;
	transition: border-color 0.2s;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select):hover {
	border-color: var(--shs-teal);
}

:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
	border-color: var(--shs-teal-dark);
}

textarea {
	width: 100%;
	resize: vertical;
}

/* Core Search block: Callisto's rounded search field. */
.wp-block-search .wp-block-search__input {
	border: 2px solid var(--shs-field-border);
	border-radius: 2rem;
	padding: 0.35rem 1rem;
}

.wp-block-search .wp-block-search__button {
	border-radius: 2rem;
	margin-left: 0.5rem;
}

/* ---- Legacy Callisto classes still present in classic content ---- */

/* .button family (used in a blog post and the Mailchimp form). */
.shs-legacy-content :is(a, button, input).button {
	display: inline-block;
	font-family: lato, Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.5;
	border-radius: 3px;
	background: var(--shs-teal-dark);
	color: #fff;
	border: 2px solid transparent;
	margin-bottom: 0.2rem;
	padding: 0.375rem 1.25rem;
	vertical-align: middle;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.shs-legacy-content :is(a, button, input).button:is(:hover, :focus-visible) {
	background: var(--shs-teal-darker);
	color: #fff;
}

.shs-legacy-content .button.button-2 { border-radius: 1.5rem; }
.shs-legacy-content .button.button-square { border-radius: 0; }
.shs-legacy-content .button.button-block { display: block; text-align: center; }
.shs-legacy-content .button.button-xlarge { font-size: 1.4rem; }
.shs-legacy-content .button.button-large { font-size: 1.2rem; }
.shs-legacy-content .button.button-medium { font-size: 1rem; }
.shs-legacy-content .button.button-small { font-size: 0.8rem; }
.shs-legacy-content .button.button-xsmall { font-size: 0.75rem; }

.shs-legacy-content .button.button-3,
.shs-legacy-content .button.button-4 {
	background: transparent;
	color: var(--shs-teal);
	border-color: var(--shs-teal);
}

.shs-legacy-content .button.button-3 { border-radius: 1.5rem; }

.shs-legacy-content .button.button-3:is(:hover, :focus-visible),
.shs-legacy-content .button.button-4:is(:hover, :focus-visible) {
	background: transparent;
	color: var(--shs-teal-darker);
	border-color: var(--shs-teal-darker);
}

.shs-legacy-content .button.button-grey { background: var(--shs-slate); }
.shs-legacy-content .button.button-orange { background: var(--shs-orange); }
.shs-legacy-content .button.button-blue { background: var(--shs-blue); }
.shs-legacy-content .button.button-red { background: var(--shs-red); }
.shs-legacy-content .button.button-pink { background: var(--shs-pink); }
.shs-legacy-content .button.button-purple { background: var(--shs-purple); }
.shs-legacy-content .button.button-grey:hover { background: var(--shs-slate-dark); }
.shs-legacy-content .button.button-orange:hover { background: var(--shs-orange-dark); }
.shs-legacy-content .button.button-blue:hover { background: var(--shs-blue-dark); }
.shs-legacy-content .button.button-red:hover { background: var(--shs-red-dark); }
.shs-legacy-content .button.button-pink:hover { background: var(--shs-pink-dark); }
.shs-legacy-content .button.button-purple:hover { background: var(--shs-purple-dark); }

/* Alerts (Callisto .alert), colours darkened to pass on their tints. */
.shs-legacy-content .alert {
	padding: 0.75rem 1rem;
	margin: 1.5rem 0;
	border: 1px solid;
	border-left-width: 6px;
	border-radius: var(--shs-radius);
	background: #fcf8e3;
	border-color: #8c6b33;
	color: #6b5227;
}

.shs-legacy-content .alert.alert-error,
.shs-legacy-content .alert.alert-danger { background: #f2dede; border-color: #a74240; color: #86332f; }
.shs-legacy-content .alert.alert-info { background: #d9edf7; border-color: #2f6e8d; color: #245a73; }
.shs-legacy-content .alert.alert-success { background: #dff0d8; border-color: #3c753d; color: #2f5d30; }

/* Gantry / Nucleus utility classes. */
.shs-legacy-content .center { text-align: center !important; }
.shs-legacy-content .align-right { text-align: right !important; }
.shs-legacy-content .align-left { text-align: left !important; }
.shs-legacy-content .float-left { float: left !important; }
.shs-legacy-content .float-right { float: right !important; }
.shs-legacy-content .clearfix::after { content: ""; display: table; clear: both; }
.shs-legacy-content .noliststyle,
.shs-legacy-content ul.unstyled,
.shs-legacy-content ol.unstyled { list-style: none; padding-left: 0; margin-left: 0; }
.shs-legacy-content .g-uppercase { text-transform: uppercase; }
.shs-legacy-content .g-notexttransform { text-transform: none; }
.shs-legacy-content .hidden { display: none !important; }
.shs-legacy-content .nomarginall { margin: 0 !important; }
.shs-legacy-content .nomargintop { margin-top: 0 !important; }
.shs-legacy-content .nomarginbottom { margin-bottom: 0 !important; }
.shs-legacy-content .nopaddingall { padding: 0 !important; }
.shs-legacy-content .nopaddingtop { padding-top: 0 !important; }
.shs-legacy-content .nopaddingbottom { padding-bottom: 0 !important; }
.shs-legacy-content .smallmarginall { margin: 0.25rem !important; }
.shs-legacy-content .medmarginall { margin: 1rem !important; }
.shs-legacy-content .largemarginall { margin: 3rem !important; }
.shs-legacy-content .smallpaddingall { padding: 0.25rem !important; }
.shs-legacy-content .medpaddingall { padding: 1rem !important; }
.shs-legacy-content .largepaddingall { padding: 3rem !important; }

/* Extra Callisto box colours and variations. */
.is-style-shs-box-red,
.is-style-shs-box-pink,
.is-style-shs-box-purple {
	color: #fff;
}

.is-style-shs-box-red { background: var(--shs-red); --shs-box-button: var(--shs-red-dark); }
.is-style-shs-box-pink { background: var(--shs-pink); --shs-box-button: var(--shs-pink-dark); }
.is-style-shs-box-purple { background: var(--shs-purple); --shs-box-button: var(--shs-purple-dark); }

:is(.is-style-shs-box-red, .is-style-shs-box-pink, .is-style-shs-box-purple)
	:where(h1, h2, h3, h4, h5, h6, a:not(.wp-element-button):not(.wp-block-button__link)) {
	color: inherit;
}

:is(.is-style-shs-box-red, .is-style-shs-box-pink, .is-style-shs-box-purple)
	:where(.wp-block-button__link, .wp-element-button):not(.has-background) {
	background: var(--shs-box-button);
	color: #fff;
}

.is-style-shs-box-light {
	background: var(--shs-grey-light);
	color: #595959;               /* 5.9:1 on #e6e6e6 */
}

.is-style-shs-box-soft-shadow {
	background: #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
}

/* Callisto layercontent sizes for CTA bands (add as extra CSS class). */
.is-style-shs-cta.shs-band-medium { padding-block: 3rem !important; }
.is-style-shs-cta.shs-band-large { padding-block: clamp(3rem, 8vw, 5rem) !important; }

/* Pagination (Callisto pagination-list look on core Query Pagination). */
.wp-block-query-pagination {
	margin-top: 1.5rem;
	gap: 0.5rem;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-block;
	padding: 4px 12px;
	line-height: 20px;
	background: #fff;
	border: 1px solid #c4c4c4;
	color: var(--shs-teal);
	text-decoration: none;
	margin: 0 -1px 0 0;
}

.wp-block-query-pagination-numbers .page-numbers:first-child { border-radius: 4px 0 0 4px; }
.wp-block-query-pagination-numbers .page-numbers:last-child { border-radius: 0 4px 4px 0; }
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next { border-radius: 4px; }

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--shs-teal-dark);
	border-color: var(--shs-teal-dark);
	color: #fff;
}

.wp-block-query-pagination a:hover {
	background: var(--shs-panel);
}

/* Tag cloud as Callisto tag buttons. */
.wp-block-tag-cloud a,
.widget_tag_cloud a {
	display: inline-block;
	font-family: lato, Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-size: 0.85rem !important;
	background: var(--shs-teal-dark);
	color: #fff;
	border-radius: 3px;
	padding: 5px 8px;
	margin: 0 4px 8px 0;
	text-decoration: none;
}

.wp-block-tag-cloud a:hover,
.widget_tag_cloud a:hover {
	background: var(--shs-teal-darker);
	color: #fff;
}

/* Comments. */
.wp-block-comment-template .wp-block-comment-author-name {
	font-family: lato, Helvetica, Tahoma, Geneva, Arial, sans-serif;
	font-weight: 700;
}

.wp-block-comment-template li > .wp-block-group {
	background: var(--shs-panel);
	border-radius: var(--shs-radius);
	padding: var(--shs-box-pad);
}

/* ------------------------------------------------------------------ */
/* 11. Responsive                                                      */
/*     ≤ 64rem (1024px): tablet · ≤ 48rem (768px): Gantry mobile       */
/* ------------------------------------------------------------------ */

@media (max-width: 64rem) {
	/* Header: labels go, icons stay (each link keeps its accessible name). */
	.wp-block-social-links.is-style-shs-iconmenu .wp-social-link {
		padding: 0 8px;
	}

	.wp-block-social-links.is-style-shs-iconmenu .wp-block-social-link-anchor {
		min-width: 44px;
	}

	.wp-block-social-links.is-style-shs-iconmenu.has-visible-labels .wp-social-link .wp-block-social-link-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.shs-navbar .shs-donate {
		flex: 0 0 auto;
		padding-right: var(--shs-gutter);
	}

}

/* Legacy column rows (pages not yet moved to flowing grids): two across only on tablets.
   782px is where core stacks columns, so phones keep a single column. */
@media (min-width: 782px) and (max-width: 64rem) {
	.wp-block-columns.shs-inset:has(> .wp-block-column:nth-child(4)),
	.wp-block-columns.shs-pricing-row {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.shs-inset:has(> .wp-block-column:nth-child(4)) > .wp-block-column,
	.wp-block-columns.shs-pricing-row > .wp-block-column {
		flex-basis: calc(50% - 20px) !important;
		flex-grow: 0 !important;
	}
}

/* Mobile menu up to 768px (core switches at 600px, which wraps the full menu on small tablets).
   Relies on core Navigation block class names; re-check after major WordPress updates. */
@media (min-width: 600px) and (max-width: 47.99rem) {
	.shs-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.shs-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.shs-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

@media (max-width: 47.99rem) {
	.shs-header__row {
		flex-direction: column;
		justify-content: center !important;
		padding: 1rem 0;
	}

	.wp-block-social-links.is-style-shs-iconmenu {
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	.wp-block-social-links.is-style-shs-iconmenu .wp-social-link {
		margin: 4px 0;
		border-right: 0;
	}

	.shs-header .shs-logo {
		padding-left: 0;
	}

	.shs-navbar .shs-donate {
		padding-left: 0;
	}

	.shs-inset,
	.wp-block-columns.shs-pricing-row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ------------------------------------------------------------------ */
/* Flowing grids (core Group › Grid layout, auto-fill)                  */
/* ------------------------------------------------------------------ */

.is-style-shs-panel > .shs-grid.shs-inset,
.shs-extension > .shs-grid.shs-inset {
	padding-block: var(--shs-gutter);
}

.shs-extension > .shs-grid.shs-inset:last-child {
	padding-bottom: 0;
}

/* Grid items fill their row height; boxes inside fill the item. */
.shs-grid > .shs-site-item,
.shs-grid > [class*="is-style-shs-box-"],
.shs-grid > .is-style-shs-pricing {
	height: 100%;
	box-sizing: border-box;
}

.shs-site-item {
	display: flex;
	flex-direction: column;
}

.shs-site-item > .is-style-shs-box-shadow {
	margin: 0;
}

/* Edge-to-edge grids (Gantry nomarginall): images fill; give them height when stacked. */
.shs-flush-grid .wp-block-image.shs-img-fill img {
	min-height: 220px;
}

.shs-pricing-grid {
	margin-inline: clamp(0px, 2vw, 25px);
}

@media (max-width: 781px) {
	/* Core stacks columns here; give stacked boxes the Gantry 20px gutter. */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.shs-equal > .wp-block-column > .shs-flush {
		min-height: 220px;
	}
}

/* ------------------------------------------------------------------ */
/* 12. Motion & forced colours                                         */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.wp-block-button.shs-icon-download .wp-block-button__link::before,
	.wp-block-button.shs-icon-star .wp-block-button__link::before,
	.shs-entry-meta::before {
		background: ButtonText;
	}

	.shs-contact-item::before {
		background: CanvasText;
	}

	[class*="is-style-shs-box-"],
	.is-style-shs-band,
	.is-style-shs-pricing {
		border: 1px solid CanvasText;
	}
}

@media print {
	/* Callisto printed every section as black text on white. */
	.shs-header,
	.shs-navbar,
	.shs-copyright,
	.is-style-shs-panel,
	.is-style-shs-band,
	[class*="is-style-shs-box-"] {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none !important;
	}

	.shs-navbar,
	.wp-block-social-links,
	.shs-donate,
	.wp-block-search,
	.wp-block-query-pagination {
		display: none !important;
	}

	:where(p, li) a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}