/* makes width include padding & border*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: 'Stratum-Thin';
  src: url('fonts/Stratum2-Thin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Stratum-Light';
  src: url('fonts/Stratum2-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Stratum-Regular';
  src: url('fonts/Stratum2-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Stratum-Medium';
  src: url('fonts/Stratum2-Medium.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Stratum-Bold';
  src: url('fonts/Stratum2-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Stratum-Black';
  src: url('fonts/Stratum2-Black.otf') format('opentype');
  font-weight: bolder;
  font-style: normal;
}

/*property: clamp(min, preferred, max);
    min - the smallest it can be
    preferred - your scaling rule (like %, vw, etc.)
    max - the largest it can be*/
body {
    text-align: left;
    max-width: clamp(60rem, 70%, 70rem);
    margin-left: auto;
    margin-right: auto;
    font-family: Verdana;
    font-size: clamp(13.5px, 1vw, 15px);
    background-color: white;
    margin-top: 0px;
}

/* header should be the containing block for absolute children */
header {
  position: relative;
  height: 60px;          /* adjust as needed */
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center; /* keeps header content centered visually */
}

/* center the title text exactly in the page */
.site-title {
  position: absolute;       /* removed from flow so logo won't affect centering */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  display: inline-block;    /* shrink-wrap to the text width */
  white-space: nowrap;      /* prevents wrapping if you want one-line title */
}

/* anchor inside the title — no change needed except reset spacing */
.site-title a {
  text-decoration: none;
  color: black;
  font-family: 'Stratum-Bold';
  font-size: 32px
}

/* place the logo to the left of the title, 10px gap */
.site-logo {
  position: absolute;       /* positioned relative to .site-title */
  right: 100%;              /* place the image's right edge at the title's left edge */
  margin-right: 10px;       /* the 10px gap you asked for */
  top: 50%;
  transform: translateY(-50%); /* vertically center relative to the title */
  height: 48px;             /* adjust to taste */
  width: auto;
}

/* hamburger pinned to the far right */
.hamburger {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #F15C22;
  align-items: center;
}

.hamburger img{
    display: block;
}

/* Navbar bar itself (always full width orange) */
.navbar {
    background-color: #F15C22;
    font-family: 'Stratum-Medium';
    position: relative; /*children of .navbar will be positioned relative to .navbar instead of body or something else*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-h2{
        display: none;
        color: white;
        font-size: 30px;
    }

/* Horizontal nav links (desktop only) */
.nav-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 15px;
    display: block;
    text-align: center;
    font-size: 22px;
    transition: background-color 0.2s ease;
}

.nav-links li a:hover {
    background-color: #c14412;
}

/* Hamburger button */
.hamburger {
    display: none; /* hidden on desktop */
    background: none; /* transparent so it blends into bar */
    border: none;
    color: #F15C22;
    cursor: pointer;
    position: absolute;
    right: 20px;
    padding: 0px;
}

.hamburger img{
    height: 2rem;
}

/* Close button inside sidebar */
.close-btn {
    font-size: 32px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px 20px;
    text-align: left;
    width: 100%;
    display: none; /* hidden by default (desktop) */
}

.close-btn:hover {
    background-color: #c14412;
}


main{
    background-color: #f5f5f5;
}

.page-content {
    padding-top: clamp(20px, 2vw, 40px);
    padding-left: clamp(20px, 3vw, 70px);
    padding-right: clamp(20px, 3vw, 70px);
    padding-bottom: clamp(20px, 4vw, 70px);
}

main h2{
    text-align: center;
    color: #F15C22;
    font-family: 'Stratum-Bold';
    font-size: 33px;
    margin: 0px;
}

main h3{
    margin-bottom: 10px;
    margin-top: 0px;
    font-family: 'Stratum-Regular';
    font-size: 25px;
}

/*HOME PAGE STYLING ------------------------------------------------*/
#home-page-greeting{
    text-align: center;
    align-items: center;
    padding-bottom: 25px;
}

#home-page-greeting p{
    font-family: Verdana;
    font-weight: 1;
    font-size: 18px;
}

#home-page-buttons{
   display: flex;
    width: 100%;            /* full width, but… */
    max-width: 400px;       /* …never bigger than 400px */
    justify-content: center;
    padding: 20px;
    gap: 20px;
    margin-left: auto;
    margin-right: auto;  
}
#home-page-buttons a{
  display: inline-flex;              /* flex so we can stack items */
  flex-direction: column;            /* stack text above image */
  align-items: center;               /* center horizontally */
  justify-content: center;
  color: black;        
  font-family: 'Stratum-Regular';
  font-size: 18px;
  padding: 12px 24px;
  border-radius: 8px;
  border-color: #F15C22; 
  border-style: solid;
  text-decoration: none;
  transition: background-color 0.2s ease;
  gap: 8px;  
}

#home-page-buttons a:hover{
    background-color: #d4d4d4;
}

#home-page-buttons img{
    width: 50%;                      
    height: auto;
    flex-shrink: 0;        /* don’t let flexbox squish it */
    object-fit: contain;   /* keep proportions no matter what */
}

#big-archery-logo{
    width: 90%;
    max-width: 350px;
    height: auto;
}
/*----------------------------------------------------------------*/

main ul li{
    margin-bottom: 6px;
    line-height: 1.4;
}
p {
  line-height: 1.4; /* 1.6 times the font size */
}

hr {
  border: none;              /* remove default styling */
  border-top: 2px solid #a8a8a8; /* thickness + color */
  margin: 30px 0;            /* spacing above/below */
}

.image-text-block {
  display: flex;
  align-items: center;
  gap: clamp(5px, 3vw, 40px);; /* spacing between text and image */       
}

.image-text-block img {
  width: 40%;
  flex: 0 0 40%;
  height: auto;
}

.image-group {
  display: flex;
  width: 45%;
  flex: 0 0 40%;  
  gap: 6%;
  align-items: center;

}

.image-group img {
  flex: 1 1 auto;  
  width: 47%;
  flex: 0 0 47%;  
  height: auto;
}

#calendar-group {
  display: flex;
  width: 95%;
  gap: 5%;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

#calendar-group img {
  flex: 1 1 auto;  
  width: 47%;
  flex: 0 0 47%;  
  height: auto;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
  gap: 1rem; /* spacing between items */
}

.image-grid img {
  width: 100%;         /* make image fill its grid cell */
  height: 200px;       /* fixed height for uniformity */
  object-fit: cover;   /* crop while preserving aspect ratio */
  border-radius: 8px;  /* optional rounded corners */
}

#see-more-button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: #333;
  color: white;
  cursor: pointer;
}

#faq h3{
  margin-bottom: 0px;
}

#faq p{
  margin-top: 0px;
  margin-bottom: 20px;
}

footer {
    margin-top: 20px;
    text-align: center;
}

.footer-icons{
    display: flex;
    justify-content: center;
    gap: 30px; /* this controls the spacing */
    margin-top: 20px;
}

footer a img{
  width: auto;
  height: 40px;
}

/* --- apply this CSS only if the screen width is 768px or less (mobile devices) --- */
@media (max-width: 768px) {
    
    .hide-image-on-mobile{
      display: none;
    }

    .close-btn {
        display: block;
    }
      /* Show hamburger */
    .hamburger {
        display: block;
    }
    /* Keep the orange bar but remove links from it */
    .nav-links {
        display: none; /* hidden in bar, but sidebar version will show */
    }
    /* Sidebar menu (slides from right) */
    .nav-links {
        position: fixed;
        top: 0;
        width: 200px;
        height: 100%;
        background-color: #F15C22;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        width: 100%;
        padding: 15px 20px;
        font-size: 22px;
        text-align: left;
    }

    /* When open */
    .nav-links.open {
        display: flex;
        right: 0;
    }

    /* Ensure the orange bar stays visible at top */
    .navbar {
        height: 55px;  
    }

    .mobile-h2{
        display: block;
    }

    .desktop-h2{
        display: none;
    }
    
    .image-text-block {
    flex-direction: column;
    }

    .image-text-block img {
        order: 2; /* always push image to the bottom */
        width: 70%;
        height: auto;  /* keep correct aspect ratio */
    }

    .image-text-block div {
    order: 1; /* always keep text above */
    }
    
    .image-text-block .image-group {
    order: 2; /* always keep text above */
        width: 75%;
        height: auto;  /* keep correct aspect ratio */
    }

    #calendar-group {
      flex-direction: column;
    }
    
    #calendar-group img{
       width: 95%;
    }
}