/**
 * Jedi-Robe dark-commerce core and global shell.
 *
 * Migration-safe extraction from the canonical Jedi-Robe dark-commerce
 * stylesheet. Rule order and declarations are preserved for staging review.
 *
 * @package Jedi_Theme
 * @since   2026-08-25
 */

/**
 * Jedi-Robe dark site system and WooCommerce catalogue.
 *
 * Provides the shared dark shell used by Shoptimizer, Elementor and
 * WooCommerce pages. Commerce-specific catalogue rules remain scoped to
 * the jr-dark-commerce body class, while shared site components support
 * jr-dark-site and jr-dark-elementor as the theme architecture expands.
 *
 * @package Jedi_Theme
 */

/* ========================================================================== 
   Shared design tokens
   ========================================================================== */

/**
 * Measurement policy.
 *
 * - rem: component spacing, dimensions, radii, shadows and movement
 * - px: one-pixel borders, outlines, media breakpoints and star texture maps
 * - %, vw and clamp(): fluid layout and responsive positioning
 * - em: typography-relative letter spacing
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce {
  --jr-container: 100rem;
  --jr-gutter: clamp(2rem, 4vw, 5rem);

  --jr-bg: #05070b;
  --jr-bg-deep: #020407;
  --jr-surface: #0f1620;
  --jr-surface-raised: #151e2b;
  --jr-surface-hover: #172230;
  --jr-image-bg: #f4f2ec;

  --jr-text: #fff;
  --jr-text-soft: #fff;
  --jr-text-muted: #aeaeae;

  --jr-border: rgba(152, 169, 192, 0.2);
  --jr-border-strong: rgba(45, 166, 83, 0.34);

  /*
   * Green equivalents of the approved green hierarchy.
   *
   * Existing --jr-green aliases are retained so every selector, gradient,
   * border, shadow and interaction behaves exactly like the approved file.
   */
  --jr-green-dark: #2da653;
  --jr-green: #2da653;
  --jr-green-light: #45d96b;
  --jr-green-bright: #b8f6c3;

  --jr-blue: #6fcbff;
  --jr-blue-light: #a9e1ff;

  --jr-success: #55b979;
  --jr-warning: #e2a447;
  --jr-danger: #e85b5b;

  background: var(--jr-bg);
  color: var(--jr-text);
  color-scheme: dark;

  /**
  * Shared editorial page layout tokens.
  *
  * Defines the canonical horizontal gutter and vertical section rhythm used
  * by reusable editorial page components.
  *
  * @package Jedi_Theme_Dark
  * @subpackage Shared_Components
  */
  --jr-page-gutter: clamp(1rem, 3vw, 2.5rem);
  --jr-page-section-space: clamp(1.5rem, 4vw, 3.5rem);

  --jr-body-font-size: 17px;
}

body.jr-dark-commerce *,
body.jr-dark-commerce *::before,
body.jr-dark-commerce *::after {
  box-sizing: border-box;
}

body.jr-dark-commerce .entry-content,
body.jr-dark-commerce .site {
  font-size: var(--jr-body-font-size);
}

/* ========================================================================== 
   Shared galactic site canvas
   ========================================================================== */

/**
 * Continue the dark visual system through the complete site canvas.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce #page,
body.jr-dark-commerce .site-content,
body.jr-dark-commerce .content-area,
body.jr-dark-commerce #primary {
  background: transparent;
}

body.jr-dark-commerce .content-area,
body.jr-dark-commerce #primary {
  width: 100%;
}

body.jr-dark-commerce .site-content {
  position: relative;
  isolation: isolate;
  overflow: clip;

  background:
    linear-gradient(
      180deg,
      #020407 0,
      rgba(2, 4, 7, 0.88) 1.5rem,
      rgba(2, 4, 7, 0.46) 4rem,
      transparent 8rem
    ),
    radial-gradient(
      circle at 12% 4%,
      rgba(45, 166, 83, 0.13),
      transparent 30rem
    ),
    radial-gradient(
      circle at 88% 10%,
      rgba(77, 161, 222, 0.13),
      transparent 34rem
    ),
    radial-gradient(
      circle at 52% 48%,
      rgba(40, 82, 130, 0.055),
      transparent 42rem
    ),
    linear-gradient(
      180deg,
      #080b12 0%,
      #04070c 25%,
      #03060a 70%,
      #06080d 100%
    ) !important;

  color: var(--jr-text);
}

/**
 * Disable the retired full-height star and meteor pseudo-elements.
 *
 * The active animated sky is rendered by the separate .jr-meteor-sky
 * component, so these legacy layers must not be generated.
 *
 * @package Jedi_Theme
 */
body.jr-dark-commerce .site-content::before,
body.jr-dark-commerce .site-content::after,
body.jr-dark-commerce .woocommerce-products-header::after,
body.jr-dark-commerce .archive-header::after,
body.jr-dark-commerce .term-description::after,
body.jr-dark-commerce .jedi-category-hero::after,
body.jr-dark-commerce .jr-category-hero::after {
  content: none !important;
  animation: none !important;
}

body.jr-dark-commerce .site-content > * {
  position: relative;
  z-index: 1;
}

body.jr-dark-commerce .site-content > .col-full,
body.jr-dark-commerce .site-content .col-full {
  margin-inline: auto;
  background: transparent !important;
}

/**
 * Allow Elementor pages to control their own full-width canvas.
 *
 * Shoptimizer shell containers remain constrained in the header and footer,
 * while the main Elementor document can stretch edge to edge. Individual
 * Elementor containers still control their own content width in the editor.
 *
 * @package Jedi_Theme
 */
body.elementor-page.jr-dark-commerce
  .site-content > .col-full,
body.elementor-page.jr-dark-commerce
  .site-content .content-area,
body.elementor-page.jr-dark-commerce
  .site-content #primary,
body.elementor-page.jr-dark-commerce
  .site-content .site-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.elementor-page.jr-dark-commerce
  .site-content .elementor {
  width: 100%;
}


/* ========================================================================== 
   Shared editorial page heading and breadcrumb
   ========================================================================== */

/**
 * Provide one canonical breadcrumb and page-title system for dark pages.
 *
 * Individual page stylesheets must not redefine archive-header spacing,
 * breadcrumb presentation or the primary entry title. Assigning the
 * `jr-dark-commerce` body class activates this shared page-heading treatment.
 *
 * @package Jedi_Theme_Dark
 */
body.jr-dark-commerce .shoptimizer-archive {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.jr-dark-commerce .archive-header {
  position: relative;
  margin: 0 0 1.5rem;
}


body.jr-dark-commerce.page-template-default:not(.woocommerce-page) .entry-header {
  margin-bottom: 0;
}

body.jr-dark-commerce .entry-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  text-align: left;
}

body.jr-dark-commerce.wp-singular .entry-header {
    padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

/**
 * Reuse the restrained orbital circle from the approved About-page concept.
 *
 * The circle is decorative and remains behind the heading at every viewport.
 *
 * @package Jedi_Theme_Dark
 */
body.jr-dark-commerce .content-area > .entry-header::after {
  position: absolute;
  top: 50%;
  right: -4rem;
  z-index: 0;
  width: clamp(12rem, 24vw, 30rem);
  aspect-ratio: 1;
  border: 1px solid rgba(111, 203, 255, 0.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgba(111, 203, 255, 0.018),
    0 0 0 7rem rgba(45, 166, 83, 0.012);
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}

body.jr-dark-commerce .entry-title,
body.jr-dark-commerce h1.elementor-heading-title,
body.jr-dark-commerce h1.page-title {
  color: var(--jr-text);
  position: relative;
  z-index: 1;
  margin: 0;
  /* max-width: 80%; */
  font-weight: 780;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow:
    0 0 1.5rem rgba(255, 255, 255, 0.035),
    0 0 3rem rgba(111, 203, 255, 0.05);
}

body.jr-dark-commerce .jr-faq-heading h1.elementor-heading-title {
  max-width: 100%;
}

body.jr-dark-commerce h1.jr-category-title {
  max-width: 19ch;
}

body.jr-dark-commerce .entry-title::after,
body.jr-dark-commerce h1.page-title::after {
  display: block;
  width: clamp(5rem, 12vw, 9rem);
  height: 2px;
  margin-top: 1.5rem;
  background: linear-gradient(90deg, var(--jr-green-light), transparent);
  box-shadow: 0 0 1.1rem rgba(45, 166, 83, 0.28);
  content: "";
}

body.jr-dark-commerce .jr-hero-title h1.elementor-heading-title,
body.jr-dark-commerce h1.page-title {
  margin-bottom: 1.25rem;
}

@media (max-width: 620px) {
  body.jr-dark-commerce .archive-header {
    margin-bottom: 1rem;
  }

  body.jr-dark-commerce .entry-header {
    padding-bottom: 2rem;
  }

  body.jr-dark-commerce .entry-header::after {
    right: -8rem;
    width: 17rem;
  }

  body.jr-dark-commerce .entry-title {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }

  body.jr-dark-commerce .entry-title,
  body.jr-dark-commerce h1.elementor-heading-title,
  body.jr-dark-commerce h1.page-title {
    max-width: 100%;
  }
}

/* ========================================================================== 
   WooCommerce archive heading and toolbar
   ========================================================================== */

body:is(.jr-dark-commerce) .woocommerce-breadcrumb,
body:is(.jr-dark-commerce) .woocommerce-breadcrumb .breadcrumb-separator {
  color: var(--jr-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

body:is(.jr-dark-commerce) .woocommerce-breadcrumb a {
  color: var(--jr-text);
}

body:is(.jr-dark-commerce) .woocommerce-breadcrumb a:hover {
  color: var(--jr-text);
  text-decoration: underline;
}

body.jr-dark-commerce .reviews-stats strong {
  color: var(--jr-text);
}

body.jr-dark-commerce .jr-category-hero p {
  color: var(--jr-text-soft);
}

body.jr-dark-commerce .reviews-stats span {
  color: var(--jr-text);
}


body.jr-dark-commerce .jr-category-hero .jr-category-hero__image {
    max-width: 42.25rem;
}

/**
 * Add cinematic depth and a secondary shooting star to archive hero areas.
 *
 * These selectors support the custom Jedi-Robe category hero and common
 * WooCommerce archive-header structures without changing their HTML.
 *
 * @package Jedi_Theme
 */

body.jr-dark-commerce .woocommerce-products-header,
body.jr-dark-commerce:not(.jr-dark-commerce) .archive-header,
body.jr-dark-commerce .term-description,
body.jr-dark-commerce .jedi-category-hero,
body.jr-dark-commerce .jr-category-hero {
  position: relative;
  isolation: isolate;
  margin: 0 0 1.875rem;
}


body.jr-dark-commerce .woocommerce-result-count,
body.jr-dark-commerce .shoptimizer-sorting,
body.jr-dark-commerce .shoptimizer-sorting p,
body.jr-dark-commerce .woocommerce-products-header__description {
  color: var(--jr-text);
}

body.jr-dark-commerce .woocommerce-ordering select,
body.jr-dark-commerce .shoptimizer-sorting select {
  min-height: 2.75rem;
  padding: 0.65rem 2.75rem 0.65rem 1rem;
  border: 1px solid var(--jr-border) !important;
  border-radius: 0.1875rem;
  background-color: var(--jr-surface-raised) !important;
  color: var(--jr-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 0.65rem 1.5rem rgba(0, 0, 0, 0.16);
}

body.jr-dark-commerce .woocommerce-ordering select:hover,
body.jr-dark-commerce .shoptimizer-sorting select:hover {
  border-color: rgba(45, 166, 83, 0.42) !important;
}

body.jr-dark-commerce .woocommerce-ordering select:focus-visible,
body.jr-dark-commerce .shoptimizer-sorting select:focus-visible {
  border-color: var(--jr-green) !important;
  outline: 2px solid rgba(45, 166, 83, 0.2);
  outline-offset: 2px;
}