/* ==========================================================================
   1.0.1: the dedicated website pages built from the approved landing page
   designs (Commercial Lighting, Strata). Loaded only on those pages
   (page -> extra_css: inner-pages); the homepage keeps home-upgrade.css.

   1. The main website's menu and footer link columns: copied unchanged
      from home-upgrade.css.
   ========================================================================== */
.site-menu {
  display: none;
}
.site-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 44px;
  padding: 0 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.site-menu__toggle::-webkit-details-marker {
  display: none;
}
.site-menu__toggle:hover {
  border-color: var(--ink);
}
.site-menu__bars,
.site-menu__bars::before,
.site-menu__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.site-menu__bars {
  position: relative;
  flex: none;
}
.site-menu__bars::before,
.site-menu__bars::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.2s;
}
.site-menu__bars::before {
  top: -5px;
}
.site-menu__bars::after {
  top: 5px;
}
.site-menu[open] .site-menu__bars {
  background: transparent;
}
.site-menu[open] .site-menu__bars::before {
  transform: translateY(5px) rotate(45deg);
}
.site-menu[open] .site-menu__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}
.site-menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 0.25rem var(--gutter) 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 32px -24px rgba(28, 27, 25, 0.5);
}
.site-menu__panel ul {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.site-menu__panel a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.site-menu__panel li:last-child a {
  border-bottom: 0;
}
.site-menu__panel a:hover {
  color: var(--accent-dark);
}
@media (max-width: 1100px) {
  .site-menu {
    display: block;
  }
}
@media (max-width: 767px) {
  .site-menu__toggle {
    height: 40px;
    padding: 0 0.8rem;
  }
}
@media (max-width: 429px) {
  .site-header--menu .site-header__inner {
    gap: 0.75rem;
  }
  .site-header--menu .site-header__actions {
    gap: 0.5rem;
  }
  .site-header--menu .header-phone__num {
    display: none;
  }
  .site-header--menu .header-phone__short {
    display: inline;
  }
}
@media (max-width: 379px) {
  .site-menu__label {
    display: none;
  }
  .site-menu__toggle {
    padding: 0 0.7rem;
  }
}
.site-footer__link {
  color: #d6d0c6;
  font-weight: 500;
  text-decoration: none;
}
.site-footer__link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
@media (max-width: 767px) {
  .site-footer__grid--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__grid--cols .site-footer__brand,
  .site-footer__grid--cols .site-footer__contact {
    grid-column: 1 / -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__grid--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .site-footer__grid--n2 {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   2. Text paragraphs and a checklist beside a photo (photo_split -> text,
      points), which the approved 01 and 07 designs didn't use.
   ----------------------------------------------------------------------- */
.split__copy .split__text {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.08rem);
  color: var(--muted);
}
.split__copy .section-title + .split__text {
  margin-top: 1.25rem;
}
.split__copy .split__points {
  display: grid;
  gap: 0.7rem;
  max-width: 40rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.split__copy .split__points li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.5;
}
.split__copy .split__points li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.32em;
  width: 0.42rem;
  height: 0.78rem;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.split__copy .split__note {
  max-width: 40rem;
}
.split__copy .split__note + .text-link,
.split__copy .split__figures + .text-link,
.split__copy .split__points + .text-link {
  margin-top: 1.5rem;
}

/* Dark pages: a fully opaque compact header and call bar. At 97% the page
   text scrolling underneath showed through the menu. */
.design-dark {
  --hdr-solid: #151412;
}

/* --------------------------------------------------------------------------
   3. 1.0.1: what 1.1.0 put in wordpress.css, here instead so that no file the
      homepage loads changes.
   ----------------------------------------------------------------------- */
/* The hero call button's text is "Call 1300 763 122" in the page source; phones show "or call 1300 763 122". */
@media (max-width: 639px) {
  .hero .hero__call-verb { display: inline; text-transform: lowercase; }
  .hero .hero__call-verb::before { content: "or "; }
}

/* A photo caption is written once in the page source; the copy above the photo on phones is drawn from data-caption. */
.split__caption--top::after { content: attr(data-caption); }

/* Breadcrumbs above the hero eyebrow (page -> breadcrumbs). */
.lp-crumbs { margin: 0 0 1.1rem; font-size: .82rem; line-height: 1.4; }
.lp-crumbs ol { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0; padding: 0; list-style: none; }
.lp-crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); }
.lp-crumbs li + li::before { content: "/"; color: var(--ink-3, #8a8170); }
.lp-crumbs a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: .2em; }
.lp-crumbs a:hover { color: var(--accent-dark, #854f1c); }
.lp-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.lp-crumbs--light li, .lp-crumbs--light [aria-current] { color: rgba(255,255,255,.86); }
.lp-crumbs--light li + li::before { color: rgba(255,255,255,.5); }
.lp-crumbs--light a { text-decoration-color: rgba(255,255,255,.4); }
.lp-crumbs--light a:hover { color: #fff; }