/*
 * Site frame and template styles, moved from the makemake page templates (page--*.php, gradient-*.php), plus the
 * section decorations shared by several pages (.deco--*). Template rules are scoped by the page--<type> body class.
 */

/* === Page frame === */

html, body { min-height: 100%; }
body { position: relative; min-height: 100vh; background-color: white; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; word-wrap: normal !important; }
.screen-reader-text:focus { z-index: 100000; top: 0.3125rem; left: 0.3125rem; width: auto; height: auto; padding: 1rem 1.5rem; clip: auto; clip-path: none; background-color: white; color: var(--color-blue-dark); font: 700 0.875rem/1 var(--font-body); text-decoration: none; box-shadow: var(--box-shadow-0); }

/* The backdrop covers the page and clips the gradient, as page-container did */
.page-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Background gradient (html/gradient-1.html, html/gradient-2.html): a fixed-scale 10000px-wide SVG centered on the page
   and stretched to --g-scale times the page height */
.page-gradient { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% * var(--g-scale, 1)); overflow: hidden; pointer-events: none; }
.page-gradient svg { position: absolute; top: 0; left: 50%; width: 10000px; height: 100%; transform: translateX(-50%); }
.page-gradient .mobile { display: none; }
.page-gradient::after { content: ""; position: absolute; inset: 0; background: url("../img/noise.png") 0 0 / 6.25rem 6.25rem; mix-blend-mode: multiply; opacity: 0.04; }
@media (width < 40rem)
{
	.page-gradient .desktop { display: none; }
	.page-gradient .mobile { display: block; }
}

.grid-pattern { position: absolute; top: 0; height: 50rem; width: auto; max-width: none; pointer-events: none; }
.grid-pattern--left { left: 0; }
.grid-pattern--right { right: 0; mix-blend-mode: overlay; }
.page--homepage .grid-pattern { top: 50rem; }

/* === Containers (DRG Section roles) === */

.e-con.drg-gap--columns { gap: var(--gap-between-columns); }

/* Inset card (Privacy): a white card around the sections inside it */
.drg-inset.substrate--width--narrow { max-width: min(100%, var(--width-substrate-narrow)); }
.drg-inset.substrate--width--medium { max-width: min(100%, var(--width-substrate-medium)); }
.drg-inset.substrate--width--wide { max-width: min(100%, var(--width-substrate-wide)); }
.drg-inset.substrate--width--max { max-width: 100%; }
.drg-inset-card { border-radius: var(--size-s); box-shadow: var(--box-shadow-0); padding: 3rem 3rem 0.5rem 3rem; }
@media (width < 78rem) { .drg-inset-card { padding: 1.5rem 1rem 0.5rem 1rem; } }

/* === Templates === */

@media (width >= 51rem) { .page--homepage .section--hero .hero-copy p { font-weight: 700; } }

.page--solutions footer .copyright-text, .page--solutions footer .privacy-link { color: var(--color-blue-dark); }
.page--solutions footer .divider { background-color: var(--color-blue-dark); }

.page--category .section--hero .hero-copy h1 { margin-bottom: var(--size-s); }
.page--category .section--hero .hero-copy p { font-weight: 700; }
.page--category footer .copyright-text, .page--category footer .privacy-link { color: var(--color-blue-dark); }
.page--category footer .divider { background-color: var(--color-blue-dark); }
@media (width < 51rem)
{
	.page--category .section--hero .hero-content { bottom: 2.5rem; }
	.page--category .section--hero .hero-copy h1 { margin-bottom: var(--size-m); }
	.page--category .section--hero .hero-copy p { font-weight: 600; }
}

.page--product main { padding-top: 7rem; }
@media (width < 51rem) { .page--product main { padding-top: 5rem; } }

/* === Shared decorations (from the drg-core decoration posts; ^ became the container) === */

/* Category pages: the product cards row */
.e-con.deco--category-products { padding: 5rem 0; }
.e-con.deco--category-products:has(.cards--carousel) { padding-bottom: 2.5rem; }
.e-con.deco--category-products > .substrate { max-width: 90rem; padding: 0 4rem; }
.e-con.deco--category-products .inner { gap: 1.5rem !important; }
@media (width >= 64rem) { .e-con.deco--category-products:not(:has(.cards--carousel)) .inner { grid-template-columns: repeat(auto-fit, calc((100% - 3 * 1.5rem) / 4)) !important; justify-content: center; } }
.e-con.deco--category-products .card { justify-content: flex-start !important; padding: 1rem; }
.e-con.deco--category-products .card--hero img { display: block; width: 100%; height: 16.25rem; object-fit: contain; }
.e-con.deco--category-products .card--text { margin-top: 1rem; }
.e-con.deco--category-products .card--text h3 { margin-bottom: 0.5rem; text-transform: none; }
.e-con.deco--category-products .card--text a.link--category { display: inline; }
.e-con.deco--category-products .card--text a.link--category::after { display: inline-block; vertical-align: top; margin: calc((1lh - 2rem) / 2) 0; }
.e-con.deco--category-products .card--cta { display: none; }
@media (width < 64rem) { .e-con.deco--category-products .inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (width < 51rem)
{
	.e-con.deco--category-products, .e-con.deco--category-products:has(.cards--carousel) { padding: 2rem 0; }
	.e-con.deco--category-products > .substrate { padding: 0 1.5rem; }
	.e-con.deco--category-products .inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
	.e-con.deco--category-products .card { margin-left: -1rem; margin-right: -1rem; }
	.e-con.deco--category-products .card--hero img { height: 20rem; object-fit: contain; }
	.e-con.deco--category-products .card--text a.link--category::after { width: 1.5rem; height: 1.5rem; margin: calc((1lh - 1.5rem) / 2) 0; background-image: url("../img/icon-arrow-right.svg"); }
}

/* Category pages: the "Get started" banner (Portable Sanitation, Service Vehicles) */
.e-con.deco--category-banner { padding: 3rem 0; }
.e-con.deco--category-banner .panel { position: relative; isolation: isolate; display: flex; align-items: center; gap: 7.5rem; padding: 2.5rem 4rem; border-radius: 1rem; box-shadow: var(--box-shadow-1); background: linear-gradient(90deg, #094288 0%, #1260b7 47.213%, #166ecc 74.049%, #2884dd 100%); }
.e-con.deco--category-banner .panel::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: url("../img/footer-noise.png") 0 0 / 6.25rem 6.25rem; mix-blend-mode: overlay; opacity: 0.08; pointer-events: none; }
.e-con.deco--category-banner .panel > .elementor-widget-drg-editor { flex: 1 0 0; }
.e-con.deco--category-banner .pane--editor h3 { margin-bottom: 1rem; }
.e-con.deco--category-banner .pane--editor sup { font-size: 0.645em; line-height: 0; }
.e-con.deco--category-banner .button--primary { margin: 0; white-space: nowrap; }
@media (width < 51rem)
{
	.e-con.deco--category-banner { padding: 1.5rem 0; }
	.e-con.deco--category-banner .panel { flex-direction: column; align-items: stretch; gap: 2rem; padding: 1.5rem; }
	.e-con.deco--category-banner .button--primary { width: 100%; }
}

/* Category pages: the three highlights with icons */
.e-con.deco--category-icons { padding: 4rem 0; }
.e-con.deco--category-icons .pane--editor h2 { margin: 0; }
.e-con.deco--category-icons .pane--pancake { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-top: 4rem; }
.e-con.deco--category-icons .pane--pancake > div { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin: 0; padding: 0; }
.e-con.deco--category-icons .pane--pancake img { display: block; width: 2.25rem; height: 2.25rem; }
.e-con.deco--category-icons .pane--pancake .heading { margin-bottom: 0.5rem; font-size: var(--fs--h5--font-size--desktop); font-weight: 700; line-height: 1.3; letter-spacing: -0.015rem; }
@media (width < 64rem) { .e-con.deco--category-icons .pane--pancake { grid-template-columns: 1fr; gap: 2rem; } }
@media (width < 51rem)
{
	.e-con.deco--category-icons { padding: 2rem 0; }
	.e-con.deco--category-icons .pane--pancake { margin-top: 2rem; }
	.e-con.deco--category-icons .pane--pancake > div { gap: 1.5rem; }
	.e-con.deco--category-icons .pane--pancake .heading { font-size: var(--fs--h5--font-size); letter-spacing: -0.01375rem; }
	.e-con.deco--category-icons .pane--pancake .description { font-size: 0.875rem; }
}

/* Category pages: the testimonial */
.e-con.deco--category-quote { padding: 3rem 0; }
.e-con.deco--category-quote .panel { background-color: white !important; padding: 2.5rem 2rem !important; box-shadow: var(--box-shadow-0) !important; }
.e-con.deco--category-quote .panel > div { padding: 0 !important; }
@media (width < 51rem)
{
	.e-con.deco--category-quote { padding: 2rem 0; }
	.e-con.deco--category-quote .panel { padding: 1.5rem 1rem !important; box-shadow: var(--box-shadow-1) !important; }
}

body.error404 .page-header { padding-top: 4rem; text-align: center; }
body.error404 .page-header .entry-title { text-align: center; }
body.error404 .page-content { text-align: center; }
body.error404 .page-content p { text-align: center; }