@charset "utf-8";

/*

       ⋮⋮⫸  ACCESSIBILITY

   WCAG 2.1 / 2.2 Level AA support layer.
   Loaded last in header.php so it overrides default.css and media.css.

   Sections:
     1. Visually-hidden utility
     2. Skip link
     3. Focus indicators
     4. Reduced motion

*/


/* ------------------------------------------------------------------
   1. Visually-hidden utility

   Content that must reach screen readers but not the visual layout.
   Deliberately NOT display:none, which removes it from the a11y tree.
   ------------------------------------------------------------------ */

.screen-reader-text
{
	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;
}

/* Becomes visible when focused — for skip links and similar controls. */
.screen-reader-text.is-focusable:focus,
.screen-reader-text.is-focusable:focus-visible
{
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}


/* ------------------------------------------------------------------
   2. Skip link — WCAG 2.4.1 Bypass Blocks

   Every page template already exposes <main id="main">.
   ------------------------------------------------------------------ */

.skip-link
{
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 14px 24px;
	background-color: #fff;
	color: #0b0c10;
	font: 700 16px/1.4 'Montserrat', Helvetica, Arial, sans-serif;
	text-decoration: underline;
}

.skip-link:link,
.skip-link:visited
{
	color: #0b0c10;
	text-decoration: underline;
}

.skip-link:focus
{
	left: 12px;
	top: 12px;
}

/* #main is the skip target; it should not draw a ring when focused
   programmatically, but must still be reachable. */
#main[tabindex="-1"]:focus
{
	outline: none;
}


/* ------------------------------------------------------------------
   3. Focus indicators — WCAG 2.4.7 Focus Visible, 1.4.11 Non-text Contrast

   reset.css previously carried `a:focus, :focus { outline: 0 }`, which
   removed the indicator from every element on every page.

   The ring is deliberately two-tone. #080b11 reads against the site's
   light sections; the white halo sitting in the outline-offset gap reads
   against the dark sections and photographic banners. At least one of the
   two clears 3:1 on any background the theme uses, so a single rule works
   everywhere without having to enumerate contexts.
   ------------------------------------------------------------------ */

:focus-visible
{
	outline: 3px solid #080b11;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
	border-radius: 1px;
}

/* Browsers without :focus-visible support fall back to :focus. */
@supports not selector(:focus-visible)
{
	:focus
	{
		outline: 3px solid #080b11;
		outline-offset: 2px;
		box-shadow: 0 0 0 2px #fff;
		border-radius: 1px;
	}
}

/* Form fields carry their own border treatment in default.css and
   newClientForms.css; the ring sits outside it rather than replacing it. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible
{
	outline: 3px solid #080b11;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* The account-form fields carry `transition: all 0.3s ease`, which sweeps the
   focus ring in over 300ms along with the border colour. A focus indicator
   has to be there the instant focus lands — someone tabbing quickly through
   a long form would otherwise outrun it. Naming the two properties the theme
   actually animates leaves outline and box-shadow to apply immediately. */

/* The selector list mirrors newClientForms.css exactly. `#clientBoxes input`
   alone loses to `#clientBoxes input[type="text"]` — the attribute selector
   outranks it — so the `transition: all` would survive. */
#clientBoxes input[type="text"],
#clientBoxes input[type="email"],
#clientBoxes input[type="tel"],
#clientBoxes input[type="date"],
#clientBoxes input[type="number"],
#clientBoxes select,
#clientBoxes textarea
{
	transition-property: border-color, background-color;
}

/* The Clover payment iframes render their own field chrome, so the ring
   goes on the wrapper. newClientForms.css:902 previously set outline:none. */
.clover-field:focus-within
{
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #080b11;
}

/* The COI file input is a transparent overlay on a styled label
   (newClientForms.css:775). Without this the focus ring is invisible. */
.file-upload-label:focus-within
{
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #080b11;
}


/* ------------------------------------------------------------------
   3a. Scripted controls

   Elements driven by click handlers now carry role="button". Several were
   <a href="">, which is a link to the current page rather than a control;
   dropping the href also drops the UA pointer cursor, so it is restored
   here. Zero-specificity :where() keeps this from outranking the theme's
   own .defaultBtn / .all rules.
   ------------------------------------------------------------------ */

:where([role="button"])
{
	cursor: pointer;
}


/* ------------------------------------------------------------------
   3b. Link colour and contrast — WCAG 1.4.3, 1.4.1

   The default page background is white (the theme sets no body
   background), so the global link colour in reset.css has to clear 4.5:1
   against white — hence #cf4a00 there. The theme's dark sections are the
   exception: against #080b11 the untouched brand orange measures 6.55:1,
   while #cf4a00 would drop to 4.34:1. So the brand colour is restored
   inside those containers.
   ------------------------------------------------------------------ */

#header a:link,          #header a:visited,
#home_topBanner a:link,  #home_topBanner a:visited,
#inner_topBanner a:link, #inner_topBanner a:visited,
#home_about a:link,      #home_about a:visited,
#feat2cols a:link,       #feat2cols a:visited,
#about a:link,           #about a:visited,
#about_map a:link,       #about_map a:visited,
#categories a:link,      #categories a:visited,
#hexagons_logo a:link,   #hexagons_logo a:visited,
#permits a:link,         #permits a:visited,
#weapons_categories a:link,       #weapons_categories a:visited,
#weapons_carousel_section a:link, #weapons_carousel_section a:visited,
#logo_boxes a:link,      #logo_boxes a:visited,
#showcase_hero a:link,   #showcase_hero a:visited,
#clientBoxes a:link,     #clientBoxes a:visited,
#weapons_popup a:link,   #weapons_popup a:visited,
#marketing_popup a:link, #marketing_popup a:visited,
.contact_popup a:link,   .contact_popup a:visited,
#team_profiles .darkBg a:link, #team_profiles .darkBg a:visited
{
	color: #ff611d;
}

/* The footer is deliberately absent from the list above. It sets its own
   link colour — rgba(255,255,255,0.6), which measures 7.26:1 on the dark
   ground — so it never needed the brand colour restoring. An earlier
   `#footer:not(.alt) a:link` rule here outranked that on specificity and
   turned every footer link orange, which was not the theme's intent. */

/* 1.4.1 Use of Color: an inline link sitting in a paragraph is told apart
   from the surrounding text by colour alone, and the two differ by roughly
   1.4:1. Content links written through ACF and the editor carry no class,
   which is what separates them here from the theme's own chrome — buttons,
   tiles and nav items all do, and those read as controls by shape and
   position rather than colour. */
a:link:not([class]):not([role="button"]),
a:visited:not([class]):not([role="button"])
{
	text-decoration: underline;
}

/* Link elements that are navigation or controls, not prose. */
#main-menu a,
.slicknav_nav a,
.tbanner_social_m a,
#h_logo,
.swiper a,
.hexagons a,
#footer .menu a,
#footer_menu a
{
	text-decoration: none;
}


/* ------------------------------------------------------------------
   3c. Images hidden by CSS — WCAG 1.1.1 Non-text Content

   In three places the theme paints the picture as a CSS background on a
   <figure> and sets the real <img> inside it to display:none. That removes
   the image from the accessibility tree along with its alt text, so the
   content sighted visitors can see has no text alternative at all.

   Swapping display:none for the visually-hidden pattern keeps the element
   out of the layout — it was contributing nothing before either — while
   putting the alt text back where screen readers can reach it.
   ------------------------------------------------------------------ */

.prod_entry figure img,
.weapons_main_categories figure img,
.weapons_sub_categories figure img,
#articlesSlider .swiper-slide .slide img
{
	display: block !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
}


/* ------------------------------------------------------------------
   3d. Background video toggle — WCAG 2.2.2 Pause, Stop, Hide

   Injected by accessibility.js into each banner that autoplays a looping
   video. Deliberately understated: it sits in the bottom-right of the
   banner, over the existing dark scrim, so it reads without competing with
   the hero content.
   ------------------------------------------------------------------ */

.iss-motion-toggle
{
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background-color: rgba(8, 11, 17, 0.65);
	cursor: pointer;
}

.iss-motion-toggle:hover
{
	background-color: rgba(8, 11, 17, 0.9);
	border-color: #fff;
}

/* Two bars for pause; a triangle for play. Drawn rather than iconographic
   so there is no font or image dependency. */
.iss-motion-icon
{
	display: block;
	width: 12px;
	height: 14px;
	border-left: 4px solid #fff;
	border-right: 4px solid #fff;
}

.iss-motion-toggle.is-paused .iss-motion-icon
{
	width: 0;
	height: 0;
	margin-left: 3px;
	border-left: 12px solid #fff;
	border-right: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

@media screen and (max-width: 800px)
{
	.iss-motion-toggle
	{
		right: 12px;
		bottom: 12px;
		width: 40px;
		height: 40px;
	}
}


/* ------------------------------------------------------------------
   3e. Footer legal links

   Privacy and accessibility, sitting in the footer bar alongside the
   copyright. reset.css indents every <li> by 24px and pads it, so both are
   cleared here.
   ------------------------------------------------------------------ */

#footer .footer_legal
{
	padding-top: 1.25rem;
	margin-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#footer .footer_legal ul
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer .footer_legal li
{
	margin: 0;
	padding: 0;
}

/* Keep each label on one line — "Privacy Policy" breaking after "Privacy"
   is what made the first attempt look wrong. */
#footer .footer_legal a
{
	white-space: nowrap;
	text-decoration: underline;
	font-size: 0.875rem;
}


/* ------------------------------------------------------------------
   4. Reduced motion — WCAG 2.3.3, and 2.2.2 support

   The theme carries ~200 transition declarations, AOS scroll animations,
   animsition page transitions and several autoplaying carousels.

   AOS starts its elements at opacity:0 and animates them in, so motion
   cannot simply be switched off — the content has to be forced visible
   or it disappears entirely.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce)
{
	*,
	*::before,
	*::after
	{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* AOS: reveal everything immediately rather than on scroll. */
	[data-aos]
	{
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* animsition fades the whole page on every navigation. */
	.animsition,
	.animsition-overlay
	{
		animation: none !important;
		opacity: 1 !important;
	}
}