/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Squada+One&family=Open+Sans:wght@300;400;600&display=swap');

/* ===============================
   Base Styles
=============================== */
html, body {
  background: #000;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6,
.nav-link,
.member-quote blockquote footer {
  font-family: 'Squada One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===============================
   Header / Nav
=============================== */
.site-header {
  background: #000;
}

.site-logo {
  display: block;
  max-height: 140px;
  padding-top: 20px;
  margin: 0 auto;
  position: relative;
  z-index: 1000;
}

.navbar {
  padding: 0.5rem 1rem;
}

.navbar-nav .nav-link {
  color: #fff;
  font-size: 1.1rem;
  margin-left: 20px;
}

.navbar-nav .nav-link:hover {
  color: #ccc;
}

.navbar-toggler {
  margin-bottom: 10px;
}

/* ===============================
   Hero
=============================== */
.hero {
  position: relative;
  width: 100%;
  height: 80vh;
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, black);
}

@media (max-width: 992px) { .hero { height: 60vh; } }
@media (max-width: 576px) { .hero { height: 50vh; } }

.main {
    margin-top: 100px;
}

/* ===============================
   Store Section
=============================== */
.store-section {
  background: #000;
  padding: 40px 0;
}

.store-section .product {
  margin-bottom: 30px;
  text-align: center;
}

.store-section .product img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.store-section .product h3 {
  font-family: 'Squada One', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.store-section .product p {
  font-size: 0.95rem;
  color: #ccc;
}

/* Visit Store Button */
.visit-store-btn {
  display: inline-block;
  padding: 15px 40px;
  background: #fff;
  color: #000;
  font-family: 'Squada One', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
}

.visit-store-btn:hover {
  background: #ccc;
  color: #000;
}

/* Featured Products links */
.store-section a {
  color: #fff;                /* white links */
  text-decoration: none;      /* no underline */
}

.store-section a:hover {
  color: #e63946;             /* Thorogood red on hover */
  text-decoration: none;
}

/* Product Titles */
.store-section .product h3 a {
  font-family: 'Squada One', sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Red button (Visit Store) */
.visit-store-btn {
  display: inline-block;
  padding: 15px 40px;
  background: #e63946;        /* Thorogood red */
  color: #fff;
  font-family: 'Squada One', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.2s ease;
}

.visit-store-btn:hover {
  background: #c9202e;        /* darker red on hover */
  color: #fff;
}


/* ===============================
   Boogie People
=============================== */
.boogie-people-section {
  background-color: #2B2929;
  padding: 40px 0;
  text-align: center;
}

.boogie-people-section img {
  max-width: 100%;
  height: auto;
  transition: transform 0.2s ease;
}

.boogie-people-section img:hover {
  transform: scale(1.02);
}


/* News Section */
.news-section {
  background: #000;
  color: #fff;
}

.news-section .section-title {
  font-family: 'Squada One', sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.news-section a {
  color: #fff;
  text-decoration: none;
}

.news-section a:hover {
  color: #e63946; /* Thorogood red */
}

/* Instagram Section */
.instagram-section .section-title {
  font-family: 'Squada One', sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.instagram-embed iframe {
  max-width: 100%;
  border: none;
}
.instagram-section blockquote:empty::after {
  content: "Follow us on Instagram";
  display: block;
  text-align: center;
  padding: 40px;
  color: #fff;
  font-family: 'Squada One', sans-serif;
}



/* ===============================
   Band Member Quotes
=============================== */
.member-quote {
  background: #000;
  padding: 0;                  /* no vertical padding */
  border-top: 6px solid #000;  /* thin divider between sections */
  min-height: 700px;
  display: flex;
  align-items: stretch;
}

.member-quote .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  height: 100%;
  min-height: inherit;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.member-quote [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.member-quote .member-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.member-quote .text-col {
  position: relative;
  z-index: 5;
}

.member-quote .quote-box {
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 30px;
  border-radius: 6px;
  font-family: 'Squada One', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 600px;
}


/* Scale quotes down for tablets/mobiles */
@media (max-width: 992px) {
  .member-quote .quote-box {
    font-size: 1.4rem;    /* slightly smaller */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 576px) {
  .member-quote .quote-box {
    font-size: 1.2rem;    /* smaller for phones */
    padding: 20px;
  }
}


.member-quote .quote-box footer {
  margin-top: 12px;
  font-size: 1rem;
  color: #ddd;
}

/* Buddy Leach Special */
/* Buddy Leach Section - shorter to match others */
/* Default Buddy section (desktop) */
#quote-buddy {
  position: relative;
  background-image: url('../images/quote-buddy.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 850px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Buddy overlay effect */
#quote-buddy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}

#quote-buddy .quote-box {
  position: relative;
  z-index: 2;
  max-width: 600px;
  background: rgba(0,0,0,0.6);
  padding: 30px;
  font-family: 'Squada One', sans-serif;
  font-size: 1.8rem;
  line-height: 1.4;
  margin-right: 5%;
}

/* Buddy mobile image fixes */
@media (max-width: 768px) {
  #quote-buddy {
    background: none !important;
    display: block;
    padding: 0;
    margin: 0;
  }

  /* Ensure image spans full width */
  #quote-buddy .mobile-buddy-img {
    display: block;
    width: 100vw !important;   /* use viewport width */
    max-width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
  }

  /* Kill any Bootstrap gutters or margins */
  #quote-buddy .container-fluid,
  #quote-buddy .row,
  #quote-buddy [class*="col-"] {
    margin: 0 !important;
    padding: 0 !important;
  }

  #quote-buddy .quote-box {
    margin: 0 auto;
    max-width: 90%;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    font-size: 1.3rem;
  }
}


/* ===============================
   Per-Member Customization
=============================== */
#quote-george {
  min-height: 900px;
  position: relative;
  background-size: cover;
  background-position: center top;   /* start from top */
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#quote-george .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

#quote-george .container-fluid {
  position: relative;
  z-index: 2;
}

#quote-george .quote-box {
  max-width: 600px;
  margin-right: 40px;
  margin-left: auto;
  background: rgba(0,0,0,0.6);
  font-size: 2rem;
  line-height: 1.4;
  padding: 35px;
}

/* Jim like Bill: taller panel + narrow quote */
#quote-jim {
  min-height: 800px;             /* same presence as Bill */
}

#quote-jim .quote-box {
  max-width: 350px;              /* same width behavior as Bill */
  background: rgba(0,0,0,0.6);
  font-size: 1.8rem;
  line-height: 1.4;
  padding: 30px;
}

/* Mobile tightening for Jim (keeps him consistent with Jeff/Bill mobile) */
@media (max-width: 768px) {
  #quote-jim .quote-box {
    margin: 15px auto;
    max-width: 90%;
    font-size: 1.3rem;
    padding: 20px;
  }
}


@media (max-width: 992px) {
  #quote-george {
    min-height: 650px;
  }
  #quote-george .quote-box {
    font-size: 1.4rem;
    margin: 20px auto;
    padding: 25px;
  }
}


#quote-jeff {
  min-height: 700px;
  background-color: #0c0b2d;
}
#quote-jeff .quote-box { max-width: 400px; }

#quote-bill { min-height: 800px; }
#quote-bill .quote-box { max-width: 350px; }

#quote-jim { min-height: 750px; }
#quote-jim .quote-box { max-width: 500px; }

/* Buddy: left-justified, vertically centered, narrower box */
#quote-buddy {
  min-height: 700px;          /* matches Jeff, close to George/Jim */
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* no parallax */
}

/* If the column had ms-auto in HTML, this kills that push-right */
#quote-buddy .text-col {
  margin-left: 0 !important;
  margin-right: auto !important;   /* keep it on the left */
  display: flex;
  align-items: center;             /* vertical center inside column */
  justify-content: flex-start;     /* left align content */
}

/* Override the global centering and cap width so it doesn't cover Buddy's face */
#quote-buddy .quote-box {
  max-width: 500px;
  margin-left: 40px;
  margin-right: auto;
  background: rgba(0,0,0,0.6);
  font-size: 1.8rem;
  line-height: 1.4;
  padding: 30px;
}


/* Mobile / tablet adjustments */
@media (max-width: 992px) {
  #quote-george .quote-box,
  #quote-jeff .quote-box,
  #quote-bill .quote-box,
  #quote-jim .quote-box,
  #quote-buddy .quote-box {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===============================
   AOS
=============================== */
[data-aos] {
  transition-property: transform, opacity !important;
}

/* ===============================
   Brand Header
=============================== */
:root {
  --gt-logo-clear-lg: 300px;
  --gt-logo-clear-md: 220px;
}

.gt-header { position: relative; overflow: visible; }
.gt-header__container { position: relative; overflow: visible; }

.gt-logo {
  position: absolute;
  top: 18px;
  left: 15px;
  z-index: 5000;
  display: block;
}

.gt-logo__img {
  height: 220px;
  width: auto;
  display: block;
}

/* Socials */
.gt-top .gt-social {
  color: #fff;
  font-size: 1.5rem;
  margin-left: 16px;
  text-decoration: none;
}
.gt-top .gt-social:first-child { margin-left: 0; }
.gt-top .gt-social:hover { color: #e63946; }

/* Fix: ensure header socials are always on top */
.gt-top,
.gt-top .gt-social {
  position: relative;
  z-index: 6000; /* higher than logo and hero fade */
}

/* Adjust logo stacking so it doesn't overlap socials */
.gt-logo {
  position: absolute;
  top: 18px;
  left: 15px;
  z-index: 4000; /* lower than socials */
}

/* Keep nav toggle and menu on top of everything on mobile */
.navbar-toggler,
.navbar-collapse {
  position: relative;
  z-index: 7000;
}

/* Optional: make sure hero fade never blocks clicks */
.gt-hero__fade {
  pointer-events: none; /* allows clicks through fade area */
}


/* Nav */
.gt-nav { position: relative; z-index: 100; }
.gt-nav .navbar-collapse {
  padding-left: var(--gt-logo-clear-lg);
}
.gt-nav__list {
  display: flex;
  gap: 18px;
}
.nav-link {
  color: #fff !important;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.nav-link:hover { color: #e63946 !important; }

/* Mobile nav */
.navbar-toggler { margin-bottom: 10px; }
@media (max-width: 768px) {
  .gt-nav .navbar-collapse {
    text-align: right;
    padding-left: 0;
    padding-right: 10px;
  }
  .gt-nav__list {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
}

/* Logo scaling */
@media (max-width: 992px) {
  .gt-logo__img { height: 160px; }
  .gt-nav .navbar-collapse { padding-left: var(--gt-logo-clear-md); }
}
@media (max-width: 768px) {
  .gt-logo { top: 10px; }
  .gt-logo__img { height: 110px; }
}

/* ===============================
   Hero (crowd image)
=============================== */
.gt-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}
.gt-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.gt-hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
}
@media (max-width: 992px) { .gt-hero { height: 60vh; } }
@media (max-width: 576px) { .gt-hero { height: 45vh; } }

/* George & Buddy quotes on mobile: move below image */

@media (max-width: 768px) {

  /* George */
  #quote-george {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* stick content to bottom */
    min-height: 500px;
  }

  #quote-george .container-fluid {
    position: relative;
    width: 100%;
  }

  #quote-george .quote-box {
    margin: 20px auto;
    max-width: 90%;
    background: rgba(0,0,0,0.75);
    font-size: 1.3rem;
  }

  /* Buddy */
  #quote-buddy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 500px;
  }

  #quote-buddy .container-fluid {
    position: relative;
    width: 100%;
  }

  #quote-buddy .quote-box {
    margin: 20px auto;
    max-width: 90%;
    background: rgba(0,0,0,0.75);
    font-size: 1.3rem;
  }
}
/* Mobile cleanup for Bill & Jim quotes */
@media (max-width: 768px) {
  #quote-bill .quote-box,
  #quote-jim .quote-box {
    margin: 15px auto;       /* center with less top/bottom spacing */
    max-width: 90%;          /* keep consistent with Jeff */
    font-size: 1.3rem;       /* scale text down slightly */
    padding: 20px;           /* reduce padding */
  }
}


/* Footer */
.site-footer {
  background: #000;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
}

.footer-marla-img {
  max-height: 80px;
  width: auto;
}

.footer-logo-img {
  max-height: 100px;
  width: auto;
}

.footer-copy {
  color: #aaa;
  font-size: 0.8rem;
  line-height: 1.4;
}

.footer-links li {
  margin-bottom: 6px;
}


footer a {
  color: #e63946;              /* Thorogood red */
  text-decoration: none;       /* remove underline */
  font-family: 'Squada One', sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

footer a:hover {
  color: #fff;                 /* invert on hover */
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .footer-logo-img {
    max-height: 80px;
  }
  .footer-marla-img {
    max-height: 60px;
  }
  .footer-links {
    margin-top: 20px;
  }
}
.jomsocial, .j-editor-touch-device .j-textarea, .joms-popup__content {
    color: #000!important;
}