/*
Theme Name: Papple Group
Theme URI: https://www.papple.net
Author: Papple Group
Author URI: https://www.mrahaman.com
Description: Official corporate theme for papple.net — the global advisory, innovation, research, technology and talent ecosystem connecting Papple Global, PGAN and PappleMart. Includes templates for About, Ecosystem, Advisory, Innovation, Research, Sustainability, Investors, Media, Careers, the PGAN Affiliate Program, and Contact.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: papple-group
*/

/* ==========================================================================
   Papple Group — Design System
   Warm-neutral, editorial, minimal corporate design language.
   ========================================================================== */

/* Google Fonts are enqueued as a separate <link> in header.php (via
   papple_group_scripts() in functions.php), not @import here — an @import
   inside the theme stylesheet would force the browser to fetch this file
   first and only then discover and fetch the font request, adding a serial
   round-trip that delays text rendering (LCP). A parallel <link> avoids it. */

:root{
  /* Core palette — from brand brief, restrained use */
  --bg:#F7F7F5;
  --white:#FFFFFF;
  --text:#242424;
  --muted:#707070;
  --dark:#20201F;
  --accent:#C86F4D;       /* Papple terracotta accent */
  --accent-dark:#A85838;
  --accent-tint:#F3E4DC;
  --green:#0D5C4A;        /* Deep green */
  --green-dark:#0A4A3B;
  --green-tint:#E4F1EC;
  --navy:#0B1F3A;         /* Navy */
  --navy-dark:#070F1D;
  --navy-tint:#E8ECF2;
  --gold:#C8A24A;         /* Gold accent */
  --gold-dark:#A8863A;

  --border:rgba(32,32,31,0.10);
  --border-strong:rgba(32,32,31,0.16);
  --shadow-sm:0 1px 2px rgba(11,31,58,0.05);
  --shadow-md:0 8px 24px rgba(11,31,58,0.08);
  --shadow-lg:0 24px 64px rgba(11,31,58,0.14);

  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --radius-full:999px;

  --max:1240px;
  --max-narrow:760px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure{margin:0}
input,select,textarea{font:inherit}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--max);margin:0 auto;padding:0 40px}
.container-narrow{max-width:var(--max-narrow);margin:0 auto;padding:0 40px}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:999;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- Eyebrow / section headers ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent-dark);
  font-weight:500;
  margin:0 0 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--accent);display:inline-block}
.eyebrow.on-dark{color:var(--gold)}
.eyebrow.on-dark::before{background:var(--gold)}

.section-head{max-width:640px;margin:0 0 48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.4vw,38px);line-height:1.2;color:var(--dark);margin:0 0 14px}
.section-head p{color:var(--muted);font-size:16px;line-height:1.65}
.section-head.on-dark h2{color:#fff}
.section-head.on-dark p{color:rgba(255,255,255,0.72)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:14.5px;
  padding:13px 26px;border-radius:var(--radius-full);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:all .2s var(--ease);
  line-height:1.2;
}
.btn-lg{padding:15px 30px;font-size:15.5px}
.btn-sm{padding:9px 18px;font-size:13.5px}
.btn-primary{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn-primary:hover{background:var(--navy);border-color:var(--navy)}
.btn-accent{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark)}
.btn-accent:hover{background:#8E4A2F;border-color:#8E4A2F}
.btn-outline{background:transparent;color:var(--dark);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--dark);background:var(--white)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,0.08)}
.btn-ghost{background:transparent;color:var(--navy);border-color:transparent;padding-left:4px;padding-right:4px}
.btn-ghost:hover{color:var(--accent)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,247,245,0.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;max-width:var(--max);margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--dark)}
.logo .mark{width:30px;height:30px;flex:none}
.logo .mark svg{width:100%;height:100%}
.nav-items{display:flex;align-items:center;gap:2px}
.nav-items a{
  font-size:14px;padding:9px 14px;border-radius:var(--radius-full);color:var(--text);
  transition:color .2s,background .2s;position:relative;
}
.nav-items a:hover{color:var(--accent)}
.nav-items a[aria-current="page"]{color:var(--navy);font-weight:600;background:rgba(11,31,58,0.06)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:1px solid var(--border-strong);border-radius:8px;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
.nav-mobile-panel{display:none}

/* ---------- Hero ---------- */
.hero{padding:120px 40px 84px;position:relative;overflow:hidden}
.hero-inner{max-width:820px;margin:0 auto;text-align:center;position:relative;z-index:2}
.hero .eyebrow{justify-content:center}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,5.4vw,64px);line-height:1.08;letter-spacing:-0.01em;color:var(--dark);margin:0 0 24px}
.hero p.lede{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 40px;line-height:1.7}
.hero .btn-row{justify-content:center}
.hero-net{position:absolute;inset:0;z-index:1;opacity:0.55;pointer-events:none}
.hero-net svg{width:100%;height:100%}

.page-hero{padding:64px 40px 56px;border-bottom:1px solid var(--border)}
.page-hero .container{max-width:900px}
.page-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.6vw,46px);line-height:1.14;color:var(--dark);margin:0 0 16px}
.page-hero p.lede{font-size:17px;color:var(--muted);max-width:640px;line-height:1.7;margin:0 0 28px}
.breadcrumb{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:20px;letter-spacing:.02em}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}

/* ---------- Sections ---------- */
.section{padding:96px 40px}
.section-sm{padding:64px 40px}
.section.surface{background:var(--white)}
.section.dark{background:var(--navy);color:#fff}
.section.dark-alt{background:linear-gradient(135deg,var(--navy-dark),var(--green-dark))}
.section.tint{background:var(--accent-tint)}

/* ---------- Grids ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}

/* ---------- Cards ---------- */
.card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:30px 28px;transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card .icon{width:44px;height:44px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--navy)}
.card .icon svg{width:20px;height:20px}
.card h3{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--dark);margin:0 0 10px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0}
.card .tag{margin-top:16px}

.card-dark{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-md);padding:26px 22px}
.card-dark h3{color:#fff;font-family:var(--font-display);font-size:17px;margin:0 0 8px}
.card-dark p{color:rgba(255,255,255,0.7);font-size:13.5px;line-height:1.6;margin:0}
.card-dark .icon{color:var(--gold);margin-bottom:12px}
.card-dark .icon svg{width:22px;height:22px}

/* Company / ecosystem card */
.company-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px 28px;display:flex;flex-direction:column;gap:14px;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.company-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
.company-card .badge-row{display:flex;justify-content:space-between;align-items:flex-start}
.company-card .mono{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.company-card h3{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--dark)}
.company-card .purpose{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-dark);font-weight:500}
.company-card p{font-size:14.5px;color:var(--muted);line-height:1.65;flex:1}
.company-card .domain{font-family:var(--font-mono);font-size:13px;color:var(--navy)}

/* ---------- Badges / Tags ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  padding:6px 12px;border-radius:var(--radius-full);font-weight:500;
}
.badge-gold{background:rgba(200,162,74,0.16);color:var(--gold-dark)}
.badge-green{background:var(--green-tint);color:var(--green-dark)}
.badge-navy{background:var(--navy-tint);color:var(--navy)}
.badge-accent{background:var(--accent-tint);color:var(--accent-dark)}
.badge.on-dark{background:rgba(200,162,74,0.18);color:var(--gold)}

.tag{
  display:inline-block;font-size:12px;padding:5px 12px;border-radius:var(--radius-full);
  border:1px solid var(--border-strong);color:var(--muted);font-weight:500;
}

/* ---------- Filter pills / tabs ---------- */
.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  padding:9px 18px;border-radius:var(--radius-full);border:1px solid var(--border-strong);
  background:var(--white);color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer;
  transition:all .2s var(--ease);
}
.pill:hover{border-color:var(--dark);color:var(--dark)}
.pill.active{background:var(--dark);border-color:var(--dark);color:#fff}

.search-input{
  font-family:var(--font-body);font-size:14.5px;padding:12px 16px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--white);
  outline:none;width:100%;transition:border-color .2s;
}
.search-input:focus{border-color:var(--navy)}

/* ---------- Stat placeholder tiles ---------- */
.stat-tile{text-align:center;padding:28px 16px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md)}
.stat-tile .num{font-family:var(--font-display);font-size:34px;color:var(--muted)}
.stat-tile .label{font-size:13px;color:var(--muted);margin-top:8px}
.stat-tile.on-dark{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.14)}
.stat-tile.on-dark .num{color:var(--gold)}
.stat-tile.on-dark .label{color:rgba(255,255,255,0.7)}

/* ---------- Timeline ---------- */
.timeline{display:flex;flex-direction:column}
.timeline-item{display:grid;grid-template-columns:88px 1fr;gap:24px}
.timeline-item .year-col{display:flex;flex-direction:column;align-items:center}
.timeline-item .year{font-family:var(--font-mono);font-size:13.5px;color:var(--accent-dark);padding-top:2px}
.timeline-item .dot{width:10px;height:10px;border-radius:50%;background:var(--navy);margin:10px 0}
.timeline-item .line{flex:1;width:2px;background:var(--border-strong);min-height:36px}
.timeline-item .body{padding-bottom:34px}
.timeline-item .body h4{font-size:16.5px;font-weight:600;color:var(--dark);margin:0 0 6px}
.timeline-item .body p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
.timeline.on-dark .year{color:var(--gold)}
.timeline.on-dark .dot{background:var(--gold)}
.timeline.on-dark .line{background:rgba(255,255,255,0.2)}
.timeline.on-dark .body h4{color:#fff}
.timeline.on-dark .body p{color:rgba(255,255,255,0.7)}

/* ---------- Org / Ecosystem diagram ---------- */
.org-diagram{text-align:center}
.org-root{
  display:inline-flex;align-items:center;gap:10px;padding:16px 30px;background:var(--navy);color:#fff;
  border-radius:var(--radius-md);font-family:var(--font-display);font-size:19px;
}
.org-trunk{width:2px;height:32px;background:var(--border-strong);margin:0 auto}
.org-row{display:flex;justify-content:center;gap:0;flex-wrap:wrap}
.org-branch{display:flex;flex-direction:column;align-items:center;padding:0 18px;max-width:280px}
.org-branch .stem{width:2px;height:24px;background:var(--border-strong)}
.org-connector{display:flex;justify-content:center}
.org-connector svg{display:block;max-width:900px;width:100%;height:auto}

/* ---------- Accordion (native <details>) ---------- */
.accordion{border-top:1px solid var(--border)}
.accordion-item{border-bottom:1px solid var(--border)}
.accordion-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:20px 4px;font-weight:600;font-size:15.5px;color:var(--dark);list-style:none;
}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item summary::after{content:"+";font-size:20px;color:var(--muted);flex:none;transition:transform .2s}
.accordion-item[open] summary::after{content:"–"}
.accordion-item .accordion-body{padding:0 4px 22px;color:var(--muted);font-size:14.5px;line-height:1.7;max-width:680px}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;color:var(--text);font-weight:600}
.field .req{color:var(--accent-dark)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:14.5px;padding:12px 14px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--white);outline:none;width:100%;transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy)}
.field textarea{resize:vertical}
.form-note{
  display:flex;gap:10px;background:var(--accent-tint);border:1px solid rgba(200,111,77,0.28);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:13px;color:var(--accent-dark);line-height:1.6;
}
.form-note svg{flex:none;width:18px;height:18px;margin-top:1px}
.form-success{display:none;text-align:center;padding:40px 16px}
.form-success.show{display:block}
.form-success .icon{width:52px;height:52px;border-radius:50%;background:var(--green-tint);color:var(--green-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,31,58,0.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:300;padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:640px;max-width:100%;max-height:88vh;overflow-y:auto;padding:36px;
}
.modal-narrow{width:420px}
.modal-close{position:sticky;top:0;float:right;background:none;border:none;cursor:pointer;color:var(--muted);font-size:22px;line-height:1}
.modal h2{font-family:var(--font-display);font-size:24px;color:var(--dark);margin:0 0 6px}
.modal p.sub{font-size:14px;color:var(--muted);margin:0 0 24px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--dark);color:#fff;padding:14px 22px;border-radius:var(--radius-full);
  font-size:14px;box-shadow:var(--shadow-lg);z-index:400;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Newsletter / CTA banner ---------- */
.cta-banner{border-radius:var(--radius-lg);padding:64px 48px;text-align:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,0.82);padding:80px 40px 32px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.footer-brand .logo{color:#fff}
.footer-brand p{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.7;margin:16px 0 20px;max-width:280px}
.footer-col h4{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin:0 0 16px;font-weight:500}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14px;color:rgba(255,255,255,0.72);transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-col .ext svg{width:11px;height:11px;margin-left:5px;opacity:.6}
.social-row{display:flex;gap:10px;margin-top:18px}
.social-placeholder{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);cursor:not-allowed;
}
.social-placeholder svg{width:16px;height:16px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  font-size:13px;color:rgba(255,255,255,0.5);
}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap}
.footer-legal a{color:rgba(255,255,255,0.5)}
.footer-legal a:hover{color:#fff}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mx-auto{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}
.placeholder-box{
  border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:32px;
  text-align:center;color:var(--muted);font-size:14px;
}
.divider{height:1px;background:var(--border);border:none;margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav{padding:16px 20px}
  .nav-items{display:none}
  .nav-toggle{display:flex}
  .nav-right .btn{display:none}
  .nav-mobile-panel.open{
    display:block;position:fixed;inset:0 0 0 0;top:73px;background:var(--bg);z-index:99;
    padding:20px;overflow-y:auto;
  }
  .nav-mobile-panel a{display:block;padding:16px 6px;font-size:17px;border-bottom:1px solid var(--border);color:var(--text)}
  .nav-mobile-panel a[aria-current="page"]{color:var(--accent);font-weight:600}
  .nav-mobile-panel .btn{margin-top:20px;width:100%}
  .hero{padding:88px 20px 56px}
  .page-hero{padding:48px 20px 40px}
  .section{padding:64px 20px}
  .section-sm{padding:48px 20px}
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .form-grid{grid-template-columns:1fr}
  .org-row{flex-direction:column;align-items:center;gap:24px}
}
@media (max-width:680px){
  .grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .modal{padding:26px}
  .cta-banner{padding:44px 24px}
}
@media (max-width:480px){
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ---------- Focus visibility (accessibility) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:4px;
}
.btn:focus-visible{outline-color:var(--dark)}
.pill:focus-visible,.social-placeholder:focus-visible{outline-offset:2px}

/* ---------- Honeypot spam trap (hidden from people, visible to bots) ---------- */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}