/* ============================================================
   GuitarNuts.com — responsive rebuild
   Palette: the ORIGINAL site colors — green chrome, yellow
   parchment content, classic blue/red links.
   ============================================================ */

:root{
  --green-deep:    #009933;   /* original border/accent green */
  --green-mid:     #00a83a;
  --green-bright:  #00C000;   /* original body background green */
  --green-light:   #94EF94;   /* original .Menu background green */
  --yellow-pale:   #EFEFC0;   /* original .Content background yellow */
  --yellow-pale-2: #f6f6da;
  --ink:           #171717;
  --ink-soft:      #3f3f2c;
  --line:          #5fae52;

  --link:          #3300ff;   /* original A.Menu blue */
  --link-visited:  #9900cc;   /* original visited purple */
  --link-hover:    #ff0000;   /* original hover red */

  --font-display: Helvetica, Arial, sans-serif;
  --font-body: Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  --max-width: 960px;
  --radius: 3px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background-color: var(--green-bright);
  background-image: url("graphics/greenparchment.jpg");
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--link); text-decoration: none; font-weight: bold; border-bottom: 1px solid transparent; }
a:visited{ color: var(--link-visited); }
a:hover{ color: var(--link-hover); border-bottom-color: currentColor; }

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

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

/* ---------- Header / brand ---------- */

.site-header{
  background-color: var(--green-light);
  background-image: url("graphics/greenparchment.jpg");
  border-bottom: 5px solid var(--green-deep);
  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}

.brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.1rem 0 0.9rem;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:0.6rem;
}

.brand .mark{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  color: var(--green-deep);
  text-transform: uppercase;
}

.brand h1{
  margin:0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  letter-spacing: 0.01em;
  color: #063d1a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.brand h1 small{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: #146b2e;
  text-transform: uppercase;
  margin-top: 0.35rem;
  font-weight:normal;
}

/* hamburger */
.nav-toggle{
  display:none;
  background: var(--green-deep);
  border: 2px solid var(--green-deep);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
  cursor:pointer;
}
.nav-toggle:hover{ background: #007a29; }

/* ---------- Primary nav ---------- */

nav.primary{
  background: var(--green-deep);
  border-top: 1px solid rgba(255,255,255,0.15);
}

nav.primary ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
}

nav.primary a{
  display:block;
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #eafff0;
  border-bottom: 3px solid transparent;
}

nav.primary a:hover,
nav.primary a[aria-current="page"]{
  color: #ffffff;
  border-bottom-color: #ffe066;
  background: rgba(255,255,255,0.08);
}

/* ---------- Section sub-nav (breadcrumb strip) ---------- */

.subnav{
  background: var(--green-bright);
  border-bottom: 1px solid var(--green-deep);
}
.subnav ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
}
.subnav a{
  display:block;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: bold;
  color: #06280f;
  border-bottom: none;
  border-right: 1px solid rgba(0,0,0,0.1);
}
.subnav a:hover, .subnav a[aria-current="page"]{ background: var(--green-deep); color: #ffe066; }

/* ---------- Page hero / title plate ---------- */

.page-title{
  padding: 2.2rem 0 1rem;
}
.page-title .eyebrow{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #146b2e;
}
.page-title h2{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin: 0.25rem 0 0;
  color: #06280f;
  border-bottom: 3px double var(--green-deep);
  padding-bottom: 0.6rem;
}

/* ---------- Content blocks (the "parchment panel") ---------- */

main{ padding-bottom: 3rem; }

.panel{
  background-color: var(--yellow-pale);
  background-image: url("graphics/parchment.jpg");
  border: 1px solid var(--green-deep);
  border-left: 6px solid var(--green-deep);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.panel + .panel{ margin-top: 1.5rem; }
.panel p:first-child{ margin-top:0; }
.panel p:last-child{ margin-bottom:0; }

.panel hr{
  border:0;
  border-top: 1px dashed var(--green-deep);
  margin: 1.2rem 0;
}

.panel h1, .panel h2, .panel h3, .panel h4{
  font-family: var(--font-display);
  color: #06280f;
  margin: 1.6rem 0 0.6rem;
  line-height: 1.25;
}
.panel h1:first-child, .panel h2:first-child, .panel h3:first-child, .panel h4:first-child{ margin-top: 0; }
.panel h1{ font-size: 1.5rem; }
.panel h2{ font-size: 1.3rem; }
.panel h3{ font-size: 1.12rem; }
.panel h4{ font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--green-deep); font-family: var(--font-mono); }
.panel small{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }

.panel img{
  border: 3px solid var(--green-deep);
  border-radius: var(--radius);
  margin: 0.8rem 0;
  background: #fff;
}
.panel a img{ margin: 0; }

.panel ul, .panel ol{ padding-left: 1.3rem; }
.panel li{ margin-bottom: 0.5rem; }

.panel pre, .panel code{
  font-family: var(--font-mono);
  background: rgba(0,153,51,0.08);
  border-radius: var(--radius);
}
.panel pre{ padding: 0.8rem; overflow-x:auto; }

/* ---------- Article/announcement cards grid ---------- */

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  margin: 1.5rem 0;
}

.card{
  background-color: var(--yellow-pale-2);
  background-image: url("graphics/parchment.jpg");
  border: 1px solid var(--green-deep);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: #06280f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.card .knob{
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--green-light), var(--green-deep) 70%);
  border: 2px solid #06280f;
  flex: 0 0 auto;
}
.card h3{
  margin:0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #06280f;
}
.card h3 a{ border-bottom: none; color: inherit; }
.card h3 a:hover{ color: var(--link-hover); }
.card p{
  margin:0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- Menu list (section index pages) ---------- */

.menu-list{
  list-style:none;
  margin: 1.5rem 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 0.6rem;
}
.menu-list li{
  border-bottom: 1px dotted var(--green-deep);
  padding-bottom: 0.6rem;
}
.menu-list a{
  font-family: var(--font-display);
  font-size: 0.95rem;
}

/* ---------- Dated log entries (announcements) ---------- */

.log-entry{
  display:grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px dashed var(--green-deep);
}
.log-entry:first-child{ border-top:none; padding-top:0; }
.log-date{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #146b2e;
  letter-spacing: 0.04em;
  white-space:nowrap;
}
.log-body p{ margin: 0 0 0.6rem; }
.log-body p:last-child{ margin-bottom:0; }

/* ---------- Footer ---------- */

footer.site-footer{
  background: var(--green-deep);
  color: #eafff0;
  border-top: 5px solid #06280f;
  padding: 1.6rem 0 2.2rem;
  font-size: 0.78rem;
}
footer.site-footer .wrap{ line-height:1.7; }
footer.site-footer a{
  color: #ffe066;
  font-weight: normal;
}
footer.site-footer p{ margin: 0 0 0.6rem; color: rgba(234,255,240,0.85); }
footer.site-footer p:last-child{ margin-bottom:0; }

/* ---------- Responsive breakpoints ---------- */

@media (max-width: 720px){
  .nav-toggle{ display:inline-block; }

  nav.primary{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  nav.primary.open{ max-height: 26rem; }
  nav.primary ul{ flex-direction: column; }
  nav.primary a{
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  .subnav ul{ flex-direction: column; }
  .subnav a{ border-right:none; border-bottom: 1px solid rgba(0,0,0,0.12); }

  .log-entry{ grid-template-columns: 1fr; gap: 0.25rem; }
}

@media (max-width: 480px){
  .brand h1{ font-size: 1.35rem; }
  .panel{ padding: 1.1rem 1rem; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
}

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