/*
Theme Name: soundboard Theme
Theme URI: https://soundboardmp3.com
Author: soundboardmp3.com
Description: designed by soundboardmp3.com
Version: 1.0
License: GPL-2.0+
Text Domain: soundboardmp3
*/

/* Import a clean, modern font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");

:root {
  /* ————————————————————————————
     Primary & Secondary
  ———————————————————————————— */

  /* Primary hue: friendly, audio-related green (for buttons, headers) */
  --color-primary: #1db954;

  /* Secondary tone: deep blue-gray (for header/footer and sub-buttons, links) */
  --color-secondary: #263238;

  /* ————————————————————————————
     Accent & Highlight
  ———————————————————————————— */
  /* Accent: warm orange (for call-to-action, icons) */
  --color-accent: #ff6f00;

  /* Highlight: soft sky blue (for subtle borders, toggles) */
  --color-highlight: #4dd0e1;

  /* ————————————————————————————
     Backgrounds & Surfaces
  ———————————————————————————— */
  /* Main page background: very light gray for readability */
  --color-bg: #f9f9f9;

  /* Surface (cards, modals): pure white for strong contrast */
  --color-surface: #ffffff;

  /* ————————————————————————————
     Text & Muted
  ———————————————————————————— */
  /* Primary text: dark charcoal for maximum readability */
  --color-text: #212121;

  /* Muted/text fallback: mid gray (for secondary text, placeholders) */
  --color-muted: #757575;
}

html,
body {
  font-family: "Poppins", sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.background {
  background-image: linear-gradient(
    135deg,
    #ffffff 0%,
    #f0f4f8 50%,
    #ffffff 100%
  );
  background-repeat: no-repeat;
  background-size: cover;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#primaryNav.show {
  border-top: 1px solid var(--color-highlight);
  margin-top: 10px;
  background-color: var(--color-surface);
}

.h1,
h1 {
  color: var(--color-primary) !important;
  font-weight: 700;
}

.h2,
h2 {
  font-size: calc(1rem + 0.9vw) !important;
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--color-secondary);
}

.h2:after,
h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px;
}

.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a {
  padding: 5px !important;
  color: var(--color-primary);
}

.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-body {
  padding: 10px !important;
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-accent);
}

.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-body p {
  margin: 0;
  color: var(--color-text);
}

button {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#loveToast {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-highlight);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.single-content article img {
  vertical-align: baseline;
  border: 1px solid var(--color-highlight);
  border-radius: 4px;
}

#article-content img:hover {
  cursor: pointer;
  transform: scale(1.01);
  transition: transform 0.2s ease;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
  font-size: 2rem;
  margin: 1rem 0;
}

.social-icons a {
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-icons a:hover {
  transform: scale(1.1);
  color: var(--color-primary);
}

.like-button {
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #ff4081;
  color: var(--color-surface);
  border: none;
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease;
}

.like-button:hover {
  background: #f50057;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(99px, 1fr));
  gap: 1.25rem;
  max-width: var(--max-width);
  margin: auto;
}

.social-icons a[aria-label="Facebook"] i {
  color: #1877f2;
}

.social-icons a[aria-label="Pinterest"] i {
  color: #e60023;
}

.social-icons a[aria-label="YouTube"] i {
  color: #ff0000;
}
.social-icons a[aria-label="myspace"] i {
	width: 100px;
    height: 22px;
	vertical-align: middle;
	display: inline-block;
    text-indent: -9999px;
}
.social-icons a[aria-label="myspace"] i.svg {
    background-position: center;
    background-size: cover;
}

.social-icons a[aria-label="Instagram"] i {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.story-content-overlay__author,
.story-content-overlay__date {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  #article-content img {
    max-width: 300px;
  }
}

#lightboxCarousel img.zoomed {
  transform: scale(2);
  cursor: zoom-out;
}
#lightboxCarousel img {
  transition: transform 0.3s ease;
}

.zoom-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  overflow: scroll;
}
.zoom-container img.zoomed {
  transform: scale(2);
  cursor: zoom-out;
}
.zoom-container img {
  transition: transform 0.3s ease;
  transform-origin: center center;
}
.site-header {
  background-color: antiquewhite;
}
footer,
.site-footer {
  background-color: var(--color-secondary);
  color: var(--color-surface);
}

.instant {
  position: relative;
  vertical-align: top;
  width: 94px;
  text-align: center;
  word-wrap: break-word;
}

.small-button-background {
  width: 86px;
  height: 84px;
  margin-top: 3px;
  margin-left: 3px;
  position: absolute;
}

.small-button {
  width: 94px;
  height: 89px;
  position: absolute;
  background: url(https://soundboardmp3.com/wp-content/uploads/2025/06/transparent_button_small_sprite.png)
    no-repeat;
  background-position: -5px -5px;
  border: 0;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.loader {
  display: none;
  position: absolute;
  top: -2px;
  left: -1px;
  border: 5px solid transparent;
  border-top: 5px solid #747474;
  border-radius: 50%;
  width: 94px;
  height: 94px;
  animation: spin 2s linear infinite;
}

.small-button-shadow {
  width: 94px;
  height: 89px;
  margin-bottom: 5px;
  background: url(https://soundboardmp3.com/wp-content/uploads/2025/06/transparent_button_small_shadow.png)
    no-repeat;
}

.instant-link {
  text-decoration: underline;
}
.instant-link,
.instant-p {
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em;
  max-height: 2.4em;
}
.result-page-instant-sharebox {
  margin: 5px 0 0 0;
}
.small-button:active {
  background: url(https://soundboardmp3.com/wp-content/uploads/2025/06/transparent_button_small_sprite.png)
    no-repeat;
  background-position: -109px -5px;
}

.action-btn {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 1.25rem;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: color 0.2s;
}
.action-btn:hover {
  color: var(--color-primary);
}
.love-btn.loved i {
  color: var(--color-accent);
}
.posts-grid > .instant:nth-child(4n+1) .small-button-background {
  background-color: #FF6F00;
}
.posts-grid > .instant:nth-child(4n+2) .small-button-background {
  background-color: #1DB954;
}
.posts-grid > .instant:nth-child(4n+3) .small-button-background {
  background-color: #4DD0E1;
}
.posts-grid > .instant:nth-child(4n+4) .small-button-background {
  background-color: #FF4081;
}
.myspace-logo.svg{
	background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMDAgMzgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAzODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPGVsbGlwc2Ugc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGN4PSIyLjcxNCIgY3k9IjE1LjgxMyIgcng9IjIuMjg1IiByeT0iMi4yNzYiLz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMi43MTQsMTguNjA5Yy0xLjQ0OSwwLTIuNTExLDEuMjcxLTIuNTExLDIuNTg1djAuODg0bDAsMGMwLDAuMTI1LDAuMTAyLDAuMjI4LDAuMjI4LDAuMjI4aDAuMDgxDQoJCQkJaDQuNDAzaDAuMDgxYzAuMTI2LDAsMC4yMjktMC4xMDMsMC4yMjktMC4yMjhsMCwwdi0wLjg4NEM1LjIyNSwxOS44OCw0LjE2MywxOC42MDksMi43MTQsMTguNjA5eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPGVsbGlwc2Ugc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGN4PSI4LjY1NCIgY3k9IjE1LjA5MSIgcng9IjIuNTM5IiByeT0iMi41MjkiLz4NCgkJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNOC42NTQsMTguMTk3Yy0xLjYxLDAtMi43OSwxLjQxMy0yLjc5LDIuODczdjAuOTgzbDAsMGMwLDAuMTM5LDAuMTE0LDAuMjUzLDAuMjU0LDAuMjUzaDAuMDkNCgkJCQlIMTEuMWgwLjA5YzAuMTQsMCwwLjI1NC0wLjExNCwwLjI1NC0wLjI1M2wwLDBWMjEuMDdDMTEuNDQzLDE5LjYxLDEwLjI2MywxOC4xOTcsOC42NTQsMTguMTk3eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPGVsbGlwc2Ugc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGN4PSIxNS4xODgiIGN5PSIxNC4yOSIgcng9IjIuODIiIHJ5PSIyLjgxIi8+DQoJCQk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTE1LjE4OCwxNy43NDFjLTEuNzg5LDAtMy4xLDEuNTctMy4xLDMuMTkydjEuMDkybDAsMGMwLDAuMTU0LDAuMTI2LDAuMjgxLDAuMjgyLDAuMjgxaDAuMWg1LjQzNg0KCQkJCWgwLjFjMC4xNTYsMCwwLjI4Mi0wLjEyNywwLjI4Mi0wLjI4MWwwLDB2LTEuMDkyQzE4LjI4OCwxOS4zMTEsMTYuOTc2LDE3Ljc0MSwxNS4xODgsMTcuNzQxeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjAuMTgyLDExLjgyNGgyLjQwOXYxLjU5MmMwLjY3Ny0wLjkzNiwxLjU5My0xLjgxMiwzLjIwNS0xLjgxMmMxLjUxMywwLDIuNTY4LDAuNzM2LDMuMTI1LDEuODUyDQoJCWMwLjg1Ni0xLjExNSwxLjk3MS0xLjg1MiwzLjU2My0xLjg1MmMyLjI4OSwwLDMuNjgzLDEuNDUzLDMuNjgzLDQuMDIxdjYuNzA4aC0yLjQwOXYtNS45NzJjMC0xLjY3My0wLjc3Ny0yLjU2OS0yLjEzLTIuNTY5DQoJCWMtMS4zMTQsMC0yLjI0OSwwLjkxNy0yLjI0OSwyLjYwOHY1LjkzMkgyNi45N3YtNS45OTJjMC0xLjYzMi0wLjc5Ni0yLjU0OS0yLjEzLTIuNTQ5Yy0xLjMzNCwwLTIuMjUsMC45OTYtMi4yNSwyLjYyOHY1LjkxMg0KCQloLTIuNDA5VjExLjgyNHoiLz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTU1LjkzLDExLjgyNGgyLjQwOXYxLjc1MWMwLjc3Ni0xLjA5NSwxLjg3MS0xLjk3MSwzLjU2My0xLjk3MWMyLjQ4OSwwLDQuODk3LDEuOTcxLDQuODk3LDUuNDU1DQoJCXYwLjA0YzAsMy40ODMtMi4zODksNS40NTQtNC44OTcsNS40NTRjLTEuNzMyLDAtMi44MjctMC44NzUtMy41NjMtMS44NTF2NS44MTlINTUuOTNWMTEuODI0eiBNNjQuMzUxLDE3LjA5OXYtMC4wNA0KCQljMC0yLjAzMS0xLjM3NC0zLjM2NC0zLjAwNy0zLjM2NGMtMS42MzIsMC0zLjA2NSwxLjM1NC0zLjA2NSwzLjM2NHYwLjA0YzAsMi4wMzEsMS40MzMsMy4zNjQsMy4wNjUsMy4zNjQNCgkJQzYyLjk5NiwyMC40NjMsNjQuMzUxLDE5LjE2OSw2NC4zNTEsMTcuMDk5eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNzguNzkzLDIyLjMzaC0yLjQwOXYtMS42MjdjLTAuNzM2LDAuOTc2LTEuODMxLDEuODUxLTMuNTYzLDEuODUxDQoJCWMtMi41MDksMC00Ljg5OC0xLjk3MS00Ljg5OC01LjQ1NHYtMC4wNGMwLTMuNDg0LDIuNDA5LTUuNDU1LDQuODk4LTUuNDU1YzEuNjkyLDAsMi43ODcsMC44NzYsMy41NjMsMS45NzF2LTEuNzUxaDIuNDA5VjIyLjMzeg0KCQkgTTczLjM3OSwyMC40NjNjMS42MzMsMCwzLjA2NS0xLjMzNCwzLjA2NS0zLjM2NHYtMC4wNGMwLTIuMDExLTEuNDMzLTMuMzY0LTMuMDY1LTMuMzY0Yy0xLjYzMywwLTMuMDA2LDEuMzM0LTMuMDA2LDMuMzY0djAuMDQNCgkJQzcwLjM3MywxOS4xNjksNzEuNzI2LDIwLjQ2Myw3My4zNzksMjAuNDYzeiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNODAuMDA2LDE3LjEzOXYtMC4wNGMwLTIuOTg2LDIuMzA5LTUuNDk0LDUuNDU0LTUuNDk0YzEuOTkxLDAsMy4yMjUsMC43MzYsNC4yLDEuODEybC0xLjQ5MywxLjYxMg0KCQljLTAuNzM2LTAuNzc2LTEuNTEzLTEuMzE0LTIuNzI3LTEuMzE0Yy0xLjc1MiwwLTMuMDI2LDEuNTEzLTMuMDI2LDMuMzQ1djAuMDRjMCwxLjg3MSwxLjI5NCwzLjM4NCwzLjE0NSwzLjM4NA0KCQljMS4xMzUsMCwxLjk3MS0wLjUzNywyLjcyNy0xLjMxNGwxLjQ1MywxLjQzM2MtMS4wMzUsMS4xNTUtMi4yNDksMS45NzEtNC4zLDEuOTcxQzgyLjMxNSwyMi41NzMsODAuMDA2LDIwLjEyNSw4MC4wMDYsMTcuMTM5eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNOTAuMDMxLDE3LjEydi0wLjA0YzAtMy4wMDYsMi4xMy01LjQ3NCw1LjEzNi01LjQ3NGMzLjM0NSwwLDUuMDM2LDIuNjI4LDUuMDM2LDUuNjU0DQoJCWMwLDAuMjE5LTAuMDIsMC40MzgtMC4wNCwwLjY3Nkg5Mi40NGMwLjI1OSwxLjcxMiwxLjQ3MywyLjY2OCwzLjAyNiwyLjY2OGMxLjE3NCwwLDIuMDEtMC40MzgsMi44NDctMS4yNTRsMS40MTQsMS4yNTQNCgkJYy0wLjk5NSwxLjE5NC0yLjM2OSwxLjk3MS00LjMsMS45NzFDOTIuMzgsMjIuNTczLDkwLjAzMSwyMC4zNjQsOTAuMDMxLDE3LjEyeiBNOTcuODE1LDE2LjM0Mw0KCQljLTAuMTU5LTEuNTUzLTEuMDc1LTIuNzY3LTIuNjY4LTIuNzY3Yy0xLjQ3MywwLTIuNTA4LDEuMTM1LTIuNzI3LDIuNzY3SDk3LjgxNXoiLz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojRkZGRkZGOyIgZD0iTTQxLjg0LDI2LjUyMmgtMi4zNTRsMS4yNzctNC4yMjhsLTQuMTk5LTEwLjQ3aDIuNTc0bDIuNzAyLDcuMjI2bDIuMjAyLTcuMjI2aDIuNTQ3TDQxLjg0LDI2LjUyMnoiDQoJCS8+DQoJPGc+DQoJCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNTAuNjU3LDExLjU3NWMtMi4wNjMsMC0zLjc4LDEuMzA5LTMuNzgsMy4yNzN2MC4wNGMwLDEuOTg0LDEuNzY0LDIuNjEzLDMuMjk3LDMuMDQ1DQoJCQljMS4yMTgsMC4zNzMsMi4yMDcsMC42MzIsMi4yMDcsMS40Mzh2MC4wMzljMCwwLjY4OC0wLjQ3OSwxLjA0MS0xLjUsMS4wNDFjLTEuMDQ3LDAtMi4yMzgtMC40MjItMy4zNDUtMS4yNDRsLTAuOTQyLDEuOTE1DQoJCQljMS4yNjIsMC45MjIsMi44MTMsMS40MDUsNC4yMTEsMS40MDVjMi4xNjEsMCwzLjg5OC0xLjE3NSwzLjg5OC0zLjM1NnYtMC4wMzljMC0xLjg2Ni0xLjc0MS0yLjU1NC0zLjI1NC0zLjAyNg0KCQkJYy0xLjIxOC0wLjM5My0yLjI2Ni0wLjcwNy0yLjI2Ni0xLjQ1M3YtMC4wMzljMC0wLjYwOSwwLjQ4My0wLjk4NiwxLjQwNi0wLjk4NmMwLjg1OSwwLDEuODg5LDAuMzY5LDIuODg3LDAuOTczbDAuOTQzLTEuODgNCgkJCUM1My4zMjcsMTIuMDE0LDUxLjkzMiwxMS41NzUsNTAuNjU3LDExLjU3NXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);
}

.navbar-nav .dropdown-toggle::after {
	border:none !important;
}
.navbar-nav .nav-link::after,
.navbar-nav .dropdown-toggle::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #0d6efd;
  transition: width 0.3s ease, left 0.3s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .dropdown-toggle:hover::after{
  width: 100%;
  left: 0;
}