/* Only what theme.json cannot express. */

html { scroll-behavior: smooth; }
body { font-variant-numeric: lining-nums; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--red); outline-offset: 2px; }
img { height: auto; max-width: 100%; }

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

.cco-full, .cco-full .wp-block-post-content { margin-block: 0; }
.cco-full .wp-block-post-content > * { margin-block: 0; }
header.wp-block-template-part, footer.wp-block-template-part { margin-block: 0; }
main.wp-block-group { margin-block-start: 0; }

/* Header */
.cco-header { box-shadow: 0 0 40px rgb(0 0 0 / 14%); gap: 1.5rem; padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); position: relative; z-index: 10; }
.cco-header__logo { flex: none; }
.cco-header__logo img { display: block; }
.cco-header__nav { color: #595959; flex: 1 1 auto; }
/* Core forces nav links to color: inherit at (0,3,0) specificity, so color the item and let the link inherit. */
.cco-header__nav .wp-block-navigation-item:hover,
.cco-header__nav button:hover,
.cco-header__nav .current-menu-item { color: var(--wp--preset--color--green); }
.cco-header__nav a:hover { text-decoration: none; }
.cco-header__tools { align-items: center; flex: none; gap: 1rem; }
.cco-header__tools .wp-block-search { margin: 0; }
.cco-header__tools .wp-block-search__inside-wrapper { align-items: center; display: flex; }
.cco-header__tools .wp-block-search__button { background: none; color: #595959; padding: 0.25rem; }
.cco-header__tools .wp-block-search__input { border: 1px solid #ccc; min-width: 12rem; padding: 0.5rem; }
.cco-header__nav .wp-block-navigation__submenu-container { background: #1f1f1f !important; border: 0 !important; color: #ddd !important; padding: 0.5rem 0; }
.cco-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover { color: #fff; }

/* Salient's menu collapsed at 1000px. Core's breakpoint is 600px, too narrow for 11 links. */
@media (max-width: 1099px) {
	.cco-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.cco-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.cco-header__tools { order: 2; }
	.cco-header__nav { flex: none; order: 3; }
}
.cco-header__nav .is-menu-open { font-size: 1rem; padding: 1.5rem; }
.cco-header__nav .is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; color: inherit !important; }

/* Overlay is a drawer from the right, only as wide as its links. */
.cco-header__nav .wp-block-navigation__responsive-container.is-menu-open { box-shadow: 0 0 40px rgb(0 0 0 / 25%); left: auto; max-width: 100%; width: max-content; }

/* Core hides the arrow and forces submenus open in the overlay. Restore the arrow and collapse
   the submenu until assets/js/navigation.js expands it. The arrow sits over the toggle's padding so taps reach it. */
.cco-header__nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-submenu__toggle { padding-right: 1.25rem; }
.cco-header__nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon { align-items: center; display: flex; height: 1lh; line-height: inherit; margin: 0; pointer-events: none; position: absolute; right: 0; top: 0; }
.cco-header__nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon svg { height: 0.75rem; margin: 0; transform: none; transition: transform 0.15s; width: 0.75rem; }
.cco-header__nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child.cco-is-expanded > .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }
.cco-header__nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container { min-width: 0; padding-inline: 0 1.25rem; }
.cco-header__nav .is-menu-open .wp-block-navigation__responsive-container-content .has-child:not(.cco-is-expanded) > .wp-block-navigation__submenu-container { display: none; }

/* Home hero */
.cco-hero { min-height: calc(100svh - 116px); }
.cco-hero .wp-block-cover__inner-container { text-align: center; }
.cco-hero .wp-block-cover__inner-container > * { max-width: none; }
.cco-hero a { color: #fff; }
.cco-hero h1 { font-size: var(--wp--preset--font-size--hero); font-weight: 700; line-height: 1.15; margin-block: 0; text-transform: uppercase; }
.cco-hero__subtitle { font-size: var(--wp--preset--font-size--large); margin-block: 0.25rem 2rem; text-transform: uppercase; }
.cco-hero__arrow { display: inline-block; font-size: 1.5rem; line-height: 1; text-decoration: none; }

/* Home category grid: square tiles with a link over the whole tile */
.cco-brands { --cco-tile-ease: cubic-bezier(0.15, 0.75, 0.5, 1); display: grid !important; gap: 0; grid-template-columns: repeat(3, 1fr); }
.cco-brands > .wp-block-cover { aspect-ratio: 1; margin: 0; min-height: 0; overflow: hidden; position: relative; }
.cco-brands .wp-block-cover__image-background { transition: transform 0.45s var(--cco-tile-ease); }
.cco-brands .wp-block-cover__background { transition: opacity 0.45s var(--cco-tile-ease); }
.cco-brands > .wp-block-cover:hover .wp-block-cover__image-background,
.cco-brands > .wp-block-cover:focus-within .wp-block-cover__image-background { transform: scale(1.1); }
.cco-brands > .wp-block-cover:hover .wp-block-cover__background,
.cco-brands > .wp-block-cover:focus-within .wp-block-cover__background { opacity: 0.4; }
.cco-brands h2 { color: inherit; font-family: var(--wp--preset--font-family--open-sans); font-size: 1.5rem; font-weight: 600; margin: 0; text-align: center; transition: transform 0.45s var(--cco-tile-ease); }
.cco-brands h2 a { color: #fff; text-decoration: none; }
/* Oversized and clipped by the tile, so the whole tile stays clickable while the title moves. */
.cco-brands h2 a::after { content: ""; inset: -100vmax; position: absolute; z-index: 2; }
.cco-brands__cta { color: #fff; font-family: var(--wp--preset--font-family--open-sans); margin: 0.25rem 0 0; opacity: 0; text-align: center; transition: opacity 0.25s var(--cco-tile-ease); }
.cco-brands > .wp-block-cover:hover .cco-brands__cta,
.cco-brands > .wp-block-cover:focus-within .cco-brands__cta { opacity: 1; transition-duration: 0.5s; }
@media (hover: hover) {
	.cco-brands h2 { transform: translateY(15px); }
	.cco-brands > .wp-block-cover:hover h2,
	.cco-brands > .wp-block-cover:focus-within h2 { transform: none; }
}
@media (hover: none) { .cco-brands__cta { opacity: 1; } }
/* Reduce Motion keeps the fades but drops the zoom and slide. */
@media (prefers-reduced-motion: reduce) {
	.cco-brands .wp-block-cover__image-background,
	.cco-brands > .wp-block-cover:hover .wp-block-cover__image-background,
	.cco-brands > .wp-block-cover:focus-within .wp-block-cover__image-background,
	.cco-brands h2 { transform: none; }
}
@media (max-width: 781px) { .cco-brands { grid-template-columns: 1fr; } }
@media (min-width: 782px) and (max-width: 1099px) { .cco-brands { grid-template-columns: repeat(2, 1fr); } }

/* Split panels */
.cco-split { min-height: 500px; }
.cco-split .wp-block-media-text__content { padding: clamp(2rem, 10%, 9rem); }
.cco-split .wp-block-media-text__media { min-height: 500px; }
@media (max-width: 600px) { .cco-split .wp-block-media-text__media { min-height: 100vw; } }
.cco-panel { margin: 0 !important; padding: clamp(3rem, 10%, 9rem) clamp(1.5rem, 10%, 9rem) !important; text-align: center; }
.cco-panel a { color: inherit; }
.cco-panels { gap: 0 !important; margin-block: 0 !important; }
.cco-banner { display: block; margin: 0 !important; }
.cco-banner img { display: block; width: 100%; }

/* Footer */
.cco-footer__title { color: #5c5c5c; font-family: var(--wp--preset--font-family--open-sans); font-size: 0.9375rem; font-weight: 600; margin-block-end: 1rem; }
.cco-footer a { text-decoration: underline; }
.cco-footer__about { max-width: 19rem; }
.cco-footer .wp-block-search__inside-wrapper { background: #fff; border: 0; padding: 0.25rem; }
.cco-footer .wp-block-search__input { background: transparent; border: 0; padding-inline: 0.5rem; }
.cco-footer .wp-block-search__button { background: transparent; color: var(--wp--preset--color--green); padding: 0.25rem 0.5rem; }

.cco-hero h1 { color: #fff; }
/* .cco-brands > .wp-block-cover:nth-child(8) { aspect-ratio: auto; grid-column: span 2; } */
@media (max-width: 1099px) { .cco-brands > .wp-block-cover:nth-child(8) { aspect-ratio: 1; grid-column: auto; } }

/* Keep the square artwork whole: several images carry text and logos. */
@media (min-width: 601px) { .cco-split { min-height: min(50vw, 760px); } }

/* Long email addresses must wrap on phones. */
h1, h2, h3, p, li { overflow-wrap: break-word; }

/* Keeps tile labels readable over pale artwork such as the Unilite logo. */
.cco-brands h2, .cco-brands__cta { text-shadow: 0 1px 6px rgb(0 0 0 / 75%); }