/*
Theme Name:   Griot Dojo Child
Theme URI:    https://griotdojo.com
Description:  Child theme for Griot Dojo, built on Astra. Holds all custom styling and template overrides so Astra can update underneath it without ever touching your work. Operated by Fresh Air Flavor LLC.
Author:       SoulMan IT / Fresh Air Flavor LLC
Author URI:   https://griotdojo.com
Template:     astra
Version:      1.3.2
Text Domain:  griot-dojo-child
*/

/* ============================================================
   GRIOT DOJO — BRAND TOKENS
   ============================================================ */
:root{
  --gd-amber:  #E0A84E;
  --gd-bronze: #C8862E;
  --gd-ink:    #1F1810;
  --gd-ink-soft:#4A3F30;
  --gd-paper:  #F7F3EC;
  --gd-card:   #FFFFFF;
  --gd-line:   #E4DACB;
  --gd-teal:   #3F9AA4;
}

body{ background:var(--gd-paper); color:var(--gd-ink-soft); }
h1,h2,h3,.entry-title{ color:var(--gd-ink); }
a{ color:var(--gd-bronze); }
a:hover{ color:var(--gd-amber); }

.ast-button,.wp-block-button__link,button.menu-toggle,input[type="submit"]{
  background-color:var(--gd-amber); border-color:var(--gd-amber); color:var(--gd-ink);
}
.ast-button:hover,.wp-block-button__link:hover,input[type="submit"]:hover{
  background-color:var(--gd-bronze); border-color:var(--gd-bronze); color:var(--gd-paper);
}
.site-header{ border-bottom:4px solid var(--gd-amber); }
.site-footer{ background:var(--gd-ink); color:var(--gd-paper); }
.site-footer a{ color:var(--gd-amber); }

.gd-accent{ position:relative; padding-left:.9rem; }
.gd-accent::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:5px; border-radius:2px; background:var(--gd-amber); }

/* ============================================================
   ARTIST PROFILE  (single-gd_artist.php)
   Accent defaults to amber; per-artist color overrides --gd-accent inline.
   ============================================================ */
.gd-ap{ --gd-accent:var(--gd-amber); max-width:1080px; margin:0 auto; }

/* ---- HERO: image | name + subtitle + pills ---- */
.gd-ap__hero{
  display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; align-items:stretch;
  background:var(--gd-ink); color:var(--gd-paper);
  border-left:8px solid var(--gd-accent); border-radius:6px;
  padding:1.75rem; margin:1.5rem 0 2rem;
}
.gd-ap__portrait img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:6px; border:3px solid var(--gd-accent);
}
.gd-ap__id{ display:flex; flex-direction:column; min-height:100%; }
.gd-ap__name{
  font-family:"Anton", Impact, "Arial Narrow Bold", sans-serif;
  font-size:clamp(2.25rem, 4vw, 2.8rem); line-height:1.05; letter-spacing:.01em;
  color:var(--gd-paper); margin:0 0 .5rem;
}
.gd-ap__handle{ color:var(--gd-accent); font-weight:600; margin:0 0 .75rem; letter-spacing:.02em; }
/* margin-top:auto pushes the tags to the bottom of the hero, so the name owns the
   space above; extra tags simply wrap and grow up into that gap. */
.gd-ap__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:auto 0 .6rem; padding:0; }
.gd-ap__tags li{ margin:0; }
.gd-ap__tags a{
  display:inline-block; font-size:.78rem; letter-spacing:.04em; text-decoration:none;
  padding:.25rem .7rem; border-radius:999px;
  background:rgba(224,168,78,.16); color:var(--gd-amber); border:1px solid var(--gd-accent);
}
.gd-ap__cohort{ margin:0; font-size:.9rem; color:var(--gd-line); }
.gd-ap__cohort a{ color:var(--gd-amber); }

/* ---- MAIN: bio (wide) + sidebar ---- */
.gd-ap__main{ display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
.gd-ap__bio{ font-size:1.05rem; line-height:1.7; }

/* ---- SIDEBAR PANELS ---- */
.gd-ap__sidebar{ display:flex; flex-direction:column; gap:1.25rem; }
.gd-panel{
  background:var(--gd-card); border:1px solid var(--gd-line); border-radius:6px; overflow:hidden;
}
.gd-panel__head{
  margin:0; padding:.7rem 1rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gd-paper); background:var(--gd-ink); border-left:5px solid var(--gd-accent);
}
.gd-panel__social{ display:flex; flex-wrap:wrap; gap:.6rem; padding:1rem; }
.gd-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; font-size:1.15rem; text-decoration:none;
  background:rgba(224,168,78,.12); color:var(--gd-ink); border:1px solid var(--gd-line);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.gd-social:hover{
  background:var(--gd-accent); color:var(--gd-ink); border-color:var(--gd-accent); transform:translateY(-2px);
}
.gd-panel__player{ padding:1rem; }
.gd-panel__player iframe{ width:100%; border:0; border-radius:4px; }
.gd-panel__songlink{ margin:0; padding:0 1rem 1rem; font-size:.9rem; }

/* ---- NAV ---- */
.gd-ap__nav{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  border-top:1px solid var(--gd-line); padding-top:1.25rem; margin-top:2.5rem;
}
.gd-ap__nav a{ font-weight:600; text-decoration:none; }

/* ---- RESPONSIVE ---- */
@media (max-width:880px){
  .gd-ap__main{ grid-template-columns:1fr; }
  .gd-ap__sidebar{ flex-direction:row; flex-wrap:wrap; }
  .gd-panel{ flex:1 1 260px; }
}
@media (max-width:600px){
  .gd-ap__hero{ grid-template-columns:1fr; text-align:center; }
  .gd-ap__portrait{ max-width:280px; margin:0 auto; }
  .gd-ap__portrait img{ aspect-ratio:1/1; }
  .gd-ap__tags{ justify-content:center; }
  .gd-ap__sidebar{ flex-direction:column; }
  .gd-ap__nav{ justify-content:center; }
}