/* Play That Guitar — replaces the GP Customizer output, GenerateBlocks, the block library, WPForms and GP Premium CSS.
   GeneratePress main.min.css (unchanged) provides the base; values below are taken from the old site's CSS. */
:root {
  --text: #222; --blue: #00478D; --orange: #FE5B10; --cream: #FFFAE2; --white: #fff; --sky: #479bcc; --pale: #ECF9FF; --green: #00C4A3;
  --button: #215bc2; --page: #f6f6f6;
  --script: "Bradley Hand ITC", "Segoe Print", cursive; --head: Raleway, sans-serif; --cond: "Roboto Condensed", "Arial Narrow", sans-serif;
}
body { background: var(--page); color: var(--text); font-family: Roboto, sans-serif; }
a { color: var(--blue); }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--head); font-weight: 800; color: var(--blue); }
h2 { font-size: 30px; }
h3 { font-size: 22px; margin-bottom: 10px; }
h4 { font-size: 18px; }
button, input[type=submit], .btn { font-family: var(--cond); }
.site { max-width: 850px; margin: 0 auto; background: var(--white); }
.screen-reader-text:focus { clip: auto; height: auto; width: auto; padding: 10px; background: #fff; z-index: 100000; }

/* ---------- Header: social icons, logo, menu (GP top bar + header + nav float right) ---------- */
.site-header { background: var(--sky); }
.top-bar { display: flex; justify-content: flex-end; gap: 1rem; padding: 10px 56px 0 40px; }
.top-bar a { color: #fff; display: inline-flex; font-size: 24px; line-height: 1; }
.top-bar a { transition: color .1s ease-in-out; }
.top-bar a:hover, .top-bar a:focus { color: #303030; }
.inside-header { display: flex; align-items: center; justify-content: space-between; padding: 0 40px 40px; }
.site-logo img { width: 250px; height: auto; display: block; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav li { position: relative; }
.main-nav a { display: flex; align-items: center; padding: 0 10px; line-height: 60px; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 18px; text-decoration: none; }
.main-nav a:hover, .main-nav a:focus, .main-nav .current > a { color: var(--blue); text-decoration: none; }
.main-nav .caret { display: inline-flex; padding-left: 10px; font-size: 12px; }
.main-nav ul ul { display: block; position: absolute; top: 100%; left: 0; width: 150px; background: var(--sky); z-index: 99; visibility: hidden; opacity: 0; transition: opacity .1s; }
.main-nav ul ul::before { content: ""; position: absolute; inset: 0; background: rgba(33,33,33,.1); }
.main-nav ul ul a { position: relative; line-height: normal; padding: 10px; font-size: 14px; }
.main-nav li:hover > ul, .main-nav li:focus-within > ul { visibility: visible; opacity: 1; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 18px; padding: 0 10px; line-height: 60px; cursor: pointer; }
.menu-toggle svg { vertical-align: -2px; margin-right: 6px; }
@media (max-width: 768px) {
  .top-bar { padding: 10px 30px 0; }
  .inside-header { padding: 0 20px 10px; }
  .site-logo img { width: 160px; }
  .main-nav { display: none; }
  .menu-toggle { display: block; }
}

/* Mobile slide-out menu (GP Menu Plus "off-canvas") */
.slideout-navigation { position: fixed; top: 0; bottom: 0; left: 0; width: 265px; max-width: 85vw; background: var(--sky); z-index: 1000; overflow-y: auto; padding: 50px 0 30px; box-shadow: 0 0 20px rgba(0,0,0,.3); }
.slideout-navigation ul { list-style: none; margin: 0; }
.slideout-navigation a { display: block; padding: 0 20px; line-height: 50px; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 18px; text-decoration: none; }
.slideout-navigation ul ul a { line-height: 40px; padding-left: 40px; font-size: 15px; }
.slideout-navigation .current > a, .slideout-navigation a:hover { color: var(--blue); }
.slideout-navigation .slideout-exit { position: absolute; top: 6px; right: 0; background: none; border: 0; color: #fff; padding: 10px 20px; font-size: 20px; cursor: pointer; }
.slideout-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 999; }
.slide-opened { overflow: hidden; }

/* ---------- Sections and shared pieces ---------- */
.band { padding: 3rem; }
.bg-sky { background: var(--pale); } .bg-cream { background: var(--cream); } .bg-grey { background: var(--page); } .bg-white { background: var(--white); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 3em; }
.center { text-align: center; }
.band > :last-child, .prose > :last-child { margin-bottom: 0; }
.page-title { font-size: 30px; }
@media (max-width: 767px) {
  .band { padding: 10px; }
  .cols { grid-template-columns: 1fr; }
  .page-title, .band h2 { font-size: 24px; }
  .band > h1:first-child, .band > h2:first-child { margin-top: 20px; }
}
.prose img { max-width: 100%; height: auto; }
.prose ul { margin-left: 1.5em; }

/* Buttons (GB button styles) */
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--button); color: #fff; border: 1px solid var(--blue); border-radius: 12.5px; padding: .5rem 1.5rem; text-decoration: none; font-family: Roboto, sans-serif; }
.btn:hover, .btn:focus { background: #fff; color: var(--blue); text-decoration: none; }
.btn--outline { background: #fff; color: var(--blue); }
.btn--outline:hover, .btn--outline:focus { background: #1a4a9b; color: #fff; }
.more { display: inline-flex; align-items: center; gap: .5em; font-weight: bold; text-decoration: none; }
.more svg { width: 1em; height: 1em; }

/* Small icon lists: blue dots (home), ticks (apps) */
.icon-list { list-style: none; margin: 0 0 1.5em; }
.icon-list li { display: flex; align-items: center; gap: 1em; padding: 5px 0; }
.icon-list svg { flex: none; width: 1em; height: 1em; color: var(--blue); }
.icon-list--green svg { color: var(--green); } .icon-list--sky svg { color: var(--sky); }

/* Round photos */
.round { border-radius: 50%; }
.round img { border-radius: 50%; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; }

/* ---------- Home ---------- */
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 3em; padding: 3em; }
.hero__lead { font-family: var(--head); font-weight: 800; font-size: 32px; line-height: 1.2; color: var(--blue); margin-bottom: 1.5em; }
.hero__title { background: var(--sky); color: #fff; font-family: var(--script); font-size: 48px; font-weight: bold; line-height: 1; padding: .3em 0; text-align: center; border-radius: 13px; text-shadow: rgba(255,91,15,.36) -1px -1px 2px; margin-bottom: 1.5em; }
.hero__text { font-weight: bold; }
.hero__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; justify-items: center; }
.hero__image img { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) { .hero__image { margin: 0 auto; } }
@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; padding: 10px; }
  .hero__lead { font-size: 22px; margin: 20px 0; }
  .hero__title { margin: 0 auto 20px; }
  .hero__buttons { margin-bottom: 20px; }
  .hero__buttons .btn { padding-left: 1.2rem; padding-right: 1.2rem; }
}
.author { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3rem 1rem; }
.author__photo { padding: 1.5rem; }
.author__text { padding: 3rem 2rem 2rem; }
.eyebrow { font-family: var(--cond); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
.author__text h2 { margin-bottom: 20px; }
.author .more { margin: 1em 0 0 50%; }
@media (max-width: 1024px) { .author__photo { margin: 5rem; } .author__text { margin: 0 3rem; } }
@media (max-width: 767px) {
  .author { grid-template-columns: 1fr; padding: 0; }
  .author__photo { margin: 20px auto; padding: 0; max-width: 300px; }
  .author__text { margin: 0 5px 2rem; padding: 0 .5rem; }
  .eyebrow, .author__text h2 { text-align: center; }
}

/* App cards (home + Guitar Toon page) */
.apps { padding: 3rem 0; background: var(--page); }
.apps h2 { text-align: center; }
.apps__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 3em; margin: 0 5rem; }
.app-card { background: var(--green); color: #fff; text-align: center; border-radius: 13px; padding: 1em 1em 0; }
.app-card--sky { background: var(--sky); }
.app-card h3 { color: #fff; margin-bottom: .3em; }
.app-card h3 a { color: #fff; text-decoration: none; }
.app-card .more { color: #fff; font-weight: normal; }
.app-card__icon { display: block; width: 100px; margin: 10px auto; }
.app-card__icon img { width: 100px; height: 100px; display: block; padding: .5rem; }
.app-store { display: block; width: 140px; margin: 0 auto 1rem; transition: transform .5s ease; line-height: 0; }
.app-store:hover, .app-store:focus { transform: scale(1.1); }
.app-store svg { width: 100%; height: auto; }
.apps--page .apps__grid { margin: 0 3rem; gap: 1em 2em; }
.apps--page .app-card { padding: 2rem 2rem 1rem; }
@media (max-width: 767px) {
  .apps { padding: 1rem 0; }
  .apps h2 { font-size: 24px; }
  .apps__grid, .apps--page .apps__grid { grid-template-columns: 1fr; margin: 0 1rem; }
  .apps--page .app-card { padding: 10px; }
}

/* Testimonial cards (home + archive) */
.testimonials { padding: 3rem 3rem 6rem; }
.testimonials h2 { text-align: center; }
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tcard { border: 1px solid var(--blue); border-radius: 13px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.tcard__quote { font-style: italic; margin-bottom: 5px; }
.tcard__who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; align-items: flex-end; padding-top: 20px; }
.tcard__photo { margin-bottom: 30px; }
.tcard__name { font-size: 20px; font-weight: bold; line-height: 1.2; margin-bottom: 5px; text-align: right; }
.tcard__name a { text-decoration: none; }
.tcard__cred { font-size: 14px; font-weight: bold; text-align: right; margin: 0; }
.testimonials__all { text-align: center; margin-top: 20px; }
.tgrid--all .tcard { background: var(--cream); }
.tgrid--all .tcard__quote { padding-bottom: 20px; }
.tgrid--all .tcard__photo { width: 65%; margin: 0 auto; }
.tgrid--all .tcard__cred { font-size: 16px; }
@media (max-width: 1024px) {
  .tcard__name, .tcard__cred { text-align: center; }
  .tgrid:not(.tgrid--all) .tcard__photo { margin: 0 auto; max-width: 20%; }
}
@media (max-width: 767px) {
  .testimonials { padding: .5rem .5rem 2rem; }
  .tgrid, .tcard__who { grid-template-columns: 1fr; }
  .tcard { padding: 10px; }
  .tcard__name { font-size: 18px; }
}

/* Single testimonial */
.tsingle { background: var(--cream); border: 1px solid var(--blue); border-radius: 12px; margin: 3rem; padding: 2rem; }
.tsingle__quote { font-size: 24px; font-style: italic; }
.tsingle__who { display: grid; grid-template-columns: 1fr 3fr; gap: 1em; }
.tsingle__name { font-size: 24px; font-weight: bold; margin-bottom: 0; text-align: right; }
.tsingle__cred { text-align: right; }
.back-links a { display: block; margin-bottom: 1em; text-decoration: none; }
.back-links svg { width: 1em; height: 1em; vertical-align: -2px; }
@media (max-width: 767px) { .tsingle { margin: 20px 0; padding: 1rem; } .tsingle__who { grid-template-columns: 1fr; } .tsingle__who .round { max-width: 50%; } }

/* ---------- The Book ---------- */
.book-intro .cols { gap: 1em 2em; }
.book-intro img { width: 100%; height: auto; display: block; }
.book-intro__note { font-size: 18px; font-weight: bold; text-align: center; }
.donate { display: grid; grid-template-columns: 3fr 1fr; gap: 1em; align-items: flex-end; margin: 0 3rem; border: 2px solid var(--green); border-radius: 13px; padding: .8rem 3rem; }
.donate p { padding-top: 5px; }
.donate img { width: auto; max-width: 100%; height: auto; }
.buy { background: var(--pale); margin-top: 3rem; padding: 1rem 6rem 1px; }
.buy__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3em; margin-top: 3rem; padding-bottom: 1rem; }
.buy-box { background: #fff; text-align: center; border: 2px solid var(--blue); border-radius: 12px; padding: 2rem; }
.buy-box h3 { line-height: 1.2em; margin: 16px 0 1em; }
.buy-box form { margin: 0; }
.buy-box input[type=image] { background: none; padding: 0; }
.btn-payhip { display: inline-flex; align-items: center; height: 2.625rem; background: var(--blue); color: #fff; font-family: var(--cond); font-weight: 700; border-radius: .25rem; padding: .5rem 3rem; text-decoration: none; }
.btn-payhip:hover, .btn-payhip:focus { background: #fff; color: var(--text); text-decoration: none; }
.buy__note { text-align: center; margin: 3rem 0 0; }
@media (max-width: 1024px) { .donate { text-align: center; } }
@media (max-width: 767px) {
  .donate { grid-template-columns: 1fr; margin: 0 10px; padding: 20px; }
  .donate img { width: 150px; }
  .buy { padding: 10px; }
  .buy__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 0; padding: 10px; }
  .buy-box { padding: 10px; }
  .buy__note { font-size: 24px; margin: 10px; }
}

/* ---------- Guitar Toon page ---------- */
.versions { padding: 2rem; gap: 1em 2em; }
.version { padding: .5em 1.5em 1.5em; font-weight: bold; }
.version img { width: 100%; height: auto; display: block; }
.version h4 { text-align: center; text-transform: uppercase; margin: 1em 0; }
.version__note { text-align: center; text-transform: uppercase; }
@media (max-width: 767px) { .versions { padding: 10px; } }

/* ---------- About ---------- */
.about-photo { float: left; width: calc(50% - 1.5em); margin: 0 1.5em 1rem 0; }
.about-photo img { width: 100%; height: auto; display: block; }
.about-body::after { content: ""; display: table; clear: both; }
@media (max-width: 767px) { .about-photo { float: none; width: 100%; margin: 0 0 1rem; } }

/* ---------- Guitar Toon help: accordion as <details> ---------- */
.faq details { background: #FAFAFA; margin-bottom: 1em; padding: 1em; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1em; cursor: pointer; color: var(--blue); font-family: var(--head); font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > :not(summary) { margin: 1em 0 0; }
.faq img { max-width: 100%; height: auto; display: block; }
.faq .answer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; align-items: center; }
@media (max-width: 767px) { .faq .answer { grid-template-columns: 1fr; } }

/* ---------- Audio tracks ---------- */
.tracks { list-style: none; margin: 0; counter-reset: t; }
.track { display: grid; grid-template-columns: 1fr auto; gap: .25em 1em; align-items: center; padding: .75em 0; border-bottom: 1px solid rgba(0,71,141,.15); }
.track__title { font-weight: bold; }
.track__title::before { counter-increment: t; content: counter(t, decimal-leading-zero) "  "; color: var(--sky); font-family: var(--cond); }
.track audio { grid-column: 1 / -1; width: 100%; height: 36px; }
.track__dl { font-size: 14px; }

/* ---------- Contact form (WPForms look) ---------- */
.contact-band { background: var(--pale); padding: 3rem; }
@media (max-width: 1024px) { .contact-form { padding: 0 30px; } }
@media (max-width: 767px) { .contact-band { padding: 5px; } .contact-form { padding: 20px 5px 0; } }
.contact-form label { display: block; font-weight: 700; font-size: 16px; margin-bottom: 11px; }
.contact-form .req { color: #d63637; margin-left: 4px; font-weight: 400; }
.contact-form input[type=text], .contact-form input[type=email] { width: 60%; height: 43px; font-size: 16px; padding: 0 14px; border: 1px solid rgba(0,0,0,.25); border-radius: 2px; background: #fff; color: var(--text); }
.contact-form textarea { width: 100%; height: 120px; font-size: 16px; padding: 10px 14px; border: 1px solid rgba(0,0,0,.25); border-radius: 2px; background: #fff; color: var(--text); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.contact-form p { margin-bottom: 20px; }
.contact-form button { background: var(--blue); color: #fff; border: 0; border-radius: 12px; height: 41px; padding: 0 15px; font-family: Roboto, sans-serif; font-size: 17px; cursor: pointer; }
.contact-form button:hover, .contact-form button:focus { background: #fff; color: var(--blue); outline: 1px solid var(--blue); }
.contact-form .cf-hp { position: absolute; left: -9999px; }
.cf-status:empty { display: none; }
@media (max-width: 767px) { .contact-form input[type=text], .contact-form input[type=email] { width: 100%; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--sky); color: #fff; font-size: 16px; padding: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.site-footer p { margin: 0 0 5px; }
.site-footer a { color: #fff; font-weight: bold; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__copy { font-weight: bold; }
.footer-menu { list-style: none; margin: 0; display: flex; justify-content: flex-end; gap: .5em; font-family: var(--cond); }
@media (max-width: 767px) { .site-footer { grid-template-columns: 1fr; } .footer-menu { justify-content: flex-start; } }
.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); color: #fff; border-radius: 3px; opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 10; }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover, .back-to-top:focus { background: rgba(0,0,0,.6); color: #fff; }
.thank-you .prose > p:last-child { font-size: 24px; color: var(--blue); }
.contact-page .contact-band { padding-top: 5rem; }

/* Comparison fixes (25 Oct) */
.author__photo { max-width: 348px; }
.apps:not(.apps--page) .app-card__icon, .apps:not(.apps--page) .app-card__icon img { width: 150px; height: auto; }
.apps:not(.apps--page) .app-card__icon img { padding: 0; }
.buy__note { font-size: 22px; }
.book-intro__note { margin: 1.5em 0 0; }
.contact-band .prose { margin-bottom: 2em; }
.versions-heading { margin-top: 1.5em; }
@media (max-width: 768px) { .inside-header { flex-direction: row; text-align: left; } }
.about-body ul { list-style: none; margin-left: 0; clear: left; }
.about-body li { position: relative; padding-left: 1.6em; margin-bottom: .4em; }
.about-body li::before { content: ""; position: absolute; left: .3em; top: .45em; width: .65em; height: .65em; border-radius: 50%; background: var(--text); }
.contact-page .contact-band { padding-top: 3rem; }

/* Form status: bold; success in the site orange (19px bold = large text, so the orange meets contrast for large text) */
.cf-status { font-weight: bold; font-size: 19px; }
.cf-status.is-ok { color: var(--orange); }
.buy-box__postage { margin: -.5em 0 1em; font-weight: bold; }