/* =============================================================
   PORT ARTHUR JUNETEENTH 2026 -- DESIGN SYSTEM
   All valid CSS. No smart quotes. No em-dashes in code.
   ============================================================= */

/* ---- TOKENS ---- */
:root {
  --gold:       #D4AF37;
  --gold-lt:    #F0CC5A;
  --red:        #C0392B;
  --green:      #1A7A3A;
  --black:      #070707;
  --dark:       #0D0D0D;
  --card:       #111111;
  --card2:      #161410;
  --border:     rgba(212,175,55,0.13);
  --soft:       rgba(242,237,228,0.07);
  --white:      #F2EDE4;
  --muted:      #7A7060;
  --font-head:  'Bebas Neue', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-title: 'Cinzel', serif;
  --font-body:  'DM Sans', sans-serif;
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--gold); }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button { font-family:var(--font-body); cursor:pointer; }
input, textarea, select { font-family:var(--font-body); }

/* ---- COLORS ---- */
.c-gold  { color:var(--gold); }
.c-red   { color:var(--red); }
.c-green { color:var(--green); }
.c-muted { color:var(--muted); }
.c-white { color:var(--white); }

/* ---- TYPOGRAPHY ---- */
.t-tag {
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.t-tag::before { content:''; display:block; width:26px; height:1px; background:var(--gold); }

.t-head {
  font-family:var(--font-head);
  font-size:clamp(42px,5.5vw,76px);
  line-height:0.93; letter-spacing:2px;
  color:var(--white); margin-bottom:18px;
}
.t-head-lg {
  font-family:var(--font-head);
  font-size:clamp(68px,10vw,148px);
  line-height:0.87; letter-spacing:3px;
  color:var(--white);
}
.t-head-hero {
  font-family:var(--font-head);
  font-size:clamp(76px,12vw,180px);
  line-height:0.87; letter-spacing:3px;
  color:var(--white);
}
.t-sub {
  font-size:14px; color:var(--muted);
  line-height:1.75; max-width:460px; font-weight:300;
}
.t-body {
  font-size:14px; line-height:1.8;
  color:rgba(242,237,228,0.65); font-weight:300;
}
.t-serif-italic {
  font-family:var(--font-serif);
  font-style:italic;
  color:rgba(242,237,228,0.42);
}

/* ---- BUTTONS ---- */
.btn {
  display:inline-block; font-size:11px; font-weight:500;
  letter-spacing:2.5px; text-transform:uppercase;
  padding:14px 32px; border:none; cursor:pointer;
  transition:all 0.22s; white-space:nowrap;
}
.btn-gold { background:var(--gold); color:var(--black); }
.btn-gold:hover { background:var(--gold-lt); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--white); border:1px solid rgba(242,237,228,0.22); }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
.btn-red { background:transparent; color:var(--red); border:1px solid rgba(192,57,43,0.5); }
.btn-red:hover { background:var(--red); color:var(--white); }
.btn-sm { font-size:10px; padding:11px 22px; letter-spacing:2px; }
.btn-full { width:100%; text-align:center; display:block; }

/* ---- CARDS ---- */
.card {
  background:var(--card); border:1px solid var(--border);
  transition:background 0.25s, border-color 0.25s;
}
.card:hover { background:var(--card2); border-color:rgba(212,175,55,0.28); }

/* ---- PILL / TAGS ---- */
.pill {
  display:inline-block; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; padding:3px 9px;
  border:1px solid var(--border); color:var(--muted);
}
.pill-free { border-color:rgba(26,122,58,0.45); color:var(--green); }
.pill-paid { border-color:rgba(192,57,43,0.45); color:var(--red); }
.pill-gold { border-color:rgba(212,175,55,0.45); color:var(--gold); }

/* ---- STRIPE (pan-African) ---- */
.stripe-bar {
  height:3px; display:flex;
}
.stripe-bar span { flex:1; }
.stripe-bar .s-r { background:var(--red); }
.stripe-bar .s-g { background:var(--gold); }
.stripe-bar .s-gr { background:var(--green); }

/* ---- NAV (shared) ---- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 52px;
  background:linear-gradient(to bottom, rgba(7,7,7,0.97) 0%, rgba(7,7,7,0) 100%);
}
.nav--solid {
  background:rgba(7,7,7,0.96);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.nav-logo {
  font-family:var(--font-title); font-size:11px;
  letter-spacing:4px; text-transform:uppercase; color:var(--gold);
  line-height:1.6;
}
.nav-logo span {
  display:block; font-size:8px; letter-spacing:3px;
  color:rgba(242,237,228,0.32);
}
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--white); opacity:0.5;
  transition:opacity 0.2s, color 0.2s;
}
.nav-links a:hover, .nav-links a.active { opacity:1; color:var(--gold); }
.nav-cta {
  font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:500;
  color:var(--gold); padding:10px 22px; border:1px solid var(--gold);
  transition:background 0.2s, color 0.2s;
}
.nav-cta:hover { background:var(--gold); color:var(--black); }
.nav-menu-btn {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-menu-btn span { display:block; width:22px; height:1px; background:var(--gold); transition:all 0.3s; }

/* mobile nav drawer */
.nav-drawer {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(7,7,7,0.98); z-index:290;
  flex-direction:column; align-items:center; justify-content:center; gap:28px;
}
.nav-drawer.open { display:flex; }
.nav-drawer a {
  font-family:var(--font-head); font-size:42px; letter-spacing:2px;
  color:var(--white); transition:color 0.2s;
}
.nav-drawer a:hover { color:var(--gold); }
.nav-drawer .close-btn {
  position:absolute; top:24px; right:28px;
  font-size:28px; color:var(--muted); background:none; border:none; cursor:pointer;
}

/* ---- SECTION WRAPPER ---- */
.section { padding:100px 60px; }
.section-dark { background:var(--dark); }
.section-black { background:var(--black); }
.section-header {
  display:flex; justify-content:space-between;
  align-items:flex-end; margin-bottom:60px; flex-wrap:wrap; gap:20px;
}

/* ---- GRID DIVIDERS ---- */
.grid-gap-1 { display:grid; gap:1px; background:var(--border); }

/* ---- FADE ANIMATION ---- */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-up.in { opacity:1; transform:translateY(0); }

/* ---- FOOTER (shared) ---- */
.footer { background:var(--dark); border-top:1px solid var(--border); padding:80px 60px 40px; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px; padding-bottom:60px;
  border-bottom:1px solid var(--border); margin-bottom:40px;
}
.footer-logo { font-family:var(--font-title); font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.footer-org { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.footer-desc { font-size:13px; color:var(--muted); line-height:1.72; max-width:280px; }
.fcol h4 { font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.fcol ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.fcol ul a { font-size:13px; color:var(--muted); transition:color 0.2s; }
.fcol ul a:hover { color:var(--gold); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.footer-copy { font-size:11px; color:var(--muted); letter-spacing:0.5px; }
.socials { display:flex; gap:12px; }
.social-btn {
  width:36px; height:36px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--muted);
  transition:border-color 0.2s, color 0.2s;
}
.social-btn:hover { border-color:var(--gold); color:var(--gold); }

/* ---- FORM ELEMENTS ---- */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label {
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted);
}
.form-input, .form-select, .form-textarea {
  background:var(--dark); border:1px solid var(--border);
  color:var(--white); font-family:var(--font-body); font-size:14px;
  font-weight:300; padding:13px 16px; outline:none;
  transition:border-color 0.2s;
  -webkit-appearance:none; appearance:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:rgba(212,175,55,0.45);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--muted); }
.form-textarea { resize:vertical; min-height:110px; }
.form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A7060'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; cursor:pointer; }
.form-error { font-size:11px; color:var(--red); margin-top:4px; display:none; }
.form-error.show { display:block; }
.form-success {
  padding:16px 20px; background:rgba(26,122,58,0.12);
  border:1px solid rgba(26,122,58,0.3);
  font-size:13px; color:var(--green); display:none; margin-top:16px;
}
.form-success.show { display:block; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ---- CHECKBOX / RADIO ---- */
.check-group { display:flex; flex-direction:column; gap:10px; }
.check-item { display:flex; align-items:center; gap:12px; cursor:pointer; }
.check-box {
  width:18px; height:18px; border:1px solid var(--border);
  background:var(--dark); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:border-color 0.2s, background 0.2s;
}
.check-item input[type=checkbox], .check-item input[type=radio] { display:none; }
.check-item input:checked + .check-box { background:var(--gold); border-color:var(--gold); }
.check-item input:checked + .check-box::after { content:''; display:block; width:5px; height:9px; border:2px solid var(--black); border-top:none; border-left:none; transform:rotate(45deg) translateY(-1px); }
.check-label { font-size:13px; color:var(--white); font-weight:300; }

/* ---- TABS ---- */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:40px; }
.tab-btn {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); padding:14px 28px; background:none; border:none;
  border-bottom:2px solid transparent; cursor:pointer;
  transition:color 0.2s, border-color 0.2s;
  margin-bottom:-1px;
}
.tab-btn.active { color:var(--gold); border-bottom-color:var(--gold); }
.tab-btn:hover { color:var(--white); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ---- ACCORDION ---- */
.accord-item { background:var(--card); border-bottom:1px solid var(--border); }
.accord-btn {
  width:100%; padding:20px 26px; background:none; border:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:14px; font-weight:400; color:var(--white); text-align:left;
  cursor:pointer; transition:background 0.2s; user-select:none;
}
.accord-btn:hover { background:var(--card2); }
.accord-icon { font-size:20px; color:var(--gold); transition:transform 0.3s; flex-shrink:0; }
.accord-item.open .accord-icon { transform:rotate(45deg); }
.accord-body { max-height:0; overflow:hidden; transition:max-height 0.38s ease; }
.accord-item.open .accord-body { max-height:300px; }
.accord-content { padding:0 26px 20px; font-size:13px; color:var(--muted); line-height:1.7; }

/* ---- SHARE BUTTONS ---- */
.share-bar {
  display:flex; align-items:center; gap:7px;
  padding-top:14px; margin-top:8px;
  border-top:1px solid var(--border);
}
.share-label {
  font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--muted); flex:1;
}
.share-btn {
  width:28px; height:28px; border:1px solid var(--border);
  background:transparent; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color 0.2s, color 0.2s, background 0.2s;
  font-size:11px; font-weight:600; color:var(--muted);
  font-family:var(--font-body); flex-shrink:0;
  line-height:1;
}
.share-btn:hover { border-color:var(--gold); color:var(--gold); }
.share-btn.copied { border-color:var(--green); color:var(--green); background:rgba(26,122,58,0.10); }

/* ---- RESPONSIVE LAYOUT ---- */
@media (max-width: 1024px) {
  .section { padding:80px 40px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
}
@media (max-width: 768px) {
  .nav { padding:16px 22px; }
  .nav-links { display:none; }
  .nav-menu-btn { display:flex; }
  .section { padding:64px 22px; }
  .section-header { flex-direction:column; align-items:flex-start; }
  .footer { padding:60px 22px 32px; }
  .footer-grid { grid-template-columns:1fr; gap:36px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .form-grid-2 { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .section { padding:52px 18px; }
  .t-head { font-size:clamp(38px,12vw,56px); }
}