/* GLOBAL STYLES */

body {
  font-family: Century, serif;
  margin: 0;
  padding: 0;
  overflow-y: auto;            /* Enable vertical scrolling */
  box-sizing: border-box;
}



/* GLOBAL LINK STYLING */
a {
  text-decoration: none;       /* Remove underlines from all links */
  color: inherit;              /* Inherit color from parent element (default: dark text) */
}

/* Left Column Link Styling */
.left-column a {
  color: #333;                 /* Set default color for links */
}

.left-column a:hover {
  color: #777;                 /* Set hover color to gray */
}

/* Sidebar Link Styling */
.sidebar-item a {
  color: #333;                 /* Set default color for links */
}

.sidebar-item a:hover {
  color: #777;                 /* Set hover color to gray */
}

/* Visited Link Styling (no color change) */
a:visited {
  color: #333;                 /* Ensure visited links are same color as normal links */
}






/* LAYOUT CONTAINERS: Main Content Styles (flexbox layout for columns) */

.byline-container {
  display: flex;
  align-items: center;    /* Vertically center content */
}

.byline-image {
  width: 50px;            /* Adjust size of circle */
  height: 50px;           /* Keep height the same to maintain circular shape */
  border-radius: 50%;     /* This makes it circular */
  object-fit: cover;      /* Ensures image fills circle without distortion */
  margin-right: 10px;     /* Space between image and text */
}

.byline-text {
  display: block; /* Ensures text is displayed next to the image */
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
  justify-content: space-between;    /* Ensure columns take full width without crowding */
  gap: 20px;                         /* Add some gap between columns */
  padding: 0 10px;                   /* Optional: Add padding inside container for more spacing */
}

/* Wrapper for article content */
.article-wrapper {
  width: 60%;                        /* Set article width to 60% */
  margin: 0 auto;                    /* Center wrapper horizontally */
  padding: 20px;                     /* Optional: add padding inside wrapper for spacing */
  box-sizing: border-box;            /* Include padding in width calculation */
}

/* article page image styles */

.article-image {
  width: 100%;            /* Image will scale with the width of its container */
  height: auto;           /* Maintain aspect ratio */
  max-width: 100%;        /* Prevent image from growing larger than its natural size */
  display: block;         /* Ensures no space below image */
  margin-top: 0;          /* Remove any space above image */
  margin-bottom: 10px;    /* Adjust this to control space below image */
}

h1 {
  margin-top: 0px;         /* Adjusts space above headline */
  margin-bottom: 0px;      /* Adjusts space below headline */
}





/* BANNER WRAPPER STYLES */

.banner-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;   /* Adjust background color as needed */
  padding: 10px;
  margin-bottom: 0px;              /* Space below the banner */
  border-bottom: 1px solid #aaa;
}

.banner-wrapper .logo {
  max-width: 257px;                /* logo.jpg is 257px wide */
  height: auto;
}

.banner-wrapper .banner {
  max-width: 640px;                /* Adjust as needed */
  height: auto;
}

/* For mobile view (when the second banner is hidden) */
@media only screen and (max-width: 768px) {
  .banner-wrapper .banner:last-child {
    display: none;                 /* Hide the second banner image */
  }

  .banner-wrapper .banner:first-child {
    /* Make sure the first banner stays aligned left and retains its normal size */
    margin-right: 0;         /* Remove any extra margin */
    width: auto;             /* Do not stretch the first image */
    max-width: 100%;         /* Ensure the first banner image doesn’t exceed container size */
  }
}




/* FEATURE STORY STYLES */

.feature-story-container {
  display: flex;
  justify-content: flex-start;                /* Align elements to the left */
  gap: 20px;
  background: #f5f5dc;                        /* Light beige background */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);  /* Darker and more prominent shadow */
  width: 100%;                                /* Maintain full width */
  padding: 10px;                              /* Add padding inside the container */
}

/* Image Styling */
.feature-story-container img {
  width: 100%;                   /* Increase the image size to fill the space */
  height: auto;                  /* Maintain aspect ratio */
  object-fit: cover;             /* Ensures the image covers the area without stretching */
  border-radius: 0px;            /* Optional: Rounded corners for the image */
  margin-top: 0;                 /* Ensure the image stays flush with the top */
  align-self: flex-start;        /* Make sure the image stays aligned to the top */
}

/* Article Text Styling */
.feature-story-container .article {
  flex: 1;
  padding: 0px;
  padding-left: 0px;                          /* Increase left padding for more space */
}

/* Optional: Hover effects */
.feature-story-container:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);  /* Make the shadow more intense on hover */
}

/* Mobile Layout (stack text and image) */
@media (max-width: 768px) {
  .feature-story-container {
    flex-direction: column;                   /* Stack vertically on smaller screens */
    justify-content: flex-start;              /* Align elements to the top */
  }

  .feature-story-container img {
    align-self: flex-start;                   /* Ensure image stays at the top */
    margin-top: 0;                            /* Remove any unwanted space above the image */
  }
}




/* ARTICLE LEDE STYLES */

/* Left Column: Article Ledes with images inside flex container */
.left-column {
  flex: 2;                           /* 2/6 of the space */
  margin-right: 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;                    /* Prevent left column from shrinking */
}

/* Article paragraphs in the left column */
.left-column .article p,
.single-column .article-wrapper p {
  font-size: 1.1em;                /* Increase font size slightly */
  line-height: 1.2;                /* Adjust line height for better readability */
  color: #333;                     /* Set a dark color for readability */
  margin-bottom: 15px;             /* Space between paragraphs */
}

/* Default Article Container (side-by-side, flex layout) */
.article-container {
  display: flex;
  flex-direction: row;             /* Side-by-side layout by default */
  flex-wrap: wrap;                 /* Allow text and image to wrap when necessary */
  align-items: flex-start;         /* Align text and image at the top */
  gap: 10px;                       /* Space between the text and image */
}

/* Article Container for Single Column Layout (stack vertically) */
.single-column .article-container {
  flex-direction: column;          /* Stack vertically in single-column layout */
  gap: 10px;                       /* Space between image and text */
}

/* Article wrapper for individual articles (full-width) */
.single-column .article-wrapper {
  display: block;                  /* Ensures wrapper is a block in single-column layout */
}

/* Article wrapper for individual articles (full-width) */
.article {
  flex: 1;                          /* Text will take the remaining space */
  min-width: 0;                     /* Prevent overflow if text is too wide */
  padding-left: 0px;                /* Keep the 20px left padding */
  padding-top: 0;                   /* Remove top padding */
}

/* Style for the headline (h2) */
.article h2 {
  margin-top: 0;                    /* Remove default margin above the headline */
}

/* Left column images */
.left-column img {
  width: 45%;                       /* Image takes xx% of container width */
  max-width: 100%;                  /* Prevent images from stretching out */
  height: auto;                     /* Maintain aspect ratio */
  flex-shrink: 0;                   /* Prevent image from shrinking */
  padding-right: 0px;               /* Add right padding to the image */
}

/* Hover effect for article containers (headline + teaser) */
.article-container:hover .article h2,
.article-container:hover .article p,
.article-container:hover a {
  color: #666;                     /* Change color to light gray when hovering over article container */
  transition: color 0.3s ease;     /* Smooth transition */
}

/* Hover effect for article images */
.left-column img:hover {
  transform: scale(1.01);                 /* Slight zoom effect on hover */
  transition: transform 0.3s ease;        /* Smooth transition for hover effects */
}

/* Add space below the article image */
.article-image {
  margin-bottom: 20px;                    /* Adjust value as needed for more or less space */
}





/* PAST FEATURE STORIES TRIO STYLES */

.past-feature-story-container {
  display: flex;
  justify-content: space-between;               /* Space sections evenly */
  gap: 7px;                                     /* Space between sections */
  background: #f5f5dc;                          /* White section background */
  overflow: hidden;
  width: 100%;                                  /* Maintain full width */
  padding: 7px;                                 /* Add padding inside the container */
}

.past-feature-story-container .section-a,
.past-feature-story-container .section-b,
.past-feature-story-container .section-c {
  flex: 1;                                      /* Equal width for each section */
  background: #f5f5dc;                          /* White background for sections */
  padding: 0;                                   /* Remove padding inside sections */
  border: 0px solid #f5f5dc;                    /* Border for visibility */
  box-sizing: border-box;                       /* Include padding and border in width */
  display: flex;                                /* Use flex for easy alignment */
  flex-direction: column;                       /* Stack image and caption vertically */
}

.past-feature-story-container img {
  width: 100%;                      /* Image takes full width */
  height: auto;                     /* Maintain aspect ratio of images */
  object-fit: cover;                /* Make sure image covers section without stretching */
  object-position: center;          /* Keep the image centered */
}

.past-feature-story-container .caption {
  text-align: left;                             /* Flush left caption text */
  margin-top: 0px;                              /* Space above the caption */
  font-size: 1.0rem;                            /* Caption font size */
  color: #333;                                  /* Caption text color */
  padding: 7px 0px;                             /* Padding for the caption above/sides */
  flex-grow: 0;                                 /* Prevent the caption from stretching */
  flex-shrink: 0;                               /* Prevent shrinking the caption */
}

.past-feature-story-container p {
  margin: 0;                                    /* Remove default margin from <p> tags */
}

/* Media query for smaller screens (e.g. phones) */
@media (max-width: 768px) {
  .past-feature-story-container {
    flex-direction: column;                     /* Stack sections vertically */
    gap: 10px;                                  /* Reduce gap between stacked sections */
  }

  .past-feature-story-container .section-a,
  .past-feature-story-container .section-b,
  .past-feature-story-container .section-c {
    flex: none;                              /* Remove equal width, let sections take full width */
    width: 100%;                             /* Each section takes full width */
    box-sizing: border-box;                  /* Make sure padding and borders are included */
  }

  .past-feature-story-container img {
    width: 100%;                       /* Image takes full width */
    height: auto;                      /* Maintain aspect ratio of images */
    object-fit: contain;               /* Ensure image fits within section without cropping */
  }
}




/* SIDEBAR STYLES */

.sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 25%;                /* Constrain right column to 25% of the container width */
  flex-shrink: 0;                /* Prevent the sidebar from shrinking */
  padding-left: 10px;            /* Optional: Adjust padding inside right column */
  padding-right: 10px;           /* Optional: Adjust padding inside right column */
}

/* Sidebar Daily Blurb (Box) */
.sidebar-daily-blurb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* Align items flush left */
  padding: 5px 5px;              /* Reduce left/right padding, keep top/bottom padding */
  background-color: #d9d9d9;     /* Optional: gray background for contrast */
}

/* Sidebar Daily Blurb (Text) */
.sidebar-daily-blurb p {
  font-size: 1em;
  color: #333;
  text-align: left;              /* Align text to the left */
  margin: 0;                     /* Optional: Remove any default margins around paragraphs */
}

/* Sidebar Item (Image + Link) */
.sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* Align items flush left */
  gap: 5px;                      /* Space between image and caption */
  border: 1px solid #ccc;        /* Thin border around the image and caption */
  padding: 5px 5px;              /* Reduce left/right padding, keep top/bottom padding */
  border-radius: 5px;            /* Optional: round corners */
  background-color: #f9f9f9;     /* Optional: light background for contrast */
}

/* Sidebar Item (Text) */
.sidebar-item p {
  font-size: 1em;
  color: #333;
  text-align: left;              /* Align text to the left */
  margin: 0;                     /* Optional: Remove any default margins around paragraphs */
}

/* Sidebar Item Images */
.sidebar-item img {
  width: 100%;                   /* Make images take up the full width of box */
  max-width: 100%;               /* Ensure image stretches to fit container */
  height: auto;                  /* Maintain aspect ratio */
  flex-shrink: 0;                /* Prevent image from shrinking */
}

/* Hover effect for sidebar items (text and links) */
.sidebar-item:hover p,
.sidebar-item:hover a {
  color: #777;                   /* Change color to gray on hover */
}

/* Additional hover effect for links inside sidebar items */
.sidebar-item:hover a {
  color: #777;                   /* Ensure link color matches hover color */
}


/* Sidebar Extras (usually just Images + Link but may include text adv's) */

/* Sidebar Extra (Image + Link) */
.sidebar-xtra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* Align items flush left */
  gap: 5px;                     /* Space between image and caption */
  padding: 5px 5px;             /* Reduce left/right padding, keep top/bottom padding */
  border-radius: 5px;           /* Optional: round corners */
}

/* Sidebar Extra (Text) */
.sidebar-xtra p {
  font-size: 1em;
  color: #333;
  text-align: left;             /* Align text to the left */
  margin: 0;                    /* Optional: Remove any default margins around paragraphs */
}

/* Sidebar Extra Images */
.sidebar-xtra img {
  width: 100%;                  /* Make images take up the full width of box */
  max-width: 100%;              /* Ensure image stretches to fit container */
  height: auto;                 /* Maintain aspect ratio */
  flex-shrink: 0;               /* Prevent image from shrinking */
}

/* Hover effect for Sidebar Extras (text and links) */
.sidebar-xtra:hover p,
.sidebar-xtra:hover a {
  color: #777;                  /* Change color to gray on hover */
}

/* Additional hover effect for links inside Sidebar Extras */
.sidebar-xtra:hover a {
  color: #777;                  /* Ensure link color matches hover color */
}



/* ADVERTISEMENT CONTAINER */
.advertisement {
  width: 100%;                     /* Make the ad container take full width of its parent */
  max-width: 100%;                 /* Prevent container from exceeding 100% width */
  margin: 20px 0;                  /* Space above and below the ad */
  padding: 0 10px;    /* Padding on left and right to prevent images from touching the edges */
  box-sizing: border-box;          /* Include padding and border in width calculations */
  background-color: #f9f9f9;       /* Light background color for contrast */
  border-radius: 5px;              /* Optional: Round corners of the ad container */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);    /* Light shadow for separation */
  display: block;                  /* Make ad a block-level element */
  text-align: center;              /* Center content (e.g., the image) */
}

/* Image inside the advertisement */
.advertisement img {
  height: auto;                    /* Maintain aspect ratio */
  max-width: 100%;                 /* Ensure it doesn't exceed container width */
  display: block;                  /* Makes image a block-level element */
  margin: 0 auto;                  /* Centers image horizontally */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for hover effects */
}

/* Hover effect for advertisement images: adding zoom effect & shadow */
.advertisement img:hover {
  transform: scale(1.05);                        /* Slight zoom effect on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);     /* More prominent shadow on hover */
}





/* === Scrolling Text Animation === */

.marquee-container {
    width: 100%;  /* Adjust to your preferred width */
    overflow: hidden;
    position: relative;
}

.scrollingText {
    display: inline-block;
    white-space: nowrap;
    animation: scrollText 70s linear infinite;
}

@keyframes scrollText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}









/* RESPONSIVE MEDIA QUERIES */

/* For small devices (phones), reduce the layout to one column */
@media only screen and (max-width: 768px) {
  
  /* Adjust the size of the banner images on phone screens */
  .banner {
    max-width: 80%;       /* Reduce width of the banner logo */
    height: auto;         /* Ensure height maintains aspect ratio */
  }

  /* Hide the second banner image on small screens (if needed) */
  .banner-wrapper .banner:last-child {
    display: none;
  }

  /* Optional: Adjust the first banner image when the second image is hidden */
  .banner-wrapper .banner:first-child {
    margin-right: 0;
  }

  /* Existing media query code (if any) will remain intact here */

  /* For small devices (phones), stack sidebar and article content */
  .container {
    flex-direction: column;   /* Stack sidebar and article on top of each other */
  }

  .sidebar {
    max-width: 100%;          /* Sidebar takes full width */
    padding-left: 0;
    padding-right: 0;
  }

  .article-wrapper {
    width: 100%;              /* Article takes full width */
  }

  /* Stack Article Image above the Article Text */
  .article-container {
    flex-direction: column;   /* Stack image above text */
    align-items: center;      /* Optional: Center the content */
    gap: 20px;                /* Space between image and text */
  }

  /* Ensure the image comes before the text */
  .article-container img {
    order: -1;                /* Forces image to appear above the text */
    width: 100%;              /* Image takes up 100% of the container width */
    max-width: 100%;          /* Ensure image doesn't exceed container's width */
    height: auto;             /* Maintain aspect ratio */
  }

  /* Adjust the article text to fit better */
  .article-container .article {
    text-align: left;         /* Optional: align text for smaller screens */
  }


/* New media query #4 (for larger devices, if applicable) */
@media only screen and (min-width: 1200px) {
  /* Example of a larger screen specific styling */
  .container {
    flex-direction: row;       /* Side-by-side layout for larger screens */
  }

  /* Ensure all elements align well on larger screens */
  .sidebar {
    max-width: 30%;            /* Make sidebar wider on large screens */
  }

  .article-wrapper {
    width: 70%;                /* Main content takes 70% of the width */
  }
}


/* Ensure the byline image remains 60px wide on smaller screens */
 .byline-image {
   width: 60px !important;    /* Fixed width for byline image, force it to 60px */
   height: 60px !important;   /* Maintain square aspect ratio */
   object-fit: cover;         /* Ensure image fits inside container without distortion */
  }
}





/* Container holding both Read Time and Play Media sections */
.article-meta {
  display: flex;                   /* Use Flexbox to align items horizontally */
  justify-content: space-between;  /* Spread the items to opposite sides */
  align-items: center;             /* Vertically center the items */
  font-family: Arial, Helvetica, Verdana, Geneva, Sans-serif;
  font-size: 11px;
  color: #A9A9A9;
}

.read-time {
  /* Style for the '- MINUTE READ' section */
}

.play-media {
  display: flex;             /* Flex container to align items horizontally */
  align-items: center;       /* Vertically center the items */
}

.play-media-image {
  width: 10px !important;    /* Adjust the image size */
  height: 10px !important;   /* Ensure consistent aspect ratio */
  object-fit: contain;       /* Ensures it doesn't stretch */
  vertical-align: middle;
  margin-right: 5px;         /* Space between the image and text */
}

.podcast-text {
  margin-right: 40px;        /* Adds space after the 'PODCAST' text */
}





/* Styling for the meta container */
.feature-story-container .meta {
    display: flex;
    align-items: center;
    text-align: left; 
    font-family: Arial, Helvetica, Verdana, Geneva, Sans-serif; 
    font-size: 11px; 
    margin-top: 0; 
    color: #A9A9A9;
}

/* Styling for the read-time text */
.feature-story-container .read-time {
    flex: 1; /* Aligns to the left */
}

/* Styling for the play button link */
.feature-story-container .play-button-link {
    display: inline-block;
    margin-left: 8px; /* Adds spacing between Read Time and Play Button */
}

/* Styling for the play button */
.feature-story-container .play-button {
    width: 10px;
    height: 10px;
}

/* Styling for the podcast text */
.feature-story-container .podcast-text {
    font-family: Arial, Helvetica, Verdana, Geneva, Sans-serif; 
    font-size: 11px; 
    color: #A9A9A9;
    margin-left: 4px; /* Adds spacing between Play Button and Podcast text */
    text-transform: uppercase;
}