:root {--primary-dark:#2b2d42; --primary-medium:#3d3f56; --primary-light:#5c5e73; --accent-1:#d4537e; --accent-2:#f97316; --accent-3:#facc15; --accent-dark:#9f1239; --bg-1:#fff8f0; --bg-2:#fef3c7; --bg-3:#fde68a; --surface-bg:#fffbf5; --overlay-bg:rgba(43,45,66,0.97); --glow-1:rgba(212,83,126,0.10); --glow-2:rgba(249,115,22,0.10); --glow-3:rgba(250,204,21,0.08); --glow-4:rgba(212,83,126,0.06); --shadow-accent:rgba(212,83,126,0.35); --shadow-accent-2:rgba(249,115,22,0.30); --text-primary:#2b2d42; --text-secondary:#5c5e73; --text-muted:#8d8fa3; --glass-bg:rgba(255,255,255,0.12); --glass-border:rgba(255,255,255,0.26); --shadow-lg:0 22px 48px -12px rgba(0,0,0,0.35); --shadow-xl:0 34px 64px -18px rgba(0,0,0,0.45); --font-primary:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --font-display:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif; --space-xs:0.25rem; --space-sm:0.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem; --radius-sm:0.375rem; --radius-lg:0.75rem; --radius-2xl:1.5rem; --radius-full:9999px; --transition-medium:0.3s ease-out; --transition-slow:0.5s ease-out; --brand-gradient:linear-gradient( 135deg,var(--accent-1) 0%,var(--accent-2) 40%,var(--accent-3) 80% ); --brand-gradient-90:linear-gradient( 90deg,var(--accent-1),var(--accent-2),var(--accent-3) ); --fx:1;}
*,*::before,*::after {margin:0; padding:0; box-sizing:border-box;}
html {scroll-behavior:smooth; overflow-x:hidden; overflow-y:auto;}
body {font-family:var(--font-primary); line-height:1.6; min-height:auto; overflow-x:hidden; overflow-y:visible; position:relative; background:linear-gradient(170deg, #056ec9 0%, #F472B6 40%, #1E003D 100%);}
body::before {content:''; position:fixed; inset:0; background-image:radial-gradient(800px 800px at 12% 18%,var(--glow-1) 0%,transparent 60%),radial-gradient(900px 900px at 88% 82%,var(--glow-2) 0%,transparent 60%),radial-gradient(700px 700px at 50% 50%,var(--glow-3) 0%,transparent 55%),radial-gradient(600px 600px at 25% 80%,var(--glow-4) 0%,transparent 60%); z-index:-1; animation:backgroundShift 20s ease-in-out infinite;}

@keyframes backgroundShift {
  0%,100% {transform:scale(1) rotate(0deg);}
  50% {transform:scale(1.1) rotate(1deg);}
}
h1,h2,h3,h4,h5,h6 {font-family:var(--font-display); font-weight:700; line-height:1.2; margin-bottom:var(--space-md);}
h1 {font-size:clamp(2.5rem,5vw,4rem);}
h2, h3 {font-size:clamp(1.5rem,3vw,2rem);}
p {margin-bottom:var(--space-md); color:var(--text-secondary);}
a {color:var(--accent-3); text-decoration:none; transition:color var(--transition-medium),text-shadow var(--transition-medium);}
a:hover {color:var(--accent-1); text-shadow:0 0 8px var(--shadow-accent);}
.container {width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-lg);}
.glass-effect {background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); box-shadow:var(--shadow-lg);}
.desktop-header {display:none;}
.desktop-header-inner,.mobile-header-inner {display:flex; align-items:center; justify-content:space-between; padding:1rem 0rem 1rem .8rem; height:80px;}
.hero-title {background:linear-gradient(90deg, #fff700 0%, #ffffff 30%, var(--accent-2) 65%, var(--accent-3) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:2.5rem; font-weight:900; margin-bottom:16px; animation:titleGlow 3s ease-in-out infinite alternate; text-align:center; color:transparent;}
.site-logo {display:inline-flex; align-items:center; gap:8px; transition:transform var(--transition-medium);}
.site-logo:hover {transform:scale(1.05);}
.logo-icon {height:52px; width:52px; flex-shrink:0; animation: logo-bob 2.6s ease-in-out infinite; transform-origin: center 60%;}
.site-logo:hover .logo-icon { animation-duration: 0.7s; }
@keyframes logo-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  25%      { transform: translateY(-1px) rotate(-2deg); }
  75%      { transform: translateY(-1px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-icon { animation: none; }
}
.logo-word {font-family:var(--font-display); font-weight:800; font-size:1.6rem; background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap;}

@media (max-width:880px) {
  .logo-icon {height:36px; width:36px;}
  .logo-word {display:none;}
  .mobile-header-inner {height:56px; padding:.5rem 0 .5rem .8rem;}
  .search-container {position:relative; overflow:hidden; padding-right:60px; border:1px solid rgb(77 159 163); background:#fff;}
  .search-input {padding-right:128px; border:0; box-shadow:none;}
  .search-button {position:absolute; right:8px; top:50%; width:44px; height:44px; border-radius:50%; padding:0 14px; transform:translateY(-50%); border:1px solid rgba(255,255,255,.18); background:linear-gradient(135deg,var(--accent-1) 0%,var(--accent-dark) 100%); box-shadow:0 6px 16px var(--shadow-accent),inset 0 0 0 2px rgba(255,255,255,.08); font-size:0; color:transparent;}
  .search-button span,.search-button .label,.search-button::after {display:none;}
  .search-button svg {width:20px; height:20px; display:block; margin:auto; fill:#fff;}
  .hero-title {font-size:2rem; margin-bottom:0;}
}
.desktop-nav {display:flex; align-items:center;}
.desktop-menu {display:flex; gap:var(--space-xl); list-style:none; font-size:1.25rem; font-weight:500;}
.desktop-menu a {font-weight:500; color:var(--text-secondary); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-full); position:relative; transition:transform var(--transition-medium),color var(--transition-medium),background var(--transition-medium);}
.desktop-menu a:hover {color:var(--text-primary); background:var(--glass-bg); transform:translateY(-2px);}
.desktop-menu a::after {content:''; position:absolute; bottom:-5px; left:50%; width:0; height:2px; background:var(--brand-gradient-90); transition:width var(--transition-medium),left var(--transition-medium); transform:translateX(-50%);}
.desktop-menu a:hover::after {width:80%;}
.mobile-nav-toggle,.search-button,.btn-primary {background:var(--brand-gradient); border:none; color:var(--text-primary); border-radius:var(--radius-lg); font-weight:600; cursor:pointer; transition:transform var(--transition-medium),box-shadow var(--transition-medium); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);}
.mobile-nav-toggle:hover,.btn-primary:hover {transform:scale(1.05); box-shadow:0 10px 24px -6px var(--shadow-accent),0 6px 14px -6px var(--shadow-accent-2);}
.btn-primary {padding:var(--space-md) var(--space-xl); background:var(--accent-color,#5b8cff); color:#fff;}
.mobile-nav-toggle {width:48px; height:48px; position:relative; overflow:hidden;}
.mobile-nav-toggle::before {content:''; position:absolute; inset:0; left:-100%; background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.2),transparent ); transition:left var(--transition-slow);}
.mobile-nav-toggle:hover::before {left:100%;}
.bar {width:24px; height:2px; background:var(--text-primary); position:relative; transition:background var(--transition-medium);}
.bar::before,.bar::after {content:''; position:absolute; width:24px; height:2px; background:var(--text-primary); transition:transform var(--transition-medium),top var(--transition-medium),bottom var(--transition-medium);}
.bar::before {top:-8px;}
.bar::after {bottom:-8px;}
.mobile-nav-toggle.active .bar {background:transparent;}
.mobile-nav-toggle.active .bar::before {transform:rotate(45deg); top:0;}
.mobile-nav-toggle.active .bar::after {transform:rotate(-45deg); bottom:0;}
.mobile-nav {position:fixed; inset:0; background:var(--overlay-bg); backdrop-filter:blur(20px); z-index:999; display:flex; flex-direction:column; padding:var(--space-xl); opacity:0; visibility:hidden; transform:translateY(-100%); transition:opacity var(--transition-slow),transform var(--transition-slow),visibility var(--transition-slow); overflow:auto; -webkit-overflow-scrolling:touch;}
.mobile-nav.active {opacity:1; visibility:visible; transform:translateY(0);}
.mobile-nav-header {display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-2xl); padding-top:var(--space-lg); padding:14px 16px;}
.mobile-nav-close {background:transparent; border:none; color:var(--text-primary); font-size:2rem; cursor:pointer; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-lg); transition:background var(--transition-medium),transform var(--transition-medium);}
.mobile-nav-close:hover {background:var(--glass-bg); transform:rotate(90deg);}
.mobile-menu {display:flex; flex-direction:column; gap:var(--space-lg); list-style:none;}
.mobile-menu-item {opacity:0; transform:translateX(-50px); transition:opacity var(--transition-medium),transform var(--transition-medium); transition-delay:calc(var(--i,0) * 0.1s);}
.mobile-nav.active .mobile-menu-item {opacity:1; transform:translateX(0);}
.mobile-menu a {font-size:1.5rem; font-weight:600; color:#fff; display:block; padding:var(--space-lg); border-radius:var(--radius-lg); position:relative; overflow:hidden; transition:color var(--transition-medium),transform var(--transition-medium),background var(--transition-medium);}
.mobile-menu a:hover {color:var(--accent-3); background:var(--glass-bg); transform:translateX(10px);}
.mobile-menu a::before {content:''; position:absolute; left:0; top:0; width:4px; height:100%; background:var(--brand-gradient); transform:scaleY(0); transition:transform var(--transition-medium);}
.mobile-menu a:hover::before {transform:scaleY(1);}
.sf-search-main {min-height:auto; display:flex; flex-direction:column; overflow-x:clip; overflow-y:visible; align-items:center;}
.hero {flex:1; display:flex; align-items:center; justify-content:center; padding:15px; position:relative; overflow-x:clip; overflow-y:visible;}
.hero-content {max-width:1200px; width:100%; z-index:2; position:relative;}

@media (min-width:1024px) {
  .hero-title {font-size:4.2rem;}
  .hero {padding:34px 0px 0px 0px;}
  .container {padding:7px;}
  :is(.home,.page-template-page-lyrics-translation,.page-template-page-lyrics-translation-php) .sf-search-main .search-container,.songfinder-search .search-container {max-width:1200px; width:100%; margin:0 auto;}
  .songfinder-search:is(input[type="search"],input[type="text"]) {flex:1;}
  .share-dock {--s:60px; --gap:1.1rem; position:fixed; left:20px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:var(--gap);}
  .share-item {position:relative;}
  .share-btn {width:var(--s); height:var(--s); border-radius:14px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; overflow:hidden; font-size:0; box-shadow:0 10px 24px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.12); transition:width .22s,transform .2s,filter .2s,box-shadow .2s;}
  .share-btn svg {width:28px; height:28px; flex:0 0 auto;}
  .share-btn::before {content:'Share'; color:#fff; font:700 15px/1 system-ui; opacity:0; max-width:0; margin-left:10px; white-space:nowrap; transform:translateX(8px); transition:max-width .22s,opacity .2s,transform .2s;}
  .share-item:hover>.share-btn {width:calc(var(--s) + 96px); transform:translateX(6px); justify-content:flex-start; gap:12px;}
  .share-item:hover>.share-btn::before {opacity:1; max-width:96px; transform:none;}
  .footer-links-grid {grid-template-columns:repeat(3,1fr);}
}

@keyframes titleGlow {
  0% {filter:drop-shadow(0 0 20px var(--shadow-accent));}
  100% {filter:drop-shadow(0 0 30px var(--shadow-accent-2));}
}
.search-form {margin:0; position:relative;}
.search-container {position:relative; max-width:1200px !important; width:100% !important; margin:1px auto;}
.search-input {width:100%; padding:var(--space-lg) var(--space-xl); padding-right:140px; font-size:1.125rem; backdrop-filter:blur(20px); border:2px solid var(--glass-border); color:var(--text-primary); outline:none; transition:border-color var(--transition-medium),box-shadow var(--transition-medium),transform var(--transition-medium); box-shadow:var(--shadow-lg);}
.search-input::placeholder {color:var(--text-muted);}
.genre-tags {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-md); margin:var(--space-2xl) 0;}
.genre-tag {padding:var(--space-sm) var(--space-lg); background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-full); color:var(--text-secondary); font-size:0.875rem; font-weight:500; cursor:pointer; transition:transform var(--transition-medium),color var(--transition-medium),background var(--transition-medium),box-shadow var(--transition-medium); position:relative; overflow:hidden;}
.genre-tag:hover {color:var(--text-primary); background:var(--brand-gradient); transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.genre-tag::before {content:''; position:absolute; inset:0; left:-100%; background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.2),transparent ); transition:left var(--transition-slow);}
.genre-tag:hover::before {left:100%;}
.cta {text-align:center; font-size:clamp(1.5rem,3vw,2rem); color:#acf1c2; margin:var(--space-2xl) 0 var(--space-lg);}
.hero-content p {font-size:1.1rem; color:#ffffff; max-width:1200px; margin:0 auto var(--space-2xl); line-height:1.7; padding:10px;}
.vinyl-record {width:200px; height:200px; background:linear-gradient(135deg,var(--primary-medium),var(--primary-light)); border-radius:50%; margin:var(--space-2xl) auto; position:relative; animation:vinylSpin 10s linear infinite; box-shadow:var(--shadow-xl);}
.vinyl-record::before {content:''; position:absolute; inset:10px; border-radius:50%; background:repeating-conic-gradient( from 0deg,var(--primary-dark) 0deg 2deg,var(--primary-medium) 2deg 4deg );}
.vinyl-label {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--text-primary); z-index:2; background:var(--brand-gradient);}

@keyframes vinylSpin {
  to {transform:rotate(360deg);}
}
.waveform {position:absolute; bottom:0; left:0; width:100%; height:100px; display:flex; align-items:end; justify-content:center; gap:4px; opacity:0.3;}
.wave {width:4px; background:linear-gradient( 180deg,var(--accent-1) 0%,var(--accent-2) 50%,var(--accent-3) 100% ); border-radius:var(--radius-sm); animation:waveAnimation 1.5s ease-in-out infinite;}
.wave-1 {animation-delay:0s;}
.wave-2 {animation-delay:0.2s;}
.wave-3 {animation-delay:0.4s;}

@keyframes waveAnimation {
  0%,100% {height:20px;}
  50% {height:80px;}
}
.content-section {background:#fdfaf5; backdrop-filter:blur(10px); overflow:visible;}
.entry-content {max-width:100%; margin:0 auto; padding:var(--space-sm); background:var(--glass-bg); border-radius:var(--radius-2xl); border:1px solid var(--glass-border); box-shadow:var(--shadow-lg);}
.ad-container, .ad-wrapper {width:100%; max-width:100%; margin:0 auto; overflow:hidden; position:relative; z-index:10; isolation:isolate; box-sizing:border-box; text-align:center;}
.ad-wrapper ins.adsbygoogle {width:100%!important; max-width:100%!important;}
.in-article-ad {margin:1.5rem 0; text-align:center; overflow:hidden;}
.loading-spinner {width:40px; height:40px; border:3px solid var(--glass-border); border-top:3px solid var(--accent-3); border-radius:50%; animation:vinylSpin 1s linear infinite;}
.fade-in-up {animation:fadeInUp 0.6s ease-out;}

@keyframes fadeInUp {
  from {opacity:0; transform:translateY(30px);}
  to {opacity:1; transform:translateY(0);}
}

@media (hover:hover) and (pointer:fine) {
  *:focus {outline:2px solid var(--accent-1); outline-offset:2px;}
}

@media (prefers-contrast:high) {
  :root {--glass-bg:rgba(255,255,255,0.2); --glass-border:rgba(255,255,255,0.4);}
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  .report-fab,.btn-primary,.btn-secondary,.report-modal,.report-dialog {animation:none; transition:none;}
}

@media (min-width:768px) {
  .desktop-header {display:block;}
  .mobile-header {display:none;}
  .hero {padding:60px var(--space-xl) var(--space-2xl);}
  .container {padding:0 var(--space-xl);}
  .vinyl-record {width:200px; height:200px;}
  .vinyl-label {width:80px; height:80px; font-size:2rem;}
  .footer-top {grid-template-columns:auto 1fr; align-items:start;}
  .footer-brand,.footer-links-grid {text-align:left;}
  .footer-logo {justify-content:flex-start;}
  .footer-description {margin:0;}
  .social-links {justify-content:flex-start;}
  .footer-bottom {flex-direction:row; justify-content:space-between;}
}
.site-header,.desktop-header,.mobile-header {position:static; margin-top:0px;}
.search-button {position:absolute; right:10px; top:50%; transform:translateY(-50%); height:48px; padding:0 20px; border-radius:9999px; background:var(--brand-gradient); color:#fff; font:700 15px/1 var(--font-primary); letter-spacing:.2px; border:1px solid rgba(255,255,255,.25); box-shadow:0 12px 24px rgba(6,182,212,.35),inset 0 1px 0 rgba(255,255,255,.6); transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; isolation:isolate;}
#mobileNav,.mobile-nav {background:linear-gradient(135deg,var(--primary-dark),var(--primary-medium));}
.mobile-nav-header .site-logo,.mobile-nav-header .logo-container {display:block !important; max-height:60px; line-height:0; overflow:hidden;}
.mobile-nav .mobile-menu .site-logo,.mobile-nav .mobile-menu .logo-container {display:none !important;}
html.admin-bar body,body.admin-bar {padding-top:0px;}

@media (max-width:782px) {
  html.admin-bar body,body.admin-bar {padding-top:45px;}
}
.report-fab {align-items:center; background:var(--accent-color,#5b8cff); backdrop-filter:saturate(140%) blur(6px); border:2px solid rgba(255,255,255,.9); border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.25); color:#fff; cursor:pointer; display:inline-flex; font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; gap:.5rem; padding:.75rem 1rem; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); transition:transform .15s ease,box-shadow .15s ease,filter .15s ease; z-index:999999;}
.report-fab:hover {box-shadow:0 14px 30px rgba(0,0,0,.3); transform:translateY(-6px);}
.report-fab:active {transform:translateY(0) scale(.98);}
.report-fab svg {fill:none; height:18px; stroke:currentColor; width:18px;}
.report-fab:focus-visible {outline:3px solid #fff; outline-offset:2px;}

@media (max-width:480px) {
  .report-fab span {display:none;}
  .report-fab {padding:.8rem;}
  .report-row input,.report-row textarea {font-size:16px!important;}
}
.report-modal[hidden] {display:none;}
.report-modal {animation:report-fade .18s ease-out; backdrop-filter:blur(2px); background:rgba(0,0,0,.45); display:grid; inset:0; padding:1rem; place-items:center; position:fixed; z-index:10000;}
.report-dialog {animation:report-pop .18s ease-out; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); color:#111; max-height:80vh; overflow:auto; padding:1rem; width:min(560px,calc(100% - 2rem));}
.report-h {margin:0 0 .5rem;}
.report-row {margin:.6rem 0;}
.report-row label {display:block; font-weight:600; margin-bottom:.3rem;}
.report-row textarea,.report-row input {background:inherit; border:1px solid rgba(0,0,0,.15); border-radius:10px; color:inherit; padding:.6rem .7rem; width:100%;}
.report-row textarea:focus,.report-row input:focus {box-shadow:0 0 0 3px color-mix(in oklab,var(--accent-color,#5b8cff) 25%,transparent); outline:2px solid var(--accent-color,#5b8cff);}
.report-foot {display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem;}
.btn-primary,.btn-secondary {border:1px solid transparent; border-radius:999px; cursor:pointer; padding:.55rem 1rem; transition:transform .12s ease,background-color .12s ease,border-color .12s ease,color .12s ease;}
.btn-primary:hover {filter:brightness(1.05);}
.btn-primary:active {transform:scale(.98);}
.btn-secondary {background:transparent; border-color:currentColor; color:inherit;}
.btn-secondary:hover {background:rgba(0,0,0,.06);}
.btn-secondary:active {transform:scale(.98);}

@keyframes report-fade {
  from {opacity:0;}
  to {opacity:1;}
}

@keyframes report-pop {
  from {opacity:0; transform:translateY(6px) scale(.98);}
  to {opacity:1; transform:translateY(0) scale(1);}
}

@supports (height:100dvh) {
  .report-dialog {max-height:80dvh;}
}
.share-dock {z-index:9999;}
.share-btn::after {content:none;}
.share-btn svg {display:block; fill:#fff;}
.sb-facebook {background:#1877f2;}
.sb-x {background:#000;}
.sb-linkedin {background:#0A66C2;}
.sb-whatsapp {background:#25D366;}
.share-item .share-flyout {display:none!important;}

@media (max-width:1023.98px) {
  .share-dock {display:none!important;}
  .report-fab {right:8px; bottom:calc(16px + env(safe-area-inset-bottom));}
}

@media (print) {
  .share-dock {display:none;}
}
.songfinder-search input[type=text] {color:#000;}
.desktop-header,.mobile-header {background:#fff; overflow:hidden!important;}
.footer {position:relative; overflow:hidden; margin-top:var(--space-xl); padding:var(--space-lg) 0; color:var(--text-secondary); background:linear-gradient(135deg,var(--primary-dark),var(--primary-medium));}
.footer::before {content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient( 90deg,transparent,var(--accent-1),var(--accent-2),transparent );}
.footer-content {position:relative; z-index:2;}
.footer-top {display:grid; grid-template-columns:1fr; gap:var(--space-md); margin-bottom:var(--space-md);}
.footer-brand,.footer-links-grid {text-align:center;}
.footer-logo,.social-link {display:flex; align-items:center; justify-content:center;}
.footer-logo {gap:var(--space-xs); margin-bottom:var(--space-xs);}
.footer-description,.footer-link,.copyright p,.made-with {color:var(--text-muted);}
.footer-description {max-width:400px; line-height:1.4; margin:0 auto; font-size:.85rem;}
.footer-links-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-xl);}
.footer-heading {font:600 1.125rem var(--font-display); color:var(--text-primary); margin-bottom:var(--space-md);}
.footer-menu {list-style:none; display:flex; flex-direction:column; gap:var(--space-sm);}
.footer-link {padding:var(--space-xs) 0; transition:color var(--transition-medium),transform var(--transition-medium);}
.footer-link:hover {color:var(--accent-3); transform:translateX(5px);}
.social-links {display:flex; justify-content:center; gap:var(--space-md); margin-top:var(--space-md);}
.social-link {width:44px; height:44px; border-radius:var(--radius-lg); background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text-muted); transition:background var(--transition-medium),color var(--transition-medium),transform var(--transition-medium),box-shadow var(--transition-medium);}
.social-link:hover {background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:var(--text-primary); transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.footer-bottom {display:flex; align-items:center; justify-content:center; padding-top:var(--space-sm); border-top:1px solid var(--glass-border); text-align:center;}
.footer-bottom p {font-size:.875rem; color:var(--text-muted);}

@media (max-width:1024px) {
  .menu-icon {display:flex; flex-direction:column; justify-content:space-around; align-items:center; width:44px; height:38px; padding:2px; border:0; background:var(--bg-1); cursor:pointer; position:relative; z-index:2147483647; -webkit-tap-highlight-color:transparent;}
}
.menu-icon span {display:block; width:26px; height:3px; border-radius:2px; background:var(--brand-gradient); transition:opacity .2s;}
.menu-icon::after {content:'×'; position:absolute; inset:0; display:grid; place-items:center; font-size:24px; line-height:1; opacity:0; transition:opacity .2s;}
.menu-icon.active span {opacity:0;}
.menu-icon.active {position:fixed; top:calc(12px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right));}
.menu-icon.active::after {opacity:1;}
ins.adsbygoogle {margin:0!important; display:block;}
:is(.site-header,.desktop-header,.mobile-header) {width:100%; margin:0; border-radius:0; border-bottom:1px solid rgba(0,0,0,.06);}
:is(.site-header,.desktop-header,.mobile-header) .container {max-width:none; width:100%; padding-inline:24px; box-sizing:border-box;}
:is(.site-header,.desktop-header,.mobile-header):is(.wrap,.inner) {max-width:1320px; margin-inline:auto; display:flex; align-items:center; gap:24px;}
html,body {overflow-x:hidden; overflow-y:auto;}
:is(.site,.page,.wrapper,.main,.content) {overflow-x:clip!important; overflow-y:visible!important; height:auto!important;}
.desktop-header .google-auto-placed, .mobile-header .google-auto-placed, .desktop-header ins.adsbygoogle, .mobile-header ins.adsbygoogle, .desktop-header iframe[id^='aswift'], .mobile-header iframe[id^='aswift'] {display:none!important; height:0!important; max-height:0!important; overflow:hidden!important; visibility:hidden!important;}

/* ─── Block Auto Ads side-rail / sidebar (Google injects these outside our containers) ─── */
body {display:block !important;}
.google-auto-placed {display:none !important; width:0 !important; height:0 !important; overflow:hidden !important; position:absolute !important;}

/* ─── Protect main content from Auto Ads layout interference ─── */
.sf-search-main, .hero-content, .songfinder-search {width:100%; max-width:100%; position:relative; z-index:1;}
.sf-search-main, .hero, section, header, footer, main {flex-shrink:0; min-width:0;}

/* ─── Google CSE: full-width results ─── */
.gsc-control-cse {text-align:left; background:transparent; border-color:transparent; box-shadow:none; width:100% !important;}
.gsc-control-cse:has(.gsc-result) {background:#fff; border-color:#e5e7eb; margin-top:-7px; max-width:100% !important; width:100% !important;}
#search-results {position:relative; z-index:1; width:100%; max-width:100%; margin:0 auto; padding:0; isolation:isolate;}
#search-results .gsc-results-wrapper-nooverlay, #search-results .gsc-results-wrapper-overlay {position:static !important; width:100% !important; max-width:100% !important;}
#search-results .gsc-wrapper, #search-results .gsc-resultsbox-visible, #search-results .gsc-resultsRoot, #search-results .gsc-results, #search-results .gsc-webResult, #search-results .gsc-table-cell-snippet-close, #search-results table.gsc-table-result {width:100% !important; max-width:100% !important;}
.gsc-inline-ad {margin:12px 0; padding:8px 0; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;}
.gsc-above-wrapper-area {border-bottom:none !important;}
.gsc-adBlock {border:1px solid #f0e6d2; border-left:4px solid #e8c878; border-bottom:none !important; border-radius:var(--radius-md); padding:16px 20px; margin-bottom:16px; background:linear-gradient(330deg, #fffcf5, #ff4d10);}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b {text-decoration:underline;}

.btn-solid {border:0; padding:.5rem .9rem; border-radius:999px; color:#fff; background:var(--accent-grad); font-weight:700; cursor:pointer;}
/* === Accessibility helpers (added) =================================== */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}
.skip-link {
  position: absolute;
  top: -100px; left: 0;
  background: var(--accent-1, #d4537e);
  color: #fff;
  padding: .75rem 1rem;
  z-index: 100000;
  font-weight: 700;
  border-radius: 0 0 .5rem 0;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* =====================================================
 * FESTIVAL GLOW OVERRIDES — match the reference mockup
 * ===================================================== */

/* Hero title: bold 4-stop festival gradient (wine → magenta → orange → gold) */
.hero-title {
  background: linear-gradient(90deg, #fff700 0%, #ffffff 30%, var(--accent-2) 65%, var(--accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Search button: solid dark burgundy, no rainbow gradient */
.search-button {
  background: var(--accent-dark);
  box-shadow: 0 12px 24px var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.18);
}
.search-button:hover { background: var(--accent-1); }

/* =====================================================
 * Hero equalizer — animated 5-bar EQ next to hero title.
 * Injected by main.js into a wrapper around .hero-title.
 * ===================================================== */
.hero-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1rem);
  flex-wrap: wrap;
}
.hero-title-row .hero-title { margin-bottom: 20px; }

.hero-eq {
  --eq-h: 38px;
  --eq-w: 5px;
  --eq-gap: 4px;
  display: inline-flex;
  align-items: flex-end;
  gap: var(--eq-gap);
  height: var(--eq-h);
  padding-bottom: 4px;
  flex-shrink: 0;
}
.hero-eq i {
  display: block;
  width: var(--eq-w);
  height: 100%;
  border-radius: 3px;
  background: var(--brand-gradient);
  transform-origin: bottom center;
  animation: hero-eq-bounce 1s ease-in-out infinite;
  box-shadow: 0 2px 6px var(--shadow-accent-2);
}
.hero-eq i:nth-child(1) { animation-duration: 0.9s;  animation-delay: -0.10s; }
.hero-eq i:nth-child(2) { animation-duration: 1.2s;  animation-delay: -0.45s; }
.hero-eq i:nth-child(3) { animation-duration: 0.8s;  animation-delay: -0.20s; }
.hero-eq i:nth-child(4) { animation-duration: 1.1s;  animation-delay: -0.65s; }
.hero-eq i:nth-child(5) { animation-duration: 1.0s;  animation-delay: -0.30s; }

@keyframes hero-eq-bounce {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1);    }
}

@media (max-width: 880px) {
  .hero-eq { --eq-h: 22px; --eq-w: 3px; --eq-gap: 2px; }
  .hero-title-row { flex-wrap: nowrap; gap: 0.45rem; }
  /* Allow the title to shrink instead of forcing the row to wrap */
  .hero-title-row > .hero-title { min-width: 0; }
}

/* Very narrow phones — keep 2 EQs but trim each to 3 bars and grow title.
   3 bars + smaller gap saves enough horizontal room that long titles like
   "Song Finder by Lyrics" stay legible (1.5–2rem) on a single line down to ~360px. */
@media (max-width: 520px) {
  .hero-eq { --eq-h: 20px; --eq-w: 3px; --eq-gap: 2px; }
  .hero-eq i:nth-child(n+4) { display: none; }
  .hero-title-row { gap: 0.4rem; }
  .hero-title-row > .hero-title {
    font-size: clamp(1.5rem, 6.2vw, 2rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eq i { animation: none; transform: scaleY(0.7); }
}

/* =====================================================
 * Compact pill search bar — narrower, rounded
 * Overrides existing rule that forces max-width:1200px
 * ===================================================== */
.search-container,
:is(.home,.page-template-page-lyrics-translation,.page-template-page-lyrics-translation-php) .sf-search-main .search-container,
.songfinder-search .search-container {
  max-width: 780px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.search-input {
  border-radius: 9999px;
  padding: 18px 80px 18px 28px;
  font-size: 1.0625rem;
}

/* =====================================================
 * Left-side EQ — same bars, different timings so the two
 * sides don't read as a frozen mirror image.
 * ===================================================== */
.hero-eq.is-left i:nth-child(1) { animation-duration: 1.00s; animation-delay: -0.55s; }
.hero-eq.is-left i:nth-child(2) { animation-duration: 0.85s; animation-delay: -0.05s; }
.hero-eq.is-left i:nth-child(3) { animation-duration: 1.15s; animation-delay: -0.40s; }
.hero-eq.is-left i:nth-child(4) { animation-duration: 0.95s; animation-delay: -0.15s; }
.hero-eq.is-left i:nth-child(5) { animation-duration: 1.05s; animation-delay: -0.70s; }

/* =====================================================
 * Music note rain — falling ♪ ♫ ♩ ♬ in the background.
 * Injected by functions.php only on front page + pages
 * (NOT on single posts). Notes spawned by main.js.
 * ===================================================== */
.note-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.note-rain span {
  position: absolute;
  top: -32px;
  font-family: 'Outfit', var(--font-display), system-ui, sans-serif;
  font-weight: 700;
  user-select: none;
  will-change: transform, opacity;
  animation: noteFall var(--dur, 12s) linear var(--delay, 0s) infinite;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@keyframes noteFall {
  0%   { transform: translateY(-30px) rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.5; }
  92%  { opacity: 0.5; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .note-rain { display: none; }
}