/*
Theme Name:   LyricsRaag
Theme URI:    https://lyricsraag.com
Description:  Default LyricsRaag child theme
Author:       LyricsRaag Developer
Author URI:   https://lyricsraag.com
Template:     generatepress
Version:      0.1
*/
/* open-sans-regular - latin */
/*@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto"),
    url("https://lyricsraag.com/wp-content/themes/lyricsraag-custom/fonts/roboto-v18-latin-regular.woff2")
      format("woff2"),
    url("https://lyricsraag.com/wp-content/themes/lyricsraag-custom/fonts/roboto-v18-latin-regular.woff")
      format("woff");
  font-display: swap;
}
body {
  font-family: "Roboto" !important;
  font-weight: normal;
  font-size: 17px !important;
  color: #1a1a1a !important;
}*/
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("https://lyricsraag.com/wp-content/themes/lyricsraag-custom/fonts/roboto-v18-latin-regular.woff2") format("woff2"),
       url("https://lyricsraag.com/wp-content/themes/lyricsraag-custom/fonts/roboto-v18-latin-regular.woff") format("woff");
  font-display: swap;
}

body {
  font-family: "Roboto" !important;
  font-weight: normal;
  font-size: 16px !important;
  color: #1a1a1a !important;
}
/* external link icon */
a:not([href*="lyricsraag.com"]):not([href^="/"]):not([href^="#"]):not(
    [href^="mailto"]
  ):after {
  content: " ↗️";
}

@media (max-width: 860px) {
  #wps-row {
    width: 100% !important;
  }
}
#wps-tabs.wps-shortcode-wrapper.wps-tabs-classic .wps-tabs-list li {
  width: 50%;
  text-align: center;
}
/* curve related posts*/
img {
  border-radius: 5px;
}
/* style from shortcode*/
.wps-shortcode-wrapper {
  max-width: 100%;
}
.clear {
  clear: both;
}
.clear:before,
.clear:after {
  content: "";
  display: table;
  clear: both;
}
#wps-button.wps-shortcode-wrapper {
  display: inline-block;
  vertical-align: middle;
}
#wps-button.wps-shortcode-wrapper.wps-button-wide {
  width: 100%;
}
#wps-button.wps-shortcode-wrapper a {
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  position: relative;
  transition: all 0.2s;
  -o-transition: all 0.2s;
  -ie-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 10px;
}
#wps-button.wps-shortcode-wrapper a span {
  display: block;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  transition: all 0.2s;
  -o-transition: all 0.2s;
  -ie-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
#wps-button.wps-shortcode-wrapper a span i {
  margin-right: 0.5em;
}
#wps-button.wps-shortcode-wrapper.wps-style-bordered a {
  border-width: 2px;
}
#wps-alert.wps-shortcode-wrapper {
  position: relative;
  padding: 0.75rem 1.25rem !important;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  line-height: 1.4;
}
#wps-alert.wps-shortcode-wrapper.wps-alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}
#wps-row.wps-shortcode-wrapper {
  clear: both;
  margin: 0 -15px 0;
  width: calc(100% + 30px);
  max-width: initial;
}
/*#wps-row.wps-shortcode-wrapper .wps-column {
  padding: 0 15px 0 15px !important;
}*/

.wps-column.wps-shortcode-wrapper {
  display: block;
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.wps-column.wps-shortcode-wrapper.centered {
  text-align: left !important;
}
.wps-column.wps-shortcode-wrapper.wps-column-size-1-2 {
  width: 50%;
}
.wps-column.wps-shortcode-wrapper.wps-column-size-1-2:nth-of-type(2n + 1) {
  clear: left;
}
#wps-table.wps-shortcode-wrapper {
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  #wps-table.wps-shortcode-wrapper {
    overflow: auto;}
  /*desktop spacing*/
  div.wps-column-inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
#wps-table.wps-shortcode-wrapper table {
  width: 100% !important;
}
#wps-table td,
#wps-table th,
table th,
table td {
  border: 0;
  padding: 8px;
  border-bottom: 1px #d9d9d9;
  border-style: solid !important;
  font-size: 17px !important;
}
#wps-table table {
  border-collapse: collapse;
  border-width: 0;
}
@media (max-width: 560px) {
/*  #wps-row.wps-shortcode-wrapper .wps-column {
    padding: 0 5px 0 5px !important;
  }*/
  #wps-row.wps-shortcode-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .wps-column {
    width: 100% !important;
    margin-bottom: 1em;
  }
  #wps-button.wps-shortcode-wrapper a span {
    padding-left: 15px !important;
    padding-right: 15px !important;
    line-height: 1 !important;
  }
  #wps-note.wps-shortcode-wrapper {
    margin: 0 0 15px 0;
    line-height: 1.7;
  }
  #wps-note.wps-shortcode-wrapper .wps-note-inner {
    position: relative;
    padding: 40px 30px 35px;
  }
  #wps-note.wps-shortcode-wrapper .wps-note-inner:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 25px solid;
    border-bottom-color: inherit;
    border-right: 25px solid #fff;
  }
  wps-list.wps-shortcode-wrapper ul {
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 0 !important;
  }
  #wps-list.wps-shortcode-wrapper ul li {
    position: relative;
    list-style-type: none !important;
    display: block !important;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 !important;
    padding: 4px 0 4px 2em;
  }
  #wps-list.wps-shortcode-wrapper ul li i {
    position: absolute;
    left: 0;
    top: 5px;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    text-align: center;
  }
}
p.translation {
  color: #575757;
}
.su-post-title {
  font-size: 15px !important;
}
.albums ul {
  list-style: none;
}
.albums a {
  text-decoration: none;
  color: #555;
  display: inline-block;
  width: 100% !important;
}
.albums a:hover {
  color: #f47555;
}
.albums li {
  padding: 10px 0 5px 20px;
  border-style: solid;
  border-width: 1px;
  border-color: #33bcf2;
  margin-bottom: 10px;
}
.widget li {
  list-style-type: none;
  margin-left: 0;
}
/* Hide the stats smiley face image*/
img#wpstats {
  display: none;
}
.rrssb-buttons {
  padding-top: 20px !important;
}
/* youtube thumb*/
.rll-youtube-player {
  margin: 10px 0 10px 0;
}
.flex-video {
  margin-top: -5px;
  margin-bottom: 30px;
  padding-top: 0px !important;
}
/*table alignment*/
/*tbody > tr > :nth-child(1) {
  color: #575757;
  text-align: left;
}
tbody > tr > :nth-child(2) {
  font-weight: 500;
  color: #333;
  text-align: left;
}*/
@media only screen and (max-width: 768px) {
  .wps-column-inner,
  p.paragraphs_outside_lyrics,
  p.pol,
  .entry-content {
    padding: 0 5px; /* Sets top and bottom padding to 0, left and right to 5px */
  }
}
/* Responsive YouTube iframe 16:9*/
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  margin-bottom: 2rem;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*more_songs_ list links*/
ul.more_songs_links {
  list-style-type: none;
}
li.more_songs_icon:before {
  content: "\f001";
  /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em;
  /* same as padding-left set on li */
  width: 1.3em;
  /* same as padding-left set on li */
  color: #a4a4a4;
}
.by-singer {
  display: block;
  font-size: 14px;
  color: #a4a4a4;
}

/*table overflow*/
@media only screen and (min-width: 700px) {
/*  div.table_overflow {
    height: 200px;
    overflow: auto;
  }*/
  #wps-table.wps-shortcode-wrapper {
    overflow: auto;
    font-size: 14px;
  }
/*  #wps-row.wps-shortcode-wrapper .wps-column {
    padding: 0 15px 0 5px !important;
  }*/
  div.table_square {
    height: 400px;
    overflow: auto;
  }
}
/* larger font size for lyrics section*/
/*.wps-column-inner, p .translated {
  font-size: 18px;
}*/

/*FAQs CSS*/
#faqA1,
#faqA2,
#faqA3,
#faqA4,
#faqA5,
#faqA6 {
  line-height: normal;
  margin-bottom: 10px;
}
.faqs_container {
  padding-left: 10px;
}
#primary-navigation.primary-navigation {
  height: 54px;
}
/* custom posts image, paragraphs*/
.paragraph_desc {
  padding: 10px 15px 10px 15px;
  text-align: justify;
  display: block;
}
.image_custom_class {
  display: block;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}
/* custom posts row column*/
.column {
  float: left;
  width: 45%;
  margin-right: 5%;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
  .column > p {
    padding: 0 15px 0 15px;
  }
}
/*Description after video*/
#video-description {
  padding-top: 20px;
}
/*changed non translated text font color*/
#wps-tabs.wps-shortcode-wrapper .wps-tabs-content .wps-tab-text {
  color: #000;
  font-weight: 400;
}
/*Single track non film Table replaced with list*/
.w3-large {
  font-size: 18px !important;
}
.w3-ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.w3-ul li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}
.w3-ul li:last-child {
  border-bottom: none;
}
.w3-small {
  font-size: 14px !important;
  color: #404040;
}
/*Translation paragraph color*/
p.translation {
  color: #575757;
  border-bottom: 1px solid #ddd;
  padding: 10px 0 10px 0;
}
.no_translation {
  font-weight: 600;
  color: #333333 !important;
}

/*No side border to tables*/
table {
  border: none !important;
}
/*featured image centered*/
/*.wp-post-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none !important;
}*/
h2.h2_middle {
  font-size: 22px;
  margin: 2.5rem; 
  text-align: center;
} 
/*picture.alignnone img {
    display: block;  
    margin-left: auto; 
    margin-right: auto; 
}*/
picture.aligncenter.size-full.wp-image-152908 {
  display: flex;
  justify-content: center;
}

picture.aligncenter.size-full.wp-image-152908 img {
  display: block;
  max-width: 100%;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation {
    padding: 40px;
  }
}
@media (max-width: 768px) {
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .separate-containers .paging-navigation,
  .one-container .site-content,
  .inside-page-header,
  .w3-ul,
  .w3-card-4 {
    padding: 10px;
  }
}
ul.more_songs_links {
  margin: 0px;
}
h1 {
  font-size: 22px;
}
/*sidebar recent widget links indent*/
ul li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
/* All links*/
a:link {
  text-decoration: none;
}
/*footer about fixed*/
small {
  font-size: 13px !important;
}
#text-10 > div:nth-child(1) {
  text-align: justify;
}

/* Target the first column cells for the light theme */
#lyric_table tbody tr td:first-child {
  color: #595959;
  /* Darker gray for better contrast on white background */
}
/*Search bar hide on desktop*/
/*@media only screen and (min-width: 768px) {
  .mobile-search {
    visibility: hidden;
  }
}
@media only screen and (max-width: 768px) {
  .example {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  input.search-field {
    border: 1px solid #b5b5b5;
    background: #ebebeb;
  }
  form.example button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #06597a !important;
    color: #fff;
    font-size: 18px;
    border: 1px solid grey;
    border-left: none;
    cursor: pointer;
  }
  form.example button:hover {
    background: #0b7dda;
  }
  form.example::after {
    content: "";
    clear: both;
    display: table;
  }*/
  /*table padding fixed on mobile*/
  #wps-table {
    padding-top: 20px !important;
  }
  /*Faqs side padding mobile*/
  .w3-ul,
  .w3-card-4 ul {
    padding: 0 10px 0 10px;
  }
}
/*Recent posts extended*/
.rpwe-block ul li {
  margin-bottom: 0.5em;
}
.rpwe-block ul {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.rpwe-block li {
  list-style-type: none;
}
.rpwe-block a {
  text-decoration: none;
}
.rpwe-block h3 {
  padding: 0 0 5px 0px !important;
  border-style: none;
  font-size: 17px !important;
}
h3.rpwe-title {
  padding: 0 0 5px;
}
tbody > tr > :first-child {
  color: inherit;
}
/* Default styles for the table */
#lyric_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  /* Add some space at the bottom */
}
#lyric_table th,
#lyric_table td {
  padding: 8px;
  text-align: left;
}

/* Responsive styles for mobile devices */
@media (max-width: 600px) {
  #lyric_table th,
  #lyric_table td {
    width: 50%;
    box-sizing: border-box;
  }
  #lyric_table th {
    text-align: center;
    /* Optional: Center align header text on small screens */
  }
  #lyric_table tr:nth-child(even) {
    background-color: #f9f9f9;
    /* Highlight alternate rows */
  }
  #wps-table td,
  #wps-table th,
  table th,
  table td {
    border-bottom: 0;
  }
}
/*margin for breadcrumbs*/
.entry-title {
  margin-bottom: 20px;
}
/*Paragraphs outside the lyrics*/
.pol,
.pol_out {
  text-align: justify;
}
/* CSS code for making Bootstrap table responsive */
/* Add the CSS class 'table-responsive' to the table element to make it responsive */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Set the font size of the table headers and cells for different screen sizes */
/* You can adjust the font size values to suit your needs */
@media (max-width: 576px) {
  /* Extra small screens */
  .table-responsive th,
  .table-responsive td {
    font-size: 12px;
  }
}
@media (min-width: 577px) and (max-width: 768px) {
  /* Small screens */
  .table-responsive th,
  .table-responsive td {
    font-size: 14px;
  }
}
@media (min-width: 769px) and (max-width: 992px) {
  /* Medium screens */
  .table-responsive th,
  .table-responsive td {
    font-size: 17px;
  }
}
@media (min-width: 993px) {
  /* Large screens and above */
  .table-responsive th,
  .table-responsive td {
    font-size: 16px;
  }
}
/*lyrics in english page tiles fixed*/
.card-title,
.singer_name_homepage {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.singer_name_homepage,
.badge {
  display: block;
  font-size: 14px;
}
.badge {
  float: right;
  padding-top: 5px;
}
/*category icon below post*/
.cat-links,
.tags-links,
.comments-link {
  margin-left: 20px;
}
/*footer widgets padding*/
div.textwidget {
  padding: 20px;
}

/*New Related Songs*/
.related-songs-section,
.rpwe-block {
  margin: 0 0 20px;
  padding: 0;
}
.related-songs-list,
.rpwe-ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.related-song-item,
.rpwe-li,
.rpwe-clearfix {
  display: block;
  padding: 10px 10px;
  margin: 0;
  border-bottom: 1px solid rgba(6, 89, 122, 0.2);
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow: hidden;
  position: relative;
}
.related-song-item a,
.rpwe-li a,
.rpwe-clearfix a {
  display: block;
  margin: 0;
  text-decoration: none;
  font-size: 17px;
  line-height: 1.5;
  width: 100%;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.related-song-link a{
  font-weight: 700;
}
.related-song-item:hover,
.rpwe-li:hover,
.rpwe-clearfix:hover {
  background-color: rgba(6, 89, 122, 0.2);
}
.related-song-item a:hover,
.rpwe-li a:hover,
.rpwe-clearfix a:hover {
  color: #06597a;
}
.related-song-item:last-child {
  border-bottom: none;
}
/*.heading_more_songs,
h3.songdetails,
h2.widget-title,
caption.table_caption,
.caption {
  font-size: 1.6rem;       
  font-weight: bold;       
  margin-bottom: 10px;    
  padding: 10px;      
  border-radius: 10px;
}*/
/**/
/*translation fonts defined*/
p.no_translation {
  line-height: 1.5;
  color: #1a1a1a;
  font-size: 17px;
  font-family: "Roboto";
  font-weight: 400;
}
/* Target the translated text within each paragraph */
/* p .translated, */
/*span.oet:nth-of-type(even),
span.lyrics_translation:nth-of-type(even) {
  color: #595959;
}*/
.eng_translation{
  color: #595959;
/*line-height: 2;*/
}
.original {
  font-size: 17px;
}
div.wps-column-inner p span.original,
div.wps-column-inner p span.translated,.heading_more_songs, h3.songdetails, h2.widget-title, caption.table_caption,.caption, p span.oet,span.oet:nth-of-type(even),
span.lyrics_translation:nth-of-type(even), span.oet, p.tr_oet{
background-color: #f5fcff;
  color: #04364d;
}
div.wps-column-inner p span.original,
div.wps-column-inner p span.translated, p span.oet, span.oet, .tr_oet{
  padding: 4px 10px; /* Increased padding for better spacing */
  display:inline-block;
  width: 100%;
  border-radius: 5px;
  box-sizing: border-box;
  vertical-align: top; /* Improved alignment with text */
  line-height: revert;
}
span.original,span.oet:nth-of-type(odd),
span.lyrics_translation:nth-of-type(odd), p.tr_oet:nth-of-type(odd) {
  font-weight: bold;
}

/*OE lyrics translation paragraph Light mode*/
/*p.tr_oet:nth-of-type(even) {
  font-weight: bold;
  color: #595959;
  border-bottom: 1px solid #ddd;
  padding: 10px 0 10px 0;
}*/
/**/
caption {
  text-align: left;
}
/*sidebar links*/
.rpwe-title a, ul.rpwe-ul > li.rpwe-li > h3.rpwe-title > a{
  color: #06597a;
}
/*Explore More Songs*/
.singer-names {
  display: block;
  font-size: small;
  color: #404040;
}
/*card  images to behave as expected.*/
.card-img-top img {
    width: 100%!important;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Optional: Control how the image fills the space */
}
/*related-songs-widget*/
.related-songs-list {
    list-style: none; /* Remove default bullet points */
    margin: 0;
    padding: 0;
}

.related-song-item {
    margin-bottom: 10px; /* Spacing between items */
    overflow: hidden; /* Needed for floating elements */
}

.related-song-link-wrapper {
    display: flex; /* Use flexbox for layout */
    align-items: flex-start; /* Align items to the top */
}

.related-song-thumbnail {
    margin-right: 10px;
}

.related-song-content {
    flex-grow: 1; /* Allow content to expand */
}

.song-title {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.singer-names {
    font-size: smaller;
}

/* Responsive adjustments (example) */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .related-song-link-wrapper {
        flex-direction: column; /* Stack image and content vertically on smaller screens */
        align-items: flex-start; /* Align items to the left */
    }
    .related-song-thumbnail {
        margin-right: 0;
        margin-bottom: 5px;
        width: 100%; /* Make thumbnail full-width */
        height: auto;
    }
}
/* Optimized CSS for music info card row */
@media (min-width: 861px) { /* Desktop styles start here */

  .music-info-card-row { /* Target the music info card row using the new class */
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    align-items: flex-start;
    padding: 32px;
    border: 1px solid #e8e8e8;
  }

  .music-info-card-row .wps-column.wps-shortcode-wrapper.wps-column-size-1-2 { /* Target columns within card row */
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  /* Image Column Styles - Target image column within music info card row */
  .music-info-card-row .wps-column.wps-shortcode-wrapper.wps-column-size-1-2:first-child { /* First column specifically */
    margin-right: 28px;
  }

  .music-info-card-row .wps-column.wps-shortcode-wrapper.wps-column-size-1-2:first-child img { /* Image within first column */
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* Hover effect - Target card row */
  .music-info-card-row:hover {
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12);
  }

  /* Table Styles - Minimal */
  #lyrics_table { /* Keep ID selector for table */
    max-height: 210px;
    overflow-y: auto;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    display: block;
    /* Removed font-size from here */
  }
}
  /* Target td and a elements within the table */
  #lyrics_table td, #lyrics_table a{
        font-size: 14px !important;
        line-height: normal;
    }
/* end music info card row using the new class*/

.widget-area .widget {
    padding: 20px;
}
/*
 * ===================================================================
 * Mobile-Only Search Hook Styling
 * ===================================================================
*/

/**
 * 1. Container Styling & Spacing
 * This styles the wrapper for the mobile search form, adding "breathing room"
 * and a clean visual separation from the content.
 */
.mobile-only-search-hook {
    padding: 20px 20px 15px 20px; /* Top, Right, Bottom, Left */
    background-color: #f8f9fa;   /* A clean, very light grey */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 25px;         /* Space between the form and the content below */
}

/**
 * 2. Desktop Hiding Rule (The Core Logic)
 * This is the media query that hides the entire search block on screens
 * wider than the GeneratePress mobile breakpoint (768px).
 * Using 'display: none;' is a best practice as it completely removes the
 * element from the layout, preventing empty spaces and layout shifts.
 */
@media (min-width: 769px) {
    .mobile-only-search-hook {
        display: none;
    }
}