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

/* rotating headline */
pg-rotatingtext .fragments {display: grid; overflow: clip;}
pg-rotatingtext .rt {grid-area: 1 / 1; height: 100%; translate: 0 100%; animation: translate-up-out .3s 1 cubic-bezier(.7, 0, .3, 1);}
pg-rotatingtext .rt:not([aria-hidden="true"]) {translate: 0 0%; animation: translate-up-in .3s 1 cubic-bezier(.7, 0, .3, 1);}

/* hub sites */
.hubsites {padding-block: var(--vs);}
.sitesgrid-filter {display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center;}
.sitesgrid-filter button {padding: .5rem 1.25rem; border: 1px solid transparent; border-radius: .5rem;}
.sitesgrid-filter button:is(:hover, [aria-pressed="true"]) {background-color: var(--offwhite);}
.sitesgrid {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--cardwidth), 100%), 1fr)); gap: 1.25rem; margin-block-start: 2.5rem; --cardwidth: 12rem;}
.sitesgrid .site {display: grid; grid-template: 1fr auto / 1fr auto; gap: 1.25rem .5rem; padding: var(--hs); border: 1px solid var(--ltorange); border-radius: .75rem;}
.sitesgrid .site img {grid-area: 1 / 2;}
.sitesgrid .sitename {place-self: start; padding: .25rem .5rem; border-radius: 1.25rem; font-size: .875rem; line-height: 1.143; background-color: var(--offwhite);}
.sitesgrid .langs {display: flex; grid-area: 2 / 1 / 3 / 3; flex-wrap: wrap; gap: .625rem 1.25rem;}
.sitesgrid .langs a:hover {text-decoration: none;}

@media (width >= 40em) { /* 640px */

	/* hub sites */
	.sitesgrid {--cardwidth: 16.875rem;}

}

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

	/* hub sites */
	.sitesgrid {gap: 1.875rem;}

}

@keyframes translate-up-in {

	0% {translate: 0 100%;}
	100% {translate: 0 0%;}

}

@keyframes translate-up-out {

	0% {translate: 0 0%;}
	100% {translate: 0 100%;}

}