/*
Theme Name: DJ Steve B
Theme URI: https://djsteveb.co.uk
Author: Built for DJ Steve B
Description: One-page site for DJ Steve B — multi format DJ, Kent and London. Dark editorial layout with a venue ledger, hover-expand gallery, Mixcloud players and an enquiry form.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: dj-steve-b
*/

/* ── Tokens ─────────────────────────────────────────────
   ground #0B0B0D · raised #101013 · ink #E6E4DF
   body #B4B2AD · muted #8C8A90 · line #21212A · accent #B08A46
   Change --acc to re-tint the ledger hover and gallery numbers.
   ─────────────────────────────────────────────────────── */
:root { --acc: #B08A46; }

/* Neutralise theme/plugin defaults that fight the layout */
#content, main { display: block; }
img, iframe { max-width: 100%; }
figure { margin: 0; }

html { scroll-behavior: smooth; background: #0B0B0D; }
  body { margin: 0; overflow-x: hidden; background: #0B0B0D; color: #E6E4DF;
    font-family: "Newsreader", Georgia, "Times New Roman", serif; font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #E6E4DF; text-decoration: none; }
  a:hover { color: #E6E4DF; }
  a:focus-visible, button:focus-visible { outline: 2px solid #E6E4DF; outline-offset: 4px; border-radius: 1px; }
  ::selection { background: #2A2A33; color: #E6E4DF; }
  ::placeholder { color: #5E5E66; }
  select option { background: #101013; color: #E6E4DF; }
  input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .45; cursor: pointer; }
  [data-slat] { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #0B0B0D;
    cursor: pointer; transition: flex-grow .6s cubic-bezier(.22,.61,.36,1); outline-offset: -3px; }
  [data-slat] img { filter: grayscale(1) contrast(1.06); transform: scale(1.03);
    transition: filter .6s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
  [data-slat] [data-cap] { opacity: 0; transform: translateY(10px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
  [data-slat] [data-vlabel] { opacity: 1; transition: opacity .3s ease; }
  [data-accordion]:hover [data-slat] img { filter: grayscale(1) contrast(1.06) brightness(.78); }
  [data-slat]:hover, [data-slat]:focus-visible, [data-slat][data-open="1"] { flex-grow: 3.2; }
  [data-slat]:hover img, [data-slat]:focus-visible img, [data-slat][data-open="1"] img {
    filter: none !important; transform: scale(1); }
  [data-slat]:hover [data-cap], [data-slat]:focus-visible [data-cap], [data-slat][data-open="1"] [data-cap] {
    opacity: 1; transform: none; }
  [data-slat]:hover [data-vlabel], [data-slat]:focus-visible [data-vlabel], [data-slat][data-open="1"] [data-vlabel] { opacity: 0; }
  @media (hover: none) {
    [data-slat]:hover { flex-grow: 1; }
    [data-slat]:hover img { filter: grayscale(1) contrast(1.06) !important; transform: scale(1.03); }
    [data-slat]:hover [data-cap] { opacity: 0; transform: translateY(10px); }
    [data-slat]:hover [data-vlabel] { opacity: 1; }
    [data-slat][data-open="1"] { flex-grow: 12; }
    [data-slat][data-open="1"] img { filter: none !important; transform: scale(1); }
    [data-slat][data-open="1"] [data-cap] { opacity: 1; transform: none; }
    [data-slat][data-open="1"] [data-vlabel] { opacity: 0; }
  }
  [data-lightbox][data-on="1"] { animation: lbin .26s ease both; }
  [data-lightbox] img { animation: lbzoom .34s cubic-bezier(.22,.61,.36,1) both; }
  #ledger li:hover [data-venue], #ledger li:focus-within [data-venue] {
    animation: vpulse .6s cubic-bezier(.33,1,.68,1);
  }
  @keyframes vpulse {
    0% { transform: scale(1) }
    44% { transform: scale(1.05) }
    100% { transform: scale(1) }
  }
  @keyframes hnudge {
    0% { transform: translateX(0) }
    42% { transform: translateX(18px) }
    100% { transform: translateX(0) }
  }
  @keyframes lbin { from { opacity: 0 } to { opacity: 1 } }
  @keyframes lbzoom { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: none } }
  [data-slideup] { transform: translateY(100%); will-change: transform;
    transition: transform .5s cubic-bezier(.625,.05,0,1); }
  [data-slideup][data-up="1"] { transform: none; }
  @media (prefers-reduced-motion: reduce) { [data-slideup] { transform: none !important; } }
  @media print { [data-slideup] { transform: none !important; } }
  [data-metal] { position: relative; display: inline-flex; padding: 1.5px; border-radius: 100px;
    background: linear-gradient(100deg,#5c5c64,#d6d6dc,#8d8d95,#f4f4f7,#585860,#c6c6cf,#5c5c64);
    background-size: 300% 100%; animation: metalflow 7s linear infinite;
    box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 18px 14px rgba(0,0,0,.18), 0 4px 6px rgba(0,0,0,.28);
    transition: box-shadow .3s ease, transform .18s cubic-bezier(.34,1.56,.64,1); }
  [data-metal] > * { border-radius: 100px; background: linear-gradient(180deg,#232326 0%,#08080A 100%); }
  [data-metal]:hover { animation-duration: 2.6s;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 10px 8px rgba(0,0,0,.14), 0 3px 5px rgba(0,0,0,.24); }
  [data-metal]:active { transform: translateY(1px) scale(.985); }
  [data-metal]:active > * { box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
  [data-metal]:focus-within { box-shadow: 0 0 0 2px #E6E4DF; }
  @keyframes metalflow { to { background-position: 300% 50% } }
  @media (prefers-reduced-motion: reduce) { [data-metal] { animation: none } }
  [data-slat] [data-cap] span:last-child { white-space: nowrap; }
  [data-slat] { -webkit-tap-highlight-color: transparent; }
  @media (max-width: 760px) {
    header { flex-wrap: wrap; row-gap: 10px; }
    header nav { flex-wrap: wrap; justify-content: flex-start; width: 100%;
      column-gap: 18px; row-gap: 2px; }
    header nav a { min-height: 40px; display: inline-flex; align-items: center; }
    /* accordion becomes a snap-scrolling strip: full-size photos instead of 33px slivers */
    [data-accordion] { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; height: auto; gap: 6px; }
    [data-slat] { flex: 0 0 78%; aspect-ratio: 3/4; height: auto; scroll-snap-align: center; }
    [data-slat], [data-slat][data-open="1"] { flex-grow: 0; }
    [data-slat] img, [data-slat][data-open="1"] img { filter: none !important; transform: none; }
    [data-slat] [data-vlabel] { display: none; }
    [data-slat] [data-cap], [data-slat][data-open="1"] [data-cap] { opacity: 1; transform: none; }
    [data-slat] [data-cap] span:last-child { white-space: normal; }
    /* ledger: venue on its own line, occasion beneath */
    #ledger ol li { grid-template-columns: 26px minmax(0,1fr) !important; row-gap: 4px; }
    #ledger ol li > span:last-child { grid-column: 2; }
    /* selected credits stack */
    #about ul li { grid-template-columns: minmax(0,1fr) !important; }
  }
  [data-thumb] img { filter: grayscale(1) contrast(1.05); transition: filter .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  [data-thumb]:hover img { filter: none; transform: scale(1.04); }
  [data-thumb] img { filter: grayscale(1) contrast(1.05); transition: filter .5s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  [data-thumb]:hover img { filter: none; transform: scale(1.04); }
  body[data-lb-lock] { overflow: hidden; }
  [data-reveal] { opacity: 0; transform: translateY(16px); will-change: opacity, transform;
    transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); }
  [data-reveal][data-in="1"] { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } }
  @media print { [data-reveal] { opacity: 1 !important; transform: none !important; } [data-lightbox] { display: none !important; } }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Hover + focus states (were inline in the source design) ── */
.nav-link:hover, .nav-link:focus-visible { color: #E6E4DF; }
.quiet-link:hover, .quiet-link:focus-visible { color: #E6E4DF; border-color: #E6E4DF; }
.svc:hover { background: rgba(230,228,223,.04); }
.h-nudge:hover { animation: hnudge .62s cubic-bezier(.33,1,.68,1); }
.btn-outline:hover, .btn-outline:focus-visible { border-color: #E6E4DF; background: rgba(230,228,223,.06); }
.underline-link:hover, .underline-link:focus-visible { border-color: #E6E4DF; }
.mix-link:hover, .mix-link:focus-visible { color: #E6E4DF; border-color: #E6E4DF; }
.lb-btn:hover, .lb-btn:focus-visible { border-color: #E6E4DF; background: rgba(230,228,223,.08); }
.fld:focus { border-color: #E6E4DF; outline: none; }
#ledger ol li:hover { background: rgba(230,228,223,.03); color: var(--acc); }