/*
	Sokkia theme. Loaded ONLY by /conf/sokkia page policies, AFTER topconpositioning.site.
	Most of the look comes from re-mapping shared tokens; other rules reuse the shared
	selectors and win by load order. Do not include this clientlib before topconpositioning.site.
*/
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap");

:root {
	--sokkia-teal: #00a3a0;
	--sokkia-teal-dark: #00736f;
	--sokkia-teal-light: #80d1cf;
	--sokkia-form-accent: #0a8cfa; /* design keeps checkbox/radio blue; use var(--sokkia-teal) for teal */

	--ff-guardian: "Open Sans", Arial, sans-serif;

	/* shared tokens -> Sokkia palette */
	--color-blue-400: var(--sokkia-teal);      /* primary/tertiary buttons, hero CTA, nav underline, medium alert */
	--color-blue-500: var(--sokkia-teal-dark); /* hovers, carousel bar, quote attribution, gradient end */
	--color-blue-600: var(--color-gray-900);   /* headings, teaser titles, nav/utility links, gradient start */
	--color-blue-700: var(--color-gray-1000);  /* Blue 700 container, dark cards, header menu, footer */
	--color-blue-400-30: rgb(0 163 160 / 30%); /* hero dark gradient */
}

/* Text */
h1,
.heading-1 {
	font-weight: var(--fw-semibold);
	letter-spacing: -0.5px;
	line-height: 1.05;
}

h2,
.heading-2 {
	font-weight: var(--fw-semibold);
	letter-spacing: -0.5px;
	line-height: 1.35;
}

h3,
.heading-3 {
	font-weight: var(--fw-regular);
	letter-spacing: -0.5px;
	line-height: 1.35;
}

h4,
.heading-4,
h5,
.heading-5 {
	letter-spacing: -0.5px;
}

@media screen and (min-width: 992px) {
	h3,
	.heading-3 {
		font-weight: var(--fw-semibold);
	}
}

a,
.anchor {
	color: var(--color-gray-800);
}

/* Site notification: minor = gray (medium = teal, critical = red via tokens) */
.cmp-alert {
	background-color: var(--color-gray-800);
}

/* Accordion */
.cmp-accordion__header {
	font-weight: var(--fw-semibold);
}

/* List: link list */
.list.--styleLinkList .cmp-list__item-link {
	color: var(--color-gray-800);
}

/* Forms: keep checkbox/radio selected states as in the design */
.marketoform .mktoField {
	--color-blue-400: var(--sokkia-form-accent);
}

/* Teaser: Icon heading. Light bg = SVG's own color, dark bg = white.
   brightness(0) invert(1) only produces pure white, so it renders the same on iPhone. */
.--styleTeaserStyleIconHeading .cmp-teaser .cmp-image__image {
	filter: none;
}

.--styleBgColorDarkGradient .--styleTeaserStyleIconHeading .cmp-teaser .cmp-image__image,
.--styleBgColorBlue700 .--styleTeaserStyleIconHeading .cmp-teaser .cmp-image__image {
	filter: brightness(0) invert(1);
}

/* Pull quote */
.cmp-testimonial {
	--quote-color: var(--color-gray-900);
}

.--styleBgColorDarkGradient .cmp-testimonial,
.--styleBgColorBlue700 .cmp-testimonial {
	--quote-attribution: var(--sokkia-teal-light);
}

/* Asset list "Load more" (blue is hard-coded in the shared CSS) */
.cmp-assetlist__load-more {
	background-color: var(--sokkia-teal);
	border-color: var(--sokkia-teal);
}

.cmp-assetlist__load-more:not(:disabled):hover,
.cmp-assetlist__load-more:not(:disabled):focus,
.cmp-assetlist__load-more:not(:disabled):active {
	background-color: var(--sokkia-teal-dark);
	border-color: var(--sokkia-teal-dark);
	box-shadow: 0 2px 8px rgb(0 163 160 / 30%);
}

/* Icons (social share + social links): black on light, white on dark, dimmed on hover */
:root {
	--sokkia-icon: var(--color-gray-1000);
	--sokkia-icon-hover: var(--color-gray-800);
}

.--styleBgColorDarkGradient,
.--styleBgColorBlue700,
.cmp-hero-teaser {
	--sokkia-icon: var(--color-white);
	--sokkia-icon-hover: var(--color-gray-400);
}

.cmp-hero-teaser .--smallGrayGradient {
	--sokkia-icon: var(--color-gray-1000);
	--sokkia-icon-hover: var(--color-gray-800);
}

.cmp-social-share__button,
.--styleBgColorDarkGradient .cmp-social-share__button,
.--styleBgColorBlue700 .cmp-social-share__button,
.cmp-hero-teaser .cmp-social-share__button,
.cmp-hero-teaser .--smallGrayGradient .cmp-social-share__button,
.cmp-social__links-list a {
	color: var(--sokkia-icon);
	transition: color 0.15s ease-in-out;
}

@media (hover: hover) {
	.cmp-social-share__button:hover,
	.cmp-hero-teaser .--smallGrayGradient .cmp-social-share__button:hover,
	.cmp-social__links-list a:hover {
		color: var(--sokkia-icon-hover);
	}
}

.cmp-social-share__button:focus-visible,
.cmp-hero-teaser .--smallGrayGradient .cmp-social-share__button:focus-visible,
.cmp-social__links-list a:focus-visible {
	color: var(--sokkia-icon-hover);
}

/* Sokkia Jumbo Hero typography */
.cmp-hero-teaser .cmp-hero-teaser__container.--largeImage .cmp-hero-teaser__title__jumbo,
.cmp-hero-teaser .cmp-hero-teaser__container.--largeVideo .cmp-hero-teaser__title__jumbo {
	font-weight: 400;
}

@media screen and (min-width: 992px) {
	.cmp-hero-teaser .cmp-hero-teaser__container.--largeImage .cmp-hero-teaser__title__jumbo,
	.cmp-hero-teaser .cmp-hero-teaser__container.--largeVideo .cmp-hero-teaser__title__jumbo {
		font-size: 84px;
	}
}

@media screen and (max-width: 767px) {
	.cmp-hero-teaser .cmp-hero-teaser__container.--largeImage .cmp-hero-teaser__title__jumbo,
	.cmp-hero-teaser .cmp-hero-teaser__container.--largeVideo .cmp-hero-teaser__title__jumbo {
		text-align: center;
	}
}