/*
Theme Name:		Chem-Trend 2026 SITE
Author:			John Green @ Phire Group
Author URI:		https://phiregroup.com/
Template:		chemtrend2026
Description:	The Chem-Trend *site* theme for 2026.
Version:		1.0
Text Domain:	chemtrend
*/

/* header */
.wrongsite {color: var(--white); background-color: var(--dkorange);}
.wrongsite .wrap {display: grid; gap: 1.25rem clamp(3.125rem, -33.239rem + 56.818vw, 9.375rem); align-items: start; padding-block: 1.25rem;}
.wrongsite p a:not(:hover) {text-decoration: none;}
.wrongsite .btns {display: flex; gap: .75rem;}

.ph-nav {display: grid; z-index: 1; gap: 1.875rem; justify-items: start; margin-block-start: 1.875rem;}

.ph-searchform {display: flex; gap: .5rem; width: 100%; padding: .125rem .1875rem; border: 1px solid var(--ltgray); border-radius: 1.25rem; background-color: var(--white);}
.ph-searchform input {flex-grow: 1; padding-inline-start: .875rem; border: 0; border-radius: 1.25rem 0 0 1.25rem; background: transparent;}

.ph-submenubtn {display: inline-grid; grid-template-columns: 1fr auto; gap: .25rem; align-items: center; width: 100%; font-size: 1.375rem; line-height: 1.272; letter-spacing: -.02em;}
.ph-submenubtn span {text-align: initial;}
.ph-submenubtn svg {grid-area: 1 / 2; align-self: center; width: 1rem; height: 1px; fill: currentcolor; transition: .15s rotate ease-out; content: '';}
.ph-submenubtn:not([aria-expanded="true"]) svg + svg {rotate: 90deg;}
.ph-submenubtn:not([aria-expanded="true"]) + .ph-flyout {display: none;}
.ph-flyout .menu h2 {font-weight: 600; font-size: .875rem; line-height: 1.14; text-transform: uppercase; letter-spacing: .05em;}
.ph-flyout .menu ul {display: grid; gap: 1rem; margin-block-start: var(--hs);}
.ph-flyout .menu a:not(:hover) {text-decoration: none;}
.ph-flyout > img {justify-self: center; border-radius: .625rem;}

.sitebtn {font-size: 1rem; line-height: 1; text-transform: uppercase;}
.sitebtn > div {display: flex;}
.sitebtn > div div + div {margin-inline-start: .25rem; padding-inline-start: .25rem; border-inline-start: 1px solid;}

.clmodal {gap: 1.875rem; width: min(500px, 100dvw - 2 * var(--hs)); padding-block-end: 5rem;}
.clmodal[open] {display: grid;}
.clmodal .closebtn {justify-self: end;}
.clmodal form {display: grid; gap: 1.875rem; justify-items: start; --mw: 22.5rem; --hs: 0px;}

.ph-floaters {display: flex; position: fixed; inset-block-end: var(--hs); z-index: 1; gap: .625rem; justify-content: end; align-items: center; width: 100%; padding-inline: max(var(--hs), ((100% - var(--mw)) / 2)); pointer-events: none;}
.ph-floaters a {box-shadow: .125rem .125rem .625rem var(--black20); pointer-events: auto;}
.ph-floaters .whatsapp {border-radius: 50%;}
.ph-floaters .whatsapp:hover {opacity: .8;}

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

	/* header */
	.ph::before {position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 2; height: 0px; background-color: var(--white); transition: .3s ease-out; content: '';}
	body:has(.topblock.hasbg) .ph-bar {transition-delay: .15s;}
	body:has(.topblock.hasbg):has(.ph-menubtn[aria-expanded="true"]) .ph-bar {color: var(--black); background-color: var(--offwhite); transition-delay: 0s;}
	.ph-menubtn {align-self: center;}
	.ph:has(.ph-menubtn[aria-expanded="true"])::before {height: 100dvh;}
	.ph:has(.ph-menubtn:not([aria-expanded="true"])) .ph-nav {display: none;}
	.ph-menubtn[aria-expanded="true"] .open, .ph-menubtn[aria-expanded="false"] .close {display: none;}
	.ph-nav {transition: .3s opacity ease-out; transition-delay: 0s;}
	.ph:has(.ph-menubtn[aria-expanded="true"]) .ph-nav {opacity: 1; transition-delay: .3s;}
	.ph-menu {width: 100%;}
	.ph-submenupair {margin-block-end: var(--hs); padding-block-end: var(--hs); border-block-end: 1px solid var(--offwhite);}
	.ph-flyout {display: grid; gap: var(--hs); margin-block-start: var(--hs);}
	.ph-flyout .menu h2 {padding-block: .5rem .875rem;}
	.ph-flyout .menu > li:not(:first-child) h2 {padding-block-start: 2rem;}
	.ph-flyout .menu a:not(:hover) {text-decoration: none;}

	/* clean-css ignore:start */
	@starting-style {

		.ph:has(.ph-menubtn[aria-expanded="true"])::before {height: 0px;}
		.ph-nav {opacity: 0 !important;}

	}
	/* clean-css ignore:end */

}

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

	/* header */
	.wrongsite .wrap {grid-template-columns: 1fr auto;}
	.ph-wrap {grid-template: var(--navbar) / var(--hs) 7.625rem 1fr var(--hs);}
	.ph-wrap > * {grid-row: 1;}
	.ph-bar {grid-column: 1 / -1;}
	.ph-menubtn {display: none;}
	.ph-nav {display: grid; grid-column: 3; grid-template: auto / 1fr auto 16.875rem auto; column-gap: .625rem; align-items: center; margin-block-start: 0;}
	body:has(.topblock.hasbg) .ph-nav {color: var(--white); --bg: var(--black20);}
	.ph-nav > * {grid-row: 1;}
	.ph-searchform {grid-column: 3;}
	.ph-menu {display: flex; gap: .375rem; width: 100%;}
	.ph-submenubtn {padding: .3125rem .625rem; border-radius: 1.875rem; font-weight: 500; font-size: 1.125rem; line-height: 1;}
	.ph-submenubtn svg {width: .5625rem;}
	.ph-submenubtn:hover {background-color: var(--white);}
	body:has(.topblock.hasbg) .ph-submenubtn:hover {background-color: var(--black20);}
	.ph-menu .ph-submenupair:nth-child(3) {margin-inline-start: auto;}
	.ph-flyout {display: grid; position: absolute; inset-inline: 0; inset-block-start: var(--navbar); grid-template-columns: 1fr auto; gap: var(--menugap); width: 100%; height: 25rem; margin-block-start: .625rem; padding: 1.875rem clamp(1.875rem, -10.506rem + 19.345vw, 5.938rem); border-radius: .625rem; color: var(--dkgray); background: var(--white); --menugap: clamp(1.875rem, -11.458rem + 20.833vw, 6.25rem);}
	.ph-flyout .menu {columns: 2; column-gap: var(--menugap);}
	.ph-flyout .menu li {line-height: 1; break-inside: avoid;}
	.ph-flyout > img {grid-column: 2; max-width: clamp(21.5rem, -17.738rem + 61.31vw, 34.375rem);}
	.sitebtn {grid-column: 4;}

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

		/* header */
		.ph-flyout .menu li {opacity: 0; transition: .3s ease-out; transition-delay: calc(sibling-index() * .1s); translate: 0 2rem;}
		.ph-submenubtn[aria-expanded="true"] ~ .ph-flyout .menu li {opacity: 1; translate: 0 0;}

		/* clean-css ignore:start */
		@starting-style {

			.ph-submenubtn[aria-expanded="true"] ~ .ph-flyout .menu li {opacity: 0; translate: 0 2rem;}

		}
		/* clean-css ignore:end */

	}

}

@supports (height: calc-size(auto, size)) {

	/* header */
	.ph-flyout {overflow-y: clip; transition: .15s ease-out; transition-behavior: allow-discrete;}
	.ph-submenubtn[aria-expanded="false"] ~ .ph-flyout {height: 0;}
	.ph-submenubtn[aria-expanded="true"] ~ .ph-flyout {height: calc-size(auto, size);}

	/* clean-css ignore:start */
	@starting-style {

		.ph-submenubtn[aria-expanded="true"] ~ .ph-flyout {height: 0;}

	}
	/* clean-css ignore:end */

}