/*
Theme Name: Boogie Bar
Theme URI: https://boogiebar.com
Author: Telex
Description: A bold, neon-drenched WordPress block theme for Boogie Bar — a nightlife venue and dance bar. Deep blacks, hot magenta, electric gold, and violet accents capture the electricity of a late-night dancefloor. Pairs Space Grotesk display headlines with Fredoka body copy for maximum dance-club energy.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boogie-bar
Tags: full-site-editing, block-patterns, dark, entertainment, nightlife, custom-colors, custom-fonts
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ----------------------------------------------------------------
   Foundation resets
   ---------------------------------------------------------------- */

:root,
body,
.wp-site-blocks {
    overflow: visible;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Smooth scroll for anchor navigation — respects reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ----------------------------------------------------------------
   Typography polish
   ---------------------------------------------------------------- */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings — Space Grotesk gets tighter tracking at large sizes */
h1, h2, h3,
.wp-block-heading {
    letter-spacing: -0.02em;
}

h1 {
    letter-spacing: -0.04em;
}

h4, h5, h6 {
    letter-spacing: 0;
}

/* Paragraph readability */
p {
    max-width: 72ch;
}

/* Allow paragraphs inside centered groups to stay centered */
.has-text-align-center p,
[style*="text-align:center"] p,
.aligncenter p {
    margin-inline: auto;
}

/* Small / caption utility */
small,
.has-small-font-size {
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   Link styles — neon-sign energy
   ---------------------------------------------------------------- */

a {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
    text-shadow: 0 0 8px color-mix(in srgb, var(--wp--preset--color--magenta) 50%, transparent);
}

/* Underline treatment for body links inside prose */
.entry-content a:not(.wp-block-button__link),
.wp-block-group a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-site-title a) {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.entry-content a:not(.wp-block-button__link):hover,
.wp-block-group a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-site-title a):hover {
    text-decoration-color: var(--wp--preset--color--magenta);
}

/* ----------------------------------------------------------------
   Button styles
   ---------------------------------------------------------------- */

.wp-block-button__link {
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
    box-shadow: 0 0 16px color-mix(in srgb, var(--wp--preset--color--magenta) 40%, transparent);
}

.wp-block-button__link:hover {
    box-shadow: 0 0 20px color-mix(in srgb, var(--wp--preset--color--gold) 50%, transparent);
    transform: translateY(-1px);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--wp--preset--color--magenta);
    box-shadow:
        0 0 15px color-mix(in srgb, var(--wp--preset--color--magenta) 30%, transparent),
        inset 0 0 10px color-mix(in srgb, var(--wp--preset--color--magenta) 15%, transparent);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    border-color: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--gold);
    box-shadow:
        0 0 20px color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent),
        inset 0 0 10px color-mix(in srgb, var(--wp--preset--color--gold) 20%, transparent);
}

/* ----------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------- */

.wp-block-navigation a {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.wp-block-navigation a:hover {
    color: var(--wp--preset--color--gold);
    text-shadow: 0 0 8px color-mix(in srgb, var(--wp--preset--color--gold) 50%, transparent);
}

/* ----------------------------------------------------------------
   Site title — neon glow
   ---------------------------------------------------------------- */

.wp-block-site-title a {
    text-decoration: none;
    text-shadow: 0 0 10px color-mix(in srgb, var(--wp--preset--color--magenta) 50%, transparent);
    transition: text-shadow 0.3s ease;
}

.wp-block-site-title a:hover {
    text-shadow:
        0 0 10px color-mix(in srgb, var(--wp--preset--color--magenta) 60%, transparent),
        0 0 25px color-mix(in srgb, var(--wp--preset--color--magenta) 30%, transparent);
}

/* ----------------------------------------------------------------
   Header — fixed overlay + translucent-blur scrolled state
   ---------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Backdrop pseudo — paints the scrolled-state chrome without creating a
   containing block on <header> that would break the mobile overlay's
   position: fixed inset: 0. */
.wp-site-blocks > header.wp-block-template-part::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

body.is-scrolled .wp-site-blocks > header.wp-block-template-part::before {
    background: color-mix(in srgb, var(--wp--preset--color--black) 82%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--magenta) 20%, transparent);
}

/* ----------------------------------------------------------------
   Mobile hamburger overlay
   ---------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--violet);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: var(--wp--preset--spacing--40);
    align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------
   Cover block — image treatments
   ---------------------------------------------------------------- */

.wp-block-cover {
    overflow: hidden;
}

.wp-block-cover img {
    filter: contrast(1.15) brightness(1.05) saturate(1.3);
}

/* ----------------------------------------------------------------
   Image treatments — moody glow
   ---------------------------------------------------------------- */

.wp-block-image img {
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-image:hover img {
    filter: brightness(1.05) saturate(1.1);
}

/* Gallery images */
.wp-block-gallery .wp-block-image img {
    border-radius: 4px;
}

.wp-block-gallery .wp-block-image:hover img {
    box-shadow: 0 0 20px color-mix(in srgb, var(--wp--preset--color--magenta) 30%, transparent);
}

/* ----------------------------------------------------------------
   Separator / HR
   ---------------------------------------------------------------- */

.wp-block-separator {
    opacity: 1;
}

.wp-block-separator:not(.is-style-dots) {
    border-color: var(--wp--preset--color--magenta);
    box-shadow: 0 0 8px color-mix(in srgb, var(--wp--preset--color--magenta) 30%, transparent);
}

/* ----------------------------------------------------------------
   Quote block — neon bar accent
   ---------------------------------------------------------------- */

.wp-block-quote {
    padding-inline-start: var(--wp--preset--spacing--40);
}

.wp-block-quote cite {
    font-family: var(--wp--preset--font-family--space-grotesk);
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--muted);
}

/* ----------------------------------------------------------------
   Columns — responsive stacking
   ---------------------------------------------------------------- */

@media (max-width: 781px) {
    .wp-block-columns {
        flex-wrap: wrap;
    }
    .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ----------------------------------------------------------------
   Post template / Query loop cards
   ---------------------------------------------------------------- */

.wp-block-post-template .wp-block-post-featured-image img {
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-post-template .wp-block-post-featured-image:hover img {
    transform: scale(1.02);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--wp--preset--color--magenta) 25%, transparent);
}

.wp-block-post-template .wp-block-post-title a {
    text-decoration: none;
    color: var(--wp--preset--color--white);
}

.wp-block-post-template .wp-block-post-title a:hover {
    color: var(--wp--preset--color--gold);
}

.wp-block-post-date,
.wp-block-post-terms {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

/* ----------------------------------------------------------------
   Group backgrounds — cream surface text fix
   ---------------------------------------------------------------- */

.has-cream-background-color {
    color: var(--wp--preset--color--black);
}

.has-cream-background-color a {
    color: var(--wp--preset--color--magenta);
}

.has-cream-background-color a:hover {
    color: var(--wp--preset--color--violet);
}

.has-violet-background-color {
    color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------
   Selection / highlight — on-brand
   ---------------------------------------------------------------- */

::selection {
    background: var(--wp--preset--color--magenta);
    color: var(--wp--preset--color--white);
}

::-moz-selection {
    background: var(--wp--preset--color--magenta);
    color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------
   Focus visible — accessibility
   ---------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--wp--preset--color--cyan);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Scrollbar — dark theme
   ---------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--wp--preset--color--black);
}

::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--violet);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wp--preset--color--magenta);
}

/* Firefox */
html {
    scrollbar-color: var(--wp--preset--color--violet) var(--wp--preset--color--black);
    scrollbar-width: thin;
}

/* ---------- Loop layout utilities ---------- */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tuned to Boogie Bar palette. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 25%, transparent);
    padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
    border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
    flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
    position: relative;
    padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.5rem;
    width: 2px;
    background: var(--wp--preset--color--magenta);
    opacity: 0.25;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
    position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
    content: '';
    position: absolute;
    inset-inline-start: -2.25rem;
    inset-block-start: 0.6rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--wp--preset--color--magenta);
    border-radius: 50%;
    background: var(--wp--preset--color--black);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
    grid-column: span 2;
}
@media (max-width: 600px) {
    .wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
        grid-column: auto;
    }
}