/*
Theme Name:   Elionyx Biolabs
Theme URI:    https://elionyxbiolabs.com
Description:  Child theme of Hello Elementor for Elionyx Biolabs. Holds the design tokens, component styles and site-specific PHP.
Author:       Elionyx Biolabs
Version:      1.0.0
Template:     hello-elementor
Text Domain:  elionyx
Tags:         elementor, woocommerce
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root{
  /* Backgrounds */
  --ex-bg:#0D1526;
  --ex-bg-header:#080E1B;
  --ex-surface:#16203A;
  --ex-border:#1F2B45;

  /* Text */
  --ex-heading:#F4EFE6;
  --ex-cream:#E6D5B8;
  --ex-body:#A5B3C9;
  --ex-muted:#7A8AA3;

  /* Brand */
  --ex-copper:#C68B5C;
  --ex-copper-lt:#DCA878;
  --ex-copper-dk:#A96E42;

  /* Status */
  --ex-green:#5FA97C;
  --ex-red:#C9605A;

  /* Spacing scale */
  --ex-s1:8px;   --ex-s2:16px;  --ex-s3:24px;  --ex-s4:40px;
  --ex-s5:64px;  --ex-s6:96px;  --ex-s7:128px;

  /* Type */
  --ex-serif:"Cormorant Garamond", Georgia, serif;
  --ex-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ex-radius:6px;
  --ex-radius-lg:10px;
  --ex-maxw:1240px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body{
  background:var(--ex-bg);
  color:var(--ex-body);
  font-family:var(--ex-sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--ex-serif); color:var(--ex-heading); }
h4,h5,h6{ font-family:var(--ex-sans); color:var(--ex-heading); font-weight:600; }

h1{ font-size:clamp(40px,5vw,64px); font-weight:600; line-height:1.08; letter-spacing:-.5px; }
h2{ font-size:clamp(32px,3.6vw,44px); font-weight:600; line-height:1.15; letter-spacing:-.25px; }
h3{ font-size:clamp(24px,2.4vw,30px); font-weight:500; line-height:1.2; }
h4{ font-size:20px; line-height:1.35; }
h5{ font-size:17px; line-height:1.4; color:var(--ex-cream); }
h6{ font-size:13px; line-height:1.3; letter-spacing:1.8px; text-transform:uppercase; color:var(--ex-copper); }

a{ color:var(--ex-copper); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--ex-copper-lt); text-decoration:underline; }

::selection{ background:var(--ex-copper); color:#221407; }

/* ==========================================================================
   3. Components
   ========================================================================== */

/* Hero — grid texture with an off-centre glow */
.ex-hero{
  background:
    radial-gradient(120% 90% at 68% 42%, #17243F 0%, var(--ex-bg) 62%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 64px);
}

/* Eyebrow label with leading rule */
.ex-eyebrow{
  display:inline-block;
  color:var(--ex-copper);
  font:600 12px/1 var(--ex-sans);
  letter-spacing:2.4px;
  text-transform:uppercase;
}
.ex-eyebrow::before{
  content:"";
  display:inline-block;
  width:34px; height:1px;
  background:var(--ex-copper);
  vertical-align:middle;
  margin-right:14px;
}

/* Italic accent line inside a headline */
.ex-accent-line{
  font-family:var(--ex-serif);
  font-style:italic;
  font-weight:600;
  color:var(--ex-cream);
}

/* Metal button */
.ex-btn-metal .elementor-button,
a.ex-btn-metal,
button.ex-btn-metal{
  background:linear-gradient(180deg,var(--ex-copper-lt),#B87E52);
  color:#221407;
  font:600 15px/1 var(--ex-sans);
  letter-spacing:.4px;
  border:none;
  border-radius:var(--ex-radius);
  padding:16px 32px;
  transition:background .25s ease, transform .15s ease;
}
.ex-btn-metal .elementor-button:hover,
a.ex-btn-metal:hover,
button.ex-btn-metal:hover{
  background:linear-gradient(180deg,#E8B98C,var(--ex-copper));
  color:#1A1005;
  text-decoration:none;
}

/* Ghost button */
.ex-btn-ghost .elementor-button,
a.ex-btn-ghost{
  background:transparent;
  color:var(--ex-heading);
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius);
  padding:15px 31px;
  font:600 15px/1 var(--ex-sans);
  letter-spacing:.4px;
}
.ex-btn-ghost .elementor-button:hover,
a.ex-btn-ghost:hover{ border-color:var(--ex-copper); color:var(--ex-copper-lt); }

/* Card */
.ex-card{
  background:var(--ex-surface);
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius-lg);
  padding:var(--ex-s4);
}

/* Trust ticker */
.ex-ticker{ overflow:hidden; background:var(--ex-bg-header); padding:9px 0; }
.ex-track{
  display:flex; gap:44px; width:max-content;
  animation:ex-scroll 38s linear infinite;
}
.ex-track span{
  font:500 12px/1 var(--ex-sans);
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#F0E7DA;
  white-space:nowrap;
}
.ex-track span::before{ content:"\2022"; color:var(--ex-copper); margin-right:14px; }
@keyframes ex-scroll{ to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .ex-track{ animation:none; } }

/* Legal / research-use-only copy */
.ex-legal{ color:var(--ex-muted); font-size:13px; line-height:1.6; }

/* Section rhythm */
.ex-section{ padding-block:var(--ex-s6); }
@media(max-width:767px){ .ex-section{ padding-block:var(--ex-s5); } }

/* ==========================================================================
   4. Forms
   ========================================================================== */

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=number], select, textarea{
  background:var(--ex-surface);
  color:var(--ex-heading);
  border:1px solid var(--ex-border);
  border-radius:var(--ex-radius);
  padding:14px 16px;
  font-family:var(--ex-sans);
  font-size:15px;
  transition:border-color .2s ease;
}
input::placeholder, textarea::placeholder{ color:var(--ex-muted); }
input:focus, select:focus, textarea:focus{ border-color:var(--ex-copper); outline:none; }
label{ color:var(--ex-body); font-size:13px; font-weight:500; }

/* ==========================================================================
   5. WooCommerce
   ========================================================================== */

.woocommerce-message, .woocommerce-info{
  background:var(--ex-surface);
  border-top-color:var(--ex-copper);
  color:var(--ex-body);
}
.woocommerce-error{ background:var(--ex-surface); border-top-color:var(--ex-red); }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{ color:var(--ex-copper); font-weight:600; }

.woocommerce .stock.in-stock{ color:var(--ex-green); }
.woocommerce .stock.out-of-stock{ color:var(--ex-red); }

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:linear-gradient(180deg,var(--ex-copper-lt),#B87E52);
  color:#221407;
  font-weight:600;
  border-radius:var(--ex-radius);
  padding:14px 28px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background:linear-gradient(180deg,#E8B98C,var(--ex-copper));
  color:#1A1005;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{ border-color:var(--ex-border); color:var(--ex-body); }

/* ==========================================================================
   6. Accessibility
   ========================================================================== */

:focus-visible{ outline:2px solid var(--ex-copper); outline-offset:2px; }

.ex-skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ex-copper); color:#221407;
  padding:12px 20px; z-index:9999;
}
.ex-skip-link:focus{ left:0; }