/*
Theme Name:		Chem-Trend 2026
Author:			John Green @ Phire Group
Author URI:		https://phiregroup.com/
Description:	The Chem-Trend parent theme for 2026. No site should use this theme directly.
Version:		1.0
Text Domain:	chemtrend
*/

:root {--ltorange: #fde4da; --orange: #fa6432; --dkorange: #c94a17; --white: #fff; --offwhite: #f2f2f2; --ltgray: #c8c8c8; --midgray: #969696; --dkgray: #5a5a5a; --black: #000; --black20: rgb(0 0 0 / .2); --black55: rgb(0 0 0 / .55); --green-1: #47d7ac; --green-2: #35a181; --green-3: #246c56; --green-4: #12362b; --brown: #a76d11; --logoorange: #f63; --mw: 73.125rem; --hs: 1.25rem; --vs: 2.5rem; --navbar: 4.5rem;}

/* basic styles */
* {margin: 0; padding: 0;}
*, ::before, ::after {box-sizing: border-box;}
html {font: medium/1.375 Whitney, Arial, 'Arial Unicode MS', sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; color: var(--dkgray); background-color: var(--white);}
html:is([lang^="ja"], [lang^="ko"], [lang^="th"], [lang^="vi"], [lang^="zh"]), :is([lang^="ja"], [lang^="ko"], [lang^="th"], [lang^="vi"], [lang^="zh"]), .usenoto {font-family: 'Noto Sans', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Thai', Arial, 'Arial Unicode MS', sans-serif;}
a {text-decoration-thickness: from-font; color: inherit;}
b, strong {font-weight: 500;}
button {border-width: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer; touch-action: manipulation;}
dialog {place-self: center; width: auto; height: auto; overscroll-behavior: contain; padding: var(--hs); border: 0; border-radius: .625rem; color: var(--dkgray);}
dialog::backdrop {overflow: hidden; overscroll-behavior: contain; background-color: var(--black20); backdrop-filter: blur(.5rem);}
h1, h2, h3, h4, h5, h6 {font-weight: 400; text-wrap: balance;}
:is([lang^="ja"], [lang^="ko"]) :is(h1, h2, h3, h4, h5, h6) {text-wrap: initial;} /* https://ryelle.codes/2025/04/typography-troubles-balancing-in-japanese-korean/ */
iframe {display: block; max-width: 100%; border: 0;}
img, picture, svg, video {height: auto; max-width: 100%; vertical-align: middle;}
input, select, textarea {font: inherit; letter-spacing: inherit; word-spacing: inherit;}
ol, ul {list-style: none;}
p {text-wrap: pretty;}
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
svg[width="0"][height="0"] {position: fixed;}
svg[width="0"][height="0"][aria-hidden="true"] {display: none;}
[hidden] {display: none !important;}

/*
.h1 {font-weight: 300; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.02em;}
.home .h1 {font-size: 3.5rem; line-height: 1.036; letter-spacing: -.036em;}
.h2 {font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em;}
.h3 {font-size: 1.375rem; line-height: 1.272; letter-spacing: -.02em;}
.subhead {font-size: 1rem; line-height: 1.25; letter-spacing: .05em; text-transform: uppercase;}
.eyebrow {font-size: .875rem; line-height: 1.143;}
.body-copy-large {font-size: 1.125rem; line-height: 1.222;}
*/

/* utility classes */
.btn, .btn2, .btn3, .btn4 {display: inline-flex; align-items: center; transition: .3s ease-out;}
.btn, .btn2, .btn3 {border: 1px solid var(--bc, var(--bg, var(--orange)));}
.btn, .btn2 {padding: .625rem 1.25rem; border-radius: .5rem; font-size: 1.125rem; line-height: 1; text-decoration: none; color: var(--fg, var(--white)); background-color: var(--bg, var(--orange));}
.btn2, .btn3 {border-color: var(--bg, currentcolor); color: var(--fg, inherit); background-color: var(--bg, transparent);}
:is(.btn2, .btn3):hover {--fg: var(--white); --bg: var(--dkgray);}
.hasbg :is(.btn2, .btn3):hover {--fg: var(--dkgray); --bg: var(--white);}
.btn3, .btn4 {gap: .375rem; border-radius: 1.25rem;}
.btn.white {--fg: var(--orange); --bg: var(--white); --arrow: url('images/btn-arrow-orange.svg');}
.btn.gray {--fg: var(--white); --bg: var(--dkgray);}
.btn::after {flex-shrink: 0; width: 0px; height: .8125rem; background-image: var(--arrow, url('images/btn-arrow-white.svg')); background-position: right center; background-repeat: no-repeat; transition: .15s ease-out; content: '';}
.btn:hover::after {width: 1.5625rem;}
.btn3 {padding: .375rem .625rem; font-size: .875rem; line-height: 1.143;}
.btn4 {color: var(--fg); background-color: var(--bg, transparent); --fg: var(--orange);}
.btn4:hover {--fg: var(--white); --bg: var(--orange);}
.arrowlink {border-radius: 50%;}
.closebtn {--fg: var(--dkgray);}
.closebtn:hover {--fg: var(--white); --bg: var(--dkgray);}
.screen-reader-text {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.searchbtn {--fg: var(--dkgray);}
.searchbtn:hover {--fg: var(--orange);}
.txtarrowlink {display: inline-grid; grid-template-columns: auto 1.875rem; gap: .5rem; align-items: center; font-weight: 500; font-size: 1.125rem; line-height: .67; letter-spacing: -.02em;}
.txtarrowlink:not(:hover) {text-decoration: none;}
.txtarrowlink svg {border-radius: 50%; color: var(--orange); transition: .15s ease-out;}
.txtarrowlink:hover svg {color: var(--white); background-color: var(--orange);}
.wrap {margin-inline: max(var(--hs), ((100% - var(--mw)) / 2));}
.wys *:where(:not(.btn)) {margin: revert; margin-block-end: 0; padding: revert; list-style: revert;}
.wys > :first-child {margin-block-start: 0;}
.zi {display: block; overflow: clip; border-radius: .625rem;}
.zi > img {transition: .3s scale ease-out;}

/* components */
.playbtn {border-radius: 50%; color: var(--dkgray); transition: .3s ease-out;}
.playbtn:hover {color: var(--orange);}

/* forms */
.fieldwrap {display: grid; gap: .625rem; justify-items: start; width: 100%;}
.fieldwrap :is(input, select, textarea) {width: 100%; height: 3.75rem; padding: .625rem 1rem; border: 1px solid var(--dkgray); border-radius: .625rem; font-weight: 500; font-size: 18px; line-height: 1; color: inherit; background-color: inherit;}
.fieldwrap select {background-image: url('images/select.svg'); background-position: right 1rem center; background-repeat: no-repeat; appearance: none;}

/* header */
.header-skip {display: block; padding: .5rem; text-align: center;}
.header-skip:not(:focus) {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.header-skip:focus {outline: none;}
.header-skip span {padding-inline: .25rem;}
.header-skip:focus-visible span {outline: 1px solid;}
.ph {position: absolute; inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wrongsiteoffset, 0px)); width: 100%; margin-block-start: var(--hs);}
.header-skip:focus-visible + .ph {inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 2.375rem);}
.ph-wrap {display: grid; position: relative; z-index: 3; grid-template: var(--navbar) / 1fr; grid-auto-rows: auto; align-items: center; --mw: 85rem;}
.ph-bar {display: flex; justify-content: space-between; padding: 1rem 1.25rem; border-radius: .625rem; color: var(--black); background-color: var(--bg, var(--offwhite)); backdrop-filter: blur(1rem);}
body:has(.topblock.hasbg) .ph-bar {color: var(--white); --bg: var(--black20);}

/* top block */
.topblock.hasbg {display: grid; color: var(--white);}
.topblock-sm {grid-template-rows: 28.125rem;}
.topblock-md {grid-template-rows: 37.5rem;}
.topblock-home:has(.topblock-announcement) {grid-template-rows: 37.5rem auto;}
.topblock-lg {grid-template-rows: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));}
.topblock.hasbg > * {grid-area: 1 / 1 / -1 / -1;}
.topblock-home:has(.topblock-announcement) > * {grid-row: 1;}
.topblock.hasbg::after {grid-area: 1 / 1 / -1 / -1; background-color: var(--black55); content: '';}
.topblock-lg.hasbg:has(.topblock-img)::after {background-image: linear-gradient(114deg, color(from var(--orange) srgb r g b / 0) 39%, color(from var(--orange) srgb r g b / .8) 79.8%);}
.topblock-home.hasbg::after {background-image: linear-gradient(245deg, color(from var(--orange) srgb r g b / 0) 30.5%, color(from var(--orange) srgb r g b / .8) 88.9%);}
.topblock-home:has(.topblock-announcement)::after {grid-row: 1;}
.topblock-img, .topblock pg-videowrap, .topblock pg-videowrap video {width: 100%; height: 100%; max-width: none; object-fit: cover;}
.topblock pg-videowrap {display: grid; grid-template: 100% / max(var(--hs), ((100% - var(--mw)) / 2)) 1fr max(var(--hs), ((100% - var(--mw)) / 2));}
.topblock pg-videowrap video {grid-area: 1 / 1 / -1 / -1;}
.topblock pg-videowrap .playbtn {z-index: 2; grid-area: 1 / 2; place-self: end start; margin-block-end: 2.5rem;}
.topblock .wrap {display: flex; z-index: 1; flex-direction: column; gap: var(--hs); place-items: start; margin-block-start: calc(var(--hs) + var(--navbar)); padding-block: 1.875rem 2.5rem;}
.topblock pg-videowrap + .wrap::after {width: 25px; height: 25px; content: '';}
.topblock-sm pg-videowrap + .wrap::after {margin-block-start: auto;}
.bc {min-height: 1rem; font-size: .875rem; line-height: 1.143;}
.bc li {display: inline-block;}
.bc li:not(:last-child)::after {content: '|';}
.bc a:not(:hover) {text-decoration: none;}
.topblock h1 {margin-block-start: 1.25rem; font-weight: 300; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.02em;}
.topblock-md h1 {max-width: 31.25rem; margin-block-start: auto; font-size: 3.5rem; line-height: 1.036; letter-spacing: -.036em;}
.topblock-intro {margin-block-start: auto;}
.topblock-md .topblock-intro {max-width: 31.25rem; margin-block-start: 0; font-size: 1.125rem; line-height: 1.222;}
.topblock-lg .topblock-intro {max-width: 25rem;}
.topblock-md:has(pg-videowrap) .btn {margin-block-end: 2.5rem;}
.topblock-home > .topblock-announcement {display: grid; grid-row: 2; gap: var(--hs); justify-items: start; margin: var(--hs); padding: var(--hs); border: 1px solid var(--ltgray); border-radius: .625rem; color: var(--dkgray); background-color: var(--white);}
.topblock-announcement h2 {font-weight: 600; font-size: 1rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em;}

/* footer */
.pf {border-block-start: 1px solid var(--ltgray);}
.pf .wrap {padding-block: 2.5rem;}
.pf-social {display: inline-grid; gap: 1.25rem 1.75rem; font-size: .875rem; line-height: 1.57;}
.pf-social a {display: flex; gap: .625rem; align-items: center;}
.pf-social a:not(:hover) {text-decoration: none;}
.pf-social a:hover svg {transition: .15s ease-out;}
.pf-social a:hover svg:has([href="#social-linkedin"]) {color: #0073b1;}
.pf-social a:hover svg:has([href="#social-wechat"]) {color: #07c160;}
.pf-social a:hover svg:has([href="#social-youtube"]) {color: #f03;}
.pf-nav:not(:first-child) {margin-block-start: 1.875rem;}
.pf-nav {font-weight: 700; line-height: 1.5;}
.pf-nav ul {columns: 12.5rem 2; column-gap: 3.125rem; max-width: 28.125rem;}
.pf-nav li {padding-block-end: .625rem; break-inside: avoid;}
.pf-nav a:not(:hover) {text-decoration: none;}
.pf-fse {display: inline-flex;}
.pf-fse:not(:first-child) {margin-block-start: 2.5rem;}
.pf-nav + .pf-fse {margin-block-start: 1.875rem;}
.pf-legal {margin-block-start: 1.875rem; font-size: .875rem; line-height: 16px;}

/* block: wide image */
.block-wide_image {--mw: 85rem; --hs: 0px;}
.block-wide_image img {width: 100%;}

@media (width >= 48em) { /* 768px */

	:root {--vs: 4.375rem;}

	/* top block */
	.topblock-lg .wrap {display: grid; grid-template: auto auto 1fr / auto auto;}
	.topblock-lg:has(pg-videowrap) .wrap {grid-template-rows: auto auto 1fr auto;}
	.topblock-lg .wrap > * {grid-column: 1;}
	.topblock-lg .wrap::after {grid-area: -1 / 1;}
	.topblock-lg .wrap > .topblock-jumplinks {grid-area: -1 / 2; place-self: end;}
	.topblock-lg .topblock-intro {grid-row: 4; max-width: 18.75rem;}
	.topblock-lg.hasbg:has(.topblock-img)::after {background-image: linear-gradient(125deg, color(from var(--orange) srgb r g b / 0) 62.4%, color(from var(--orange) srgb r g b / .8) 97.5%);}

	/* footer */
	.pf .wrap {display: grid; grid-template: auto auto / 1fr auto; column-gap: var(--hs); justify-items: start;}
	.pf-social {display: flex; grid-area: 1 / 1; flex-wrap: wrap;}
	.pf-nav {grid-area: 2 / 1;}
	.pf-nav:not(:first-child) {margin-block-start: 2.5rem;}
	.pf-fse {grid-area: 1 / 2; margin-block-start: 0 !important;}
	.pf-legal {grid-area: 2 / 2; margin-block-start: 2.5rem;}

}

@media (width >= 64em) { /* 1024px */

	/* top block */
	.topblock-home:has(.topblock-announcement) {grid-template: 37.5rem / max(var(--hs), ((100% - var(--mw)) / 2)) 500px 1fr 350px max(var(--hs), ((100% - var(--mw)) / 2));}
	.topblock-home:has(.topblock-announcement) > .wrap {grid-column: 2; margin-inline: 0;}
	.topblock-home > .topblock-announcement {z-index: 1; grid-area: 1 / 4; align-self: end; margin: 0; margin-block-end: 2.5rem;}

}

@media (width >= 85em) { /* 1360px */

	/* block: wide image */
	.block-wide_image {padding-block: var(--hs); --mw: 85rem; --hs: 1.25rem;}
	.block-wide_image img {border-radius: .625rem;}

}

@media print {

	*, *::before, *::after {border-color: #000 !important; text-shadow: none !important; color: #000 !important; background-color: transparent !important;}
	blockquote, figure {break-inside: avoid;}

}

@media (prefers-reduced-motion: no-preference) {

	html:focus-within {scroll-behavior: smooth;}

	@view-transition {navigation: auto;}

}

@media (prefers-reduced-motion: reduce) {

	*, *::before, *::after {scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important;}

}

@media (forced-colors: active) {

	/* @TODO */

}