/* ==========================================================================
   Estate tidy-up — Get Cycling
   ==========================================================================

   Brings this site's shape and focus language into line with the Bikeability
   Shop and Professionals themes so the estate reads as one family.

   Deliberately narrow. What it does NOT do:

   - No layout, grid or spacing changes.
   - No font changes. Museo Slab stays as the display face.
   - No brand recolouring. This site already uses the estate ink (#3c3c3b) and
     mint (#d7f6cf) correctly; both are left alone.
   - No card re-surfacing. Every `.card` on this site is a FAQ accordion panel,
     and the theme deliberately makes those transparent
     (`.faq-accordion .card { background: initial !important }`). Giving them
     the estate's tinted card surface would override a real design decision,
     so only the corner radius is touched.
   - No fight with the per-block inline styles ACF injects (tiles at 10px).
     Those are authored per block and load after any theme stylesheet; the
     difference from the estate's 16px tile step is not worth an !important.

   What it does fix is where the theme disagreed with *itself*. Measured on the
   homepage before this file existed, the page carried nine different
   border-radius values. Buttons were the clearest case: `.btn-orange` was
   already a 50px pill while `.btn-header-link` sat at 2.5px, so two buttons in
   the same header disagreed about their own shape.

   Loaded after style.css — see the 'estate-tidy' enqueue in functions.php.
   -------------------------------------------------------------------------- */

:root {
	/* Shape — the estate scale, as used by the shop and professionals themes. */
	--bk-radius-card: 20px;
	--bk-radius-thumb: 12px;
	--bk-radius-pill: 999px;

	/* Ink and accent — already in use here; declared so the rules below do not
	   depend on where in the minified style.css they happen to be defined. */
	--bk-link: #2b6e2f;
	--bk-link-hover: #1f5c22;

	/* Motion — short enough to feel immediate. */
	--bk-duration: 0.16s;
	--bk-ease: ease;
}

/* --------------------------------------------------------------------------
   1. Buttons — one shape
   --------------------------------------------------------------------------
   `.btn-orange` and the Formidable submit were already pills (50px, set
   !important by the theme). The header link buttons were 2.5px. These bring
   the rest onto the pill so a row of buttons agrees with itself.

   `.btn-orange` is intentionally not listed: at 50px it already reads as a
   pill at every button height used on this site, and overriding a rule the
   theme marked !important would mean adding !important here for a difference
   nobody can see.
   -------------------------------------------------------------------------- */

.btn,
.btn-header-link,
.btn--header,
.wp-block-button__link {
	border-radius: var(--bk-radius-pill);
	transition: background-color var(--bk-duration) var(--bk-ease),
		border-color var(--bk-duration) var(--bk-ease),
		color var(--bk-duration) var(--bk-ease);
}

/* --------------------------------------------------------------------------
   2. Accordion cards — estate radius
   --------------------------------------------------------------------------
   Cards sat at 2.5px with a 1.5px header cap, which reads as an accident
   rather than a decision. Radius only: the transparent surface the accordion
   relies on is untouched, and no overflow clipping is introduced because these
   panels expand.

   The header selector carries `:first-child` to match the specificity of the
   theme's own `.card-header:first-child` rule, which would otherwise win.
   -------------------------------------------------------------------------- */

.card {
	border-radius: var(--bk-radius-card);
}

.card-header,
.card-header:first-child {
	border-radius: var(--bk-radius-card) var(--bk-radius-card) 0 0;
}

/* Modals take the smaller thumb step. */
.modal-content {
	border-radius: var(--bk-radius-thumb);
}

.modal-header {
	border-radius: var(--bk-radius-thumb) var(--bk-radius-thumb) 0 0;
}

/* --------------------------------------------------------------------------
   3. Form controls
   --------------------------------------------------------------------------
   Fields sat at 5px, with one stray input at 2px. The estate runs its fields
   as pills, which also matches the button shape above so a form and its submit
   agree.

   !important is required here only because the theme's own rule
   (`textarea, input, select { border-radius: 5px !important }`) is itself
   !important — there is no specificity that beats it without matching it.
   Textareas are too tall to read as a pill, so they take the thumb step.
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
select {
	border-radius: var(--bk-radius-pill) !important;
}

textarea {
	border-radius: var(--bk-radius-thumb) !important;
}

/* --------------------------------------------------------------------------
   4. Content links
   --------------------------------------------------------------------------
   Body copy links were falling through to Bootstrap's default #007bff, the one
   genuinely off-brand colour on the page. Scoped to unclassed links inside
   content so navigation, footer and button links keep the colours the theme
   sets for them deliberately.
   -------------------------------------------------------------------------- */

.entry-content a:not([class]),
.page-content a:not([class]),
.post-content a:not([class]),
main p a:not([class]),
main li a:not([class]) {
	color: var(--bk-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-content a:not([class]):hover,
.page-content a:not([class]):hover,
.post-content a:not([class]):hover,
main p a:not([class]):hover,
main li a:not([class]):hover {
	color: var(--bk-link-hover);
}

/* --------------------------------------------------------------------------
   5. Focus
   --------------------------------------------------------------------------
   One visible focus treatment everywhere, matching the estate. The ring sits
   outside the element so the pill and card radii above cannot clip it.
   :focus-visible so it serves keyboard users without ringing every mouse click.
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--bk-link);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   6. Motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn-header-link,
	.btn--header,
	.wp-block-button__link {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   7. Header
   --------------------------------------------------------------------------
   White bar with a solid brand-amber action.

   The theme drives header colour through a `.theme-green` / `.theme-orange`
   modifier on the bar, each setting `.top-b` and `.btn` backgrounds !important.
   Both overrides below therefore need !important of their own — there is no
   specificity that beats an !important declaration.

   Scoped to `.top-b-header` rather than `.top-b`, because `.top-b` is also used
   by illustration bands elsewhere on the site which should keep their tint.

   The amber is #FF9502 — the theme's own $dark-orange, and the colour sampled
   from the third tag of the logo itself (#F8970B). It is the closest thing the
   Bikeability palette has to a yellow; the brand defines green, orange, blue
   and red only. #3c3c3b on #FF9502 clears WCAG AA comfortably.
   -------------------------------------------------------------------------- */

.top-b.top-b-header,
.theme-green .top-b.top-b-header,
.theme-orange .top-b.top-b-header,
.theme-blue .top-b.top-b-header,
.theme-red .top-b.top-b-header {
	background-color: #ffffff !important;
}

/* With the bar now white it needs a hairline to separate it from the page. */
.top-b.top-b-header {
	border-bottom: 1px solid var(--bk-rule, #e4e2dd);
}

.btn--header,
.button--header,
.theme-green .btn--header,
.theme-orange .btn--header,
.theme-blue .btn--header,
.theme-red .btn--header {
	border-radius: var(--bk-radius-pill) !important;
	background-color: #ff9502 !important;
	border-color: #ff9502 !important;
	color: #3c3c3b !important;
}

.btn--header:hover,
.btn--header:focus,
.button--header:hover,
.button--header:focus {
	background-color: #e88700 !important;
	border-color: #e88700 !important;
	color: #3c3c3b !important;
}

/* --------------------------------------------------------------------------
   8. Footer — professionals formatting
   --------------------------------------------------------------------------
   Same shape as the professionals and shop footers: an auto-fitting column
   grid, serif column headings, softened link colour that goes white on hover,
   and a quiet legal row separated by a rule.

   Content, links and the social icons are untouched — this is formatting only.
   The markup keeps its Bootstrap row/col classes; the grid is applied over the
   top so the columns fill the width instead of leaving the dead space the
   fixed `col-lg-3` pair produced.
   -------------------------------------------------------------------------- */

.footer {
	--bk-footer-link: #d9d5ce;
	--bk-footer-muted: #948f88;
	--bk-footer-rule: #52514e;
	--bk-footer-blurb: #b9b4ad;
	background-color: #3c3c3b;
	color: #ffffff;
}

.footer > .container {
	max-width: 1240px;
}

/* Column grid. Overrides the Bootstrap row so columns size to content width. */
.footer .main_footer.row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 38px;
	padding: 56px var(--bk-gutter, 24px) 30px;
	margin: 0;
}

/* Neutralise the fixed Bootstrap column widths inside the grid. */
.footer .main_footer.row > [class*="col-"] {
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
}

/* Column headings — the estate's serif treatment, using this site's own
   display face rather than importing the professionals theme's Bitter. */
.footer h3 {
	margin: 0 0 14px;
	font-family: museo-slab, Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
	letter-spacing: 0;
	color: #ffffff;
}

.footer .main_footer ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

/* The intro paragraph: the estate sets this plain rather than italic. */
.footer .lrg {
	max-width: 34ch;
	margin-bottom: 22px;
}

.footer .lrg p,
.footer .lrg i {
	font-style: normal;
	font-size: 16px;
	color: var(--bk-footer-blurb);
}

.footer .small {
	max-width: 38ch;
	font-size: 14px;
	color: var(--bk-footer-blurb);
}

.footer a {
	color: var(--bk-footer-link);
	text-decoration: none;
}

.footer a:hover,
.footer a:focus {
	color: #ffffff;
	text-decoration: underline;
}

/* Social row keeps its brand-coloured icons; only the rhythm is aligned. */
.footer .social-media ul {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer .social-media a:hover,
.footer .social-media a:focus {
	text-decoration: none;
}

/* Legal row. */
.footer .sub_footer.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 26px;
	margin: 0;
	padding: 20px var(--bk-gutter, 24px) 40px;
	border-top: 1px solid var(--bk-footer-rule);
	color: var(--bk-footer-muted);
	font-size: 14px;
}

.footer .sub_footer.row > [class*="col-"] {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	padding: 0;
}

.footer .sub_footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.footer .sub_footer a,
.footer .copyright,
.footer .copyright a {
	color: var(--bk-footer-muted);
	font-size: 14px;
}

.footer .sub_footer a:hover,
.footer .copyright a:hover {
	color: #ffffff;
}

.footer .copyright {
	margin: 0;
}

@media (max-width: 575px) {
	.footer .main_footer.row {
		padding-top: 40px;
	}

	.footer .sub_footer.row {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   9. Case
   --------------------------------------------------------------------------
   Buttons in Title Case rather than shouted caps, matching the professionals
   and shop themes, which apply `capitalize` to interface chrome.

   `.btn--header` and `.btn--news` set uppercase !important in style.css, so
   these have to match that to win. `.login-block .btn` and `.well-block .btn`
   are plain rules but are listed at the same specificity for the same reason.

   Body copy and post titles are deliberately untouched — capitalising a
   headline would mangle it.
   -------------------------------------------------------------------------- */

.btn,
.btn--header,
.button--header,
.btn--news,
.button--news,
.login-block .btn,
.well-block .btn,
.btn-header-link,
.btn-orange,
.frm_button_submit,
.frm_final_submit,
.wp-block-button__link {
	text-transform: capitalize !important;
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   10. Footer heading — specificity fix
   --------------------------------------------------------------------------
   `footer .main_footer h3` (0,1,2) in style.css outranks the `.footer h3`
   rule in section 8, so the heading kept its 16px uppercase sans treatment.
   Matched here so the estate's serif, Title Case heading actually applies.
   -------------------------------------------------------------------------- */

.footer .main_footer h3,
footer .main_footer h3 {
	margin: 0 0 14px;
	font-family: museo-slab, Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
	letter-spacing: 0;
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   11. Button hover — the shop's treatment
   --------------------------------------------------------------------------
   The Bikeability Shop inverts on hover: dark grey ground, orange label
   (`.btn:hover { background: var(--bks-dark); color: var(--bks-accent) }`,
   where --bks-dark is #3c3c3b and --bks-accent is #ff9e1b). Same values here
   so the two sites behave identically.

   !important on the header and Formidable buttons only, because their base
   colours are set !important by the theme and would otherwise win on hover.
   -------------------------------------------------------------------------- */

.btn:hover,
.btn:focus,
.btn-orange:hover,
.btn-orange:focus,
.btn-header-link:hover,
.btn-header-link:focus,
.btn--news:hover,
.btn--news:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: #3c3c3b !important;
	border-color: #3c3c3b !important;
	color: #ff9e1b !important;
}

.btn--header:hover,
.btn--header:focus,
.button--header:hover,
.button--header:focus,
.frm_button_submit:hover,
.frm_button_submit:focus,
.frm_final_submit:hover,
.frm_final_submit:focus {
	background-color: #3c3c3b !important;
	border-color: #3c3c3b !important;
	color: #ff9e1b !important;
}

/* --------------------------------------------------------------------------
   12. Buttons — no letter spacing
   --------------------------------------------------------------------------
   Belt and braces alongside section 9: some button variants pick up tracking
   from heading or utility classes rather than from a `.btn` rule.
   -------------------------------------------------------------------------- */

.btn,
.btn *,
.btn--header,
.button--header,
.btn--news,
.button--news,
.btn-header-link,
.btn-orange,
.frm_button_submit,
.frm_final_submit,
.wp-block-button__link {
	letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   13. Video block
   --------------------------------------------------------------------------
   The video carries a hard `height="500"` attribute and sits in a `my-auto`
   column, so in a tall two-column row it floated in the middle leaving a large
   white gap below it. Stretching it to the row height closes the gap;
   object-fit keeps the framing rather than squashing it, and the estate media
   radius matches the rest of the page.

   Section padding is pulled in so this block sits on the same rhythm as its
   neighbours instead of carrying an extra 50px tail.
   -------------------------------------------------------------------------- */

.simple-content .row.content {
	align-items: stretch;
}

/* The column is top-aligned rather than centred. `my-auto` centred it in a
   much taller text column, which is what put the large white gap underneath;
   aligning to the start lines the video up with the heading instead.

   Stretching the column was tried and reverted - at 450px wide against a
   1039px row, object-fit: cover cropped the 16:9 footage to a narrow vertical
   strip. The player follows the video, not the column. */
.simple-content .row.content > [class*="col-"]:has(> video) {
	align-self: center !important;
}

/* Natural aspect ratio - the hard height="500" attribute is overridden so the
   player matches the footage rather than letterboxing or cropping it. */
.simple-content video,
.simple-content video.w-100 {
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 18px;
	display: block;
}

.entry-content section.simple-content,
section.simple-content {
	padding-top: 24px;
	padding-bottom: 24px;
}

.simple-content .row.content {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   14. Testimonial / quote blocks
   --------------------------------------------------------------------------
   Each quote slide gets a white ground, so all four read as one set against
   the section's gradient rather than sitting transparently on top of it.
   -------------------------------------------------------------------------- */

.testimonial_selector .test-slider .test-slider {
	background-color: #ffffff;
	border-radius: var(--bk-radius-card);
	padding: 28px 32px;
	margin-bottom: 20px;
}

/* The outer element is only a wrapper - it must stay transparent, otherwise
   the four slides sit inside one large white box. */
.testimonial_selector > .container > .test-slider,
.testimonial_selector .test-slider:not(.test-slider .test-slider) {
	background-color: transparent;
	padding: 0;
}

/* --------------------------------------------------------------------------
   15. Register form band
   --------------------------------------------------------------------------
   The grey band carrying the register form and the "what we'll need" list.
   40px of air top and bottom, a wider channel between the two columns, and the
   columns centred against each other so the shorter right-hand list sits level
   with the form rather than riding at the top.
   -------------------------------------------------------------------------- */

.shade-bg {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

.shade-bg > .container > .row,
.shade-bg .row {
	align-items: center;
	row-gap: 32px;
}

@media (min-width: 992px) {
	.shade-bg .row > [class*="col-lg-"] {
		padding-left: 28px;
		padding-right: 28px;
	}
}

/* --------------------------------------------------------------------------
   16. Quote sections — full-bleed white
   --------------------------------------------------------------------------
   The section carried a `grad-tp` gradient (a grey linear-gradient background
   image), so the quotes read as white cards floating on grey. The whole band
   is white edge to edge instead, and the slides drop their card treatment
   because they no longer need to separate themselves from a tinted ground.
   -------------------------------------------------------------------------- */

.testimonial_selector,
.testimonial_selector.grad-tp {
	background-color: #ffffff !important;
	background-image: none !important;
}

.testimonial_selector .test-slider .test-slider {
	background-color: transparent;
	border-radius: 0;
	padding: 0 0 8px;
	margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   17. Video banner spacing
   -------------------------------------------------------------------------- */

/* ACF injects a per-block inline stylesheet setting `.video-banner` to 15rem
   (150px). Inline block styles load after the theme's stylesheets, so this
   needs !important to land at all. 120px = the rendered 150px less 30px. */
.video-banner {
	margin-bottom: 120px !important;
}

/* --------------------------------------------------------------------------
   18. Closing illustration band
   --------------------------------------------------------------------------
   Rendered by footer.php on pages that do not already carry the
   `bottom_illustration` ACF block. A background-image-only section has no
   intrinsic height, so it is sized by the artwork's own ratio (the SVG's
   viewBox is 2002 x 330). `background-size: contain` keeps the full scene
   visible edge to edge rather than cropping it as `.illustration-bg`'s
   `cover` would.
   -------------------------------------------------------------------------- */

.gc-footer-illustration {
	display: block;
	width: 100%;
	aspect-ratio: 2002 / 330;
	min-height: 90px;
	background-size: contain !important;
	background-position: bottom center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   19. FAQ accordion
   --------------------------------------------------------------------------
   The accordion triggers carry `.btn .btn-header-link`, so section 1's pill
   rule was turning every question row into an outlined pill. They are reset to
   full-width rows here and the panel itself becomes the card: a white surface,
   a hairline rule, the estate's thumb radius and real space between items.

   The chevron is the theme's own icon; it is rotated on the open state rather
   than being replaced, so no markup changes are needed.
   -------------------------------------------------------------------------- */

.faq-accordion .card,
.accordion .card {
	background-color: #ffffff !important;
	border: 1px solid var(--bk-rule, #e4e2dd) !important;
	border-radius: var(--bk-radius-thumb) !important;
	margin-bottom: 12px !important;
	overflow: hidden;
	transition: border-color var(--bk-duration) var(--bk-ease),
		box-shadow var(--bk-duration) var(--bk-ease);
}

.faq-accordion .card:hover,
.accordion .card:hover {
	border-color: #cfcbc4 !important;
	box-shadow: 0 1px 2px rgba(60, 60, 59, 0.05), 0 8px 20px rgba(60, 60, 59, 0.06);
}

.faq-accordion .card-header,
.accordion .card-header {
	padding: 0 !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* The trigger is a row, not a pill — overrides section 1 for this context. */
.faq-accordion .btn-header-link,
.accordion .btn-header-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 22px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--bk-ink, #3c3c3b) !important;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	text-align: left;
	text-decoration: none;
	white-space: normal;
}

.faq-accordion .btn-header-link:hover,
.faq-accordion .btn-header-link:focus,
.accordion .btn-header-link:hover,
.accordion .btn-header-link:focus {
	background-color: #f7f7f5 !important;
	color: var(--bk-ink, #3c3c3b) !important;
}

/* Chevron: point down when closed, flip when the panel is open. */
.faq-accordion .btn-header-link i,
.faq-accordion .btn-header-link svg,
.accordion .btn-header-link i,
.accordion .btn-header-link svg {
	flex: none;
	transition: transform var(--bk-duration) var(--bk-ease);
}

.faq-accordion .btn-header-link.collapsed i,
.faq-accordion .btn-header-link.collapsed svg,
.accordion .btn-header-link.collapsed i,
.accordion .btn-header-link.collapsed svg {
	transform: rotate(180deg);
}

.faq-accordion .card-body,
.accordion .card-body {
	padding: 4px 22px 22px;
	color: var(--bk-ink-soft, #4d4c4a);
}

/* --------------------------------------------------------------------------
   20. Register form fields
   --------------------------------------------------------------------------
   Text inputs were 67px tall (20px block padding) against the Local authority
   select's 47px, so the grid read as uneven. Everything is brought onto the
   select's height, and the three email fields are given the full row each
   instead of sharing one as quarter-width columns.
   -------------------------------------------------------------------------- */

.frm_form_field input[type="text"],
.frm_form_field input[type="email"],
.frm_form_field input[type="tel"],
.frm_form_field input[type="url"],
.frm_form_field input[type="number"],
.frm_form_field input[type="password"],
.frm_form_field select,
.with_frm_style input[type="text"],
.with_frm_style input[type="email"],
.with_frm_style select {
	height: 47px !important;
	min-height: 47px !important;
	padding: 10px 18px !important;
	line-height: 1.3 !important;
}

/* Email fields full width, one per row.

   Formidable lays its fields out on a CSS grid and `frm4` sets a span, so a
   width alone cannot widen the field - the grid track has to change. */
.frm_form_field:has(input[type="email"]) {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	clear: both;
}

.frm_form_field:has(input[type="email"]) input[type="email"] {
	width: 100% !important;
}

/* The card already carries the outline, so the header needs no rule of its own. */
.faq-accordion .card .card-header,
.accordion .card .card-header {
	border-top: 0 !important;
}