/* =====================================================================
   Eralux Website System — Master Design System (theme layer)
   =====================================================================
   Single source of truth for the whole plugin:
     - font family, weights, sizes, line-height, letter-spacing
     - theme colors (with -rgb helpers for alpha usage)
     - page paddings (top / bottom / left-right) for desktop and mobile
     - shared layout tokens (controls, radius, shadow, transition)
     - the single desktop/mobile boundary: 900px
       (also stored as --eralux-mobile-breakpoint; CSS media queries cannot
       read custom properties, so every @media block must stay in sync with
       that variable by hand)
     - shared page components (page heading, section head, buttons, reveal)

   Every module stylesheet aliases its local variables to these tokens.
   Change a value here and every page follows.
   ===================================================================== */

:root {
  /* ---- Typography ------------------------------------------------ */
  --ews-font: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ews-weight-light: 300;
  --ews-weight-regular: 400;
  --ews-weight-medium: 500;
  --ews-weight-semibold: 600;
  --ews-weight-bold: 700;

  --ews-body-size: clamp(16px, 1.2vw, 18px);
  --ews-body-leading: 1.65;
  --ews-body-tracking: 0;

  /* ---- Theme colors ---------------------------------------------- */
  --ews-ink: #0d0d0c;
  /* primary text                      */
  --ews-ink-rgb: 13, 13, 12;
  /* for rgba(var(--ews-ink-rgb), a)   */
  --ews-contrast-ink: #ffffff;
  /* text on dark / accent surfaces    */
  --ews-contrast-ink-rgb: 255, 255, 255;

  --ews-paper: #f7f5f1;
  /* page background                   */
  --ews-paper-rgb: 247, 245, 241;
  --ews-paper-2: #efebe4;
  /* secondary surface                 */
  --ews-card: #fbfaf7;
  /* raised card surface               */
  --ews-card-rgb: 251, 250, 247;

  --ews-dark: #0a0908;
  /* dark hero / media sections        */
  --ews-dark-rgb: 8, 7, 5;

  --ews-muted: #8b877e;
  /* muted labels                      */
  --ews-muted-ink: #66625b;
  /* muted body copy (darker)          */

  --ews-line: rgba(13, 13, 12, 0.18);
  /* hairline borders           */
  --ews-line-strong: #d8d2c8;
  /* solid borders / dividers   */

  --ews-accent: #00aae7;
  /* Eralux blue                       */
  --ews-accent-rgb: 0, 170, 231;
  --ews-accent-dark: #007cab;
  /* hover / pressed accent            */
  --ews-accent-soft: #eaf8fd;
  /* light accent tint surface         */

  /* Lightened accent, for hover on dark surfaces where --ews-accent-dark
	   would recede instead of lift. */
  --ews-accent-light: #33bced;

  /* ---- Extended neutrals ------------------------------------------
	   Tones the modules had been keeping as private literals. They live
	   here now so every colour on the site resolves to this file. */
  --ews-ink-lifted: #34322e;
  /* near-ink meta text, a step off --ews-ink   */
  --ews-glow: #1c1c1c;
  /* radial highlight inside dark media panels */
  --ews-field-line: #aaa49a;
  /* form field underline                       */
  --ews-placeholder-tone: #bdb5aa;
  /* card hover border tone                     */

  /* ---- Cool grey-blue family --------------------------------------
	   The header dropdown palette. Deliberately cooler than the warm
	   neutrals above, so it reads as a separate surface. */
  --ews-cool-line: #dbe3e7;
  --ews-cool-ink: #182126;
  --ews-cool-ink-rgb: 24, 33, 38;
  /* for the homepage's frosted-glass tints */
  --ews-cool-muted: #65747c;
  --ews-cool-panel: #f4f7f8;
  --ews-cool-media: #dce5e8;
  --ews-cool-tint: #eef3f5;

  /* ---- Decorative placeholder gradients ---------------------------
	   Stand-ins for the dark architectural photography in empty image
	   slots. Held as whole gradients rather than as loose stops: each
	   ramp needs its own internal contrast, which collapsing the stops
	   onto --ews-ink and --ews-dark would flatten. */
  --ews-placeholder-grad: linear-gradient(140deg, #26251f 0%, #17160f 55%, #0b0a07 100%);
  --ews-placeholder-grad-media: linear-gradient(140deg, #26251f 0%, #17160f 60%, #0b0a07 100%);
  --ews-placeholder-grad-showcase: linear-gradient(140deg, #221f1a 0%, #151310 55%, #0a0908 100%);
  --ews-placeholder-grad-light: linear-gradient(140deg, #dedad2 0%, #cfcabf 46%, #c3bdb1 100%);
  --ews-placeholder-grad-1: linear-gradient(135deg, #2b2a24 0%, #1a1912 55%, #0d0c08 100%);
  --ews-placeholder-grad-2: linear-gradient(140deg, #242119 0%, #151209 60%, #090805 100%);
  --ews-placeholder-grad-3: linear-gradient(150deg, #221f19 0%, #14120c 60%, #0a0906 100%);

  --ews-success: #65a56f;
  --ews-success-soft: #eef8ef;
  --ews-error: #c86b64;
  --ews-error-soft: #fff1f0;

  /* ---- Page padding (desktop) ------------------------------------ */
  --eralux-page-padding-horizontal: clamp(20px, 5vw, 80px);
  /* the single horizontal padding of the main container on every page
	   except the homepage */
  --ews-gutter: var(--eralux-page-padding-horizontal);
  /* legacy alias kept so existing module tokens keep working */
  --ews-page-pad-top: clamp(34px, 4vw, 60px);
  /* top of page content */
  --ews-page-pad-bottom: clamp(80px, 9vw, 140px);
  /* bottom of page   */

  /* ---- Page heading (every page except the homepage) -------------- */
  --eralux-heading-padding-vertical: clamp(40px, 5vw, 68px);
  /* the single vertical padding of the page heading section */

  /* ---- Responsive ------------------------------------------------- */
  --eralux-mobile-breakpoint: 900px;
  /* the single fixed width at which every page switches to its mobile
	   layout. Informational: media queries cannot consume var(), so all
	   @media blocks in this plugin are written against this same value. */

  /* ---- Shared layout tokens -------------------------------------- */
  /* Height available to sections that sit beneath the optional sticky
     header. Header JavaScript publishes --ews-header-overlay at runtime;
     without that header the subtraction safely resolves to zero. */
  --ews-content-viewport-height: calc(100vh - var(--ews-header-overlay, 0px));
  /* Consistent breathing room for programmatic in-page scroll targets. */
  --ews-scroll-target-gap: clamp(18px, 2vw, 28px);
  --ews-control-height: 52px;
  --ews-radius: 2px;
  --ews-radius-pill: 999px;
  --ews-shadow: 0 18px 50px rgba(30, 26, 20, 0.08);
  --ews-transition: 0.25s ease;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The browser's default 8px body margin insets page content while the
   header/footer pull themselves to the viewport edges via the 100vw
   breakout — visible as a white strip around standalone templates (e.g.
   the individual product page). Every theme resets this anyway. */
body {
  margin: 0;
}

body,
body button,
body a,
body input,
body select,
body textarea {
  font-family: var(--ews-font);
  text-decoration: none;
}

body .main {
  box-sizing: border-box;
  background: var(--ews-paper);
  color: var(--ews-ink);
  overflow: hidden;
  padding: var(--ews-gutter);
}

/* ---- Heading scale (desktop) --------------------------------------- */

body h1 {
  font-family: var(--ews-font);
  font-size: clamp(42px, 6vw, 88px);
  font-weight: var(--ews-weight-regular);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: none;
}

body h2 {
  font-family: var(--ews-font);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: var(--ews-weight-light);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: none;
}

body h3 {
  font-family: var(--ews-font);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: var(--ews-weight-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
}

body h4 {
  font-family: var(--ews-font);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: var(--ews-weight-medium);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* h5 is the sub-heading step: footer column headings, collapsed-nav
   triggers, the hero subtitle, form card alerts. Everything that used to
   sit at 15px in a module stylesheet. */
body h5 {
  margin: 0;
  font-family: var(--ews-font);
  font-size: 15px;
  font-weight: var(--ews-weight-semibold);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

/* h6 is the eyebrow: the small tracked-out caps used for field labels,
   dates, meta lines, tags, territory names and the footer copyright.
   Modules had this at 26 slightly different sizes between 9.9px and 12px
   with tracking from .06em to .16em; this is the single role they all
   collapse onto. It carries its own uppercase, unlike h1-h5. */
body h6 {
  margin: 0;
  font-family: var(--ews-font);
  font-size: 11px;
  font-weight: var(--ews-weight-semibold);
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Body copy ------------------------------------------------------ */

body p {
  font-family: var(--ews-font);
  font-size: var(--ews-body-size);
  font-weight: var(--ews-weight-light);
  line-height: var(--ews-body-leading);
  letter-spacing: var(--ews-body-tracking);
  text-transform: none;
}

body :where(a, button, input, select, textarea, label, li, small) {
  font-family: var(--ews-font);
  font-weight: var(--ews-weight-light);
}

body a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body strong,
body b {
  font-weight: var(--ews-weight-semibold);
}

body small {
  font-size: 14px;
  line-height: 1.5;
}

body ul,
body ol {
  font-size: var(--ews-body-size);
  line-height: var(--ews-body-leading);
}

body blockquote {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: var(--ews-weight-light);
  line-height: 1.4;
}

body label {
  font-size: 14px;
  font-weight: var(--ews-weight-medium);
  line-height: 1.4;
}

/* The catalog's filter options and the spec rows in the product card's hover
   panel are <label> elements, so they were taking the medium weight above —
   which is meant for form field labels. As lists of values they read better
   at the regular weight. Scoped rather than changing `body label` itself,
   which also governs the contact and job application field labels.
   These selectors live here because type belongs to the theme: the module
   stylesheets carry no font declarations of their own. */
body .check,
body .spec-row .spec-key,
body .spec-row .spec-value,
body .eralux-contact-department a p {
  font-weight: var(--ews-weight-regular);
}

body button,
body input,
body select,
body textarea {
  font-size: 16px;
  line-height: 1.4;
}

/* ---- Module root scoping -------------------------------------------- */

body
  :where(
    .eralux-product,
    .fx,
    .eralux-projects-page,
    .eralux-news,
    .eralux-about,
    .eralux-career,
    .eralux-contact,
    .eralux-catalog,
    .eralux-return-policy,
    .eralux-page-not-found,
    .eralux-job-application,
    .eralux-terms-page,
    .eralux-terms,
    .eralux-where-to-buy-page,
    .eralux-agents,
    .eralux-header,
    .eralux-footer
  ),
body
  :where(
    .eralux-product,
    .fx,
    .eralux-projects-page,
    .eralux-news,
    .eralux-about,
    .eralux-career,
    .eralux-contact,
    .eralux-catalog,
    .eralux-return-policy,
    .eralux-page-not-found,
    .eralux-job-application,
    .eralux-terms-page,
    .eralux-terms,
    .eralux-where-to-buy-page,
    .eralux-agents,
    .eralux-header,
    .eralux-footer
  )
  * {
  font-family: var(--ews-font) !important;
  box-sizing: border-box;
}

body :where(button, input, select, textarea) {
  font: inherit;
}

body :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ews-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--ews-accent);
  color: var(--ews-contrast-ink);
}

/* =====================================================================
   Shared page components — used by every page module (except the
   homepage, which keeps its own cinematic layout)
   ===================================================================== */

/* ---- Page heading -------------------------------------------------- */
/* The heading band at the top of a page. Vertical padding comes from
   --eralux-heading-padding-vertical and horizontal padding from
   --eralux-page-padding-horizontal, so every page lines up. When a
   heading background image URL is set in WP Admin, the section receives
   the has-background-image class and an inline background-image. */

.eralux-page-heading {
  position: relative;
  border-bottom: 1px solid var(--ews-line-strong);
  background-color: var(--ews-paper);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The heading background image shows at full opacity — no paper wash. */
.eralux-page-heading.has-background-image::before {
  content: none;
}

.eralux-page-heading-inner {
  position: relative;
  width: 100%;
  padding: var(--eralux-heading-padding-vertical) var(--eralux-page-padding-horizontal);
}

/* ---- Heading glass panel -------------------------------------------- */
/* Dark, semi-transparent, unpolished-glass panel behind the heading and
   subheading (same treatment as the Application Space panel on the
   individual product page). Text on the panel uses contrast ink. */

.eralux-page-heading-panel {
  display: inline-block;
  max-width: min(100%, 820px);
  padding: clamp(22px, 3vw, 40px) clamp(24px, 3.2vw, 48px);
  border: 1px solid rgba(var(--ews-contrast-ink-rgb), 0.12);
  border-radius: 16px;
  background: rgba(var(--ews-ink-rgb), 0.45);
  -webkit-backdrop-filter: blur(14px) brightness(0.75);
  backdrop-filter: blur(14px) brightness(0.75);
  color: var(--ews-contrast-ink);
}

.eralux-page-heading-panel h1,
.eralux-page-heading-panel p,
.eralux-page-heading-text.is-text-contrast h1,
.eralux-page-heading-text.is-text-contrast p {
  color: var(--ews-contrast-ink) !important;
}

.eralux-page-heading-panel.is-text-ink h1,
.eralux-page-heading-panel.is-text-ink p,
.eralux-page-heading-text.is-text-ink h1,
.eralux-page-heading-text.is-text-ink p {
  color: var(--ews-ink) !important;
}

/* ---- Section head (heading + optional side text) -------------------- */

.eralux-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 44px;
  margin-bottom: 44px;
}

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

.eralux-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--ews-control-height);
  padding: 0 22px;
  border: 1px solid var(--ews-ink);
  background: transparent;
  color: var(--ews-ink);
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: var(--ews-transition);
}

.eralux-button-primary {
  background: var(--ews-ink);
  color: var(--ews-contrast-ink) !important;
}

.eralux-button-primary:hover {
  background: var(--ews-accent);
  border-color: var(--ews-accent);
}

.eralux-button-ghost {
  border-color: var(--ews-line-strong);
}

.eralux-button-ghost:hover {
  border-color: var(--ews-ink);
}

/* ---- Theme wrapper reset --------------------------------------------- */
/* On pages rendered inside the active theme's header/footer (Terms,
   Contact Us, Career, Return Policy, About Us, News & Events), the theme
   can add its own content wrappers with margins, paddings, borders and a
   white background — which shows up as a white strip with a border above
   and below the page. Neutralize every wrapper between <body> and the
   page module, and paint the body with the shared paper background so no
   gap can ever appear white. */

body:is(
  .eralux-terms-page,
  .eralux-contact-page,
  .eralux-career-page,
  .eralux-return-policy-page,
  .eralux-about-page,
  .eralux-news-page
) {
  background: var(--ews-paper);
}

body:is(
    .eralux-terms-page,
    .eralux-contact-page,
    .eralux-career-page,
    .eralux-return-policy-page,
    .eralux-about-page,
    .eralux-news-page
  )
  :is(
    #page,
    #content,
    #primary,
    #main,
    .site,
    .site-content,
    .site-main,
    .content-area,
    main,
    article,
    .entry-content,
    .hentry,
    .post
  ):has(
    .eralux-terms,
    .eralux-contact,
    .eralux-career,
    .eralux-return-policy,
    .eralux-about,
    .eralux-news
  ) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---- Scroll reveal --------------------------------------------------- */
/* Elements with the eralux-reveal class fade in when they enter the
   viewport (assets/js/reveal.js adds is-visible). */

.eralux-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.eralux-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .eralux-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   Mobile — the single desktop/mobile boundary is 900px
   (keep in sync with --eralux-mobile-breakpoint)
   ===================================================================== */

@media (max-width: 900px) {
  :root {
    --eralux-page-padding-horizontal: 16px;
    --eralux-heading-padding-vertical: 34px;
    --ews-page-pad-top: 26px;
    --ews-page-pad-bottom: 56px;
    /* Match the homepage hero's stable mobile viewport behaviour: browser
       toolbar expansion must not make a full-screen section overflow. */
    --ews-content-viewport-height: calc(100svh - var(--ews-header-overlay, 0px));
  }

  .eralux-section-head {
    display: block;
    margin-bottom: 32px;
  }

  body h1 {
    font-size: clamp(30px, 11vw, 48px);
    font-weight: var(--ews-weight-regular);
    line-height: 1;
    letter-spacing: -0.035em;
    text-transform: none;
  }

  body h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.025em;
  }

  body h3 {
    font-size: clamp(18px, 5.5vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.015em;
  }

  body h4 {
    font-size: clamp(15px, 4.5vw, 18px);
    line-height: 1.3;
    letter-spacing: -0.005em;
  }

  body p {
    font-size: 16px;
    line-height: 1.6;
  }
}
/* =====================================================================
   Go-to-top button — injected by assets/js/back-to-top.js on every page.
   Round icon button (upward chevron, no stem) fixed to the bottom-right
   of the viewport; hidden while the page is scrolled to the very top.
   ===================================================================== */

.eralux-back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--ews-line-strong);
  border-radius: 50%;
  background: var(--ews-paper-2);
  color: var(--ews-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background 0.25s ease;
}

.eralux-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.eralux-back-to-top:hover,
.eralux-back-to-top:focus-visible {
  background: var(--ews-paper);
  outline: none;
}

.eralux-back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  .eralux-back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}

/* =====================================================================
   Mobile heading split — below the 900px boundary the heading image and
   the heading text separate: the admin-set background image renders as
   a full-width band at the top of the heading section, and the heading
   text sits below it on the plain page background with NO glass panel.
   The image stays declared as an inline background-image on the section
   (set by each module template); the ::before band inherits it, while
   background-size: 0 0 stops the section itself from painting it
   behind the text.
   ===================================================================== */

@media (max-width: 900px) {
  .eralux-page-heading.has-background-image {
    display: block;
    background-size: 0 0 !important;
  }

  .eralux-page-heading.has-background-image::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-image: inherit;
    background-color: var(--ews-paper-2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--ews-line-strong);
  }

  /* The glass panel dissolves into plain, unboxed text. */
  .eralux-page-heading .eralux-page-heading-panel {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .eralux-page-heading .eralux-page-heading-text {
    display: block;
    width: 100%;
  }

  /* Below the image the text sits on the paper background, so it is
	   always ink — regardless of the per-page ink/contrast setting. */
  .eralux-page-heading .eralux-page-heading-panel h1,
  .eralux-page-heading .eralux-page-heading-panel p,
  .eralux-page-heading .eralux-page-heading-text h1,
  .eralux-page-heading .eralux-page-heading-text p {
    color: var(--ews-ink) !important;
  }
}