/* Modern and Clean Styling for Stock Sage */

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans Malayalam", sans-serif;
}

body {
    background-color: rgb(244, 247, 249);
    color: #333;
    line-height: 1.6;
    padding: 0px;
}
 

header h1 {
    font-size: 2rem;
    font-weight: 600;
}

/* Navigation Menu Styles */
nav {   
    display: flex;
    justify-content: center;
    padding: 15px 0;   
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
}

nav ul li a:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Responsive Menu for Mobile */
.menu-toggle {
    display: none;   
    background-color: white;
    border: none;
    padding: 10px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
    nav ul {
        display: none;
        flex-direction: column;       
        width: 100%;
        text-align: left;
        position: absolute;
        background-color:white;
        top: 10px;
        left: 0;
        padding-left: 10px;
    }
    
    nav ul.open {
        display: flex;
    }
    
    .menu-toggle {
        display: block;
    }
}


/* Default Main Container (Centered, 900px Width) */
.main-container {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: auto;
    flex-grow: 1;
    min-height: auto;
}

/* Full-Width Main Container */
.full-width-container {
    background: #fff;
    padding: 30px;
    
    width: 100%; /* Takes full screen width */
    margin: 0;
    border-radius: 0; /* Optional: Removes rounded corners */
}


p, ul, ol {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}

ul, ol {
    padding-left: 20px;
}

/* Links */
a {
    color: #2563eb;
    text-decoration: none;
    
    transition: color 0.3s;
}

a:hover {
    color: #1e3a8a;
}


 /* Reset and basic styling */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #fafafa; }
 .container { max-width: 800px; margin: auto; padding: 20px; }
 /* Dynamic header/footer includes will be processed by PHP */
 h1.post-title {
   font-family: "Noto Sans Malayalam", sans-serif;
   font-size: 2.5em;
   margin-bottom: 10px;
   letter-spacing: -.05em;
   line-height: 1.2em;

 }

 .post-description {
   font-family: "Noto Sans Malayalam", sans-serif;     
   margin-bottom: 20px;     
   border-radius: 5px;   
   font-weight: 500;
   letter-spacing: -0.01em;
   word-spacing: .3em;     
   font-size: 1.3em;    
   background-color: lavender;
   padding: 15px;
   border-radius: 10px;
   font-style: italic;
 }
.post-featured { width: 100%; max-height: 400px; object-fit: cover; margin-bottom: 20px; }
 .post-content p {
   font-family: "Noto Sans Malayalam", sans-serif;
   font-size: 1.1em;
   line-height: 1.8;
   color: #222;
   letter-spacing: 0.4px;
   /* Remove or set a normal word-spacing */
   word-spacing: normal;
   text-align: justify;
   text-align-last: left;
   hyphens: auto; }
 .adsense { text-align: center; margin: 20px 0; }
 /* Share buttons */
 .share-buttons { margin: 20px 0; text-align: center; }
 .share-buttons p { margin: 5px; padding: 0px 15px; font-size: 16px; font-weight: 500; color:grey; }
 .share-buttons button { margin: 5px; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; color: #fff; }
 .btn-whatsapp { background: #25D366; }
 .btn-facebook { background: #3b5998; }
 .btn-twitter { background: #1DA1F2; }
 .btn-telegram { background: #0088cc; }
 .btn-threads { background: #000; }
 .btn-copy { background: #555; }
 /* Recent and related posts */
 .recent-posts, .related-posts { margin: 30px 0; }
 .recent-posts h3, .related-posts h3 { margin-bottom: 10px; }
 .recent-posts ul, .related-posts ul { list-style: none; padding-left: 0; }
 .recent-posts ul li, .related-posts ul li { margin-bottom: 5px; }
 /* Responsive styling */
 @media (max-width: 600px) {
   h1.post-title { font-size: 1.8em; }
   .post-description { font-size: 1em; }
 }
.malayalam {
font-family: "Noto Sans Malayalam", sans-serif;
font-size: 1em;
line-height: 1.8;
color: #222;
letter-spacing: 0.4px;
word-spacing: 1px;
text-align: justify;
text-align-last: left;
}

.related-posts ul li {
display: flex;
align-items: center;
background-color:rgba(105, 105, 105, .1);
text-decoration: none;
color: #222;
font-family: "Noto Sans Malayalam", sans-serif;
font-size: 1.1em;
letter-spacing: 0.4px;
word-spacing: 1px;
}
.related-posts ul li img {
margin-right: 10px;
height: 80px;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
font-family: "Noto Sans Malayalam", sans-serif;
margin: 20px auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

table th,
table td {
padding: 12px 15px;
text-align: center;
border: 1px solid #e0e0e0;
}

table th {
background-color: #00897b;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.05em;
}

table tr:nth-child(even) {
background-color: #f9f9f9;
}

table tr:hover {
background-color: #f1f1f1;
}

ul {
background: linear-gradient(135deg, rgba(255, 222, 126, 0.2), rgba(255, 166, 60, 0.2));
padding: 20px;
border-radius: 8px;
list-style: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
font-family: "Noto Sans Malayalam", sans-serif;
color: #444;
}

ul li {
position: relative;
margin: 10px 0;
padding-left: 30px;
font-size: 1.1em;
}

/* Custom bullet */
ul li:before {
content: "●";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
color: #d9534f;
}

/* Emphasized text styling */
ul li b {
color: #333;
font-weight: bold;
}
header ul {
background: none;
padding: 0;
border: none;
box-shadow: none;
list-style: none;
font-family: inherit;
color: inherit;
}
header ul li:before {
content: none;
}
.related-posts ul {
background: none;
padding: 0;
border-radius: 0;
list-style: disc; /* Default bullet style */
box-shadow: none;
font-family: inherit;
color: inherit;
}

.related-posts ul li {
position: static;
margin: 0;
padding-left: 0;
font-size: inherit;
}

.related-posts ul li:before {
content: none;
}

ol {
background: linear-gradient(135deg, rgba(39, 190, 250, 0.5), rgba(60, 255, 213, 0.5));
padding: 20px;
border-radius: 8px;
list-style: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
font-family: "Noto Sans Malayalam", sans-serif;
color: #444;
}

ol li {
position: relative;
margin: 10px 0;
padding-left: 30px;
font-size: 1.1em;
}

/* Custom bullet */
ol li:before {
content: "●";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.2em;
color:rgb(34, 89, 255);
}

/* Emphasized text styling */
ol li b {
color: #333;
font-weight: bold;
}

blockquote {margin: 25px 0; font-style: italic; padding:10px; background-color: rgba(166, 255, 248, 0.5); border-radius: 10px; border: 1px solid rgba(0, 196, 181, 0.9);}
.psychology-table {width: 100%; border-collapse: collapse; margin: 20px 0;}
.psychology-table th, .psychology-table td {border: 1px solid #ddd; padding: 12px;}
.psychology-table th {background-color: #3498db; color: white;}
.timeframe-process p {background: #e8f4f8; padding: 10px; border-left: 4px solid #2980b9;}
.volume-profile-example, .options-example {background: #f9ebd3; padding: 15px; margin: 15px 0;}
.herd-list li {margin: 10px 0; padding: 8px; border-bottom: 1px solid #eee;}
article {max-width: 800px; margin: auto; font-family: "Noto Sans Malayalam";}
h1 {color: #2c3e50; border-bottom: 2px solid #3498db;}
h2 {color: #2980b9; margin-top: 30px;}
h3 {color: #16a085;}
.example-chart {background: #f8f9fa; padding: 15px; margin: 15px 0;}
.mistake-box {background: #fff3cd; padding: 10px; border-radius: 5px;}
.advanced-technique {background: #f0f8ff; padding: 20px; border-radius: 8px;}
.confluence-table {width: 100%; margin: 25px 0; border-collapse: collapse;}
.confluence-table th {background: #2c3e50; color: white; padding: 12px;}
.confluence-table td {padding: 10px; border: 1px solid #ddd;}
.formation-process h4 {color: #27ae60; margin-top: 15px;}
.trading-strategies {display: grid; gap: 20px; margin: 25px 0;}
.strategy-box {background: #fff5e6; padding: 15px; border-left: 4px solid #e67e22;}
.case-study {background: #e8f8f5; padding: 15px; border-radius: 5px;}
.mistake-section {background: #f9ebd3; padding: 20px; margin-top: 20px;}
.mistake {margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #ddd;}


.chart-img {
width: 100%; /* Full container width responsiveness */
max-width: 800px; /* Optimal chart readability limit */
height: auto; /* Aspect ratio preservation */
margin: 20px auto; /* Vertical spacing + horizontal centering */
border: 1px solid #e0e0e0; /* Subtle border for visual separation */
border-radius: 8px; /* Soft rounded corners */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* Depth perception */
padding: 10px; /* Internal breathing space */
background: #ffffff; /* White base for chart clarity */
display: block; /* Remove inline spacing */
transition: transform 0.3s ease; /* Hover interaction */
}

/* Hover Effects for User Engagement */
.chart-img:hover {
transform: translateY(-3px); /* Lift effect on interaction */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); /* Enhanced depth */
}

/* Mobile Optimization */
@media (max-width: 768px) {
.chart-img {
   max-width: 95%; /* Screen edge spacing */
   margin: 15px auto; /* Reduced spacing */
   padding: 5px; /* Tighter padding */
}
}

/* Print-Friendly Adjustments */
@media print {
.chart-img {
   border: 2px solid #ddd; /* Higher contrast for B&W */
   box-shadow: none; /* Remove shadows */
   page-break-inside: avoid; /* Prevent image split */
}
}

/* Alt Text Styling (Fallback) */
.chart-img::after {
content: attr(alt); /* Display alt text if image missing */
display: block;
padding: 15px;
color: #666;
font-family: "Manjari", sans-serif;
text-align: center;
background: #f9f9f9;
}

.photo-caption img {
    float: left;
    margin: 0 15px 15px 0; /* Adjust spacing as needed */
  }

  .expert-tip {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    font-family: Arial, sans-serif;
    background-color: rgba(229, 255, 181, .8);
  }
  
  .expert-tip h4 {
    margin: 0 0 10px;
    color: #333;
  }
  
  .expert-tip p {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 0;
    padding-left: 50px; /* space for the large quote */
    position: relative;
  }
  
  .expert-tip p::before {
    content: "“";
    font-size: 4em;
    color: #ddd;
    position: absolute;
    left: 10px;
    top: -10px;
  }
  .views-tag {
    display: inline-block;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    color: #fff;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    text-transform: capitalize;
    letter-spacing: 0.5px;
  }