/*
Theme Name: ICCL Industrial
Theme URI: https://icclksa.com/
Author: ICCL — Instrumentation & Controls Co. Ltd.
Author URI: https://icclksa.com/
Description: Industrial / engineering theme for ICCL — Saudi Arabia's pioneering manufacturer of instrumentation valves. Includes templates for the homepage and four product/landing pages: Double Block & Bleed Valves, Manifold Valves, Gate Valves, and the Manufacturer story page. Built with Archivo + IBM Plex Sans + IBM Plex Mono on a cream-paper / ink palette with blueprint-style detailing.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
License URI: https://icclksa.com/
Text Domain: iccl-industrial
Tags: industrial, manufacturing, b2b, saudi-arabia
*/

/* =========================================================
   ICCL Industrial — Theme Stylesheet
   ----------------------------------------------------------
   The theme uses Tailwind CDN (loaded in header.php) for
   utility classes, plus this file for design tokens and
   the small set of bespoke components (buttons, cards,
   technical labels, marquee, animated diagrams).
   ========================================================= */

:root {
  /* Neutrals */
  --ink: #0E1822;
  --ink-2: #1B2734;
  --paper: #F4F0E8;
  --paper-2: #ECE6D9;
  --rule: #2A3645;
  --rule-soft: #C9C0AC;
  --steel: #5C6B7A;

  /* Accent palette — used per-page for differentiation */
  --gold: #A87E3D;
  --gold-deep: #7C5A26;
  --gold-soft: #E2D2AE;
  --oasis: #3D5934;        /* manufacturer page */
  --oasis-deep: #2A3F23;
  --oasis-soft: #B5C2A8;
  --amber: #E37B1E;        /* DBB valves */
  --amber-deep: #B85F12;
  --arc: #2B5F8A;          /* manifold valves */
  --arc-deep: #1B4264;
  --arc-soft: #B6CFE0;
  --oxide: #8B2F1E;        /* gate valves */
  --oxide-deep: #62200F;
  --oxide-soft: #DCB8AE;
  --signal: #C84B31;
  --safety: #D8462C;
  --good: #2F6B3E;
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Archivo', sans-serif; font-stretch: 90%; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }

/* Subtle grain overlay */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Technical labels */
.number-stamp { font-family: 'IBM Plex Mono', monospace; letter-spacing: -0.02em; }
.label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
}
.label-light {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 240, 232, .6);
}

/* Buttons */
.btn-primary {
  background: var(--ink); color: var(--paper); padding: 16px 28px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .2s ease; border: 1px solid var(--ink);
}
.btn-primary:hover {
  background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-1px);
}
.btn-secondary {
  background: transparent; color: var(--ink); padding: 16px 28px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--ink); transition: all .2s ease;
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

/* Corner ticks (drawing-frame motif) */
.corner-tick { position: relative; }
.corner-tick::before, .corner-tick::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--ink);
}
.corner-tick::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.corner-tick::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

/* Nav underline animation */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  height: 1px; width: 0; background: var(--ink);
  transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(8px); animation: reveal .8s ease forwards; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
.stagger-1 { animation-delay: .1s; }
.stagger-2 { animation-delay: .25s; }
.stagger-3 { animation-delay: .4s; }
.stagger-4 { animation-delay: .55s; }
.stagger-5 { animation-delay: .7s; }

/* Disclosure widgets */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; cursor: pointer; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }

/* Form inputs */
input, select, textarea {
  background: transparent; border: none;
  border-bottom: 1px solid var(--rule-soft);
  padding: 14px 0; width: 100%;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 15px;
  color: var(--ink); transition: border-color .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-bottom-color: var(--gold);
}
::placeholder { color: var(--steel); }

/* Marquee strip */
.marquee { display: flex; gap: 64px; animation: marquee 50s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Ornament + stat number */
.ornament-line {
  height: 1px;
  background-image: linear-gradient(to right, var(--gold) 50%, transparent 50%);
  background-size: 8px 1px;
}
.stat-number {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  line-height: 0.9; letter-spacing: -0.04em;
}
.arabesque {
  color: var(--gold); font-family: 'IBM Plex Sans', sans-serif;
  font-style: italic; font-weight: 500;
}

/* Spec-row — DBB and others */
.spec-row:not(:last-child) { border-bottom: 1px solid var(--rule-soft); }

/* Backgrounds */
.blueprint-bg {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
}
.grid-bg {
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
  opacity: 0.18;
}

/* Homepage — feature cards */
.feature-card {
  position: relative; overflow: hidden; transition: all .35s ease;
  background: var(--paper); border: 1px solid var(--rule-soft);
}
.feature-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, var(--gold));
  transform: scaleY(0); transform-origin: top;
  transition: transform .35s ease;
}
.feature-card:hover::before { transform: scaleY(1); }
.feature-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.feature-card .arrow { transition: transform .3s ease; }
.feature-card:hover .arrow { transform: translateX(8px); }
.feature-card .accent-tag { background: var(--accent, var(--gold)); }

/* Manufacturer — product cards */
.product-card { transition: all .3s ease; position: relative; overflow: hidden; }
.product-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--oasis); transform: scaleY(0); transform-origin: top;
  transition: transform .3s ease;
}
.product-card:hover::before { transform: scaleY(1); }
.product-card:hover { background: var(--paper-2); padding-left: 32px; }
.arrow-icon { transition: transform .25s ease; }
.product-card:hover .arrow-icon { transform: translateX(6px); }

/* Manufacturer — KSA map */
.ksa-map path { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; }
.ksa-pin { fill: var(--oasis); stroke: var(--paper); stroke-width: 2; }
.ksa-pin-pulse {
  fill: var(--oasis); opacity: 0.3; transform-origin: center;
  animation: pulse 2s infinite ease-in-out;
}

/* Homepage — pulse dot for KSA pin */
.pulse-dot { animation: pulse 2.4s infinite ease-in-out; transform-origin: center; }
@keyframes pulse {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: 0; transform: scale(2.6); }
}
.hero-frame { position: relative; }

/* Manifold — config tabs */
.config-tab {
  cursor: pointer; padding: 22px 24px; border-right: 1px solid var(--rule-soft);
  transition: all .25s ease; position: relative;
}
.config-tab:last-child { border-right: none; }
.config-tab.active { background: var(--ink); color: var(--paper); }
.config-tab.active .config-num { color: var(--arc-soft); }
.config-tab.active .label { color: rgba(244, 240, 232, .6); }
.config-tab:not(.active):hover { background: var(--paper-2); }
.config-num {
  font-family: 'Archivo', sans-serif; font-size: 64px;
  line-height: 1; font-weight: 700; color: var(--arc);
  transition: color .25s ease;
}
.config-pane { display: none; }
.config-pane.active { display: grid; }

/* Manifold — brand logo strip */
.brand-logo {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 22px;
  font-style: italic; font-weight: 500;
  color: var(--steel); opacity: .65; transition: opacity .2s ease;
}
.brand-logo:hover { opacity: 1; color: var(--ink); }

/* Manifold — schematic frame */
.schematic-frame { position: relative; }
.schematic-frame::before {
  content: ""; position: absolute; inset: -1px;
  border: 1px solid var(--rule-soft); pointer-events: none;
}

/* Gate — animated cross-section */
.gate-element { animation: gateSlide 4s ease-in-out infinite; }
@keyframes gateSlide {
  0%, 20% { transform: translateY(0); }
  50%, 70% { transform: translateY(-58px); }
  100% { transform: translateY(0); }
}
.stem-grip { animation: stemRotate 4s ease-in-out infinite; transform-origin: 200px 60px; }
@keyframes stemRotate {
  0%, 20% { transform: rotate(0deg); }
  50%, 70% { transform: rotate(-360deg); }
  100% { transform: rotate(0deg); }
}

/* Gate — sizing visualization */
.size-bar {
  background: var(--paper-2); position: relative; height: 16px; border: 1px solid var(--ink);
}
.size-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--oxide); }

/* Gate — type cards */
.type-card { transition: all .25s ease; }
.type-card:hover { transform: translateY(-3px); border-color: var(--oxide); }

/* Gate — material pills */
.material-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--rule-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: .08em;
  transition: all .2s ease;
}
.material-pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.material-pill .swatch { width: 14px; height: 14px; border: 1px solid var(--rule-soft); }

/* Reveal animation reset for screen-readers / no-anim */
@media (prefers-reduced-motion: reduce) {
  .reveal, .marquee, .pulse-dot, .ksa-pin-pulse,
  .gate-element, .stem-grip { animation: none; }
  .reveal { opacity: 1; transform: none; }
}