html {
  font-size: 100%;	}

body {
  margin: 0;
  padding: 0;
  background-image: url(../images/bg.jpg);
  color: #fff;
  font-family: "Lato", sans-serif; }

main {
  padding-top: 100px;
}
  @media screen and (min-width: 41em) {
    main {
      padding-top: 100px;} }

*, *::after, *::before {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

h1, h2 {
  margin: 0;
}

img {
  box-sizing: content-box;
  -moz-box-sizing: content-box; }

a, a:visited {
  text-decoration: none;
  color: #bb0101;
}
a:focus, a:active {
  outline: 2px solid #bb0101;
  outline-offset: 2px;
}

.wrapper, .block {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 10px;
}
@media (max-width: 700px) {
    .wrapper, .block {
        padding: 0 5px;
    }
}

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

.text-white {
  color: #fff;
}

.block {
  position: relative;
  max-width: 1200px;
  margin: auto;
  padding: 20px 10px; /* Reduced padding for less vertical space */
}
@media screen and (min-width: 50em) {
  .block.-fullwidth {
    max-width: 900px;
  }
}

/* --- Overlay --- */
.overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

/* --- Intro Section --- */
.intro {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 0; /* Remove extra space below intro */
  padding-top: 0;    /* Remove extra space above intro */
}
.intro__figure {
  max-width: 400px;
  height: auto;
  flex-shrink: 0;
}
.intro__text {
  flex: 1;
}

/* --- Section Header Images --- */
.about-header,
.charity-header,
.poker-header,
.contact-header {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 100%;
  height: auto;
}

/* --- Rope Divider --- */
.rope {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.rope img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Offcanvas Navigation --- */
.offcanvas {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #36384c;
  transform: translateX(100%);
  transition: transform 400ms ease-in-out;
  z-index: 10;
  padding: 10px;
}
.offcanvas.open {
  transform: translateX(0%);
}
.offcanvas__content {
  padding-top: 5rem;
}
.offcanvas__image {
  margin-bottom: 20px;
}

/* --- Header --- */
.header {
  position: fixed;
  width: 100%;
  padding: 5px 0px;
  background-image: url(../images/header.png);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  z-index: 10; }
  .header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .header__image {
    flex: 0 1 auto;
    height: 60px; }
    @media screen and (min-width: 41em) {
      .header__image {
        height: 80px; } }
  .header__nav {
    display: none;
    flex: 0 1 auto;
    gap: 1.5rem;
    transition: color 150ms ease-in-out; }
    @media (min-width: 700px) {
      .header__nav {
        display: flex;
        gap: 1.5rem;
    }
    #offcanvas {
        display: none;
    }
}
@media (max-width: 699px) {
    .header__nav {
        display: none;
    }
    #offcanvas {
        display: block;
    }
}
    .header__nav-item {
      font-size: 1.125rem;
      color: #bb0101;
      padding: 0 15px;
      transition: color 150ms ease-in-out; }
      .header__nav-item:hover {
        color: #560000; }

/* --- Footer --- */
footer {
  padding: 10px 0;
  text-align: center;
  background-image: url(../images/footer.png);
  background-repeat: no-repeat;
  font-size: 1rem;
}
footer img {
  vertical-align: middle;
  margin: 0 5px;
  height: 32px;
}

/* --- Responsive Grid (Charity Section) --- */
.grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.grid__item {
  background: rgba(10, 10, 10, 0.7);
  border-radius: 8px;
  padding: 1rem;
  max-width: 320px;
  flex: 1 1 220px;
  margin-bottom: 1rem;
}
.grid__image {
  max-width: 320px;
  height: 195px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.grid__content h1 {
  text-align: center;
}
.grid__content p {
  text-align: center;
}

/* --- Remove Redundant/Unused Selectors --- */
/* Removed .noscroll, .block__wrapper:nth-child(odd), .block__content, etc. if not used */

/* --- Accessibility Improvements --- */
/* Add focus styles for buttons and navigation */
.header__open:focus,
.offcanvas__close:focus {
  outline: 2px solid #bb0101;
  outline-offset: 2px;
}

/* --- Section Specific Spacing --- */
#about .block,
#about .block,
#about .block__content.-text {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

/* Center the about section content and constrain width for readability */
#about .block {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px; /* keep content centered and not too wide */
}

#about .intro {
  margin-left: auto;
  margin-right: auto;
  justify-content: center; /* center image and text horizontally */
}

/* Keep paragraph text left-aligned inside the intro text block for readability */
#about .intro__text {
  text-align: left;
}
#about .block__content .intro {
  margin-bottom: 0;
}
#home .block {
  position: relative;
  max-width: 1200px;
  margin: auto;
  padding: 20px 10px;
  text-align: center;
}
#poker .block {
  text-align: center;
}

/* Home header image */
.home-header {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ABOUT INTRO SECTION WITH ACTION FIGURE Prevent text from becoming too narrow */
.intro__text {
    flex: 1 1 300px;
    min-width: 220px;
    max-width: 700px;
}

/* Color bold and emphasized text to match site accent */
strong, b {
  color: #ff1818;
  font-weight: 700;
}

em, i {
  color: #ff1818;
  font-style: italic;
}

/* Allow image to shrink more */
.intro__figure {
    flex: 0 1 200px;
    max-width: 400px;
    width: 100%;
    height: auto;
}

/* Stack vertically on small screens */
@media (max-width: 700px) {
    .intro {
        flex-direction: column;
        align-items: center;
    }
    .intro__figure,
    .intro__text {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
  }


/* --- YouTube Carousel --- */
.youtube-carousel {
  position: relative;
  max-width: 1100px; /* wider container to allow 2-up */
  margin: 0 auto;
}

/* Make the swiper wrapper behave like a responsive grid: 2 columns on wider screens, 1 column on small */
.youtube-carousel .swiper-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* default to single column */
  gap: 1rem;
  align-items: start;
  justify-items: center;
}

.youtube-carousel .swiper-slide {
  width: 100%;
  padding: 0.25rem;
  box-sizing: border-box;
}

/* Prefer modern browsers: enforce 16:9 aspect ratio for slides */
.youtube-carousel .slide-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 450px;
  overflow: hidden;
}

.youtube-carousel .slide-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.youtube-carousel .swiper-button-next,
.youtube-carousel .swiper-button-prev {
  top: auto;
  bottom: 10px;
  transform: translateY(0);
  z-index: 2;
}

.youtube-carousel .swiper-pagination {
  position: relative;
  margin-top: 20px;
  text-align: center;
  z-index: 1;
  font-size: 16px;
  color: #fff;
}

/* Stack to single column on narrow screens */
/* Breakpoint: two columns at 700px and above */
@media (min-width: 700px) {
  .youtube-carousel .swiper-wrapper {
    grid-template-columns: 1fr 1fr; /* two columns */
  }
}

@media (max-width: 699px) {
  .youtube-carousel .swiper-slide {
    width: 100%;
  }
  .youtube-carousel .swiper-button-next,
  .youtube-carousel .swiper-button-prev {
    bottom: -20px;
  }
  .youtube-carousel .swiper-pagination {
    margin-top: 10px;
  }
  .youtube-carousel iframe {
    max-height: 280px;
  }
}

/* --- Miscellaneous --- */
/* Remove unnecessary box-sizing from * and *::after, *::before if not needed */
/* Remove redundant display: block from sections and containers */