/* Layout blocks (src/blocks/*.astro, defined for the editor in packages/site-blocks).
   Values carried over from the GenerateBlocks sections they replace. */
.jh-band { position: relative; }
.jh-inner { position: relative; z-index: 1; box-sizing: border-box; max-width: 1200px; margin-inline: auto; padding-inline: 30px; }
.jh-inner > :last-child { margin-bottom: 0; }

/* Backgrounds */
.jh-band--light { background-color: #f0f2f5; }
.jh-band--grey { background-color: #dfe1ea; }
.jh-band--fade { background-image: linear-gradient(180deg, rgba(240, 242, 245, 0.7), #fff); overflow: hidden; }
.jh-band--hero { background-color: #f0f2f5; overflow: hidden; }
.jh-band--hero::before, .jh-band--fade::before { content: ""; position: absolute; inset: 0; background: url(/legacy/2021/01/abstract-shapes.svg) center top / cover no-repeat; pointer-events: none; }
.jh-band--fade::before { background-size: auto; }
.jh-band--dots { overflow: hidden; }
.jh-band--dots::before { content: ""; position: absolute; inset: 0; background: url(/legacy/2021/01/dots-1.svg) 20px top / 240px no-repeat; opacity: 0.2; pointer-events: none; }

/* Slanted dividers */
.jh-shape { position: absolute; left: 0; right: 0; line-height: 0; overflow: hidden; color: #fff; pointer-events: none; z-index: 1; }
.jh-shape svg { position: relative; left: 50%; transform: translateX(-50%); width: calc(100% + 1.3px); min-width: 100%; height: var(--jh-shape-h, 40px); fill: currentColor; }
.jh-shape--bottom { bottom: -1px; transform: scaleX(-1); }
.jh-shape--top { top: -1px; transform: scaleY(-1); }

/* Buttons */
.jh-buttons { display: flex; flex-wrap: wrap; gap: 20px 25px; margin-top: 30px; }
.jh-buttons--center { justify-content: center; margin-top: 20px; }
.jh-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; font-weight: 600; text-align: center; border-radius: 2px; text-decoration: none; }
/* Scoped under .jh-buttons a: the theme colours links inside articles (.inside-article a). */
.jh-buttons a.jh-button--solid { padding: 14px 22px; background-color: var(--global-color-8); color: #fff; }
.jh-buttons a.jh-button--solid:is(:hover, :focus, :active) { background-color: var(--accent); color: #fff; }
.jh-buttons a.jh-button--outline { padding: 10px 20px; border: 4px solid #482d70; color: var(--global-color-8); }
.jh-buttons a.jh-button--outline:is(:hover, :focus, :active) { border-color: rgba(72, 45, 112, 0.8); color: var(--accent); }

/* Section headings */
.jh-section-title { text-align: center; }
.jh-section-title--accent { margin-top: 20px; }
.jh-eyebrow { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; font-size: 21px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }
.jh-eyebrow__line { line-height: 0; color: #482d70; }
.jh-eyebrow__line svg { width: 1.5em; height: 1.5em; fill: currentColor; }
.jh-icon { display: inline-flex; line-height: 0; }
.jh-icon svg { fill: currentColor; }

/* Hero */
.jh-hero { display: flex; gap: 100px; padding-top: 200px; padding-bottom: 10px; }
.jh-hero > * { flex: 1 1 0; min-width: 0; }
.jh-hero__media img { display: block; width: 100%; height: auto; }
.jh-hero__title { font-size: 40px; }

/* Recent posts & notes */
.jh-recent { padding-bottom: 20px; }

/* Image cards */
.jh-cards { padding-top: 100px; padding-bottom: 50px; }
.jh-cards__grid { display: grid; grid-template-columns: repeat(var(--jh-cols, 3), minmax(0, 1fr)); gap: 40px; }
.jh-card__figure { margin: 0; overflow: hidden; }
.jh-card__figure img { display: block; width: 100%; height: auto; }
.jh-card__label { text-align: center; margin: 0; }

/* Text + image */
.jh-split { display: flex; gap: 100px; padding-top: 20px; padding-bottom: 60px; }
.jh-split > * { flex: 1 1 0; min-width: 0; }
.jh-split__title { margin-top: 20px; }
.jh-split__title--h2 { margin-top: 0; }
.jh-split--image-left .jh-split__media { order: -1; }
.jh-split__media { margin: 0; }
.jh-split__media img { display: block; width: 100%; height: auto; }
.jh-split__media figcaption { margin: 6.5px 0 13px; font-size: 13px; line-height: 17px; text-align: center; }
.jh-split--fill { align-items: center; gap: 80px; }
.jh-split--fill .jh-split__media { position: relative; align-self: stretch; min-height: 300px; border-radius: 8px; overflow: hidden; }
.jh-split--fill .jh-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

/* Callout */
.jh-callout { padding-block: 20px; text-align: center; }
.jh-callout__title { display: flex; align-items: center; justify-content: center; gap: 0.5em; }
.jh-callout__icon svg { width: 1em; height: 1em; }

/* Feature grid */
.jh-features { padding-top: 40px; padding-bottom: 50px; }
.jh-band--fade > .jh-features { padding-top: 100px; padding-bottom: 40px; }
.jh-features__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 60px; }
.jh-feature__title { display: flex; margin-bottom: 20px; font-family: "Source Sans Pro", sans-serif; font-size: 21px; font-weight: 600; line-height: 1.4; color: #1b1b42; }
.jh-features--centered .jh-feature { text-align: center; }
.jh-features--centered .jh-feature__title { flex-direction: column; align-items: center; }
.jh-features--centered .jh-feature__icon { padding-bottom: 0.3em; }
.jh-features--centered .jh-feature__icon svg { width: 70px; height: 70px; }
.jh-features--inline .jh-feature__title { align-items: center; gap: 0.5em; }
.jh-features--inline .jh-feature__icon svg { width: 1em; height: 1em; }

@media (max-width: 1024px) {
	.jh-band--hero .jh-shape svg, .jh-band--fade .jh-shape svg { width: 150%; }
	.jh-hero { flex-direction: column; align-items: center; gap: 40px; padding-top: 150px; padding-bottom: 160px; }
	.jh-hero__media { order: 2; width: 85%; }
	.jh-hero__body { width: 100%; }
	.jh-split { flex-direction: column; align-items: center; gap: 40px; }
	.jh-split > * { width: 100%; }
	.jh-split__media { width: 85% !important; }
	.jh-split--image-left .jh-split__media { order: 0; }
	.jh-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.jh-band--hero .jh-shape svg, .jh-band--fade .jh-shape svg { width: 200%; }
	.jh-hero { padding-top: 200px; }
	.jh-hero__media, .jh-split__media { width: 100% !important; }
	.jh-cards__grid, .jh-features__grid { grid-template-columns: 1fr; }
}

/* Dark band (service-page intros) */
.jh-band--navy { background-color: #08083d; color: #fff; }
.jh-band--navy :is(h1, h2, h3, h4, p, li) { color: #fff; }
.jh-band--navy a:not(.jh-button) { color: #fff; text-decoration: underline; }

/* Callout sizes */
.jh-callout--h1, .jh-callout--h2 { padding-block: 50px; max-width: 660px; }
.jh-callout--h1 .jh-callout__title { font-size: 46px; line-height: 1.1; }
.jh-callout:not(.jh-callout--h3) .jh-callout__title { display: block; }

/* Feature grid: column count follows the items */
.jh-features__grid { grid-template-columns: repeat(var(--jh-cols, 4), minmax(0, 1fr)); }
.jh-features__intro { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.jh-features--stats .jh-feature { text-align: center; }
.jh-features--stats .jh-feature__title { display: block; font-family: "Source Serif 4", serif; font-size: 60px; font-weight: 900; line-height: 1.2; color: #2e2e33; }
.jh-features--text .jh-feature__title { display: block; font-family: "Source Serif 4", serif; font-size: 29.9px; font-weight: 700; line-height: 1.2; color: #2e2e33; }
.jh-features--text { padding-top: 20px; padding-bottom: 30px; }

/* FAQ (was Spectra's FAQ block) */
.jh-faq { margin-bottom: 1.5em; }
.jh-faq__item { margin-bottom: 10px; border: 1px solid #1e1e1e; border-radius: 2px; }
.jh-faq__question { display: flex; gap: 10px; align-items: baseline; padding: 10px; cursor: pointer; font-weight: 700; list-style: none; }
.jh-faq__question::-webkit-details-marker { display: none; }
.jh-faq__question::before { content: "+"; flex: 0 0 15px; font-weight: 400; line-height: 1; }
.jh-faq__item[open] > .jh-faq__question::before { content: "−"; }
.jh-faq__question:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jh-faq__answer { padding: 0 10px 10px 35px; }
.jh-faq__answer > :last-child { margin-bottom: 0; }

/* Link cards (were Visual Link Preview cards) */
.jh-link-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-bottom: 1.5em; }
.jh-link-card { position: relative; display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.jh-link-card__image { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: #f0f2f5; }
.jh-link-card__body { padding: 15px 20px 20px; }
.jh-link-card__title { margin: 0 0 10px; font-size: 21px; line-height: 1.3; }
.jh-link-card__title a::after { content: ""; position: absolute; inset: 0; }
.jh-link-card__title a:focus-visible { outline: none; }
.jh-link-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.jh-link-card__summary { font-size: 17px; line-height: 1.5; }
.jh-link-card__summary > :last-child { margin-bottom: 0; }
.jh-link-card__site { margin: 10px 0 0; font-size: 14px; color: #585e6a; }

/* Testimonials */
.jh-quotes { padding-top: 30px; padding-bottom: 30px; }
.jh-quotes__title { text-align: center; }
.jh-quotes__grid { display: grid; grid-template-columns: repeat(var(--jh-cols, 3), minmax(0, 1fr)); gap: 20px; }
.jh-band--soft { background-color: #f4f6f8; }

/* Notice (was Spectra's inline notice) */
.jh-notice { margin: 0 0 1.5em; }
.jh-notice__title { display: inline-block; margin: 0; padding: 15px; font-size: 21px; font-weight: 600; line-height: 1.4; color: #1b1b42; background: #d287fe; border-radius: 3px 3px 0 0; }
.jh-notice__text { padding: 15px; border: 2px solid #d287fe; border-radius: 0 3px 3px 3px; }
.jh-notice__text > :last-child { margin-bottom: 0; }

/* Posts by tag */
.jh-posts { margin: 30px 0; }
.jh-posts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jh-post-card { padding: 20px; background: #f6f6f6; }
.jh-post-card img { display: block; width: 100%; height: auto; margin-bottom: 15px; }
.jh-post-card__title { font-size: 21px; line-height: 1.4; margin-bottom: 10px; }
.jh-post-card__date { font-size: 14px; margin-bottom: 10px; }
.jh-post-card__excerpt { font-size: 18px; line-height: 1.5; margin: 0; }

/* Text + form */
.jh-split--form { align-items: flex-start; }
.jh-split__form-title { margin-top: 0; }

/* Booking embed */
.jh-booking { display: block; width: 100%; min-width: 320px; height: 700px; border: 0; }

@media (max-width: 1024px) {
	.jh-features__grid { grid-template-columns: repeat(min(var(--jh-cols, 4), 2), minmax(0, 1fr)); }
	.jh-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.jh-link-cards, .jh-quotes__grid, .jh-posts__grid, .jh-features__grid { grid-template-columns: 1fr; }
	.jh-callout--h1 .jh-callout__title { font-size: 36px; }
	.jh-features--stats .jh-feature__title { font-size: 48px; }
}

/* Contact details (Text + image "contact" toggle) */
.jh-contact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 30px; margin-top: 50px; padding: 50px 0 40px; border-top: 1px solid #192b80; }
.jh-contact__address { margin: 0; color: #1b1b42; }
.jh-contact__social { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.jh-contact__social a { display: inline-flex; padding: 6px; border: 2px solid #1b1b42; border-radius: 50px; color: #1b1b42; line-height: 0; }
.jh-contact__social a:is(:hover, :focus) { border-color: #192b80; color: #192b80; }
.jh-contact__social svg { width: 1em; height: 1em; }
.jh-split__more { margin-top: 30px; }
.jh-split__body > .jh-buttons:not(:last-child) { margin-bottom: 30px; }

/* Feature grid: cards (e.g. supporter tiers) */
.jh-features--cards .jh-features__grid { padding: 20px; gap: 30px; border: 1px solid #cfe8f3; background: #fbfdff; }
.jh-features--cards .jh-feature__title { display: block; text-align: center; font-size: 21px; font-weight: 600; color: #192b80; }
.jh-features--cards .jh-feature > p { text-align: center; font-weight: 600; }