/* File: assets/css/home.css 
   CSS specific to the home page */

/* Hero Section - Mobile First */
.hero-section {position: relative;width: 100%;min-height: 100vh;overflow: hidden;background-color: #1a1624;margin-top: -60px;}
.hero-content { display: flex; flex-direction: column; min-height: 100vh; }
.hero-image { position: relative; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; padding-top: 20px; /* Space between navbar and image */ }
.hero-image img { width: 100%; max-width: 500px; height: auto; object-fit: contain; object-position: top; }
.image-caption { position: absolute; bottom: 20px; width: 100%; text-align: center; color: #e0b050; font-family: 'Crimson Text', serif; font-size: 1.5rem; font-style: italic; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.hero-text {padding: 2rem 1.5rem;background-color: transparent;color: #fff;}
.hero-text h1 { color: #dd3333; font-size: 2.2rem; margin-bottom: 0.5rem; text-align: center; }
.tagline {font-size: 1.2rem;font-style: italic;text-align: center;margin-bottom: 1.5rem;color: #dfb050;}
.intro-text { margin-bottom: 1.5rem; line-height: 1.7; }
.cta-buttons { display: flex; flex-direction: column; gap: 10px; }
.cta-button { display: block; background-color: #dd3333; color: white; text-align: center; padding: 14px 20px; border-radius: 4px; font-weight: bold; transition: background-color 0.3s; }
.cta-button:hover { background-color: #bb2222; color: white; }
.cta-button.secondary { background-color: rgba(221, 51, 51, 0.1); color: #dd3333; border: 1px solid #dd3333; }
.cta-button.secondary:hover { background-color: rgba(221, 51, 51, 0.2); }

/* Scroll Indicator - Only visible on mobile */
.scroll-indicator { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; color: white; animation: bounce 2s infinite; z-index: 10; }
.scroll-text { display: block; font-size: 0.9rem; margin-bottom: 5px; text-shadow: 0 0 3px rgba(0,0,0,0.7); }
.scroll-arrow { display: block; font-size: 1.5rem; text-shadow: 0 0 3px rgba(0,0,0,0.7); }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* About Section */
.about-section { padding: 3rem 1rem; background-color: #f8f8f8; }
.section-title { color: #dd3333; text-align: center; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; }
.section-title:after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background-color: #dd3333; }
.section-content { max-width: 800px; margin: 0 auto; }
.section-content p { margin-bottom: 1.2rem; line-height: 1.7; }
.quote-box { margin: 2rem 0; padding: 1.5rem; background-color: #fff; border-left: 4px solid #dd3333; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.quote-box blockquote { font-family: 'Crimson Text', serif; font-size: 1.2rem; font-style: italic; margin-bottom: 0.5rem; line-height: 1.5; }
.quote-box cite { font-size: 0.9rem; color: #666; }

/* Divine Mercy Sunday Section */
.mercy-sunday-section { padding: 3rem 1rem; background-color: #fff; }
.date-box { background-color: #dd3333; color: white; text-align: center; padding: 1rem; margin-bottom: 2rem; border-radius: 4px; max-width: 400px; margin-left: auto; margin-right: auto; }
.date-label { font-size: 0.9rem; margin-bottom: 0.5rem; }
.date { font-size: 1.5rem; font-weight: bold; font-family: 'Crimson Text', serif; }
.celebration-steps { margin: 1.5rem 0; padding-left: 1.5rem; }
.celebration-steps li { margin-bottom: 0.7rem; line-height: 1.5; }
.learn-more-link { display: inline-block; color: #dd3333; font-weight: bold; margin-top: 1rem; text-decoration: underline; }
.learn-more-link:hover { color: #bb2222; }

/* Resource Cards Section */
.resources-section { padding: 3rem 1rem; background-color: #f8f8f8; }
.resource-cards { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; margin: 0 auto; }
.resource-card { background-color: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform 0.3s, box-shadow 0.3s; }
.resource-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.resource-card h3 { color: #dd3333; margin-bottom: 0.7rem; }
.resource-card p { margin-bottom: 1.2rem; line-height: 1.6; }
.card-link { display: inline-block; color: #dd3333; font-weight: bold; position: relative; padding-right: 20px; }
.card-link:after { content: '→'; position: absolute; right: 0; top: 0; transition: transform 0.3s; }
.card-link:hover:after { transform: translateX(5px); }

/* Desktop Layout Changes */
@media (min-width: 768px) {
  /* Hero Section - Desktop */
  .hero-section { height: auto; min-height: 600px; padding: 2rem 0; }
  .hero-content { flex-direction: row; align-items: center; }
  .hero-image { width: 45%; height: 100%; min-height: 600px; padding-top: 0; }
  .hero-image img { max-height: 80vh; /* Limit image height on desktop */ }
  .hero-text { width: 55%; padding: 3rem; }
  .cta-buttons { flex-direction: row; }
  .scroll-indicator { display: none; }
  
  /* Resource Cards - Desktop */
  .resource-cards { flex-direction: row; }
  .resource-card { flex: 1; }
}

/* Large screens */
@media (min-width: 1200px) {
  .hero-image { width: 45%; }
  .hero-text { width: 55%; padding: 4rem; }
  .hero-text h1 { font-size: 2.8rem; }
  .tagline { font-size: 1.4rem; }
}