/* Custom CSS.
   Colours, fonts and spacing belong in Elementor Site Settings (driven by
   build/brand.json). Only put here what Elementor cannot express — clip-path,
   pseudo-elements, and the odd responsive override. */

/* Long uppercase headings can out-measure a narrow viewport. Scope this to
   heading widgets: applying it to every h1-h3 also hits icon-box titles, where
   it breaks words mid-syllable. */
.elementor-widget-heading .elementor-heading-title {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   Retire Hello Elementor's pink.

   reset.css paints every bare <button>, [type=button] and [type=submit] with
   border and colour #c36, and flips to a #c36 fill on :hover AND :focus. It
   also colours every <a> #c36. None of that is ours, and it surfaces on
   anything that is not an .elementor-button — form submits, custom toggles.

   Its button selectors are specificity (0,2,0), so a single-class override only
   ties and the winner falls to stylesheet order. The child sheet is enqueued
   after hello-elementor, but relying on that is fragile — scope with the `body`
   ancestor to win outright instead.
--------------------------------------------------------------------------- */
body a {
	color: inherit;
}

body a:active,
body a:hover {
	color: inherit;
}

body [type="button"],
body [type="submit"],
body button {
	border-color: currentColor;
	color: inherit;
}

body [type="button"]:hover,
body [type="button"]:focus,
body [type="submit"]:hover,
body [type="submit"]:focus,
body button:hover,
body button:focus {
	background-color: transparent;
	color: inherit;
}

/* Elementor's own buttons opt back in — they set their own colours, and the
   rules above would otherwise strip the fill off a :hover state. */
body .elementor-button:hover,
body .elementor-button:focus {
	background-color: revert;
	color: revert;
}

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

/* Separators between the legal links in the footer bottom bar. */
.hs-legal .hs-sep {
	display: inline-block;
	margin: 0 14px;
	opacity: 0.4;
}

/* The footer link columns are nav-menu widgets; strip the list affordances so
   they read as plain link stacks. */
.hs-footer .elementor-nav-menu--main .elementor-nav-menu a {
	padding-left: 0;
	padding-right: 0;
}

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

/* Every Elementor container is position:relative, and so is the widget wrapper,
   so an absolutely-positioned dropdown anchors to the nearest one — the 107px
   nav column — instead of the header. Making .hs-header relative is not enough
   on its own: the intermediate container AND the widget wrapper both have to go
   static, or the nearest positioned ancestor is still the narrow one.
   Symptom when this is wrong: the burger opens a ~107px strip at the left edge
   with every label wrapped over three lines. */
/* The eight primary nav items need ~1400px to sit on one line. Elementor's
   nav-menu collapses at its tablet breakpoint (1024), which left 1025-1366 with
   a nav wrapped onto two rows inside a fixed 100px header -- the second row
   overlapping the hero -- and, below ~1210, the CTAs running off the right edge.
   Extend the collapsed treatment rather than enabling Elementor's laptop
   breakpoint, which would change the responsive cascade site-wide.

   Cut off at 1439, not 1366: measured, the eight items wrap at 1400 and still
   wrap at 1439. 1440 is the width the design specifies, so the full nav shows
   at and above its design width and collapses below it. */
@media (max-width: 1439px) {
	.hs-header .elementor-nav-menu--main {
		display: none !important;
	}

	.hs-header .elementor-menu-toggle {
		display: flex !important;
	}

	/* Let the columns size to content and drop the CTAs to their own row,
	   mirroring the tablet arrangement. */
	.hs-header .hs-nav-col {
		width: auto !important;
	}

	.hs-header .hs-logo-col {
		width: auto !important;
		order: 1;
	}

	.hs-header .hs-cta-col {
		width: auto !important;
		order: 2;
		flex: 0 0 auto !important;
	}

	/* Toggle sits with the CTAs on the right, not stranded beside the logo. */
	.hs-header .hs-nav-col {
		order: 3;
	}

	/* Elementor gives the toggle a grey chip by default. */
	.hs-header .elementor-menu-toggle {
		background-color: transparent;
	}

	.hs-header > .e-con-inner > .e-con,
	.hs-header .e-con-inner > .e-con {
		flex-wrap: wrap !important;
	}

	.hs-header {
		min-height: 0 !important;
		padding-block: 12px;
	}
}

@media (max-width: 1439px) {
	.hs-header {
		position: relative;
	}

	.hs-header .hs-nav-col,
	.hs-header .hs-nav-col > .e-con-inner,
	.hs-header .elementor-widget-nav-menu,
	.hs-header .elementor-widget-nav-menu > .elementor-widget-container {
		position: static;
	}

	/* Elementor hides BOTH the toggle and the dropdown above its own breakpoint:
	   @media (min-width:1025px) { .elementor-nav-menu--dropdown-tablet
	   .elementor-menu-toggle, ... .elementor-nav-menu--dropdown { display:none } }
	   Overriding only the toggle gave a burger that opened nothing. The panel is
	   display:block at all times below the breakpoint and collapses by height,
	   so restoring display is all that is needed. */
	/* The panel is absolutely positioned against .hs-header, so left:0/right:0
	   is its PADDING box, not the viewport — it came out 358px wide in a 390px
	   window with a strip of page showing beside it. Pull it out by the
	   header's own inline padding instead. */
	.hs-header .elementor-nav-menu--dropdown {
		display: block !important;
		position: absolute;
		/* !important on left: Elementor's own generated rule for this widget
		   sets left:0 at a higher specificity and silently wins, so the panel
		   reached the right edge and stayed inset on the left. */
		left: -30px !important;
		right: -30px;
		width: auto !important;
		max-width: none;
	}

	/* Keep the CTAs adjacent to the toggle. Without this they float near the
	   centre with up to 421px of void before the burger, reading as three
	   unrelated objects rather than logo-left / actions-right. */
	.hs-header .hs-cta-col {
		margin-left: auto;
	}

	/* Elementor ships the toggle as a 33px <div role="button">. 45px because a
	   14px/1.0 line box inside 14px padding lands at 42, not 44. */
	.hs-header .elementor-menu-toggle {
		width: 45px;
		height: 45px;
	}
}

/* At phone width the three-row header ate 210px — a quarter of an 844px
   viewport — and put the burger bottom-left, which is not where a thumb looks.
   Logo and toggle share row one; the CTAs take row two. */
@media (max-width: 767px) {
	/* Header padding drops to 16px at this width, so the pull-out must match. */
	.hs-header .elementor-nav-menu--dropdown {
		left: -16px !important;
		right: -16px;
	}

	.hs-header .hs-nav-col {
		order: 2;
	}

	.hs-header .hs-cta-col {
		order: 3;
		width: 100% !important;
		margin-left: 0;
		justify-content: center;
	}
}

/* The collapsed menu is Elementor's stock white panel. Once it serves every
   laptop from 1025 up, it has to look like the brand. */
.hs-header .elementor-nav-menu--dropdown {
	background-color: #082038;
}

.hs-header .elementor-nav-menu--dropdown a.elementor-item {
	color: rgba(255, 255, 255, 0.86);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.hs-header .elementor-nav-menu--dropdown a.elementor-item:hover,
.hs-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
	background-color: rgba(255, 255, 255, 0.06);
	color: #E6A33A;
}

/* A 33-character email in a 181px column cannot wrap: min-width:auto on a flex
   item refuses to shrink below its content, and body{overflow-x:clip} then
   CLIPS it rather than showing a scrollbar -- so ".co.uk" was simply gone
   between 1025 and 1210.

   `overflow-wrap: anywhere` fixed the clip but traded it for a break mid-domain
   ("harbourstonegroup." / "co.uk") at every width from 1025 up, including 1440.
   The address now carries an explicit <wbr> after the "@" so it breaks there
   instead; break-word stays only as a last resort for a word that cannot fit. */
.hs-footer .elementor-icon-list-item,
.hs-footer .elementor-icon-list-text,
.hs-footer .elementor-widget-icon-list {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Between 1025 and 1280 the Contact column is narrow enough that even
   "harbourstonegroup.co.uk" alone does not fit, so it broke again and left a
   four-character orphan. A 1px reduction in that band only is cheaper than
   re-cutting the five-column split. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.hs-footer .elementor-icon-list-text {
		font-size: 13px;
	}
}

/* Between the 1320px container and the 1024px tablet breakpoint there is no
   side gutter at all: the boxed container simply runs out of room and body copy
   touches both viewport edges. 1280 and 1366 are the two commonest laptop
   widths after 1920, so this dead zone is not an edge case. Capped at 1380 so
   the 1440 measurements the design is matched against are untouched. */
@media (max-width: 1380px) {
	/* On the OUTER boxed container, not .e-con-inner. Putting it on the inner
	   overrides any per-container horizontal padding a band sets for itself --
	   it silently flattened the gold CTA's 74px design inset back to 28. On the
	   outer box the two compose: gutter + the band's own inset. */
	.e-con-boxed {
		padding-inline: 28px;
	}
}

/* Below 1025 the bands set their own 28px via padding_tablet, so the rule above
   must stop at the dead zone's lower edge or the two stack to 56px. */
@media (max-width: 1024px) {
	.e-con-boxed {
		padding-inline: 0;
	}
}

/* The gold CTA is the one band the design does not align to the grid: it insets
   its copy to x=134 at 1440, 74px beyond the grid's x=60. Every other band
   tracks the grid within a few px. This has to sit on .e-con-inner -- see the
   note in build/homepage.py. */
.hs-cta .e-con-inner {
	padding-left: 74px;
}

@media (max-width: 1024px) {
	.hs-cta .e-con-inner {
		padding-left: 12px;
	}
}

/* A flex child will not shrink below its content, so a long nav pushes out of
   its column instead of wrapping. */
.hs-header .elementor-widget-nav-menu {
	min-width: 0;
}

/* Header CTA labels are two and three words; without this they break mid-label
   and push the header to two rows. */
.hs-header .elementor-button {
	white-space: nowrap;
}

/* Social icons.
   The social-icons widget's colour, size and spacing controls are not exposed
   through get_controls(), so setting them in the generated JSON would be
   silently ignored. icon_color="custom" is set there to stop the per-network
   brand colours; the treatment itself lives here. */
.hs-social .elementor-social-icon {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	width: 38px;
	height: 38px;
	margin-right: 10px;
	transition: border-color 0.2s, background-color 0.2s;
}

.hs-social .elementor-social-icon i {
	color: #fff;
	font-size: 14px;
}

.hs-social .elementor-social-icon:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.55);
}

.hs-social .elementor-social-icon:hover i {
	color: #fff;
}

/* Hello Elementor's reset gives every <p> a .9rem bottom margin, which stacks
   on top of the widget margins and made the footer brand column ~40px tall
   than the design. Let the widget margins own the spacing. */
.hs-footer .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Design circles measure ~30px, not the 38px first tried. */
.hs-social .elementor-social-icon {
	width: 30px;
	height: 30px;
}

.hs-social .elementor-social-icon i {
	font-size: 12px;
}

/* The design breaks the footer tagline over three lines at ~255px. The brand
   column is wider than that, so constrain the measure rather than the column —
   the logo and social row still want the full width. */
.hs-footer .hs-tagline {
	max-width: 255px;
}

/* The design draws 30px social circles, which is under the ~44px tap floor.
   The mockups are desktop-only, so there is no mobile design to contradict:
   keep 30px where the design specifies it and widen the hit area on touch.
   768 (iPad portrait) is a touch viewport too — gating this at 767 left tablet
   with 30px targets. */
@media (max-width: 1024px) {
	.hs-social .elementor-social-icon {
		width: 44px;
		height: 44px;
	}

	.hs-social .elementor-social-icon i {
		font-size: 15px;
	}
}