/* ============================================================
   PPDC Group of Companies — shared stylesheet
   Base brand: PPDC (Deep Majlis Teal / Omani Copper / Sandstone)
   Subpages layer their own portfolio-company accent on top.
   ============================================================ */

:root {
  /* PPDC — base identity */
  --ppdc-teal: #0F4B4A;
  --ppdc-copper: #B56E45;
  --ppdc-sandstone: #D9C5A5;
  --ppdc-charcoal: #202629;
  --ppdc-pearl: #F7F5F0;

  /* ABS */
  --abs-gold: #D09A2B;
  --abs-teal: #3A6E7C;
  --abs-gray: #958A88;
  --abs-navy: #1D2D3D;

  /* Al Oula */
  --aloula-charcoal: #2D3748;
  --aloula-copper: #B97C50;

  /* Marasi — sampled directly from Marasi's own logo file this session
     (no formal brand guideline was found; see README "Sources & Assumptions") */
  --marasi-orange: #F15024;
  --marasi-charcoal: #1C1C1C;

  /* A'Shahiq — no confirmed brand yet; uses PPDC family with a distinct
     entertainment-portfolio accent (deep sea-blue), flagged in README */
  --ashahiq-blue: #0E5E73;

  --radius: 4px;
  --max-width: 1180px;
  --font-body: 'Inter', 'Aptos', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ppdc-charcoal);
  background: var(--ppdc-pearl);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / nav ---------- */

header.site-header {
  background: var(--ppdc-pearl);
  border-bottom: 1px solid rgba(32,38,41,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark img { height: 40px; width: auto; }

.brand-mark .brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ppdc-teal);
  letter-spacing: 0.02em;
}

.brand-mark .brand-sub {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--ppdc-charcoal);
  opacity: 0.65;
  letter-spacing: 0.04em;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}

nav.main-nav a {
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ppdc-charcoal);
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  background: var(--ppdc-teal);
  color: var(--ppdc-pearl);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--ppdc-teal);
  cursor: pointer;
}

@media (max-width: 860px) {
  nav.main-nav {
    display: none;
    width: 100%;
    padding: 8px 0 20px;
  }
  nav.main-nav.open { display: block; }
  nav.main-nav ul { flex-direction: column; gap: 2px; }
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(135deg, var(--ppdc-teal) 0%, #123f3e 100%);
  color: var(--ppdc-pearl);
  padding: 96px 0 88px;
}

.hero.entity-hero { padding: 76px 0 64px; }

.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ppdc-sandstone);
  margin: 0 0 14px;
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 20px;
  max-width: 820px;
}

.hero p.lede {
  font-size: 1.15rem;
  max-width: 640px;
  color: rgba(247,245,240,0.88);
  margin: 0 0 32px;
}

.hero .tagline {
  font-style: italic;
  color: var(--ppdc-sandstone);
  font-size: 1rem;
  margin-top: 8px;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-copper {
  background: var(--ppdc-copper);
  color: #fff;
}

.btn-outline {
  border-color: rgba(247,245,240,0.55);
  color: var(--ppdc-pearl);
}

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Sections ---------- */

section { padding: 72px 0; }
section.tight { padding: 48px 0; }
section.alt { background: #fff; }

h2.section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--ppdc-teal);
  margin: 0 0 12px;
}

p.section-lede {
  max-width: 700px;
  color: rgba(32,38,41,0.78);
  margin: 0 0 40px;
  font-size: 1.02rem;
}

/* Portfolio grid on the PPDC homepage */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.portfolio-card {
  background: #fff;
  border: 1px solid rgba(32,38,41,0.08);
  border-top: 4px solid var(--card-accent, var(--ppdc-copper));
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  text-decoration: none;
  color: var(--ppdc-charcoal);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.portfolio-card:hover {
  box-shadow: 0 10px 28px rgba(15,75,74,0.14);
  transform: translateY(-3px);
}

.portfolio-card .stake {
  display: inline-block;
  align-self: flex-start;
  background: var(--ppdc-pearl);
  color: var(--ppdc-teal);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.portfolio-card h3 { margin: 4px 0 0; font-size: 1.2rem; }
.portfolio-card p { margin: 0; font-size: 0.93rem; color: rgba(32,38,41,0.72); flex-grow: 1; }
.portfolio-card .card-cta { font-size: 0.85rem; font-weight: 700; color: var(--card-accent, var(--ppdc-copper)); }

/* Stat strip */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  background: var(--ppdc-charcoal);
  color: var(--ppdc-pearl);
  border-radius: var(--radius);
  padding: 36px 32px;
}

.stat-strip .stat b {
  display: block;
  font-size: 1.9rem;
  color: var(--ppdc-sandstone);
}

.stat-strip .stat span {
  font-size: 0.82rem;
  opacity: 0.75;
}

/* Two-column feature */

.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 780px) {
  .split { grid-template-columns: 1fr; }
}

.split img { border-radius: var(--radius); }

.fact-list { list-style: none; margin: 20px 0 0; padding: 0; }
.fact-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(32,38,41,0.09);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.95rem;
}
.fact-list li b { color: var(--ppdc-teal); font-weight: 700; }

/* Benefit / product grid used on subpages */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.tile {
  background: var(--ppdc-pearl);
  border-radius: var(--radius);
  padding: 24px;
  border-left: 3px solid var(--card-accent, var(--ppdc-copper));
}

.tile h4 { margin: 0 0 8px; font-size: 1.02rem; color: var(--ppdc-teal); }
.tile p { margin: 0; font-size: 0.9rem; color: rgba(32,38,41,0.72); }

/* Note / disclosure box */

.note-box {
  background: #fff;
  border: 1px dashed rgba(32,38,41,0.25);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 0.88rem;
  color: rgba(32,38,41,0.7);
}

/* CTA banner */

.cta-banner {
  background: var(--ppdc-teal);
  color: var(--ppdc-pearl);
  border-radius: var(--radius);
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-banner h3 { margin: 0 0 6px; font-size: 1.4rem; }
.cta-banner p { margin: 0; opacity: 0.85; }

/* External-link card (used for Al Oula / Marasi outbound links) */

.outbound-card {
  background: #fff;
  border: 1px solid rgba(32,38,41,0.1);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.outbound-card img { height: 46px; width: auto; }
.outbound-card .grow { flex: 1; min-width: 220px; }
.outbound-card h4 { margin: 0 0 4px; }
.outbound-card p { margin: 0; font-size: 0.9rem; color: rgba(32,38,41,0.7); }

/* ---------- Footer ---------- */

footer.site-footer {
  background: var(--ppdc-charcoal);
  color: rgba(247,245,240,0.82);
  padding: 52px 0 28px;
  margin-top: 40px;
}

footer.site-footer .foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(247,245,240,0.14);
}

@media (max-width: 700px) {
  footer.site-footer .foot-grid { grid-template-columns: 1fr; }
}

footer.site-footer h5 {
  color: var(--ppdc-sandstone);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

footer.site-footer ul { list-style: none; margin: 0; padding: 0; }
footer.site-footer li { margin-bottom: 8px; font-size: 0.9rem; }
footer.site-footer a { text-decoration: none; opacity: 0.85; }
footer.site-footer a:hover { opacity: 1; text-decoration: underline; }

footer.site-footer .bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Entity theming: set the accent used by cards/tiles/nav-active per page */
body[data-entity="abs"] { --card-accent: var(--abs-gold); }
body[data-entity="al-oula"] { --card-accent: var(--aloula-copper); }
body[data-entity="marasi"] { --card-accent: var(--marasi-orange); }
body[data-entity="ashahiq"] { --card-accent: var(--ashahiq-blue); }
body[data-entity="ppdc"] { --card-accent: var(--ppdc-copper); }