/*
Theme Name: Lovelane Dark
Theme URI: https://lovelanemusicgroup.com
Author: Ron Cobert (OhYeahLive)
Author URI: https://ohyeahlive.com
Description: A refined dark-and-gold WordPress theme for Lovelane Music Group — Detroit soul, funk, and R&B, est. 1960. Modern, restrained, fully responsive. Standalone (does not require a parent theme).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lovelane-dark
Tags: music, entertainment, dark, gold, responsive, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ink:        #0c0a07;   /* deepest background */
  --ink-2:      #12100c;   /* header / panels */
  --ink-3:      #161310;   /* content surface */
  --card:       #1d1915;   /* cards */
  --card-line:  #3a3226;   /* hairline on cards */
  --gold:       #d8b25c;   /* primary accent */
  --gold-dim:   #a9924f;   /* secondary gold */
  --gold-soft:  rgba(216,178,92,.14);
  --cream:      #f2ecdd;   /* primary text on dark */
  --cream-2:    #b6a878;   /* muted text */
  --cream-3:    #8f7f56;   /* faint / meta */
  --teal:       #2b8f7e;   /* rare secondary accent */
  --maxw:       1200px;
  --pad:        clamp(1rem, 4vw, 2.5rem);
  --radius:     8px;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-sans);
  font-weight:400;
  line-height:1.7;
  font-size:1.05rem;
  overflow-x:hidden;
}
img,iframe,video{ max-width:100%; height:auto; }
img{ display:block; }
a{ color:var(--gold); text-decoration:none; transition:color .18s ease; }
a:hover,a:focus{ color:var(--cream); }
h1,h2,h3,h4,h5,h6{ font-weight:400; line-height:1.2; margin:0 0 .6em; color:var(--cream); }
p{ margin:0 0 1.2em; }
ul,ol{ margin:0 0 1.2em 1.4em; }
hr{
  border:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:2.5rem auto; max-width:var(--maxw);
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Accessibility skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--gold); color:var(--ink); padding:10px 16px; font-weight:500;
}
.skip-link:focus{ left:8px; top:8px; }
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); word-wrap:normal!important;
}

/* Layout container */
.ll-container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

/* ============================================================
   HEADER
   ============================================================ */
.ll-header{
  background:var(--ink-2);
  border-bottom:1px solid rgba(216,178,92,.35);
}
.ll-header-inner{
  display:flex; align-items:center; gap:20px;
  padding:20px var(--pad);
  max-width:var(--maxw); margin:0 auto;
  flex-wrap:wrap;
}
.ll-logo{ display:flex; align-items:center; gap:16px; flex:1 1 auto; min-width:0; }
.ll-logo img{ max-height:64px; width:auto; }
.ll-site-id .ll-site-title{
  font-family:var(--font-sans); font-weight:300; letter-spacing:.32em;
  color:var(--cream); font-size:clamp(1.2rem,3vw,1.6rem); text-transform:uppercase;
  margin:0; line-height:1.1;
}
.ll-site-id .ll-tagline{
  color:var(--gold-dim); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; margin:.45em 0 0;
}
.ll-header-tools{ display:flex; align-items:center; gap:14px; }
.ll-search-toggle{
  background:none; border:1px solid var(--gold-dim); color:var(--gold);
  width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:all .18s;
}
.ll-search-toggle:hover{ background:var(--gold); color:var(--ink); }

/* ============================================================
   PRIMARY NAV
   ============================================================ */
.ll-nav-wrap{ background:var(--ink); border-bottom:1px solid rgba(216,178,92,.25); }
.ll-nav{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.ll-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.ll-nav li{ position:relative; }
.ll-nav a{
  display:block; padding:16px 18px;
  color:var(--cream-2); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:400; border-bottom:2px solid transparent; transition:all .18s;
}
.ll-nav a:hover,
.ll-nav .current-menu-item > a,
.ll-nav .current_page_item > a{
  color:var(--cream); border-bottom-color:var(--gold);
}
/* Submenus */
.ll-nav ul ul{
  display:none; position:absolute; top:100%; left:0; z-index:50;
  background:var(--ink-2); border:1px solid var(--gold-dim); min-width:220px;
  flex-direction:column; padding:6px 0;
}
.ll-nav li:hover > ul,
.ll-nav li:focus-within > ul{ display:flex; }
.ll-nav ul ul a{ padding:11px 18px; border-bottom:0; font-size:.76rem; }
.ll-nav ul ul a:hover{ background:var(--gold-soft); color:var(--gold); }

/* Mobile menu toggle */
.ll-menu-toggle{
  display:none; background:none; border:1px solid var(--gold-dim); color:var(--gold);
  padding:10px 14px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; border-radius:var(--radius); margin:12px 0;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.ll-section-title{
  text-align:center; margin:2.6rem 0 1.8rem;
}
.ll-section-title span{
  font-family:var(--font-sans); font-weight:300; letter-spacing:.28em;
  color:var(--gold); font-size:clamp(1.1rem,3vw,1.5rem); text-transform:uppercase;
}
.ll-section-title::after{
  content:""; display:block; width:48px; height:1px; background:var(--gold);
  margin:12px auto 0;
}

/* ============================================================
   MEDIA EMBEDS  (Vimeo showcase + YouTube 16:9)
   ============================================================ */
.ll-showcase{
  max-width:var(--maxw); margin:0 auto 2.5rem;
  border:1px solid var(--gold-dim); border-radius:var(--radius); overflow:hidden;
  background:#000;
}
.ll-showcase iframe{ width:100%; height:720px; border:0; display:block; }

.ll-video{
  position:relative; width:100%; max-width:var(--maxw); margin:0 auto 2.5rem;
  padding-top:56.25%; height:0;
  border:1px solid var(--gold-dim); border-radius:var(--radius); overflow:hidden;
  background:#000;
}
.ll-video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.ll-feature{
  max-width:var(--maxw); margin:0 auto 2rem;
  border:1px solid var(--gold-dim); border-radius:var(--radius); overflow:hidden;
}
.ll-feature img{ width:100%; height:auto; }

/* ============================================================
   POST GRID
   ============================================================ */
.ll-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:22px; margin:0 0 2rem;
}
.ll-card{
  background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, border-color .2s ease;
}
.ll-card:hover{ transform:translateY(-4px); border-color:var(--gold-dim); }
.ll-card-thumb{ display:block; aspect-ratio:16/10; overflow:hidden; background:#241d14; }
.ll-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ll-card:hover .ll-card-thumb img{ transform:scale(1.04); }
.ll-card-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ll-cat{
  align-self:flex-start; background:var(--gold-soft); color:var(--gold);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 10px; border-radius:4px;
}
.ll-card-title{ font-family:var(--font-display); font-size:1.5rem; line-height:1.2; margin:0; }
.ll-card-title a{ color:var(--cream); }
.ll-card-title a:hover{ color:var(--gold); }
.ll-card-excerpt{ color:var(--cream-2); font-size:.92rem; margin:0; }
.ll-card-meta{ color:var(--cream-3); font-size:.76rem; font-style:italic; margin-top:auto; }

/* ============================================================
   SINGLE / PAGE CONTENT
   ============================================================ */
.ll-main{ padding:2rem 0 3rem; }
.ll-article{ max-width:820px; margin:0 auto; }
.ll-article .entry-title{
  font-family:var(--font-display); font-size:clamp(1rem,2vw,30rem); line-height:1.1;
  margin-bottom:.3em;
}
.ll-entry-meta{ color:var(--cream-3); font-size:.82rem; letter-spacing:.06em; margin-bottom:1.5rem; }
.ll-entry-meta a{ color:var(--gold-dim); }
.ll-featured-img{ margin:0 0 2rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--card-line); }
.ll-content{ font-size:1.08rem; }
.ll-content h2{ font-family:var(--font-display); font-size:2rem; margin-top:1.6em; }
.ll-content h3{ font-family:var(--font-display); font-size:1.6rem; margin-top:1.4em; }
.ll-content img{ border-radius:var(--radius); margin:1.5rem 0; }
.ll-content blockquote{
  border-left:3px solid var(--gold); margin:1.5rem 0; padding:.4rem 0 .4rem 1.4rem;
  font-family:var(--font-display); font-size:1.4rem; font-style:italic; color:var(--cream-2);
}
.ll-content a{ text-decoration:underline; text-underline-offset:3px; }
.ll-content code{
  background:var(--ink-2); padding:.15em .4em; border-radius:4px; font-size:.9em; color:var(--gold);
}

/* Tags / share row */
.ll-tags{ margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.ll-tags a{
  background:var(--card); border:1px solid var(--card-line); color:var(--cream-2);
  font-size:.72rem; padding:4px 12px; border-radius:20px; letter-spacing:.05em;
}
.ll-tags a:hover{ border-color:var(--gold); color:var(--gold); }

/* ============================================================
   PAGINATION
   ============================================================ */
.ll-pagination{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:2.5rem 0; }
.ll-pagination .page-numbers{
  min-width:42px; text-align:center; padding:8px 14px;
  background:var(--card); border:1px solid var(--card-line); color:var(--cream-2);
  border-radius:var(--radius); font-size:.85rem; letter-spacing:.08em;
}
.ll-pagination .page-numbers:hover{ border-color:var(--gold); color:var(--gold); }
.ll-pagination .page-numbers.current{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

/* ============================================================
   SIDEBAR / WIDGETS
   ============================================================ */
.ll-sidebar{ }
.ll-widget{
  background:var(--ink-2); border:1px solid var(--card-line); border-radius:var(--radius);
  padding:20px; margin-bottom:22px;
}
.ll-widget .widget-title{
  font-family:var(--font-sans); font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  font-size:.9rem; color:var(--gold); margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--card-line);
}
.ll-widget ul{ list-style:none; margin:0; padding:0; }
.ll-widget li{ padding:6px 0; border-bottom:1px solid rgba(58,50,38,.5); }
.ll-widget li:last-child{ border-bottom:0; }
.ll-widget a{ color:var(--cream-2); }
.ll-widget a:hover{ color:var(--gold); }

/* Content + sidebar layout */
.ll-layout{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:900px){
  .ll-layout.has-sidebar{ grid-template-columns:minmax(0,1fr) 320px; }
}

/* Search form */
.ll-search-form{ display:flex; gap:8px; }
.ll-search-form input[type="search"]{
  flex:1; background:var(--ink); border:1px solid var(--card-line); color:var(--cream);
  padding:10px 14px; border-radius:var(--radius); font-size:.95rem;
}
.ll-search-form input[type="search"]:focus{ outline:none; border-color:var(--gold); }
.ll-search-form button{
  background:var(--gold); border:0; color:var(--ink); padding:10px 18px; border-radius:var(--radius);
  cursor:pointer; font-weight:500; letter-spacing:.06em;
}
.ll-search-form button:hover{ background:var(--cream); }

/* Search overlay */
.ll-search-overlay{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(12,10,7,.97);
  align-items:center; justify-content:center; padding:var(--pad);
}
.ll-search-overlay.open{ display:flex; }
.ll-search-overlay .inner{ width:100%; max-width:640px; }
.ll-search-close{
  position:absolute; top:24px; right:28px; background:none; border:0; color:var(--gold);
  font-size:2rem; cursor:pointer; line-height:1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ll-footer{
  background:var(--ink-2); border-top:1px solid rgba(216,178,92,.35);
  padding:3rem 0 2rem; margin-top:3rem;
}
.ll-footer-menu ul{
  list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-wrap:wrap;
  gap:6px 22px; justify-content:center;
}
.ll-footer-menu a{
  color:var(--cream-2); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}
.ll-footer-menu a:hover{ color:var(--gold); }
.ll-footer-bottom{
  text-align:center; color:var(--cream-3); font-size:.78rem; letter-spacing:.08em;
  padding-top:1.5rem; border-top:1px solid var(--card-line);
}
.ll-footer-bottom a{ color:var(--gold-dim); }

/* ============================================================
   COMMENTS
   ============================================================ */
.ll-comments{ max-width:820px; margin:3rem auto 0; }
.ll-comments h3{ font-family:var(--font-display); font-size:1.8rem; }
.ll-comments ol{ list-style:none; margin:0; padding:0; }
.ll-comments .comment{ background:var(--ink-2); border:1px solid var(--card-line);
  border-radius:var(--radius); padding:16px 20px; margin-bottom:16px; }
.ll-comments textarea,
.ll-comments input[type="text"],
.ll-comments input[type="email"],
.ll-comments input[type="url"]{
  width:100%; background:var(--ink); border:1px solid var(--card-line); color:var(--cream);
  padding:10px 14px; border-radius:var(--radius); margin-bottom:12px;
}
.ll-comments input[type="submit"]{
  background:var(--gold); border:0; color:var(--ink); padding:12px 26px; border-radius:var(--radius);
  cursor:pointer; font-weight:500; letter-spacing:.06em;
}

/* ============================================================
   WOOCOMMERCE (light touch — keeps shop usable on dark)
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius);
  padding:14px; text-align:center;
}
.woocommerce ul.products li.product .price{ color:var(--gold); }
.woocommerce span.onsale{ background:var(--gold); color:var(--ink); }
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--gold); color:var(--ink); border-radius:var(--radius);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{ background:var(--cream); color:var(--ink); }
.woocommerce div.product p.price,
.woocommerce div.product span.price{ color:var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .ll-showcase iframe{ height:640px; }
}
@media (max-width:768px){
  .ll-menu-toggle{ display:inline-block; }
  .ll-nav ul{ display:none; flex-direction:column; }
  .ll-nav.open ul{ display:flex; }
  .ll-nav ul ul{ position:static; border:0; border-left:2px solid var(--gold-dim); margin-left:14px; }
  .ll-nav li:hover > ul{ display:none; }
  .ll-nav.open ul ul{ display:flex; }
  .ll-showcase iframe{ height:600px; }
  .ll-header-inner{ padding:16px var(--pad); }
  .ll-logo img{ max-height:48px; }
}
@media (max-width:480px){
  body{ font-size:1rem; }
  .ll-showcase iframe{ height:540px; }
  .ll-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Align first nav item flush with logo + content left edge */
.ll-nav > ul > li:first-child > a {
	padding-left: 0;
}

/* Optional: keep hover/active underline from looking clipped at the flush edge */
.ll-nav > ul > li:first-child > a::after {
	left: 0;
}

.ll-nav > ul{ justify-content:center; }

.ll-site-id .ll-tagline{ text-align:center; }

.ll-card-meta{ display:none; }