/*
Theme Name: Ugo Onwutalu
Theme URI: https://ugoonwutalu.com
Author: Ugo Onwutalu
Description: A one-page personal site for music educator, composer and pianist Ugo Onwutalu. Edit the "Home" page in the block editor to change the About, Experience, Compositions, Videos and Qualifications sections. Use Appearance > Customize to change the hero name/tagline, contact email and social links.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ugo-onwutalu
*/

/* -------------------------------------------------
   Tokens
------------------------------------------------- */
:root{
  --ink:        #15161B;   /* piano-lid black — main background */
  --panel:      #1C1E24;   /* slightly raised panel */
  --panel-2:    #22242B;
  --hairline:   rgba(241,234,217,0.14);
  --hairline-strong: rgba(241,234,217,0.28);
  --parchment:  #F1EAD9;   /* manuscript paper — primary text */
  --parchment-dim: #ABA495;
  --brass:      #C9A227;   /* organ-pipe / piano-hardware gold */
  --brass-soft: #E4C766;
  --burgundy:   #8A3A3A;   /* concert-velvet accent */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --wrap: 880px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

body.admin-bar{ } /* leave default offset */

a{ color:var(--brass-soft); text-decoration:none; }
a:hover{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; }

img{ max-width:100%; display:block; height:auto; }

::selection{ background:var(--brass); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--brass-soft);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--parchment);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass-soft);
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}

/* -------------------------------------------------
   Staff-line signature motif
   Five hairlines standing for a music staff — used as
   section dividers and as the spine of the timeline.
------------------------------------------------- */
.staff{
  --gap: 6px;
  height: calc(var(--gap) * 4);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--hairline) 0px,
    var(--hairline) 1px,
    transparent 1px,
    transparent var(--gap)
  );
  margin: 3.2rem 0;
  opacity: 0.9;
}

.staff.staff--tight{ height: calc(var(--gap) * 4); margin: 1.6rem 0; }

/* -------------------------------------------------
   Header / nav
------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(21,22,27,0.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hairline);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  max-width:var(--wrap);
  margin:0 auto;
}
.site-header__name{
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:0.02em;
  color:var(--parchment);
}
.site-header__name span{ color:var(--brass-soft); }

.main-nav ul{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
}
.main-nav a{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--parchment-dim);
}
.main-nav a:hover{ color:var(--brass-soft); text-decoration:none; }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--hairline-strong);
  color:var(--parchment);
  border-radius:4px;
  padding:8px 10px;
  font-family:var(--mono);
  font-size:0.75rem;
}

@media (max-width: 720px){
  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    background:var(--panel);
    border-bottom:1px solid var(--hairline);
  }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0; padding:8px 28px 18px; }
  .main-nav li{ padding:10px 0; border-bottom:1px solid var(--hairline); }
  .nav-toggle{ display:inline-block; }
}

/* -------------------------------------------------
   Hero
------------------------------------------------- */
.hero{
  padding:96px 0 40px;
  position:relative;
}
.hero__eyebrow{ margin-bottom:18px; }
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing:-0.01em;
}
.hero h1 em{
  font-style:italic;
  color:var(--brass-soft);
}
.hero__lede{
  max-width:56ch;
  font-size:1.15rem;
  color:var(--parchment-dim);
  margin-top:1.1rem;
}
.hero__cta{
  margin-top:2rem;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:13px 22px;
  border-radius:2px;
  border:1px solid var(--brass);
  color:var(--parchment);
}
.btn:hover{ background:var(--brass); color:var(--ink); text-decoration:none; }
.btn--ghost{ border-color:var(--hairline-strong); color:var(--parchment-dim); }
.btn--ghost:hover{ background:transparent; border-color:var(--brass-soft); color:var(--brass-soft); }

/* -------------------------------------------------
   Sections / editable content area
   Styles here shape the standard Gutenberg blocks
   typed into the Home page, so the site stays fully
   editable from wp-admin.
------------------------------------------------- */
.site-content{ padding-bottom:40px; }

.section{ padding:56px 0; }
.section > .wrap > h2:first-child,
.section h2{
  font-size:clamp(1.6rem, 3vw, 2.1rem);
}
.section .eyebrow{ display:block; margin-bottom:10px; }

.section p{ color:var(--parchment); }
.section p.has-text-color, .section p{ }

.wp-block-quote{
  border-left:2px solid var(--brass);
  margin:2rem 0;
  padding:0.2rem 0 0.2rem 1.4rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--parchment);
}
.wp-block-quote cite{
  display:block;
  margin-top:0.6rem;
  font-family:var(--mono);
  font-style:normal;
  font-size:0.78rem;
  color:var(--brass-soft);
  letter-spacing:0.06em;
}

/* Timeline — built from a standard block List, one <li> per role,
   each list item preceded by a bold "date — role" lead-in typed
   directly in the editor (see the pasted starter content). */
.timeline{ position:relative; margin:2rem 0 0; padding-left:26px; list-style:none; }
.timeline::before{
  content:"";
  position:absolute;
  left:4px; top:6px; bottom:6px;
  width:1px;
  background:var(--hairline-strong);
}
.timeline li{
  position:relative;
  padding-bottom:1.7rem;
}
.timeline li::before{
  content:"";
  position:absolute;
  left:-26px; top:6px;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 0 3px var(--ink);
}
.timeline strong{
  display:block;
  font-family:var(--serif);
  font-size:1.05rem;
  color:var(--parchment);
  margin-bottom:2px;
}
.timeline .when{
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass-soft);
}

/* Compositions / publication cards (Columns block) */
.wp-block-columns{ margin-top:1.6rem !important; }
.work-card{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:6px;
  padding:22px 22px 20px;
  height:100%;
}
.work-card h3{ font-size:1.05rem; margin-bottom:6px; }
.work-card p{ color:var(--parchment-dim); font-size:0.95rem; margin:0 0 12px; }
.work-card a{ font-family:var(--mono); font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; }

/* Video placeholder cards */
.video-card{
  background:var(--panel);
  border:1px dashed var(--hairline-strong);
  border-radius:6px;
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--parchment-dim);
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:20px;
}

/* Qualifications list */
.quals ul{ list-style:none; margin:0; padding:0; }
.quals li{
  padding:12px 0;
  border-bottom:1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.quals li span:first-child{ color:var(--parchment); }
.quals li span:last-child{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--brass-soft);
  white-space:nowrap;
}

/* Buttons block from editor */
.wp-block-buttons .wp-block-button__link{
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:2px !important;
  border:1px solid var(--brass);
  background:transparent !important;
  color:var(--parchment) !important;
  padding:13px 22px !important;
}
.wp-block-buttons .wp-block-button__link:hover{
  background:var(--brass) !important;
  color:var(--ink) !important;
}

/* -------------------------------------------------
   Footer / contact
------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:52px 0 40px;
  background:var(--panel);
}
.site-footer h2{ font-size:1.8rem; }
.site-footer__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
}
.site-footer__meta{ color:var(--parchment-dim); font-size:0.9rem; }
.social-links{ display:flex; gap:16px; margin-top:10px; }
.social-links a{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; }
.copyright{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid var(--hairline);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--parchment-dim);
}

/* -------------------------------------------------
   Utility
------------------------------------------------- */
.center{ text-align:center; }
@media (max-width: 600px){
  .hero{ padding-top:76px; }
  .section{ padding:40px 0; }
}