/* =============================================================
   Crroctiva UI/UX & Accessibility fixes
   Layered on top of Elementor / RomethemeKit output.
   Additive only: no layout, spacing or branding is redesigned.
   ============================================================= */

/* -------------------------------------------------------------
   1. Skip link
   Lets keyboard users jump past the header straight to content.
   ------------------------------------------------------------- */
.crr-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: #0A1828;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 0 0 6px 0;
	/* Hidden via clipping rather than an off-screen offset, so the link
	   never extends the page box on small viewports. */
	clip-path: inset(50%);
	white-space: nowrap;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.crr-skip-link:focus {
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
}

/* -------------------------------------------------------------
   2. Visually hidden helper (used by the injected H1)
   Readable by screen readers, invisible on screen.
   ------------------------------------------------------------- */
.crr-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------
   3. Visible keyboard focus
   The theme/plugins ship 14 separate `outline: none` rules, which
   leaves keyboard users with no visible focus position. Restored
   with :focus-visible so mouse users see no change.
   ------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible,
.rkit-btn-hamburger:focus-visible,
.elementor-social-icon:focus-visible,
.elementor-swiper-button:focus-visible {
	outline: 3px solid #A5E5FE !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* -------------------------------------------------------------
   4. Touch targets (WCAG 2.5.5)
   Icon controls measured 25x25 / 36x36 CSS px. Enlarged to a
   44px minimum. Where enlarging the box would change the visible
   design (social icons keep their coloured circle), the hit area
   is expanded with a transparent pseudo-element instead, so the
   artwork is untouched.
   ------------------------------------------------------------- */
.rkit-btn-hamburger {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.elementor-swiper-button {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Keep the 36px circle, enlarge only the tappable area. */
.elementor-social-icon {
	position: relative;
}

.elementor-social-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* Stacked footer/menu links measured 26px tall. Extra padding is
   applied on touch devices only, so desktop spacing is unchanged. */
@media (hover: none) and (pointer: coarse) {

	.elementor-icon-list-items > .elementor-icon-list-item > a {
		padding-top: 9px;
		padding-bottom: 9px;
	}
}

/* -------------------------------------------------------------
   5. Button colour contrast (WCAG AA)
   Solid buttons were #F2F2F2 on #0788AE = 3.65:1 (AA needs 4.5:1).
   #056F91 with white text = 5.69:1.
   The .crr-btn-aa class is added by ui-fixes.js ONLY to buttons
   whose computed background is that exact blue, so transparent /
   outline buttons that share the same markup are left untouched.
   ------------------------------------------------------------- */
.crr-btn-aa {
	background-color: #056F91 !important;
	color: #FFFFFF !important;
}

.crr-btn-aa:hover,
.crr-btn-aa:focus {
	background-color: #04597A !important;
	color: #FFFFFF !important;
}

/* -------------------------------------------------------------
   6. Horizontal overflow on small laptops (~1280–1400px)
   Two components bleed past the viewport and produce a page-level
   horizontal scrollbar. Both are contained with `overflow-x: clip`,
   which — unlike `hidden` — does not create a scroll container and
   does not break `position: sticky` on the other axis. Only empty
   gutter/offset space is clipped; no content is hidden.

   a) JetEngine listing grid uses the Bootstrap gutter pattern
      (margin: 0 -15px) without the matching +15px parent padding,
      so it is 30px wider than its container (measured: 15px of
      page overflow at 1280px on the homepage).

   b) The RomethemeKit testimonial carousel positioned its navigation
      arrows ~34px OUTSIDE the carousel box, which spilled past the
      viewport edge on 1280–1400px screens. This was initially also
      contained with `overflow-x: clip`, but that is no longer needed
      — and was harmful. The section 7 gutter fix below pulls the
      carousel inward (39px..1261px at a 1300px viewport), which
      brings both arrows fully inside the viewport on their own.
      Clipping the carousel would have cut each 45px arrow down to
      11px of visible width, so it is deliberately NOT applied.
   ------------------------------------------------------------- */
.jet-listing-grid {
	overflow-x: clip;
}

/* -------------------------------------------------------------
   7. Laptop "dead zone": text flush against the screen edges
   -------------------------------------------------------------
   Elementor switches container strategy at 1025px:

     up to 1024px  ->  .e-con-inner { max-width: 90% }        (healthy gutter)
     from  1025px  ->  .e-con-inner { max-width: min(100%, 1340px) }

   Because the second rule has no horizontal padding, any viewport
   between 1025px and ~1400px renders the container at full width
   with an auto margin of zero — so body copy and headings sit hard
   against both screen edges. Measured on /about/:

     1200px -> 0px gutter      1366px -> 13px
     1300px -> 0px gutter      1440px -> 50px (fine)

   That range covers most laptops (1280x800, 1366x768, and 1920
   screens at 125–150% Windows display scaling), which is why this
   was visible in normal use but invisible to a plain overflow test:
   nothing overflows, the text just has no breathing room.

   Fix continues the site's own 90% pattern across the gap, easing
   to 94% so it meets the 1340px fixed container smoothly at 1440px.
   Above 1420px nothing changes at all.
   ------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1420px) {

	.elementor .e-con > .e-con-inner {
		max-width: min(94%, 1340px);
	}
}

/* -------------------------------------------------------------
   8. Large text sitting on the brand blue
   Global "Text" colour #B5B3B3 is designed for the dark sections
   (9.2:1 there) but is also used on the #1790BF blue, where it
   drops to 1.74:1. Large text is switched to white (3.63:1, which
   satisfies the 3:1 large-text threshold). Applied by JS only to
   elements that actually sit on that blue.
   NOTE: body-size text on this blue cannot reach 4.5:1 even in
   pure white — that needs a darker brand blue (design decision).
   ------------------------------------------------------------- */
.crr-onblue-lg {
	color: #FFFFFF !important;
}