/*
Theme Name: JewelryERP
Theme URI: https://jewelryep.com
Author: JewelryERP
Author URI: https://jewelryep.com
Description: Custom theme for JewelryERP.com — jewellery ERP software for manufacturers, wholesalers and retailers.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jewelryerp
*/

/* ==========================================================================
   JewelryERP.com — shared front-end stylesheet
   Enqueue this file from functions.php (see functions-snippet.php).
   Colors: obsidian navy + a layered 24k gold system (jewellery-showroom
   palette, not a flat single gold). Adjust the CSS variables below to
   match your logo if needed.
   ========================================================================== */

:root{
  --jerp-navy:#0a0f24;
  --jerp-navy-deep:#05070f;
  --jerp-navy-light:#141f42;
  --jerp-gold:#d4af37;
  --jerp-gold-deep:#9c7a26;
  --jerp-gold-light:#f2e2b3;
  --jerp-gold-soft:#faf1da;
  --jerp-gold-gradient:linear-gradient(135deg,#f6e7bb 0%,#e0bf6c 30%,#d4af37 60%,#a9781f 100%);
  --jerp-gold-gradient-soft:linear-gradient(135deg,#faf1da 0%,#f2e2b3 100%);
  --jerp-ink:#1c1f26;
  --jerp-muted:#5c6178;
  --jerp-bg:#faf7f0;
  --jerp-white:#ffffff;
  --jerp-radius:14px;
  --jerp-shadow:0 10px 30px rgba(10,15,36,.10);
  --jerp-maxw:1180px;
}

.jerp-wrap{max-width:var(--jerp-maxw);margin:0 auto;padding:0 24px;}
.jerp-section{padding:64px 0;}
.jerp-section--tight{padding:40px 0;}
.jerp-section--dark{background:var(--jerp-navy);color:#fff;}
.jerp-section--muted{background:var(--jerp-bg);}

.jerp-eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--jerp-gold);font-weight:700;margin-bottom:12px;position:relative;z-index:2;
}
.jerp-h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.15;font-weight:800;color:var(--jerp-navy);margin:0 0 18px;}
.jerp-section--dark .jerp-h1,.jerp-hero .jerp-h1{color:#fff;}
.jerp-h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--jerp-navy);margin:0 0 14px;}
.jerp-section--dark .jerp-h2,.jerp-hero .jerp-h2{color:#fff;}
.jerp-h3{font-size:1.15rem;font-weight:700;color:var(--jerp-navy);margin:0 0 8px;}
.jerp-lead{font-size:1.15rem;color:var(--jerp-muted);max-width:760px;margin:0 0 28px;}
.jerp-section--dark .jerp-lead,.jerp-hero .jerp-lead{color:#c9cfe0;}
.jerp-p{color:var(--jerp-muted);line-height:1.7;margin:0 0 16px;}

/* Gradient gold text for accent words/headlines. */
.jerp-gold-text{
  background:var(--jerp-gold-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================================
   PARALLAX BACKGROUND SYSTEM
   Every "deep" section (.jerp-hero, .jerp-parallax-band, .jerp-cta) shares
   the same 3-layer, fixed-attachment background so the gold diamond facet
   pattern and glow blobs drift at a different speed than page scroll —
   pure CSS/SVG, no external images required. Want your own showroom/product
   photo instead? Set --jerp-hero-photo via an inline style, e.g.:
   <section class="jerp-hero" style="--jerp-hero-photo:url('PHOTO-URL-HERE')">
   and it slots in above the pattern automatically.
   ========================================================================== */
.jerp-hero,
.jerp-parallax-band,
.jerp-cta{
  --jerp-hero-photo:none;
  position:relative;
  color:#fff;
  overflow:hidden;
  background-color:var(--jerp-navy);
  background-image:
    var(--jerp-hero-photo),
    radial-gradient(760px 420px at 88% -10%, rgba(212,175,55,.35), transparent 60%),
    linear-gradient(160deg, rgba(5,7,15,.95) 10%, rgba(10,15,36,.86) 55%, rgba(20,31,66,.94) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.24' stroke-width='1'%3E%3Cpath d='M70 8 112 35 98 92 42 92 28 35Z'/%3E%3Cpath d='M70 8 70 52M112 35 70 52M28 35 70 52M98 92 70 52M42 92 70 52'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover, cover, cover, 240px 240px;
  background-position:center, center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-attachment:fixed, fixed, fixed, fixed;
}
.jerp-hero{padding:96px 0 64px;}
@media (max-width:860px){
  /* iOS Safari does not support fixed backgrounds well — fall back to scroll. */
  .jerp-hero,
  .jerp-parallax-band,
  .jerp-cta{background-attachment:scroll, scroll, scroll, scroll;}
  .jerp-hero{padding:64px 0 40px;}
}
.jerp-hero .jerp-p,.jerp-parallax-band .jerp-p{color:#c9cfe0;}
.jerp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:2;}
@media (max-width:860px){.jerp-hero-grid{grid-template-columns:1fr;}}
.jerp-hero-panel{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:32px;backdrop-filter:blur(6px);
  transition:transform .3s ease;
}

/* ---- Decorative parallax graphics: large faint diamond outlines that
   drift opposite to scroll via footer.php's scroll listener. Purely
   decorative, so they're hidden from assistive tech and ignore clicks. ---- */
.jerp-parallax-decor{
  position:absolute;pointer-events:none;z-index:0;opacity:.16;
  color:var(--jerp-gold-light);will-change:transform;
}
.jerp-hero .jerp-parallax-decor,
.jerp-parallax-band .jerp-parallax-decor,
.jerp-cta .jerp-parallax-decor{opacity:.22;}
@media (max-width:700px){.jerp-parallax-decor{display:none;}}

/* ---- Diamond "shower": small gold gem chips that continuously fall and
   twinkle inside dark sections. Generated by footer.php's script into any
   element carrying .jerp-shower — pure CSS animation, GPU-friendly. ---- */
.jerp-shower{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.jerp-gem{
  position:absolute;top:-6%;width:9px;height:13px;opacity:0;
  background:linear-gradient(160deg,#fffdf5 0%,var(--jerp-gold-light) 35%,var(--jerp-gold) 68%,var(--jerp-gold-deep) 100%);
  clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%);
  filter:drop-shadow(0 0 5px rgba(212,175,55,.55));
  animation-name:jerp-gem-fall;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes jerp-gem-fall{
  0%{transform:translate(0,0) rotate(0deg);opacity:0;}
  6%{opacity:.95;}
  90%{opacity:.85;}
  100%{transform:translate(var(--jerp-drift,24px),720px) rotate(240deg);opacity:0;}
}
/* ---- Static twinkling sparkle points, layered over hero art for glamour. ---- */
.jerp-sparkle{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--jerp-gold-soft);pointer-events:none;z-index:1;
  box-shadow:0 0 8px 2px rgba(242,226,179,.75);
  animation:jerp-twinkle 2.6s ease-in-out infinite;
}
@keyframes jerp-twinkle{
  0%,100%{opacity:.15;transform:scale(.7);}
  50%{opacity:1;transform:scale(1.15);}
}
@media (prefers-reduced-motion:reduce){
  .jerp-gem,.jerp-sparkle{animation:none;display:none;}
  .jerp-parallax-decor{transform:none !important;}
}

.jerp-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:.98rem;transition:transform .15s ease,box-shadow .15s ease;
}
.jerp-btn--gold{background:var(--jerp-gold-gradient);color:var(--jerp-navy-deep);box-shadow:0 4px 14px rgba(212,175,55,.28);}
.jerp-btn--gold:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(212,175,55,.45);color:var(--jerp-navy-deep);}
.jerp-btn--outline{border:2px solid rgba(255,255,255,.5);color:#fff;}
.jerp-btn--outline:hover{border-color:#fff;color:#fff;}
.jerp-btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;}

.jerp-grid{display:grid;gap:24px;}
.jerp-grid--2{grid-template-columns:repeat(2,1fr);}
.jerp-grid--3{grid-template-columns:repeat(3,1fr);}
.jerp-grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.jerp-grid--3,.jerp-grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.jerp-grid--2,.jerp-grid--3,.jerp-grid--4{grid-template-columns:1fr;}}

.jerp-card{
  background:#fff;border-radius:var(--jerp-radius);padding:28px;box-shadow:var(--jerp-shadow);
  border:1px solid #eee;height:100%;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.jerp-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(15,28,63,.14),0 0 0 1px rgba(212,175,55,.25);border-color:var(--jerp-gold-light);}
.jerp-icon-svg{width:34px;height:34px;color:var(--jerp-gold);margin-bottom:14px;display:block;}
.jerp-hero .jerp-icon-svg{color:var(--jerp-gold);}
.jerp-card ul{margin:12px 0 0;padding-left:18px;color:var(--jerp-muted);}
.jerp-card ul li{margin-bottom:6px;}

.jerp-badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;position:relative;z-index:2;}
.jerp-badge{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;
  padding:6px 14px;border-radius:999px;font-size:.82rem;
}

.jerp-stat-row{display:flex;gap:40px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:2;}
.jerp-stat b{display:block;font-size:1.8rem;color:var(--jerp-gold);}
.jerp-stat span{color:var(--jerp-muted);font-size:.9rem;}
.jerp-section--dark .jerp-stat span,.jerp-hero .jerp-stat span{color:#c9cfe0;}

.jerp-faq{border-top:1px solid #e5e2da;}
.jerp-faq-item{border-bottom:1px solid #e5e2da;padding:22px 0;}
.jerp-faq-item h3{margin:0 0 8px;color:var(--jerp-navy);font-size:1.05rem;}
.jerp-faq-item p{margin:0;color:var(--jerp-muted);line-height:1.7;}

.jerp-cta{
  border-radius:20px;padding:56px 48px;text-align:center;color:#fff;
  border:1px solid rgba(212,175,55,.25);
}
.jerp-cta .jerp-btn-row{justify-content:center;position:relative;z-index:2;}
.jerp-cta .jerp-h2,.jerp-cta .jerp-lead{position:relative;z-index:2;}

/* ---- Parallax band: a full-width dark, gold-flecked strip used to break
   up long pages of light sections with a moment of depth + drama. ---- */
.jerp-parallax-band{padding:80px 0;text-align:center;}
.jerp-parallax-band .jerp-wrap{position:relative;z-index:2;max-width:820px;}
.jerp-parallax-band .jerp-h2{color:#fff;}
.jerp-parallax-band .jerp-eyebrow{position:relative;z-index:2;}

.jerp-breadcrumb{font-size:.85rem;color:var(--jerp-muted);margin-bottom:18px;}
.jerp-breadcrumb a{color:var(--jerp-muted);text-decoration:none;}
.jerp-breadcrumb a:hover{text-decoration:underline;}

.jerp-table{width:100%;border-collapse:collapse;margin:20px 0;}
.jerp-table th,.jerp-table td{padding:14px 16px;border-bottom:1px solid #e5e2da;text-align:left;}
.jerp-table thead tr{border-bottom:2px solid var(--jerp-gold);}
.jerp-table th{color:var(--jerp-navy);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;}
.jerp-table td{color:var(--jerp-muted);}

.jerp-form{display:grid;gap:16px;max-width:560px;}
.jerp-form label{font-weight:600;color:var(--jerp-navy);font-size:.9rem;display:block;margin-bottom:6px;}
.jerp-form input,.jerp-form select,.jerp-form textarea{
  width:100%;padding:12px 14px;border:1px solid #d8d5cc;border-radius:10px;font-size:1rem;font-family:inherit;
}
.jerp-form textarea{min-height:120px;}

.jerp-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:860px){.jerp-contact-grid{grid-template-columns:1fr;}}
.jerp-contact-info li{margin-bottom:18px;color:var(--jerp-muted);}
.jerp-contact-info b{color:var(--jerp-navy);display:block;}

/* ---- Scroll-reveal (applied automatically via footer.php script) ---- */
.jerp-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.jerp-reveal.jerp-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .jerp-reveal{opacity:1;transform:none;transition:none;}
}