/* style.css — Rest & Reconnect */

/* General */

p{
  font-weight:500;
  margin-bottom:1.2rem;
}

body{
  font-family:"Nunito Sans","Segoe UI",sans-serif;
  color:#3a2e2e;
  text-align:center;
  line-height:1.8;
  padding:2rem;
  background:#f2fffb;
  background:radial-gradient(circle, rgba(242,255,251,1) 0%, rgba(174,232,222,1) 51%, rgba(123,181,225,1) 85%, rgba(61,116,212,1) 100%);
}

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

main{
  max-width:850px;
  margin:2rem auto;
  margin-left:260px;
  background:#ffffff;
  border-radius:12px;
  padding:2.5rem;
  border:2px solid rgba(26,46,69,0.18);
  box-shadow:0 2px 0 rgba(26,46,69,0.15), 0 10px 25px rgba(0,0,0,0.12);
}

.section{
  padding:1.2rem 1.5rem;
  margin:1.5rem 0;
  border:2px solid #f3c969;
  border-left:12px solid #f3c969;
}

.access-box{
  padding:1.2rem 1.5rem;
  margin:1.5rem 0;
  border:2px solid #3a2e2e;
  border-left:12px solid #3a2e2e;
  border-right:12px solid #3a2e2e;
}

.rules-box{
  padding:1.2rem 1.5rem;
  margin:1.5rem 0;
  border:2px solid #5A0909;
  border-left:12px solid #5A0909;
}

.callout-block{
  background:#fff3d4;
  padding:22px;
  margin:30px 0;
  border-top:10px solid #f3c969;
  border-bottom:8px solid #f3c969;
}

h1{
  font-size:2.3rem;
  color:#1a2e45;
  border-bottom:3px solid #D08A00;
  padding-bottom:0.3rem;
  margin-bottom:1.2rem;
  text-transform:uppercase;
  font-family:"Atkinson Hyperlegible Next",sans-serif;
  font-weight:800;
  letter-spacing:2px;
}

h2{
  font-size:1.6rem;
  color:#1E4FA1;
  margin-top:1.5rem;
}

h3{
  font-size:1.25rem;
  color:#1E4FA1;
  margin-top:1rem;
}

h2,
h3{
  font-family:"Lexend",sans-serif;
  font-weight:600;
}

main a{
  color:#1E4FA1;
  font-weight:600;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:#1A2E45;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  padding:1px 2px;
  border-radius:3px;
  transition:background .15s ease,color .15s ease;
}

main a:hover{
  color:#3a2e2e;
  background:rgba(174,232,222,0.45);
}

ul{
  margin:1rem 0 1.5rem 1.5rem;
}

ul li{
  margin-bottom:0.6rem;
}

/* --- Fonts --- */

@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("AtkinsonHyperlegibleNext-ExtraBold.woff2") format("woff2");
  font-weight:800;
}

@font-face{
  font-family:"Lexend";
  src:url("Lexend-SemiBold.woff2") format("woff2");
  font-weight:600;
}

/* Tech Decor */

.brand-underline{
  font-style:italic;
  text-decoration:underline dotted #1A2E45 2px;
  text-underline-offset:4px;
}

/* --- Sidebar Header --- */

.site-header{
  position:fixed;
  left:0;
  top:0;
  width:220px;
  height:100vh;
  background:#1E4FA1;
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-right:4px solid #0d3454;
  box-shadow:4px 0 0 rgba(26,46,69,0.15), 10px 0 24px rgba(0,0,0,0.18);
}

.site-header > div{
  background:#ffffff;
  padding:14px;
  border-radius:18px;
  margin-bottom:24px;
  box-shadow:0 4px 0 rgba(26,46,69,0.18), 0 10px 22px rgba(0,0,0,0.22);
}

.site-fav{
  display:block;
  max-width:150px;
  max-height:150px;
  transition:transform .2s ease;
}

.site-fav:hover,
.site-fav:focus{
  transform:translateY(-4px);
}

.site-nav{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}

.site-nav a,
.nav-dropdown-button{
  display:block;
  width:100%;
  box-sizing:border-box;
  color:#ffffff;
  background:transparent;
  border:0;
  text-decoration:none;
  text-align:center;
  padding:10px 14px;
  font-family:"Lexend",sans-serif;
  font-size:1rem;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:background .2s,color .2s;
}

.site-nav a:hover,
.site-nav a:focus,
.nav-dropdown-button:hover,
.nav-dropdown-button:focus,
.nav-dropdown-button[aria-expanded="true"]{
  color:#1C1919;
  background:#D08A00;
}

.nav-dropdown{
  width:100%;
}

.nav-dropdown-menu{
  display:none;
  margin-top:6px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{
  display:block;
}

.nav-dropdown-menu a{
  color:#1A2E45;
  background:#F3C969;
  margin-top:6px;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus{
  color:#ffffff;
  background:#1E4FA1;
}

.site-nav a:focus,
.nav-dropdown-button:focus,
.nav-dropdown-menu a:focus{
  outline:3px dotted #F3C969;
  outline-offset:3px;
}

/* --- Custom H1 Style --- */

.hero-title{
  font-size:2.3rem;
  color:#1E4FA1;
  border-bottom:3px solid #D08A00;
  padding-bottom:0.3rem;
  margin-bottom:1.2rem;
  text-transform:uppercase;
  font-family:"Atkinson Hyperlegible Next",sans-serif;
  font-weight:800;
  letter-spacing:2px;
  text-shadow:2px 2px 0 rgba(243,201,105,0.65);
}

/* --- Footer --- */

.wave-divider{
  line-height:0;
  margin-top:40px;
}

.wave-divider svg{
  display:block;
  width:100%;
  height:110px;
}

.wave-divider path{
  fill:#1E4FA1;
}

.site-footer{
  margin-top:-4px;
  background:#1E4FA1;
  color:white;
  padding:50px 30px;
  border-radius:8px;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
  text-align:left;
}

.footer-title{
  color:#f3c969;
  font-family:"Atkinson Hyperlegible Next",sans-serif;
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:10px;
}

.footer-links a{
  display:block;
  color:#dce6f2;
  text-decoration:none;
  margin:8px 0;
  font-family:"Lexend",sans-serif;
}

.footer-links a:hover{
  color:#f3c969;
}

.footer-social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:30px;
  padding-top:18px;
  border-top:7px solid white;
}

.footer-social img{
  width:28px;
  height:28px;
  display:block;
  opacity:0.9;
  filter:brightness(0) invert(1);
}

.footer-social img:hover{
  opacity:1;
}

/* --- Social Grid --- */

.social-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:1rem;
}

.social-tile{
  display:block;
  padding:16px 18px;
  font-family:"Lexend",sans-serif;
  font-weight:600;
  color:#1a2e45;
  background:#fff3d4;
  border:2px solid #f3c969;
  border-left:12px solid #f3c969;
  text-decoration:none;
  transition:.2s ease;
}

.social-tile:hover{
  background:#f3c969;
  transform:translateX(2px);
}

.tile-note{
  display:block;
  font-size:.8rem;
  font-weight:400;
  margin-top:4px;
  opacity:.75;
}

/* --- Event Page --- */

.event-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:50px 0;
}

.event-gallery a{
  display:block;
  width:100%;
}

.event-gallery img{
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.event-poster{
  margin:1.5rem 0;
  display:flex;
  justify-content:center;
}

.event-poster img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* --- About --- */

.organizer-row{
  display:flex;
  gap:1.5rem;
}

.organizer-row.reverse{
  flex-direction:row-reverse;
}

.organizer-row img{
  width:250px;
  height:auto;
}

/* --- Button CSS --- */

.button{
  display:block;
  width:150px;
  height:60px;
  padding:3px;
  line-height:40px;
  font-size:25px;
  text-transform:uppercase;
  font-family:Lexend,sans-serif;
  text-decoration:none;
  color:#1C1919;
  background:#ffedbf;
  border:2.5px solid #f3c969;
  border-radius:15px;
  letter-spacing:2px;
  text-align:center;
  position:relative;
  overflow:hidden;
  font-weight:bold;
  transition:border-color 0.4s, color 0.4s;
  margin:auto;
}

.button::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#f3c969;
  z-index:0;
  opacity:0;
  transform:scale3d(0.7,1,1);
  transition:transform 0.4s, opacity 0.4s;
  transition-timing-function:cubic-bezier(0.2,1,0.3,1);
}

.button:hover{
  color:#3a2e2e;
  border-color:#f3c969;
}

.button:hover::before{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* --- Support Page --- */

.support-mockup{
  background:#fffdf2;
  border:2px solid #f3c969;
  padding:1.5rem;
  margin:1.5rem 0;
}

.support-top-callout,
.support-bottom-callout{
  background:#ffffff;
  border:2px solid rgba(26,46,69,0.45);
  border-radius:6px;
  padding:0.8rem 1rem;
  margin:1rem 0;
}

.support-top-callout h2,
.support-bottom-callout h2{
  margin:0;
  color:#3a2e2e;
  font-size:1.05rem;
}

.support-bottom-callout p{
  margin:0.8rem 0 0 0;
}

.support-page-title{
  text-align:center;
  margin:1.5rem 0;
}

.support-page-title h1{
  color:#1E4FA1;
  font-size:2.1rem;
  line-height:1.25;
  text-transform:uppercase;
  margin:0;
}

.support-main-row{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:28px;
  align-items:start;
  margin:1.8rem 0;
}

.support-image-box{
  display:block;
  text-align:center;
}

.support-image-box img{
  width:100%;
  max-width:240px;
  height:auto;
  border-radius:8px;
  box-shadow:none;
}

.image-credit{
  display:block;
  font-size:0.75rem;
  line-height:1.4;
  margin-top:0.35rem;
  margin-bottom:0;
  text-align:center;
}

.support-body-text{
  text-align:left;
}

.support-events-block{
  text-align:center;
  margin:2rem 0;
}

.support-events-block .event-gallery{
  justify-content:center;
  align-items:center;
}

/* --- Responsive: top header on smaller screens --- */

@media (max-width:900px){
  .site-header{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    padding:20px 12px;
    flex-direction:column;
    align-items:center;
    border-right:none;
    box-shadow:none;
  }

  .site-header > div{
    padding:10px;
    border-radius:14px;
    margin-bottom:14px;
  }

  .site-fav{
    max-width:90px;
    max-height:90px;
  }

  .site-nav{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }

  .site-nav a,
  .nav-dropdown-button{
    font-size:0.9rem;
    padding:8px 10px;
  }

  .nav-dropdown{
    width:auto;
  }

  .nav-dropdown-menu{
    position:absolute;
    z-index:20;
    min-width:180px;
  }

  main{
    margin-left:0;
    margin-top:20px;
    max-width:100%;
    padding:1.25rem;
  }

  .social-grid{
    grid-template-columns:1fr;
  }

  .organizer-row,
  .organizer-row.reverse{
    flex-direction:column;
    align-items:center;
  }

  .event-gallery{
    grid-template-columns:1fr;
  }

  .event-gallery img{
    width:100%;
    max-width:500px;
    height:auto;
    min-height:0;
  }

  .support-main-row{
    grid-template-columns:1fr;
    gap:18px;
  }

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

  .support-page-title h1{
    font-size:1.6rem;
  }
}

@media (max-width:480px){
  body{
    padding:1rem;
  }

  main{
    padding:1rem;
  }

  h1{
    font-size:1.8rem;
  }

  .site-nav a,
  .nav-dropdown-button{
    font-size:0.82rem;
    padding:7px 8px;
  }
}