/* Premier Concrete - page behaviour that the design file did with its component runtime, plus the responsive rules.
 * (The design itself is styled inline; css/styles.css + css/design.css hold the design tokens, css/hover.css the hover rules.) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; }
[hidden] { display: none !important; }
button { font-family: inherit; }
a.btn, button.btn { text-decoration: none; }

/* ------------------------------------------------------------ header */
.pc-burger { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-divider); background: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-left: auto; }
.pc-burger span { display: block; width: 22px; height: 2px; background: var(--color-text); transition: transform .2s, opacity .2s; }
body.nav-open .pc-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .pc-burger span:nth-child(2) { opacity: 0; }
body.nav-open .pc-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
header > div > button:first-child { margin-right: auto; }
header img { max-width: 100%; }

@media (max-width: 1100px) {
  .pc-burger { display: flex; }
  header > div { flex-wrap: wrap !important; gap: 12px !important; }
  header > div > button:first-child { margin-right: 0 !important; }
  header nav { display: none !important; width: 100%; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; order: 3; padding-bottom: 8px; border-top: 1px solid var(--color-divider); }
  body.nav-open header nav { display: flex !important; }
  header nav > div { border-bottom: 1px solid var(--color-divider); }
  header nav > div > button { width: 100%; text-align: left; padding: 14px 0 !important; border-bottom: 0 !important; }
  body.nav-open header [data-dd] { display: block !important; position: static !important; padding: 0 0 8px 12px !important; }
  body.nav-open header [data-dd] > div { box-shadow: none !important; padding: 0 !important; }
  header [data-mega] { display: none !important; }
}

/* ------------------------------------------------------------ pages */
@media (max-width: 960px) {
  main aside { position: static !important; flex: 1 1 100% !important; max-width: none !important; }
  main h1 { font-size: clamp(34px, 9vw, 52px) !important; }
}
@media (max-width: 600px) {
  main h2 { overflow-wrap: anywhere; }
  [role="tablist"] button { flex: 1 1 auto; }
}
table { max-width: 100%; }

/* ------------------------------------------------------------ large screens (4K): the design is scaled up, not stretched */
@media (min-width: 1920px) { html { zoom: 1.25; } }
@media (min-width: 2400px) { html { zoom: 1.6; } }
@media (min-width: 3000px) { html { zoom: 2; } }
@media (min-width: 3600px) { html { zoom: 2.4; } }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------ phones / small tablets */
@media (max-width: 700px) {
  /* category page photo gallery: the thumbnails sit in a row below the big photo */
  [data-gal] { flex-direction: column-reverse !important; gap: 10px !important; }
  [data-gal] > div:first-child { flex: none !important; flex-direction: row !important; overflow-x: auto; gap: 8px !important; }
  [data-gal] > div:first-child > button { flex: 0 0 72px !important; width: 72px; }
  /* Resources: the product filter takes less room */
  main aside label { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px !important; }
  /* credit application: the steps in two columns */
  main aside nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  main aside nav > button { padding: 8px 10px !important; }
  main aside nav > button > span:last-child { font-size: 13.5px !important; line-height: 1.2; }
  /* people / photo cards: two per row */
  main section > div[style*="grid-template-columns"] { gap: 20px 14px !important; }
}
@media (max-width: 420px) {
  main h1 { font-size: clamp(30px, 9.5vw, 42px) !important; }
  .btn { padding-left: 18px; padding-right: 18px; }
}

/* ------------------------------------------------------------ title band with a photo behind it (tools/build-pages.js heroBand) */
.pc-hero, .pc-hero h1, .pc-hero p, .pc-hero a, .pc-hero button, .pc-hero > div > span, .pc-hero > div > div > span { color: #fff !important; }
.pc-hero span span { color: var(--color-accent-200) !important; }   /* the current page in the breadcrumb */
.pc-hero label { color: var(--color-text) !important; }              /* the search box of the products page keeps its white pill */
.pc-hero label svg, .pc-hero label input { color: var(--color-text) !important; }
.pc-hero [data-set] { color: #fff !important; }
.pc-hero [data-set]:not([style*="border-bottom:3px"]) { opacity: .88; }
.pc-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.pc-hero [data-set][style*="background:#fff"] { color: var(--color-accent-700) !important; opacity: 1 !important; }

/* home product list: on phones / tablets (no hover) the big photo is replaced by a small photo in every row */
.pc-hthumb { display: none; }
@media (max-width: 900px) {
  .pc-hpanel { display: none !important; }
  .pc-hthumb { display: block; flex: none; width: 76px; height: 54px; object-fit: cover; border-radius: 4px; }
  [data-hover-set] { gap: 14px !important; padding-left: 0 !important; }
  [data-hover-set] > span:nth-of-type(2) { font-size: clamp(19px, 5.2vw, 26px) !important; }
}

/* product page groups without dropdowns: the empty dropdown list is invisible for visitors (the editor adds dropdowns there) */
[data-dd-empty]:empty { display: none; }

/* "Download submittal" and the other file links with no file yet: visitors do not see a dead button; the editor shows it so a file can be attached */
a[data-pc-file][href="#"] { display: none !important; }
body.cms-editing a[data-pc-file][href="#"] { display: inline-flex !important; opacity: .75; outline: 2px dashed var(--color-accent); outline-offset: 3px; }
img[data-cms-type="image"]:not([src]), img[data-cms-type="image"][src=""] { visibility: hidden; }
body.cms-editing img[data-cms-type="image"]:not([src]), body.cms-editing img[data-cms-type="image"][src=""] { visibility: visible; outline: 2px dashed var(--color-accent); outline-offset: -2px; font-size: 13px; color: #6b7a6b; }
a[data-pc-file] svg { display: none !important; }   /* the "Resources" / download buttons of the product pages have no download icon */
header [data-mega]:not([hidden]) { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; }   /* the products menu scrolls when it is taller than the window */