/* Wafra Engineering theme (KSA page).
   Palette taken from the approved Wafra logo gradient: #004024 → #106234 → #1B7B30.
   Everything else is a tint or shade of those greens. Loaded after pages.css; applies only under .theme-wafra. */

.theme-wafra {
  --w-deep: #004024;
  --w-mid: #106234;
  --w-green: #1b7b30;
  --w-tint: #a9d8b2;          /* light tint of the logo green, for text/accents on dark */

  --blue: var(--w-green);
  --blue-deep: var(--w-deep);
  --cyan: var(--w-tint);
  --spark: var(--w-mid);
  --blue-ink: var(--w-mid);

  --night: #021a10;
  --night-2: #05241a;
  --night-3: #0a3223;
  --on-night: #d3e3d8;
  --on-night-muted: #95ae9d;
  --glass: rgba(255, 255, 255, .06);
  --glass-line: rgba(169, 216, 178, .16);

  --paper: #f5f8f5;
  --card: #eaf1ec;
  --ink: #06140c;
  --text: #36463b;
  --muted: #637268;
  --line: #d9e4dc;
}
.theme-wafra ::selection { background: var(--w-green); color: #fff; }

/* Headline gradients */
.theme-wafra .grad-text { background: linear-gradient(100deg, #fff 0%, #fff 32%, #c9ecd0 60%, #7fcb8e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-wafra .grad-text-ink { background: linear-gradient(180deg, var(--w-green), var(--w-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Replace blue glows with green */
.theme-wafra .tag::before { box-shadow: 0 0 0 3px rgba(27, 123, 48, .2); }
.theme-wafra .dark .tag::before { background: var(--w-tint); box-shadow: 0 0 10px rgba(169, 216, 178, .9); }
.theme-wafra .hero::before {
  background: radial-gradient(40% 50% at 50% 40%, rgba(27, 123, 48, .5), transparent 70%),
              radial-gradient(28% 36% at 70% 30%, rgba(169, 216, 178, .2), transparent 70%),
              radial-gradient(24% 30% at 30% 55%, rgba(0, 64, 36, .6), transparent 70%);
}
.theme-wafra .hero-media::after {
  background: radial-gradient(ellipse 70% 60% at 30% 55%, rgba(2, 26, 16, .6), rgba(2, 26, 16, .2) 70%),
              linear-gradient(180deg, rgba(2, 26, 16, .6) 0%, rgba(2, 26, 16, .15) 35%, rgba(2, 26, 16, .45) 70%, var(--night) 100%);
}
.theme-wafra .hero-media video.is-playing { opacity: .85; }
.theme-wafra .spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(27, 123, 48, .14), transparent 45%); }
.theme-wafra .dark .spot::before, .theme-wafra .spot.on-dark::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(169, 216, 178, .16), transparent 45%); }
.theme-wafra .band::before { background: radial-gradient(50% 50% at 50% 50%, rgba(27, 123, 48, .45), transparent 70%); }
.theme-wafra .cta-panel::before { background: radial-gradient(50% 50% at 50% 50%, rgba(27, 123, 48, .6), rgba(169, 216, 178, .14) 45%, transparent 70%); }
.theme-wafra .cert::before { background: radial-gradient(circle, rgba(169, 216, 178, .35), transparent 65%); }
.theme-wafra .photo-tile::after { background: linear-gradient(180deg, rgba(2, 26, 16, 0) 35%, rgba(2, 26, 16, .9)); }
.theme-wafra .project-card .year { background: rgba(2, 26, 16, .65); }
.theme-wafra .field input:focus, .theme-wafra .field textarea:focus, .theme-wafra .field select:focus { border-color: var(--w-green); box-shadow: 0 0 0 4px rgba(27, 123, 48, .18); }
.theme-wafra .btn-light:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 12px 40px rgba(169, 216, 178, .35); }

/* Primary actions in Wafra green */
.theme-wafra .btn-ink { background: linear-gradient(180deg, var(--w-green), var(--w-mid)); color: #fff; }
.theme-wafra .btn-ink:hover { color: #fff; box-shadow: 0 12px 30px rgba(0, 64, 36, .35); }
.theme-wafra .btn-ink .arrow { background: #fff; color: var(--w-deep); }
.theme-wafra .btn-light .arrow { background: var(--w-deep); }
.theme-wafra .site-nav ul a[aria-current="page"], .theme-wafra .site-header.on-light .site-nav ul a[aria-current="page"] { background: var(--w-deep); color: #fff; }
.theme-wafra .checks li::before { background-color: var(--w-green); }
.theme-wafra .contact-card .ico, .theme-wafra .download .file, .theme-wafra .float-card .badge { background: var(--w-deep); }

/* Header lockup (approved POWER x Wafra logo) */
.theme-wafra .site-header .brand img { height: 48px; }
@media (max-width: 1000px) { .theme-wafra .site-header .brand img { height: 38px; } }
.theme-wafra .site-footer .brand img { height: 64px; }

/* Hero Wafra logo badge */
.wafra-badge { display: flex; width: fit-content; margin: 0 0 1.4rem; padding: .9rem 1.3rem; background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.wafra-badge img { display: block; height: clamp(40px, 5.5vw, 64px); width: auto; }
.hero-left .lead { max-width: 44rem; }

/* POWER ↔ Wafra relationship diagram */
.group-link { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: stretch; }
.group-link .node { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.group-link .node .logo { align-self: flex-start; height: 64px; width: auto; }
.group-link .node h3 { margin: 0; }
.group-link .node p { margin: 0; color: var(--muted); }
.group-link .connector { position: relative; display: grid; place-items: center; }
.group-link .connector::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--w-green) 0 10px, transparent 10px 18px); background-size: 36px 2px; animation: wafra-flow 1.6s linear infinite; }
.group-link .connector span { position: relative; padding: .5rem .8rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.3; color: #fff; background: var(--w-deep); border-radius: var(--pill); }
@keyframes wafra-flow { to { background-position: 36px 0; } }
@media (max-width: 860px) {
  .group-link { grid-template-columns: 1fr; }
  .group-link .connector { height: 90px; }
  .group-link .connector::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--w-green) 0 10px, transparent 10px 18px); background-size: 2px 36px; animation-name: wafra-flow-v; }
  @keyframes wafra-flow-v { to { background-position: 0 36px; } }
}
.shared-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.shared-list li { padding: 1.1rem 1.2rem; background: var(--card); border-radius: var(--radius); }
.shared-list strong { display: block; color: var(--ink); }
.shared-list span { font-size: .92rem; color: var(--muted); }

/* History timeline */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 118px; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(180deg, var(--w-tint), var(--w-green) 40%, var(--w-deep)); opacity: .5; }
.timeline li { position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 0 3rem; padding: 0 0 2.4rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::after { content: ""; position: absolute; left: 112px; top: .45rem; width: 14px; height: 14px; border-radius: 50%; background: var(--night); border: 2px solid var(--w-tint); box-shadow: 0 0 0 5px rgba(169, 216, 178, .12); }
.timeline li.now::after { background: var(--w-tint); box-shadow: 0 0 18px rgba(169, 216, 178, .8); }
.timeline .when { font-family: var(--mono); font-size: .9rem; color: var(--w-tint); text-align: right; padding-top: .1rem; }
.timeline h3 { margin: 0 0 .4rem; font-size: 1.2rem; color: #fff; }
.timeline p { margin: 0; color: var(--on-night-muted); max-width: 42rem; }
@media (max-width: 600px) {
  .timeline::before { left: 7px; }
  .timeline li { grid-template-columns: 1fr; padding-left: 2rem; }
  .timeline li::after { left: 1px; }
  .timeline .when { text-align: left; margin-bottom: .3rem; }
}

/* Facts table (company details) */
.facts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.facts-list li { padding: 1.1rem 1.25rem; background: var(--white); }
.facts-list .k { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts-list .v { color: var(--ink); font-weight: 500; }