/* ------------------------------------------------------------------- */
/* ------------------------ BASE / SHARED ----------------------------- */
/* Era-agnostic foundation: typography, utilities, buttons, nav,       */
/* section layout, footer bones. Era skins (e.g. titans.css) set the   */
/* custom properties and artwork.                                      */
/* ------------------------------------------------------------------- */

:root {
  /* overridden by the era skin */
  --accent: #f4d000;
  --accent-hot: #f4d000;
  --accent-deep: #003d4a;
  --accent-2: #003d4a;
  --bg: #000000;
  --text: #ffffff;
  --text-soft: #ece7df;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.crimson-text-regular {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
}

h2 {
  font-family: 'Crimson Text', serif;
  font-size: xxx-large;
  text-align: center;
  margin-bottom: 1rem;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: larger;
  text-align: center;
}

@media (max-width: 577px) {
  p {
    text-align: justify;
    font-size: medium;
    font-weight: 300;
  }
  h2 {
    font-size: 1.75rem;
  }
}

/* UTILITIES */

.flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.flex-direction-column {
  flex-direction: column;
}

.w-100p {
  width: 100%;
}

.w--3200-3000 {
  max-width: 32rem;
  min-width: 30rem;
  min-height: 3rem;
}

@media (min-width: 577px) {
  .mobile_only {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .desktop_only {
    display: none !important;
  }
  .w--3200-3000 {
    min-width: auto;
  }
}

/* BUTTONS */

a.button--custom {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-soft);
  background: linear-gradient(170deg, var(--accent-deep) 50%, var(--accent-hot) 100%);
  text-shadow: none;
  width: 100%;
  height: 50px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: xx-large;
  font-weight: 800;
  margin-bottom: 1rem;
}

a.button--custom:hover {
  background: linear-gradient(160deg, var(--accent-hot) 50%, var(--accent-deep) 100%);
  opacity: 0.9;
}

.button--custom-active {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-soft);
  text-shadow: none;
  width: 100%;
  height: 50px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: xx-large;
  font-weight: 800;
  background: transparent;
  border: 0.15rem solid var(--accent) !important;
}

.button--custom-active:hover {
  background: linear-gradient(170deg, var(--accent) 20%, var(--accent-hot) 100%);
  color: var(--bg);
  text-shadow: 0 0 0.1rem black;
}

.button--custom-active:hover .button_icon {
  filter: drop-shadow(0 0 0.1rem black);
}

.button_icon {
  display: inline-block;
  width: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

@media (max-width: 576px) {
  a.button--custom {
    width: auto;
    font-size: large;
    height: 35px;
    padding: 0 1rem;
  }
  .button--custom-active {
    width: auto;
    font-size: 1.5rem;
    padding: 0.25rem 1rem;
    height: auto;
  }
}

/* ICONS */

.icon {
  display: inline-block;
  text-align: center;
  width: 2rem;
  font-size: 2.5rem;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  color: var(--accent-deep);
}

.icon:hover {
  filter: drop-shadow(0 0 0.3rem black);
  color: var(--text);
  transition: all 0.2s ease-in-out;
}

/* MOBILE NAVIGATION */

.mobile-navigation_toggle {
  position: fixed;
  bottom: 1%;
  /* centered explicitly: the toggle lives at body level now (no flex
     parent to center it like the hero used to) */
  left: 50%;
  translate: -50% 0;
  font-size: 3rem !important;
  cursor: pointer;
  transition: all 0.2s ease-out;
  color: var(--text-soft) !important;
  z-index: 5;
  line-height: 1.7;
  opacity: 0.9;
  text-shadow: -1px -1px 0.1rem #000,
    1px -1px 0.1rem #000,
    -1px 1px 0.1rem #000,
    1px 1px 0.1rem #000;
}

/* The toggle stays position:fixed at every breakpoint. It used to switch
   to absolute on small screens while it lived inside the hero, but it now
   sits at body level (moved out of the ScrollTrigger-pinned subtree, whose
   transform would trap fixed descendants) — absolute here would anchor it
   to the whole page and strand it at the footer. */

.mobile-navigation {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  background-color: #000000;
  overflow-x: hidden;
  transition: 0s;
}

.mobile-navigation a {
  text-decoration: none;
  color: var(--accent-deep) !important;
  transition: all 0.2s ease-out;
  font-family: 'Crimson Text', serif !important;
  font-size: 2.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.24rem !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-shadow: -1px -1px 1rem #fff,
    1px -1px 1rem #fff,
    -1px 1px 1rem #fff,
    1px 1px 1rem #fff;
}

.mobile-navigation a:hover {
  opacity: 1;
  text-shadow: 0.1rem 0.1rem 1.6rem var(--accent);
}

.mobile-navigation_toggle:hover,
.mobile-navigation_toggle:focus {
  opacity: 0.6;
}

.mobile-navigation .closebtn {
  position: absolute;
  bottom: 1.8rem;
  font-size: 6rem !important;
  transition: all 0.2s ease-out;
  letter-spacing: 0.2rem !important;
  font-weight: 400 !important;
  z-index: 11;
  font-family: 'Gothic A1', sans-serif !important;
}

@media (min-width: 768px) {
  .mobile-navigation {
    transition: all 0s ease-out;
  }
  .mobile-navigation_toggle {
    top: 4rem;
    right: 4rem;
    bottom: auto;
    left: auto;
    translate: none;
  }
  .mobile-navigation a {
    font-size: 4.8rem !important;
  }
  .mobile-navigation .closebtn {
    top: 3.8rem;
    right: 4rem;
  }
}

/* SECTION BLOCKS */

#new-album {
  margin-top: 3rem;
}

.album-container {
  max-width: 80%;
}

.album-title {
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 0;
  text-transform: uppercase;
}

@media (max-width: 576px) {
  .album-title {
    font-size: 1.25rem;
  }
}

#merch {
  margin-top: 5rem;
  flex-direction: column;
  margin-bottom: 4rem;
}

.merch-text {
  max-width: 80%;
}

@media (max-width: 576px) {
  .merch_images {
    text-align: center;
  }
}

.video-container {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

@media (max-width: 576px) {
  .video-wrapper {
    display: flex;
    justify-content: center;
  }
  .video-wrapper iframe {
    max-width: 90%;
    height: auto;
  }
  .video-container img {
    max-width: 90%;
  }
}

/* TOUR DATES (Bandsintown widget) */

.bit-widget-container {
  width: 65%;
}

@media (max-width: 576px) {
  .bit-widget-container {
    width: auto;
  }
}

.bit-widget.bit-layout-desktop .bit-location {
  text-align: right !important;
}

/* ABOUT */

.about_header {
  align-items: center;
}

.photo-container {
  position: relative;
}

.about_text {
  max-width: 80%;
}

#shooting_picture {
  max-width: 60%;
  border: 1px solid var(--accent);
}

#shooting_picture_mobile {
  width: 90%;
  max-width: 90%;
  border: 1px solid var(--accent);
}

/* CONTACT */

@media (max-width: 766px) {
  #contact {
    position: relative;
    z-index: 3;
  }
  .contact_header {
    margin-top: 1rem;
  }
}

.mail-link {
  font-family: 'Gothic A1', sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.01rem;
  line-height: normal;
  text-decoration: none;
  color: var(--text);
}

.mail-link:hover {
  color: var(--text-soft);
}

/* FOOTER BONES (artwork set by the era skin via --footer-art) */

#footer {
  position: relative;
}

#footer_inner {
  max-width: 70%;
}

.credit {
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 100;
  letter-spacing: 0.30em;
  line-height: 1.9;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 0;
  position: absolute;
  bottom: 0;
  right: 1rem;
  max-width: 80%;
  text-align: right;
}

.site-credit-copy {
  font-family: sans-serif;
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: var(--text);
  font-weight: 100;
  font-size: small;
  margin-bottom: 0;
}

.site-credit {
  font-family: sans-serif;
  font-size: small;
  position: absolute;
  left: 1rem;
  bottom: 0.1rem;
  color: var(--text);
  font-weight: 100;
  text-decoration: none;
  text-transform: uppercase;
}

.site-credit:hover {
  text-shadow: 0.1rem 0.1rem 1.6rem var(--accent);
}

.footer-icon {
  display: inline-block;
  text-align: center;
  width: 2rem;
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  color: var(--text);
  filter: drop-shadow(0 0 0.2rem black);
}

.footer-icon:hover {
  color: var(--accent);
  filter: drop-shadow(0 0 1rem var(--accent));
}

@media (max-width: 576px) {
  .site-credit-copy,
  .site-credit {
    left: 0;
    font-size: 0.5rem;
  }
  .credit {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 80%;
    font-size: 0.5rem;
    text-align: right;
  }
}

/* ERA SWITCH (visible, accessible path between album eras) */

.era-switch {
  font-family: 'Crimson Text', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  text-shadow: 0 0 1rem var(--accent-hot);
  transition: all 0.3s ease-out;
}

.era-switch:hover,
.era-switch:focus {
  color: var(--text);
  text-shadow: 0 0 2rem var(--accent-hot), 0 0 3rem var(--accent);
}