/* ============================================================
   PINGBIX GLOBAL YELLOW THEME
   Include in every page: <link rel="stylesheet" href="/static/global-theme.css"/>
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables ── */
:root {
  --pb-yellow:     #F9C938;
  --pb-yellow-lt:  #FDE98A;
  --pb-yellow-dk:  #E8A800;
  --pb-orange:     #E8820C;
  --pb-teal:       #0077B6;
  --pb-dark:       #1A1A1A;
  --pb-gray:       #555555;
  --pb-bg:         #FFFBEF;
  --pb-bg2:        #FFF8E1;
  --pb-white:      #FFFFFF;
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--pb-bg);
  color: var(--pb-dark);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* ── Page background ── */
.pb-page-bg,
main {
  background: linear-gradient(180deg,
    #FFFBEF 0%,
    #FFF8E1 20%,
    #FFFBEF 50%,
    #FFF3CC 75%,
    #FFFBEF 100%);
}

/* ── Hero / top section background ── */
.pb-hero-bg {
  background: linear-gradient(160deg,
    #F9C938 0%,
    #FBDA6A 35%,
    #FDE98A 65%,
    #FFF8D6 85%,
    #FFFBEF 100%);
}

/* Apply hero bg to the first section of each page */
main > section:first-child,
main > .hero-section-animated,
section.hero-section-animated {
  background: linear-gradient(160deg,
    #F9C938 0%,
    #FBDA6A 35%,
    #FDE98A 65%,
    #FFF8D6 85%,
    #FFFBEF 100%);
}

/* ── Typography helpers ── */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #E8820C, #F9C938);
}

.accent-text  { color: var(--pb-orange); }
.teal-text    { color: var(--pb-teal); }
.yellow-text  { color: var(--pb-yellow-dk); }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  background-color: var(--pb-dark);
  color: var(--pb-yellow);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
  box-shadow: 0 8px 24px rgba(26,26,26,0.2);
}
.btn-primary:hover { opacity: 0.88; text-decoration: none; color: var(--pb-yellow); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  background-color: rgba(255,255,255,0.7);
  color: var(--pb-dark);
  border: 1.5px solid rgba(26,26,26,0.15);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.95); text-decoration: none; color: var(--pb-dark); }

.btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  background-color: var(--pb-orange);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-orange:hover { opacity: 0.88; text-decoration: none; color: #fff; }

/* ── Section dividers ── */
.pb-section-divider {
  border: none;
  border-top: 1px solid rgba(249, 201, 56, 0.35);
  margin: 0;
}

/* ── Cards ── */
.pb-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(249, 201, 56, 0.25);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(232,130,12,0.06);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.2s, transform 0.2s;
}
.pb-card:hover {
  box-shadow: 0 12px 40px rgba(232,130,12,0.12);
  transform: translateY(-2px);
}

/* ── Section label (small caps above heading) ── */
.pb-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B45309;
}

/* ── Highlight badge ── */
.pb-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(249,201,56,0.2);
  color: #B45309;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pb-bg); }
::-webkit-scrollbar-thumb { background: var(--pb-yellow-dk); border-radius: 3px; }

/* ── Selection ── */
::selection { background: var(--pb-yellow); color: var(--pb-dark); }

/* ── Reveal animation ── */
.pb-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.pb-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page top padding (accounts for fixed navbar) ── */
main > section:first-child,
main > div:first-child > section:first-child {
  padding-top: clamp(80px, 10vw, 120px);
}

/* ── Force yellow bg on all pages (overrides inline white bg) ── */
body {
  background-color: #FFFBEF !important;
}

/* Keep cards, modals, form inputs white */
.bg-white, [class*="bg-white"] {
  /* Don't override — let cards stay white */
}

/* Section alternating tints */
section:nth-child(even) {
  background-color: transparent; /* let page bg show through */
}

/* Border accents */
.border-yellow-pb { border-color: rgba(249,201,56,0.3); }

/* Link accent */
a.pb-link { color: var(--pb-orange); font-weight: 600; }
a.pb-link:hover { color: var(--pb-yellow-dk); }