/*
Theme Name: FC Nations
Version: 1.0
*/


/* ====================== Desktop Body ====================== */

html, body {
  margin: 0;
  padding: 0; 
  background:#fff;
	
  font-family: "Open Sans", "Source Sans Pro", -apple-system, 
  BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:200;
  font-size:1rem;
  line-height:1.3rem; 
}






body.admin-bar .fcnations-header {
  top: 0;
}

body.admin-bar {
  margin-top: 0 !important;
}
button { text-transform: uppercase; }



h1 {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  font-weight: 300; font-size: 1.25rem; 
  font-style: normal;
  letter-spacing:0.06rem;
}
h2 {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  font-weight: 300; font-size: 1.25rem; 
  font-style: normal;
  letter-spacing:0.06rem;
}
p {
  font-family: "Open Sans", "Source Sans Pro", -apple-system, 
  BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:200;
  font-size:1rem;
  line-height:1.5rem; 
}

/* Universal link styles */

a {
    color: #050417;     
    text-decoration: none;  
    transition: all 0.3s ease;
}

a:hover {
    color: #727290;
    text-decoration: none;
}

a:focus {
    outline:none;
	text-decoration: none;
}

a:active {
    color: hotpink;
}

a:visited {
    color: #050417;
}

.club-btn {
  position: relative;
  display: inline-block;
  background: none;
  border: 0.1rem solid #050417;   /* initial border color */
  color: #050417;              /* initial font color */
  padding: 12px 80px 12px 16px; /* extra space for hotpink block */
  text-decoration: none;
  font-family: "Century Gothic", "Futura", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* angled block */
.club-btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: -30px;       
  width: 80px;        
  height: 100%;
  background: #050417;       /* initial block color */
  transform: skewX(-20deg) translateX(0);
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 1;
}

/* arrow inside block */
.club-btn .arrow-block {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: bold;
  color: white;
  z-index: 2;       
  pointer-events: none;
transition: color 0.3s ease, border-color 0.3s ease;
}

/* hover effects */
.club-btn:hover {
  color: hotpink;             /* font color on hover */
  border-color: hotpink;     /* border color on hover */
}

/* glide and color change on hover */
.club-btn:hover::after {
  transform: skewX(-20deg) translateX(-5px); /* glide left */
  background: hotpink;                     /* hotpink block on hover */
}


.fc-btn {
  position: relative;
  display: inline-block;
  padding: 18px 22px;
  font-family: Century Gothic, Arial, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  text-transform: none;
  color: #fff;           /* text stays dark */
  background: hotpink;
  text-decoration: none;
  overflow: hidden;
  transition: background 0.4s ease;
  z-index: 0;
}


.fc-btn:hover { color:white;
  background: #3c385b;    /* only border changes */
}



.text-arrow-btn {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  font-weight:400;
  font-size:0.8rem;
  position: relative;
  display: inline-block;
  text-transform:uppercase;
  color: #000;                  /* default text color */
  text-decoration: none;
  padding-right: 1.2em;         /* space for arrow */
  transition: color 0.3s ease, transform 0.2s ease;
}

.text-arrow-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.6em;
  height: 0.6em;
  border-top: 1px solid #000;   /* horizontal part of arrow */
  border-right: 1px solid #000; /* vertical part of arrow */
  transform: translateY(-50%) rotate(45deg); /* create arrow tip */
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.text-arrow-btn:hover {
  color: #eb66b8;                    /* text turns red */
  transform: translateX(3px);    /* nudge text right */
}

.text-arrow-btn:hover::after {
  border-color: #eb66b8;             /* arrow turns red */
  transform: translateY(-50%) rotate(45deg) ; /* arrow moves with text */
}

a.box-button {
  display: inline-block;
  padding: 0.7rem 2rem;
  border:0.1rem solid #eb66b8;
  background: #eb66b8;       
  color: #fff;
  font-weight: 500; font-size:1rem; letter-spacing:0.06rem;;
  text-decoration: none; 
  text-transform:none;
  transition: 0.25s ease;
}

a.box-button:hover {
  background: none;
	color: #ce4b9c;
}








/* ====================== Navigation ====================== */


#navbar{ 
  width:100%; height:16vh;
  background-color:transparent; 
  position:fixed; top:0; left:0; z-index:1000;
  display: flex; align-items: center;
  transition: height 0.3s ease, background-color 0.3s ease;
}

.nav-wrap { 
	width:80%; margin:0 auto; 
	display:flex; justify-content:space-between; 
	align-items:center; 
}







.nav-logo {
  width: auto;
  height: 12vh;
}

#navbar.shrink .nav-logo { 
  width: auto;
  height: 4.5vh;
}

#navbar:hover { 
  background-color:#fff;
}
#navbar.shrink { 
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size: 0.75rem; font-weight: 600; 
  letter-spacing: 0.1rem;
  height: 7vh;
  background-color: #fff;
}


.nav-left,
.nav-center,
.nav-right { 
  display: flex;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-center-right {
  display: flex;
  justify-content: space-between;
  align-items: center;	
}

.nav-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

nav.desktop-nav { 
  display: flex;
  justify-content: space-between; 
  width: 100%; 
}

nav.desktop-nav > a,
nav.desktop-nav > .dropdown > a { 
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;
  line-height: 14vh;
  display: block; padding-right:1.75rem;  margin:0;
  transition: line-height 0.3s ease;
}

#navbar.shrink nav.desktop-nav > a,
#navbar.shrink nav.desktop-nav > .dropdown > a {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;
  line-height: 9vh;
}

/* ----------------- Dropdowns ----------------- */

nav .dropdown {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;	
  position: relative;
}

nav .dropdown-content { 
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;	
	
  position: absolute;
  top: 100%;
  left: 0;
  min-width: max-content; /* automatically fits the longest link */
  white-space: nowrap;    /* prevent wrapping */	
  background-color: #fff;
  
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

nav .dropdown-content a { display:block; flex-direction:column; padding: 0.75rem 1.75rem 0.75rem 1rem; }

nav .dropdown:hover .dropdown-content { 
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#navbar.shrink nav .dropdown-content { 
  top: 7vh;
}

/* ----------------- Nav Link Styling ----------------- */

nav a {   
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;
	
  color:#fff; 
  transition: none; /* disable default fade for roll-off */
}
nav a:visited {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;
	
	color:#fff; 
}

/* Navbar state controls link color */
#navbar.shrink nav a,
#navbar:hover nav a { 
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;	
	
  color:#050416;       /* instantly black on white background */
  transition: none;  /* instant change, no lag */
}

/* Hover on black navbar links */
#navbar.shrink nav a:hover,
#navbar.hover nav a:hover,
#navbar.shrink nav a:focus,
#navbar:hover nav a:focus {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;
	
  color: #797292;
  transition: color 0.3s ease;
}

/* Hover/focus on links: smooth fade */
#navbar nav a:hover,
#navbar nav a:focus {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size:0.9rem; font-weight:700; 
  letter-spacing:0.1rem; text-transform:none;	
  color: #797292;
  text-decoration:none;
  transition: color 0.3s ease;
}



/* ----------------- Social Links ----------------- */

.nav-socials {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.nav-socials {
  display: flex;
  justify-content:space-between;
  gap: 1rem; 
}

.nav-facebook, .nav-x, .nav-instagram, .nav-tiktok {
  width: 30px; height: 30px;
  background-color:none; 
  background-size: 100%; 
  background-repeat: no-repeat;
  background-position: center center;  
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.nav-facebook { background-image: url('/img/socials/nav-facebook.png'); }
.nav-instagram { background-image: url('/img/socials/nav-instagram.png'); }
.nav-x { background-image: url('/img/socials/nav-x.png'); }
.nav-tiktok { background-image: url('/img/socials/nav-tiktok.png'); }

/* Navbar state hook – image swap (same file for now) */
#navbar.shrink .nav-facebook,
#navbar:hover .nav-facebook {
  background-image: url('/img/socials/nav-facebook-focus.png');
}

#navbar.shrink .nav-instagram,
#navbar:hover .nav-instagram {
  background-image: url('/img/socials/nav-instagram-focus.png');
}

#navbar.shrink .nav-x,
#navbar:hover .nav-x {
  background-image: url('/img/socials/nav-x-focus.png');
}

#navbar.shrink .nav-tiktok,
#navbar:hover .nav-tiktok {
  background-image: url('/img/socials/nav-tiktok-focus.png');
}


#navbar .nav-facebook:hover {
  background-image: url('/img/socials/nav-facebook-active.png');
}

#navbar .nav-instagram:hover {
  background-image: url('/img/socials/nav-instagram-active.png');
}

#navbar .nav-x:hover {
  background-image: url('/img/socials/nav-x-active.png');
}

#navbar .nav-tiktok:hover {
  background-image: url('/img/socials/nav-tiktok-active.png');
}



/* Hide hamburger button on desktop */
.nav-toggle {
  display: none;
}

/* Hide mobile menu on desktop */
.nav-menu-mobile {
  display: none;
}








/* ================= Main Container ================= */

#main-container {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
gap: 0rem; 
}
.site {
    max-width: none !important;
}

/* ----------------- Section Titles ----------------- */

.section-title {
  flex: 0 0 auto;            
  display: flex;
  flex-direction: column;
  justify-content: center;      
}
.section-title-wrap { 
  display: flex; 
  justify-content: space-between; 
  align-items: stretch;         
  gap: 0rem;
  width: 100%;                 
  margin: 0 auto;     
  align-items: center;  
  flex: 1;
}
.updates {
background:none; 
}









#hero { position:relative;
  width:100%; margin:0 auto; 
  height: 100vh; min-height: 100vh;
  display: flex;
  justify-content: center; 
  align-items: stretch;  
  color: white;
  z-index: 0;
  background-color: #000;
}

#hero-wrap { 
  width:80%; margin:0 auto;
}
#hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('http://madebyliam.co/nationsfc/hero.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5; z-index: -1;
}

#hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 15%);
  z-index: 1; 
}


.hero-content {
  width: 60%;
  position: absolute;
  bottom: 0; left: 0;     
  margin-bottom: 5vh;  
}
.hero-cta {
  display: inline-block;
  padding: 0.75rem 1.75rem;            
  border:2px solid white;
  background-color: none;      /* signature pink */
  color: #fff;                     /* readable on pink */
  font-weight: 500;
  text-transform: uppercase;
  text-decoration:none;
  letter-spacing: 0.1rem;
  transition: all 0.3s ease;
  cursor: pointer;
   font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size: 1.25rem;
}
.hero-cta:hover {
  background-color: #fff; 
  color: #000;
  box-shadow: 0 8px 20px rgba(235, 102, 184, 0.3);
}

#hero h1, #hero h2, #hero h3, #hero h4 { 
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: none; 
  letter-spacing: 0.1rem;
  margin-bottom: 0;
}
#hero h1 { font-size: 3.25rem;  }
#hero h2 { font-size: 1.25rem; }
#hero h3 { font-size:1rem; }
#hero h4 { font-size:2rem; margin-bottom:1.5rem; }
#hero hr { 
  border: none;           /* remove default border */
  height: 1px;            /* thickness of the line */
  background-color: #ccd7e1; /* pink club color */
  margin: 2rem 0;         /* vertical spacing */
}

hr.hero-divider {
  border-top: 1px solid #fff !important;
}








#page-hero {
  position: relative;
  height: 40vh;
  min-height: 40vh;
  display: flex;
  justify-content: center; 
  align-items: stretch;
  color: white;
  z-index: 0;
  background-color: #000;
}

#page-hero-wrap {
  width: 80%; height: 100%; 
  margin: 0 auto;
  display: flex;
  align-items: stretch; 
  border-left: 1px solid #00fcff;
  border-right: 1px solid #00fcff;	
}

.page-hero-content {
  width: auto; height: 100%;  
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center the text */
  padding-top:0; margin-top:0;
}

.hero-community {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-logo {
  height: 52px;
  width: auto;margin-right:3.5rem;
}





/* ----------------- Countdown Numbers ----------------- */
#info-updates {
  max-width: 100%;
}
#info-updates-wrap {
  max-width: 80%; margin:0 auto;
}
.countdown-section {
  display: flex;
  justify-content: flex-end;     
  align-items: center;            
  background-color: #f8f8fc;       
  gap: 4rem;
  
  flex: 0 0 auto;                  
  height: 80%;                      
  max-height: 100%;                 
  padding: 0.5rem 3rem;            
}

.countdown-left {
  display: flex;
  flex-direction: column;
  justify-content: center; /* keep left content vertically centered */
}

.countdown-left h2 {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
}

.countdown-left p {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
}

.countdown-right .countdown-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; padding:0.75rem 0 0.75rem 0;
  height: 100%;                     /* fills the countdown-section height */
}

.countdown-item {
  text-align: center;
  color: #000;
}

.countdown-number {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size: 1.6rem; /* adjustable */
  font-weight: 400;
}

.countdown-label {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size: 0.6rem; /* adjustable */
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 0.2rem;
}







/* Specific styles */
.match-info-content-wrap { display:flex; justify-content:space-between; gap:2rem; }
.match-info-content-01 { background: #f8f8fc; }
.match-info-content-02 { background: #f8f8fc; }
.match-info-content-03 { background: #f8f8fc; }


#match-info {
  max-width: 100%;
}
#match-info-wrap {
  max-width: 80%; margin:0 auto;
	display: flex; justify-content: space-between;
}
.match-info-content {
  flex: 1;  padding: 1rem;
}
.match-card {
  width: 100%;
  max-width: 380px;
  background: #f8f8f8;
  border-radius: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem; 
  text-align:center;
}

/* TOP ROW (vertical info only here) */
.match-info-row {
  display: flex;
  flex-direction: column;
}

/* Stadium title */
.match-stadium {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

/* Date underneath */
.match-date {
  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  opacity: 0.6;
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

/* SCORE ROW — horizontal */
.match-score-row {
  display: flex;
  flex-direction: row;     
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* BADGES */
.match-badge {
  width: 70px;
  height: 70px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.badge-home {
  background-image: url('https://madebyliam.co/nationsfc/badge-01.png');
}

.badge-away {
  background-image: url('https://cdn1.sportngin.com/attachments/photo/cc8b-203894478/Logo.png');
}

.match-score {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-size: 1.8rem;
  white-space: nowrap;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-name {
  margin-top: 0.5rem;            /* adjust spacing between badge + name */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  opacity: 0.7;
  text-align: center;
}




/* Our Goal Section */
/* OUR GOAL SECTION */
#our-goals { display: flex;
width: 100%; padding:0; background:#f8f8f8; }


#our-goals-left { 
  width: 50%; padding:4rem 0 4rem 0;
  background: #f8f8f8;      
  display: flex;
  align-items: flex-start;   /* changed */
  justify-content: flex-start;
  padding-left: 10%;
  box-sizing: border-box;
}
#our-goals-left p { 
  margin-bottom:1.5rem;
}
#our-goals-left-wrap {   
  width: auto;
  max-width: 70%;
  word-break: break-word;
  flex-shrink: 1;  height:100%;     
}

#our-goals-right { 
  width: 50%;
  padding: 4rem 0 8rem 0;
  background-color: #eb66b8;
  display: flex;
  align-items: flex-start;
  justify-content: left;
  position: relative;
  z-index: 0; /* required so ::before sits behind content */
}

#our-goals-right::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left */
  background-image: url('http://fcnations.com/img/number-bg.png');
  background-size: cover;
  background-position: left left;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: -1; /* sits behind the content but above background-color */
}

#our-goals-right-wrap { margin-left:5rem; display:inline-block; display:flex; justify-content:space-between;flex-direction:column; align-items:center;
}
#our-goals-right-wrap h1 { color:#fff; font-size:1.25rem; align-self: flex-start; margin-bottom:2rem; }

.numbers { display:flex; justify-content:space-between; text-align:center; }

.our-goals-right-left {   display:flex; justify-content:space-between; flex-direction:column; align-items:center; }
.our-goals-right-right { margin-left:7.65rem; display:flex; justify-content:space-between;flex-direction:column; align-items:center; }

.one { margin-bottom:4rem; text-align:center;    }
.two {  text-align:right;}
.three { text-align:center; }
.four { text-align:center; }

/* ⭐ ADDED NUMBER BLOCK STYLES */
.stat { 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
}

.stat-number {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-weight: 400;

  font-size: 5rem; color:#fff;
  text-align: center;
  line-height: 1;
}



.stat-number { text-align:center;
  display: inline-block;           /* allows us to control width */
  text-align: right;               /* keeps digits aligned right */
  font-variant-numeric: tabular-nums; /* all digits same width */
}

/* reserve width based on the final number's character count */
.stat-number::after {
  content: attr(data-placeholder); /* invisible placeholder text */
  visibility: hidden;              /* does not show */
  height: 0;                       /* no vertical space */
  display: inline-block;
}
.stat-label {
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem; color:#fff;
  text-align: center;
}
.stat-number .suffix {
  font-size: 0.5em;   /* or whatever size you want */
  vertical-align:0; /* optional: raise slightly */
  margin-left: 0.05em;   /* small spacing if needed */
}



































#block-01 { background-color: #fff;
width: 100%;
margin: 0;
padding: 0;
min-height: 200px;

}
#block-01-wrap {
width: 80%;
margin: 0 auto;
padding: 3rem 0;
display: flex;
justify-content: space-between;
border-left: 1px solid #00fcff;
border-right: 1px solid #00fcff;
gap: 2rem; /* adds space between columns */
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 200px); /* equal height for all rectangles */
gap: 10px;
width: 100%;
margin: 0 auto;
}

.section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: white;
overflow: hidden;
cursor: pointer;
}

/* Text inside sections */
.section span {
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Overlay effect */
.section::before {
content: "";
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
height: 100%;
z-index: 0;
transition: bottom 0.5s ease;
}

/* Individual sections background */
.section1 {   
  background-color:#000;
  background-image: linear-gradient(rgba(0,0,0,0.4)), 
  url('https://madebyliam.co/nationsfc/hero.jpg');
  background-size: cover;
  background-position: center; 
}
.section3 { 
  background-color:#000;
  background-image: linear-gradient(rgba(0,0,0,0.4)), 
  url('https://madebyliam.co/nationsfc/banner.jpg');
  background-size: cover;
  background-position: center;
}
.section4 { 
  background-color:#000;
  background-image: linear-gradient(rgba(0,0,0,0.4)), 
  url('https://madebyliam.co/nationsfc/feature-03.jpg');
  background-size: 160%;
  background-position: center;
}

/* Overlay colors */
.section1::before { background-color: #eb66b8; }
.section3::before { background-color: #eb66b8; }
.section4::before { background-color: #eb66b8; }

/* ---- DEFAULT ACTIVE BLOCK ---- */
.section.active span,
.section.active::before,
.section.default-hover span,
.section.default-hover::before {
opacity: 1;
transform: translateY(0);
bottom: 0;
transition: opacity 0.5s ease, transform 0.5s ease, bottom 0.5s ease;
}

/* Hide default hover when any section is hovered */
.container:hover .section.active span,
.container:hover .section.active::before,
.container:hover .section.default-hover span,
.container:hover .section.default-hover::before {
opacity: 0;
transform: translateY(20px);
bottom: -100%;
}

/* ---- HOVER EFFECTS ---- */
.section:hover span {
opacity: 1;
transform: translateY(0);
}

.section:hover::before {
bottom: 0;
}

/* Section 2: two squares */
.section2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.section2-wrap { 
display: flex;
justify-content: space-between;
gap: 10px; /* adds consistent space between the two squares */
}

.square {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

/* OFF state image (always visible behind) */
.square1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color:#000;
  background-image: linear-gradient(rgba(0,0,0,0.4)), 
  url('https://madebyliam.co/nationsfc/feature-01.jpg');
  background-size: cover;
  background-position: center;
}

/* ON state overlay (slides up on hover) */
.square1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%;        /* start below */
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #eb66b8;
  transition: bottom 0.5s ease;
}

.square1:hover::after {
  bottom: 0;            /* slides up over image */
}

/* Text inside squares */
.square span {
  position: relative;
  z-index: 2;           /* above both image and overlay */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Text animation on hover */
.square:hover span {
  opacity: 1;
  transform: translateY(0);
}

/* Example for square2 with same logic */
.square2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color:#000;
  background-image: linear-gradient(rgba(0,0,0,0.2)), 
  url('https://madebyliam.co/nationsfc/feature-02.jpg');
  background-size: cover;
  background-position: center;
}

.square2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #eb66b8;  /* ON state overlay */
  transition: bottom 0.5s ease;
}

.square2:hover::after {
  bottom: 0;
}











#mailing-list {
  position: relative;
  height: 70vh;
  min-height: 70vh;
  display: flex;
  flex-direction: column;       /* stack content vertically */
  justify-content: flex-end;    /* push wrap to bottom */
  align-items: center;
  color: white;
  z-index: 0;
  background-color: #000;
  overflow: hidden; 
}

#mailing-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                 /* full width of container */
  height: 70vw;                /* scales with viewport width */
  max-height: 100%;            /* never taller than container */
  background-image: url('https://madebyliam.co/nationsfc/banner.jpg');
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;      /* cover the pseudo-element */
  opacity: 0.4;
  z-index: -1;                 /* behind the content */
}





#mailing-list-wrap {
  width: 80%;
  padding: 0rem 0 2rem 0;            /* vertical padding inside wrap */
  margin: 0 0 4rem 0;           /* add 3rem gap below the border */
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f8f8f8; /* bottom line */
  gap: 2rem;
  box-sizing: border-box;
}

.mailing-list-title { 
  margin: 0;                 /* remove default heading margin */
  padding-bottom: 0rem;      /* distance from red line — adjust as needed */          /* adjust size if needed */

}
.mailing-list-title h1 { 
  font-size: 2rem;
  line-height: 0; 
}

.mailing-list-form {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;         /* prevents flex from stretching it */
  max-width: 300px;       /* keeps it under control */
  width: 100%;            /* but still flexible */
  gap: 0;
  overflow: hidden;       /* prevents visual overflow just in case */
}


/* Input field */
.mailing-list-form input[type="email"] {
  min-width: 0;   /* THIS is the key — prevents flex overflow */
  flex: 1;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  border: none;
  outline: none;
}


/* Button */
.mailing-list-form button {
  padding: 0.90rem 1rem;
  font-size: 0.7rem; text-transform:uppercase;
  background: #050417;
  color: white;
  border:none;
  
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover effect */
.mailing-list-form button:hover {
  background: #3d3e4d;
}

#sponsor { 
background-color: #f8f8f8;
width: 100%;
margin: 0;
padding: 4rem 0 4rem 0;
min-height: 200px; text-align:center;
}
#sponsor-wrap {
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 1rem; 
padding-bottom:2rem;
}
#center-title-wrap { 
  flex: 0 0 auto;                 /* don't grow, keep content width */
  display: flex;
  flex-direction: column;
  justify-content: center; width:50%; margin:0 auto;
  padding-bottom:2rem;
}
#center-title-wrap h1 { margin:0; }
.pink-storage, .mcdonalds, .puma, .abp, .cartridge-people {
  width: 100%; height: 125px; 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  transition: height 0.3s ease, width 0.3s ease;   
}
.pink-storage {
  background-image: url('http://madebyliam.co/nationsfc/pink-storage.png');
}
.mcdonalds {
  background-image: url('http://madebyliam.co/nationsfc/mcdonalds.png');
  background-position: center;
}
.puma {
  background-image: url('http://madebyliam.co/nationsfc/puma.png');
}
.abp {
  background-image: url('http://madebyliam.co/nationsfc/abp.png');
}
.cartridge-people {
  background-image: url('http://madebyliam.co/nationsfc/cartridge-people.png');
}



#footer { 
background-color: #050417;
width: 100%;
margin: 0;
padding: 3rem 0 3rem 0;
min-height: 200px;
}
#footer-wrap {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 1rem; /* adds space between columns */
}
.footer-left { 
  width:35%; 
  font-size:10pt;
  color:#fff;
}
.footer-left-socials { width:40%; display:flex; justify-content:space-between; padding-top:2rem; }
.footer-left-socials-wrap {  
  
}
.footer-left-socials-x,
.footer-left-socials-tiktok,
.footer-left-socials-facebook,
.footer-left-socials-instagram {
  display: inline-block;
  width: 23px;
  height: 23px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;  
}



.footer-left-socials-facebook {
  background-color: #fff;
  background-image: url('/img/socials/facebook.png');
}

.footer-left-socials-instagram {
  background-color: #fff;
  background-image: url('/img/socials/instagram.png');
}

.footer-left-socials-tiktok {
  background-color: #fff;
  background-image: url('/img/socials/tiktok.png');
}

.footer-left-socials-x {
  background-color: #fff;
  background-image: url('/img/socials/x.png');
}


.footer-left-socials-facebook:hover,
.footer-left-socials-instagram:hover,
.footer-left-socials-tiktok:hover,
.footer-left-socials-x:hover {
  background-color: hotpink;
	cursor:pointer;
}


.footer-right { 
  width:30%; 
  display:flex; justify-content:space-between;  
}
.footer-right h1 { 
  font-size:1.2rem; color:#fff;
}
.footer-right ul { 
  font-size:10pt;
  padding:0;
  margin:0;
  text-align:left; color:#fff;
}
.footer-right li {
  list-style:none; padding:0.25rem 0 0.55rem;
}
.footer-first { width:100%; }
.footer-logo {    
  width: 40px;             
  height: 10vh;              
  background-image: url('/img/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  transition: height 0.3s ease, width 0.3s ease;
}


#sub-footer { 
  border-top:1px solid rgba(255,255,255,0.08);
background-color: #050417;
width: 100%;
margin: 0;
padding: 0.1rem 0 0.1rem 0;

}
#sub-footer-wrap {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;  /* vertically centers text and logo */
  gap: 1rem;
}
.sub-footer-left { 
  font-size:10pt;
  color:#fff;
}
.sub-footer-right { 
  font-size:10pt;
  color:#fff;
}
.sub-footer-logo {    
  width: 100px;             
  height: 10vh;              
  background-image: url('http://madebyliam.co/nationsfc/madebyliam.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  transition: height 0.3s ease, width 0.3s ease;
}




#hero-wrap,
#info-updates-wrap,
#our-goals-left-wrap,
#our-goals-right-wrap,
#block-01-wrap,
#match-info-wrap,
#mailing-list-wrap,
#footer-wrap,
#sub-footer-wrap {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s ease-out;
}

#hero-wrap.visible,
#info-updates-wrap.visible,
#our-goals-left-wrap.visible,
#our-goals-right-wrap.visible,
#block-01-wrap.visible,
#match-info-wrap.visible,
#mailing-list-wrap.visible,
#footer-wrap.visible,
#sub-footer-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}



/* ====================== MEDIA QUERIES ====================== */


/* --------------------- NAVIGATION --------------------- */


@media (max-width: 480px) {

  /* Hide desktop nav on mobile */
  #navbar nav {
    display: none !important;
  }

  /* Show hamburger button */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;   /* button width */
    height: 17px;  /* button height */
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
    z-index: 1001;
  }

  /* Hamburger lines (two bars) */
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #050417;
    border-radius: 2px;
    transition: all 0.35s ease;
  }

  /* Animate hamburger to X when button is active */
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  .nav-toggle.active span:nth-child(2) {
    transform: rotate(-45deg) translate(4px, -4px);
  }

  /* Nav wrap layout */
  .nav-wrap {
    width: 88%;
    max-width: 480px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Mobile menu container */
  .nav-menu-mobile {
    display: block; /* ensure visible in mobile context for animation */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    margin: 0;
    padding: 0;
    list-style: none;

    /* Fade + slide effect */
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    z-index: 1000;
  }

  /* When menu is active */
  .nav-menu-mobile.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Top-level menu links */
  .nav-menu-mobile > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
     padding: 0.6rem 0 0.6rem 6%;
    font-size: 1.1rem;
    text-decoration: none;
    color: #050417;
    font-family: "Century Gothic", "AppleGothic", sans-serif;
    margin: 0;
  }

  .nav-menu-mobile li a:hover {
    color:#797292;
  }

  /* Sleek arrow for submenu parents */
  .nav-menu-mobile .has-submenu > a::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #050417;
    border-bottom: 2px solid #050417;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-right: 2rem;
  }

  /* Rotate arrow when submenu is active */
  .nav-menu-mobile li.active > a::after {
    transform: rotate(-135deg);
  }

  /* Submenus */
  .submenu {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease;
    padding-left: 1.5rem;
    border-left: 3px solid #eb66b8;
    list-style: none;
    margin: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
  }
	.submenu a {
    padding: 0.5rem 1.5rem; /* reduced from 0.7rem top/bottom */
    font-size: 0.95rem;      /* optional: slightly smaller text */
}

  .nav-menu-mobile li.active .submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 400px;
  }

  .submenu a {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
    margin: 0 2rem 0 0;
    display: block;
    text-decoration: none;
    font-style: italic;
    color: #050417;
  }

  /* Hide socials in top bar on mobile */
  .nav-right .nav-socials {
    display: none;
  }

  /* Mobile socials container */
  .nav-socials-mobile {
    padding: 1.5rem 6% 2rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    list-style: none;
  }

  .nav-socials-mobile .nav-socials {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 240px;   /* keeps it tight and classy */
  }














.nav-logo { height: 6vh; }


#hero-wrap { width: 88%; max-width: 480px; }
.hero-content { margin-top:50vw; width: 98%; }
.hero-social { left: 0; width: 50%; flex-direction: row; justify-content: space-between; padding-bottom: 2rem; }
.hero-social-text { display:none; }
#hero::before { background-attachment: scroll; }


#info-updates-wrap { width: 94%; max-width: 480px; }

.section-title-wrap { 
  display: flex; 
  flex-direction:column;
}
.updates {
width:100%;
}


#match-info-wrap { flex-direction:column; width:94%; }
#our-goals { display: flex; flex-direction:column;}
#our-goals-left { width: 94%; padding:2rem 0 4rem 6%;  text-align:justify; }
#our-goals-left h1 { text-align:left; }
#our-goals-left-wrap { max-width: 96%; }
#our-goals-right { width:100%; padding: 4rem 0 6rem 0; }


#our-goals-right-wrap { margin:0 auto; display:inline-block; display:flex; justify-content:space-between;flex-direction:column; align-items:center; }


.our-goals-right-left {   display:flex; justify-content:space-between; flex-direction:column; align-items:center; }
.our-goals-right-right { margin-left:5rem; display:flex; justify-content:space-between;flex-direction:column; align-items:center; }



#block-01 { width: 100%; }
#block-01-wrap { width: 96%; max-width: 480px; }  

#sponsor { padding: 2rem 0 4rem 0; }
#sponsor-wrap { width: 88%; }
#center-title-wrap { text-align:justify; width:87%; }


#mailing-list::before { height: 100%; max-height: 100%; background-attachment: scroll;  }
#mailing-list-wrap { width: 88%; margin: 0 0 2rem 0; flex-direction:column; gap: 1rem; }
.mailing-list-form { max-width: 100%; width: 100%; }
.mailing-list-form input[type="email"] { padding: 0.5rem 0.5rem; }

#footer-wrap { width: 88%; max-width: 480px; flex-direction:column; }
.footer-left { width:100%; }
.footer-left-socials { width:50%; padding-top:1rem; }
.footer-right { width:88%; }

#sub-footer-wrap {width: 88%; max-width: 480px;}

}