/**
 * DropInBlog Styles
 * Matches CCFS site design system
 */

/* CSP-Safe utility classes */
.dib-hidden {
  display: none !important;
}

.dib-clickable {
  cursor: pointer !important;
}

/* Layout fixed class for single posts */
.dib-layout-fixed {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.dib-layout-fixed > * {
  position: relative !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  clear: both !important;
}

.dib-layout-fixed .dib-post-featured-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 25px !important;
  overflow: visible !important;
}

.dib-layout-fixed .dib-post-featured-image img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

.dib-layout-fixed .dib-meta-text {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 25px !important;
  clear: both !important;
}

.dib-layout-fixed #dib-audio {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 25px !important;
  clear: both !important;
}

.dib-layout-fixed .dib-post-content {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  clear: both !important;
}

/* Visualizer CSS animations */
.dib-audio-visualizer i {
  display: inline-block;
  width: 3px;
  margin: 0 1px;
  background-color: currentColor;
  height: 15px;
  transition: height 0.15s ease;
}

.dib-visualizer-playing .dib-bar-0 { animation: dib-bar-0 0.5s ease infinite; }
.dib-visualizer-playing .dib-bar-1 { animation: dib-bar-1 0.5s ease infinite 0.1s; }
.dib-visualizer-playing .dib-bar-2 { animation: dib-bar-2 0.5s ease infinite 0.2s; }
.dib-visualizer-playing .dib-bar-3 { animation: dib-bar-3 0.5s ease infinite 0.15s; }
.dib-visualizer-playing .dib-bar-4 { animation: dib-bar-4 0.5s ease infinite 0.25s; }
.dib-visualizer-playing .dib-bar-5 { animation: dib-bar-5 0.5s ease infinite 0.05s; }

@keyframes dib-bar-0 { 0%, 100% { height: 5px; } 50% { height: 7px; } }
@keyframes dib-bar-1 { 0%, 100% { height: 8px; } 50% { height: 22px; } }
@keyframes dib-bar-2 { 0%, 100% { height: 14px; } 50% { height: 30px; } }
@keyframes dib-bar-3 { 0%, 100% { height: 24px; } 50% { height: 30px; } }
@keyframes dib-bar-4 { 0%, 100% { height: 8px; } 50% { height: 22px; } }
@keyframes dib-bar-5 { 0%, 100% { height: 5px; } 50% { height: 9px; } }

/* Progress bar using data-progress attribute */
.dib-audio-progress {
  width: 0%;
  transition: width 0.1s linear;
}

.dib-audio-progress[data-progress="0"] { width: 0%; }
.dib-audio-progress[data-progress="1"] { width: 1%; }
.dib-audio-progress[data-progress="2"] { width: 2%; }
.dib-audio-progress[data-progress="3"] { width: 3%; }
.dib-audio-progress[data-progress="4"] { width: 4%; }
.dib-audio-progress[data-progress="5"] { width: 5%; }
.dib-audio-progress[data-progress="6"] { width: 6%; }
.dib-audio-progress[data-progress="7"] { width: 7%; }
.dib-audio-progress[data-progress="8"] { width: 8%; }
.dib-audio-progress[data-progress="9"] { width: 9%; }
.dib-audio-progress[data-progress="10"] { width: 10%; }
.dib-audio-progress[data-progress="11"] { width: 11%; }
.dib-audio-progress[data-progress="12"] { width: 12%; }
.dib-audio-progress[data-progress="13"] { width: 13%; }
.dib-audio-progress[data-progress="14"] { width: 14%; }
.dib-audio-progress[data-progress="15"] { width: 15%; }
.dib-audio-progress[data-progress="16"] { width: 16%; }
.dib-audio-progress[data-progress="17"] { width: 17%; }
.dib-audio-progress[data-progress="18"] { width: 18%; }
.dib-audio-progress[data-progress="19"] { width: 19%; }
.dib-audio-progress[data-progress="20"] { width: 20%; }
.dib-audio-progress[data-progress="21"] { width: 21%; }
.dib-audio-progress[data-progress="22"] { width: 22%; }
.dib-audio-progress[data-progress="23"] { width: 23%; }
.dib-audio-progress[data-progress="24"] { width: 24%; }
.dib-audio-progress[data-progress="25"] { width: 25%; }
.dib-audio-progress[data-progress="26"] { width: 26%; }
.dib-audio-progress[data-progress="27"] { width: 27%; }
.dib-audio-progress[data-progress="28"] { width: 28%; }
.dib-audio-progress[data-progress="29"] { width: 29%; }
.dib-audio-progress[data-progress="30"] { width: 30%; }
.dib-audio-progress[data-progress="31"] { width: 31%; }
.dib-audio-progress[data-progress="32"] { width: 32%; }
.dib-audio-progress[data-progress="33"] { width: 33%; }
.dib-audio-progress[data-progress="34"] { width: 34%; }
.dib-audio-progress[data-progress="35"] { width: 35%; }
.dib-audio-progress[data-progress="36"] { width: 36%; }
.dib-audio-progress[data-progress="37"] { width: 37%; }
.dib-audio-progress[data-progress="38"] { width: 38%; }
.dib-audio-progress[data-progress="39"] { width: 39%; }
.dib-audio-progress[data-progress="40"] { width: 40%; }
.dib-audio-progress[data-progress="41"] { width: 41%; }
.dib-audio-progress[data-progress="42"] { width: 42%; }
.dib-audio-progress[data-progress="43"] { width: 43%; }
.dib-audio-progress[data-progress="44"] { width: 44%; }
.dib-audio-progress[data-progress="45"] { width: 45%; }
.dib-audio-progress[data-progress="46"] { width: 46%; }
.dib-audio-progress[data-progress="47"] { width: 47%; }
.dib-audio-progress[data-progress="48"] { width: 48%; }
.dib-audio-progress[data-progress="49"] { width: 49%; }
.dib-audio-progress[data-progress="50"] { width: 50%; }
.dib-audio-progress[data-progress="51"] { width: 51%; }
.dib-audio-progress[data-progress="52"] { width: 52%; }
.dib-audio-progress[data-progress="53"] { width: 53%; }
.dib-audio-progress[data-progress="54"] { width: 54%; }
.dib-audio-progress[data-progress="55"] { width: 55%; }
.dib-audio-progress[data-progress="56"] { width: 56%; }
.dib-audio-progress[data-progress="57"] { width: 57%; }
.dib-audio-progress[data-progress="58"] { width: 58%; }
.dib-audio-progress[data-progress="59"] { width: 59%; }
.dib-audio-progress[data-progress="60"] { width: 60%; }
.dib-audio-progress[data-progress="61"] { width: 61%; }
.dib-audio-progress[data-progress="62"] { width: 62%; }
.dib-audio-progress[data-progress="63"] { width: 63%; }
.dib-audio-progress[data-progress="64"] { width: 64%; }
.dib-audio-progress[data-progress="65"] { width: 65%; }
.dib-audio-progress[data-progress="66"] { width: 66%; }
.dib-audio-progress[data-progress="67"] { width: 67%; }
.dib-audio-progress[data-progress="68"] { width: 68%; }
.dib-audio-progress[data-progress="69"] { width: 69%; }
.dib-audio-progress[data-progress="70"] { width: 70%; }
.dib-audio-progress[data-progress="71"] { width: 71%; }
.dib-audio-progress[data-progress="72"] { width: 72%; }
.dib-audio-progress[data-progress="73"] { width: 73%; }
.dib-audio-progress[data-progress="74"] { width: 74%; }
.dib-audio-progress[data-progress="75"] { width: 75%; }
.dib-audio-progress[data-progress="76"] { width: 76%; }
.dib-audio-progress[data-progress="77"] { width: 77%; }
.dib-audio-progress[data-progress="78"] { width: 78%; }
.dib-audio-progress[data-progress="79"] { width: 79%; }
.dib-audio-progress[data-progress="80"] { width: 80%; }
.dib-audio-progress[data-progress="81"] { width: 81%; }
.dib-audio-progress[data-progress="82"] { width: 82%; }
.dib-audio-progress[data-progress="83"] { width: 83%; }
.dib-audio-progress[data-progress="84"] { width: 84%; }
.dib-audio-progress[data-progress="85"] { width: 85%; }
.dib-audio-progress[data-progress="86"] { width: 86%; }
.dib-audio-progress[data-progress="87"] { width: 87%; }
.dib-audio-progress[data-progress="88"] { width: 88%; }
.dib-audio-progress[data-progress="89"] { width: 89%; }
.dib-audio-progress[data-progress="90"] { width: 90%; }
.dib-audio-progress[data-progress="91"] { width: 91%; }
.dib-audio-progress[data-progress="92"] { width: 92%; }
.dib-audio-progress[data-progress="93"] { width: 93%; }
.dib-audio-progress[data-progress="94"] { width: 94%; }
.dib-audio-progress[data-progress="95"] { width: 95%; }
.dib-audio-progress[data-progress="96"] { width: 96%; }
.dib-audio-progress[data-progress="97"] { width: 97%; }
.dib-audio-progress[data-progress="98"] { width: 98%; }
.dib-audio-progress[data-progress="99"] { width: 99%; }
.dib-audio-progress[data-progress="100"] { width: 100%; }

/* Force categories to top, articles in grid below */
#dib-posts {
  display: block !important;
  width: 100% !important;
}

/* Restructured layout container */
#dib-posts .dib-restructured {
  display: block !important;
  width: 100% !important;
}

/* Categories wrapper - moved to top via JS */
#dib-posts .dib-categories-wrapper {
  display: block !important;
  width: 100% !important;
  margin-bottom: 25px !important;
  float: none !important;
}

#dib-posts .dib-categories-wrapper ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#dib-posts .dib-categories-wrapper a {
  display: inline-block;
  background-color: var(--white-smoke, #f0efef);
  color: #27aae1;
  padding: 6px 14px;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

#dib-posts .dib-categories-wrapper a:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Posts wrapper - article grid */
#dib-posts .dib-posts-wrapper {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* Categories section - full width at top */
#dib-posts .dib-sidebar,
#dib-posts .dib-categories-sidebar,
#dib-posts [class*="sidebar"],
#dib-posts [class*="filter"] {
  display: block !important;
  width: 100% !important;
  float: none !important;
  position: static !important;
  margin-bottom: 20px !important;
}

/* Main content area - full width */
#dib-posts .dib-main,
#dib-posts .dib-content,
#dib-posts [class*="main"],
#dib-posts [class*="right"] {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
}

/* Article grid - restore grid layout for post cards */
#dib-posts .dib-posts-list,
#dib-posts ul.dib-posts,
#dib-posts [class*="posts-list"],
#dib-posts [class*="post-list"],
#dib-posts [class*="articles"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 25px !important;
  width: 100% !important;
}

/* Individual article cards */
#dib-posts .dib-post-item,
#dib-posts .dib-post-card,
#dib-posts [class*="post-item"],
#dib-posts [class*="post-card"] {
  width: 100% !important;
}

/* Responsive - 2 columns on tablet */
@media screen and (max-width: 991px) {
  #dib-posts .dib-posts-list,
  #dib-posts ul.dib-posts,
  #dib-posts [class*="posts-list"],
  #dib-posts [class*="post-list"],
  #dib-posts [class*="articles"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Responsive - 1 column on mobile */
@media screen and (max-width: 767px) {
  #dib-posts .dib-posts-list,
  #dib-posts ul.dib-posts,
  #dib-posts [class*="posts-list"],
  #dib-posts [class*="post-list"],
  #dib-posts [class*="articles"] {
    grid-template-columns: 1fr !important;
  }
}

/* Loading & Error States */
.dib-loading,
.dib-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--dim-grey-2, #5b5d5e);
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
}

.dib-error {
  color: var(--firebrick, #cb2026);
}

/* Header / Navigation Section */
.dib-header,
.dib-nav,
.dib-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px 0;
  font-family: Roboto, Arial, sans-serif;
}

/* News Page Header Controls */
.dib-header,
.dib-controls,
#dib-posts > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 25px;
  padding: 0;
}

/* Style all category-like lists in posts container */
#dib-posts ul:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

#dib-posts ul:first-of-type li {
  list-style: none;
}

#dib-posts ul:first-of-type a {
  display: inline-block;
  background-color: var(--white-smoke, #f0efef);
  color: #27aae1;
  padding: 6px 14px;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

#dib-posts ul:first-of-type a:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Style search inputs */
#dib-posts input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
}

#dib-posts input[type="text"]:focus {
  outline: none;
  border-color: #27aae1;
}

#dib-posts input[type="submit"],
#dib-posts .dib-search button,
#dib-posts form button {
  padding: 8px 16px;
  background-color: #27aae1;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#dib-posts input[type="submit"]:hover,
#dib-posts .dib-search button:hover,
#dib-posts form button:hover {
  background-color: #1e8fc0;
}

/* Category List */
.dib-categories,
.dib-category-list,
.dib-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.dib-categories li,
.dib-category-list li,
.dib-cats li {
  list-style: none;
}

.dib-categories a,
.dib-category-list a,
.dib-cats a {
  display: inline-block;
  background-color: var(--white-smoke, #f0efef);
  color: #27aae1;
  padding: 6px 14px;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.dib-categories a:hover,
.dib-category-list a:hover,
.dib-cats a:hover,
.dib-categories a.active,
.dib-category-list a.active {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Navigation Arrows - Hidden */
.dib-nav-arrows,
.dib-arrows,
.dib-prev-next,
.dib-prev,
.dib-next,
#dib-posts [class*="arrow"],
#dib-posts [class*="prev"],
#dib-posts [class*="next"] {
  display: none !important;
}

/* Search Button - Hidden */
.dib-search-icon,
.dib-search-toggle,
.dib-search,
.dib-search-submit,
#dib-posts [class*="search"],
#dib-posts form,
#dib-posts input[type="text"],
#dib-posts input[type="submit"] {
  display: none !important;
}

/* Remove default list bullets from any DropInBlog lists */
#dib-posts ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#dib-posts > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

#dib-posts > ul > li {
  list-style: none;
}

#dib-posts > ul > li > a {
  display: inline-block;
  background-color: var(--white-smoke, #f0efef);
  color: var(--dim-grey, #414042);
  padding: 6px 14px;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

#dib-posts > ul > li > a:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Post Grid */
.dib-post-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  padding: 20px 0;
}

/* Individual Post Card */
.dib-post {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 2px 5px #0003;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dib-post:hover {
  box-shadow: 0 7px 7px -3px #00000069;
  transform: translateY(-2px);
}

/* Featured Image - Card Grid View (for post listings only) */
.dib-post .dib-post-featured-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Featured Image - Single Post View (no height restriction) */
.dib-post-single .dib-post-featured-image,
#dib-post-single .dib-post-featured-image,
.dib-single .dib-post-featured-image {
  width: 100%;
  max-height: none !important;
  height: auto !important;
  display: block;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 25px;
  object-fit: unset;
}

/* Single Post Container - Force normal document flow */
#dib-posts .dib-post-single {
  display: block !important;
  position: relative !important;
}

/* Featured Image Container - CRITICAL: override Webflow's inline-block on images */
#dib-posts .dib-post-single p.dib-post-featured-image,
.dib-post-single .dib-post-featured-image,
.dib-post-featured-image {
  display: block !important;
  width: 100% !important;
  margin: 0 0 25px 0 !important;
  padding: 0 !important;
  line-height: 0; /* Remove extra space from inline-block */
}

#dib-posts .dib-post-single p.dib-post-featured-image img {
  display: block !important; /* Override components.css inline-block */
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 6px;
  vertical-align: top !important; /* Override components.css vertical-align: middle */
}

/* Meta text - ensure it stays below image */
#dib-posts .dib-post-single p.dib-meta-text {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 25px 0 !important;
  padding: 0 !important;
  line-height: 1.5;
}

/* Audio player - ensure it stays below meta */
#dib-posts .dib-post-single #dib-audio,
#dib-posts .dib-post-single [id^="dib-audio"] {
  display: block !important;
  margin: 0 0 25px 0 !important;
  width: 100% !important;
}

.dib-img-loading {
  background-color: var(--white-smoke, #f0efef);
}

/* Post Text Content */
.dib-post-text {
  padding: 15px 5px;
}

/* Post Title */
.dib-post-title {
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 10px 0;
  color: #333;
}

.dib-post:hover .dib-post-title,
.dib-highlight {
  color: var(--deep-sky-blue, #27aae1);
}

/* Meta Information */
.dib-meta-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--dim-grey-2, #5b5d5e);
}

.dib-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dib-author-photo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.dib-meta-author {
  font-weight: 500;
}

.dib-meta-date,
.dib-meta-readtime {
  color: var(--dim-grey-2, #5b5d5e);
}

/* Category link in meta area */
.dib-meta-text a,
.dib-meta-text .dib-category-text,
.dib-meta-category,
.dib-post-category {
  color: #27aae1 !important;
}

/* Category Tags */
.dib-category-text {
  display: inline-block;
  background-color: var(--white-smoke, #f0efef);
  color: #27aae1;
  padding: 5px 12px;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.2s, color 0.2s;
}

.dib-category-text:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Search Form */
.dib-search {
  display: flex;
  gap: 8px;
  margin: 0;
  max-width: 300px;
}

.dib-search-text {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
}

.dib-search-text:focus {
  outline: none;
  border-color: var(--deep-sky-blue, #27aae1);
}

.dib-search-submit {
  padding: 10px 20px;
  background-color: var(--white-smoke, #f0efef);
  color: var(--dim-grey, #414042);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
}

.dib-search-submit:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Pagination */
.dib-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  padding: 20px 0;
  font-family: Roboto, Arial, sans-serif;
}

.dib-pagination a,
.dib-pagination span {
  padding: 8px 14px;
  background-color: var(--white-smoke, #f0efef);
  color: var(--dim-grey, #414042);
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.dib-pagination a:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

.dib-pagination .current,
.dib-pagination .dib-page-active {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Single Post View */
.dib-post-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.dib-post-content h1 {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
}

.dib-post-content h2 {
  font-size: 25px;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.dib-post-content h3 {
  font-size: 20px;
  font-weight: 500;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: #333;
}

.dib-post-content p {
  margin-bottom: 1.2em;
}

.dib-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.dib-post-content a {
  color: var(--deep-sky-blue, #27aae1);
  text-decoration: none;
}

.dib-post-content a:hover {
  text-decoration: underline;
}

/* Back link / Read More */
.dib-back-link,
.dib-read-more {
  display: inline-block;
  background-color: var(--white-smoke, #f0efef);
  color: var(--dim-grey, #414042);
  padding: 8px 16px;
  border-radius: 5px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  margin-top: 10px;
}

.dib-back-link:hover,
.dib-read-more:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Images in Articles */
.dib-post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 20px 0;
}

.dib-post-content figure {
  margin: 25px 0;
  padding: 0;
}

.dib-post-content figure img {
  margin: 0;
}

.dib-post-content figcaption {
  font-size: 14px;
  color: var(--dim-grey-2, #5b5d5e);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

/* Video Embeds (YouTube, Vimeo, etc.) */
.dib-post-content iframe,
.dib-post-content video {
  max-width: 100%;
  border-radius: 6px;
  margin: 20px 0;
}

.dib-post-content .video-container,
.dib-post-content .dib-video,
.dib-post-content .wp-block-embed,
.dib-post-content .embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  max-width: 700px;
  margin: 25px auto;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.dib-post-content .video-container iframe,
.dib-post-content .dib-video iframe,
.dib-post-content .wp-block-embed iframe,
.dib-post-content .embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
}

/* Standalone iframes (YouTube/Vimeo embeds) */
.dib-post-content > iframe[src*="youtube"],
.dib-post-content > iframe[src*="vimeo"],
.dib-post-content > iframe[src*="player"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Image Gallery */
.dib-post-content .gallery,
.dib-post-content .dib-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 25px 0;
}

.dib-post-content .gallery img,
.dib-post-content .dib-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin: 0;
  cursor: pointer;
  transition: transform 0.2s;
}

.dib-post-content .gallery img:hover,
.dib-post-content .dib-gallery img:hover {
  transform: scale(1.02);
}

/* Blockquotes */
.dib-post-content blockquote {
  border-left: 4px solid var(--deep-sky-blue, #27aae1);
  margin: 25px 0;
  padding: 15px 20px;
  background-color: var(--white-smoke-2, #f8f8f8);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--dim-grey, #414042);
}

.dib-post-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Lists */
.dib-post-content ul,
.dib-post-content ol {
  margin: 20px 0;
  padding-left: 40px;
}

.dib-post-content ul {
  list-style: none !important;
  list-style-type: none !important;
}

.dib-post-content ul li {
  position: relative;
  margin-bottom: 6px !important;
  padding-left: 8px;
  line-height: 1.6 !important;
  list-style: none !important;
  list-style-type: none !important;
}

.dib-post-content ul li::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background-color: #c8102e;
  border-radius: 50%;
}

.dib-post-content ol li {
  margin-bottom: 12px;
  padding-left: 8px;
  line-height: 1.6;
}

/* Audio Player */
.dib-audio-player,
.dib-listen,
[class*="audio-player"],
[class*="listen-article"] {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--white-smoke, #f0efef);
  padding: 12px 16px;
  border-radius: 6px;
  margin: 20px 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
}

.dib-audio-player button,
.dib-listen button,
[class*="audio-player"] button {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dib-audio-player audio,
audio {
  height: 36px;
  flex: 1;
}

/* Back to News Link */
.dib-back,
.dib-back-to-news,
[class*="back-to"],
a[href*="news.html"]:not(.nav-item):not(.footer-text) {
  display: inline-block;
  color: var(--deep-sky-blue, #27aae1);
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 20px;
}

.dib-back:hover,
.dib-back-to-news:hover,
[class*="back-to"]:hover {
  text-decoration: underline;
}

/* Related Articles Section */
.dib-related,
.dib-related-posts,
[class*="related-article"],
[class*="related-post"] {
  margin-top: 20px;
  padding-top: 15px;
  border-top: none;
}

.dib-related h2,
.dib-related h3,
.dib-related-posts h2,
.dib-related-posts h3,
[class*="related"] h2,
[class*="related"] h3 {
  font-family: Roboto, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}

.dib-related .dib-post,
.dib-related-posts .dib-post,
[class*="related"] .dib-post {
  max-width: 350px;
}

/* Social Media Share Icons */
.dib-share,
.dib-social,
[class*="share-button"],
[class*="social-share"],
[class*="share-icon"] {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.dib-share a,
.dib-social a,
[class*="share-button"] a,
[class*="social-share"] a,
[class*="share-icon"] a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--white-smoke, #f0efef);
  color: var(--dim-grey, #414042);
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.dib-share a:hover,
.dib-social a:hover,
[class*="share-button"] a:hover,
[class*="social-share"] a:hover {
  background-color: var(--deep-sky-blue, #27aae1);
  color: #fff;
}

/* Social Icons - Size Fix */
.dib-share svg,
.dib-social svg,
[class*="share"] svg,
[class*="social"] svg,
#dib-posts svg {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.dib-share img,
.dib-social img,
[class*="share"] img,
[class*="social"] img {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

/* Article Header Meta */
.dib-article-meta,
.dib-post-meta,
[class*="post-meta"],
[class*="article-meta"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--dim-grey-2, #5b5d5e);
}

/* Video Thumbnail with Play Button */
[class*="video-thumbnail"],
[class*="video-preview"],
.dib-video-thumb {
  position: relative;
  cursor: pointer;
}

[class*="video-thumbnail"] img,
[class*="video-preview"] img,
.dib-video-thumb img {
  width: 100%;
  border-radius: 6px;
}

[class*="play-button"],
[class*="play-icon"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(39, 170, 225, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== AUDIO PLAYER ===== */
#dib-audio {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 25px 0;
  font-family: Roboto, Arial, sans-serif;
}

.dib-audio-element {
  display: none !important;
}

#dib-audio .dib-audio-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

#dib-audio .dib-audio-progress-container {
  flex: 1 !important;
  min-width: 60px !important;
  margin-left: 4px !important;
}

#dib-audio .dib-audio-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

/* Play/Pause button */
.dib-audio-play-pause {
  background-color: #c8102e;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.3);
}

.dib-audio-play-pause:hover {
  background-color: #a00d25;
  transform: scale(1.05);
}

.dib-audio-play-pause svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

/* Hide visualizer and text label */
.dib-audio-visualizer,
.dib-audio-text {
  display: none;
}


/* Skip buttons */
.dib-audio-skip-back,
.dib-audio-skip-forward {
  background-color: #495057;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
}

.dib-audio-skip-back:hover,
.dib-audio-skip-forward:hover {
  background-color: #343a40;
  transform: scale(1.05);
}

.dib-audio-skip-back svg,
.dib-audio-skip-forward svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

/* Speed button */
.dib-audio-speed {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 4px 8px !important;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: #495057;
  transition: all 0.2s ease;
  min-width: 36px !important;
  flex-shrink: 0 !important;
  text-align: center;
}

.dib-audio-speed:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

/* Time display */
.dib-audio-time-remaining {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 4px 8px !important;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  min-width: 45px !important;
  flex-shrink: 0 !important;
  text-align: center;
  cursor: default;
}

/* Progress bar */
.dib-audio-progress-container {
  height: 8px !important;
  background-color: #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin: 0 !important;
}

.dib-audio-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c8102e 0%, #e63950 100%);
  border-radius: 4px;
  position: relative;
  transition: width 0.1s ease;
}

.dib-audio-drag-handle {
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-color: #c8102e;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
}

.dib-audio-drag-handle:hover {
  transform: translateY(-50%) scale(1.2);
}

/* Disclaimer text - hidden */
.dib-audio-disclaimer {
  display: none !important;
}

.dib-audio-disclaimer svg {
  width: 12px;
  height: 12px;
  fill: #6c757d;
  flex-shrink: 0;
}

.dib-audio-disclaimer a {
  color: #c8102e;
  text-decoration: none;
}

.dib-audio-disclaimer a:hover {
  text-decoration: underline;
}

/* Generating state */
.dib-audio-generating {
  display: none;
}

/* Buffering animation */
.dib-audio-buffering .dib-audio-progress {
  background: linear-gradient(90deg, #c8102e 0%, #e63950 50%, #c8102e 100%);
  background-size: 200% 100%;
  animation: buffering 1.5s ease-in-out infinite;
}

@keyframes buffering {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== SHARE BUTTONS ===== */
.dib-sharing,
.dib-sharing-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 25px 0;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

.dib-share-link,
.dib-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
  border: none;
  cursor: pointer;
}

.dib-share-link:hover,
.dib-share-button:hover {
  transform: scale(1.1);
}

.dib-share-facebook {
  background-color: #1877f2;
  color: #fff;
}

.dib-share-twitter {
  background-color: #000;
  color: #fff;
}

.dib-share-linkedin {
  background-color: #0a66c2;
  color: #fff;
}

.dib-share-whatsapp {
  background-color: #25d366;
  color: #fff;
}

.dib-share-telegram {
  background-color: #0088cc;
  color: #fff;
}

.dib-share-email {
  background-color: var(--dim-grey, #414042);
  color: #fff;
}

.dib-share-icon,
.dib-share-icon-solid {
  width: 18px;
  height: 18px;
}

.dib-share-button-small {
  width: 32px;
  height: 32px;
}

.dib-share-button-small .dib-share-icon {
  width: 14px;
  height: 14px;
}

/* ===== BACK TO NEWS LINK ===== */
.dib-post-back-link,
.dib-post-back-link-bottom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--deep-sky-blue, #27aae1);
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin: 10px 0;
  transition: color 0.2s;
}

.dib-post-back-link:hover,
.dib-post-back-link-bottom:hover {
  color: var(--dark-slate-blue, #0a4e8d);
  text-decoration: underline;
}

/* Hide any CSS-generated arrows - HTML already has arrow */
.dib-post-back-link::before,
.dib-post-back-link::after {
  content: none !important;
  display: none !important;
}

/* ===== TABLE OF CONTENTS ===== */
.dib-toc {
  background-color: var(--white-smoke, #f0efef);
  border-radius: 6px;
  padding: 6px 12px !important;
  margin: 15px 0;
  width: 100%;
  box-sizing: border-box;
  display: block !important;
  text-align: left !important;
}

.dib-toc > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.dib-toc h3,
.dib-toc h4 {
  font-family: Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  color: var(--dim-grey, #414042);
}

.dib-toc ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
}

.dib-toc li {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dib-toc li:not(:last-child)::after {
  content: " | ";
  color: #999;
}

.dib-toc a {
  color: var(--deep-sky-blue, #27aae1);
  text-decoration: none;
  font-size: 13px;
}

.dib-toc a:hover {
  text-decoration: underline;
}

/* ===== FAQ SECTION ===== */
.dib-faq {
  margin: 30px 0;
}

.dib-faq-heading {
  font-family: Roboto, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #333;
}

.dib-faq-item {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}

.dib-faq-item-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--white-smoke, #f0efef);
  cursor: pointer;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 500;
  color: var(--dim-grey, #414042);
  transition: background-color 0.2s;
}

.dib-faq-item-label:hover {
  background-color: #e5e5e5;
}

.dib-faq-item-label::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  color: var(--deep-sky-blue, #27aae1);
}

.dib-faq-item.open .dib-faq-item-label::after {
  content: "−";
}

.dib-faq-item-content {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}

.dib-faq-item.open .dib-faq-item-content {
  padding: 15px 20px;
  max-height: 500px;
}

/* ===== RELATED POSTS ===== */
.dib-related,
.dib-related-posts {
  margin-top: 20px;
  padding-top: 15px;
  border-top: none;
}

.dib-related h2,
.dib-related h3,
.dib-related-posts h2,
.dib-related-posts h3 {
  font-family: Roboto, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}

.dib-related-post {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px #0003;
  transition: box-shadow 0.2s, transform 0.2s;
  max-width: 350px;
  margin-bottom: 20px;
}

.dib-related-post:hover {
  box-shadow: 0 7px 7px -3px #00000069;
  transform: translateY(-2px);
}

.dib-related-post .dib-post-featured-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.dib-related-post .dib-post-featured-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center center;
}

.dib-related-post .dib-post-text {
  padding: 15px;
}

.dib-related-post .dib-post-title,
.dib-post-title-link {
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.dib-related-post:hover .dib-post-title,
.dib-post-title-link:hover {
  color: var(--deep-sky-blue, #27aae1);
}

.dib-post-date,
.dib-post-readtime {
  font-size: 13px;
  color: var(--dim-grey-2, #5b5d5e);
}

/* ===== CUSTOM BLOCKS ===== */
.dib-custom-block {
  background-color: var(--white-smoke-2, #f8f8f8);
  border-left: 4px solid var(--deep-sky-blue, #27aae1);
  padding: 20px;
  margin: 25px 0;
  border-radius: 0 6px 6px 0;
}

/* ===== FROALA EDITOR CLASSES ===== */
.fr-fil {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

.fr-fir {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}

.fr-dib {
  display: block;
  margin: 20px auto;
}

.fr-draggable {
  user-select: none;
}

/* ===== DIALOG/MODAL ===== */
dialog {
  border: none;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  padding: 30px;
  max-width: 500px;
}

dialog::backdrop {
  background-color: rgba(0,0,0,0.5);
}

/* ===== PLATFORM CLASS ===== */
.dib-platform-webflow {
  font-family: Roboto, Arial, sans-serif;
}

/* ===== ARTICLE CONTENT FIXES ===== */

/* Featured/Hero Image at top of article - prevent overlap */
.dib-post-content > img:first-of-type,
.dib-post-content > p:first-of-type > img,
.dib-post-content img.fr-dib,
.dib-post-content img[style*="display: block"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 25px 0;
  float: none !important;
  clear: both;
}

/* Clear floats after images */
.dib-post-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Fix bullet points in articles - Red custom bullets */
.dib-post-content ul {
  list-style: none !important;
  padding-left: 40px !important;
  margin: 20px 0;
}

.dib-post-content ul li {
  list-style: none !important;
  list-style-type: none !important;
  margin-bottom: 6px !important;
  display: list-item !important;
  position: relative;
  padding-left: 8px;
  line-height: 1.6 !important;
}

.dib-post-content ul li p,
.dib-post-content ul li span {
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dib-post-content ul li::before {
  content: '' !important;
  position: absolute !important;
  left: -18px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background-color: #c8102e !important;
  border-radius: 50%;
}

.dib-post-content ol {
  list-style: decimal !important;
  padding-left: 25px !important;
  margin: 20px 0;
}

.dib-post-content ol li {
  list-style: decimal !important;
  margin-bottom: 8px;
  display: list-item !important;
}

/* Video container - center and make clickable */
.dib-post-content .fr-video,
.dib-post-content [class*="video-wrapper"],
.dib-post-content [class*="video-container"] {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 25px auto;
  text-align: center;
}

.dib-post-content .fr-video iframe,
.dib-post-content [class*="video"] iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}

/* Video thumbnail - center */
.dib-post-content .fr-video img,
.dib-post-content a[href*="youtube"] img,
.dib-post-content a[href*="vimeo"] img,
.dib-post-content a[href*="wistia"] img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  cursor: pointer;
}

/* ===== RELATED ARTICLES FIX - Text BELOW image ===== */
.dib-related-post {
  display: flex !important;
  flex-direction: column !important;
}

.dib-related-post .dib-post-featured-image {
  width: 100% !important;
  height: 180px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  order: 1;
}

.dib-related-post .dib-post-featured-image img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.dib-related-post .dib-post-text {
  position: relative !important;
  background-color: #fff !important;
  padding: 15px;
  order: 2;
}

.dib-related-post .dib-post-title {
  position: relative !important;
  background: transparent !important;
  color: #333 !important;
}

.dib-related-post .dib-meta-text,
.dib-related-post .dib-post-date,
.dib-related-post .dib-post-readtime {
  position: relative !important;
  background: transparent !important;
  color: var(--dim-grey-2, #5b5d5e) !important;
}

/* Responsive */
@media screen and (max-width: 767px) {
  /* Mobile padding on sides */
  #dib-posts,
  .dib-post-single,
  .dib-post-content,
  .dib-related,
  .dib-related-posts {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .dib-post-wrap {
    grid-template-columns: 1fr;
  }

  .dib-post-content h1 {
    font-size: 28px;
  }

  .dib-post-content h2 {
    font-size: 22px;
  }

  /* Audio player on mobile - progress bar goes below */
  #dib-audio .dib-audio-controls {
    flex-wrap: wrap !important;
  }

  #dib-audio .dib-audio-progress-container {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    order: 99 !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
  }
}