/* ============================================================
   Punk Rock Guitar Tabs — style.css
   Mobile-first · breakpoints: 480px | 768px | 1024px | 1280px
   ============================================================ */

/* ======================
   Base / Reset
   ====================== */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background-color: #282828;
}

/* REMOVED: p { margin: 55px } — was adding huge gaps everywhere.
   Paragraph margins are now scoped to specific sections below. */

a:link    { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover   { color: #d38300; }

/* Mobile default: single column; widens at 1024px+ */
ol {
  columns: 1;
  list-style-position: inside;
}

hr {
  background: linear-gradient(90deg, #282828 0%, #d38300 20%, #d38300 80%, #282828 100%);
  height: 2px;
  border: 0;
}

/* ======================
   Layout
   ====================== */

/* max-width prevents layout breaking on very wide monitors */
.container {
  width: 92%;
  max-width: 1400px;
  margin: auto;
  overflow: hidden;
}

.altContainer {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

/* ======================
   Shared button style
   ====================== */
.button_1 {
  height: 38px;
  background: #d38300;
  border: 0;
  padding: 0 20px;
  color: #ffffff;
}

#pageButton .previousButton input,
#pageButton .nextButton input,
#bandbutton .button input,
#donatebutton .button input,
#tabButton .tabButton input {
  font-size: 25px;
  background: #d38300;
  border-radius: 20px;
  border-color: #d38300;
  padding: 5px 15px;
  color: #ffffff;
}

#pageButton .previousButton input,
#pageButton .nextButton input,
#bandbutton .button input,
#donatebutton .button input,
#tabButton .tabButton input {
  transition: background 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

#pageButton .previousButton input:hover,
#pageButton .nextButton input:hover,
#bandbutton .button input:hover,
#donatebutton .button input:hover,
#tabButton .tabButton input:hover {
  color: #ffffff;
  font-weight: bold;
  background: #b87200;
  transform: translateY(-2px);
}

/* ======================
   Header / Nav
   ====================== */
header {
  background: #282828;
  color: #ffffff;
  text-transform: uppercase;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
}

/* Nav is always centred; scaled with viewport on larger screens */
header #branding,
header nav,
header nav li {
  float: none;
  text-align: center;
  white-space: nowrap;
  margin-bottom: 12px;
}

/* Remove browser-default ul indent that shifts nav off-centre on mobile */
header nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

header li {
  display: inline-block;
  padding-right: 15px;
  font-size: 16px;
  overflow: hidden;
}

header .highlight,
header .current a {
  color: #d38300;
  font-weight: bold;
}

header a:hover {
  color: #d38300;
  font-weight: bold;
}

/* ======================
   #boxes / #boxes2
   Pages: home.php only
   ====================== */
#boxes,
#boxes2 {
  background: #282828;
  color: #ffffff;
  padding-top: 8px;
  padding-bottom: 1px;
  min-height: 20px;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
  width: 100%;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

#boxes .box,
#boxes2 .box {
  margin: 17px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

#boxes .box:hover,
#boxes2 .box:hover {
  transform: translateY(-6px);
}

/* Hidden on mobile; revealed at tablet+ via media query */
#boxes { display: none; }

#boxes img,
#boxes2 img {
  width: auto;
  height: 100px;
  border-radius: 6px;
  display: block;
  margin: 0 auto 8px;
}

#boxes .box h3,
#boxes2 .box h3 {
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: #cccccc;
  font-weight: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ======================
   #main
   Pages: guitar-tabs.php, newtabs*.php, bandtemplate.php, funriffs.php (listing/index pages)
   ====================== */
#main {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
}

/* Song/band listing cards — band pages, misc-bands.php, funriffs.php
   CSS-only: hides the old <hr>/<br> separators and turns each <a> into a card. */
#main .bandlist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px 0;
  margin: 0;
  font-size: inherit;
}

#main .bandlist hr,
#main .bandlist br {
  display: none;
}

#main .bandlist a {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #363636 0%, #2d2d2d 100%);
  border-left: 4px solid #d38300;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.3;
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: background 0.2s ease, transform 0.15s ease,
              box-shadow 0.2s ease, border-left-color 0.15s ease;
  min-height: 48px;
  box-sizing: border-box;
}

#main .bandlist a::after {
  content: '›';
  font-size: 20px;
  color: #d38300;
  margin-left: auto;
  padding-left: 10px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

#main .bandlist a:link,
#main .bandlist a:visited {
  color: #ffffff;
}

#main .bandlist a:hover {
  background: linear-gradient(135deg, #3e3e3e 0%, #363636 100%);
  border-left-color: #f09900;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.5);
}

#main .bandlist a:hover::after {
  opacity: 1;
}

#main .page-title { font-size: 55px; border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1; width: 100%; margin: auto; }

/* ======================
   #title
   Pages: home.php (with overrides in page <style>), guitar-tabs.php, newtabs*.php,
          bandtemplate.php, funriffs.php — many pages share this ID.
   WARNING: Changes here affect ALL of those pages. Use page-level <style> overrides
            (as done in home.php) when a page needs different behaviour.
   ====================== */
#title {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 1px;
  min-height: 60px;
}

#title h1 {
  width: 100%;
  font-size: 4.5vw;
  color: #ffffff;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
  padding-left: 0;
  padding-bottom: 10px;
  margin-top: 1px;
  margin-bottom: 10px;
  text-align: center;
}

#title .pageTitle    { font-size: 60px; margin-bottom: 25px; }
#title .pageTitle ol { font-size: 19px; margin-bottom: 15px; }
#title .pageTitle p  { font-size: 19px; margin-bottom: 15px; margin-top: 0; }
#title .popularTitle { font-size: 42px; text-align: center; color: #ffffff; margin-top: 17px; margin-bottom: 0; padding-left: 0; padding-right: 0; }

/* ======================
   #covers
   Pages: cover listing pages (newcovers*.php)
   ====================== */
#covers {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
}

#covers h1 { font-size: 35px; }

/* ======================
   #tabtitle
   Pages: tab.body*.php, misctabbody*.php, funriffsbody.php (all individual tab/riff pages)
   ====================== */
#tabtitle { background: #282828; }

#tabtitle .newtitle h2,
#tabtitle .tuning h2 {
  text-align: center;
  color: #ffffff;
  margin-top: 17px;
  margin-bottom: 0;
}

#tabtitle .newtitle h2 { font-size: 25px; }
#tabtitle .tuning h2   { font-size: 15px; }

/* ======================
   #newtab (tab image)
   Pages: tab.body*.php, misctabbody*.php, funriffsbody.php, newCoverBody.php, newlessonbody.php
   ====================== */
#newtab {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
}

/* FIX: was fixed 650px, breaking on narrow and wide screens.
   Now fluid with a sensible max. */
#newtab .tab {
  margin: 0 auto;
  width: 100%;
  max-width: 650px;
  overflow: hidden;
}

#newtab .tab img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 12px auto;
  object-fit: contain;
}

/* ======================
   #songInfo
   Pages: tab.body*.php, misctabbody*.php ONLY — the Band / Song / Album block
          on individual guitar tab pages. Safe to edit without affecting any other page.
   ====================== */
#songInfo {
  background: #282828;
  color: #ffffff;
  padding-top: 0;
  padding-bottom: 10px;
  min-height: 60px;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
  width: 100%;
}

/* FIX: line-height was 3px — caused h3 text to overlap.
   FIX: width was fixed 650px — now responsive with max-width. */
#songInfo .info {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto;
  width: 100%;
  max-width: 650px;
}

/* Collapse browser-default h3 margins (typically ~20px top+bottom each).
   Scoped tightly here so no other h3 on the site is affected. */
#songInfo .info h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: normal;
}

/* ======================
   Button sections
   #pageButton  — newcovers*.php, newlessons*.php, newtabs*.php (pagination buttons)
   #bandbutton  — guitar-tabs.php, tab.body*.php ("More [Band] Tabs!" button)
   #donatebutton — home.php ONLY
   #tabButton   — newCoverBody.php, newlessonbody.php
   ====================== */
#pageButton {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
}

#pageButton .previousButton,
#pageButton .nextButton {
  font-size: 15px;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 1px;
  display: inline-block;
}

#bandbutton {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
}

#bandbutton .button {
  font-size: 15px;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 1px;
}

#donatebutton {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
}

#donatebutton .button {
  font-size: 15px;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 1px;
}

#tabButton {
  background: #282828;
  color: #ffffff;
  padding-top: 0;
  padding-bottom: 10px;
  min-height: 20px;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
}

#tabButton .tabButton {
  font-size: 15px;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 1px;
}

/* ======================
   Videos
   #video      — video.php (full-page video embed, used on standalone tab/riff pages)
   #coverVideo — newlessonbody.php, cover pages
   ====================== */
#video {
  background: #282828;
  color: #ffffff;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  overflow: hidden;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
  width: 100%;
}

.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 22px;
  left: 80px;
  right: 80px;
  height: 92%;
  width: 80%;
  margin: auto;
  overflow: hidden;
  background: #282828;
}

#video .video iframe {
  bottom: 25px;
  top: 25px;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  float: left;
}

#coverVideo {
  background: #282828;
  color: #ffffff;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: auto;
  overflow: hidden;
  margin: auto;
  vertical-align: middle;
}

.coverVideo iframe,
.coverVideo object,
.coverVideo embed {
  position: absolute;
  top: auto;
  left: 75px;
  right: 80px;
  height: 90%;
  width: 80%;
  margin: auto;
  overflow: hidden;
  background: #282828;
  vertical-align: middle;
  display: block;
}

/* ======================
   Dividers
   ====================== */
#divider  { border-bottom: 4px solid; border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1; background: #282828; margin: auto; overflow: hidden; }
#divider2 { border-bottom: #282828 8px solid; background: #282828; margin: 20px; overflow: hidden; }
#divider3 { border-top: 4px solid; border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1; background: #282828; margin: 50px; overflow: hidden; }

/* ======================
   Footer
   ====================== */
footer {
  background: #282828;
  color: #ffffff;
  text-align: center;
}

#footer-subscribe {
  padding: 28px 0 16px;
}

#footer-copyright {
  padding: 0 0 24px;
}

footer .copyright p {
  font-size: 13px;
  color: #888888;
  margin: 0;
  letter-spacing: 0.5px;
}

/* ======================
   #request
   ====================== */
#request {
  padding: 0;
  color: #282828;
  background: #ffffff;
}

#request h1    { float: left; }
#request form  { float: right; margin-top: 25px; margin-bottom: 25px; }

#request button[type="submit"] { height: 28px; }

/* ======================
   Lyrics
   Pages: lyrics pages (future/live-site pages using #lyricsTitle and .lyricsContainer)
   ====================== */
#lyricsTitle {
  background: #282828;
  color: #ffffff;
  padding-top: 10px;
  padding-bottom: 1px;
  min-height: 60px;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* Break the h1 border-bottom out of the section's side padding so the
   orange line still spans edge-to-edge like every other section heading. */
#lyricsTitle h1 {
  width: calc(100% + 10%);
  margin-left: -5%;
  margin-right: -5%;
  text-align: center;
  font-size: 4.5vw;
  color: #ffffff;
  border-bottom: 4px solid;
  border-image: linear-gradient(90deg, #282828 0%, #d38300 12%, #d38300 88%, #282828 100%) 1;
  padding-bottom: 10px;
  margin-top: 1px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

#lyricsTitle .lyricsTitle   { font-size: 60px; margin-bottom: 25px; }

#lyricsTitle .lyricsTitle p {
  font-size: 15px;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 0;
}

.lyricsContainer {
  width: 100%;
  text-align: left;
  margin: auto;
  overflow: hidden;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

/* ============================================================
   Media Queries
   ============================================================ */

/* ≤ 480px — small phones */
@media screen and (max-width: 480px) {
  #bandbutton .button input { font-size: 15px; }

  /* Centre videos — override the fixed 80px left/right offsets */
  #video .video iframe,
  #video .video object,
  #video .video embed {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    width: 100%;
    margin: auto;
  }

  .coverVideo iframe,
  .coverVideo object,
  .coverVideo embed {
    left: 0;
    right: 0;
    width: 100%;
  }
}

/* 481px – 768px — large phones / small tablets */
@media screen and (min-width: 481px) and (max-width: 768px) {
  #main .bandlist { grid-template-columns: repeat(3, 1fr); }

  header nav li { font-size: 1.8vw; }

  /* Video: full-width on narrow screens */
  .coverVideo iframe,
  .coverVideo object,
  .coverVideo embed {
    left: 0;
    right: 0;
    width: 100%;
  }

  #video .video iframe {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    width: 100%;
    margin: auto;
  }
}

/* 769px – 1024px — tablets / small laptops */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #main .bandlist { grid-template-columns: repeat(4, 1fr); }

  #boxes { display: inline-block; }

  #boxes img,
  #boxes2 img { height: 125px; }
}

/* ≥ 1025px — desktop */
@media screen and (min-width: 1025px) {
  #main .bandlist { grid-template-columns: repeat(5, 1fr); }

  .container { width: 80%; }

  ol { columns: 2; }

  #boxes { display: inline-block; }

  #boxes img,
  #boxes2 img { height: 175px; }

  header nav li { font-size: 2vw; }
}