/* --- START OF FILE xstyle.css --- */

:root {
  /* --- 1. LIGHT MODE PALETTE (Default) --- */
  --primary-text-color: #3a3a3a;
  --primary-heading-color: #686868;
  --background-main: #fdfcf8;      /* Creamy White */
  --background-card: #ffffff;
  --border-color: #e0e0e0;
  
  /* Brand Colors */
  --brand-color-red: #8B0000;      
  --brand-color-red-hover: #6e0000; 

  /* Typography Colors */
  --text-body-color: #333;         
  --quote-bg: #ffffff;             
  --quote-border: #d0d0d0;            
  --quote-mark: #e0e0e0;           
  
  /* Shadows */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* --- 1. CORE LAYOUT & TYPOGRAPHY --- */
body {
  background-color: var(--background-main);
  color: var(--text-body-color);
  font-family: "Georgia", "Times New Roman", Times, serif;
/* MOBIE OPTIMIZATION: Bigger text, tighter lines */
  font-size: 1.2rem;   /* Approx 19px - perfect for mobile */
  line-height: 1.58;   /* The "Golden Ratio" for reading long text */
  color: var(--text-body-color); /* Uses your (newly darkened) variable */
  }

.container {
  max-width: 700px;
  background-color: var(--background-main);
  box-shadow: none; 
  padding: 0 15px 15px 15px; 
}

p {
    margin-bottom: 1.5rem; 
    color: var(--text-body-color);
}

/* Handling your Bold Subheads */
strong, b {
    color: #222; /* Make bold text slightly darker than body text to pop */
}

a {
  color: var(--brand-color-red);
  text-decoration: none;
}

/* --- INTELLIGENT HEADER LINKS --- */

/* 1. Default State: Dark & Clean */
h1 a, h2 a, h3 a, h4 a, h5 a {
    color: var(--primary-heading-color); /* Uses your Grey/Black variable */
    text-decoration: none;
    font-weight: inherit; /* Keeps the boldness of the header */
    transition: color 0.2s ease;
}

/* 2. Hover State: Brand Interaction */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
    color: var(--brand-color-red); /* Turns Red only on mouseover */
    text-decoration: underline;
}

a:hover {
  color: var(--brand-color-red-hover);
  text-decoration: underline;
}

/* --- 2. LEGACY HEADLINES (RESTORED) --- */
h1 { font-size: 2.0rem; }
h2 { font-size: 1.8rem; } /* Slightly smaller, but visually similar */

h1, h2 {
  border-bottom: 1px solid var(--brand-color-red); 
  padding: 0.5rem 0rem 0.5rem 0rem;
  text-align: left; 
  color: var(--primary-heading-color); 
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  line-height: 1.2; 
  font-stretch: condensed;
  margin-bottom: 1.5rem; 
}

h3, h4, h5 {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--primary-heading-color);
  font-weight: 700;
  font-stretch: condensed;
}

/* --- 3. NEW DESIGN ELEMENTS --- */

/* Intro Text Helper */
.intro-text {
    max-width: 800px; 
    margin: 0 auto 1.5rem auto; 
    text-align: center;
    font-weight: 400; 
}

/* --- 4. BLOCKQUOTES --- */
.quote, blockquote {
    font-style: italic; 
    border: none;
    margin: 2rem 0; 
    padding: 20px 30px 20px 60px; 
    line-height: 1.6;
    position: relative;
    border-radius: 6px;
    
    /* Uses variable (White in Light Mode, Dark Grey in Dark Mode) */
    background-color: var(--quote-bg); 
    border-left: 4px solid var(--quote-border); 
    color: var(--text-body-color);
    
    /* Optional shadow for Light Mode (won't hurt dark mode much) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); 
}

.quote:before, blockquote:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: 15px;
    top: 15px;
    font-family: Georgia, serif;
    line-height: 1;
    color: var(--quote-mark);
}

/* Target the citation/source inside the blockquote */
blockquote sub, 
blockquote small {  /* REMOVED 'blockquote em' from this list */
    display: block;      
    margin-top: 15px;    
    font-size: 0.85rem;  
    color: #666;         
    font-style: normal;  
    font-family: 'Roboto Condensed', sans-serif; 
    line-height: 1.4; /* Added to ensure spacing is clean */
}

/* --- 5. CARDS & IMAGES --- */
.card {
    position: relative; /* CRITICAL: Allows stretched-link to work */
    border: none;
    border-radius: 8px;
    background-color: var(--background-card);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-top: 4px solid var(--brand-color-red); 
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.card-body {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    background-color: var(--background-card);
    position: relative;
    z-index: 2; /* Keeps text selectable */
}

/* Ensure the link covers the image and text */
a.stretched-link::after {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: "";
}

.card-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--primary-heading-color);
    margin-bottom: 15px;
}

.card-text {
    font-size: 0.95rem;
    color: var(--text-body-color);
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; 
}

.hero-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 25px;
}

.img-wrapper {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}
.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.card:hover .img-wrapper img { transform: scale(1.05); }

/* --- 6. BUTTONS --- */
.btn-primary {
    background-color: transparent !important;
    border: 2px solid var(--brand-color-red) !important;
    color: var(--brand-color-red) !important;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 50px; 
    padding: 6px 10px;
    transition: all 0.2s ease;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--brand-color-red) !important;
    color: white !important;
    transform: scale(0.98); 
}

/* --- 7. CONSOLIDATED FOOTER --- */
.site-footer {
    background-color: #f9f9f9; /* Light, Minimalist */
    border-top: 1px solid #e0e0e0; 
    color: #666;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-top: 40px;
    font-size: 0.95rem;
}

/* FIX: Removes the white box glitch */
.site-footer .container {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.site-footer h5 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #333; 
    margin-bottom: 15px;
    border-bottom: 2px solid var(--brand-color-red); 
    display: inline-block;
    padding-bottom: 5px;
}

.site-footer a { color: #666; transition: color 0.2s; }
.site-footer a:hover { color: #8B0000; text-decoration: none; }

.site-footer .copyright-line {
    border-top: 1px solid #e0e0e0;
    margin-top: 20px;
    padding-top: 20px;
    color: #888;
    font-size: 0.85rem;
}

.img-thumbnail { 
    /* Layout & Text */
    text-align: center; 
    font-style: italic; 
    font-size: 0.95rem; 
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: #666; /* Softer text for caption */

    /* The "Card" Look */
    background-color: #fff;
    padding: 10px; /* Creates white matting around photo */
    border-radius: 8px; /* Soft corners */
    
    /* Remove default Bootstrap gray border */
    border: none; 
    
    /* Add Depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    
    /* THE BRANDING: A subtle red accent on the bottom only */
    border-bottom: 3px solid var(--brand-color-red); 
}

.breadcrumb {
    background-color: transparent !important;
    padding-left: 0 !important; 
	padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* Add red highlight  */
/* Make lists look like designed elements, not just typed text */
ul, ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem; /* Indent slightly */
}

li {
    margin-bottom: 0.8rem; /* Add air between list items */
    padding-left: 0.5rem;
}

/* Make the bullets RED to add color without images */
ul li::marker {
    color: var(--brand-color-red); 
    font-size: 1.1em;
}

hr {
    border: 0;
    border-top: 1px solid var(--brand-color-red);
    opacity: 0.1; /* Subtle line */

}

/* --- COMPACT COLLAPSIBLE SECTIONS --- */

details {
    /* CHANGE: Reduce spacing significantly */
    margin-bottom: 5px !important; 
    border-bottom: none !important; /* Remove the separator line */
    padding-bottom: 0 !important;
}

summary {
    list-style: none;  
    color: var(--brand-color-red) !important; 
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.1rem !important; 
    cursor: pointer;
    outline: none;
    position: relative;
    padding-left: 20px; /* Reduced indentation slightly */
}

summary::-webkit-details-marker { display: none; }

/* The Arrow */
summary::before {
    content: "\f0da"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    font-size: 0.9em; /* Slightly smaller arrow */
    top: 4px; /* Optical alignment */
    color: var(--brand-color-red);
    transition: transform 0.2s ease;
}

details[open] summary::before { transform: rotate(90deg); }

summary:hover, summary:focus {
    color: var(--brand-color-red-hover) !important;
    text-decoration: underline;
}

/* =========================================
   LEGACY STYLES
   ========================================= */
    
/* --- 8. LEGACY IMAGE FIXES --- */
.p50 { width: 420px; max-width: 50%; }
.p40 { max-width: 40%; }
.p33 { max-width: 33%; }
.p25 { max-width: 25%; }
.p20 { max-width: 20%; }

.float-left {
    float: left !important;
    margin-right: 25px !important; 
    margin-bottom: 15px !important;
}

.float-right {
    float: right !important;
    margin-left: 25px !important; 
    margin-bottom: 15px !important;
}

.center-text {
    text-align: center;
}

/* --- LEGACY LAYOUT HELPERS (Fixed for 700px Container) --- */
.center-text {
    text-align: center;
}

/* Force 3 Columns (Trigger: If space > 450px) */
.cols {
    columns: 150px 3 !important;
    -webkit-columns: 150px 3 !important;
    -moz-columns: 150px 3 !important;
    column-gap: 20px;
    column-rule: 1px solid var(--brand-color-red);
}

/* Force 2 Columns (Trigger: If space > 450px) */
.cols2, .card-columns, .columns {
    columns: 220px 2 !important; 
    -webkit-columns: 220px 2 !important;
    -moz-columns: 220px 2 !important;
    column-gap: 30px; /* Nice wide gap between text columns */
}

.box {
    padding: 15px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 15px;
    box-shadow: var(--shadow-soft);
    
    /* Ensure box content doesn't break inside columns */
    break-inside: avoid; 
    page-break-inside: avoid;
}

/* Specific styling for Section Dividers */
.star-section-divider {
    text-align: center;
    margin: 20px 0;
    color: var(--brand-color-red);
}

/* --- LEGACY IMAGE FLOATS --- */
.image-left {
    float: left;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.image-right {
    float: right;
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.cover {
    float: left; 
    width: 33%;
    margin-right: 15px;
}

/* Mobile fix for these images */
@media (max-width: 767px) {
    .image-left, .image-right, .cover {
        float: none !important;
        display: block;
        margin: 0 auto 15px auto;
        width: 100%;
        max-width: 300px; /* Prevents them from being massive */
    }
}
    
/* --- LEGACY TABLE STYLES --- */
.table-header-dark {
    background-color: cornsilk;  */
    font-weight: bold;
}

.table-header-light {
    background-color: var(--background-main);
    color: black;  
}

.table-bordered {
    background-color: white;
    box-shadow: var(--shadow-soft);
}
    
/* --- LEGACY TOOLTIPS (Yellow Style) --- */
.tooltip-inner {
    color: #161616;
    text-align: left; 
    max-width: 320px;
    background-color: #ffffaf !important;
    border: 1px solid #e0e0a0;
}
.tooltip.show { opacity: 1; }
.bs-tooltip-top .arrow::before { border-top-color: #ffffaf !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #ffffaf !important; }

.sans a, .sans p, .list-group-item a {
	font-family: sans-serif;
	font-size: 13pt;
	color: black
}
	
/* --- PRINT STYLES --- */
@media print {
    body * { visibility: hidden; }
    article, article * { visibility: visible; }
    article { position: absolute; top: 0; left: 0; width: 100%; }
    
    /* Hide navigation and footer when printing */
    #topNav, .site-footer, .breadcrumb { display: none !important; }
}

/* SPIRITUAL LINK */
  .SL3D {color:cornsilk; font-size:40pt; line-height: 1; text-align: center; font-family: 'Noto Serif Devanagari', serif; font-weight: 900; font-stretch:condensed;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2)
               ;
  margin-bottom: 1.5rem;
}
.splink-container a {
	color: black;
}
.spl-vol-issue {
	margin-top: 1.5rem;
}

/* Mobile Fix for Legacy Floating Images */
@media (max-width: 767px) {
    .p50, .p40, .p33, .p25 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: block;
        margin-bottom: 20px !important;
    }
	.site-footer {
        text-align: center;
    }
	ul, ol {
        padding-left: 1.2rem; /* Reduced from 2rem to give text more room */
    }
}