/* ----------------------------------------------------------------
   glennbennett.com — the shared look for every page.
   One dark theme (the home and albums look), one header, one footer.
   Loaded by layouts/canvas-white.php, home.php and albums.php.
   Colours: page #131722, footer #0a0c12, text #d5dbe3, accent #79b8f3.
-----------------------------------------------------------------*/

/* Header and primary menu ------------------------------------------------ */
#header.dark.transparent-header { background-color: transparent; }
.primary-menu .menu-container > .menu-item > .menu-link {
    font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0.02em;
}
.dark .menu-item:hover > .menu-link { color: #79b8f3 !important; }
.dark .menu-item.active > .menu-link { color: #fff !important; }
#primary-menu-trigger { min-width: 44px; min-height: 44px; }

/* Footer ------------------------------------------------------------------ */
.site-footer { background-color: #0a0c12 !important; padding: 2.5rem 0 1.5rem; }
.site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.25rem; margin-bottom: 1.5rem; }
.site-footer-link {
    display: inline-block; padding: 12px 10px; line-height: 20px;
    color: rgba(255,255,255,0.72) !important; font-size: 0.95rem;
}
.site-footer-link:hover, .site-footer-link:focus { color: #fff !important; }
.site-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.site-footer-label {
    color: rgba(255,255,255,0.68); font-size: 0.75rem; letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 0.5rem;
}
.site-footer-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.site-icon-btn {
    width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,0.10); display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease; text-decoration: none;
}
.site-icon-btn i { color: rgba(255,255,255,0.80); font-size: 16px; }
.site-icon-btn:hover, .site-icon-btn:focus { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
.site-icon-btn:hover i, .site-icon-btn:focus i { color: #fff; }
.site-footer-copy { color: rgba(255,255,255,0.68); font-size: 0.85rem; text-align: center; margin: 0; }
@media (max-width: 575.98px) { .site-footer-row { justify-content: center; text-align: center; } .site-footer-icons { justify-content: center; } }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, [role=button]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #79b8f3; outline-offset: 2px;
}

/* Inner pages (layouts/canvas-white.php) on the dark theme --------------- */
.site-page, .site-page #wrapper, .site-page #content, .site-page .content-wrap { background-color: #131722; }
.site-page #header.dark.transparent-header { background-color: #131722 !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-page #page-title { background-color: #0e1119; border: 0; padding: 2.25rem 0 1.75rem; }
.site-page #page-title h1 { color: #fff; text-transform: none; font-family: 'Lora', serif; font-weight: 600; letter-spacing: 0; }
.site-page #page-title span { color: rgba(255,255,255,0.72); }
.site-page #content { color: #d5dbe3; }
.site-page #content p, .site-page #content li, .site-page #content td, .site-page #content label { color: #d5dbe3; }
.site-page #content h1, .site-page #content h2, .site-page #content h3,
.site-page #content h4, .site-page #content h5, .site-page #content h6 { color: #fff; }
.site-page #content a:not(.btn):not(.button):not(.site-icon-btn) { color: #79b8f3; }
.site-page #content a:not(.btn):not(.button):not(.site-icon-btn):hover { color: #a9d1f7; }

/* Bootstrap blues darkened so white text on them passes 4.5:1 ------------- */
.site-page .btn-primary, .site-page .bg-primary, .site-page .list-group-item-primary.bg-primary {
    background-color: #0a58ca !important; border-color: #0a58ca !important; color: #fff !important;
}
.site-page .btn-primary:hover { background-color: #084298 !important; }
.site-page .btn-primary.disabled { opacity: 1; }
.site-page .btn-info { background-color: #0f6674 !important; border-color: #0f6674 !important; color: #fff !important; }
.site-page .list-group-item { background-color: #1b2030; border-color: rgba(255,255,255,0.12); color: #d5dbe3; }
.site-page .card { background-color: #1b2030; border-color: rgba(255,255,255,0.12); }
.site-page .card-header { background-color: #222839; color: #fff; }
.site-page .btn-default { background: transparent; border: 1px solid rgba(255,255,255,0.55); color: #fff !important; }
.site-page .btn-default:hover { background: rgba(255,255,255,0.12); }
.site-page .text-muted { color: #b8c2cf !important; }

/* Owl carousel dots (home quotes): an 8px dot inside a 24px tap area */
.owl-carousel .owl-dots .owl-dot { width: 24px; height: 24px; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; margin: 0 2px !important; }
.owl-carousel .owl-dots .owl-dot span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); display: block; }
.owl-carousel .owl-dots .owl-dot.active span { background: #fff; }

/* Phones: Canvas's gutter-50 rows are 10px wider than the screen; use the normal gutter */
@media (max-width: 575.98px) {
    /* not the calendar's grid-container: Isotope places those cards itself */
    .row.gutter-50:not(.grid-container) { margin-left: -15px !important; margin-right: -15px !important; }
    .row.gutter-50:not(.grid-container) > [class*="col"] { padding-left: 15px !important; padding-right: 15px !important; }
    /* the calendar grid: full width cards, centred (they sat 15px left of centre) */
    #posts.grid-container.gutter-50 { margin-left: 0 !important; margin-right: 0 !important; }
    #posts.grid-container.gutter-50 > .entry { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Calendar cards (/cal and /past) on the dark theme */
.site-page .entry.event > .grid-inner { border-color: rgba(255,255,255,0.18) !important; box-shadow: none; }
.site-page .entry.event ul { list-style: none; padding-left: 0; }

/* Bottom player bar: artist name was theme blue on dark grey (2.45:1) */
.mejs-track-details h3 span { color: rgba(255,255,255,0.75) !important; }

/* Concert page notes: an old custom.css rule made this text black; keep it light on the dark page */
.site-page .notes p, .site-page .notes h4, .notes p, .notes h4 { color: #eeeeee; }