/* Style sheet for PointVictory.com */

/* Base styles to remove default browser spacing */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333333;
  line-height: 1.6; /* Makes the article text comfortable to read */
}

/* to remove blue underline from links */
a {
  text-decoration: none;
}

/* ==========================================
   BANNER STYLES (Updated for text wrapping)
   ========================================== */
.banner {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 60px; /* Changed from height to min-height to allow growth if text wraps */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  /* Removed overflow: hidden so wrapping text stays visible */
  padding: 5px 10px; /* Keeps text safe from the very edge */
  box-sizing: border-box;
}

#site-banner {
  background-color: #2c3e50; 
}

#bible-banner {
  background-color: #dfaf37 ;
}

#games-banner {
  background-color: #004b49 ;
}

.site-title {
  color: #ffffff;
  margin: 0;
  font-size: 1.4rem; /* Slightly reduced base font to fit 320px screens gracefully */
  letter-spacing: 1px;
  line-height: 1.2; /* Changed from 60px to dynamic height to prevent line overlap */
  text-align: center;
}

.site-icon {
  height: 45px; /* Scaled down slightly to offer title text more screen real estate */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-right: 10px;
}





/* ==========================================
   MENU PAGE LAYOUT
   ========================================== */

/* Container using Flexbox */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 30px 10px;
}

/* Individual wrapper for each image + text overlay */
.gallery-item {
  position: relative;
  width: 290px;
  height: 290px;
  overflow: hidden;
  border-radius: 8px;
}

/* Forces the image to fill the exact 290x290 box */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The Overlay Container */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The Text Styling */
.overlay-text {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 10px;
}


/* Showcase pages */

.showcase-item {
  margin: 30px 0;
  padding: 0;
}

.showcase-item img {
  width: 290px;
  height: auto;
  display: block;
  border-radius: 6px;
}

.showcase-item figcaption {
  font-size: 0.9rem;
  color: #666666;
  margin-top: 8px;
  font-style: italic;
  width: 290px;
}

/* ==========================================
   ARTICLE PAGE LAYOUT
   ========================================== */

/* Main Container: Sets up a 2-column layout by default on large screens */
.article-container {
  max-width: 1100px; /* Limits article width so lines aren't too long to read */
  margin: 40px auto; /* Centers the article on the screen */
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr; /* Main text takes up 2/3, sidebar takes 1/3 */
  gap: 40px; /* Spacing between the columns */
}

/* Typography styling for the article */
.article-heading {
  font-size: 2.5rem;
  margin-top: 0;
  color: #2c3e50;
}

.article-lead {
  font-size: 1.2rem;
  font-weight: bold;
  color: #555555;
}

/* Illustrations & Figures */
.article-illustration {
  margin: 30px 0;
  padding: 0;
}

.article-illustration img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.article-illustration figcaption {
  font-size: 0.9rem;
  color: #666666;
  margin-top: 8px;
  font-style: italic;
}

/* Pull Quote Styling */
.pull-quote {
  font-size: 1.4rem;
  font-style: italic;
  color: #1abc9c; /* Highlight color */
  border-left: 4px solid #1abc9c;
  margin: 0 0 30px 0;
  padding: 10px 0 10px 20px;
  line-height: 1.4;
}

.script {
  padding: 0 5%;
  font-style: italic;
}

.script-lg {
  font-style: italic;
  background-color: #f7db8b;
  font-weight: bold;
  font-size: 1.4rem;
  padding: 1%;
}

.right-side {
  text-align: right;
}

.byline{
  font-style: italic;
}

/* for inline images on Bible Contact page */

.textwimage-box {
  display: flex;
  flex-direction: column; /* Default: Stacks image on top of text for mobile */
  gap: 15px;
}

.flex-pic {
  width: 100%;       /* Takes full width of the mobile screen */
  max-width: 150px;  /* Prevents it from getting too huge */
  height: auto;
}

/* On desktop screens, switch back to side-by-side */
@media (min-width: 600px) {
  .textwimage-box {
    flex-direction: row; 
    align-items: flex-start;
  }
}

/* ==========================================
   LINK BACK TO MENU (Updated to prevent overflow)
   ========================================== */
.link_back {
  display: flex;          
  justify-content: center;
  margin: 20px 0;         
  padding: 0 10px; /* Safeguard padding */
}

.link_back a {
  display: inline-flex;   
  align-items: center;    
  width: 100%;            /* Uses available room up to the max-width limit */
  max-width: 290px;       /* Keeps it looking elegant on larger displays */
  box-sizing: border-box; /* Crucial: includes the padding inside the 290px width */
  gap: 12px;              
  padding: 12px 24px;     
  background-color: #fff; 
  border-radius: 9999px;     
  text-decoration: none;  
  color: #333;            
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.link_back img {
  display: block;
  width: 100px; /* Scaled slightly down to prevent text crowding inside the pill button */
  height: auto;
}

.link_back a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


/* ==========================================
   RESPONSIVE MEDIA QUERY (Optimized for 320px)
   ========================================== */
@media (max-width: 768px) {
  .article-container {
    grid-template-columns: 1fr; 
    gap: 20px;
    margin: 20px auto;
    padding: 0 15px;           
    word-wrap: break-word;     
    overflow-x: hidden;        
  }
  
  .article-heading {
    font-size: 1.6rem;         /* Safely scaled down for small 320px phone viewports */
    line-height: 1.3;          
  }

  .pull-quote {
    font-size: 1.1rem;         
    padding: 10px 0 10px 15px; 
  }

  /* Added rule to handle the highlighted script banner container on tiny screens */
  .script-lg {
    font-size: 1.1rem;
    padding: 10px;
    word-break: break-word;
  }
}

/* Scaled up button styles for desktop screens */
@media (min-width: 1024px) {
  .link_back a {
    max-width: 400px;     /* Increases the maximum width from 290px to 400px */
    padding: 16px 36px;   /* Increases internal padding for a chunkier button */
    font-size: 1.2rem;    /* Makes the text inside the button slightly larger */
    gap: 20px;            /* Adds more space between the icon image and the text */
  }

  .link_back img {
    width: 140px;         /* Scales up the image inside the button slightly */
  }
}