/* Page-level layout overrides: centers the landing page and hides site chrome */

body {
  /* Match the rest of the site's boxed layout width (--djr-max: 1600px), not 1440. */
  max-width: 1600px !important;
  margin: 0 auto !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.25) !important;
  overflow: auto !important;
  position: inherit !important;
}

html.uk-notouch {
  background: #f2f2f2 !important;
}

.main.box {
  display: none;
}

footer#footer {
  display: none;
}

#header {
  display: none !important;
}

/* Remove margin-top the theme adds to compensate for the fixed header */
main.why-page-main {
  margin-top: 0 !important;
}

/* Match the site's container system: 1600px max with 80px gutters (--djr-max /
   --djr-gutter), giving a 1440px content column like the DJ Refresh homepage. */
.why-page-main .uk-container,
.why-page-main .uk-container-large {
  max-width: 1600px !important;
  padding-left: clamp(1rem, 5vw, 80px) !important;
  padding-right: clamp(1rem, 5vw, 80px) !important;
}

/* FAQ uses the design's 1200px content column; its inherited 80px inner gutter yields the
   ~1000px accordion width the design specifies, so it keeps that padding. */
.why-dj-faq__inner.uk-container {
  max-width: min(100% - 4rem, 1200px) !important;
}

/* Bento grid and testimonials FILL the full 1200px content column with no extra inner gutter,
   matching the design (the 200px page margin from centering in 1600 is the only gutter). Without
   this they inherit the 80px .uk-container gutter and render ~160px narrower / over-indented. */
.why-dj-featured-grid__inner.uk-container-large,
.why-page-main .why-dj-testimonials__inner.uk-container {
  max-width: min(100% - 4rem, 1200px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 639px) {
  .why-page-main .uk-container,
  .why-page-main .uk-container-large {
    max-width: min(100% - 1.35rem, 640px) !important;
  }
}

/* Scroll reveal — section CONTENT fades + rises in as the section enters the viewport.
   The reveal targets are the inner content elements (tagged .why-dj-reveal by JS), NOT the
   section box, so each section's own background is always painted — no flash of the page
   background behind a fading section. With JS off or reduced motion, everything is visible. */

@media (prefers-reduced-motion: no-preference) {
  .why-page-main .why-dj-reveal,
  .why-dj-bottom-cta .why-dj-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 640ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  .why-page-main section.is-revealed .why-dj-reveal,
  .why-dj-bottom-cta.is-revealed .why-dj-reveal {
    opacity: 1;
    transform: none;
  }
}

/* Campaign teaser: hide the default site header (this stylesheet only loads on
   the page-why-dj.php template). The hero carries its own centered white logo. */
body header.box {
  display: none !important;
}

/* This template renders its own design footer (parts/why_dj-footer.php); hide the theme's
   global footer. get_footer() still runs so wp_footer() + closing markup/scripts are output. */
body #footer {
  display: none !important;
}

/* The theme floats #main left by default; on this single full-width column template that lets
   the footer (a sibling right after <main>) wrap up beside it. Neutralize the float and clear
   the footer so it sits below the content. */
.why-page-main {
  float: none !important;
  width: 100% !important;
}

/* djr-about (reused DJ Refresh component) assumes the .djr-page border-box reset, which isn't
   present on this template. Without it, the mobile full-width CTA (width:100% + button padding,
   content-box) overflows the viewport. Re-apply border-box to the About subtree. */
.djr-about,
.djr-about *,
.djr-about *::before,
.djr-about *::after {
  box-sizing: border-box;
}

/* Minimal campaign footer (design node 659:493): a thin red bar — copyright left, legal links
   right, white text. */
.why-dj-footer {
  clear: both;
  background: var(--djr-red, #a91d22);
  color: #ffffff;
}
.why-dj-footer__inner {
  box-sizing: border-box;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px clamp(1rem, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.why-dj-footer__copyright {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  color: #ffffff;
}
.why-dj-footer__links {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.why-dj-footer__links a {
  color: rgba(255, 255, 255, 0.85);
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 160ms ease;
}
.why-dj-footer__links a:hover,
.why-dj-footer__links a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 639px) {
  .why-dj-footer__inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .why-dj-footer__links {
    gap: 20px;
  }
}

/* DJ Refresh utility topbar (parts/djr-topbar.php), rendered above the hero.
   The design shows a thin near-black strip (House of Brands left; Quick Product
   Find + language right) — not the default white --solid strip — so override to
   dark with white text. Scoped to .djr-topbar-only so the homepage header is
   untouched. */
.djr-topbar-only.djr-header {
  position: relative;
  z-index: 30;
}
/* The djr-base border-box reset is scoped to .djr-page; this topbar renders
   outside that wrapper, so .djr-container (width:100% + 80px padding) would
   overflow under the theme's default content-box sizing and clip the right-side
   items. Re-apply border-box to the topbar subtree. */
.djr-topbar-only.djr-header,
.djr-topbar-only.djr-header *,
.djr-topbar-only.djr-header *::before,
.djr-topbar-only.djr-header *::after {
  box-sizing: border-box;
}
.djr-topbar-only.djr-header .djr-topbar {
  background: var(--djr-red, #a91d22);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.djr-topbar-only.djr-header .djr-topbar__inner {
  min-height: 41px;
}
.djr-topbar-only.djr-header .djr-topbar__brands,
.djr-topbar-only.djr-header .djr-topbar__util {
  color: rgba(255, 255, 255, 0.8);
}
.djr-topbar-only.djr-header .djr-topbar__brands:hover,
.djr-topbar-only.djr-header .djr-topbar__util:hover {
  color: #ffffff;
}
.djr-topbar-only.djr-header .djr-topbar__brands-icon {
  border-color: rgba(255, 255, 255, 0.3);
}
.djr-topbar-only.djr-header .djr-topbar__divider {
  background: rgba(255, 255, 255, 0.22);
}