:root{--pyc-red:#851008;--pyc-blue:#CDEFFD;--text:#1b1b1b}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:"Podkova",ui-serif,Georgia,serif}

/* Apply a soft pastel gradient background inspired by NZYC2025 */
/* Override gradient backgrounds so the entire site uses a solid white backdrop */
body{
  background:#fff;
}

/* ------------------------------------------------------------------
   Global variables
   ------------------------------------------------------------------ */
/* Approximate header dimensions: inner (logo + padding) plus rule bar */
:root{
  /* Height of the header logo area (logo at ~80px high + padding) */
  --header-inner-height: 100px;
  /* Height of the red rule bar that appears under the header when scrolled */
  --header-rule-height: 16px;
  /* Total offset to apply to page content when the header is solid */
  --header-offset: calc(var(--header-inner-height) + var(--header-rule-height));
}
@font-face{
  font-family:"Kilogram";
  /* Use relative paths for the font files – the CSS file lives in assets/css,
     so go up one directory to reach assets/fonts */
  src: url("../fonts/Kilogram.woff2") format("woff2"),
       url("../fonts/Kilogram.woff") format("woff"),
       url("../fonts/KiloGram_KG.woff2") format("woff2"),
       url("../fonts/KiloGram_KG.woff") format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}
.kilo{font-family:"Kilogram","Podkova",serif;font-weight:700}

.site-header{
  /* Make the header overlay the hero rather than pushing the page down */
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:30;
  background:transparent;
  box-shadow:none;
  /* Transition both the background and the box-shadow so it animates smoothly when scrolling */
  /* Slow down the header transition for a smoother change between states */
  transition:background .45s ease, box-shadow .45s ease;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  max-width:1100px;
  margin:0 auto;
}

/* On large screens, allow the header inner container to stretch across the full width of the viewport.
   This prevents the hamburger icon from sitting awkwardly inset on wide monitors and ensures it aligns
   flush with the right edge of the screen. */
@media (min-width: 1024px){
  .header-inner{
    max-width:none;
    width:100%;
    margin:0;
  }
}
.brand img{width:80px;height:80px;border-radius:50%;display:block;object-fit:cover}
.brand-title{display:grid;gap:2px;justify-items:center;flex:1;transition:opacity .25s ease, transform .25s ease}
.brand-title .line1{font-size:clamp(22px,3.8vw,38px);text-transform:uppercase;line-height:1.05}
.brand-title .line2{font-size:clamp(20px,3.2vw,30px);text-transform:uppercase}
.brand-title .line3{font-size:clamp(16px,2.6vw,22px);text-transform:uppercase}
.menu-btn{background:none;border:0;cursor:pointer}
.menu-btn .bars{display:inline-block;width:28px;height:2px;background:#000;position:relative}
.menu-btn .bars:before,.menu-btn .bars:after{content:"";position:absolute;left:0;width:28px;height:2px;background:#000}
.menu-btn .bars:before{top:-7px}.menu-btn .bars:after{top:7px}

/* Change the color of the hamburger icon depending on whether the hero is in view.
   When the hero is visible (no .show-brand class on the body), make the bars white so
   they are visible over the dark fire image. Once the page is scrolled and the
   header becomes solid (.show-brand), revert to black to contrast against the white banner. */
body:not(.show-brand) .menu-btn .bars,
body:not(.show-brand) .menu-btn .bars:before,
body:not(.show-brand) .menu-btn .bars:after{
  background:#fff;
}

body.show-brand .menu-btn .bars,
body.show-brand .menu-btn .bars:before,
body.show-brand .menu-btn .bars:after{
  background:#000;
}
.rule{
  height:var(--header-rule-height);
  background:var(--pyc-red);
  /* Hide the rule until the header becomes solid */
  display:none;
}

/* Hero */
.hero{
  position:relative;
  /* Ensure the hero height doesn't change when the mobile browser chrome collapses */
  min-height:100vh;
  /* On browsers that support the small viewport unit (svh), use it to prevent zooming
     when the address bar appears/disappears on mobile (especially iOS Safari). */
  min-height:100svh;
  display:grid;
  place-items:center;
  /* Fallback hero background: if the pseudo-element fails to load,
     the background image will still appear directly on the hero section. */
  background:#000 url("../img/home-hero.jpg") no-repeat;
  background-size:cover;
  background-position:60% 30%;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* Position the background image so there is more dark space behind the hero text */
  /* Use a relative path to the image from the CSS file. The CSS file is in assets/css,
     so we need to go up one directory (../) to reach assets/img. */
  background:url("../img/home-hero.jpg") no-repeat;
  background-size:cover;
  background-position:60% 30%;
  opacity:.9;
  z-index:-2;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%);
  z-index:-1;
}
.hero-title{color:#fff;text-align:center;text-shadow:0 3px 14px rgba(0,0,0,.45)}
.hero-title .h1{font-size:clamp(30px,5.5vw,56px);text-transform:uppercase;letter-spacing:.5px}
.hero-title .h2{font-size:clamp(20px,3.6vw,32px);text-transform:uppercase}
.hero-title .h3{font-size:clamp(18px,2.8vw,26px);text-transform:uppercase}

/* "Text becomes banner": hide header brand until past hero */
body:not(.show-brand) .brand-title{opacity:0;transform:translateY(-4px);pointer-events:none}
body.show-brand .brand-title{opacity:1;transform:none}
/* When the hero has scrolled out of view, reveal the full header */
body.show-brand .site-header{
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Show the red rule bar when the header is solid */
body.show-brand .rule{
  display:block;
}

/* Hide the hamburger button entirely while the navigation overlay is open. The overlay supplies
   its own close control (the ✕ button), so the regular menu button should disappear to avoid
   overlapping the close icon. */
body.nav-open .menu-btn{
  display:none;
}

/* On wide screens, vertically align the hamburger menu with the close (X) button of the overlay.
   The close button sits 20px from the top of the viewport, whereas the menu button sits within
   a header with 10px top padding. By adding extra top margin on large screens we match the
   vertical offset of the two buttons. */
@media (min-width: 1024px){
  /* On wide screens, absolutely position the hamburger button so its top and right offsets
     match the overlay close button. This ensures the two icons line up perfectly. */
  .site-header .menu-btn{
    position:absolute;
    top:20px;
    right:20px;
    margin:0;
  }
}

/* Content */
.content{
  /* Always include top padding equal to the header offset. This prevents
     the main text from jumping when the header becomes solid. The extra 16px
     provides the same vertical spacing as before. */
  padding-top:calc(var(--header-offset) + 16px);
  padding-right:12px;
  padding-bottom:16px;
  padding-left:12px;
  max-width:980px;
  margin:0 auto;
  min-height:60vh;
}

/* ------------------------------------------------------------------
   Home page spacing and heading colours
   ------------------------------------------------------------------ */
/* Remove the large gap between the hero and the start of the page content by overriding
   the default padding on pages where a hero is present. When a .hero element is
   immediately followed by the .content section, reduce the top padding to a smaller
   value so that the content sits just below the hero. */
.hero + .content{
  padding-top:24px;
}

/* Apply the dark red accent colour to all headings within the main content area
   (excluding the hero, which retains white text). This targets both semantic
   heading elements and any elements using the .kilo display font. */
.content h1,
.content h2,
.content h3,
.content .kilo{
  color:#851008;
}

/* Use flexbox on the .page container so the footer stays pinned to the bottom of
   the viewport when there is little content. The hero should not shrink and the main
   content should expand to fill available space. */
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.hero{
  flex-shrink:0;
}
.content{
  flex-grow:1;
}

/* Promo video responsive container */
.promo-video-container{
  position:relative;
  padding-bottom:56.25%; /* 16:9 aspect ratio */
  height:0;
  overflow:hidden;
  margin-bottom:32px;
}
.promo-video-container iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* When the header is shown (after scrolling past the hero or on pages without a hero),
   push the main content down so it doesn't hide behind the fixed header */

/* Nav overlay & panel */
.nav-overlay{
  position:fixed;
  inset:0;
  /* Semi-transparent backdrop for the full‑screen navigation */
  /* Use a lighter backdrop so the page behind remains visible when the menu opens. A lower alpha
     value keeps the content recognisable and avoids a completely blacked‑out feeling. */
  background:rgba(0,0,0,.45);
  /* When the menu is open, blur the content behind the overlay to draw focus to the menu. The
     backdrop-filter property applies a blur to everything behind this element. Adding the
     -webkit- prefix improves compatibility with Safari/iOS. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:none;
  z-index:9999;
}
.nav-overlay.is-open{display:block}
.side-panel{
  /* Convert the side panel into a full‑screen centered menu */
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background:transparent;
  padding:0;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.panel-title{font-weight:700}
.panel-close{background:var(--pyc-red);color:#fff;border:0;border-radius:10px;padding:6px 10px;cursor:pointer}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list>li{margin:2px 0}
.nav-link{display:block;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--text);font-size:15px}
.nav-link:hover{background:#f7f7f7}

/* Flat dropdown toggles */
.nav-toggle{
  /* Reset native button styles and ensure the text inherits the same font as other links. */
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  padding:6px 8px;
  width:100%;
  text-align:left;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  /* Ensure the toggle buttons use the same font weight as their sibling links */
  font-weight:inherit;
  border-radius:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.nav-toggle:hover{background:#f7f7f7}
.nav-toggle:focus-visible{outline:2px solid #ddd; outline-offset:2px}
.nav-toggle::after{content:"▾"; font-size:14px; color:currentColor; margin-left:8px}

/* Remove the heading inside the menu overlay */
.panel-title{
  display:none;
}

/* Reposition and restyle the close button for the full‑screen menu */
.panel-close{
  position:absolute;
  top:20px;
  right:20px;
  background:transparent;
  color:#fff;
  border:0;
  border-radius:0;
  padding:0;
  cursor:pointer;
  font-size:32px;
  line-height:1;
}
.panel-close:hover{
  color:var(--pyc-blue);
}

/*
 * Change the colour of the navigation close (✕) button depending on the header state.
 * When the hero is in view (the body does not have .show-brand), the menu is
 * overlaying the dark hero image so the close icon should be white. When the hero
 * has scrolled out of view (body.show-brand is applied), the icon should switch
 * back to black to contrast against the white header banner.
 */
body.show-brand .panel-close{
  color:#000;
}
body.show-brand .panel-close:hover{
  color:var(--pyc-blue);
}

/*
 * Ensure the text inside dropdown sub-menus remains white at all times.
 * This overrides the dark colour applied when the header is solid and
 * prevents the sub-menu items from becoming black. Using !important
 * ensures this rule takes precedence over earlier colour assignments.
 */
.nav-overlay .sub-list .nav-link{
  color:#fff !important;
}

/*
 * Dropdown menu text styling
 * Increase text size by ~20% for the full‑screen overlay and toggle the colour
 * of the text depending on whether the hero is visible. When the hero is
 * visible (no .show-brand), the menu sits over a dark image so white text is
 * appropriate. Once the hero has scrolled past (.show-brand on body), the
 * header becomes light so switch the text to the default dark colour.
 */
/* Larger font sizes for the top-level links and toggles inside the overlay */
.nav-overlay .nav-list > li > .nav-link,
.nav-overlay .nav-toggle {
  font-size:31.2px;
}
/* Larger font size for sub-menu links inside the overlay */
.nav-overlay .sub-list .nav-link {
  font-size:24px;
}
/* Colour adjustments when the hero is not visible */
body.show-brand .nav-overlay .nav-link,
body.show-brand .nav-overlay .nav-toggle,
body.show-brand .nav-overlay .sub-list .nav-link {
  color:var(--text);
}
/* Ensure hover state still uses the blue accent when the header is solid */
body.show-brand .nav-overlay .nav-link:hover,
body.show-brand .nav-overlay .nav-toggle:hover,
body.show-brand .nav-overlay .sub-list .nav-link:hover {
  color:var(--pyc-blue);
}

/* Override the dark text colour when the header is solid so that
 * all navigation items remain white regardless of the scroll position.
 */
body.show-brand .nav-overlay .nav-link,
body.show-brand .nav-overlay .nav-toggle {
  color:#fff;
}

/* Style the full‑screen navigation items */
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
.nav-list>li{
  margin:12px 0;
}
.nav-link{
  display:inline-block;
  padding:8px 0;
  border-radius:0;
  text-decoration:none;
  color:#fff;
  /* Base font size for overlay links; will be overridden for 20% larger text below */
  font-size:26px;
}
.nav-link:hover{
  color:var(--pyc-blue);
  background:none;
}

/* Style the dropdown toggle inside the full menu */
.nav-toggle{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  padding:8px 0;
  /* Expand the clickable area across the full container so that nested menus can toggle reliably */
  width:100%;
  text-align:center;
  color:#fff;
  /* Base font size for overlay toggles; will be overridden for 20% larger text below */
  font-size:26px;
  /* Inherit the font family from the surrounding elements so toggle buttons match link text */
  font-family:inherit;
  /* Inherit font weight so toggles aren’t bold by default */
  font-weight:inherit;
  border-radius:0;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}
.nav-toggle::after{
  content:"▾";
  font-size:20px;
  color:currentColor;
  margin-left:6px;
}
.nav-toggle:hover{
  color:var(--pyc-blue);
  background:none;
}

/* Style sub-menu lists in the overlay */
.sub-list{
  list-style:none;
  margin:4px 0 0;
  padding:0;
  text-align:center;
  display:none;
}
.sub-list.is-open{
  display:block;
}
.sub-list .nav-link{
  font-size:20px;
  display:block;
  padding:6px 0;
  color:#fff;
}
.sub-list .nav-link:hover{
  color:var(--pyc-blue);
}

.sub-list{list-style:none;margin:4px 0 2px 10px;padding-left:6px;display:none}
.sub-list.is-open{display:block}
.sub-list .nav-link{padding:5px 10px;font-size:14.5px}

/* Footer */
.site-footer{background:#CDEFFD;border-top:1px solid #e5e7eb;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between}
.insta-icon{width:22px;height:22px;display:block}

/* Ensure the footer remains pinned to the bottom of the viewport even when
   a page contains little content. Using a flex layout on the .page
   container allows the main content area to expand and push the footer to
   the bottom, while preventing the hero section from shrinking. */
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.hero{
  flex-shrink:0;
}
.content{
  flex-grow:1;
}

/* Panels/Tables */
.panel{border:1px solid #e8e8e8;border-radius:12px;padding:12px;background:#fff}
.panel>.kilo{margin:4px 4px 8px}
.roster-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:12px}
@media (min-width:820px){.roster-grid{grid-template-columns:1fr 1fr}}
.roster-table{width:100%;border-collapse:collapse;margin-top:8px}
.roster-table th,.roster-table td{border:1px solid #e6e6e6;padding:10px 12px;text-align:left}
.roster-table thead th{background:var(--pyc-red);color:#fff;font-weight:700}
@media (max-width:640px){.roster-table th,.roster-table td{padding:8px}}

/* ------------------------------------------------------------------
   White background overrides
   ------------------------------------------------------------------ */
/* Force the main page containers to use a white background so they match the
   rest of the site. This rule is placed near the end of the stylesheet to
   override any earlier gradient or coloured backgrounds without requiring
   changes to multiple definitions. */
.page,
.content{
  background-color:#fff;
}

/* Forms */
input[type="text"], input[type="password"], input[type="email"]{
  width:100%;
  padding:10px 12px;
  font-size:15px;
  border:1px solid #ddd;
  border-radius:8px;
  outline:none;
}
button.btn, button[type="submit"]{
  padding:10px 14px;
  font-size:15px;
  border:0;
  border-radius:8px;
  background:var(--pyc-red);
  color:#fff;
  cursor:pointer;
}
button.btn:hover, button[type="submit"]{filter:brightness(.96)}

nav\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

\.nav(\-bar)?\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

\.menu\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

ul\.menu{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

\.site\-nav\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

\.header\-nav\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

nav\.menu{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

nav\.navbar{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

\.navbar\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

#nav\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}

#menu\s+ul{
  display:flex;
  justify-content:center;
  gap:1.25rem;
}