/*
 * Custom overrides to make the OiBeats theme closer to the original
 * DeepSound script styling.  These rules set up a dark colour
 * palette with a vivid accent colour, adjust backgrounds and text
 * colours, and provide simple button and link styles.  Because
 * the base styles from the DeepSound skin are already loaded, these
 * overrides only need to tweak variables and a few structural
 * elements.
 */

/*
 * Define primary colours.  The DeepSound script uses a red/orange
 * accent for buttons and highlights.  We assign that value to both
 * our own --color-primary variable and to --main-color to ensure
 * legacy rules in the imported CSS pick up the new colour.
 */
:root {
    --color-primary: #F44336; /* primary accent colour */
    --main-color: var(--color-primary);
}

/* Global dark background and light text to match the script. */
body {
    background-color: #171719;
    color: #dadada;
}

/* Header and navbar styling: dark background and subtle border */
.site-header,
header,
.navbar,
#header {
    background-color: #222225;
    color: #dadada;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Links inherit header colour but highlight on hover with accent colour */
.site-header a,
header a,
.navbar a {
    color: inherit;
    transition: color 0.2s ease;
}
.site-header a:hover,
header a:hover,
.navbar a:hover {
    color: var(--color-primary);
}

/* Sidebar styling: dark panel with subtle separation */
#site-sidebar,
.site-sidebar {
    background-color: #222225;
    color: #dadada;
    border-right: 1px solid rgba(255,255,255,0.05);
}

/* Buttons adopt the accent colour for backgrounds and borders */
.btn-primary,
.btn-main,
.button-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-main:hover,
.button-primary:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Base link colour and hover state */
a {
    color: var(--main-color);
    transition: color 0.2s ease;
}
a:hover {
    color: var(--main-color);
}

/* Icons for play, pause, like and download adopt the accent colour */
.play-icon,
.pause-icon,
.like-icon,
.download-icon {
    color: var(--color-primary);
}

/* Ensure card and section backgrounds match the dark theme */
.card,
.section,
.content,
.post,
.widget {
    background-color: #222225;
    color: #dadada;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Override WP blockquote colours to stand out on dark backgrounds */
blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1rem;
    margin-left: 0;
    color: #eee;
}

/* Hide the duplicate search bar in the header on the front page.
   This prevents redundant search forms when the hero search is present. */
body.home #header .search-form {
    display: none;
}

/*
 * Station card styling.  Loop Block uses the `station-card` class
 * on each item in the list.  These rules create a compact dark
 * card with the thumbnail on the left and track metadata on the
 * right, similar to the DeepSound layout.  Buttons output by the
 * Play‑Block plugin will appear after the meta and can be styled
 * separately.
 */
.station-card {
    display: flex;
    align-items: center;
    background-color: #222225;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.station-card .station-thumbnail {
    flex: 0 0 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 0.25rem;
    margin-right: 1rem;
}

.station-card .station-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.station-card .station-meta {
    flex: 1 1 auto;
    color: #fff;
}

.station-card .station-title {
    font-size: 1rem;
    margin: 0;
    color: #fff;
}

.station-card .station-artist {
    font-size: 0.875rem;
    color: #888;
}

/* Controls container for play and like buttons */
.station-card .station-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.station-card .station-controls button,
.station-card .station-controls .btn,
.station-card .station-controls i {
    background: transparent;
    border: none;
    color: var(--color-primary);
    padding: 0;
    font-size: 1.2rem;
}