/* ============================================================
   global.css — PCMLs Design System Enhancements
   Applies to ALL pages via <link rel="stylesheet" href="./global.css" />
   ============================================================ */

/* ----------------------------------------------------------
   0. CSS CUSTOM PROPERTIES
   ---------------------------------------------------------- */
:root {
  --clr-dark:   #0d2b2b;
  --clr-green:  #009e60;
  --clr-bright: #00c070;
  --clr-wine:   #8b1a4a;
  --clr-cream:  #f2ede0;
  --clr-border: #e0dbd0;
  --clr-muted:  #5a5a5a;
  --clr-white:  #ffffff;
  --nav-h:      64px;
  --radius-btn: 25px;
  --transition: 0.22s ease;
}

/* ----------------------------------------------------------
   1. PAGE LOAD FADE-IN
   ---------------------------------------------------------- */
@keyframes pgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body {
  animation: pgFadeIn 0.38s ease forwards;
}

body.no-transition {
  animation: pgFadeIn 0.38s ease forwards;
}

/* ----------------------------------------------------------
   2. STICKY GLASSMORPHISM NAV
   ---------------------------------------------------------- */
.main-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(13, 43, 43, 0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: box-shadow 0.28s ease !important;
  border-bottom: 1px solid rgba(0, 158, 96, 0.15) !important;
}

.main-nav.scrolled {
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.28) !important;
}

/* Ensure prenav doesn't push things */
.prenav {
  position: relative;
  z-index: 999;
}

/* ----------------------------------------------------------
   3. LOGO MARK UPGRADE
   ---------------------------------------------------------- */
.logo-img a h1,
.logo-img a {
  color: var(--clr-bright) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 192, 112, 0.1) !important;
  border: 1.5px solid rgba(0, 192, 112, 0.35) !important;
  border-radius: 6px !important;
  padding: 0.22rem 0.7rem !important;
  transition: background var(--transition), border-color var(--transition) !important;
  white-space: nowrap !important;
}

.logo-img a h1:hover,
.logo-img a:hover {
  background: rgba(0, 192, 112, 0.18) !important;
  border-color: var(--clr-bright) !important;
}

.logo-baseline h1 {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: rgba(169, 145, 7, 0.709) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* ----------------------------------------------------------
   4. NAV LINK HOVER & ACTIVE STATES
   ---------------------------------------------------------- */
.main-nav-items .main-nav-botton {
  position: relative !important;
  color: rgba(160, 111, 6, 0.82) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  padding-bottom: 4px !important;
  transition: color var(--transition) !important;
}

.main-nav-items .main-nav-botton::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--clr-bright) !important;
  border-radius: 2px !important;
  transition: width 0.25s ease !important;
}

.main-nav-items .main-nav-botton:hover {
  color: var(--clr-bright) !important;
}

.main-nav-items .main-nav-botton:hover::after,
.main-nav-items .nav-active > .main-nav-botton::after,
.main-nav-items .main-nav-botton.nav-active::after {
  width: 100% !important;
}

.main-nav-items .nav-active > .main-nav-botton,
.main-nav-items .main-nav-botton.nav-active {
  color: var(--clr-bright) !important;
}

/* ----------------------------------------------------------
   5. INVESTOR PORTAL CTA IN NAV
   ---------------------------------------------------------- */
.nav-cta-portal {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--clr-green) !important;
  color: var(--clr-white) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 20px !important;
  padding: 0.42rem 1.15rem !important;
  border: none !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
  white-space: nowrap !important;
}

.nav-cta-portal:hover {
  background: var(--clr-bright) !important;
  color: var(--clr-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 192, 112, 0.35) !important;
}

.nav-search {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

/* ----------------------------------------------------------
   6. BUTTON RIPPLE EFFECT
   ---------------------------------------------------------- */
.cta,
.btn-plan,
.nav-cta-portal,
[class*="cta-"] {
  position: relative !important;
  overflow: hidden !important;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ----------------------------------------------------------
   7. SCROLL-TO-TOP BUTTON IMPROVEMENT
   ---------------------------------------------------------- */
.btn-scroll-top,
.scroll-to-top,
[class*="scroll-top"] {
  background: var(--clr-green) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
  box-shadow: 0 4px 18px rgba(0, 158, 96, 0.3) !important;
}

.btn-scroll-top:hover,
.scroll-to-top:hover,
[class*="scroll-top"]:hover {
  background: var(--clr-bright) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 192, 112, 0.4) !important;
}

/* ----------------------------------------------------------
   8. PRE-FOOTER CTA STRIP
   ---------------------------------------------------------- */
.pre-footer-cta {
  background: var(--clr-dark);
  padding: 4.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pre-footer-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(0, 158, 96, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(139, 26, 74, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.pfc-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.pfc-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-bright);
  margin-bottom: 1rem;
}

.pfc-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--clr-white);
  line-height: 1.28;
  margin-bottom: 1rem;
}

.pfc-body {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  margin-bottom: 2.2rem;
}

.pfc-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.pfc-btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--clr-green);
  color: var(--clr-white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 0.82rem 2rem;
  border: 2px solid var(--clr-green);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}

.pfc-btn-primary:hover {
  background: var(--clr-bright);
  border-color: var(--clr-bright);
  color: var(--clr-dark);
  box-shadow: 0 6px 24px rgba(0, 192, 112, 0.4);
  transform: translateY(-2px);
}

.pfc-btn-outline {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 0.82rem 2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
}

.pfc-btn-outline:hover {
  border-color: var(--clr-bright);
  color: var(--clr-bright);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------
   9. GLOBAL SCROLL REVEAL (for all pages)
   ---------------------------------------------------------- */
.g-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.g-reveal.g-visible {
  opacity: 1;
  transform: translateY(0);
}

.g-reveal.g-d1 { transition-delay: 0.1s; }
.g-reveal.g-d2 { transition-delay: 0.2s; }
.g-reveal.g-d3 { transition-delay: 0.3s; }
.g-reveal.g-d4 { transition-delay: 0.4s; }

/* ----------------------------------------------------------
   10. MOBILE TAP FEEDBACK
   ---------------------------------------------------------- */
@media (hover: none) {
  a:active,
  button:active,
  .cta:active {
    opacity: 0.75;
    transform: scale(0.98);
  }
}

/* ----------------------------------------------------------
   11. FOOTER ENHANCEMENTS
   ---------------------------------------------------------- */
footer a:hover,
.footer-content a:hover,
.footer-links a:hover {
  color: var(--clr-bright) !important;
  text-decoration: none !important;
}

/* ----------------------------------------------------------
   12. RESPONSIVE OVERRIDES
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .pfc-actions {
    flex-direction: column;
    align-items: center;
  }

  .pfc-btn-primary,
  .pfc-btn-outline {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}