/* ==========================================================================
   Halloween Events Theme Styles
   ========================================================================== */

/* Halloween Theme CSS Variables */
:root {
    --halloween-orange: #ff6600;
    --halloween-purple: #6b0f7a;
    --halloween-green: #2d5016;
    --halloween-black: #000000;
    --halloween-yellow: #ffcc00;
    --halloween-cream: #fff8e7;
    --halloween-light-orange: #ffe4cc;
    --halloween-dark-purple: #4a0a55;
}

/* Body background - WHITE not beige */
body {
    background: #ffffff !important;
}

/* Flying Bats */
@keyframes batfly {
    0% { transform: translateX(-100vw) translateY(0) scaleX(1); opacity: 0.7; }
    50% { transform: translateX(0) translateY(-30px) scaleX(1); opacity: 1; }
    100% { transform: translateX(100vw) translateY(0) scaleX(1); opacity: 0.7; }
}

.bat {
    position: fixed;
    top: 15%;
    z-index: 1;
    font-size: 1.8em;
    pointer-events: none;
    animation: batfly linear infinite;
    opacity: 0.6;
}

.bat:nth-child(1) { animation-duration: 25s; animation-delay: 0s; top: 20%; }
.bat:nth-child(2) { animation-duration: 30s; animation-delay: 8s; top: 35%; }
.bat:nth-child(3) { animation-duration: 22s; animation-delay: 15s; top: 25%; }

/* Page Header */
.page-header {
    background: linear-gradient(135deg, #ff6600 0%, #cc5200 50%, #993d00 100%) !important;
    color: #fff;
    padding: 2.5rem 0;
    margin-bottom: 2rem;
    margin-top: 0;
    text-align: center;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.4);
    position: relative;
    overflow: hidden;
    border: none;
    border-bottom: 4px solid var(--halloween-yellow);
}

.page-header::before {
    content: '🎃';
    position: absolute;
    font-size: 12rem;
    opacity: 0.1;
    left: -30px;
    top: -30px;
    transform: rotate(-15deg);
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    font-family: 'Georgia', serif;
}

.page-header p {
    font-size: 1.1rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

/* Halloween Cards */
.halloween-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.15);
    transition: all 0.3s ease;
    border: 3px solid var(--halloween-orange);
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.halloween-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--halloween-orange) 0%,
        var(--halloween-purple) 50%,
        var(--halloween-green) 100%);
    z-index: 1;
}

.halloween-card::after {
    content: '🎃';
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 3rem;
    opacity: 0.05;
    z-index: 0;
}

.halloween-card:hover {
    box-shadow: 0 6px 30px rgba(255, 102, 0, 0.25);
    transform: translateY(-2px);
    border-color: var(--halloween-purple);
}

.halloween-card h3, .halloween-card h4, .halloween-card h5 {
    color: var(--halloween-orange) !important;
    font-weight: 700;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.halloween-card p {
    color: #333;
}

/* Standard Cards */
.card {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.15);
    border: 2px solid var(--halloween-purple);
    transition: all 0.3s ease;
    background: #ffffff;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--halloween-orange) 0%,
        var(--halloween-purple) 50%,
        var(--halloween-green) 100%);
    z-index: 1;
}

.card:hover {
    box-shadow: 0 6px 30px rgba(255, 102, 0, 0.25);
    transform: translateY(-2px);
    border-color: var(--halloween-orange);
}

.card-body {
    padding: 1.75rem 1.5rem 1.5rem;
    position: relative;
    z-index: 2;
    background: transparent;
    color: #333;
}

.card-title {
    color: var(--halloween-orange) !important;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.card-title::before {
    content: '🎃';
    margin-right: 8px;
}

.card-text {
    color: #333 !important;
}

.card a {
    color: var(--halloween-purple) !important;
    text-decoration: none;
}
.card a:hover {
    color: var(--halloween-orange) !important;
    text-decoration: underline;
}

/* Panels */
.panel {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.15);
    border: 2px solid var(--halloween-orange);
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--halloween-orange) 0%,
        var(--halloween-purple) 50%,
        var(--halloween-green) 100%);
    z-index: 1;
}

.panel-heading {
    background: linear-gradient(135deg, var(--halloween-orange) 0%, var(--halloween-purple) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.9rem 1.25rem;
    border-radius: 10px 10px 0 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.panel-body {
    padding: 1.25rem;
    background: transparent;
    color: #333;
}

/* Promotional images */
.promotional-images img {
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(255, 102, 0, 0.2);
    transition: all 0.3s ease;
    max-width: 100%;
    height: auto;
    border: 3px solid var(--halloween-orange);
}

.promotional-images img:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(255, 102, 0, 0.3);
    border-color: var(--halloween-purple);
}

iframe {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(255, 102, 0, 0.15);
}

audio, video {
    border-radius: 12px;
    width: 100%;
    border: 2px solid var(--halloween-orange);
}

/* Tables */
.table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    background: #fff;
}
.table .fa-2x{
    font-size: 1em !important;
}

.table thead th {
    background: linear-gradient(135deg, var(--halloween-orange) 0%, var(--halloween-purple) 100%) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0.9rem 1.25rem !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
    font-size: 1.1rem !important;
}

/* DataTables specific overrides */
#htmlEventTable thead th,
#htmlEventTable_wrapper .dataTables_scrollHead thead th {
    background: linear-gradient(135deg, var(--halloween-orange) 0%, var(--halloween-purple) 100%) !important;
    color: #fff !important;
    border: none !important;
}

#htmlEventTable thead th:first-child::before {
    content: '🎃 ';
    margin-right: 5px;
}

/* DataTables sorting icons */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: #fff !important;
    opacity: 0.8;
}

#htmlEventTable thead tr {
    background: linear-gradient(135deg, var(--halloween-orange) 0%, var(--halloween-purple) 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--halloween-yellow) !important;
}
#htmlEventTable thead th {
    background: transparent !important;
    color: #fff !important;
}
#htmlEventTable thead th:first-child { border-top-left-radius: 10px; }
#htmlEventTable thead th:last-child { border-top-right-radius: 10px; }
#htmlEventTable thead,
#htmlEventTable thead tr,
#htmlEventTable thead th { border-color: transparent !important; }

/* Event details */
#EventsList { text-align: left !important; }
#EventsList .table td,
#EventsList .table th {
    text-align: left !important;
    vertical-align: top;
    color: #333 !important;
}

.table tbody td {
    padding: 1rem;
    border-color: var(--halloween-light-orange);
}

.panel-body > .table tbody td span{
   color: var(--halloween-orange) !important;
   font-weight: 600 !important;
   font-size: 0.95rem !important;
}

.table tbody tr:hover {
    background: var(--halloween-light-orange);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .page-header {
        padding: 1.5rem 0;
    }
    .page-header h1 { font-size: 1.8rem; }
    .halloween-card { padding: 1.25rem; }
}

#htmlEventTable_filter {
    margin-top: 1.5rem !important;
}

.defaultHidden { display: none; }

/* Event panels */
.panel-default {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 102, 0, 0.3);
}

.panel-default::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--halloween-orange) 0%,
        var(--halloween-purple) 50%,
        var(--halloween-green) 100%);
    z-index: 1;
    display: block !important;
}

.panel-default:hover {
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.2);
    border-color: var(--halloween-orange);
    transform: translateY(-1px);
}

.panel-heading.eventheading {
    background: linear-gradient(135deg, var(--halloween-orange) 0%, var(--halloween-purple) 100%);
    color: #fff;
    padding: 1rem 1.25rem 1rem 2.25rem;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.panel-heading.eventheading::before {
    content: '🎃';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0.9;
}

.panel-heading.eventheading:hover {
    filter: brightness(1.05);
}

.EventTitle {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}

.panel-heading.eventheading a {
    color: #fff;
    text-decoration: none;
}

.panel-heading.eventheading a:hover {
    text-decoration: underline;
}

.panel-heading.eventheading small {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.eventheading > div,
.eventheading > span {
    color: rgba(255, 255, 255, 0.9) !important;
}

.EventHeaderDropDown {
    float: right;
    color: #fff;
}

.panel-body .table {
    margin-bottom: 0;
}

.panel-body .table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
}

#EventsList .panel-body .table td a,
#EventsList .panel-body .table td i,
#EventsList .panel-body .table td .fa {
    color: var(--halloween-purple) !important;
}
#EventsList .panel-body .table td a:hover { color: var(--halloween-orange) !important; }

.panel-body .table td:first-child {
    font-weight: 600;
    color: var(--halloween-orange);
    width: 30%;
}

.panel-body img {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    height: auto;
}

.container {
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   FOOTER OVERRIDES - Orange/Black theme, NOT blue
   ========================================================================== */

/* Footer colors - Orange and Black */
footer a, footer i, footer .fa, footer svg {
    color: var(--halloween-orange) !important;
}
footer a:hover, footer i:hover, footer .fa:hover, footer svg:hover {
    color: var(--halloween-purple) !important;
}

/* Remove blue circular backgrounds on footer social icons */
footer .btn,
footer .btn-circle,
footer .social,
footer .social a,
footer .social .btn,
footer .social-icon,
footer .icon,
footer .rounded-circle,
footer .circle,
footer a .icon-bg {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Normalize icon sizes without button padding */
footer .btn,
footer .social a {
    padding: 0 !important;
    margin: 0 .35rem !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
}

/* Force icon glyph colors to orange */
footer a i,
footer a .fa,
footer a .fab,
footer a svg {
    color: var(--halloween-orange) !important;
    fill: var(--halloween-orange) !important;
}
footer a:hover i,
footer a:hover .fa,
footer a:hover .fab,
footer a:hover svg {
    color: var(--halloween-purple) !important;
    fill: var(--halloween-purple) !important;
}

/* Handle inline SVGs that set fill on child paths */
footer a svg [fill]:not([fill='none']) {
    fill: var(--halloween-orange) !important;
}
footer a:hover svg [fill]:not([fill='none']) {
    fill: var(--halloween-purple) !important;
}

/* Stronger footer social icon background overrides */
footer .social,
footer .socials,
footer .social-icons,
footer .social-links,
footer .footer-social {
    background: transparent !important;
    box-shadow: none !important;
}
footer .social a,
footer .socials a,
footer .social-icons a,
footer .social-links a,
footer .footer-social a,
footer .social a > span,
footer .socials a > span,
footer .social-icons a > span,
footer .social-links a > span,
footer .footer-social a > span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
}
footer a.bg-primary,
footer a.bg-info,
footer a.bg-light,
footer a.bg-secondary,
footer a.bg-success,
footer a.bg-danger,
footer a.btn,
footer a.btn-outline-primary,
footer a.btn-outline-info,
footer a.btn-outline-light,
footer a.btn-outline-secondary,
footer a.btn-outline-success,
footer a.btn-outline-danger,
footer .rounded-circle,
footer .badge,
footer .icon-bg {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
footer .social a::before,
footer .social a::after,
footer .socials a::before,
footer .socials a::after,
footer .social-icons a::before,
footer .social-icons a::after,
footer .social-links a::before,
footer .social-links a::after,
footer .footer-social a::before,
footer .footer-social a::after {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Ensure glyphs are orange */
footer .social a i,
footer .social a .fa,
footer .social a .fab,
footer .social a svg,
footer .socials a i,
footer .socials a .fa,
footer .socials a .fab,
footer .socials a svg,
footer .social-icons a i,
footer .social-icons a .fa,
footer .social-icons a .fab,
footer .social-icons a svg,
footer .social-links a i,
footer .social-links a .fa,
footer .social-links a .fab,
footer .social-links a svg,
footer .footer-social a i,
footer .footer-social a .fa,
footer .footer-social a .fab,
footer .footer-social a svg {
    color: var(--halloween-orange) !important;
    fill: var(--halloween-orange) !important;
}
footer .social a:hover i,
footer .social a:hover .fa,
footer .social a:hover .fab,
footer .social a:hover svg,
footer .socials a:hover i,
footer .socials a:hover .fa,
footer .socials a:hover .fab,
footer .socials a:hover svg,
footer .social-icons a:hover i,
footer .social-icons a:hover .fa,
footer .social-icons a:hover .fab,
footer .social-icons a:hover svg,
footer .social-links a:hover i,
footer .social-links a:hover .fa,
footer .social-links a:hover .fab,
footer .social-links a:hover svg,
footer .footer-social a:hover i,
footer .footer-social a:hover .fa,
footer .footer-social a:hover .fab,
footer .footer-social a:hover svg {
    color: var(--halloween-purple) !important;
    fill: var(--halloween-purple) !important;
}
footer .social a svg [fill]:not([fill='none']),
footer .socials a svg [fill]:not([fill='none']),
footer .social-icons a svg [fill]:not([fill='none']),
footer .social-links a svg [fill]:not([fill='none']),
footer .footer-social a svg [fill]:not([fill='none']) {
    fill: var(--halloween-orange) !important;
}
footer .social a:hover svg [fill]:not([fill='none']),
footer .socials a:hover svg [fill]:not([fill='none']),
footer .social-icons a:hover svg [fill]:not([fill='none']),
footer .social-links a:hover svg [fill]:not([fill='none']),
footer .footer-social a:hover svg [fill]:not([fill='none']) {
    fill: var(--halloween-purple) !important;
}

/* Vikki Green Card Styles */
.vikki-green-card img {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(255, 102, 0, 0.15);
    border: 2px solid var(--halloween-orange);
    margin-bottom: 1rem;
}