/* Sitewide newsletter signup (Gravity Forms #1) — matches the styling of
   the sibling in-post newsletter form (assets/newsletter-signup.css), since
   both need to look like the same brand-consistent form. Scoped to
   #gform_wrapper_1 so it only affects this specific form — this is a
   single shared GF form embedded identically (via gravity_form(1, ...))
   on the homepage, every tour page, and the blog in-post newsletter
   (template-parts/newsletter-signup.php), so this one stylesheet is what
   keeps all three uniform. */

/* Restrict the form's own width — it was stretching to fill whatever
   column it's embedded in (up to ~510-534px depending on the page),
   noticeably wider than intended. */
#gform_wrapper_1 {
	max-width: 454px;
}

#gform_wrapper_1 .gform_heading {
	display: none;
}

#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 .gform-field-label--type-sub {
	margin: 0 0 0.3rem;
	color: var(--global-palette3, #1a202c);
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

#gform_wrapper_1 .gfield_required {
	color: #b82105;
}

/* Name field: hide the group "Name (Required)" legend — the form's
   subLabelPlacement is set to "above" (via GFAPI), so First Name/Surname's
   own sub-labels already render above their inputs; the group legend was
   redundant and, per explicit request, First Name/Surname should be the
   only labels shown, positioned above (not below) their fields. */
#gform_wrapper_1 #field_1_1 > .gfield_label {
	display: none;
}

/* Hiding the group legend above also removes its required marker (GF only
   marks the whole composite Name field required once, not each sub-input)
   — restore one on each sub-label. Was text "(Required)"; changed to a red
   asterisk per the design, matching how every other required field on
   this form (and the brochure drawer form) marks itself. */
#gform_wrapper_1 .ginput_complex.ginput_container--name .gform-field-label--type-sub::after {
	content: " *";
	font-size: 12px;
	color: #b82105;
}

/* Vertical rhythm between fields — tightened from the original 1.5rem
   (24px, PSD-measured) to 1rem per explicit user request. GF's own
   .gform_fields container is `display:grid` with a built-in ~40px row-gap
   (--gf-form-gap-y) that stacks on top of this margin, doubling the
   spacing — must be zeroed out below or fields end up further apart than
   intended. */
#gform_wrapper_1 .gfield {
	margin-bottom: 1rem;
}

/* The reCAPTCHA field renders as an invisible floating badge, not inline
   content (see the sitewide .gfield--type-captcha label-hiding rule in
   global.css) — it doesn't need the same bottom margin as a real visible
   field, which was leaving a dead gap before the submit button. */
#gform_wrapper_1 .gfield--type-captcha {
	margin-bottom: 0;
}

#gform_wrapper_1 .gform_fields {
	gap: 0;
}

/* Newsletter row (grey promo band housing this form) had noticeably less
   top/bottom breathing room than "tour page enquiry.psd": measured design
   gaps of ~105px design-px top (grey band edge to "WIN A 2027..." eyebrow)
   and ~147px design-px bottom (grey band edge to Sign Up button), which at
   the sitewide 0.4959 scale factor is ~52px/~73px live — rounded up to a
   more generous 72px/96px since the previous 64px/48px read as cramped.
   The row's own Kadence block padding (kt-has-1-columns wrapping the whole
   band) contributes 24px/24px of that; the nested 2-column row inside it
   (kt-has-2-columns, text+image) contributes a fixed 40px/24px on top of
   that and is left alone. Scoped via :has() to only the row containing
   this specific form, since kt-has-1-columns/kt-has-2-columns are generic
   Kadence utility classes reused by unrelated rows sitewide. */
.kt-row-has-bg:has(#gform_wrapper_1) .kt-has-1-columns {
	padding-top: 32px;
	padding-bottom: 72px;
}

/* First Name / Surname side by side, matching home.psd */
#gform_wrapper_1 .ginput_complex.ginput_container--name {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--global-kb-gap-md, 2rem);
}

#gform_wrapper_1 .ginput_complex.ginput_container--name .name_first,
#gform_wrapper_1 .ginput_complex.ginput_container--name .name_last {
	display: flex;
	flex-direction: column;
}

/* Border weight/color/radius measured directly off home.psd (pixel-scanned
   the "First Name" input box at full design resolution): ~4px design-px
   border in a near-black #292929, ~7-8px design-px corner radius. At the
   sitewide 0.4959 scale factor that's ~2px / ~4px live — noticeably
   thicker and darker than a typical default 1px #ccc input border, and
   rounded rather than square. */
#gform_wrapper_1 .ginput_container input[type="text"],
#gform_wrapper_1 .ginput_container input[type="email"],
#gform_wrapper_1 .ginput_container select {
	width: 100%;
	height: 45px;
	padding: 0.65rem 0.75rem;
	border: 2px solid #292929;
	border-radius: 4px;
	background: #fff;
	color: var(--global-palette3, #1a202c);
	font-family: Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	box-sizing: border-box;
}

/* <select> text was too large (15px, matching the text/email inputs) and,
   at the new 40px height, would sit flush against the top of the box —
   native <select> closed-state text on Windows Chrome/Edge follows the OS
   control's own metrics and ignores line-height (unlike <input>, which
   centres fine regardless), the same issue hit on the brochure request
   drawer's form. Vertical padding is the reliable fix: 10px top/bottom
   against the 2px border leaves an 18px centred strip for the 14px text
   within the 40px border-box height. */
#gform_wrapper_1 .ginput_container select {
	appearance: auto;
	cursor: pointer;
	font-size: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: normal;
}

@media (max-width: 767px) {
	#gform_wrapper_1 .ginput_complex.ginput_container--name {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* Last field already contributes 1.5rem via its own margin-bottom above;
   0.5rem more here reaches the ~32px (2rem) gap measured before the
   "Sign Up Now" button in the design. */
#gform_wrapper_1 .gform_footer {
	margin: 0.5rem 0 0;
	padding: 0;
	justify-content: flex-start;
}

#gform_wrapper_1 .gform_button {
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: 4px;
	background: #2e6b98;
	color: #fff;
	font-family: Roboto, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

#gform_wrapper_1 .gform_button:hover,
#gform_wrapper_1 .gform_button:focus-visible {
	background: #265a82;
	color: #fff;
}

#gform_wrapper_1 .gform_confirmation_message {
	color: var(--global-palette3, #1a202c);
	font-family: Roboto, sans-serif;
	font-size: 15px;
}

@media (max-width: 767px) {
	#gform_wrapper_1 .gform_footer {
		justify-content: center;
	}
}

/* ============================================================
   Newsletter panel image — hidden on mobile
   ============================================================
   Paul's 24 Jul 2026 email, items b and d: "in the 'Sign Up To Our
   Newsletter…' panel, can we hide the image please (e.g. again per
   visual)?" on the homepage, and "newsletter image needs to be hidden"
   on tour pages.

   One rule covers both — and every other page showing this panel.
   The block is authored once on the homepage (post ID 6, hence the
   `6_` in Kadence's generated class names) and reused sitewide via a
   Kadence Element, so the markup and class names are byte-identical
   everywhere. Verified on the homepage and on a tour page.

   The COLUMN is hidden rather than the <img> itself: it holds nothing
   but the image (single child, no text), and the panel's row is a grid
   with a 32px gap, so dropping the whole column takes the gap with it
   instead of leaving a 32px void where the image used to be.

   767px is not arbitrary — it is exactly where this panel's own row
   collapses from `repeat(2, minmax(0px, 1fr))` to a single column.
   Above it the image sits beside the form as designed; at or below it
   the image stacks underneath and costs 515px of dead vertical scroll
   on a 375px screen.

   Both classes are needed. Kadence sets `.wp-block-kadence-column {
   display: flex }` in style-blocks-column.css, which is also (0,1,0)
   and is enqueued AFTER this file — so a lone
   `.kadence-column6_5f5b88-8f` ties on specificity and loses on source
   order. Pairing the two classes makes it (0,2,0) and wins outright,
   which is preferable to !important here. */
@media (max-width: 767px) {
	.wp-block-kadence-column.kadence-column6_5f5b88-8f {
		display: none;
	}
}

/* ============================================================
   Newsletter panel — mobile overflow, gutter and heading size
   ============================================================
   Three related faults, all visible on a 375–425px screen: the form was
   clipped off the right edge, the panel sat flush to both edges with no
   indent, and the heading hard-broke mid-word ("Newslette / r For A").

   OVERFLOW / GUTTER
   The row is `alignwide` and breaks out of the content column with
   `margin: 0 -24px`. Kadence's own inline style then puts
   `padding-left: 1.5rem; padding-right: 0` on the text column's inner
   col — so the LEFT breakout is compensated and the right is not. Net
   result on a 375px screen: content ran 0 → 399px, i.e. 24px past the
   viewport, which is what cut the form off. (The page itself never
   scrolled horizontally, so it read as "cut off" rather than "too
   wide".)

   Cancelling the breakout and restoring a symmetric 24px gutter puts
   the content on 24 → 351px, which is the indent asked for and matches
   the site's usual 24px rhythm.

   HEADING
   global.css sets `.kt-adv-heading6_26ffc6-43 { font-size: 3.6rem
   !important }` (57.6px) sitewide, and the mobile correction to 46.3px
   from the 21 Jul PSB audit is scoped `body.home.home` — but this block
   is authored on the homepage and reused sitewide via a Kadence
   Element, so on tour pages the heading stayed at 57.6px. At that size
   the word "Newsletter" alone measures 288px against a 255px box, so it
   could only break mid-word. Applying the same 46.3px wherever the
   block appears brings it to ~231px inside a 327px box, and it fits.
   Two classes give (0,2,0), enough to beat the (0,1,0) !important rule
   in global.css; on the homepage the existing (0,4,2) rule still wins
   with the identical value, so nothing changes there.

   NOTE: the other four alignwide rows on the homepage (Browse By
   Interest, the brochures panel, Meet Our Tour Lecturers, Discover
   Hidden Experiences) have exactly the same -24px breakout with nothing
   compensating either side, so their content sits at -24 → 399px and is
   clipped at BOTH edges. Not touched here to keep this change to the
   newsletter panel, but it is the same one-line fix and worth doing as
   part of Paul's item b (homepage margins). */
@media (max-width: 767px) {
	.kb-row-layout-id6_0a53f7-f9 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Mirror Kadence's own padding-left onto the right, rather than adding
	   a new gutter. The block sits at the top level of .entry-content on
	   the homepage but is nested inside another padded Kadence row on tour
	   pages, so any blanket padding here lands twice in one context and
	   once in the other. Fixing only the missing right-hand value keeps
	   both contexts symmetric. */
	.kb-row-layout-id6_0a53f7-f9 .kadence-column6_2a792b-cc > .kt-inside-inner-col {
		padding-right: var(--global-kb-spacing-sm, 1.5rem) !important;
	}

	/* Tour pages nest this block inside ANOTHER Kadence row, and
	   single-tours applies a 24px edge gutter to every row's column wrap:

	     body.single-tours .entry-content.single-content
	       .kb-row-layout-wrap > .kt-row-column-wrap        (0,5,1) !important

	   The nested newsletter row therefore collects that gutter twice —
	   once from its parent row, once from itself — and Kadence's own
	   inner-col padding adds a third, landing the content at x=72 in a
	   231px box. That is narrow enough that the heading still broke
	   mid-word even at 46.3px ("Newsletter" alone is 232px).

	   Zeroing the panel's OWN copy leaves the parent's gutter intact and
	   puts the content at x=48 in a 279px box, matching the 48px edge the
	   tour page already uses for its card sections. The selector mirrors
	   theirs plus this row's id — (0,6,1), one class more, enough to win.
	   Scoped to single-tours so the homepage, where the block sits
	   directly in .entry-content, is untouched. */
	body.single-tours .entry-content.single-content .kb-row-layout-wrap .kb-row-layout-id6_0a53f7-f9 > .kt-row-column-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.wp-block-kadence-advancedheading.kt-adv-heading6_26ffc6-43 {
		font-size: 46.3px !important;
	}
}