/* =========================
  Puff and Jam — Styles (FIXED)
  Dark sleek aesthetic + ONE accent color
  Accent chosen: GREEN
  Fix: force all text/icons readable on dark background
========================= */

:root{
  --pj-bg: #0b0f14;
  --pj-bg-2: #0f1520;
  --pj-surface: rgba(255,255,255,0.06);
  --pj-surface-2: rgba(255,255,255,0.08);
  --pj-border: rgba(255,255,255,0.12);
  --pj-text: rgba(255,255,255,0.92);
  --pj-muted: rgba(255,255,255,0.72);
  --pj-muted-2: rgba(255,255,255,0.60);

  /* Accent: GREEN */
  --pj-accent: #20c997;       /* teal-green */
  --pj-accent-2: #12b886;
  --pj-accent-soft: rgba(32, 201, 151, 0.14);

  --pj-radius: 18px;
  --pj-shadow: 0 12px 40px rgba(0,0,0,0.35);
  --pj-shadow-soft: 0 10px 30px rgba(0,0,0,0.25);

  --pj-focus: 0 0 0 .2rem rgba(32, 201, 151, 0.30);
}

* { box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 86px; /* sticky nav offset */
}

/* =========================
  HARD DARK THEME OVERRIDES
  (prevents Bootstrap default dark text)
========================= */
body.pj-body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 10%, rgba(32,201,151,0.12), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(32,201,151,0.10), transparent 60%),
              linear-gradient(180deg, var(--pj-bg), #070a0f);
  color: var(--pj-text);

  /* Bootstrap variable overrides */
  --bs-body-bg: var(--pj-bg);
  --bs-body-color: var(--pj-text);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--pj-muted);
  --bs-tertiary-color: var(--pj-muted-2);
  --bs-link-color: var(--pj-accent);
  --bs-link-hover-color: #53f3c6;
}

/* Force all text to stay light on dark */
body.pj-body,
body.pj-body p,
body.pj-body li,
body.pj-body span,
body.pj-body small,
body.pj-body label,
body.pj-body .card,
body.pj-body .card *{
  color: var(--pj-text);
}

/* Muted text */
.pj-muted{ color: var(--pj-muted) !important; }

/* Links */
.pj-link,
a{
  color: var(--pj-accent);
  text-decoration: none;
}
a:hover{ color: #53f3c6; text-decoration: underline; }

/* Headings */
.fw-800{ font-weight: 800; }
h1,h2,h3,h4,h5,h6{ color: rgba(255,255,255,0.96); }

/* Ensure all Bootstrap Icons remain visible */
.bi{ color: inherit; }

/* =========================
  Navbar
========================= */
.pj-nav{
  background: rgba(10, 14, 20, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 25px rgba(0,0,0,0.22);
}
.pj-nav .nav-link{
  color: rgba(255,255,255,0.82) !important;
  font-weight: 600;
}
.pj-nav .nav-link:hover,
.pj-nav .nav-link:focus{
  color: #ffffff !important;
}
.pj-brand-mark{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(32,201,151,0.20), rgba(32,201,151,0.05));
  border: 1px solid rgba(32,201,151,0.30);
  color: #eafff8 !important;
}
.pj-brand-mark i{ font-size: 1.05rem; }

/* =========================
  Buttons (fix text contrast)
========================= */
.btn-accent{
  --bs-btn-color: #061016 !important;           /* dark text on bright accent */
  --bs-btn-bg: var(--pj-accent) !important;
  --bs-btn-border-color: var(--pj-accent) !important;
  --bs-btn-hover-color: #061016 !important;
  --bs-btn-hover-bg: #39e7bb !important;
  --bs-btn-hover-border-color: #39e7bb !important;
  --bs-btn-focus-shadow-rgb: 32,201,151;
  --bs-btn-active-bg: var(--pj-accent-2) !important;
  --bs-btn-active-border-color: var(--pj-accent-2) !important;
  font-weight: 800;
  border-radius: 14px;
}
.btn-outline-accent{
  --bs-btn-color: var(--pj-accent) !important;
  --bs-btn-border-color: rgba(32,201,151,0.55) !important;
  --bs-btn-hover-color: #061016 !important;
  --bs-btn-hover-bg: var(--pj-accent) !important;
  --bs-btn-hover-border-color: var(--pj-accent) !important;
  --bs-btn-focus-shadow-rgb: 32,201,151;
  border-radius: 14px;
  font-weight: 800;
}
.btn:focus{ box-shadow: var(--pj-focus) !important; }

/* =========================
  Sections
========================= */
.pj-section{ padding: 70px 0; }
.pj-section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* =========================
  Hero
========================= */
.pj-hero{
  position: relative;
  padding: 78px 0 56px;
  overflow: hidden;
}
.pj-hero-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 20% 30%, rgba(32,201,151,0.20), transparent 60%),
    radial-gradient(700px 460px at 80% 10%, rgba(32,201,151,0.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  pointer-events: none;
}
.pj-badge{
  background: rgba(32,201,151,0.14);
  border: 1px solid rgba(32,201,151,0.25);
  color: rgba(255,255,255,0.95) !important;
  font-weight: 700;
  padding: .55rem .8rem;
  border-radius: 999px;
}

/* Quick items */
.pj-quick{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 540px;
}
@media (min-width: 768px){
  .pj-quick{ grid-template-columns: 1fr 1fr 1fr; }
}
.pj-quick-item{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border-radius: var(--pj-radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
}
.pj-quick-ic{
  color: var(--pj-accent) !important;
  font-size: 1.1rem;
}
.pj-quick-label{
  color: var(--pj-muted-2) !important;
  font-size: .78rem;
  line-height: 1.1;
}

/* Hero card */
.pj-hero-card{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: var(--pj-shadow);
}
.pj-hero-card-kicker{
  font-size: .8rem;
  color: var(--pj-muted-2) !important;
  font-weight: 700;
}
.pj-hero-chip{
  font-size: .82rem;
  font-weight: 800;
  color: #061016 !important;
  background: rgba(32,201,151,0.92);
  border: 1px solid rgba(32,201,151,0.92);
  padding: .45rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pj-mini-list{ display: grid; gap: 10px; }
.pj-mini-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
  font-weight: 700;
}
.pj-mini-item i:first-child{ color: var(--pj-accent) !important; }
.pj-mini-item:hover{
  border-color: rgba(32,201,151,0.30);
  background: rgba(32,201,151,0.06);
}
.pj-hero-note{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.16);
  color: var(--pj-muted) !important;
}

/* =========================
  Cards
========================= */
.pj-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--pj-radius);
  box-shadow: var(--pj-shadow-soft);
}
.pj-card .card-body{ padding: 1.25rem; }
.pj-icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--pj-accent-soft);
  border: 1px solid rgba(32,201,151,0.25);
  color: #eafff8 !important;
}
.pj-icon i{ font-size: 1.15rem; }

/* Pills / tags */
.pj-pill{
  font-size: .72rem;
  font-weight: 800;
  padding: .3rem .55rem;
  border-radius: 999px;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

/* About panel */
.pj-about-panel{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(32,201,151,0.08), rgba(255,255,255,0.03));
  box-shadow: var(--pj-shadow);
}
.pj-about-ic{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(32,201,151,0.18);
  border: 1px solid rgba(32,201,151,0.28);
  color: #eafff8 !important;
}
.pj-about-ic i{ font-size: 1.15rem; }

.pj-hr{
  border-color: rgba(255,255,255,0.10) !important;
  opacity: 1;
}

/* Branch strip */
.pj-branch-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.pj-branch-strip-title{
  font-weight: 800;
  color: rgba(255,255,255,0.90) !important;
}
.pj-branch-tag{
  font-size: .78rem;
  font-weight: 800;
  color: rgba(255,255,255,0.90) !important;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(32,201,151,0.12);
  border: 1px solid rgba(32,201,151,0.22);
}

/* =========================
  Accordion (fix arrow + text)
========================= */
.pj-accordion .accordion-item{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}
.pj-accordion .accordion-button{
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.95) !important;
  font-weight: 800;
}
.pj-accordion .accordion-button:focus{
  box-shadow: var(--pj-focus);
  border-color: rgba(32,201,151,0.45);
}
.pj-accordion .accordion-button:not(.collapsed){
  background: rgba(32,201,151,0.10);
  color: rgba(255,255,255,0.96) !important;
}
.pj-accordion .accordion-body{
  background: rgba(255,255,255,0.02);
  color: var(--pj-muted) !important;
}
/* Accordion chevron visibility */
.pj-accordion .accordion-button::after{
  filter: invert(1);
  opacity: 0.95;
}

/* =========================
  Forms (force light text)
========================= */
.pj-form-card{ overflow: hidden; }
.form-label{
  font-weight: 800;
  color: rgba(255,255,255,0.90) !important;
}
.pj-input{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.95) !important;
  border-radius: 14px !important;
}
.pj-input::placeholder{ color: rgba(255,255,255,0.45) !important; }
.pj-input:focus{
  border-color: rgba(32,201,151,0.55) !important;
  box-shadow: var(--pj-focus) !important;
}
.invalid-feedback{ color: rgba(255, 180, 180, 0.95) !important; }

/* Alerts (Bootstrap defaults can be dark text; override) */
.alert{
  border-radius: 14px;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.alert-success{
  background: rgba(32,201,151,0.14) !important;
  border-color: rgba(32,201,151,0.28) !important;
}
.alert-danger{
  background: rgba(255, 99, 132, 0.12) !important;
  border-color: rgba(255, 99, 132, 0.25) !important;
}

/* =========================
  Contact cards
========================= */
.pj-contact-cards{ display: grid; gap: 10px; }
.pj-contact-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
  box-shadow: var(--pj-shadow-soft);
}
.pj-contact-card:hover{
  border-color: rgba(32,201,151,0.30);
  background: rgba(32,201,151,0.06);
}
.pj-contact-ic{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(32,201,151,0.14);
  border: 1px solid rgba(32,201,151,0.24);
  color: #eafff8 !important;
}
.pj-contact-label{
  font-size: .78rem;
  color: var(--pj-muted-2) !important;
  font-weight: 800;
}
.pj-contact-value{
  font-weight: 800;
  word-break: break-word;
}

/* =========================
  Footer
========================= */
.pj-footer{
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
}
.pj-footer *{ color: rgba(255,255,255,0.90); }
.pj-footer-list li{
  margin-bottom: .65rem;
  color: var(--pj-muted) !important;
}
.pj-footer-list i{ color: var(--pj-accent) !important; }

.pj-social{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
}
.pj-social:hover{
  border-color: rgba(32,201,151,0.35);
  background: rgba(32,201,151,0.08);
  color: #ffffff !important;
}

/* Accessibility: visible focus */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible{
  outline: none;
  box-shadow: var(--pj-focus) !important;
  border-radius: 14px;
}

/* Ensure .small stays readable (Bootstrap sometimes dims too much) */
.small{ color: var(--pj-muted) !important; }