/*
Theme Name: Chords Child
Theme URI: https://themeforest.net/item/chords-music-artist-radio-wordpress-theme/8980824
Template: chords
Author: CSSIgniter
Author URI: https://www.cssigniter.com/
Description: Music theme for WordPress
Tags: one-column,two-columns,three-columns,right-sidebar,left-sidebar,flexible-width,custom-menu,editor-style,featured-images,translation-ready
Version: 2.9.0.1793218850
Updated: 2026-10-28 20:20:50

*/

/* Claude Code Test */

/* Remove the colored frame around the whole site (parent sets a 20/15/10px border on #page) */
#page,
.noborder #page {
  border: none !important;
}

/* WordPress's table block wraps tables in a scroll box (overflow-x: auto) and
   collapses their borders, which makes the table's outer border sit half outside
   that box, so the bottom rule gets clipped. 1px of padding gives it room. */
.entry-content .wp-block-table {
  padding: 1px;
}

/* Galleries listing: move the title text and "View Photos" button off the photo
   onto gray bars above and below it. Scoped by page template so it works on any
   site where that template is used, whatever the page ID. */
.page-template-template-listing-galleries .item {
  display: flex;
  flex-direction: column;
  background-color: #363636;
}

.page-template-template-listing-galleries .item-info {
  order: -1; /* the text comes after the photo in the markup; show it first */
  position: static;
  padding: 10px;
}

.page-template-template-listing-galleries .item-btn {
  position: static;
  align-self: flex-start;
  margin: 10px;
}

/* Single gallery pages: the theme shows photos at 50% opacity over a dark
   background (80% on hover). Lighten that veil so the photos read brighter. */
.single-cpt_gallery .item-thumb img {
  opacity: 0.85;
}

.single-cpt_gallery .item-thumb:hover img {
  opacity: 1;
}

/* Magnifying glass: top-left corner and 25% smaller (theme: 33px, centered) */
.single-cpt_gallery a.zoom:after {
  top: 10px;
  left: 10px;
  margin: 0;
  font-size: 25px;
  z-index: 2;
}

/* Sortable repertoire table headers */
.repertoire-sort-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Cancel the parent theme's orange button:hover background on the full header */
.repertoire-sort-button:hover,
.repertoire-sort-button:focus,
.repertoire-sort-button:active {
  background: none;
  color: inherit;
}

.repertoire-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.875em;
  font-weight: normal;
  opacity: 0.85;
  transition: background-color 0.15s ease;
}

/* Highlight only the "Sort" control on hover/keyboard focus */
.repertoire-sort-button:hover .repertoire-sort-control,
.repertoire-sort-button:focus-visible .repertoire-sort-control {
  background: #d66611;
  color: #FFF;
  opacity: 1;
}

.repertoire-sort-icon::after {
  content: "\25B2"; /* triangle, dimmed while unsorted */
  opacity: 0.4;
}

.is-sorted-asc .repertoire-sort-icon::after {
  content: "\25B2";
  opacity: 1;
}

.is-sorted-desc .repertoire-sort-icon::after {
  content: "\25BC";
  opacity: 1;
}

/* Repertoire table search */
.repertoire-search {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

.repertoire-search-input {
  flex: 1 1 200px;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 4px 10px;
}

.repertoire-search .repertoire-search-submit,
.repertoire-search .repertoire-search-clear {
  flex: 0 0 auto;
  margin: 0;
}

/* All buttons ~25% shorter than the theme's 11px/10px padding. Same selectors
   and specificity as the parent theme, so its size variants (.btn-xs, .btn-lg)
   still apply. */
.btn,
.comment-reply-link,
input[type=button],
input[type=submit],
input[type=reset],
button,
.button {
  padding: 6px 16px 5px;
}

/* Global bevelled, gradient buttons.
   The gradient sits on top of the theme's button color, so the base color still
   follows the color scheme. "body" raises specificity above the color scheme
   stylesheet, which loads after this one. The sort headers are plain text
   buttons and are left out. */
body .btn,
body .comment-reply-link,
body input[type=button],
body input[type=submit],
body input[type=reset],
body button:not(.repertoire-sort-button),
body .button {
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.15) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.4);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Same orange as the "Sort" hover */
body .btn:hover,
body .comment-reply-link:hover,
body input[type=button]:hover,
body input[type=submit]:hover,
body input[type=reset]:hover,
body button:not(.repertoire-sort-button):hover,
body .button:hover,
body .btn:focus-visible,
body .comment-reply-link:focus-visible,
body input[type=button]:focus-visible,
body input[type=submit]:focus-visible,
body input[type=reset]:focus-visible,
body button:not(.repertoire-sort-button):focus-visible,
body .button:focus-visible {
  background-color: #d66611;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.15) 100%);
  color: #FFF;
}

/* Pressed: flip the bevel so the button looks pushed in */
body .btn:active,
body .comment-reply-link:active,
body input[type=button]:active,
body input[type=submit]:active,
body input[type=reset]:active,
body button:not(.repertoire-sort-button):active,
body .button:active {
  background-color: #d66611;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 100%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
}

/* White bottom rule, 1px to match the table's side borders */
.entry-content .wp-block-table tr.is-last-visible td,
.entry-content .wp-block-table tr.is-last-visible th {
  border-bottom: 1px solid #FFF;
}

.repertoire-no-results td {
  text-align: center;
  font-style: italic;
}