/*
Theme Name: PIL Pages
Theme URI: https://prosopisindustries.com
Author: Prosopis Industries Limited
Author URI: https://prosopisindustries.com
Description: A customizable, multi-page WordPress theme for Prosopis Industries Limited (PIL) — industrial packaging & technical textiles. Hero copy, stats, contact details and the logo are all editable from Appearance → Customize. Products, materials, "why us" points, global offices and certifications are editable in inc/content-data.php.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pil-pages
*/

:root{
  --forest:#1c5631;
  --forest-dark:#123d21;
  --forest-light:#2d7a44;
  --paper:#faf8f3;
  --stone:#eee8dc;
  --ink:#1c1b18;
  --slate:#69675f;
  --line:#dcd5c6;
  --white:#ffffff;

  --mat-pp:#e3e5de;
  --mat-pe:#dbe8e5;
  --mat-jute:#b98d5e;
  --mat-kraft:#c8a36b;
  --mat-tarp:#46524a;

  --display: 'Space Grotesk', 'Archivo', sans-serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
section{position:relative;}
::selection{background:var(--forest); color:var(--paper);}
:focus-visible{ outline: 2px solid var(--forest); outline-offset: 3px; }

.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--forest);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--forest); display:inline-block; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; letter-spacing:-0.01em; color:var(--ink); }

/* ---------- HEADER ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,248,243,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
  max-height:82px;
}
body.admin-bar header.site-header{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar header.site-header{ top:46px; }
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1200px; margin:0 auto; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img,
.brand .header-logo,
.brand img.custom-logo{ height:40px !important; width:40px !important; max-height:40px !important; max-width:40px !important; object-fit:contain; flex-shrink:0; }
.brand-text{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:0.01em; line-height:1.15; }
.brand-text span{
  display:block; font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:0.14em; color:var(--slate); text-transform:uppercase; margin-top:2px;
}
nav.links{ display:flex; gap:0; align-items:center; }
nav.links ul.menu{ display:flex; gap:32px; align-items:center; list-style:none; margin:0; padding:0; }
nav.links li{ position:relative; list-style:none; }
nav.links a{ font-size:14px; font-weight:500; color:var(--ink); position:relative; padding:4px 0; display:inline-block; }
nav.links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0%; height:2px;
  background:var(--forest); transition:width .25s ease;
}
nav.links a:hover::after{ width:100%; }

/* ---------- DROPDOWN (Products submenu) ---------- */
nav.links li.menu-item-has-children > a{ display:flex; align-items:center; gap:5px; }
nav.links li.menu-item-has-children > a::before{
  content:""; width:6px; height:6px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) translateY(-2px); order:2; transition:transform .2s ease;
}
nav.links li.menu-item-has-children:hover > a::before,
nav.links li.menu-item-has-children:focus-within > a::before{ transform:rotate(-135deg) translateY(1px); }
nav.links ul.sub-menu{
  list-style:none; margin:0; padding:8px 0; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); background:var(--stone,#fff); border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(20,20,20,0.12); min-width:220px; border-radius:4px;
  opacity:0; visibility:hidden; translate:0 6px; transition:opacity .18s ease, translate .18s ease;
  z-index:200;
}
nav.links li.menu-item-has-children:hover > ul.sub-menu,
nav.links li.menu-item-has-children:focus-within > ul.sub-menu{
  opacity:1; visibility:visible; translate:0 0;
}
nav.links ul.sub-menu li{ width:100%; }
nav.links ul.sub-menu a{
  display:block; padding:10px 20px; font-size:13.5px; white-space:nowrap; color:var(--ink);
}
nav.links ul.sub-menu a::after{ display:none; }
nav.links ul.sub-menu a:hover{ background:rgba(0,0,0,0.04); }

.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; padding:12px 20px; border-radius:2px;
  border:1px solid var(--forest); background:var(--forest); color:var(--paper); cursor:pointer;
  transition: all .2s ease;
}
.btn:hover{ background:var(--forest-dark); border-color:var(--forest-dark); color:var(--paper); }
.btn.ghost{ background:transparent; color:var(--forest); }
.btn.ghost:hover{ background:var(--forest); color:var(--paper); }

/* ---------- HERO ---------- */
.hero{ padding:168px 0 90px; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; align-items:end; }
.hero h1{ font-size:clamp(38px, 5.6vw, 64px); line-height:1.04; margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--forest); }
.hero p.lead{ font-size:17px; color:var(--slate); max-width:520px; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:14px; margin-bottom:8px; flex-wrap:wrap; }

.hero-stats{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; border-left:1px solid var(--line); padding-left:36px; }
.stat b{ font-family:var(--display); font-size:32px; display:block; color:var(--forest); line-height:1; }
.stat span{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); display:block; margin-top:8px; }

/* ---------- MATERIAL STRIP ---------- */
.ledger{ margin-top:64px; border-top:1px solid var(--line); padding-top:28px; }
.ledger-label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--slate); margin-bottom:16px; display:flex; justify-content:space-between; }
.ledger-strip{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; border:1px solid var(--line); }
.ledger-strip::-webkit-scrollbar{ display:none; }
.swatch{ flex:0 0 190px; border-right:1px solid var(--line); padding:16px 16px 18px; }
.swatch:last-child{ border-right:none; }
.swatch-chip{ width:100%; height:56px; border-radius:2px; margin-bottom:14px; border:1px solid rgba(0,0,0,0.06); }
.swatch h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; }
.swatch p{ font-family:var(--mono); font-size:11px; color:var(--slate); }

/* ---------- SECTIONS ---------- */
.section{ padding:96px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:56px; border-bottom:1px solid var(--line); padding-bottom:28px;
}
.section-head h2{ font-size:clamp(28px, 3.4vw, 42px); max-width:640px; }
.section-head p{ max-width:340px; color:var(--slate); font-size:14.5px; padding-bottom:4px; }

/* ---------- ABOUT / EXPERTISE ---------- */
.about{ background:var(--stone); }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; }
.about-copy p{ margin-bottom:18px; color:var(--ink); font-size:15.5px; max-width:520px; }
.about-copy p.muted{ color:var(--slate); }
.credentials{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.credential{ background:var(--paper); padding:26px 22px; }
.credential .num{ font-family:var(--mono); font-size:11px; color:var(--forest); letter-spacing:0.08em; display:block; margin-bottom:10px; }
.credential h4{ font-size:14px; margin-bottom:6px; }
.credential p{ font-size:12.5px; color:var(--slate); }

/* ---------- PRODUCTS ---------- */
.products-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.product-card{ background:var(--paper); padding:36px 30px; transition:background .2s ease; scroll-margin-top:110px; }
.product-card:hover{ background:var(--stone); }
.product-swatch{ width:100%; height:72px; border-radius:2px; margin-bottom:22px; border:1px solid rgba(0,0,0,0.06); }
.product-formula{ font-family:var(--mono); font-size:11px; color:var(--forest); letter-spacing:0.04em; margin-bottom:8px; display:block; }
.product-card h3{ font-size:20px; margin-bottom:12px; }
.product-card ul{ margin-bottom:0; }
.product-card ul li{
  font-size:13.5px; color:var(--slate); padding:8px 0; border-top:1px solid var(--line);
}
.product-card ul li:first-child{ border-top:none; }

/* ---------- WHY US ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.why-item .idx{ font-family:var(--mono); font-size:12px; color:var(--forest); margin-bottom:18px; display:block; }
.why-item h3{ font-size:16.5px; margin-bottom:10px; }
.why-item p{ font-size:13.5px; color:var(--slate); }

/* ---------- GLOBAL REACH ---------- */
.reach{ background:var(--forest); color:var(--paper); }
.reach .section-head{ border-color:rgba(250,248,243,0.2); }
.reach .section-head h2{ color:var(--paper); }
.reach .section-head p{ color:rgba(250,248,243,0.7); }
.reach-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:64px; align-items:center; }
.offices-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.offices-list li{
  font-family:var(--mono); font-size:13px; letter-spacing:0.03em; padding:10px 0;
  border-bottom:1px solid rgba(250,248,243,0.16); display:flex; justify-content:space-between;
}
.offices-list li span{ color:rgba(250,248,243,0.55); }
.worldmap{ width:100%; height:auto; }
.worldmap circle.circle{ fill:#f2c14e; }
.worldmap circle.grid-dot{ fill:rgba(250,248,243,0.18); }

/* ---------- CERTIFICATIONS ---------- */
.memberships{ display:flex; flex-wrap:wrap; gap:14px; }
.chip{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.03em; border:1px solid var(--line); padding:10px 16px; border-radius:2px; color:var(--slate); }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:64px; }
.contact-info h3{ font-size:15px; margin:26px 0 8px; }
.contact-info h3:first-child{ margin-top:0; }
.contact-info p{ font-size:14.5px; color:var(--slate); }
.contact-info a{ color:var(--forest); border-bottom:1px solid transparent; }
.contact-info a:hover{ border-color:var(--forest); }

form.quote-form{ display:grid; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); margin-bottom:8px; display:block; }
input, select, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--paper);
  font-family:var(--body); font-size:14px; color:var(--ink); border-radius:2px;
}
input:focus, select:focus, textarea:focus{ border-color:var(--forest); outline:none; }
textarea{ resize:vertical; min-height:100px; }
.form-note{ font-size:12px; color:var(--slate); margin-top:4px; }
.form-note.success{ color:var(--forest); font-weight:600; }
.form-note.error{ color:#a13a3a; font-weight:600; }

/* ---------- FOOTER ---------- */
footer.site-footer{ border-top:1px solid var(--line); padding:48px 0 28px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; margin-bottom:36px; flex-wrap:wrap; }
.footer-brand{ display:flex; gap:12px; align-items:center; }
.footer-brand img,
.footer-brand .footer-logo,
.footer-brand img.custom-logo{ height:32px !important; width:32px !important; max-height:32px !important; max-width:32px !important; object-fit:contain; flex-shrink:0; }
.footer-links{ display:flex; gap:40px; flex-wrap:wrap; }
.footer-links h5{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:12px; }
.footer-links a{ display:block; font-size:13.5px; margin-bottom:8px; color:var(--ink); }
.footer-links a:hover{ color:var(--forest); }
.footer-bottom{
  display:flex; justify-content:space-between; font-size:12px; color:var(--slate);
  padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap; gap:10px;
}

/* ---------- INNER PAGE HERO (About / Products / Why Us / Global Reach / Contact / product detail pages) ---------- */
.page-hero{ padding:160px 0 56px; border-bottom:1px solid var(--line); }
.page-hero.on-forest{ background:var(--forest); color:var(--paper); border-bottom:none; }
.page-hero.on-forest .eyebrow{ color:rgba(250,248,243,0.75); }
.page-hero.on-forest .eyebrow::before{ background:rgba(250,248,243,0.75); }
.page-hero.on-forest h1{ color:var(--paper); }
.page-hero.on-forest p.lead{ color:rgba(250,248,243,0.75); }
.page-hero h1{ font-size:clamp(32px, 4.6vw, 52px); line-height:1.06; margin-bottom:16px; max-width:760px; }
.page-hero p.lead{ font-size:16px; color:var(--slate); max-width:620px; }
.breadcrumb{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--slate); margin-bottom:20px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb a{ color:var(--forest); }
.breadcrumb a:hover{ text-decoration:underline; }
.page-hero.on-forest .breadcrumb{ color:rgba(250,248,243,0.55); }
.page-hero.on-forest .breadcrumb a{ color:var(--paper); }

/* ---------- HOMEPAGE TEASER CARDS (link out to inner pages) ---------- */
.teaser-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.teaser-card{ background:var(--paper); padding:32px 28px; transition:background .2s ease; display:flex; flex-direction:column; }
.teaser-card:hover{ background:var(--stone); }
.teaser-card .teaser-swatch{ width:100%; height:56px; border-radius:2px; margin-bottom:20px; border:1px solid rgba(0,0,0,0.06); }
.teaser-card h3{ font-size:18px; margin-bottom:10px; }
.teaser-card p{ font-size:13.5px; color:var(--slate); margin-bottom:20px; flex-grow:1; }
.teaser-card .teaser-link{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--forest); display:inline-flex; align-items:center; gap:6px; }
.teaser-card .teaser-link:hover{ text-decoration:underline; }
.section-foot{ margin-top:40px; text-align:center; }
@media (max-width:980px){ .teaser-grid{ grid-template-columns:1fr; } }

/* ---------- PAGE PHOTOS (Featured Image on About/Why Us/Global Reach) ---------- */
.page-photo{ width:100%; overflow:hidden; border-radius:4px; margin-bottom:24px; }
.page-photo img{ width:100%; height:auto; display:block; object-fit:cover; }

/* ---------- RESPONSIVE (inner pages) ---------- */
@media (max-width:760px){
  .page-hero{ padding:130px 0 40px; }
}


.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-stats{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:24px; grid-template-columns:repeat(4,1fr); }
  .about-grid, .reach-grid, .contact-grid{ grid-template-columns:1fr; }
  .products-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .credentials{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  nav.links{ display:none; }
  .nav .btn.ghost{ display:none; }
  .hero{ padding:140px 0 60px; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:64px 0; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .offices-list{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ---------- WORDPRESS CORE COMPATIBILITY ---------- */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important;
}
.alignleft{ float:left; margin-right:1.5em; }
.alignright{ float:right; margin-left:1.5em; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }