/* General Website Style rules */

/* General Styling */
body { 
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

ul {
    margin: 0;
    padding: 10px 0 0 35px;
    font-size: 1.1rem;
    line-height: 1.3;    /* Controls line spacing */
}

ul li {
    padding: 10px 0 0 0;
}

ol {
    margin: 0;
    padding: 15px 0 0 35px;
    font-size: 1.1rem;
    line-height: 1.3;    /* Controls line spacing */
}

ol li {
    padding: 5px 0 0 0;
}

.background { 
    background-color: #ddd; 
  }

/* Container for an individual news article - Set maximum width for readability on large screens */
.article-container {
    max-width: 800px;  /* Adjust this value as needed */
    margin: auto;      /* Center the article */
    padding: 20px; 
}

/* Individual news card */
.article { 
    border: none;
 /* border: 1px solid #ddd;
    background-color: #fff;
    box-sizing: border-box; */
}

/* Ensure images and text scale properly */
.article img {   
    width: 100%; 
    height: auto;           
}

/* Content styling */
.article h1 {
    line-height: 1.0;     /* Controls line spacing */   
    padding: 15px 0 0 0;  /* Alignment - top and bottom, right and left */ 

}

.article h5 {
    line-height: 1.3;    /* Controls line spacing */
    padding: 15px 0 25px 0;     /* Alignment - top and bottom, right and left */  
}

.article p {
    font-size: 1.1rem;
    line-height: 1.3;    /* Controls line spacing */
    margin: 0;  
    padding: 20px 0 0 0; /* Alignment - top, right, bottom, left */
    text-align: left;    /* Align text to the left */
}

.article-date {
    font-size: 0.9em; 
    color: gray;
    padding: 0 0 20px 0;  /* Alignment - top, right, bottom, left */
}

.image-text {
    font-size: 0.9em;
    color: gray;
    padding: 10px 0 20px 0;  /* Alignment - top, right, bottom, left */
}


.font-serif {
   
    font-family:serif
}

.font-serif  i {
    font-size: 21px;
}



/* Container for all news cards */
.news-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive card sizing */
    gap: 20px; /*16px;*/ /* Space between cards */
    align-items: stretch; /* Stretch all cards to the same height */
    margin: 20px;
}

/* Individual news card */
.news-card {
    display: flex;           /* Use Flexbox to control child alignment */
    flex-direction: column;  /* Stack elements vertically */
    align-items: flex-start; /* Align img and .below-image to top */
    justify-content: space-between; /* Space elements out */
    background-color: #fff;
    box-sizing: border-box;
    height: 100%; /* Allow cards to stretch to row height */
    border: 0cap solid #ddd;
    border-radius: 20px;  
}

.view-count {
  margin-top: auto; /* Pushes it to the bottom */
  padding: 0 16px 16px 16px;
  color: gray;
  font-size: 14px;  
}

.below-image {
    padding: 16px;
    flex-grow: 1;  /* Allows controlled expansion */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns text at the top */
}

/* Uniform size for images */
.news-card img {
    width: 100%;              /* Full card width */
    aspect-ratio: 4 / 3;      /* Adjust aspect ratio (e.g., 16:9 for a conventional TV proportion image) */
    object-fit: cover;        /* Ensure images are cropped and fitted properly */
    display: block;           /* Ensures the image respects parent layout */
    border-radius: 20px 20px 0px 0px;
}

/* Content styling */
.news-card h3 {
    font-size: 24px;     /* 1.2rem; */
    line-height: 1;      /* Controls line spacing */
    margin: 0 0 10px 0;  /* Top alignment */
    text-align: left;    /* Align text to the left */
}

.news-card h2 {
    font-size: 18px;     /* 1.2rem; */
    line-height: 1;      /* Controls line spacing */
    margin: 0 0 10px 0;  /* Top alignment */
    text-align: left;    /* Align text to the left */
}

.news-card p {
    line-height: 1.3;    /* Controls line spacing */
    margin: 5px 0;
    text-align: left;    /* Align text to the left */
}

/* Responsive layouts */
@media (max-width: 1200px) {
    .news-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Three cards per row */
    }
}

@media (max-width: 768px) {
    .news-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Two cards per row */
    }
}

@media (max-width: 480px) {
    .news-container {
        grid-template-columns: 1fr; /* One card per row */
    }
}


.header {
    width: 100%; 
    text-align: center;
  }
  
.footer {
 /*   position: sticky;
    left: 0;
    bottom: 0; */
    width: 100%;
    text-align: center;
}
  
.news-date {
    font-size: 12px; 
    color: gray;
}

.timeDate {           /* old, to be deleted */
    color: gray;
}

.back-link {
    text-decoration: none;
    font-size: 16px;
    color: gray;
}

.back-link:hover {
    color: blue;
    text-decoration: underline;
}



.link-box {
    border: 3px solid #ddd; /* #ccc; */
    border-radius: 22px; 
    text-decoration: none;
    color: black;
    transition: border-color 0.5s;
}

.link-box:hover { 
    border-color: #647687; /* rgb(40, 122, 133); */ /* Border color on hover */
    text-decoration: none;
    color: black;
}

.link-box:active {
    border-color:  rgb(40, 122, 133);
}

.rounded-button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reaction {
    font-size: 1.2rem;
    color: #555;
    cursor: pointer;
}

.reaction:hover {
    color: #007bff;
}

/* In comments force the first div child to stretch across the full width of the parent div
   to make sure that the reply form goes full width to the right (and does not get too narrow) */
.my-4.d-flex > div:first-child {
  width: 100%;  /* Ensure it takes the full width of its parent */
}

/* Formatting of the primary comment username in secondary level reply */
.blue-text {
    color: #673ab7; /*blue;*/
  /*font-weight: bold; */   /* Optional */
}

/* Formatting of the "Show more ..." and "Hide ..." button link*/
.show-more-link {
    border: none;
    background-color: white;
    color: #673ab7; /*blue;*/
    padding: 0;
    text-decoration: underline;
}

/* -------------- From w3-colors-win8.css ---------------- */

.w3-win8-steel {
    color:#fff!important;
    background-color:#647687!important
}


/* ------------------- From w3.css ----------------------- */
/*
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before{content:"";display:table;clear:both}
*/
.w3-container,.w3-panel{padding:0.01em 16px}

.w3-panel{margin-top:16px;margin-bottom:16px}

.w3-leftbar{border-left:6px solid #ccc!important}

.w3-white{color:#000!important;background-color:#fff!important}

.w3-text-deep-purple {color:#673ab7!important}

/* ------------------ bootstrap.min.css ------------------ */

.container {
    padding: 0;  /* Remove unwanted left and right padding in reactions and comments container below the news */
    margin:  0;
}


.btn-link {
    --bs-btn-color: #673ab7; /*gray;*/   /* Change color of a link button to expand 2nd level comments from blue to gray */
}


.btn-link:hover {
    color: #0d6efd; /*gray;*/   /* Change color of a link button to expand 2nd level comments from blue to gray */
}

/* ------------------------------------------------------- */