/* ==========================================================================
   VIEW-STORY.CSS - Styles for news/story article pages
   ==========================================================================
   
   This file uses CSS custom properties (variables) defined in /css/site-vars.css.jspf:
   - --site-primary: Primary brand color
   - --site-secondary: Secondary brand color
   - --site-icons-color: Icon color
   - --site-sections-2: Section background color
   - --text-muted: Muted/secondary text (e.g. captions, labels, breadcrumb current page)
   
   Dark mode variables (from header-modern-base.jspf):
   - --dm-bg-card, --dm-bg-elevated, etc.
   
   ========================================================================== */


/* ==========================================================================
   1. BASIC PAGE ELEMENTS
   ========================================================================== */

/* Story content styles */
.caption {
  font-size: 11px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-muted);
  padding: 5px 18px 5px 18px;
  margin-top: 12px;
  background-color: var(--color-bg-hover);
  border-left: 3px solid var(--site-primary);
  border-radius: 4px;
  font-family: Georgia, "Times New Roman", serif;
}

/* Recruiting update stories: header logo (--recruit-header-logo set in header-news.jspf when body has recruit-update-news) */
body.recruit-update-news #logo {
  background-image: var(--recruit-header-logo);
}

#authorTwitter { vertical-align: top; display: inline-block; margin-top: 1.5px; margin-left: 10px; }
.extra-story-pic { max-width: 480px; }
.inside-thread-body { background-color: var(--color-bg-light); }
.inside-thread-post { font-size:13px; width: 650px; margin:auto; }
.inside-thread-subject { font-size:14px; }
.inside-thread-subject a { font-size:13px; }
.inside-thread-body img { max-width:600px; }
.jspVerticalBar { width:8px; }
.jspContainer { z-index:999 }
a.news-title { font-size:16px; }

/* Embedded PDFs in articles: container needs explicit height so object 100% has a defined size */
#pdf1,
#pdf2 {
  display: flex;
  flex-direction: column;
  min-height: 800px;
  height: 85vh;
  margin: 1em 0;
  -webkit-overflow-scrolling: touch;
}
#pdf1 > a,
#pdf2 > a {
  flex-shrink: 0;
  margin-bottom: 0.5em;
}
#pdf1 > object,
#pdf2 > object {
  flex: 1;
  min-height: 750px;
  width: 100%;
  display: block;
  /* Force light color scheme so browser PDF viewer doesn't go dark in dark mode */
  color-scheme: light;
  background: #fff;
}

/* ==========================================================================
   2. TRENDING/RELATED LINKS (Embedded in Articles)
   ========================================================================== */

.related-c {
  margin: 16px 0;
  padding: 12px 14px;
  padding-top: 8px;
  background: var(--story-related-bg);
  border-left: 4px solid var(--site-primary);
  border-radius: 6px;
  box-shadow: var(--story-related-shadow);
  transition: all 0.3s ease;
}

.related-c::before {
  content: "TRENDING";
  display: block;
  color: var(--site-primary);
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--story-related-label-border);
}

.related-c:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.related-inside {
  margin: 8px 0;
  padding: 6px 10px;
  background-color: var(--color-bg-surface);
  border-radius: 4px;
  line-height: 1.5;
  transition: all 0.2s ease;
}

.related-inside:first-child {
  margin-top: 0;
}

.related-inside:last-child {
  margin-bottom: 0;
}

.related-inside:hover {
  background-color: var(--color-bg-light);
  padding-left: 14px;
  cursor: pointer;
}

.related-inside b {
  color: var(--site-primary);
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 8px;
}

.related-c .related-inside a {
  color: var(--text-muted);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95em;
  transition: color 0.2s ease;
  cursor: pointer;
  /* Stretch link to entire row so whole line is clickable */
  display: block;
  margin: -6px -10px;
  padding: 6px 10px;
}

.related-c .related-inside a:hover {
  color: var(--site-primary);
  cursor: pointer;
}

.related-c .related-inside a:visited {
  color: var(--text-muted);
}

.related-c .related-inside a:visited:hover {
  color: var(--site-primary);
}

/* In-article: space between trending block and sister site widget (equal spacing) */
#story_body .related-c {
  margin-bottom: 2em;
}

/* Sister site widget in article: equal top/bottom margin for balanced spacing */
#story_body .sister-site-widget-in-article-wrap {
  margin: 2em 0;
}

/* Hide right-rail sister site on mobile; in-article copy is inserted by JS (sister-site-widget-mobile-container) */
@media (max-width: 768px) {
  #layout_right #sister-site-widget {
    display: none !important;
  }
}

/* Gallery search widget embedded in article body ([GALLERY_SEARCH_WIDGET]) */
.gallery-search-widget {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.gallery-search-widget .chosen-container {
  width: 300px !important;
  flex-shrink: 0;
}

html.dark-mode .gallery-search-widget .chosen-container-multi .chosen-choices {
  background: var(--dm-bg-elevated, #2a2a2a);
  border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
  color: var(--dm-text-primary, #f1f5f9);
}

html.dark-mode .gallery-search-widget .chosen-container .chosen-drop {
  background: var(--dm-bg-elevated, #2a2a2a);
  border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}

html.dark-mode .gallery-search-widget .chosen-container .chosen-results li {
  color: var(--dm-text-primary, #f1f5f9);
}

html.dark-mode .gallery-search-widget .chosen-container .chosen-results li.highlighted {
  background: var(--site-primary, #F56600);
  color: #fff;
}

html.dark-mode .gallery-search-widget .chosen-container-multi .chosen-choices li.search-choice {
  background: var(--dm-bg-tertiary, #333);
  color: var(--dm-text-primary, #f1f5f9);
  border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}

/* Footer social widgets (when section enabled): stack on mobile */
@media (max-width: 900px) {
  #story_body .news-footer-social-left {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  #story_body .news-footer-social-widget--facebook,
  #story_body .news-footer-social-widget--twitter {
    width: 100% !important;
  }
}

/* News update view: on mobile only, hide TRENDING header and show single in-article trending link */
@media (max-width: 768px) {
  .news-update-view .related-c::before {
    display: none;
  }
  .news-update-view .related-c .related-inside:not(:first-child) {
    display: none;
  }
}


/* ==========================================================================
   3. STORY BODY & SIDEBAR ELEMENTS
   ========================================================================== */

#sb-last { margin-right:0; }
#send-feedback { font-size:16px; }
#story-ad, .story-ad { float: left; margin-right: 10px; }
.story_body { min-height:420px; }
#story_body a { text-decoration:underline; color: var(--site-primary); }

#story_body,
#news-layout-body {
  color: var(--color-text);
  background-color: transparent;
}

#story_body a:visited,
#news-layout-body a:visited {
  color: var(--site-primary);
}

#story_body a:hover,
#news-layout-body a:hover {
  color: var(--site-primary);
  opacity: 1;
}

/* Embedded thread reply buttons: keep white text/icon (don't inherit article link orange). */
#story_body .news-thread-container a.forum-reply,
#story_body .news-thread-container a.forum-reply:link,
#story_body .news-thread-container a.forum-reply:visited,
#story_body .news-thread-container a.forum-reply:hover,
#story_body .news-thread-container a.forum-reply:focus,
#story_body .news-thread-container a.forum-reply:active {
  color: #fff !important;
  text-decoration: none !important;
}

#story_body .news-thread-container a.forum-reply .material-icons,
#story_body .news-thread-container a.forum-reply:visited .material-icons,
#story_body .news-thread-container a.forum-reply:hover .material-icons,
#story_body .news-thread-container a.forum-reply:focus .material-icons {
  color: #fff !important;
}

/* Story body tooltip links: keep plain inline link style (no forum "logo-area" chip styling). */
#story_body .logo-area.utip,
#story_body #logo-area.utip {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-right: 0 !important;
  width: auto !important;
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: inherit !important;
  font-weight: inherit !important;
}

#story_body .logo-area.utip a,
#story_body .logo-area.utip a:link,
#story_body .logo-area.utip a:visited,
#story_body .logo-area.utip .post-username,
#story_body .logo-area.utip a.post-username:link,
#story_body .logo-area.utip a.post-username:visited {
  color: var(--site-primary) !important;
  text-shadow: none !important;
  text-decoration: underline !important;
  display: inline !important;
}

/* Dark mode: #story_body beats html.dark-mode a (ID); utip links use !important — use lightened --dm-accent-text */
html.dark-mode #story_body a,
html.dark-mode #story_body a:link,
html.dark-mode #story_body a:visited,
html.dark-mode #news-layout-body a,
html.dark-mode #news-layout-body a:link,
html.dark-mode #news-layout-body a:visited {
  color: var(--dm-accent-text);
}

html.dark-mode #story_body a:hover,
html.dark-mode #story_body a:focus,
html.dark-mode #news-layout-body a:hover,
html.dark-mode #news-layout-body a:focus {
  color: var(--dm-text-secondary);
}

html.dark-mode #story_body .logo-area.utip a,
html.dark-mode #story_body .logo-area.utip a:link,
html.dark-mode #story_body .logo-area.utip a:visited,
html.dark-mode #story_body #logo-area.utip a,
html.dark-mode #story_body #logo-area.utip a:link,
html.dark-mode #story_body #logo-area.utip a:visited,
html.dark-mode #story_body .logo-area.utip .post-username,
html.dark-mode #story_body .logo-area.utip a.post-username:link,
html.dark-mode #story_body .logo-area.utip a.post-username:visited {
  color: var(--dm-accent-text) !important;
}

html.dark-mode #story_body .logo-area.utip a:hover,
html.dark-mode #story_body .logo-area.utip a:focus,
html.dark-mode #story_body #logo-area.utip a:hover,
html.dark-mode #story_body #logo-area.utip a:focus {
  color: var(--dm-text-secondary) !important;
}

#story,
article {
  background-color: transparent;
  color: var(--color-text);
}

/* Responsive YouTube/Video Embeds */
#story_body iframe[src*="youtube"],
#story_body iframe[src*="youtu.be"] {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

#trending { font-size:0.9em; }
#trending-title { color:var(--color-text-on-primary); font-weight: bold; border-top-right-radius: 15px; padding:3px 10px; background-color: var(--site-primary); }
#trending-list { margin:0 -8px 0 -8px; }


/* ==========================================================================
   4. MODERN TRENDING SECTION
   ========================================================================== */

.trending-section-wrapper {
  margin: 0 0 20px 0;
  background-color: var(--color-bg-elevated);
  border-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#recent-stories-block {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 15px 20px;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}

#recent-stories-block-footer {
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}

.trending-articles-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 20px;
  background-color: var(--color-bg-elevated);
  border-radius: 0;
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

.latest-article.trending-c {
  flex: 0 0 calc((100% - 12px) / 3);
  min-width: 0;
  max-width: calc((100% - 30px) / 3);
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-elevated);
  border-color: transparent;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-right: 0;
  margin-left: 5px;
  box-sizing: border-box;
}

/* When there are 4 items (before JavaScript removes one), adjust sizing */
.trending-articles-container:has(.trending-c:nth-child(4)) .latest-article.trending-c {
  flex: 0 0 calc((100% - 9px) / 4);
  max-width: calc((100% - 9px) / 4);
}

.latest-article.trending-c:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.latest-article.trending-c a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.latest-article.trending-c:hover a {
  color: inherit;
  text-decoration: none;
}

.latest-article.trending-c .latest-article-img {
  width: 100%;
  max-width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
  transition: transform 0.3s ease;
  box-sizing: border-box;
}

.latest-article.trending-c:hover .latest-article-img {
  transform: scale(1.05);
}

.latest-article-img {
  max-width: 255px;
}

.latest-article.trending-c .news-title {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
  text-decoration: none !important;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  min-height: 48px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.latest-article.trending-c .news-title:hover {
  text-decoration: none !important;
}

.latest-article.trending-c:hover .news-title {
  color: var(--site-primary);
  text-decoration: none !important;
}

/* Tablet: Keep 3 columns but adjust spacing */
@media (max-width: 1024px) and (min-width: 769px) {
  .trending-articles-container {
    gap: 6px;
    padding: 12px 4px;
  }
  
  .latest-article.trending-c {
    flex: 0 0 calc((100% - 12px) / 3);
    max-width: calc((100% - 12px) / 3);
    min-width: 140px;
  }
  
  .latest-article.trending-c .latest-article-img {
    height: 130px;
  }
  
  .latest-article.trending-c .news-title {
    padding: 8px 10px;
    font-size: 12px;
    min-height: 48px;
  }
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .trending-section-wrapper {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    overflow: hidden;
  }
  
  .trending-articles-container {
    flex-direction: column;
    gap: 15px;
    padding: 15px 10px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .latest-article.trending-c {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .latest-article.trending-c a {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .latest-article.trending-c .latest-article-img {
    height: 182px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    object-fit: cover;
  }
}

/* Dark mode: trending links need light text on dark elevated background for readability */
html.dark-mode .latest-article.trending-c .news-title {
  color: var(--dm-text-secondary) !important;
}
html.dark-mode .latest-article.trending-c:hover .news-title {
  color: var(--dm-accent-text) !important;
}
html.dark-mode .latest-article.trending-c a,
html.dark-mode .latest-article.trending-c a:link,
html.dark-mode .latest-article.trending-c a:visited {
  color: var(--dm-text-secondary) !important;
}
html.dark-mode .latest-article.trending-c a:hover,
html.dark-mode .latest-article.trending-c a:focus {
  color: var(--dm-accent-text) !important;
}
html.dark-mode .related-c .related-inside a,
html.dark-mode .related-c .related-inside a:visited {
  color: var(--dm-text-secondary) !important;
}
html.dark-mode .related-c .related-inside a:hover,
html.dark-mode .related-c .related-inside a:visited:hover {
  color: var(--dm-accent-text) !important;
}


/* ==========================================================================
   5. MESSAGE BOARD THREAD STYLES
   ========================================================================== */

.news-thread-container {
  margin-top: 30px;
  background-color: var(--color-bg-elevated);
  border-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.news-thread-header {
  background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-secondary) 100%);
  padding: 16px 20px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  color: var(--color-text-on-primary) !important;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  cursor: pointer;
}

.news-thread-header:hover {
  opacity: 0.9;
  background: var(--site-gradient);
}

.news-thread-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-elevated);
}

.news-thread-table th {
  background-color: var(--site-primary);
  color: var(--color-text-on-primary);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.news-thread-table th.jive-author {
  text-align: right;
  width: 150px;
}

.news-thread-table tr.post-entry {
  border-bottom: 1px solid var(--color-border-light);
  transition: all 0.2s ease;
  cursor: pointer;
}

.news-thread-table tr.post-entry.o {
  background-color: var(--color-bg-row-odd);
}

.news-thread-table tr.post-entry.e {
  background-color: var(--color-bg-row-even);
}

.news-thread-table tr.post-entry:hover {
  background-color: var(--site-primary) !important;
}

.news-thread-table tr.post-entry:hover td {
  color: var(--color-text-on-primary) !important;
  background-color: transparent !important;
}

.news-thread-table tr.post-entry:hover .jive-subject,
.news-thread-table tr.post-entry:hover .news-thread-post-link,
.news-thread-table tr.post-entry:hover .news-thread-post-link .jive-subject {
  color: var(--color-text-on-primary) !important;
}

.news-thread-table tr.post-entry:hover .news-thread-post-link:hover {
  color: var(--color-text-on-primary) !important;
  text-decoration: none;
}

.news-thread-table tr.post-entry:hover .news-thread-author-link {
  color: var(--color-text-on-primary) !important;
}

.news-thread-table tr.post-entry:hover .news-thread-author-link:hover {
  color: var(--color-text-on-primary) !important;
}

.news-thread-table td {
  padding: 12px 15px;
  vertical-align: middle;
  color: inherit;
}

/* Full-row clickable post link (message board list below article) */
.news-thread-post-row {
  position: relative;
  padding: 0;
}

.news-thread-post-link {
  display: block;
  margin: 0;
  padding-right: 160px;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.news-thread-post-link:hover {
  color: inherit;
  text-decoration: none;
}

.news-thread-author-link {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: color 0.2s ease;
}

.news-thread-author-link:hover {
  text-decoration: underline;
}

.news-thread-table td .jive-subject,
.news-thread-table td .news-thread-post-link .jive-subject {
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
}

.news-thread-table td .news-thread-post-link {
  color: var(--text-muted);
}

.news-thread-table td .news-thread-post-link:hover {
  color: var(--site-primary);
}

.news-thread-table td .news-thread-author-link {
  color: var(--text-muted);
  font-weight: 500;
}

.news-thread-table td .news-thread-author-link:hover {
  color: var(--site-primary);
}

.news-thread-footer {
  background-color: var(--site-primary);
  padding: 14px 20px;
  text-align: center;
  border-radius: 0 0 8px 8px;
  font-size: 14px;
}

.news-thread-footer a {
  color: var(--color-text-on-primary) !important;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
  margin: 0 8px;
}

.news-thread-footer a:hover {
  opacity: 0.85;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .news-thread-table th,
  .news-thread-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .news-thread-post-link {
    padding: 10px 12px;
    padding-right: 120px;
  }

  .news-thread-author-link {
    right: 12px;
  }
  
  .news-thread-header {
    font-size: 16px;
  }

  .news-thread-footer {
    padding: 12px 15px;
    font-size: 13px;
  }
  
  .news-thread-footer a {
    display: block;
    margin: 5px 0;
  }
}

/* Dark mode: replace flat primary orange with the rich dark gradient used for premium members on the message board */
html.dark-mode .news-thread-table th {
  background: var(--dm-premium-bg);
}

html.dark-mode .news-thread-footer {
  background: var(--dm-premium-bg);
}

html.dark-mode .news-thread-table tr.post-entry:hover {
  background: var(--dm-premium-bg) !important;
}

.tbl-next-up { display:none; }
.photo-credit { font-size:.7em; }


/* ==========================================================================
   6. TWITTER WIDGET STYLES
   ========================================================================== */

/* NOTE: Twitter assigns #twitter-widget-* ids to multiple widget types (follow button, embedded tweet, etc).
   Keep embedded tweets readable, but don't force the follow button to 520px wide. */
iframe[id^="twitter-widget-"][src*="follow_button"] { width: auto !important; min-width: 0 !important; max-width: 100% !important; }
iframe[id^="twitter-widget-"][src*="/tweet"] { width: 520px; min-width: 520px; max-width: 100% !important; }
iframe[id^="twitter-widget-"][src*="/timeline"] { max-width: 100% !important; }
twitterwidget::shadow .SummaryCard-content *{white-space:normal !important;}
twitterwidget::shadow .resize-sensor{display:none !important;width:0px !important;overflow:hidden !important;}


/* ==========================================================================
   7. SHARE BUTTON STYLES
   ========================================================================== */

.quick-search-button { width:80px; vertical-align: top; padding:2px; }

/* Story title row */
#top-share {
  width: 100%;
  padding: 12px 0;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  display: block;
}

/* ---- Share label (used in author bar + footer) ---- */
.news-share-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  height: 28px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1;
}

.news-share-label .material-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
  color: var(--text-muted);
}

/* Footer share label + buttons */
#bottom-share {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px;
}

#bottom-share > .news-share-label {
  flex: 0 0 auto !important;
}

#bottom-share > .sharethis-inline-share-buttons,
#bottom-share > [id^="st-"] {
  flex: 0 1 auto !important;
}

h1#story-title {
  margin: 0;
  padding: 0;
  line-height: 1.2 !important;
  font-family: Arial;
  letter-spacing: -2px;
  color: var(--color-text);
  font-size: 35px;
}

/* Center icons inside ShareThis buttons */
.sharethis-inline-share-buttons .st-btn,
.sharethis-inline-follow-buttons .st-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.sharethis-inline-share-buttons .st-btn img,
.sharethis-inline-share-buttons .st-btn svg,
.sharethis-inline-follow-buttons .st-btn img,
.sharethis-inline-follow-buttons .st-btn svg {
  margin: auto !important;
  position: static !important;
  transform: none !important;
}


/* ==========================================================================
   8. MATERIAL ICONS & SITE COLOR OVERRIDES
   ========================================================================== */

/* Material Icons - Site-specific color override (font loaded via modern-base.css) */
.material-icons {
  color: var(--site-icons-color);
}

/* Site color-specific styles */
#recent-stories-block, #recent-stories-block-footer, .colorSections2 { 
  background-color: var(--site-sections-2); 
  background-image: none;
}


/* ==========================================================================
   9. PHOTO STYLES
   ========================================================================== */

.story-photo {
  max-width: 850px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
  overflow: hidden;
}

.story-photo .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.88) 100%);
  color: #fff;
  border-left: none;
  border-radius: 0;
  padding: 72px 14px 12px 14px;
  font-size: 13px;
  font-style: italic;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
}

.story-photo img {
  width: 850px;
  max-width: 100%;
  height: auto;
}

.inside-photo {
  margin-bottom: 8px;
  border: none;
  padding: 0 0 3px 0;
  margin: 0 0 10px 10px;
}

.inside-photo img {
  max-width: 100%;
  height: auto;
}

#news-layout-body {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    padding: 0 20px;
}

/* Responsive layout - smaller desktop */
@media (max-width: 1280px) {
  .story-photo {
    height: auto;
  }
}

/* Responsive layout - tablet */
@media (max-width: 1100px) {
  .story-photo, .inside-photo {
    max-width: 100% !important;
  }
}

/* Make images responsive */
.story-photo img[style], .inside-photo img[style] {
  max-width: 100% !important;
  height: auto !important;
}

/* Allow wrapping within columns */
#news-layout-body, #layout_right {
  white-space: normal;
}


/* ==========================================================================
   10. MOBILE RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 768px) {
  /* Breadcrumbs on mobile - compact strip, no background box */
  nav[aria-label="breadcrumb"] {
    display: block !important;
  }
  .breadcrumbs {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 4px 10px 4px !important;
    margin: 0 0 0 0 !important;
    font-size: 12px !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .breadcrumbs li {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .breadcrumbs li + li:before {
    content: "›" !important;
    padding: 0 5px !important;
    flex-shrink: 0 !important;
  }
  .breadcrumbs li:last-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-weight: 500 !important;
  }

  .story-photo {
    height: auto !important;
    width: calc(100% + 72px);
    max-width: none !important;
    margin-left: -36px;
    margin-right: -36px;
  }

  /* Name + date on one line, no wrapping */
  .author-info {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 6px 8px 6px 0 !important;
  }

  /* Hide all separators by default on mobile */
  .author-sep {
    display: none !important;
  }

  #author-name {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin-bottom: 0 !important;
    font-size: 16px !important;
  }

  #author-name a {
    text-decoration: none !important;
  }

  #author-name a:first-child {
    display: inline-flex !important;
    align-items: center !important;
  }

  #author-name img {
    width: 30px !important;
    height: 30px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
  }

  #author-position {
    display: none !important;
  }

  .story-date {
    display: inline !important;
    width: auto !important;
    color: var(--color-text-placeholder) !important;
    margin-top: 0 !important;
    margin-left: 5px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }

  /* Keep title full-width on mobile */
  #top-share {
    display: block !important;
    width: 100% !important;
    position: relative;
    z-index: 1;
  }

  #top-share h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
  }

  .author-share {
    width: 100%;
    justify-content: flex-start;
    padding: 0 10px 8px 10px;
  }
}


/* ==========================================================================
   11. SEARCH BOX STYLES
   ========================================================================== */

#search-c {
    border-radius: 5px !important;
}

#search-c input {
    width:82% !important;
    margin: 10px !important;
    margin-left: 5px !important;
    padding: 5px !important;
    vertical-align: middle !important;
}

#search-c .material-icons {
    vertical-align: middle !important;
    font-size: 20px !important;
}


/* ==========================================================================
   12. NEWS BODY & SIDEBAR STYLES
   ========================================================================== */

#news-layout-body p {
    font-size:16px;
    line-height: 1.6;
}

.section_body li { font-size:14px; }
.event-time { font-family: Verdana; }
.st-left { font-size:14px; }
.st-btn { display: inline-block; }

#grow-me-in-content-recs-root {
    margin:0 !important;
    min-height:372px !important;
}

#st-1 .st-left, #st-2 .st-left { padding-top:0 !important; }


/* ==========================================================================
   13. BREADCRUMB STYLES
   ========================================================================== */

.breadcrumbs {
  background-color: var(--color-bg-surface);
  list-style: none;
  padding: 12px 16px;
  margin: 0 0 10px 0;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  flex-shrink: 0;
}

.breadcrumbs li + li:before {
  content: "/";
  padding: 0 10px;
  color: var(--color-text-placeholder);
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--site-primary);
  font-weight: 500;
  transition: color 0.2s ease;
  padding: 2px 0;
}

.breadcrumbs a:hover {
  color: var(--site-secondary);
  text-decoration: none;
}

.breadcrumbs li:last-child {
  color: var(--text-muted);
  font-weight: 600;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   14. SECTION STYLES
   ========================================================================== */

.front_section, .section-header-footer .header, .header, #search-c {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

.section-header-footer .footer, .footer, #calendar-footer, .front_section {
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.recruit-quick-search-container {
  padding:0 0 10px 0 !important;
}

.section_header {
  font-size:15px;
  padding:3px 0;
}


/* ==========================================================================
   RECRUITING EMBED (story recruit card): desktop horizontal + mobile bio-style
   ========================================================================== */

.recruit-embed-wrap {
  text-align: left;
  margin: 0 auto;
  max-width: 100%;
}

/* Desktop: show horizontal card only; hide mobile card */
.recruit-embed-desktop-wrap {
  display: none;
}

.recruit-embed-mobile-wrap {
  display: block;
}

@media (min-width: 641px) {
  .recruit-embed-desktop-wrap {
    display: block;
  }

  .recruit-embed-mobile-wrap {
    display: none;
  }
}

/* Desktop: horizontal compact card (like old embed) */
.recruit-embed-desktop {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #000;
  padding: 8px 12px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.35;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.recruit-embed-desktop__photo {
  flex-shrink: 0;
}

.recruit-embed-desktop__photo img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 0;
  vertical-align: middle;
}

.recruit-embed-desktop__content {
  flex: 1;
  min-width: 0;
}

.recruit-embed-desktop__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 4px;
}

.recruit-embed-desktop__name {
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #522d80;
}

.recruit-embed-desktop__name:hover {
  text-decoration: underline;
}

.recruit-embed-desktop__position {
  font-size: 13px;
  color: #333;
}

.recruit-embed-desktop__position::before {
  content: "\2013 ";
}

.recruit-embed-desktop__tnet {
  font-size: 11px;
  background-color: #522d80;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

.recruit-embed-desktop__tnet img {
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.recruit-embed-desktop__attrs {
  margin-bottom: 4px;
}

.recruit-embed-desktop__attrs span {
  margin-right: 10px;
}

.recruit-embed-desktop__attrs span::after {
  content: none;
}

.recruit-embed-desktop__services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.recruit-embed-desktop__svc img {
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Mobile: recruit card - widget-style header, photo ~half width + 4 quick stats beside it, rest below */
.recruit-embed-mobile-wrap {
  width: 100%;
  box-sizing: border-box;
}

.recruit-embed-mobile-wrap .profileHeaderWrap {
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: var(--color-bg-surface, #fafafa);
  box-sizing: border-box;
  overflow: hidden;
}

.recruit-embed-mobile-wrap .profile-header__content {
  display: block;
}

/* Name/position header: widget-style bar - primary bg, white text, name+position on one row */
.recruit-embed-mobile-wrap .profile-header__name-section {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 0;
}

.recruit-embed-mobile-wrap .playerHeaderName {
  flex: 1;
  min-width: 0;
  font-size: 18px !important;
  padding: 8px 10px !important;
  line-height: 1.2;
  border-radius: 0 !important;
  background-color: var(--site-primary, #e96f26) !important;
  color: #fff !important;
  box-sizing: border-box;
  width: auto !important;
}

.recruit-embed-mobile-wrap .playerHeaderName .player-name,
.recruit-embed-mobile-wrap .playerHeaderName .player-name a,
.recruit-embed-mobile-wrap .playerHeaderName a {
  font-size: 18px !important;
  color: #fff !important;
  display: inline;
  margin: 0;
}

.recruit-embed-mobile-wrap .playerHeaderNumber {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex !important;
  align-items: center;
  font-size: 11px !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* Hide quick-stat labels on mobile; show inline HS */
.quick-stats-hs-inline { display: none; }
.recruit-embed-mobile-wrap .quick-stats-hs-inline { display: inline; }
.recruit-embed-mobile-wrap .bio-fields-quick tr.quick-stats-hs-row { display: none; }
.recruit-embed-mobile-wrap .bio-fields-quick .bio-label { display: none; }
.recruit-embed-mobile-wrap .bio-fields-quick .bio-label--keep { display: table-cell; }
.recruit-embed-mobile-wrap .bio-fields-quick td:not(.bio-label) { width: 100%; padding-left: 0; }

/* Photo + quick stats: side by side */
.recruit-embed-mobile-wrap .recruit-card__photo-stats {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
}

/* Mobile story embed: hide large commitment stamp to avoid overlap/crowding */
.recruit-embed-mobile-wrap .recruit-commit-logo {
  display: none !important;
}

.recruit-embed-mobile-wrap .profile-header__image {
  flex: 0 0 auto;
  width: 45%;
  max-width: 160px;
}

.recruit-embed-mobile-wrap .profile-header__image .playerHeadshot,
.recruit-embed-mobile-wrap .profile-header__image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.recruit-embed-mobile-wrap .recruit-card__quick-stats {
  flex: 1;
  min-width: 0;
}

.recruit-embed-mobile-wrap .bio-fields-quick {
  font-size: 12px;
  width: 100%;
  border-collapse: collapse;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.recruit-embed-mobile-wrap .bio-fields-quick td {
  padding: 4px 4px 4px 0;
  vertical-align: top;
  border-bottom: 1px solid #eee;
}

.recruit-embed-mobile-wrap .bio-fields-quick tr:nth-child(even) td {
  background: #f8f8f8;
}

.recruit-embed-mobile-wrap .bio-fields-quick .bio-label {
  font-size: 10px !important;
  font-weight: bold;
  text-transform: uppercase;
  color: #555;
  width: 1%;
  white-space: nowrap;
  padding-right: 8px;
}

.recruit-embed-mobile-wrap .bio-fields-quick td:not(.bio-label) a {
  color: #522d80;
}

/* Remaining stats below photo row */
.recruit-embed-mobile-wrap .bio-fields-wrapper {
  margin: 0;
  min-width: 0;
  padding: 0 10px 8px;
}

.recruit-embed-mobile-wrap #bio-fields {
  font-size: 11px;
  width: 100%;
  border-collapse: collapse;
}

.recruit-embed-mobile-wrap #bio-fields tr {
  border-bottom: 1px solid #eee;
}

.recruit-embed-mobile-wrap #bio-fields tr:nth-child(even) {
  background: #f8f8f8;
}

.recruit-embed-mobile-wrap .bio-label {
  font-size: 10px !important;
  font-weight: bold;
  text-transform: uppercase;
  color: #555;
  padding: 3px 6px 3px 0;
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
}

.recruit-embed-mobile-wrap #bio-fields td:not(.bio-label) {
  padding: 3px 6px 3px 0;
  font-size: 11px;
}

.recruit-embed-mobile-wrap #bio-fields td:not(.bio-label) a {
  color: #522d80;
}

.recruit-embed-mobile-wrap #bio-fields img {
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.recruit-embed-mobile-wrap .bio-status-value {
  font-size: 11px;
}

/* Hide position row on mobile embed (position already in header pill) */
.recruit-embed-mobile-wrap #bio-fields tr.bio-row--position {
  display: none;
}

/* Dark mode: recruit mobile embed card */
html.dark-mode .recruit-embed-mobile-wrap .profileHeaderWrap {
  border-color: var(--dm-border);
  background: var(--dm-bg-card);
}

html.dark-mode .recruit-embed-mobile-wrap .playerHeaderName {
  background: var(--dm-premium-bg) !important;
}

html.dark-mode .recruit-embed-mobile-wrap .playerHeaderNumber {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--dm-text-primary, #f3f4f6) !important;
}

html.dark-mode .recruit-embed-mobile-wrap .recruit-card__quick-stats {
  background: var(--dm-bg-card);
  border: 1px solid var(--dm-border);
  border-radius: 2px;
}

html.dark-mode .recruit-embed-mobile-wrap .bio-fields-quick td {
  border-bottom-color: var(--dm-border);
  color: var(--dm-text-primary, #f3f4f6);
}

html.dark-mode .recruit-embed-mobile-wrap .bio-fields-quick tr td {
  background: var(--dm-bg-card) !important;
}

html.dark-mode .recruit-embed-mobile-wrap .bio-fields-quick .bio-label {
  color: var(--dm-text-muted, rgba(255, 255, 255, 0.72));
}

html.dark-mode .recruit-embed-mobile-wrap .bio-fields-quick td:not(.bio-label) a {
  color: var(--dm-text-link, #ffb76c);
}

html.dark-mode .recruit-embed-mobile-wrap .quick-stats-hs-inline {
  color: var(--dm-text-muted, rgba(255, 255, 255, 0.72));
}

html.dark-mode .recruit-embed-mobile-wrap #bio-fields tr {
  border-bottom-color: var(--dm-border);
}

html.dark-mode .recruit-embed-mobile-wrap #bio-fields tr {
  background: var(--dm-bg-card) !important;
}

html.dark-mode .recruit-embed-mobile-wrap #bio-fields td {
  background: var(--dm-bg-card) !important;
}

html.dark-mode .recruit-embed-mobile-wrap #bio-fields tr:nth-child(even) td,
html.dark-mode .recruit-embed-mobile-wrap #bio-fields tr:nth-child(odd) td {
  background: var(--dm-bg-card) !important;
}

html.dark-mode .recruit-embed-mobile-wrap #bio-fields td:not(.bio-label) {
  color: var(--dm-text-primary, #f3f4f6);
}

html.dark-mode .recruit-embed-mobile-wrap #bio-fields .bio-label,
html.dark-mode .recruit-embed-mobile-wrap .bio-label {
  color: var(--dm-text-secondary, #d8deea) !important;
}

html.dark-mode .recruit-embed-mobile-wrap #bio-fields td:not(.bio-label) a {
  color: var(--dm-text-link, #ffb76c);
}

html.dark-mode .recruit-embed-mobile-wrap .bio-status-value {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--dm-border);
  color: var(--dm-text-primary, #f3f4f6);
}

html.dark-mode .recruit-embed-mobile-wrap .rankings-updated-status {
  color: var(--dm-text-muted, rgba(255, 255, 255, 0.72));
}

html.dark-mode .recruit-embed-mobile-wrap .playerHeadshot--no-image {
  background: var(--dm-bg-elevated);
  border-color: var(--dm-border);
}

html.dark-mode .recruit-embed-mobile-wrap .playerHeadshot__message {
  color: var(--dm-text-secondary, rgba(255, 255, 255, 0.88));
}

html.dark-mode .recruit-embed-mobile-wrap .playerHeadshot__message a {
  color: var(--dm-text-link, #ffb76c) !important;
}


/* ==========================================================================
   15. PHONE-SPECIFIC STYLES
   ========================================================================== */

@media (max-width: 600px) {
  #news-layout-body {
    padding: 5px 10px 10px 10px;
  }

  .story-photo {
    width: calc(100% + 28px);
    max-width: none !important;
    margin-left: -14px;
    margin-right: -14px;
  }

  #layout_right {
    padding: 10px;
  }
  
  .trending-section-wrapper {
    margin: 0 0 20px 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .trending-articles-container {
    padding: 15px 8px;
  }
  
  .news-footer-container, .news-footer-bottom {
    padding: 10px 0 !important;
  }
}


/* ==========================================================================
   16. AUTHOR BAR STYLES
   ========================================================================== */

.author-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-bg-author-bar);
  border-color: transparent;
  min-height: 38px;
  width: 100%;
  box-sizing: border-box;
}

/* Add breathing room before the story body starts under the byline. */
.author-bar + [itemprop="articleBody"],
.author-bar + .recruit-embed-wrap + [itemprop="articleBody"] {
  margin-top: 14px;
}

.author-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 10px;
  padding-left: 0;
  flex: 1;
  min-width: 0; /* Allow flex item to shrink below content size */
  color: inherit;
}

.author-info > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5px;
  margin-left: 10px;
}

/* Vertically center author avatar with name text */
#author-name {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  overflow: visible; /* Don't clip — .author-info > span sets overflow:hidden which hard-clips inline-flex children on narrow tablet columns */
  flex-shrink: 0;
}
#author-name a:first-child {
  display: inline-flex;
  align-items: center;
}
#author-name img {
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

#author-position {
  color: inherit;
  font-size: 14px;
}

.author-bar .author-share {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px;
  padding-right: 10px;
  white-space: nowrap;
}

.author-bar .author-share > .news-share-label {
  flex: 0 0 auto !important;
}

.author-bar .author-share > .sharethis-inline-share-buttons,
.author-bar .author-share > [id^="st-"] {
  flex: 0 1 auto !important;
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.story-date {
  color: inherit;
  font-size: 14px;
}

/* Hide ShareThis Google News follow chip; use plain .google-news-publisher-link in metadata card instead */
.sharethis-inline-follow-buttons .st-btn[data-network="googlenews"],
.sharethis-inline-follow-buttons a[data-network="googlenews"],
.sharethis-inline-follow-buttons .st-googlenews,
.sharethis-inline-follow-buttons a[href*="news.google.com/publications"] {
  display: none !important;
}

/* Single on-page link to Google News publisher profile (config: google_news_publisher_url) */
.news-footer-publisher-link-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #d7d7d7);
}

.google-news-publisher-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--site-primary) !important;
  text-decoration: none !important;
  border-radius: 999px;
  border: 1px solid var(--color-border, #d7d7d7);
  background: var(--color-bg-light, #f7f7f7);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.google-news-publisher-link .material-icons {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.google-news-publisher-link:hover,
.google-news-publisher-link:focus {
  color: var(--site-secondary) !important;
  border-color: var(--site-secondary);
  text-decoration: none !important;
}

.google-news-publisher-link:focus {
  outline: 2px solid var(--site-secondary);
  outline-offset: 2px;
}

html.dark-mode #news-layout-body .google-news-publisher-link {
  background: var(--dm-bg-elevated, #2a2a2a);
  border-color: var(--dm-border, rgba(255, 255, 255, 0.12));
  color: var(--dm-accent-text, #fff) !important;
}

html.dark-mode #news-layout-body .google-news-publisher-link:hover,
html.dark-mode #news-layout-body .google-news-publisher-link:focus {
  border-color: var(--dm-hover-accent-border, rgba(255, 255, 255, 0.24));
  color: #fff !important;
}

html.dark-mode #news-layout-body .news-footer-publisher-link-wrap {
  border-top-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}

/* Author name link styles */
#author-name a,
#author-name a:link,
#author-name a:visited,
#author-name a:active {
  color: var(--site-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

#author-name a:hover {
  color: var(--site-secondary) !important;
  text-decoration: underline !important;
}

/* Dark mode: author bar has primary-tinted dark bg (TigerNet, Cubs HQ, etc.) — keep text readable */
html.dark-mode .author-bar #author-name a,
html.dark-mode .author-bar #author-name a:link,
html.dark-mode .author-bar #author-name a:visited,
html.dark-mode .author-bar #author-name a:active {
  color: #fff !important;
}
html.dark-mode .author-bar #author-name a:hover,
html.dark-mode .author-bar #author-name a:focus {
  color: rgba(255, 255, 255, 0.9) !important;
}
html.dark-mode .author-bar .story-date,
html.dark-mode .author-bar #author-position {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Dark mode (incl. mobile): no brown/orange tint on news title row or follow buttons */
html.dark-mode #news-layout-body #top-share,
html.dark-mode #news-layout-body h1#story-title {
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent;
}
html.dark-mode #news-layout-body .author-bar {
  background-color: var(--dm-bg-elevated) !important;
}
html.dark-mode #news-layout-body .author-share .sharethis-inline-share-buttons .st-btn,
html.dark-mode #news-layout-body .author-share .sharethis-inline-share-buttons a,
html.dark-mode #st-3 .st-btn,
html.dark-mode #st-4 .st-btn {
  background: var(--dm-premium-bg) !important;
  -webkit-tap-highlight-color: transparent;
}
html.dark-mode #news-layout-body .author-share .sharethis-inline-share-buttons a:hover,
html.dark-mode #news-layout-body .author-share .sharethis-inline-share-buttons a:active,
html.dark-mode #news-layout-body .author-share .sharethis-inline-share-buttons a:focus {
  background: var(--dm-premium-bg-end) !important;
}

/* Dark mode: recruit embed widget position text (e.g. "Linebacker") — #333 invisible on dark bg */
html.dark-mode .recruit-embed-desktop__position {
  color: var(--color-text);
}

/* Recruit embed: separation from author bar */
#news-layout-body .author-bar + .recruit-embed-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border, #d7d7d7);
}

/* Dark mode: keep separator visible on dark surfaces */
html.dark-mode #news-layout-body .author-bar + .recruit-embed-wrap {
  border-top-color: var(--dm-border, rgba(255, 255, 255, 0.12));
}
html.dark-mode #news-layout-body .recruit-embed-desktop {
  border: 1px solid var(--dm-overlay-20, rgba(255, 255, 255, 0.2));
  background: var(--dm-bg-elevated, #2a2a2a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
html.dark-mode #news-layout-body .recruit-embed-mobile-wrap .profileHeaderWrap {
  border-color: var(--dm-overlay-20, rgba(255, 255, 255, 0.2));
  background: var(--dm-bg-elevated, #2a2a2a);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.article-author-bio {
  margin: 28px 0 24px;
}

.article-author-bio__inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg-surface) 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.article-author-bio__avatar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.article-author-bio__avatar {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.article-author-bio__content {
  flex: 1;
  min-width: 0;
}

.article-author-bio__eyebrow {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-muted);
}

.article-author-bio__name {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  color: var(--site-primary) !important;
}

.article-author-bio__name .article-author-bio__name-link,
.article-author-bio__name .article-author-bio__name-link:link,
.article-author-bio__name .article-author-bio__name-link:visited,
.article-author-bio__name .article-author-bio__name-link:active {
  color: inherit !important;
  text-decoration: none !important;
}

.article-author-bio__name .article-author-bio__name-link:hover,
.article-author-bio__name .article-author-bio__name-link:focus {
  color: var(--site-secondary) !important;
  text-decoration: underline !important;
}

.article-author-bio__position {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.article-author-bio__body {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-text);
}

.article-author-bio__body > :first-child {
  margin-top: 0;
}

.article-author-bio__body > :last-child {
  margin-bottom: 0;
}

.article-author-bio__body a,
.article-author-bio__body a:link,
.article-author-bio__body a:visited,
.article-author-bio__body a:active {
  color: var(--site-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-author-bio__body a:hover,
.article-author-bio__body a:focus {
  color: var(--site-secondary);
}

.article-author-bio__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.article-author-bio__action-link,
.article-author-bio__action-link:link,
.article-author-bio__action-link:visited,
.article-author-bio__action-link:active {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  color: var(--site-primary) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
}

.article-author-bio__action-link:hover,
.article-author-bio__action-link:focus {
  background-color: var(--site-primary);
  border-color: var(--site-primary);
  color: var(--color-text-on-primary) !important;
}

html.dark-mode .article-author-bio__inner {
  border-color: var(--dm-overlay-20, rgba(255, 255, 255, 0.16));
  background: linear-gradient(180deg, var(--dm-bg-elevated, #2a2a2a) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
}

html.dark-mode .article-author-bio__eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

html.dark-mode .article-author-bio__name {
  color: #fff !important;
}

html.dark-mode .article-author-bio__position {
  color: rgba(255, 255, 255, 0.74);
}

html.dark-mode .article-author-bio__body {
  color: rgba(255, 255, 255, 0.9);
}

html.dark-mode .article-author-bio__body a,
html.dark-mode .article-author-bio__body a:link,
html.dark-mode .article-author-bio__body a:visited,
html.dark-mode .article-author-bio__body a:active {
  color: var(--dm-accent-text, #fff);
}

html.dark-mode .article-author-bio__body a:hover,
html.dark-mode .article-author-bio__body a:focus {
  color: #fff;
}

html.dark-mode .article-author-bio__action-link,
html.dark-mode .article-author-bio__action-link:link,
html.dark-mode .article-author-bio__action-link:visited,
html.dark-mode .article-author-bio__action-link:active {
  background-color: var(--dm-bg-elevated, #2a2a2a);
  border-color: var(--dm-overlay-20, rgba(255, 255, 255, 0.16));
  color: var(--dm-accent-text, #fff) !important;
}

html.dark-mode .article-author-bio__action-link:hover,
html.dark-mode .article-author-bio__action-link:focus {
  background: var(--dm-hover-accent-bg, rgba(255, 255, 255, 0.08));
  border-color: var(--dm-hover-accent-border, rgba(255, 255, 255, 0.24));
  color: #fff !important;
}

/* Keep inline follow bars (footer-only) consistent */
.news-footer-follow-social .sharethis-inline-follow-buttons,
.news-footer-follow-inline .sharethis-inline-follow-buttons {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  z-index: 1 !important; /* Keep follow buttons below sticky header (z-index: 1000) */
  position: relative;
}

/* Capitalize follow labels in footer widgets */
.sharethis-inline-follow-buttons .st-label {
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  color: var(--color-text-placeholder) !important;
  font-weight: 400 !important;
}

/* iPad portrait: tighten byline share reservation so author text isn't squeezed */
@media (max-width: 900px) and (min-width: 768px) {
  .author-share {
    min-width: 170px;
  }
}

@media (max-width: 767px) {
  .author-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .author-info {
    width: 100%;
  }

  .author-share {
    width: 100%;
    justify-content: flex-start;
    padding: 10px;
  }

}

#recent-updates-list {
  text-align: left;
}


/* ==========================================================================
   17. NEWS FOOTER STYLES
   ========================================================================== */

.news-footer-container {
  margin-top: 15px;
  padding: 0 0 0 0;
  /*border-top: 1px solid var(--color-border-light);*/
  clear: both;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-footer-promo-wrap {
  text-align: center;
}

.news-footer-social-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.news-footer-social-left {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

.news-footer-social-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.news-footer-email-alerts {
  margin-bottom: 0;
}

/* Card wrapping author byline + tags — article metadata grouping */
.news-footer-meta-card {
  background-color: var(--color-bg-surface);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.news-footer-meta-card .news-footer-feedback {
  justify-content: center;
}

.news-footer-meta-card .news-footer-actions {
  padding-top: 0;
}

.news-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 0 0 0;
}

.news-footer-tags {
  flex: 1;
  min-width: 200px;
  font-size: 14px;
  line-height: 1.8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.news-footer-tags b {
  color: var(--text-muted);
  margin-right: 4px;
  font-weight: 600;
}

.news-footer-tags a,
.news-footer-tags a:link,
.news-footer-tags a:visited,
.news-footer-tags a:active,
.news-footer-tags a:focus {
  display: inline-block;
  padding: 4px 10px;
  background-color: var(--color-bg-light);
  color: var(--site-primary) !important;
  text-decoration: none !important;
  font-weight: 500;
  border-radius: 12px;
  transition: all 0.2s ease;
  font-size: 13px;
  white-space: nowrap;
}

.news-footer-tags a:hover {
  background-color: var(--site-primary);
  color: var(--color-text-on-primary) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.news-footer-share-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 1; /* Keep share buttons below sticky header (z-index: 1000) */
  position: relative;
  margin-bottom: 16px;
}

#bottom-share {
  z-index: 1 !important; /* Keep share buttons below sticky header (z-index: 1000) */
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
}

#bottom-share .sharethis-inline-share-buttons .st-btn {
  z-index: 1 !important;
}

.news-footer-share-actions .news-footer-comment-btn {
  flex-shrink: 0;
}

.news-footer-comment-btn {
  padding: 8px 16px;
  background-color: var(--site-primary);
  color: var(--color-text-on-primary) !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  line-height: 1.4;
  border: none;
  cursor: pointer;
}

.news-footer-comment-btn:hover {
  background-color: var(--site-secondary);
  color: var(--color-text-on-secondary) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.news-footer-comment-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.news-footer-comment-btn:focus {
  outline: 2px solid var(--site-secondary);
  outline-offset: 2px;
}

.news-footer-print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--site-primary);
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.news-footer-print-btn:hover {
  background-color: var(--site-secondary);
}

.news-footer-print-btn .material-icons {
  font-size: 20px;
  color: var(--color-text-on-primary) !important;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
  padding-right:0;
}

.news-footer-bottom {
  padding: 12px 0 0 0;
  /*border-top: 1px solid var(--color-border-light);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.news-footer-feedback {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 4px;
}

.nff-avatar-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nff-avatar {
  vertical-align: middle;
  margin-right: 2px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

.news-footer-feedback-separator {
  color: var(--color-border);
  margin: 0 4px;
  user-select: none;
}

/* Author name — prominent, full color */
.news-footer-feedback .nff-author {
  color: var(--site-primary);
  text-decoration: none;
  font-weight: 600;
  margin-right: 1px;
  transition: color 0.2s ease;
}

.news-footer-feedback .nff-author:hover {
  color: var(--site-secondary);
  text-decoration: underline;
}

/* [ and ] bracket punctuation */
.news-footer-feedback .nff-actions {
  color: var(--text-muted);
  font-weight: 400;
  user-select: none;
}

/* | pipe between Email and Comment */
.news-footer-feedback .nff-pipe {
  color: var(--color-border);
  user-select: none;
}

/* Email / Comment action links — smaller, muted */
.news-footer-feedback .nff-action-link {
  color: var(--site-primary);
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.news-footer-feedback .nff-action-link:hover {
  color: var(--site-secondary);
  opacity: 1;
  text-decoration: underline;
}

.news-footer-feedback a:focus {
  outline: 2px solid var(--site-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.news-footer-follow-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1; /* Keep follow buttons below sticky header (z-index: 1000) */
  position: relative;
}

/* Follow icons inlined into the share-actions row on desktop/tablet */
.news-footer-follow-inline {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  justify-content: center;
  z-index: 1;
  position: relative;
  min-width: 0;
}

/* Responsive footer styles */
@media (max-width: 768px) {
  .article-author-bio {
    margin: 24px 0 20px;
  }

  .article-author-bio__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 14px;
  }

  .article-author-bio__avatar {
    width: 64px;
    height: 64px;
  }

  .article-author-bio__name {
    font-size: 24px;
  }

  .news-footer-social-section {
    display: none;
  }

  .news-footer-container {
    gap: 0;
  }

  .cta-btn {
    padding: 8px 12px !important;
  }

  .news-footer-social-section {
    flex-direction: column;
  }
  
  .news-footer-social-left,
  .news-footer-social-right {
    width: 100%;
    max-width: 100%;
    flex: 1 1 0;
  }
  
  .news-footer-social-left {
    flex-direction: column;
  }
  
  .news-footer-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .news-footer-share-actions {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    margin-bottom: 10px;
  }
  
  .news-footer-meta-card {
    margin-bottom: 16px;
  }

  .news-footer-bottom {
    padding-top: 8px;
    margin: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  
  .news-footer-follow-social {
    width: 100%;
    justify-content: center;
  }

  .news-footer-follow-inline {
    display: none;
  }

  .news-footer-comment-btn,
  #upgrade-widget,
  .news-footer-promo-wrap,
  .news-footer-feedback {
    margin: 0;
  }

  .news-footer-promo-wrap {
    margin-top: -4px;
    margin-bottom: -4px;
  }
  
  .news-footer-comment-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  
  .news-footer-feedback {
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
  }
}

/* Improve spacing for social widgets */
.news-footer-social-section .fb-page,
.news-footer-social-section .twitter-follow-button {
  margin-bottom: 0;
}


/* ==========================================================================
   18. FOOTER SOCIAL WIDGETS
   ========================================================================== */

.news-footer-social-widget {
  border-radius: 10px;
  overflow: hidden;
  background-color: transparent;
  padding: 0;
  box-sizing: border-box;
}

.news-footer-social-widget--facebook {
  width: 300px;
  max-width: 100%;
  background-color: var(--color-bg-surface);
  margin-left: auto;
  margin-right: auto;
}

.news-footer-social-widget--twitter {
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: transparent;
}

.news-footer-social-widget--twitter iframe[id^="twitter-widget-"] {
  max-width: 100% !important;
}

/* Dark mode: comment button, print button — rich dark gradient instead of flat orange */
html.dark-mode .news-footer-comment-btn {
  background: var(--dm-premium-bg) !important;
}
html.dark-mode .news-footer-comment-btn:hover {
  background: var(--dm-premium-bg-end) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html.dark-mode .news-footer-print-btn {
  background: var(--dm-premium-bg) !important;
}
html.dark-mode .news-footer-print-btn:hover {
  background: var(--dm-premium-bg-end) !important;
}
/* Dark mode: footer metadata links/tags must stay readable on dark cards */
html.dark-mode .news-footer-tags a,
html.dark-mode .news-footer-tags a:link,
html.dark-mode .news-footer-tags a:visited,
html.dark-mode .news-footer-tags a:active,
html.dark-mode .news-footer-tags a:focus {
  background-color: var(--dm-bg-elevated) !important;
  border: 1px solid var(--dm-overlay-20);
  color: var(--dm-accent-text) !important;
}
html.dark-mode .news-footer-tags a:hover {
  background: var(--dm-hover-accent-bg) !important;
  border-color: var(--dm-hover-accent-border);
  color: var(--dm-accent-text) !important;
}
html.dark-mode .news-footer-feedback .nff-author,
html.dark-mode .news-footer-feedback .nff-author:link,
html.dark-mode .news-footer-feedback .nff-author:visited,
html.dark-mode .news-footer-feedback .nff-action-link,
html.dark-mode .news-footer-feedback .nff-action-link:link,
html.dark-mode .news-footer-feedback .nff-action-link:visited {
  color: var(--dm-accent-text) !important;
}
html.dark-mode .news-footer-feedback .nff-author:hover,
html.dark-mode .news-footer-feedback .nff-author:focus,
html.dark-mode .news-footer-feedback .nff-action-link:hover,
html.dark-mode .news-footer-feedback .nff-action-link:focus {
  color: var(--dm-text-secondary) !important;
}

/* ============================================
   Recruit Update Footer (view-news.jspf)
   ============================================ */
#view-more-info-on-recruit {
  width: inherit;
  padding: 10px;
}
#view-more-info-on-recruit h2 {
  padding: 5px;
  display: inline;
}
#view-more-info-on-recruit a {
  color: #fff;
  font-size: 16px;
}

/* ==========================================================================
   TOASTR CSS - merged into view-story.css for article pages
   ========================================================================== */

/*
 * Note that this is toastr v2.1.3, the "latest" version in url has no more maintenance,
 * please go to https://cdnjs.com/libraries/toastr.js and pick a certain version you want to use,
 * make sure you copy the url from the website since the url may change between versions.
 * */
.toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#FFF}.toast-message a:hover{color:#CCC;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#FFF;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);line-height:1}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}.rtl .toast-close-button{left:-.3em;float:left;right:.3em}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999;pointer-events:none}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#FFF;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80)}#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}#toast-container>div:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}#toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}#toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}#toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}#toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51A351}.toast-error{background-color:#BD362F}.toast-info{background-color:#2F96B4}.toast-warning{background-color:#F89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}#toast-container>div.rtl{padding:15px 50px 15px 15px}}

/* toastr.css — Custom toastr notification styles.
   Brand colors reference CSS vars from site-vars.css.jspf.
   Material Icons @font-face and .material-icons base are in common.css. */

#toast-container > div {
    padding: 10px;
    width: 225px;
    box-shadow: 0 0 6px #000;
}

#toast-container > div.marked-read {
    width: 200px;
    box-shadow: 0 0 6px #000;
}

.toast.toast-info {
    background-color: #1A1A1B !important;
    color: #D7DADC !important;
    border: none !important;
    border-radius: 50px !important;
}
.toast.toast-info .toast-title {
    display: none;
}
.toast.toast-info .toast-message {
    padding: 0 !important;
    margin: 0 !important;
}

.toast-custom {
  background-color: var(--site-secondary) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.toast-custom:before,
.toast-custom::before,
.toast-custom .toast-icon {
    content: none !important;
    display: none !important;
    background: none !important;
}

.toastr-container {
    display: flex;
    align-items: center;
}

.toastr-container.sign-up {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
}

.toastr-container.sign-up .signup-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.toastr-container.sign-up .signup-toast-title {
    grid-column: 2;
    grid-row: 1;
}

.toastr-container.sign-up #sign-in-button {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
}

.signup-toast-dismiss-wrap {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
}

.signup-toast-dismiss-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* Base circle style */
.toastr-icon {
    width: 30px;
    height: 30px;
    background-color: var(--site-primary) !important;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.marked-read-icon, .signup-icon, .streak-icon {
    background-color: var(--site-primary) !important;
}

.signup-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0;
}

.toastr-icon.marked-read-icon {
    width: 30px;
    height: 30px;
    margin-right: 15px !important;
}

/* Make the streak achievement toast wider */
#toast-container > div:has(.streak-achievement) {
    width: 360px !important;
    font-weight: 700;
}

/* Static milestone badge keeps the toast celebratory without loading Lordicon on article pages. */
.streak-achievement-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 245, 205, 0.92) 45%, rgba(255, 213, 79, 0.90) 100%);
    border-radius: 50%;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.18),
        inset 0 2px 5px rgba(255, 255, 255, 0.65);
    margin-left: 5px;
    margin-right: 10px;
    flex-shrink: 0;
    overflow: hidden;
    width: 64px;
    height: 64px;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.streak-achievement-badge .material-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    line-height: 1;
    color: #a85b00 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    animation: pulse-trophy 2s infinite;
}

@keyframes pulse-trophy {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.toastr-icon > .material-icons {
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.signup-icon > .material-icons.check {
    font-size: 30px !important;
    padding-right: 0;
    margin-right: 1px;
}

.streak-icon > .material-icons, .marked-read-icon > .material-icons.check {
    font-size: 28px;
    margin-top: 1px;
    margin-right: 1px;
}

.marked-read-icon > .material-icons {
    margin-left: 0;
}

/* Text & progress bar container */
.toastr-info {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: bold;
    color: #D7DADC !important;
}

.signup-toast-title {
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Keep signup toast text compact even when mobile media queries don't trigger
   (some pages/devices report a wider viewport due to missing/late viewport behavior). */
#toast-container .toastr-container.sign-up .signup-toast-title {
    font-size: 14px !important;
}

.days {
  display: inline-flex;
  align-items: baseline;
  vertical-align: bottom;
}

.number-wrapper {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  min-width: 1ch;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}

.number,
.article-count,
.streak-number {
  display: block;
  line-height: 1;
}

/* Progress bar under the text */
.progress-bar, .streak-progress-bar {
    margin-top: 5px;
    width: 80px;
    height: 6px;
    background-color: #3A3A3B;
    border-radius: 2px;
    overflow: hidden;
}
.progress, .streak-progress {
    height: 100%;
    background-color: var(--site-primary);
}

.toast-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.tnet-coin-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 8px;
}

/* Star icon styling for streak achievement toast */
.star-icon-container {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--site-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
}

.star-icon {
    color: white !important;
    font-size: 16px !important;
    font-weight: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
}
#sign-in-button {
    border: 1px solid #cccccc;
    background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    margin-top: 4px;
    font-weight: bold;
    color: var(--site-primary);
    width: auto;
    position: relative;
    margin-right: .1em;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    zoom: 1;
    overflow: visible;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    width: auto !important;
    max-width: none !important;
}

#sign-in-button .sign-in-button-label {
    display: inline-block;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

/* Defeat jQuery UI .ui-widget font-size inflation for this toast button. */
#toast-container #sign-in-button.ui-button.ui-widget,
#toast-container #sign-in-button.ui-widget {
    font-size: 12px !important;
    line-height: 1;
}

#sign-in-button .material-icons {
    font-size: 18px !important;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

/* Mobile adjustments for signup toast */
@media (max-width: 768px) {
    #toast-container {
        top: 40px;
        right: 0;
        left: 0;
    }

    #toast-container > div {
        margin: 0 !important;
        padding: 8px 10px !important;
    }

    #toast-container > div:has(.toastr-container.sign-up) {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        border-radius: 0 0 8px 8px !important;
    }

    #toast-container > div:has(.toastr-container.sign-up) .toast-message {
        justify-content: flex-start !important;
    }

    #toast-container .toastr-container.sign-up {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        min-height: 0;
    }

    #toast-container .toastr-container.sign-up .signup-toast-title {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px !important;
        font-weight: 700;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #toast-container .toastr-container.sign-up .signup-icon {
        display: inline-flex !important;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        margin: 0;
    }

    #toast-container .toastr-container.sign-up .signup-icon > .material-icons.check {
        font-size: 14px !important;
        line-height: 1;
        margin: 0;
    }

    #toast-container #sign-in-button {
        margin-left: auto;
        gap: 4px;
        margin-top: 0;
        padding: 5px 10px;
        font-size: 12px !important;
        line-height: 1;
        min-height: 28px;
        min-width: 70px;
        border-radius: 4px;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: none !important;
    }

    #toast-container #sign-in-button .material-icons {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px !important;
        line-height: 1;
        flex: 0 0 auto;
    }

    #toast-container .toastr-container.sign-up .signup-toast-dismiss-wrap {
        display: inline-flex !important;
        align-items: center;
        flex: 0 0 auto;
        margin-left: 2px;
    }

    #toast-container .toastr-container.sign-up .signup-toast-dismiss-btn {
        font-size: 12px;
        line-height: 1;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        padding: 4px 5px;
    }
}

/* Dark mode toaster overrides */
html.dark-mode #toast-container > div,
html.dark-mode #toast-container > div.toast.toast-info,
html.dark-mode #toast-container > div.toast-custom {
    background-color: var(--dm-bg-elevated, #252525) !important;
    color: var(--dm-text-primary, #e8e8e8) !important;
}
html.dark-mode #toast-container .toastr-info,
html.dark-mode #toast-container .toastr-container.marked-read .toastr-info,
html.dark-mode #toast-container .toastr-info .streak-days,
html.dark-mode #toast-container .toastr-info .streak-total,
html.dark-mode #toast-container .toastr-info .number,
html.dark-mode #toast-container .toastr-info .article-total {
    color: var(--dm-text-primary, #e8e8e8) !important;
}
html.dark-mode #toast-container .toast-message {
    color: inherit;
}
html.dark-mode #toast-container .toastr-info a:not(#sign-in-button),
html.dark-mode #toast-container .toastr-info a:not(#sign-in-button):visited,
html.dark-mode #toast-container .toastr-info a:not(#sign-in-button):hover,
html.dark-mode #toast-container .toastr-info a:not(#sign-in-button):active {
    color: var(--dm-text-primary, #e8e8e8) !important;
}

html.dark-mode #toast-container #sign-in-button {
    background: #3a3f46 !important;
    border: 1px solid #626973 !important;
    color: #f4f6f8 !important;
    box-shadow: none !important;
}

html.dark-mode #toast-container #sign-in-button:hover,
html.dark-mode #toast-container #sign-in-button:focus {
    background: #474d56 !important;
    border-color: #7a828e !important;
    color: #ffffff !important;
}

html.dark-mode #toast-container .signup-toast-title {
    color: var(--dm-text-primary, #e8e8e8) !important;
}