/* ==========================================================================
   INBS District — theme styles
   Everything here builds on the tokens defined in theme.json, so changing a
   colour or a font is done there, once, not hunted through this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Foundations
   -------------------------------------------------------------------------- */

:root {
	--inbs-gutter: clamp(20px, 5vw, 40px);
	--inbs-radius: 9px;
	--inbs-radius-lg: 12px;
	--inbs-line: var(--wp--preset--color--line);
	--inbs-shadow-card: 0 1px 2px rgba(15, 23, 32, .05), 0 12px 30px -14px rgba(15, 23, 32, .2);
	--inbs-shadow-lift: 0 16px 44px -20px rgba(4, 33, 63, .5);
}

body {
	overflow-x: hidden;
}

/* Anything that can outgrow its track scrolls inside itself rather than
   pushing the page sideways. */
.wp-block-table,
.inbs-meetings-wrap,
pre {
	overflow-x: auto;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
	border-radius: 3px;
}

.inbs-main > * + * {
	margin-block-start: 0;
}

/* A full-bleed band with generous vertical rhythm. */
.inbs-band {
	padding-block: clamp(38px, 6vw, 60px);
	padding-inline: var(--inbs-gutter);
}

.inbs-body {
	padding-block: clamp(32px, 5vw, 52px);
	padding-inline: var(--inbs-gutter);
}

.inbs-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
	max-width: 62ch;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.inbs-kicker {
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--yellow);
	margin-block-end: var(--wp--preset--spacing--20);
}

.inbs-empty {
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

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

.inbs-strip {
	padding-block: 8px;
	padding-inline: var(--inbs-gutter);
}

.inbs-strip__inner {
	gap: 8px 20px;
	align-items: center;
}

.inbs-strip p,
.inbs-strip__links {
	margin: 0;
	font-weight: 700;
}

.inbs-strip a {
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	font-weight: 700;
}

.inbs-strip a:hover {
	color: #fff;
	text-decoration: underline;
}

.inbs-strip__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
}

.inbs-nav {
	padding-block: 14px;
	padding-inline: var(--inbs-gutter);
	border-block-end: 1px solid var(--inbs-line);
	position: relative;
	z-index: 20;
}

.inbs-nav__inner {
	gap: 20px 28px;
	align-items: center;
}

.inbs-nav__right {
	gap: 14px 24px;
	align-items: center;
}

.inbs-logo {
	display: inline-flex;
	line-height: 0;
}

.inbs-logo img {
	height: 44px;
	width: auto;
	display: block;
}

.inbs-footer .inbs-logo img {
	height: 52px;
	margin-block-end: 14px;
}

.inbs-nav .wp-block-navigation {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.inbs-nav .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.inbs-nav .wp-block-navigation a:hover,
.inbs-nav .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--blue);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.inbs-btn {
	display: inline-block;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	padding: .7rem 1.25rem;
	border-radius: 6px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease;
}

.inbs-btn--primary {
	background: var(--wp--preset--color--blue);
	color: #fff;
}

.inbs-btn--primary:hover {
	background: var(--wp--preset--color--blue-dark);
	color: #fff;
	text-decoration: none;
}

.inbs-btn--yellow {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
}

.inbs-btn--yellow:hover {
	background: #F4D400;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.inbs-btn--outline {
	border-color: var(--inbs-line);
	color: var(--wp--preset--color--ink);
	background: #fff;
}

.inbs-btn--outline:hover {
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--blue);
	text-decoration: none;
}

/* A ghost button that works on the navy hero. */
.inbs-btn-ghost .wp-block-button__link {
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.inbs-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

.wp-block-buttons.is-style-inbs-actions {
	gap: 11px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.inbs-hero {
	position: relative;
	overflow: hidden;
	padding: 0;
	isolation: isolate;
}

.inbs-hero__scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.inbs-hero__copy {
	padding-block: clamp(48px, 9vw, 104px);
	padding-inline: var(--inbs-gutter);
}

.inbs-hero__title {
	max-width: 16ch;
	text-wrap: balance;
	margin-block: 0 var(--wp--preset--spacing--20);
	text-shadow: 0 2px 26px rgba(2, 14, 28, .55);
}

.inbs-hero__title em {
	font-style: normal;
	color: var(--wp--preset--color--yellow);
}

.inbs-hero__lede {
	max-width: 46ch;
	line-height: 1.55;
	margin-block: 0 var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, .93);
	text-shadow: 0 1px 14px rgba(2, 14, 28, .55);
}

/* --------------------------------------------------------------------------
   Ribbon
   -------------------------------------------------------------------------- */

.inbs-ribbon {
	padding-block: 15px;
	padding-inline: var(--inbs-gutter);
}

.inbs-ribbon__inner {
	gap: 10px 20px;
	align-items: center;
}

.inbs-ribbon p {
	margin: 0;
	font-weight: 700;
	color: #1B1500;
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Quick cards
   -------------------------------------------------------------------------- */

.inbs-quick {
	padding-block: 0 clamp(38px, 6vw, 60px);
	padding-inline: var(--inbs-gutter);
}

.inbs-quick__grid {
	gap: 0;
	border-radius: var(--inbs-radius-lg);
	overflow: hidden;
	box-shadow: var(--inbs-shadow-lift);
	position: relative;
	margin-block-start: -36px;
	z-index: 5;
}

.inbs-qc {
	padding: 24px;
}

/* Card titles are level 2 on the home page and level 3 where a page puts cards under its own heading. */
.inbs-qc h2,
.inbs-qc h3 {
	margin-block: 0 6px;
}

.inbs-qc p {
	margin-block: 0;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}

.inbs-qc__arrow {
	margin-block-start: 14px !important;
	font-weight: 800;
}

.inbs-qc__arrow a {
	color: #fff;
	text-decoration: none;
}

.inbs-qc__arrow a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Age sections
   -------------------------------------------------------------------------- */

.inbs-ages {
	gap: 11px;
}

.inbs-age {
	border-radius: var(--inbs-radius);
	padding: 16px 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 150px;
}

.inbs-age__yrs {
	margin: 0;
	font-weight: 600;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	opacity: .92;
}

.inbs-age__nm {
	margin: 0;
	letter-spacing: -.015em;
}

.inbs-age__d {
	margin-block: auto 0 !important;
	padding-block-start: 10px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .9);
}

/* --------------------------------------------------------------------------
   Group index — the "by area" listing
   -------------------------------------------------------------------------- */

.inbs-index__area {
	border-block-start: 1px solid var(--inbs-line);
	padding-block: 16px 14px;
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 18px;
}

.inbs-index__area:last-child {
	border-block-end: 1px solid var(--inbs-line);
}

.inbs-index__heading {
	margin: 3px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	line-height: 1.4;
}

.inbs-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.inbs-index__item {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
}

.inbs-index__item a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.inbs-index__item a:hover {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
}

.inbs-index__place {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.inbs-flag {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 100px;
	vertical-align: 1px;
	white-space: nowrap;
}

.inbs-flag--open {
	background: #E6F6EE;
	color: #0F6B45;
}

.inbs-flag--closed {
	background: #EDF0F5;
	color: #4A5364;
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */

.inbs-stats__grid {
	gap: 22px;
}

.inbs-stat {
	text-align: center;
}

.inbs-stat__n {
	margin: 0;
	font-size: clamp(34px, 5vw, 47px);
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--wp--preset--color--yellow);
	font-variant-numeric: tabular-nums;
}

.inbs-stat__l {
	margin-block: 8px 0 !important;
	font-weight: 700;
	color: rgba(255, 255, 255, .9);
}

/* --------------------------------------------------------------------------
   Page heads
   -------------------------------------------------------------------------- */

.inbs-pagehead {
	padding-block: clamp(24px, 4vw, 32px) clamp(28px, 4vw, 38px);
	padding-inline: var(--inbs-gutter);
	border-block-end: 1px solid var(--inbs-line);
}

.inbs-pagehead--leaders {
	border-block-end: 0;
}

.inbs-pagehead h1 {
	margin-block: 0;
}

.inbs-crumb {
	margin-block: 0 14px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
}

.inbs-crumb a {
	text-decoration: none;
}

.inbs-crumb a:hover {
	text-decoration: underline;
}

.inbs-crumb span {
	opacity: .5;
	margin-inline: 4px;
}

.inbs-tagrow {
	margin-block: 14px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The area tag under a group's title: a block in the page column (like the title above it),
   holding the pill links. */
.inbs-pagehead .wp-block-post-terms {
	margin-block: 14px 0;
}

.inbs-tagpill,
.inbs-pagehead .wp-block-post-terms a,
.inbs-pagehead .wp-block-post-terms .inbs-areatag {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	padding: 5px 11px;
	border-radius: 100px;
	background: #fff;
	border: 1px solid var(--inbs-line);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	margin-block-start: 12px;
}

/* --------------------------------------------------------------------------
   Group page
   -------------------------------------------------------------------------- */

.inbs-groupcols {
	gap: clamp(28px, 4vw, 44px);
}

.inbs-groupphoto img {
	border-radius: var(--inbs-radius);
}

.inbs-meetings {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	min-width: 480px;
}

.inbs-meetings th {
	text-align: start;
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 700;
	padding: 9px 12px 9px 0;
	border-block-end: 1px solid var(--inbs-line);
	white-space: nowrap;
}

.inbs-meetings td {
	padding: 12px 12px 12px 0;
	border-block-end: 1px solid var(--inbs-line);
	vertical-align: middle;
}

.inbs-meetings tr:last-child td {
	border-block-end: 0;
}

.inbs-meetings .inbs-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.inbs-section {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	white-space: nowrap;
}

.inbs-section__swatch {
	width: 10px;
	height: 26px;
	border-radius: 3px;
	flex: none;
}

/* Sidebar cards. */
.inbs-cards {
	display: grid;
	gap: 14px;
}

.inbs-card {
	border: 1px solid var(--inbs-line);
	border-radius: var(--inbs-radius);
	padding: 20px;
	display: grid;
	gap: 11px;
	align-content: start;
}

.inbs-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
	letter-spacing: -.015em;
}

.inbs-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}

.inbs-card__row {
	display: grid;
	gap: 2px;
}

.inbs-card__k {
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 700;
}

.inbs-card__v {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.45;
}

.inbs-card--join {
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
	color: #fff;
}

.inbs-card--join h3 {
	color: #fff;
	font-size: var(--wp--preset--font-size--x-large);
}

.inbs-card--join p {
	color: rgba(255, 255, 255, .92);
}

.inbs-card--join .inbs-btn {
	justify-self: start;
}

/* --------------------------------------------------------------------------
   Equipment (leaders' area)
   -------------------------------------------------------------------------- */

.inbs-kitgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
}

.inbs-kit {
	border: 1px solid var(--inbs-line);
	border-radius: 8px;
	padding: 13px 14px;
	display: grid;
	gap: 5px;
	align-content: start;
	background: #fff;
}

.inbs-kit__name {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	letter-spacing: -.01em;
}

.inbs-kit__spec {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.45;
}

.inbs-kit__foot {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-block-start: 4px;
	flex-wrap: wrap;
}

.inbs-kit__rate {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--blue);
	font-variant-numeric: tabular-nums;
}

.inbs-kit__av {
	margin-inline-start: auto;
	font-size: 11px;
	font-weight: 800;
	color: #0F6B45;
	white-space: nowrap;
}

.inbs-kit__av--none {
	color: #9C1F0C;
}

/* --------------------------------------------------------------------------
   Hall promo & tick lists
   -------------------------------------------------------------------------- */

.inbs-promo {
	border: 1px solid var(--inbs-line);
	border-radius: var(--inbs-radius-lg);
	overflow: hidden;
	gap: 0;
}

.inbs-promo .wp-block-column {
	margin: 0;
}

.inbs-promo__pic {
	background: linear-gradient(150deg, #0A3560, #006EE0 70%, #00A794);
	min-height: 240px;
	display: grid;
	place-items: center;
	padding: 20px;
}

.inbs-promo__ph {
	color: rgba(255, 255, 255, .8);
	text-align: center;
	margin: 0;
	max-width: 22ch;
}

.inbs-promo__pic:has(img) {
	background: none;
	padding: 0;
	place-items: stretch;
}

/* The promo photo sits inside a <figure>, so the figure has to stretch too,
   otherwise the image is centred in the column with a gap around it. */

.inbs-promo__pic .wp-block-image {
	margin: 0;
	display: grid;
}

.inbs-promo__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.inbs-promo__body {
	padding: clamp(24px, 3vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.inbs-promo__body > * {
	margin-block: 0;
}

.inbs-promo__body .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: 8px;
}

.inbs-addr {
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wp--preset--color--blue);
}

.inbs-yesno {
	gap: 22px;
}

.wp-block-list.is-style-inbs-ticks,
.wp-block-list.is-style-inbs-crosses {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.wp-block-list.is-style-inbs-ticks li,
.wp-block-list.is-style-inbs-crosses li {
	padding-inline-start: 28px;
	position: relative;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.5;
}

.wp-block-list.is-style-inbs-ticks li strong,
.wp-block-list.is-style-inbs-crosses li strong {
	color: var(--wp--preset--color--ink);
}

.wp-block-list.is-style-inbs-ticks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	top: 6px;
	width: 12px;
	height: 7px;
	border-inline-start: 2.5px solid var(--wp--preset--color--green);
	border-block-end: 2.5px solid var(--wp--preset--color--green);
	transform: rotate(-45deg);
}

.wp-block-list.is-style-inbs-crosses li::before {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	top: 10px;
	width: 12px;
	height: 2.5px;
	background: var(--wp--preset--color--red);
}

/* --------------------------------------------------------------------------
   Card / band block styles volunteers can pick from the sidebar
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-inbs-card {
	border: 1px solid var(--inbs-line);
	border-radius: var(--inbs-radius);
	padding: clamp(20px, 3vw, 28px);
	background: #fff;
}

.wp-block-group.is-style-inbs-band {
	padding-block: clamp(38px, 6vw, 60px);
	padding-inline: var(--inbs-gutter);
}

.wp-block-table.is-style-inbs-data table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-inbs-data td,
.wp-block-table.is-style-inbs-data th {
	border: 0;
	border-block-end: 1px solid var(--inbs-line);
	padding: 11px 0;
}

.wp-block-table.is-style-inbs-data td:last-child {
	text-align: end;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--blue);
}

.wp-block-table.is-style-inbs-data tr:last-child td {
	border-block-end: 0;
}

/* Table headers follow their columns: the first and middle columns sit on the left and the
   last column on the right, as the cells below them do. (A header aligned by hand in the
   editor is left as set, except in the last column, which always follows the theme.) */
.wp-block-table.is-style-inbs-data th:not([class*="has-text-align"]) {
	text-align: start;
}

.wp-block-table.is-style-inbs-data th:last-child {
	text-align: end;
}

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

.inbs-footer {
	padding-block: clamp(38px, 5vw, 48px) 26px;
	padding-inline: var(--inbs-gutter);
}

.inbs-footer__cols {
	gap: 32px;
}

.inbs-footer__blurb {
	color: rgba(255, 255, 255, .76);
	max-width: 36ch;
	line-height: 1.65;
	margin-block: 0;
}

.inbs-footer__head {
	margin-block: 0 12px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--yellow);
	font-weight: 700;
}

.inbs-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.inbs-footer__list a,
.inbs-footer__legal a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.inbs-footer__list a:hover,
.inbs-footer__legal a:hover {
	color: #fff;
	text-decoration: underline;
}

.inbs-footer__legal {
	margin-block-start: 34px;
	padding-block-start: 18px;
	border-block-start: 1px solid rgba(255, 255, 255, .16);
	gap: 6px 18px;
	color: rgba(255, 255, 255, .6);
}

.inbs-footer__legal p {
	margin: 0;
	color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   Teasers
   -------------------------------------------------------------------------- */

.inbs-teaser {
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--inbs-line);
}

.inbs-teaser h2 a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.inbs-teaser h2 a:hover {
	color: var(--wp--preset--color--blue);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.inbs-index__area {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.inbs-quick__grid {
		margin-block-start: 0;
	}

	.inbs-groupcols__aside {
		margin-block-start: var(--wp--preset--spacing--30);
	}

	.inbs-hero__scene {
		object-position: 60% center;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* --------------------------------------------------------------------------
   Print — group pages get printed and pinned to hall noticeboards
   -------------------------------------------------------------------------- */

@media print {
	.inbs-header,
	.inbs-footer,
	.inbs-ribbon,
	.inbs-quick,
	.inbs-card--join {
		display: none !important;
	}

	.inbs-band,
	.inbs-body {
		padding: 0;
	}

	body {
		font-size: 11pt;
	}
}

/* --------------------------------------------------------------------------
   Request forms
   -------------------------------------------------------------------------- */

.inbs-form {
	display: grid;
	gap: 18px;
	max-width: 640px;
	margin-block: var(--wp--preset--spacing--30);
}

.inbs-form__intro {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	max-width: 58ch;
}

.inbs-field {
	display: grid;
	gap: 6px;
}

.inbs-field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
}

.inbs-field label em {
	font-style: normal;
	color: var(--wp--preset--color--red);
	margin-inline-start: 2px;
}

.inbs-field__hint {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
	font-weight: 600;
	line-height: 1.5;
}

.inbs-form input[type="text"],
.inbs-form input[type="email"],
.inbs-form input[type="tel"],
.inbs-form input[type="url"],
.inbs-form input[type="number"],
.inbs-form input[type="date"],
.inbs-form input[type="time"],
.inbs-form select,
.inbs-form textarea {
	font: inherit;
	/* 16px stops iOS zooming the whole page when a field is focused. */
	font-size: 16px;
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--inbs-line);
	border-radius: 8px;
	background: #fff;
	color: var(--wp--preset--color--ink);
}

.inbs-form textarea {
	min-height: 110px;
	line-height: 1.6;
	resize: vertical;
}

.inbs-field__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	cursor: pointer;
}

.inbs-field__check input {
	width: 20px;
	height: 20px;
	flex: none;
	margin-block-start: 1px;
	accent-color: var(--wp--preset--color--blue);
}

.inbs-form button[type="submit"] {
	justify-self: start;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
	padding: .85rem 1.6rem;
}

.inbs-form__required,
.inbs-form__privacy {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
}

/* The honeypot. Hidden from people, left in the DOM for bots to fill in. */
.inbs-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.inbs-form-errors {
	border-inline-start: 3px solid var(--wp--preset--color--red);
	background: #FDECEA;
	padding: 14px 18px;
	border-radius: 0 8px 8px 0;
}

.inbs-form-errors p,
.inbs-form-errors li {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: #7A1B0A;
}

.inbs-form-errors ul {
	margin: 8px 0 0;
	padding-inline-start: 20px;
	display: grid;
	gap: 4px;
}

.inbs-form-done {
	border-inline-start: 3px solid var(--wp--preset--color--green);
	background: #E6F6EE;
	padding: 20px 24px;
	border-radius: 0 var(--inbs-radius) var(--inbs-radius) 0;
	max-width: 640px;
	margin-block: var(--wp--preset--spacing--30);
}

.inbs-form-done h3 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--x-large);
	color: #0F6B45;
}

.inbs-form-done p {
	margin: 0;
	color: #14523A;
	line-height: 1.6;
	max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Embedded calendar (Teamup)
   -------------------------------------------------------------------------- */

.inbs-calendar {
	border: 1px solid var(--inbs-line);
	border-radius: var(--inbs-radius);
	overflow: hidden;
	background: #fff;
}

.inbs-calendar iframe {
	display: block;
	width: 100%;
	min-height: 640px;
	border: 0;
}

@media (max-width: 781px) {
	.inbs-calendar iframe {
		min-height: 520px;
	}
}

/* --------------------------------------------------------------------------
   Form presentation — added September 2026
   Builds on the "Request forms" rules above rather than replacing them.
   The form was the only element on the site not sitting in a card.
   -------------------------------------------------------------------------- */

.inbs-form {
	gap: 20px;
	max-width: 680px;
	padding: clamp(22px, 4vw, 34px);
	border: 1px solid var(--inbs-line);
	border-radius: var(--inbs-radius-lg);
	background: var(--wp--preset--color--paper);
	box-shadow: var(--inbs-shadow-card);
}

.inbs-form__intro {
	font-size: var(--wp--preset--font-size--medium);
	padding-block-end: 20px;
	border-block-end: 1px solid var(--inbs-line);
}

.inbs-field {
	gap: 7px;
}

.inbs-field label {
	line-height: 1.35;
}

.inbs-field__hint {
	margin-block-end: 1px;
}

.inbs-form input[type="text"],
.inbs-form input[type="email"],
.inbs-form input[type="tel"],
.inbs-form input[type="url"],
.inbs-form input[type="number"],
.inbs-form input[type="date"],
.inbs-form input[type="time"],
.inbs-form select,
.inbs-form textarea {
	background: var(--wp--preset--color--paper-alt);
	border-radius: var(--inbs-radius);
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.inbs-form input:hover,
.inbs-form select:hover,
.inbs-form textarea:hover {
	border-color: #C3CEDC;
}

.inbs-form input:focus,
.inbs-form select:focus,
.inbs-form textarea:focus {
	outline: none;
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--blue);
	box-shadow: 0 0 0 3px rgba(0, 110, 224, .16);
}

.inbs-form input::placeholder,
.inbs-form textarea::placeholder {
	color: #98A4B4;
}

.inbs-form textarea {
	min-height: 130px;
}

/* Replace the OS dropdown arrow with the site's own chevron. */
.inbs-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234E5A6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.inbs-form select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23006EE0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.inbs-field--checkbox .inbs-field__check,
.inbs-field--checkboxes .inbs-field__check {
	border: 1px solid var(--inbs-line);
	border-radius: var(--inbs-radius);
	background: var(--wp--preset--color--paper-alt);
	padding: 12px 14px;
	transition: border-color .15s, background-color .15s;
}

.inbs-field--checkbox .inbs-field__check:hover,
.inbs-field--checkboxes .inbs-field__check:hover {
	border-color: #C3CEDC;
}

.inbs-field--checkbox .inbs-field__check:focus-within,
.inbs-field--checkboxes .inbs-field__check:focus-within {
	border-color: var(--wp--preset--color--blue);
	box-shadow: 0 0 0 3px rgba(0, 110, 224, .16);
}

/* A group of tick boxes ("tick as many as you like"): a fieldset with a legend that reads like a field label. */
.inbs-field__group {
	display: grid;
	gap: 7px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.inbs-field__group legend {
	padding: 0;
	margin-block-end: 1px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	line-height: 1.35;
}

.inbs-field__group legend em {
	font-style: normal;
	color: var(--wp--preset--color--red);
	margin-inline-start: 2px;
}

.inbs-field--checkboxes .inbs-field__check {
	padding: 10px 14px;
}

.inbs-form__required {
	padding-block-start: 18px;
	border-block-start: 1px solid var(--inbs-line);
}

.inbs-form button[type="submit"] {
	border-radius: 6px;
}

@media (max-width: 480px) {
	.inbs-form button[type="submit"] {
		justify-self: stretch;
		text-align: center;
	}
}

.inbs-form-done,
.inbs-form-errors {
	max-width: 680px;
	border-radius: 0 var(--inbs-radius-lg) var(--inbs-radius-lg) 0;
	box-shadow: var(--inbs-shadow-card);
}

/* --------------------------------------------------------------------------
   Accessibility fixes — WCAG 2.2 AA, September 2026
   -------------------------------------------------------------------------- */

/* Contrast (SC 1.4.3). White text on green (#23A950) and teal (#00A794)
   measures 3.06:1 and 3.02:1; AA needs 4.5:1. Ink text keeps the brand
   colours and gives 5.90:1 and 5.98:1. Headings, paragraphs and the arrow
   link are targeted directly because WordPress's .has-paper-color utility
   carries !important, so colouring the card alone does not reach them. */

.inbs-qc.has-green-background-color,
.inbs-qc.has-teal-background-color,
.inbs-qc.has-yellow-background-color,
.inbs-qc.has-green-background-color h2,
.inbs-qc.has-teal-background-color h2,
.inbs-qc.has-yellow-background-color h2,
.inbs-qc.has-green-background-color h3,
.inbs-qc.has-teal-background-color h3,
.inbs-qc.has-yellow-background-color h3,
.inbs-qc.has-green-background-color p,
.inbs-qc.has-teal-background-color p,
.inbs-qc.has-yellow-background-color p,
.inbs-qc.has-green-background-color .inbs-qc__arrow a,
.inbs-qc.has-teal-background-color .inbs-qc__arrow a,
.inbs-qc.has-yellow-background-color .inbs-qc__arrow a {
	color: var(--wp--preset--color--ink);
}

/* Tap targets (SC 2.5.8). The two utility-strip links were 20px tall
   against the 24px minimum; 4px of vertical padding takes them to 28px. */

.inbs-strip a {
	display: inline-block;
	padding-block: 4px;
}

/* --------------------------------------------------------------------------
   Footer: OSCR charity badge and charity statement (added 1.0.6)
   --------------------------------------------------------------------------
   The charity row takes over the divider that used to sit above the legal
   row, so the two read as one block. The supplied OSCR artwork has no
   transparency, so the slate panel is deliberate: it reads as a badge
   against the navy rather than as a white box punched into it. */

.inbs-footer__charity {
	margin-block-start: 34px;
	padding-block-start: 18px;
	border-block-start: 1px solid rgba(255, 255, 255, .16);
	align-items: center;
	gap: 16px 20px;
	color: rgba(255, 255, 255, .6);
}

.inbs-footer__oscr {
	margin: 0;
	flex: 0 0 auto;
}

.inbs-footer__oscr a {
	display: block;
	border-radius: 4px;
}

.inbs-footer__oscr img {
	display: block;
	width: 200px;
	height: auto;
	border-radius: 4px;
}

.inbs-footer__charity-text {
	margin: 0;
	flex: 1 1 26rem;
	max-width: 64ch;
	line-height: 1.6;
	color: rgba(255, 255, 255, .6);
}

/* The legal row no longer needs its own rule above it. */

.inbs-footer__legal {
	margin-block-start: 16px;
	padding-block-start: 0;
	border-block-start: 0;
}

@media (max-width: 600px) {
	.inbs-footer__oscr img {
		width: 168px;
	}
}

/* Keyboard focus on the form's submit button, and forms sitting on a tinted band
   (these two rules were previously only in Additional CSS). */
.inbs-form button[type="submit"]:focus-visible {
	outline: 3px solid rgba(0, 110, 224, .4);
	outline-offset: 2px;
}

.has-paper-alt-background-color .inbs-form,
.inbs-band.has-paper-alt-background-color .inbs-form {
	background: var(--wp--preset--color--paper);
}

/* --------------------------------------------------------------------------
   The header and menu on tablets and phones (screens narrower than 1024px).

   The full menu needs about 960px to sit on one line beside the logo and the
   "Join us" button. WordPress itself only swaps the menu for the menu button
   below 600px, so between 600px and 960px the header used to stack into three
   rows (logo, then menu, then button) and grow to over 200px tall. The menu
   button now takes over at 1024px: a portrait iPad gets the same neat header as
   a phone, while a desktop or landscape iPad keeps the full menu.
   -------------------------------------------------------------------------- */

/* The navy strip at the top compacts below 660px. That is a little wider than a
   phone, because people who are signed in see an extra link and need the room. */
@media (max-width: 659px) {

	/* The navy strip at the top: compact, with "Contact us" kept beside the text */
	.inbs-strip { padding-block: 4px; }
	.inbs-strip__inner { flex-direction: column; align-items: stretch; gap: 0; }
	.inbs-strip p,
	.inbs-strip__links { font-size: 11px; line-height: 1.35; }
	.inbs-strip__links { flex-wrap: nowrap; justify-content: flex-start; gap: 0 22px; white-space: nowrap; }
	.inbs-strip__links a { padding-block: 6px; }   /* a comfortable thing to tap */
	.inbs-strip__long { display: none; }   /* "Scouts membership login" becomes "Scouts login" */

}

/* A slightly smaller logo on a phone only */
@media (max-width: 599px) {
	.inbs-logo img { height: 38px; }
}

/* The bar, the menu button and the open menu: tablets and phones */
@media (max-width: 1023px) {

	/* The bar: logo on the left, "Join us" and the menu button on the right */
	.inbs-nav { padding-block: 10px; }
	.inbs-nav__inner { flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
	.inbs-nav__right { flex-direction: row-reverse; flex-wrap: nowrap; gap: 10px; margin-left: auto; align-items: center; }
	.inbs-nav__right .inbs-btn { padding: 10px 16px; white-space: nowrap; }

	/* The menu button: big enough to tap, clearly a button */
	.inbs-nav .wp-block-navigation__responsive-container-open {
		width: 46px; height: 46px; padding: 0;
		display: flex; align-items: center; justify-content: center;
		border: 1.5px solid var(--inbs-line, #d0d5dc); border-radius: 10px;
		color: var(--wp--preset--color--navy, #04213F); background: #fff;
	}
	.inbs-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
	.inbs-nav .wp-block-navigation__responsive-container-open svg rect { stroke: currentColor; stroke-width: 0.9; }

	/* The open menu: a clean full-screen list, left-aligned, easy to tap */
	.wp-block-navigation__responsive-container.is-menu-open { padding: 0 !important; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { padding: 0; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 78px 22px 36px !important; align-items: stretch !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
		content: 'Menu'; position: absolute; top: 24px; left: 22px;
		font-size: 1.15rem; font-weight: 800; color: var(--wp--preset--color--navy, #04213F);
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; width: 100%; gap: 0 !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: stretch !important; border-bottom: 1px solid var(--inbs-line, #e1e5ea); }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block; padding: 15px 2px !important; font-size: 1.1rem; font-weight: 800; text-align: left;
		color: var(--wp--preset--color--navy, #04213F);
	}
	.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--blue, #006EE0); }

	/* Pages inside a section (e.g. Our team under About us): indented with a guide line */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static; width: auto; min-width: 0; background: transparent; gap: 0 !important; align-items: stretch !important;
		padding: 2px 0 12px 14px !important; margin: 0 0 6px 2px !important;
		border: 0 !important; border-left: 3px solid #bcd3f5 !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 11px 2px !important; font-size: 1rem; font-weight: 600; }

	/* The close button: same size and style as the menu button */
	.wp-block-navigation__responsive-container-close {
		position: absolute; top: 14px; right: 16px; width: 46px; height: 46px;
		display: flex; align-items: center; justify-content: center;
		border: 1.5px solid var(--inbs-line, #d0d5dc); border-radius: 10px;
		color: var(--wp--preset--color--navy, #04213F); background: #fff;
	}
	.wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
}

/* WordPress hides the menu button from 600px upwards. Keep it showing, and the
   full menu hidden, until 1024px. */
@media (min-width: 600px) and (max-width: 1023px) {
	.inbs-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.inbs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}

/* A very small phone: four links (when signed in) will not sit on one line, so let them wrap. */
@media (max-width: 359px) {
	.inbs-strip__links { flex-wrap: wrap; gap: 0 16px; white-space: normal; }
}


/* --------------------------------------------------------------------------
   Page heads: a soft mountain skyline behind the title, echoing the home page hero.
   Keeps the light page-head colour; the leaders' and admin heads (navy) are left alone.
   -------------------------------------------------------------------------- */

.inbs-pagehead:not(.inbs-pagehead--leaders) {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'><circle cx='1010' cy='50' r='46' fill='%23FFE627' opacity='.14'/><circle cx='1010' cy='50' r='24' fill='%23FFE627' opacity='.55'/><path d='M0 120L120 96 220 112 360 70 470 104 600 58 720 100 860 40 990 92 1100 60 1200 90V160H0Z' fill='%23E1EAF4'/><path d='M0 140L150 118 260 132 400 100 520 128 680 84 820 124 960 76 1080 112 1200 98V160H0Z' fill='%23CFDDEE'/><path d='M0 152L200 138 340 148 520 126 700 146 880 120 1040 144 1200 130V160H0Z' fill='%23BCD0E7'/></svg>");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: max(100%, 860px) 100%;
}

@media (max-width: 599px) {
	.inbs-pagehead:not(.inbs-pagehead--leaders) {
		background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'><path d='M0 120L120 96 220 112 360 70 470 104 600 58 720 100 860 40 990 92 1100 60 1200 90V160H0Z' fill='%23E1EAF4'/><path d='M0 140L150 118 260 132 400 100 520 128 680 84 820 124 960 76 1080 112 1200 98V160H0Z' fill='%23CFDDEE'/><path d='M0 152L200 138 340 148 520 126 700 146 880 120 1040 144 1200 130V160H0Z' fill='%23BCD0E7'/></svg>");
		background-size: 900px 70%;
	}
}
