/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: 'Hatten';
  src: url('../fonts/HATTEN.TTF') format('truetype'); /* Fallback */
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  background-color: #000;
}

/* h1, h2 {
  font-family: 'Hatten', sans-serif;
  letter-spacing: normal;
} */


.button {
    border-radius: 100px;
    font-size: 1.5rem;
}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primar
{
    background-color: #366EDA;
    color: #fff;
    border: 1px solid #366EDA;
}

.appBar .button {
  margin-bottom: 0;
}


.full-width-btn {
  font-size: 3rem;
  border-radius: 4px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem 4rem; /* Adjust padding for touch-friendly size */
  color: #fff;
  border: 1px solid #fff;
  white-space: normal;
  height: auto;
}

.full-width-btn::after {
  content: "›";  /* Right-pointing chevron */
  font-size: 4rem;
  margin-left: 8px;
}


.appBar a {
  text-decoration: none;
}
.appBar a:hover {
  color: #ef2014;
}
span.backArrow {
  color: white;
  font-size: 3rem;
  line-height: 1.2;
}  
span.pop1 {
  color: white;
}
span.startHere {
  color: #ef2014;
}
span.poplogo {
  font-size: larger;
  color: white;
  font-family: 'Hatten', sans-serif;
  letter-spacing: normal;
}
span.onelogo {
  font-size: larger;
  color: #ef2014;
  font-family: 'Hatten', sans-serif;
  letter-spacing: normal;
}


  /* Sections
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* .section {
    padding: 8rem 0 7rem;
    text-align: center;
  } */
  .section {
    background-color: #fff;
    padding: 8rem 0 7rem;
    text-align: left;
  }
  .section-heading,
  .section-description {
    margin-bottom: 1.2rem;
  }

  .debugBG {
    background-color: red;
  }
  .debugBG2 {
    background-color: blue;
  }
  
  .featured, .more-resources {
    padding-top: 0rem;
  }

  /* APP BAR */
  .appBar {
    padding: 2rem 0;
    text-align: center;
    background-color: #000;
    color: #fff;
  }
  .appBar h1 {
    /* font-family: Hatten, sans-serif;
    letter-spacing: 1px; */
    font-size: 3rem;
    margin-bottom: 0rem;
  }
   

  /* HERO */
  .hero {
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 7rem 0 8rem 0;
    /* background-image: url('../images/hero-bg.jpg');
    background-size: cover; */
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), 
        url('../images/hero-bg.jpg') center/cover no-repeat;
  }
  .hero h3 {
    font-family: Hatten, sans-serif;
    letter-spacing: 2px;
    font-size: 4rem;
  }
  .tease {
    font-size: 2rem;
    margin-bottom: 3rem;
    font-style: italic;
  }
  .welcome {
    font-size: 2rem;
    margin-bottom: 0rem;
  }


  /* SURVEY */
  .survey {
    /* background-color: #f9f9f9; */
    text-align: center;
    padding: 1rem 0 1rem 0;
  }
 
  /* HEADER */
  .header {
    text-align: center;
    padding: 1rem 0;
  }
  /* NAV BAR */
  .tab-group {
    display: flex;
    justify-content: left;
    overflow-x: auto; /* Enables horizontal scrolling on small screens */
    /* border-bottom: 1px solid #ccc; */
    margin-bottom: 3rem;
  }
  /* Individual tab styles */
  .tab-group a {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
  }
  /* Hover state for tabs */
  .tab-group a:hover {
    text-decoration: underline;
  }
  body.home a.home,
  body.faq a.faq,
  body.community a.community,
  body.train a.train,
  body.watch a.watch,
  body.esports a.esports {
    font-weight: bold;
    text-decoration: underline;
  }

  /* CARD */
  .card {
    text-align: center;
    /* border-bottom: 1px solid #E1E1E1; */
  }

  /* FOOTER */
  .footer {
    background-color: #000;
    color: #fff;
    margin-bottom: 0;
    text-align: center;
  }

  .footer a {
    color: #fff;
  }

/* RESPONSIVE */
  .column + .column {
    margin-top: 5rem;
  }
  .columns + .columns {
    margin-top: 5rem;
  }

/* Bigger than 550 */
@media (min-width: 550px) {
  .appBar {
    text-align: center;
  }
  .tab-group {
    justify-content: center;
  }
  .column + .column {
    margin-top: inherit;
  }
  .columns + .columns {
    margin-top: inherit;
  }
  p.back-button {
    text-align: left;
  }
}

.btn-uniform {
  /* display: block; */
  width: 100%;          /* full width on mobile */
  box-sizing: border-box;
}

/* On larger screens, apply a fixed width */
@media (min-width: 550px) {
  .btn-uniform {
    width: 400px;      /* fixed width for desktop; adjust as needed */
    margin-left: auto; /* center the button in its container */
    margin-right: auto;
  }
}


/* Container for each expansion panel */
.expansion-panel {
  /* border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd; */
  /* border-radius: 4px; */
  margin-bottom: 1rem;
  overflow: hidden;
}
.expansion-panel:hover {
  background-color: #f7f7f7;
  border-radius: 8px;
}
.expansion-panel.open {
  background-color: #f7f7f7;
  border-radius: 8px;
}
/* Header area with clickable title and icon */
.panel-header {
  /* background-color: #f7f7f7; */
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
/* .panel-header {
} */
/* Content area is hidden by default */
.panel-content {
  padding: 1rem;
  display: none;
  /* border-top: 1px solid #ddd; */
}
/* Optional: a transition for smooth opening */
.panel-content.open {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


.align-center {
  text-align: center;
}