/**
 * DJ Refresh — design tokens + base.
 *
 * The legacy style.css monolith is dequeued on this template (see includes/dj-refresh.php),
 * so this file is the ground floor: tokens, a light reset, and the shared layout primitives
 * every section builds on. Change a brand value here, not in a section file.
 *
 * Font families are deliberately NOT set here — the site's Poppins is inherited.
 */

:root {
  /* Brand */
  --djr-red: #a91d22;
  --djr-red-dark: #8f181c;
  --djr-ink: #1a1a1a;
  --djr-body: #575757;
  --djr-muted: #bebebe;

  /* Surfaces */
  --djr-white: #ffffff;
  --djr-surface: #f2f2f2;
  --djr-surface-alt: #f7f7f7;
  --djr-dark: #1a1a1a;
  --djr-dark-alt: #272727;
  --djr-line: #e4e4e4;
  /* The backdrop either side of the boxed page. */
  --djr-outside: #f0f0f0;

  /* Radii */
  --djr-radius: 6px;
  --djr-radius-lg: 14px;
  --djr-radius-pill: 999px;

  /* Layout — the Figma is a 1600px canvas with 80px gutters (1440px content). */
  --djr-max: 1600px;
  --djr-gutter: 80px;

  /* Vertical rhythm — sections open with 72px in the design. */
  --djr-section-y: 72px;

  /* Type scale (px values lifted from the Figma) */
  --djr-h1: 60px;
  --djr-h2: 36px;
  --djr-h3: 22px;
  --djr-lead: 18px;
  --djr-body-size: 16px;
  --djr-small: 14px;
}

@media (max-width: 960px) {
  :root {
    --djr-gutter: 24px;
    --djr-section-y: 48px;
  }
}

/* ---------- Boxed shell ----------
   The whole site is boxed at 1600px and centred, the way lyntec.com does it: a neutral
   backdrop behind, the page itself white. Everything (header, sections, footer) lives
   inside .djr-shell, so "full-bleed" sections bleed to the box edge, not the viewport.
   The shell is the positioning context for the overlay header. */

.djr-page {
  background: var(--djr-outside);
}

.djr-shell {
  position: relative;
  width: 100%;
  max-width: var(--djr-max);
  margin: 0 auto;
  background: var(--djr-white);
  /* clip, not hidden — hidden here would break position:sticky for anything inside. */
  overflow-x: clip;
}

/* ---------- Reset (scoped to the refresh page) ---------- */

.djr-page *,
.djr-page *::before,
.djr-page *::after {
  box-sizing: border-box;
}

/* No background here — .djr-shell paints the page white, and .djr-page (above) paints the
   backdrop either side of the box. */
.djr-page {
  margin: 0;
  /*
   * The site's own font, declared explicitly. It used to be inherited from style.css, but
   * that monolith is dequeued on this template — without this, headings kept Poppins (from
   * component rules) while body copy fell back to Helvetica. The Figma is drawn in Inter;
   * we deliberately keep the site's Poppins instead.
   */
  font-family: "Poppins", sans-serif;
  color: var(--djr-ink);
  font-size: var(--djr-body-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* :where() again — a plain `.djr-page img` rule (0,1,1) would outrank component rules like
   `.djr-audience__image { height: 100% }` (0,1,0) and collapse every filled image to auto. */
.djr-page :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* :where() keeps this reset at zero specificity — otherwise `.djr-page a` (0,1,1) would
   outrank component rules like `.djr-nav__link` (0,1,0) and force every link back to ink. */
.djr-page :where(a) {
  color: inherit;
  text-decoration: none;
}

/*
 * :where() so this stays at zero specificity. Written plainly (`.djr-page ul`, 0-1-1) it
 * outranks every component rule (0-1-0) and silently strips their padding/margin — that is
 * what was flattening the nav pill's `padding: 12px 30px` to zero.
 *
 * The list-style reset must beat the browser default but must NOT beat components either,
 * so it lives in the same zero-specificity block.
 */
.djr-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote) {
  margin: 0;
  padding: 0;
}

.djr-page :where(ul, ol) {
  list-style: none;
}

/* ---------- Layout primitives ---------- */

.djr-container {
  width: 100%;
  max-width: var(--djr-max);
  margin: 0 auto;
  padding-left: var(--djr-gutter);
  padding-right: var(--djr-gutter);
}

.djr-section {
  padding-top: var(--djr-section-y);
  padding-bottom: var(--djr-section-y);
}

/* Section heading — "Our Products", "New Arrivals", "Latest Updates" all share this. */
.djr-section__title {
  font-size: clamp(28px, 3vw, var(--djr-h2));
  font-weight: 700;
  line-height: 1.2;
  color: var(--djr-ink);
  letter-spacing: -0.01em;
}

/* Heading row with an action on the far right (New Arrivals, Latest Updates). */
.djr-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}

/* Centred heading + lead (bento, audience, reels).
   Figma: the intro block sits 30px above the content it introduces, and the lead sits
   ~12px under the heading. */
.djr-section__intro {
  text-align: center;
  margin: 0 auto 30px;
}

.djr-section__lead {
  margin-top: 12px;
  font-size: var(--djr-body-size);
  line-height: 1.5;
  color: var(--djr-body);
}

/* ---------- Buttons ---------- */

.djr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--djr-radius-pill);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.djr-btn--primary {
  background: var(--djr-red);
  color: var(--djr-white);
  border-color: var(--djr-red);
}

.djr-btn--primary:hover,
.djr-btn--primary:focus-visible {
  background: var(--djr-red-dark);
  border-color: var(--djr-red-dark);
  color: var(--djr-white);
}

.djr-btn--outline {
  background: transparent;
  color: var(--djr-ink);
  border-color: var(--djr-ink);
}

.djr-btn--outline:hover,
.djr-btn--outline:focus-visible {
  background: var(--djr-ink);
  color: var(--djr-white);
}

/* Round icon button — carousel arrows, social links. */
.djr-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--djr-line);
  background: var(--djr-white);
  color: var(--djr-ink);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.djr-iconbtn:hover,
.djr-iconbtn:focus-visible {
  background: var(--djr-red);
  border-color: var(--djr-red);
  color: var(--djr-white);
}

.djr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skeleton placeholder for lazy media ---------- */

/*
 * Applied to a media container (a fixed-size box that holds a lazily-loaded cover image or
 * video poster). Until the media loads, the container shows a soft shimmer over its solid
 * base colour instead of a flat block. The cover media paints opaquely over the top once
 * loaded, so no JS is strictly required — but js/djr-reveal.js adds `is-loaded` on the
 * media's load event to stop the animation (and free the compositor) once it's covered.
 */
@keyframes djr-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.djr-skeleton {
  background-color: var(--djr-dark-alt);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: djr-skeleton-shimmer 1.6s ease-in-out infinite;
}

.djr-skeleton.is-loaded {
  animation: none;
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  .djr-skeleton {
    animation: none;
    background-image: none;
  }
}

/* ------------------------------------------------------------------ legacy content in DJ Refresh chrome
   Migrated legacy templates (page.php, single-products.php, taxonomy/archive/search/404, campaign
   pages) keep their original .box / #masthead markup + style.css, now rendered inside .djr-shell with
   the DJ Refresh header + footer. style.css floats #main (float:left), which drops it out of the shell
   flow and collapses the footer beneath it. Neutralise that on every chrome page. */
.djr-page #main { float: none !important; width: 100% !important; display: flow-root; }