/*
Theme Name: Connecting Way Group
Theme URI: https://www.connecting-way.com
Author: Connecting Way Group
Author URI: https://www.connecting-way.com
Description: Corporate theme for Connecting Way Group — Integrated Corporate, Logistics & Travel Solutions in Iraq. Multilingual-ready (Polylang), RTL-ready, with dedicated custom post types for services, divisions, team members, clients and values so every section of the company profile is editable content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: connecting-way
Tags: business, corporate, custom-post-types, translation-ready, rtl-language-support, custom-menu, featured-images
*/

/* ================================================================
   Design tokens — derived from the Connecting Way Group profile:
   deep navy fields, a red action accent, a gold accent from the
   cover / back-cover, and the recurring diagonal image panel.
   ================================================================ */
:root{
  --navy:        #0a1f44;
  --navy-2:      #12295a;
  --navy-3:      #1b3a72;
  --red:         #d81e28;
  --red-dark:    #b3151d;
  --gold:        #c6972f;
  --ink:         #16202e;
  --muted:       #5a6675;
  --line:        #e2e6ec;
  --paper:       #ffffff;
  --paper-2:     #f4f6f9;
  --paper-3:     #eef1f6;

  --container:   1200px;
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 18px 44px -20px rgba(10,31,68,.35);
  --shadow-sm:   0 8px 22px -12px rgba(10,31,68,.28);

  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --body:    "Inter", "Segoe UI", system-ui, sans-serif;

  --step: clamp(1rem, .92rem + .4vw, 1.075rem);
}

/* Arabic / RTL locales get a typeface that carries Arabic well. */
:lang(ar){ --display:"Cairo", "Archivo", sans-serif; --body:"Cairo", "Inter", sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:var(--step);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{ font-family:var(--display); line-height:1.05; margin:0 0 .4em; color:var(--navy); font-weight:800; letter-spacing:-.01em; }
h1{ font-size:clamp(2.3rem, 1.6rem + 3.4vw, 4rem); }
h2{ font-size:clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h3{ font-size:clamp(1.2rem, 1rem + .7vw, 1.5rem); }

.container{ width:min(100% - 2.5rem, var(--container)); margin-inline:auto; }
.text-red{ color:var(--red); }

/* ---- accessibility ---- */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:4px;
}
.skip-link{ position:absolute; left:-999px; top:0; z-index:1000; background:var(--navy); color:#fff; padding:.7rem 1.1rem; }
.skip-link:focus{ left:1rem; top:1rem; }

/* ---- eyebrow / section heading device (red tick, echoes the profile) ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:.78rem; color:var(--red);
}
.eyebrow::before{ content:""; width:34px; height:3px; background:var(--red); display:block; }
.section-head{ max-width:64ch; margin-bottom:2.4rem; }
.section-head p{ color:var(--muted); font-size:1.06rem; }

/* ================================================================
   Header
   ================================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-inline-end:auto; }
.brand img{ height:44px; width:auto; }
.brand .brand-txt{ font-family:var(--display); font-weight:800; color:var(--navy); font-size:1.2rem; line-height:1; letter-spacing:-.01em; }
.brand .brand-txt b{ color:var(--red); }
.brand small{ display:block; font-family:var(--body); font-weight:500; font-size:.62rem; letter-spacing:.02em; color:var(--muted); margin-top:3px; }

.main-nav ul{ list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; }
.main-nav a{ color:var(--navy); font-weight:600; font-size:.95rem; }
.main-nav a:hover{ color:var(--red); text-decoration:none; }

.header-lang{ display:flex; align-items:center; gap:.4rem; }
.header-lang .lang-list{ display:flex; gap:.35rem; list-style:none; margin:0; padding:0; }
.header-lang a, .header-lang .current-lang{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:700; color:var(--navy);
  border:1px solid var(--line); border-radius:999px; padding:.28rem .6rem;
}
.header-lang .current-lang{ background:var(--navy); color:#fff; border-color:var(--navy); }
.header-cta{ background:var(--red); color:#fff; padding:.6rem 1.05rem; border-radius:999px; font-weight:700; font-size:.9rem; }
.header-cta:hover{ background:var(--red-dark); text-decoration:none; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; transition:.25s; }

/* ================================================================
   Buttons
   ================================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:999px; cursor:pointer; border:2px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red-dark); color:#fff; }
.btn-ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn-ghost:hover{ background:#fff; color:var(--navy); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); color:#fff; }

/* ================================================================
   Hero — diagonal image panel is the signature device
   ================================================================ */
.hero{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.hero::after{ /* subtle dotted world-map texture like the profile */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.4px, transparent 1.4px);
  background-size:22px 22px; opacity:.5; pointer-events:none;
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; padding-block:4.5rem; }
.hero .eyebrow{ color:#fff; }
.hero .eyebrow::before{ background:var(--red); }
.hero h1{ color:#fff; }
.hero h1 b{ color:var(--red); }
.hero p.lead{ font-size:1.15rem; color:#cfd6e4; max-width:52ch; margin:1.2rem 0 1.8rem; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:.9rem; }
.since-badge{
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.3rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:.4rem .9rem; font-weight:700; font-size:.85rem; color:#fff;
}
.since-badge b{ color:var(--gold); }

.hero-visual{ position:relative; }
.hero-slices{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; transform:skewX(-7deg); }
.hero-slices .slice{ height:340px; border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.hero-slices .slice img{ width:100%; height:100%; object-fit:cover; transform:skewX(7deg) scale(1.18); }
.hero-slices .slice:nth-child(2){ margin-top:26px; }
.hero-slices .slice:nth-child(3){ margin-top:52px; }

.hero-stats{ position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.12); }
.hero-stats .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-block:1.5rem; }
.hero-stats .stat b{ font-family:var(--display); font-size:1.5rem; color:#fff; display:block; }
.hero-stats .stat span{ font-size:.82rem; color:#aeb8cc; }

/* Trust strip */
.trust-strip{ background:var(--navy-2); color:#dfe4ee; }
.trust-strip .container{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; justify-content:center; padding-block:1rem; font-size:.85rem; font-weight:600; letter-spacing:.02em; }
.trust-strip span{ display:inline-flex; align-items:center; gap:.5rem; }
.trust-strip span::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--red); transform:rotate(45deg); }

/* ================================================================
   Generic section
   ================================================================ */
.section{ padding-block:5rem; }
.section--muted{ background:var(--paper-2); }
.section--navy{ background:var(--navy); color:#fff; }
.section--navy h2, .section--navy h3{ color:#fff; }
.section--navy .section-head p{ color:#c3cbdb; }

/* ---- About / vision / values ---- */
.about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:start; }
.about-lead p{ font-size:1.08rem; color:#33404f; }
.vv{ display:grid; gap:1.4rem; }
.vv-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm); }
.vv-card .ic{ width:46px; height:46px; border-radius:12px; background:var(--navy); color:#fff; display:grid; place-items:center; margin-bottom:.7rem; font-size:1.25rem; }
.vv-card h3{ margin-bottom:.3rem; }
.vv-card p{ margin:0; color:var(--muted); font-size:.96rem; }

.values-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; margin-top:3rem; }
.value{ text-align:center; }
.value .ic{ width:58px; height:58px; margin:0 auto .7rem; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; font-size:1.4rem; color:var(--red); box-shadow:var(--shadow-sm); }
.value h4{ font-size:1rem; margin-bottom:.15rem; }
.value p{ margin:0; font-size:.85rem; color:var(--muted); }

/* ================================================================
   Divisions — numbered, established years (real sequence => numbers ok)
   ================================================================ */
.divisions{ display:grid; gap:1.4rem; }
.division{
  display:grid; grid-template-columns:120px 1fr auto; gap:1.6rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.8rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.division::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:6px; background:var(--red); }
.division .num{ font-family:var(--display); font-weight:800; font-size:3.4rem; color:var(--paper-3); line-height:1; }
.division h3{ margin-bottom:.15rem; }
.division .sub{ color:var(--muted); font-size:.92rem; }
.division .est{ background:var(--navy); color:#fff; font-family:var(--display); font-weight:700; border-radius:999px; padding:.4rem .95rem; font-size:.85rem; white-space:nowrap; }
.division .est b{ color:var(--gold); }
.division p.desc{ grid-column:2 / -1; margin:.6rem 0 0; color:#39465a; font-size:.96rem; }

/* ================================================================
   Services grid
   ================================================================ */
.svc-group{ margin-top:3.2rem; }
.svc-group:first-of-type{ margin-top:0; }
.svc-group > h3{ font-size:1.15rem; letter-spacing:.02em; margin-bottom:1.3rem; padding-bottom:.7rem; border-bottom:2px solid var(--line); }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.3rem; }
.svc-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.5rem; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.svc-card::after{ content:""; position:absolute; top:0; inset-inline-end:0; border-width:0 42px 42px 0; border-style:solid; border-color:transparent var(--red) transparent transparent; opacity:.9; }
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.svc-card .num{ font-family:var(--display); font-weight:800; color:var(--red); font-size:.9rem; letter-spacing:.05em; }
.svc-card .ic{ width:52px; height:52px; border-radius:14px; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:1.4rem; margin:.5rem 0 .9rem; }
.svc-card h4{ font-family:var(--display); font-size:1.12rem; color:var(--navy); margin:0 0 .5rem; line-height:1.15; }
.svc-card p{ margin:0 0 1rem; color:var(--muted); font-size:.93rem; flex:1; }
.svc-card .more{ font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--red); display:inline-flex; align-items:center; gap:.35rem; }
.svc-card .more::after{ content:"→"; transition:transform .2s ease; }
.svc-card:hover .more::after{ transform:translateX(4px); }
[dir="rtl"] .svc-card .more::after{ content:"←"; }

/* ================================================================
   Team
   ================================================================ */
.team-block + .team-block{ margin-top:3rem; }
.team-block > h3{ font-size:1.15rem; margin-bottom:1.4rem; }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1.2rem; }
.team-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; text-align:center; box-shadow:var(--shadow-sm); }
.team-card .avatar{ width:74px; height:74px; margin:0 auto .8rem; border-radius:50%; object-fit:cover; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.5rem; overflow:hidden; }
.team-card h4{ font-size:1.02rem; margin:0 0 .2rem; }
.team-card p{ margin:0; font-size:.85rem; color:var(--muted); }
.section--navy .team-card{ background:var(--navy-2); border-color:rgba(255,255,255,.1); }
.section--navy .team-card p{ color:#aeb8cc; }

/* ================================================================
   Clients
   ================================================================ */
.clients-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:1rem; }
.client{ display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); min-height:96px; padding:1.1rem; box-shadow:var(--shadow-sm); transition:transform .2s ease; }
.client:hover{ transform:translateY(-3px); }
.client img{ max-height:52px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transition:.2s; }
.client:hover img{ filter:none; opacity:1; }
.client .name{ font-family:var(--display); font-weight:700; color:var(--navy); text-align:center; font-size:.95rem; }

/* ================================================================
   CTA band
   ================================================================ */
.cta-band{ position:relative; background:var(--red); color:#fff; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, var(--red) 55%, var(--red-dark)); }
.cta-band .container{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:3rem; }
.cta-band h2{ color:#fff; margin:0; max-width:22ch; }
.cta-band .btn-ghost{ border-color:#fff; }

/* ================================================================
   Single service page
   ================================================================ */
.svc-hero{ background:var(--navy); color:#fff; }
.svc-hero .container{ padding-block:3.2rem; }
.svc-hero .num{ font-family:var(--display); font-weight:800; color:var(--red); font-size:1.1rem; }
.svc-hero h1{ color:#fff; }
.svc-hero .grp{ display:inline-block; margin-bottom:.6rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.svc-body{ padding-block:3.5rem; }
.svc-body .layout{ display:grid; grid-template-columns:1fr 320px; gap:3rem; align-items:start; }
.svc-body .content p{ color:#33404f; }
.feature-list{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; }
.feature-list li{ display:flex; gap:.7rem; align-items:flex-start; }
.feature-list li::before{ content:"✓"; color:#fff; background:var(--red); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; flex:none; margin-top:2px; }
.svc-aside{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; position:sticky; top:100px; }
.svc-aside h4{ font-size:1rem; }
.svc-aside .contact-line{ display:flex; gap:.6rem; align-items:center; margin:.6rem 0; font-size:.92rem; color:var(--ink); }
.svc-aside .contact-line b{ color:var(--red); }

/* ================================================================
   Footer
   ================================================================ */
.site-footer{ background:var(--navy); color:#c7cfdd; }
.footer-top{ padding-block:3.5rem; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:2rem; }
.site-footer h4{ color:#fff; font-size:1rem; letter-spacing:.02em; margin-bottom:1rem; }
.site-footer .brand .brand-txt{ color:#fff; }
.site-footer .brand small{ color:#8f9cb3; }
.footer-desc{ font-size:.92rem; color:#9aa6bd; margin-top:1rem; max-width:34ch; }
.footer-menu ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.footer-menu a{ color:#c7cfdd; font-size:.93rem; }
.footer-menu a:hover{ color:#fff; }
.footer-contact div{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem; font-size:.92rem; }
.footer-contact .ic{ color:var(--red); flex:none; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:1.3rem; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center; font-size:.85rem; color:#8f9cb3; }
.footer-bottom .accent{ color:var(--gold); }

/* ================================================================
   Basic content / pagination
   ================================================================ */
.page-body{ padding-block:3.5rem; }
.page-body .entry-content{ max-width:72ch; }
.entry-content h2,.entry-content h3{ margin-top:1.6em; }
.entry-content ul,.entry-content ol{ padding-inline-start:1.3rem; }
.pagination{ display:flex; gap:.5rem; margin-top:2rem; flex-wrap:wrap; }
.pagination a,.pagination span{ padding:.5rem .9rem; border:1px solid var(--line); border-radius:8px; font-weight:600; color:var(--navy); }
.pagination .current{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1024px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-slices .slice{ height:230px; }
  .about-grid, .svc-body .layout{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .values-row{ grid-template-columns:repeat(2,1fr); }
  .hero-stats .container{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
  .main-nav{ position:fixed; inset:74px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:transform .28s ease; padding:1rem 1.25rem; }
  .main-nav.open{ transform:translateY(0); }
  .main-nav ul{ flex-direction:column; gap:.2rem; }
  .main-nav a{ display:block; padding:.7rem 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:block; }
  .header-cta{ display:none; }
  .division{ grid-template-columns:1fr; text-align:start; }
  .division .num{ font-size:2.4rem; }
  .division p.desc{ grid-column:1; }
  .footer-top{ grid-template-columns:1fr; }
  .cta-band .container{ flex-direction:column; align-items:flex-start; }
}