/*
 * Y2K Playbill palette — overrides Bootstrap's CSS variables so the theme's
 * own cascade picks them up (no specificity war).
 *
 * v4 fixes:
 *   - Navbar still white → theme has `navbar-dark fixed-top` which assumes
 *     dark bg + light text. Override the bg to cream and force text charcoal
 *     (the brand/links were white-on-white).
 *   - Jumbotron hiding behind fixed-top navbar → add body padding-top so all
 *     content clears the fixed bar, plus extra top padding on jumbotron.
 *
 * Hooked into the boilerplate via functions.php:
 *   wp_register_style('tjay-custom', .../css/tjay-custom.css', ...)
 *   wp_enqueue_style('tjay-custom')
 */
:root {
    --bs-primary: #FF006E;
    --bs-secondary: #FFBE0B;
    --bs-success: #BFFF00;
    --bs-info: #00B4D8;
    --bs-warning: #FFBE0B;
    --bs-danger: #FF006E;
    --bs-light: #FFF8F0;
    --bs-dark: #1A1A2E;
    --bs-body-bg: #FFF8F0;
    --bs-body-color: #1A1A2E;
    --bs-link-color: #FF006E;
    --bs-link-hover-color: #1A1A2E;
    --bs-border-color: rgba(26, 26, 46, 0.15);
}

/* Y2K gradient strip — header + footer */
header, .site-header, .navbar {
    border-top: 4px solid;
    border-bottom: 4px solid;
    border-image: linear-gradient(90deg, #FF006E 0%, #00B4D8 33%, #BFFF00 66%, #FFBE0B 100%) 1;
}

/* Navbar — force cream bg + charcoal text regardless of navbar-dark class */
.navbar,
.navbar.navbar-dark {
    background-color: var(--bs-body-bg) !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .nav-link.active,
.navbar .nav-link:focus {
    color: var(--bs-body-color) !important;
}
.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
    color: var(--bs-primary) !important;
}
.navbar .navbar-toggler {
    border-color: var(--bs-body-color);
}

/* Fixed-top navbar pushes content under — offset everything via body padding */
body {
    padding-top: 40px;
}
@media (max-width: 992px) {
    body { padding-top: 50px; }  /* taller mobile collapsed navbar */
}

/* Jumbotron — Bootstrap hardcodes #eceeef; override with cream + charcoal */
.jumbotron {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-radius: 0 !important;

	font-size: 2em;
}
.jumbotron h1, .jumbotron .h1,
.jumbotron .display-1, .jumbotron .display-2,
.jumbotron .display-3, .jumbotron .display-4 {
    color: var(--bs-body-color) !important;
}

/* Sidebar — Bootstrap .card is hardcoded #fff; bring into palette */
#sidebar-primary .card,
#sidebar-primary .card-header,
#sidebar-primary .card-body {
    
    color: var(--bs-body-color);
    border-color: var(--bs-border-color)
}
#sidebar-primary .card-header {
	
    background-color: var(--bs-dark);
    color: #FFF8F0;
    border-color: var(--bs-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.menu {
	padding-top: 15px;
}

.post-image {

    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;

}


/* Footer — text is text-white, so bg must be dark for readability */
footer.my-footer,
body > footer,
footer {
    background-color: var(--bs-dark) !important;
    color: #FFF8F0 !important;
}
footer.my-footer .widget-title,
footer.my-footer p,
footer.my-footer li,
footer.my-footer a {
    color: #FFF8F0 !important;
}
footer.my-footer a:hover {
    color: var(--bs-info) !important;
    text-decoration: underline;
}
footer.my-footer {
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #FF006E 0%, #00B4D8 33%, #BFFF00 66%, #FFBE0B 100%) 1;
}