/*
 * GreenChem Oy – Custom CSS for JA Purity IV / Joomla 6.1
 * Version: v9  |  May 2026
 *
 * INSTALL: Admin → System → Templates → JA Purity IV
 *          → Edit Style → Custom CSS tab → paste → Save
 */

/* ════════════════════════════════════════════════════════════
   1. TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 { font-weight:400; letter-spacing:-0.02em; color:#111f12 }
h1 strong,h2 strong,h3 strong,h4 strong,h5 strong { font-weight:600 }
h1 { font-weight:300 }
h1 strong { font-weight:700 }
body,p,li,td { font-weight:300; line-height:1.75; color:#374038 }
strong,b { font-weight:600 }
.gc-page-title { font-size:clamp(1.55rem,2.8vw,2.1rem); font-weight:300; letter-spacing:-0.025em; color:#111f12; margin-bottom:.75rem }
.gc-page-title strong { font-weight:700; color:#1e3d20 }
.gc-lead { font-size:15.5px; font-weight:300; color:#5e7060; line-height:1.8; max-width:680px }

/* ════════════════════════════════════════════════════════════
   2. HERO — JA ACM COMPATIBLE
   ════════════════════════════════════════════════════════════ */
.ja-position-hero,.ja-position-slideshow,.ja-position-banner,
.position-hero,.position-slideshow,.position-banner { margin:0 !important; padding:0 !important }
.ja-position-hero .moduletable,.ja-position-slideshow .moduletable,
.ja-position-banner .moduletable,[class*="position-hero"] .moduletable,
[class*="position-banner"] .moduletable { margin:0 !important; padding:0 !important }

.gc-hero-wrap {
  position:relative; background-color:#1e3d20;
  background-size:cover; background-position:center 35%; background-repeat:no-repeat;
  min-height:384px; display:flex; align-items:center; margin:0; padding:0;
  /* Full bleed — hero extends to browser edges */
  width:100vw; left:50%; right:50%;
  margin-left:-50vw !important; margin-right:-50vw !important;
  max-width:none !important; box-sizing:border-box;
}
.gc-hero-wrap::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(108deg,rgba(20,50,22,0.86) 0%,rgba(20,50,22,0.52) 50%,rgba(20,50,22,0.08) 100%);
  pointer-events:none;
}
.gc-hero-inner { position:relative; z-index:2; padding:2.5rem 2rem; max-width:580px }
.gc-hero-eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:1rem }
.gc-hero-eyebrow::before { content:''; display:inline-block; width:18px; height:2px; background:#4caf6e; flex-shrink:0 }
.gc-hero-eyebrow span { font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#9fd4ae }
.gc-hero-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:300; color:#ffffff; line-height:1.12; letter-spacing:-0.03em; margin-bottom:.9rem }
.gc-hero-title strong { font-weight:700; color:#9fd4ae }
.gc-hero-lead { font-size:15px; font-weight:300; color:rgba(255,255,255,0.7); line-height:1.8; margin-bottom:1.6rem; max-width:500px }
.gc-hero-btns { display:flex; gap:10px; flex-wrap:wrap }
.gc-hero-wrap.gc-hero-inner-page { min-height:280px }

/* ── Photo/canvas layers (hero_animated_v2, hero_static) ── */
.gc-hero-wrap canvas {
  position:absolute; inset:0; width:100%; height:100%; z-index:2; opacity:1;
}
.gc-hero-wrap.gc-has-photo canvas {
  opacity:var(--canvas-opacity,0.75); mix-blend-mode:screen;
}
.gc-hero-wrap .gc-bg-photo {
  position:absolute; inset:0; background-size:cover;
  background-position:center 35%; background-repeat:no-repeat; z-index:0;
}
.gc-hero-wrap .gc-bg-mask {
  position:absolute; inset:0;
  background:linear-gradient(to right,
    rgba(10,24,13,var(--mask-left,0.82)) 0%,
    rgba(10,24,13,var(--mask-mid,0.50)) calc(var(--mask-breakpoint,0.45)*100%),
    rgba(10,24,13,var(--mask-right,0.22)) 100%);
  z-index:1;
}
.gc-hero-wrap .gc-bg-mask::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 55%,rgba(10,24,13,0.45) 100%);
}

/* ════════════════════════════════════════════════════════════
   3. JA ACM MODULE
   ════════════════════════════════════════════════════════════ */
.ja-acm-module .btn-primary,.ja-acm-module .ja-btn-primary { background-color:#1e3d20 !important; border-color:#1e3d20 !important; border-radius:0 !important }
.ja-acm-module .btn-primary:hover { background-color:#2d5a30 !important }
.ja-acm-module .btn-secondary,.ja-acm-module .ja-btn-secondary { border-color:rgba(255,255,255,0.45) !important; border-radius:0 !important }
.ja-acm-module .ja-item-title { letter-spacing:-0.03em; font-weight:300 }
.ja-acm-module .ja-item-title strong { font-weight:700; color:#9fd4ae }
.ja-acm-module .ja-item-caption,.ja-acm-module .acm-desc { font-weight:300; color:rgba(255,255,255,0.7); line-height:1.75 }

/* ════════════════════════════════════════════════════════════
   4. BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn { border-radius:0 !important }
.btn-success,.btn-success:focus { background-color:#1e3d20 !important; border-color:#1e3d20 !important; color:#fff !important; font-weight:500; letter-spacing:.02em }
.btn-success:hover { background-color:#2d5a30 !important; border-color:#2d5a30 !important }
.btn-outline-success { color:#1e3d20 !important; border-color:#1e3d20 !important }
.btn-outline-success:hover { background:#eaf3ea !important }
.btn-primary,.btn-primary:focus { background-color:#1a5f96 !important; border-color:#1a5f96 !important; color:#fff !important }
.btn-primary:hover { background-color:#2589cc !important; border-color:#2589cc !important }
.btn-outline-primary { color:#1a5f96 !important; border-color:#1a5f96 !important }
.btn-outline-primary:hover { background:#e5f0f9 !important }
.btn-outline-light { border-color:rgba(255,255,255,0.4) !important; color:rgba(255,255,255,0.85) !important }
.btn-outline-light:hover { border-color:rgba(255,255,255,0.8) !important; color:#fff !important; background:transparent !important }

/* ════════════════════════════════════════════════════════════
   5. SECTION TAGS
   ════════════════════════════════════════════════════════════ */
.gc-section-tag { display:flex; align-items:center; gap:8px; margin-bottom:.8rem }
.gc-tag-line { display:inline-block; width:18px; height:2px; background:#4caf6e; flex-shrink:0 }
.gc-tag-text { font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:#2d5a30 }

/* ════════════════════════════════════════════════════════════
   6. DIVIDER
   ════════════════════════════════════════════════════════════ */
.gc-divider { border-color:#dde5de; margin:2.2rem 0 }

/* ════════════════════════════════════════════════════════════
   7. STAT BLOCKS
   ════════════════════════════════════════════════════════════ */
.gc-stat-block { padding:1.2rem 0 1.2rem 1rem; border-left:3px solid #4caf6e; margin-bottom:1rem }
.gc-stat-number { font-size:2.2rem; font-weight:300; color:#111f12; letter-spacing:-.04em; line-height:1 }
.gc-stat-unit { font-size:1rem; color:#4caf6e; font-weight:600; margin-left:2px }
.gc-stat-number--sm { font-size:1.5rem; padding-top:.4rem }
.gc-stat-label { font-size:11px; color:#8a9e8c; margin-top:4px; letter-spacing:.03em }

/* ════════════════════════════════════════════════════════════
   8. OVERVIEW CARDS
   ════════════════════════════════════════════════════════════ */
.gc-overview-row { border:1px solid #dde5de; margin-top:1.5rem }
.gc-ov-card { border-right:1px solid #dde5de; padding:1.5rem 1.3rem; background:#fff; transition:background .15s }
.gc-ov-card:last-child { border-right:none }
.gc-ov-card:hover { background:#f7f9f8 }
.gc-ov-accent { height:3px; margin:-1.5rem -1.3rem 1.1rem }
.gc-ov-icon { width:36px; height:36px; background:#eaf3ea; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem }
.gc-ov-title { font-size:14px; font-weight:600; color:#111f12; margin-bottom:.4rem; line-height:1.3 }
.gc-ov-body { font-size:12.5px; color:#5e7060; line-height:1.7; font-weight:300 }
.gc-ov-link { margin-top:1rem; font-size:12px }
.gc-ov-link a { color:#1a5f96; font-weight:500; text-decoration:none }
.gc-ov-link a:hover { text-decoration:underline }

/* ════════════════════════════════════════════════════════════
   9. ECOSYSTEM CHAIN PANEL
   ════════════════════════════════════════════════════════════ */
.gc-chain-panel { border:1px solid #dde5de; background:#fff }
.gc-chain-header { background:#1e3d20; color:rgba(255,255,255,0.42); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:.6rem 1.1rem }
.gc-chain-item { display:flex; align-items:center; gap:10px; padding:.75rem 1.1rem; border-bottom:1px solid #edf2ee; font-size:.875rem }
.gc-chain-item:last-child { border-bottom:none }
.gc-chain-sq { width:8px; height:8px; flex-shrink:0; display:inline-block }
.gc-chain-name { font-size:13px; font-weight:500; color:#111f12 }
.gc-chain-sub { font-size:11px; color:#8a9e8c; font-weight:300; margin-top:1px }
.gc-chain-conn { padding:.25rem 1.1rem; font-size:10px; color:#8a9e8c; letter-spacing:.05em; background:#f7f9f8; border-bottom:1px solid #edf2ee; text-align:center }

/* ════════════════════════════════════════════════════════════
   10. PROCESS STEPS
   ════════════════════════════════════════════════════════════ */
.gc-proc-row { border:1px solid #dde5de; margin-top:1.2rem }
.gc-proc-cell { border-right:1px solid #dde5de; padding:1.4rem 1.2rem; background:#fff; transition:background .15s }
.gc-proc-cell:last-child { border-right:none }
.gc-proc-cell:hover { background:#f7f9f8 }
.gc-proc-accent { height:3px; margin:-1.4rem -1.2rem 1.1rem }
.gc-proc-accent--green { background:#4caf6e }
.gc-proc-accent--lake  { background:#2589cc }
.gc-proc-step { display:block; font-size:10px; font-weight:600; color:#8a9e8c; letter-spacing:.1em; margin-bottom:.35rem }
.gc-proc-title { font-size:13.5px; font-weight:600; color:#111f12; margin-bottom:.35rem; line-height:1.3 }
.gc-proc-desc { font-size:12px; color:#8a9e8c; line-height:1.65; font-weight:300 }
.gc-badge-green { display:inline-block; background:#eaf3ea; color:#1e3d20; border-left:2px solid #4caf6e; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; margin-bottom:.55rem }
.gc-badge-blue  { display:inline-block; background:#e5f0f9; color:#1a5f96; border-left:2px solid #2589cc; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; margin-bottom:.55rem }

/* ════════════════════════════════════════════════════════════
   11. CUSTOMER CARDS
   ════════════════════════════════════════════════════════════ */
.gc-cust-card { border:1px solid #dde5de; background:#fff; padding:1.4rem 1.2rem; height:100%; transition:background .15s }
.gc-cust-card:hover { background:#f7f9f8 }
.gc-cust-icon { width:34px; height:34px; background:#eaf3ea; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem }
.gc-cust-tag { margin-top:.9rem; padding-top:.7rem; border-top:1px solid #edf2ee; font-size:11px; color:#1a5f96; font-weight:500 }

/* ════════════════════════════════════════════════════════════
   12. IMPACT CARDS
   ════════════════════════════════════════════════════════════ */
.gc-impact-card { padding:1.6rem 1.3rem; height:100%; border:1px solid #dde5de }
.gc-impact-card--green { background:#eaf3ea; border-color:#c2dfc2 }
.gc-impact-card--blue  { background:#e5f0f9; border-color:#b8d4ef }
.gc-impact-card--dark  { background:#1e3d20; border-color:#1e3d20 }
.gc-impact-bar { width:22px; height:2px; margin-bottom:.9rem }
.gc-impact-bar--green { background:#4caf6e }
.gc-impact-bar--blue  { background:#2589cc }
.gc-impact-bar--light { background:rgba(255,255,255,0.22) }

/* ════════════════════════════════════════════════════════════
   13. CTA STRIP
   ════════════════════════════════════════════════════════════ */
.gc-cta-strip { background:#1e3d20; padding:2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:2rem }

/* ════════════════════════════════════════════════════════════
   14. PARTNER LOGOS
   ════════════════════════════════════════════════════════════ */
.gc-partners-row { display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; gap:1.5rem; padding:1.4rem 1rem; border:1px solid #dde5de; border-top:none; background:#f7f9f8 }
.gc-partner-logo { display:flex; flex-direction:column; align-items:center; gap:5px }
.gc-partner-logo img { max-height:46px; max-width:150px; filter:grayscale(100%); opacity:.5; transition:opacity .2s }
.gc-partner-logo:hover img { opacity:.8 }
.gc-partner-caption { font-size:10px; color:#8a9e8c; letter-spacing:.08em; text-transform:uppercase; font-weight:500 }

/* ════════════════════════════════════════════════════════════
   15. INFO PANELS & TABLES
   ════════════════════════════════════════════════════════════ */
.gc-info-panel { border:1px solid #dde5de; background:#fff }
.gc-info-panel-header { background:#1e3d20; color:rgba(255,255,255,0.42); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:.6rem 1.1rem }
.gc-facts-table td,.gc-facts-table th { font-size:.8125rem !important; padding:.42rem .75rem !important; border-color:#edf2ee !important; vertical-align:middle }
.gc-facts-table thead th { background:#f7f9f8; font-weight:600; font-size:11px !important; text-transform:uppercase; letter-spacing:.04em; color:#5e7060 }

/* ════════════════════════════════════════════════════════════
   16. ALERTS
   ════════════════════════════════════════════════════════════ */
.gc-alert-green { background:#eaf3ea; border:1px solid #c2dfc2; border-left:3px solid #4caf6e; padding:1rem 1.1rem; font-size:.8125rem; color:#1e3d20 }
.gc-alert-blue  { background:#e5f0f9; border:1px solid #b8d4ef; border-left:3px solid #2589cc; padding:1rem 1.1rem; font-size:.8125rem; color:#1a5f96 }

/* ════════════════════════════════════════════════════════════
   17. CONTACT FORM
   ════════════════════════════════════════════════════════════ */
.gc-form-block .form-control,.gc-form-block .form-select { border-radius:0; border-color:#dde5de; font-size:.875rem; font-weight:300 }
.gc-form-block .form-control:focus,.gc-form-block .form-select:focus { border-color:#4caf6e; box-shadow:0 0 0 2px rgba(76,175,110,0.15) }
.gc-form-block .form-label { font-size:12px; font-weight:600; color:#374038; letter-spacing:.03em }

/* ════════════════════════════════════════════════════════════
   18. TEAM CARDS
   ════════════════════════════════════════════════════════════ */
.gc-team-card { border:1px solid #dde5de; padding:1.2rem; text-align:center; font-size:.875rem; margin-bottom:1rem }
.gc-team-avatar { width:64px; height:64px; background:#eaf3ea; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; font-size:11px; color:#8a9e8c; border:1px solid #dde5de }

/* ════════════════════════════════════════════════════════════
   19. ARTICLE METADATA SUPPRESSION
   ════════════════════════════════════════════════════════════ */
.article-info,.article-info-term,.createdby,.create,.modified,.category-name,
.hits,.tags-list,.com-content-article__info { display:none !important }

/* ════════════════════════════════════════════════════════════
   20. FOOTER — gc-footer-v2 (light/transparent)
   ════════════════════════════════════════════════════════════ */
.gc-footer-v2 { background:transparent; border-top:1px solid #dde5de; padding:2.5rem 0 0; color:#5e7060; font-size:13px; font-weight:300 }
.gc-footer-v2 h5 { font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#2d5a30; margin-bottom:0.9rem; border-bottom:1px solid #dde5de; padding-bottom:0.5rem }
.gc-footer-v2 ul { list-style:none; padding:0; margin:0 }
.gc-footer-v2 ul li { padding:0.22rem 0; font-size:13px; font-weight:300; color:#5e7060 }
.gc-footer-v2 a { color:#3d6b47; text-decoration:none; transition:color 0.15s }
.gc-footer-v2 a:hover { color:#1e3d20; text-decoration:underline }
.gc-footer-v2 .gc-footer-muted { color:#9aae9c; font-size:12px }
.gc-footer-v2 p { font-size:13px; font-weight:300; color:#5e7060; line-height:1.75; margin-bottom:0 }
.gc-footer-v2 .gc-placeholder-col { font-size:12.5px; font-style:italic; color:#b0c4b4; line-height:1.6 }
.gc-footer-v2 .gc-cert-badge { display:inline-flex; align-items:center; gap:7px; border:1px solid #c2dfc2; background:#eaf3ea; padding:5px 10px; font-size:11px; color:#2d5a30; font-weight:500; margin-top:0.8rem }
.gc-footer-v2 .gc-footer-bottom-v2 { margin-top:2rem; padding:0.9rem 0; border-top:1px solid #edf2ee; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; font-size:11.5px; color:#9aae9c }
.gc-footer-v2 .gc-footer-bottom-v2 a { color:#9aae9c; font-size:11.5px; text-decoration:none }
.gc-footer-v2 .gc-footer-bottom-v2 a:hover { color:#1e3d20; text-decoration:underline }
.gc-footer-v2 .gc-footer-lang { display:flex; gap:1.2rem }
.gc-footer-v2 svg { color:#5e7060 }

/* ════════════════════════════════════════════════════════════
   CONTRAST & READABILITY FIXES
   ════════════════════════════════════════════════════════════ */
.gc-impact-card--dark,.gc-impact-card--dark * { color:rgba(255,255,255,0.88) !important }
.gc-impact-card--dark h1,.gc-impact-card--dark h2,.gc-impact-card--dark h3,
.gc-impact-card--dark h4,.gc-impact-card--dark h5,.gc-impact-card--dark h6,
.gc-impact-card--dark strong,.gc-impact-card--dark b { color:#ffffff !important }
.gc-impact-card--dark p,.gc-impact-card--dark li { color:rgba(255,255,255,0.78) !important }
.gc-cta-strip,.gc-cta-strip * { color:rgba(255,255,255,0.85) !important }
.gc-cta-strip h2,.gc-cta-strip h3,.gc-cta-strip strong { color:#ffffff !important }
.gc-cta-strip p { color:rgba(255,255,255,0.6) !important }
.gc-chain-header { color:rgba(255,255,255,0.65) !important }
.gc-info-panel-header { color:rgba(255,255,255,0.65) !important }
.gc-hero-wrap,.gc-hero-wrap * { color:rgba(255,255,255,0.85) !important }
.gc-hero-title { color:#ffffff !important }
.gc-hero-title strong { color:#9fd4ae !important }
.gc-hero-lead { color:rgba(255,255,255,0.72) !important }
.gc-hero-eyebrow span { color:#9fd4ae !important }
.gc-hero-wrap .btn-success { color:#ffffff !important }
.gc-hero-wrap .btn-outline-light { color:rgba(255,255,255,0.88) !important; border-color:rgba(255,255,255,0.45) !important }
.gc-impact-card--green h3,.gc-impact-card--green p,.gc-impact-card--green li { color:#1e3d20 !important }
.gc-impact-card--blue h3 { color:#0c4478 !important }
.gc-impact-card--blue p,.gc-impact-card--blue li { color:#1a5080 !important }
.gc-ov-card .gc-ov-title { color:#111f12 !important }
.gc-ov-card .gc-ov-body { color:#4a6050 !important }
.gc-ov-card .gc-ov-link a { color:#1a5f96 !important }
.gc-proc-title { color:#111f12 !important }
.gc-proc-step { color:#7a9485 !important }
.gc-proc-desc { color:#6a8475 !important }
.gc-cust-card h5 { color:#111f12 !important }
.gc-cust-card p { color:#4a6050 !important }
.gc-cust-tag { color:#1a5f96 !important }
.gc-alert-green,.gc-alert-green * { color:#1e3d20 !important }
.gc-alert-blue,.gc-alert-blue * { color:#0c447c !important }
.gc-facts-table td { color:#2a3e2e !important }
.gc-facts-table td.text-muted { color:#7a9485 !important }
[style*="background:#1e3d20"] *,[style*="background: #1e3d20"] *,
[style*="background-color:#1e3d20"] *,[style*="background-color: #1e3d20"] * { color:rgba(255,255,255,0.85) !important }
.gc-tag-text { color:#2d5a30 !important }
.gc-stat-number { color:#111f12 !important }
.gc-stat-unit { color:#4caf6e !important }
.gc-stat-label { color:#7a9485 !important }
.gc-page-title { color:#111f12 !important }
.gc-page-title strong { color:#1e3d20 !important }
.gc-lead { color:#4a6050 !important }
.gc-partners-row { background:#f7f9f8 !important }
.gc-partner-caption { color:#7a9485 !important }
.gc-badge-green { color:#1e3d20 !important; background:#eaf3ea !important }
.gc-badge-blue  { color:#0c447c !important; background:#e5f0f9 !important }

/* ════════════════════════════════════════════════════════════
   METADATA SUPPRESSION
   ════════════════════════════════════════════════════════════ */
.com-content-article__info,.com-content-category-blog__items .com-content-article__info,
.item-page .com-content-article__info,.article-info,.article-info-block,dl.article-info,
.t4-article-info,.ja-article-info,.com-content-article__author-avatar,
.com-content-article__author-name,.author-info,.createdby,
.com-content-article__created-date,.create,.published,
.com-content-article__category,.category-name,.com-content-article__hits,.hits,
.item-page .article-info dt,.item-page .article-info dd,
.blog .article-info,.items-row .article-info { display:none !important }
.com-content-category-blog__item .read-more,.readmore { display:none !important }
.t4-breadcrumb,#t4-breadcrumbs,.breadcrumbs,nav[aria-label="breadcrumb"],
.breadcrumb-wrapper,.path { padding-top:0.35rem !important; padding-bottom:0.35rem !important; min-height:0 !important; line-height:1.4 !important }
.position-breadcrumbs,[class*="position-breadcrumbs"] { margin:0 !important; padding:0 !important }
.breadcrumb { margin-bottom:0 !important; padding:0.3rem 0 !important; font-size:12.5px }
.breadcrumb-item { font-size:12.5px; line-height:1.4 }
.position-slideshow,[class*="position-slideshow"],.t4-position-slideshow,
#ja-slideshow,.ja-slideshow-wrap,.position-slideshow .moduletable,
.position-slideshow > div { margin:0 !important; padding:0 !important; display:block !important }
.t4-layout-row:has(.position-slideshow),.t4-section:has(.position-slideshow) { margin:0 !important; padding:0 !important }
.mod-article-slideshow,.ja-module-slideshow { margin:0 !important; padding:0 !important }