/* ./css/styles.css */

/* ==========================================================================
   FONTS & COLORS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Lato:wght@300;400;600;700&display=swap');

body { font-family: 'Lato', sans-serif; }

.font-oswald { font-family: 'Oswald', sans-serif; }
.font-lato { font-family: 'Lato', sans-serif; }

.bg-psp-blue { background-color: #003366; }
.text-psp-blue { color: #003366; }
.bg-psp-orange { background-color: #CC3300; }
.text-psp-orange { color: #CC3300; }
.border-psp-orange { border-color: #CC3300; }
.bg-psp-white-solid { background-color: rgb(255, 255, 255, 1); } 
.bg-psp-black-80 { background-color: rgba(0, 0, 0, 0.8); }

/* Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); z-index: 1000;
    display: none; justify-content: center; align-items: center;
    padding: 20px; overflow-y: auto;
}

/* Responsive H1/H2 for Page Title */
.h1-size { font-size: 3.75rem; }
@media (max-width: 768px) { .h1-size { font-size: 2.5rem; } }
.h2-size { font-size: 2.25rem; }

/* ==========================================================================
   HEADER UTILS & TRANSITIONS
   ========================================================================== */
.bg-psp-white { background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); } 
.bg-psp-grey { background-color: rgba(41, 41, 41, 0.95); }

/* Add this to make text color change smoothly */
header a, header span {
    transition: color 0.4s ease-in-out;
}

.h-60px { height: 60px; }
.h-8 { height: 2rem; } 

/* ==========================================================================
   HERO & BACKGROUNDS
   ========================================================================== */
.hero-bg {
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.7)), url('../img/hero-background.jpg'); 
    background-size: cover;
    background-position: center;
}

/* ==========================================================================
   SCROLL REVEAL (Intersection Observer Styles)
   ========================================================================== */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); 
    /* transition: all 0.8s ease-out; */
}
.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Stagger delays */
.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }


/* ==========================================================================
   BLOG POSTS
   ========================================================================== */

  /* Article Content Styling (The Spacing Fix) */
  #article-content-container { max-width: 65ch; margin: 0 auto; padding-top: 2rem; padding-bottom: 4rem; }
  
  /* Force spacing between paragraphs */
  #article-content-container p {
    font-size: 1.125rem; 
    line-height: 1.8; 
    color: #374151; 
    margin-bottom: 1.5rem; /* Critical Spacing */
  }
  
  #article-content-container h1, #article-content-container h2, #article-content-container h3 {
    font-family: 'Oswald', sans-serif; color: #003366; margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 700;
  }
  #article-content-container h2 { font-size: 2.25rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; } 
  #article-content-container h3 { font-size: 1.75rem; color: #CC3300; } 
  
  #article-content-container img { max-width: 100%; height: auto; border-radius: 8px; margin: 2em 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
  #article-content-container ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1.5rem; }
  #article-content-container ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 1.5rem; }
  #article-content-container li { margin-bottom: 0.5rem; font-size: 1.125rem; line-height: 1.6; }
  #article-content-container a { color: #CC3300; text-decoration: underline; }
  #article-content-container strong { font-weight: 700; color: #111827; }