/* Post/page content area */
.entry-content, .wp-site-blocks{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  font-size: 36px;
  line-height: 1.45;
  color: #111;
}

.entry-content p{
  margin: 0 0 46px 0;
}


/* ===== LOGO: centered between black header + yellow bar ===== */

/* Make the navbar a positioning context */
.dt_navbar,
.dt_navbar .dt_navbar-wrapper {
  position: relative;
}

/* Tweak these if needed */
:root{
  --dt-menu-h: 80px;      /* height of the yellow bar (adjust if needed) */
  --dt-logo-size: 120px;  /* your logo size */
}

/* Position the logo link in the middle, sitting on the seam */
.dt_navbar .custom-logo-link{
  position: absolute !important;
  left: 50% !important;

  /* Places the logo's CENTER on the top edge of the yellow bar */
  top: calc(100% - var(--dt-menu-h) - (var(--dt-logo-size) / 2)) !important;

  transform: translateX(-50%) !important;
  z-index: 9999 !important;
}

/* Rounded-rectangle + tilted logo */
.dt_navbar .custom-logo-link img.custom-logo,
.dt_navbar img.custom-logo {
  width: var(--dt-logo-size) !important;
  height: var(--dt-logo-size) !important;
  object-fit: cover;

  border-radius: 4px;
  transform: rotate(-25deg);

  transition: transform 260ms ease, box-shadow 260ms ease, border-radius 260ms ease;
  transform-origin: center;
  will-change: transform;
}

/* Hover: straighten + slight zoom */
.dt_navbar .custom-logo-link:hover img.custom-logo {
  transform: rotate(0deg) scale(1.08);
  box-shadow: 0 20px 32px rgba(0,0,0,0.25);
}


/* 1) ONLY the blue menu bar -> yellow */
.dt_navbar .dt_navbar-menu {
  background-color: #eacd44 !important;
  background-image: none !important;
}

/* 2) Ensure inner elements don’t “repaint” over the bar */
.dt_navbar .dt_navbar-menu nav.dt_navbar-nav,
.dt_navbar .dt_navbar-menu .dt_navbar-right,
.dt_navbar .dt_navbar-menu .dt_navbar-list-right {
  background: transparent !important;
}

/* Optional: keep menu text/icons readable */
.dt_navbar .dt_navbar-menu a,
.dt_navbar .dt_navbar-menu i,
.dt_navbar .dt_navbar-menu svg {
  color: #111 !important;
}

/* Make the FULL width of the menu strip yellow (including far left/right) */
.dt_navbar .dt_navbar-menus,
.dt_navbar .dt_navbar-menus > .dt-container-md,
.dt_navbar .dt_navbar-menu {
  background-color: #eacd44 !important;
  background-image: none !important;
}

/* Keep the top header area (with black image) untouched */
.dt_navbar .dt_navbar-wrapper,
.dt_navbar .dt_navbar-inner {
  background: black !important;
}

/* Narrow the single-post text column and center it */
.single article.is-single.post-content {
  max-width: 750px;   /* adjust to match your photo width */
  margin-left: auto;
  margin-right: auto;
}

.single .dt-col-lg-12.content-right {
  display: flex;
  justify-content: center;
}

.single article.is-single.post-content {
  width: 100%;
}

/* Increase text size in single posts */
.single article.is-single.post-content {
  font-size: 18px;      /* try 20–22px */
  line-height: 1.50;    /* keeps it readable when bigger */
}

/* Optional: slightly bigger headings */
.single article.is-single.post-content h1 { font-size: 42px; line-height: 1.2; }
.single article.is-single.post-content h2 { font-size: 30px; line-height: 1.25; }
.single article.is-single.post-content h3 { font-size: 24px; line-height: 1.3; }

/* Darker grey post text (single posts) */
.single article.is-single.post-content,
.single article.is-single.post-content p,
.single article.is-single.post-content li,
.single article.is-single.post-content blockquote {
  color: #2f2f2f !important;   /* dark grey */
}

/* Specifically for WP block paragraphs (as in your screenshot) */
.single article.is-single.post-content p.wp-block-paragraph {
  color: #2f2f2f !important;
}

.single article.is-single.post-content h1,
.single article.is-single.post-content h2,
.single article.is-single.post-content h3 {
  color: #1a1a1a !important;
}

/* Sans-serif typography ONLY on single post pages */
.single article.is-single.post-content,
.single article.is-single.post-content p,
.single article.is-single.post-content li,
.single article.is-single.post-content blockquote {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif !important;
}

/* Headings too (optional but usually desired for consistency) */
.single article.is-single.post-content h1,
.single article.is-single.post-content h2,
.single article.is-single.post-content h3,
.single article.is-single.post-content h4 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif !important;
}

/* ===== 3-column smaller cards on blog/archive grids ===== */
@media (min-width: 1100px){
  /* Turn the posts row into a 3-col grid */
  .dt-row.dt-g-4.listgrid.dt-posts{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;            /* spacing between cards */
  }

  /* Each “column” wrapper becomes a grid item (cancel 50% widths/flex) */
  .dt-row.dt-g-4.listgrid.dt-posts > .dt-col-sm-6{
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
  }

  /* Optional: slightly reduce padding inside cards to look “smaller” */
  .dt-row.dt-g-4.listgrid.dt-posts article{
    font-size: 0.95em;               /* subtle downscale */
  }
}

/* Tablet: keep 2 columns */
@media (min-width: 768px) and (max-width: 1099px){
  .dt-row.dt-g-4.listgrid.dt-posts{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 767px){
  .dt-row.dt-g-4.listgrid.dt-posts{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Round corners on post cards */
.dt-row.dt-g-4.listgrid.dt-posts article {
  border-radius: 16px !important;   /* adjust: 10–22px */
  overflow: hidden !important;      /* ensures image corners are rounded too */
}

/* If the card has an inner wrapper with its own background */
.dt-row.dt-g-4.listgrid.dt-posts article .post-wrap,
.dt-row.dt-g-4.listgrid.dt-posts article .entry-wrap,
.dt-row.dt-g-4.listgrid.dt-posts article .post-content,
.dt-row.dt-g-4.listgrid.dt-posts article .post-body {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Round the featured image area just in case it’s separate */
.dt-row.dt-g-4.listgrid.dt-posts article img {
  border-radius: 0 !important;      /* let the parent handle rounding */
  display: block;
}


/* ===== "Latest" box -> logo yellow ===== */
.exclusive-posts h5.title,
.exclusive-posts h5.title a{
  background: #eacd44 !important;
  color: #1f1f1f !important;
  padding: 4px 16px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}

/* If the theme draws a blue shape behind via pseudo elements */
.exclusive-posts h5.title::before,
.exclusive-posts h5.title::after{
  background: transparent !important;
  border-color: transparent !important;
}

/* If the title contains the spinner/icon */
.exclusive-posts h5.title i,
.exclusive-posts h5.title svg{
  color: #1f1f1f !important;
}

:root{
  --dt-main-rgb: 234, 205, 68;          /* #eacd44 */
  --dt-main-color: rgb(234, 205, 68);   /* fallback */
}




/* 1) Global text darker */
body,
p, li, blockquote,
.entry-content,
article,
.post,
.post-content {
  color: #2b2b2b !important;  /* dark grey */
}

/* Headings even darker */
h1, h2, h3, h4, h5, h6 {
  color: #151515 !important;
}

/* 2) Anything using the theme "main color" as background -> dark text */
[style*="--dt-main-color"],
.dt-section-title-five .widget-header .widget-title,
.widget-header .widget-title,
.dt_navbar .dt_navbar-menu,
.dt-posts a[rel~="category"],
.dt-posts a[rel~="tag"],
.post-categories a,
.cat-links a,
.tags-links a,
.btn, button, .button, input[type="submit"]{
  color: #1f1f1f !important;
}

/* Longreads title box -> green (only sl-main widget headers) */
.widget-header.sl-main h4.widget-title{
  background: #00A3A3 !important;   /* pick your green */
  color: #ffffff !important;
  border-radius: 10px !important;
}

/* If any theme shapes still show, neutralize them */
.widget-header.sl-main h4.widget-title::before,
.widget-header.sl-main h4.widget-title::after{
  background: transparent !important;
  border-color: transparent !important;
}

/* If "Longread" is a link inside the title */
.widget-header.sl-main h4.widget-title a,
.widget-header.sl-main h4.widget-title span{
  color: #ffffff !important;
  background: transparent !important;
}

/* EuroLeague title box -> same rounded corners as Longread */
.widget-header.sl-mid h4.widget-title{
	background: #CFC7BB !important;
  border-radius: 10px !important;
  overflow: hidden !important;   /* keeps corners clean if background is drawn inside */
}

/* If the theme uses pseudo elements that affect the shape */
.widget-header.sl-mid h4.widget-title::before,
.widget-header.sl-mid h4.widget-title::after{
  border-radius: 10px !important;
}

/* Music widget header (sl-right) -> muted red + rounded corners */
.widget-header.sl-right h4.widget-title{
  background: #a63a3a !important;  /* muted red (not too bright) */
  color: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* If the theme uses pseudo-elements for shape, round/neutralize them too */
.widget-header.sl-right h4.widget-title::before,
.widget-header.sl-right h4.widget-title::after{
  background: transparent !important;
  border-radius: 10px !important;
}

/* If the title is a link inside */
.widget-header.sl-right h4.widget-title a,
.widget-header.sl-right h4.widget-title span{
  color: #ffffff !important;
  background: transparent !important;
}

/* Bring back the grey line next to all widget title boxes */
.widget-header{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px; /* space between box and line */
}

/* The line */
.widget-header::after{
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.28); /* grey on dark background */
}

/* Main menu: larger + bold */
.dt_navbar .dt_navbar-nav ul#menu-primary > li > a,
.dt_navbar .dt_navbar-nav ul.dt_navbar-mainmenu > li > a{
  font-size: 20px !important;     /* try 18–22px */
  font-weight: 700 !important;
  letter-spacing: .2px;
}

/* Optional: a bit more horizontal spacing */
.dt_navbar .dt_navbar-nav ul#menu-primary > li{
  margin-right: 2px;
}

/* Dropdown items: slightly smaller so hierarchy stays clear */
.dt_navbar .dt_navbar-nav ul#menu-primary li ul li a{
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* Tighter menu typography */
.dt_navbar .dt_navbar-nav ul#menu-primary > li > a,
.dt_navbar .dt_navbar-nav ul.dt_navbar-mainmenu > li > a{
  letter-spacing: 0 !important;     /* tighter characters */
}

/* Tighter spacing between menu items */
.dt_navbar .dt_navbar-nav ul#menu-primary > li,
.dt_navbar .dt_navbar-nav ul.dt_navbar-mainmenu > li{
  margin-right: 8px !important;     /* was 14px */
}

/* Optional: reduce link padding if still too wide */
.dt_navbar .dt_navbar-nav ul#menu-primary > li > a{
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Hide dropdown arrow (▼) next to top-level items in primary menu */
.dt_navbar-nav ul#menu-primary > li.menu-item-has-children > a::after,
.dt_navbar-nav ul#menu-primary > li.menu-item-has-children > a:after{
  display: none !important;
  content: none !important;
}

/* If the arrow is an actual icon element inside the link */
.dt_navbar-nav ul#menu-primary > li.menu-item-has-children > a i,
.dt_navbar-nav ul#menu-primary > li.menu-item-has-children > a svg{
  display: none !important;
}

/* If the theme uses a specific dropdown indicator span/button */
.dt_navbar-nav ul#menu-primary .dt_mobilenav-dropdown-toggle,
.dt_navbar-nav ul#menu-primary .dropdown-toggle,
.dt_navbar-nav ul#menu-primary .submenu-toggle{
  display: none !important;
}

/* Make "By" + date metadata more readable on cards */
.post .meta,
.post .meta li,
.post .meta a,
ul.meta.list-inline,
ul.meta.list-inline li.list-inline-item{
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
}

/* Icons (user + calendar) */
.post .meta i,
ul.meta.list-inline i{
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
}

/* FIX: on the white "Life" carousel cards, make meta dark */
.post.post-list-sm.circle ul.meta,
.post.post-list-sm.circle ul.meta li,
.post.post-list-sm.circle ul.meta a,
.post.post-list-sm.circle ul.meta i{
  color: #2b2b2b !important;
  text-shadow: none !important;
}

/* Optional: make it slightly softer */
.post.post-list-sm.circle ul.meta{
  opacity: .85;
}

/* Any card with a WHITE details box: make meta dark (readable) */
.post .details.bg-white ul.meta,
.post .details.bg-white ul.meta li,
.post .details.bg-white ul.meta a,
.post .details.bg-white ul.meta i{
  color: #2b2b2b !important;
  text-shadow: none !important;
  opacity: .9;
}

/* Keep titles readable too (optional) */
.post .details.bg-white .post-title a{
  color: #151515 !important;
}

/* Past posts carousel: remove dark overlay + brighten images */
.main-missed-section .post.post-over-content .thumb::before,
.main-missed-section .post.post-over-content .thumb:before{
  opacity: 0 !important;              /* kills the dark overlay */
}

/* Boost brightness/contrast a bit */
.main-missed-section .post.post-over-content .thumb img{
  filter: brightness(1.25) contrast(1.25) !important;
  opacity: 1 !important;
}

/* If the whole card is being faded */
.main-missed-section .post.post-over-content{
  opacity: 1 !important;
}

/* Logo: drop shadow (works great with rotation) */
.site-logo img.custom-logo,
.dt_navbar .custom-logo-link img.custom-logo,
.dt_navbar img.custom-logo{
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.28)) !important;
}

/* Optional: slightly stronger on hover */
.site-logo a:hover img.custom-logo,
.dt_navbar .custom-logo-link:hover img.custom-logo{
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.35)) !important;
}

/* Allow shadows to render outside the grid */
.dt-row.dt-g-4.listgrid.dt-posts{
  overflow: visible !important;
}

/* True drop shadow on the card wrapper (reliable for your structure) */
.dt-row.dt-g-4.listgrid.dt-posts > .dt-col-sm-6{
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.30)) !important;
}

/* Allow shadows to render outside the grid */
.dt-row.dt-g-4.listgrid.dt-posts{
  overflow: visible !important;
}

/* Brighter / softer shadow palette */
.dt-row.dt-g-4.listgrid.dt-posts > .dt-col-sm-6{
  filter: drop-shadow(0 12px 26px rgba(255,255,255,0.10))
          drop-shadow(0 18px 36px rgba(0,0,0,0.22)) !important;
}

/* Rounded cards */
.dt-row.dt-g-4.listgrid.dt-posts > .dt-col-sm-6 > article.post{
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Hover: slightly stronger */
.dt-row.dt-g-4.listgrid.dt-posts > .dt-col-sm-6:hover{
  filter: drop-shadow(0 14px 30px rgba(255,255,255,0.30))
          drop-shadow(0 22px 44px rgba(0,0,0,0.26)) !important;
}

/* Base: smooth hover animation */
.dt-row.dt-g-4.listgrid.dt-posts > .dt-col-sm-6 > article.post{
  border: 2px solid transparent !important;
  transform: scale(1) !important;
  transition: transform 220ms ease, border-color 220ms ease;
  will-change: transform;
}

/* Hover: slight magnify + white outline */
.dt-row.dt-g-4.listgrid.dt-posts > .dt-col-sm-6:hover > article.post{
  transform: scale(1.03) !important;
  border-color: rgba(255,255,255,0.70) !important;
}

/* All Posts carousel: outline + magnify */
.post-carousel-missed .post.post-over-content{
  border: 2px solid transparent !important;
  border-radius: 14px !important;      /* keep your rounded look */
  overflow: hidden;                    /* ensures border radius clips */
  transform: scale(1) !important;
  transition: transform 220ms ease, border-color 220ms ease;
  will-change: transform;
}

.post-carousel-missed .post.post-over-content:hover{
  transform: scale(1.03) !important;
  border-color: rgba(255,255,255,0.70) !important;
}

/* Hate Casts (and similar) cards: white outline + slight magnify on hover */
.post_columns-grid .post.featured-post-lg{
  border-radius: 18px;                 /* keep your rounded look */
  overflow: hidden;                    /* clip image to radius */
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease, outline 220ms ease;
  transform: translateZ(0);
  will-change: transform;
}

/* Hover effect */
.post_columns-grid .post.featured-post-lg:hover{
  transform: scale(1.03);
  outline: 2px solid rgba(255,255,255,0.90);
  outline-offset: 6px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.35);
  z-index: 5;
}

/* Also when hovering inside (e.g., over title/meta links) */
.post_columns-grid .post.featured-post-lg:focus-within{
  transform: scale(1.03);
  outline: 2px solid rgba(255,255,255,0.90);
  outline-offset: 6px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.35);
  z-index: 5;
}

/* Single post meta (inline items): make more readable */
.post-single .post-header ul.meta.list-inline,
.post-single .post-header ul.meta.list-inline li.list-inline-item,
.post-single .post-header ul.meta.list-inline li.list-inline-item a{
  font-size: 16px !important;              /* bump size */
  font-weight: 600 !important;             /* bolder */
  color: rgba(20,20,20,0.85) !important;   /* darker text */
  letter-spacing: 0 !important;            /* tighter */
  text-shadow: none !important;            /* remove haze */
}

/* Add a subtle pill background so white page is easier on the eyes */
.post-single .post-header ul.meta.list-inline li.list-inline-item{
  background: rgba(0,0,0,0.06) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin-right: 8px !important;
}

/* Links: a bit darker + underline on hover */
.post-single .post-header ul.meta.list-inline li.list-inline-item a{
  color: rgba(10,10,10,0.90) !important;
}
.post-single .post-header ul.meta.list-inline li.list-inline-item a:hover{
  text-decoration: underline !important;
}

/* Icons in meta line: slightly darker too */
.post-single .post-header ul.meta.list-inline li.list-inline-item i{
  opacity: 0.85 !important;
  margin-right: 6px !important;
}

/* Single post page background -> white */
body.single-post {
  background: #ffffff !important;
}

/* Make the main content area sit on white nicely */
body.single-post #content,
body.single-post .site-content,
body.single-post .site-wrapper {
  background: transparent !important;
}

/* Optional: make the article readable on white */
body.single-post .post,
body.single-post article,
body.single-post .post-single {
  background: #ffffff !important;
}

/* Sidebar "Authors" widget: push title badge right + align list */
#dt-sidebar .widget.widget_authors .widget-header{
  padding-left: 18px !important;   /* move the yellow "Authors" badge right */
}

#dt-sidebar .widget.widget_authors ul{
  padding-left: 20px !important;   /* move the list content right to match */
  margin-left: 0 !important;
}

/* Optional: if list items still look slightly off, nudge each row too */
#dt-sidebar .widget.widget_authors ul li{
  padding-left: 0 !important;
}

/* Single post: give more room to main content */
@media (min-width: 992px){
  body.single #content .dt-row{
    justify-content: center;
  }

  /* Main column wider */
  body.single #content #dt-main.dt-col-lg-8{
    flex: 0 0 76% !important;
    max-width: 76% !important;
  }

  /* Sidebar narrower */
  body.single #content #dt-sidebar.dt-col-lg-4{
    flex: 0 0 24% !important;
    max-width: 24% !important;
  }
}

/* Optional: a little extra breathing room between content + sidebar */
@media (min-width: 992px){
  body.single #content #dt-main{
    padding-right: 24px;
  }
}

/* ✅ SHOW sidebar only on single posts */
body.single #dt-sidebar,
body.single-post #dt-sidebar{
  display: block !important;
}

/* 🚫 HIDE sidebar on front page + blog home + archives etc */
body.home #dt-sidebar,
body.front-page #dt-sidebar,
body.blog #dt-sidebar,
body.archive #dt-sidebar,
body.category #dt-sidebar,
body.tag #dt-sidebar,
body.search #dt-sidebar,
body.author #dt-sidebar,
body.page #dt-sidebar{
  display: none !important;
}

/* When sidebar is hidden, let main content go full width */
@media (min-width: 992px){
  body.home #dt-main,
  body.front-page #dt-main,
  body.blog #dt-main,
  body.archive #dt-main,
  body.category #dt-main,
  body.tag #dt-main,
  body.search #dt-main,
  body.author #dt-main,
  body.page #dt-main{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Facebook widget title: match the rest of your sidebar title boxes */
#dt-sidebar .widget_facebook_likebox .widget-header .widget-title,
#dt-sidebar .widget_facebook_likebox .widget-header .widget-title a{
  background: var(--dt-main-color) !important;  /* your yellow */
  color: #111 !important;                      /* readable dark text */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

/* If the icon is too faint, darken it too */
#dt-sidebar .widget_facebook_likebox .widget-header .widget-title a i,
#dt-sidebar .widget_facebook_likebox .widget-header .widget-title i{
  color: #111 !important;
}

/* TOP BAR (Trending News strip) -> black */
.dt_header .dt_header-topbar,
.dt_header-topbar,
.dt_header-topbar + .dt_header-navwrapper {
  background: #000 !important;
  color: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* Make all text/icons/links in the top bar light */
.dt_header-topbar,
.dt_header-topbar *,
.dt_header-topbar a,
.dt_header-topbar i,
.dt_header-topbar svg {
  color: rgba(255,255,255,.95) !important;
}

/* “Trending News” label block (optional: a slightly lighter black pill) */
.dt_header-topbar .trending-news-title,
.dt_header-topbar .dt-trending-title,
.dt_header-topbar .breaking-title {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}

/* Ticker separators (optional) */
.dt_header-topbar .dt-news-headline,
.dt_header-topbar .news-ticker,
.dt_header-topbar .dt_header-newsline {
  border-left: 1px solid rgba(255,255,255,.14) !important;
}

/* Date/time badge text (if present) */
.dt_header-topbar .dt-date,
.dt_header-topbar .dt-time,
.dt_header-topbar .dt-clock,
.dt_header-topbar .dt_header-date,
.dt_header-topbar .dt_header-time {
  color: #fff !important;
}

/* Replace "Trending News:" label with "Hate News" (CSS-only) */
strong.dt-news-heading{
  font-size: 0 !important; /* hides the original text node */
  line-height: 1 !important;
}

/* keep the fire icon visible */
strong.dt-news-heading i{
  font-size: 16px !important;
  margin-right: 8px !important;
}

/* inject new label */
strong.dt-news-heading::after{
  content: "Spread the H8:";
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: inherit !important;
}

/* Top bar button: "Join us on Discord" */
.dt_navbar-list-right a.dt-btn.dt-btn-primary{
  color: #fff !important;                 /* readable text on green */
  background: #5865F2 !important;         /* green */
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
  transition: transform .16s ease, box-shadow .16s ease, outline-color .16s ease;
}

.dt_navbar-list-right a.dt-btn.dt-btn-primary:hover,
.dt_navbar-list-right a.dt-btn.dt-btn-primary:focus{
  outline: 2px solid rgba(255,255,255,0.95) !important;
  outline-offset: 3px !important;
  transform: scale(1.03) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.40) !important;
}

.dt_navbar-list-right a.dt-btn.dt-btn-primary:active{
  transform: scale(1.01) !important;
}

.dt_header-topbar{
  background: #000 !important;            /* you wanted black */
  color: rgba(255,255,255,.92) !important;
}

.dt_header-topbar,
.dt_header-topbar *{
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1.5px 0.5px rgba(0,0,0,5) !important;
}

/***************************************************
  LOGO: white outline + bevel + stronger shadow
***************************************************/
.site--logo a.custom-logo-link img.custom-logo{
  border-radius: 10px !important;

  /* crisp white outline */
  outline: 3px solid rgba(255,255,255,.92) !important;
  outline-offset: 6px !important;

  /* “bevel” feel: highlight top/left + shade bottom/right */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),     /* top highlight */
    inset 0 -3px 0 rgba(0,0,0,.22),          /* bottom shade */
    0 18px 40px rgba(0,0,0,.45),             /* true drop shadow */
    0 0 0 1px rgba(255,255,255,.10)          /* tiny edge crispness */
    !important;

  /* keep your previous drop-shadow filter if you want, but this is stronger */
  filter: none !important;

  transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease !important;
  transform-origin: center center !important;
}

/***************************************************
  LOGO hover: stronger pop (outline + glow + magnify)
***************************************************/
.site--logo a.custom-logo-link:hover img.custom-logo{
  transform: translateY(-2px) scale(1.06) rotate(0deg) !important;

  outline-color: #fff !important;

  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.34),
    inset 0 -4px 0 rgba(0,0,0,.25),
    0 26px 60px rgba(0,0,0,.58),
    0 0 0 2px rgba(255,255,255,.18),
    0 0 28px rgba(255,255,255,.18)          /* subtle glow */
    !important;
}

/* Optional: make the clickable area itself also "feel" elevated */
.site--logo a.custom-logo-link{
  display: inline-block !important;
}

/* ===== Latest pill (exclusive posts bar) ===== */
.exclusive-posts .title{
  /* in case the title wrapper has its own background */
  background: transparent !important;
}

/* Hate News label + fire icon in the top bar */
.dt-news-headline .dt-news-heading,
.dt-news-headline .dt-news-heading .fa-fire-alt {
  color: #ff2b2b !important;
}

/* if the icon inherits separately */
.dt-news-headline .dt-news-heading i {
  color: #c41e3A !important;
}

/* FORCE the "Latest" pill background */
section.exclusive-wrapper div.exclusive-posts h5.title{
  background-color: #0EA15A !important;
  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,.22),
    rgba(255,255,255,0) 45%,
    rgba(0,0,0,.10)
  ) !important;

  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 10px 26px rgba(0,0,0,.28) !important;

  border-radius: 12px !important;
}

/* icon + text inside the pill */
section.exclusive-wrapper div.exclusive-posts h5.title,
section.exclusive-wrapper div.exclusive-posts h5.title i{
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}

/* if the color is coming from a pseudo-element overlay, kill it */
section.exclusive-wrapper div.exclusive-posts h5.title::before,
section.exclusive-wrapper div.exclusive-posts h5.title::after{
  background: transparent !important;
  opacity: 0 !important;
}

/* Single post meta: hide the Categories pill only */
.single-post .post-header ul.meta.list-inline li.list-inline-item:has(a[rel~="category"]) {
  display: none !important;
}

/* =========================================
   SINGLE POST featured image: "liquid" hero look
   (shadow + gloss + subtle motion)
   ========================================= */

/* Target the single post featured image wrapper */
body.single-post .post.post-single article .featured-image{
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  transform: translateZ(0); /* improves rendering */
  
  /* depth */
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.25) !important;

  /* faint outline so it pops on white background */
  outline: 1px solid rgba(255,255,255,.28);
  outline-offset: -1px;
}

/* Image itself */
body.single-post .post.post-single article .featured-image img{
  display: block;
  width: 100%;
  height: auto;

  /* subtle “liquid” presence */
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.01);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}

/* Gloss highlight overlay (the “liquid” effect) */
body.single-post .post.post-single article .featured-image::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* angled glossy sheen */
  background:
    radial-gradient(1200px 420px at 15% 10%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 35%, rgba(255,255,255,.10) 60%, transparent 85%);
  opacity: .75;
  mix-blend-mode: screen;
}

/* Soft vignette to focus the eye */
body.single-post .post.post-single article .featured-image::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: radial-gradient(90% 80% at 50% 50%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.28) 100%);
  opacity: .55;
}

/* Hover: slight magnify + brighter outline + a touch more depth */
@media (hover:hover){
  body.single-post .post.post-single article .featured-image:hover{
    outline-color: rgba(255,255,255,.55);
    box-shadow:
      0 26px 80px rgba(0,0,0,.55),
      0 4px 14px rgba(0,0,0,.30) !important;
  }

  body.single-post .post.post-single article .featured-image:hover img{
    transform: scale(1.035);
    filter: saturate(1.10) contrast(1.06);
  }
}

/* Gentle “float in” animation when page loads */
body.single-post .post.post-single article .featured-image{
  animation: th8HeroIn .65s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes th8HeroIn{
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Optional: add a tiny “liquid shimmer” (very subtle, can remove if you prefer static) */
body.single-post .post.post-single article .featured-image::before{
  animation: th8Sheen 7s ease-in-out infinite;
}
@keyframes th8Sheen{
  0%   { transform: translateX(-2%) translateY(-1%); opacity: .62; }
  50%  { transform: translateX(2%)  translateY(1%);  opacity: .78; }
  100% { transform: translateX(-2%) translateY(-1%); opacity: .62; }
}

.main-missed-section .post-over-content h1,
.main-missed-section .post-over-content h2,
.main-missed-section .post-over-content h3,
.main-missed-section .post-over-content .title,
.main-missed-section .post-over-content .entry-title,
.main-missed-section .post-over-content .post-title,
.main-missed-section .post-over-content .post-title a,
.main-missed-section .post-over-content .entry-title a{
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.85) !important;
}

/* =========================================
   FORCE-COMPACT FOOTER (theme-proof)
   ========================================= */

/* 1) Footer container spacing */
body footer.dt_footer.footer-dark,
body .dt_footer.footer-dark,
body .dt_footer {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* 2) Footer widgets wrapper + row */
body footer.dt_footer .dt-footer-widgets,
body .dt_footer .dt-footer-widgets {
  padding: 0 !important;
  margin: 0 !important;
}

body footer.dt_footer .dt-footer-widgets > .dt-container-md,
body .dt_footer .dt-footer-widgets > .dt-container-md {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body footer.dt_footer .dt-footer-widgets .dt-row,
body .dt_footer .dt-footer-widgets .dt-row {
  margin: 0 !important;
  padding: 0 !important;
  row-gap: 10px !important;
}

/* 3) Kill widget margins */
body footer.dt_footer .widget,
body footer.dt_footer .widget_block,
body .dt_footer .widget,
body .dt_footer .widget_block {
  margin: 0 !important;
}

/* =========================================
   JETPACK CONTACT FORM: stop it expanding
   ========================================= */

/* Target the exact block wrapper you highlighted */
body footer.dt_footer div[id^="contact-form-widget-block-"],
body .dt_footer div[id^="contact-form-widget-block-"]{
  margin: 0 !important;
  padding: 0 !important;
}

/* The Jetpack form block */
body footer.dt_footer .wp-block-jetpack-contact-form,
body .dt_footer .wp-block-jetpack-contact-form{
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove the big internal spacing Jetpack uses */
body footer.dt_footer .wp-block-jetpack-contact-form *{
  margin-top: 10 !important;
}

/* Tight labels */
body footer.dt_footer .wp-block-jetpack-contact-form label{
  margin: 0 0 4px 0 !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}

/* Tight inputs */
body footer.dt_footer .wp-block-jetpack-contact-form input[type="text"],
body footer.dt_footer .wp-block-jetpack-contact-form input[type="email"],
body footer.dt_footer .wp-block-jetpack-contact-form textarea{
  padding: 7px 10px !important;
  margin: 0 0 8px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  font-size: 13px !important;
}

/* THE culprit: textarea height */
body footer.dt_footer .wp-block-jetpack-contact-form textarea{
  height: 70px !important;
  min-height: 70px !important;
  max-height: 80px !important;
  resize: none !important;
}

/* Button smaller */
body footer.dt_footer .wp-block-jetpack-contact-form button,
body footer.dt_footer .wp-block-jetpack-contact-form input[type="submit"]{
  padding: 8px 12px !important;
  min-height: 34px !important;
  margin: 4px 0 0 0 !important;
  line-height: 1 !important;
}

/* =========================================
   SEARCH WIDGET in footer: compact
   ========================================= */

body footer.dt_footer .wp-block-search,
body .dt_footer .wp-block-search{
  margin: 0 !important;
  padding: 0 !important;
}

body footer.dt_footer .wp-block-search__input{
  padding: 7px 10px !important;
  min-height: 34px !important;
}

body footer.dt_footer .wp-block-search__button{
  padding: 8px 12px !important;
  min-height: 34px !important;
}

/* =========================================
   Absolute cap: footer widgets can't exceed this
   (prevents "it grew instead" situations)
   ========================================= */

body footer.dt_footer .dt-footer-widgets,
body .dt_footer .dt-footer-widgets{
  max-height: 260px !important;
  overflow: hidden !important;
}

/* ONLY the "Tweets by TheHateful8_gr" link (Twitter embed) */
#dt-sidebar .wp-block-embed-twitter a.twitter-timeline[href*="twitter.com/TheHateful8_gr"],
#dt-sidebar a.twitter-timeline[href*="twitter.com/TheHateful8_gr"]{
  color: #0A0A0A !important;                 /* green text */
  font-weight: 650 !important;
  text-decoration: none !important;
}

/* “Tweets by TheHateful8_gr” text (the anchor right under the iframe) */
.wp-block-embed-twitter a.twitter-timeline{
  font-size: 18px !important;  /* change to 12px if you want smaller */
  line-height: 1.2 !important;
}

/* If something else is forcing a big font-size on the container */
.wp-block-embed-twitter,
.wp-block-embed-twitter .wp-block-embed__wrapper{
  font-size: 14px !important;
}

/* FIX: "missed" carousel cards look washed/opaque */
.main-missed-section .post-over-content,
.main-missed-section .post-over-content .thumb,
.main-missed-section .post-over-content .thumb img,
.post-carousel-missed .post-over-content,
.post-carousel-missed .post-over-content .thumb,
.post-carousel-missed .post-over-content .thumb img {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* Remove any gray/colored overlay sitting on top of the image */
.main-missed-section .post-over-content::before,
.main-missed-section .post-over-content .thumb::before,
.main-missed-section .post-over-content .thumb::after,
.post-carousel-missed .post-over-content::before,
.post-carousel-missed .post-over-content .thumb::before,
.post-carousel-missed .post-over-content .thumb::after {
  background: none !important;
  opacity: 0 !important;
}

/* Optional: re-add the "standard" readable bottom gradient (like other cards) */
.main-missed-section .post-over-content .thumb,
.post-carousel-missed .post-over-content .thumb {
  position: relative;
  overflow: hidden;
}
.main-missed-section .post-over-content .thumb:after,
.post-carousel-missed .post-over-content .thumb:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.10) 55%,
    rgba(0,0,0,0.00) 75%
  );
  opacity: 1 !important;
  pointer-events: none;
}

/* Sidebar GIF widget: make image full-width and centered */
#dt-sidebar .wp-block-coblocks-gif img,
#dt-sidebar .wp-block-coblocks-gif picture,
#dt-sidebar .wp-block-coblocks-gif figure {
  width: 100%;
  max-width: 100%;
}

#dt-sidebar .wp-block-coblocks-gif img {
  display: block;
  height: auto;
  margin: 0 auto;
  border-radius: 12px; /* optional, remove if you want sharp corners */
}

/* Sidebar GIF caption: calligraphic-ish, italic, bigger, lower */
#dt-sidebar .wp-block-coblocks-gif figcaption{
  margin-top: 12px;          /* brings text lower (more space from GIF) */
  padding-top: 4px;          /* subtle extra drop */
  text-align: center;

  font-style: italic;
  font-size: 16px;           /* increase size */
  line-height: 1.35;

  /* “more calligraphic” but still safe for Greek + English via fallbacks */
  font-family:
    "EB Garamond",
    "Cormorant Garamond",
    "Noto Serif",
    "Palatino Linotype",
    "Book Antiqua",
    Georgia,
    serif;

  letter-spacing: 0.1px;
  opacity: 0.95;             /* slightly softer (optional) */
}

/* Spotify social icon: replace the yellow with Spotify green */
.dt_navbar .widget_social a i.fa-spotify,
.dt_navbar .widget_social a i.fab.fa-spotify {
  background-color: #1DB954 !important; /* Spotify green */
  border-radius: 50% !important;        /* keep it circular */
}

/* Optional: slightly darker green on hover (nice/premium) */
.dt_navbar .widget_social a:hover i.fa-spotify,
.dt_navbar .widget_social a:hover i.fab.fa-spotify {
  background-color: #169c46 !important;
}