/*
Theme Name: FC Nations
Theme URI: http://fcnations.com
Description: A custom theme for FC Nations website.
Author: Your Name
Author URI: http://yourwebsite.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fcnations
Tags: custom, responsive, football, sports
*/




html, body {
  margin: 0;
  padding: 0; 
  background:#fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size:12pt;
  font-weight:100;
}

/* =====================
   FC NATIONS – WordPress admin bar offset fix
   ===================== */
body.admin-bar .fcnations-header {
  top: 0;
}

body.admin-bar {
  margin-top: 0 !important;
}


h1 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
}
h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal; 
  font-size:1.6rem;
}
p {
  font-family: Helvetica, Arial, sans-serif;
  font-weight:200;
  font-size:0.9rem;
  line-height:1.3rem; 
}
.text-arrow-btn {
    font-family: Helvetica, Arial, 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 */
}

.box-button {
  display: inline-block;
  padding: 0.7rem 2rem;
  border:2px solid #eb66b8;
  background: #fff;        /* nice pink tone */
  color: #eb66b8;;
  font-weight: 550; font-size:0.8rem; letter-spacing:0.1rem;;
  text-decoration: none; 
  text-transform:uppercase;
  transition: 0.25s ease;
}

.box-button:hover {
  background: #eb66b8;
  color:#fff;
}


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

/* Navbar full width */


.nav-logo {
  width: 120px;               /* adjust as needed */
  height: 10vh;               /* same as initial navbar height */
  background-image: url('http://fcnations.com/img/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  transition: height 0.3s ease, width 0.3s ease;
}

/* Shrink state */
#navbar.shrink .nav-logo {
  height: 4.5vh;                /* matches shrink */
  width: 90px;                /* smaller logo on scroll */
}
#navbar { font-family: "Bebas Neue", sans-serif; 
width: 100%; 
height: 14vh; /* initial height */
background-color: #fff;
color: white;
display: flex;
align-items: center;
transition: height 0.3s ease, background-color 0.3s ease; /* smooth shrink and color change */
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}

/* Shrinked navbar */
#navbar.shrink {font-family: "Bebas Neue", sans-serif;
height: 7vh; /* shrinks on scroll */
background-color: #fff; /* becomes solid black */
background: #fff;

}

/* Dropdown container */
nav .dropdown {font-family: "Bebas Neue", sans-serif;
position: relative;
display: inline-block;
margin-left: 0rem; 
}
nav .dropdown > a {font-family: "Bebas Neue", sans-serif;
  display: inline-block;
  padding: 0 0.75rem; /* adjust horizontal spacing instead of margin-left */
  line-height: 14vh; /* match navbar height for vertical centering */
  transition: line-height 0.3s ease; /* smooth transition when navbar shrinks */
}

#navbar.shrink nav .dropdown > a {
  line-height: 7vh; /* match shrunk navbar height */
}
/* Dropdown links */
/* Dropdown styling */
nav .dropdown-content {
  display: flex;              /* keep as flex column */
  flex-direction: column; 
  position: absolute;
  top: 100%;                  /* start directly below the link */
  left: 0;
  background-color: #fff;
  min-width: 160px;
  padding: 0.5rem 0;
  opacity: 0;                 /* start hidden */
  transform: translateY(-10px); /* slightly above */
  pointer-events: none;       /* prevent clicks when hidden */
  transition: opacity 0.3s ease, transform 0.3s ease; /* smooth transition */
}

/* Show dropdown on hover */
nav .dropdown:hover .dropdown-content {
  opacity: 1;                 
  transform: translateY(0);   
  pointer-events: auto;       
  display: flex;
}

#navbar.shrink nav .dropdown-content {
  top: 7vh; /* matches the shrinked navbar height */
}

/* Inner wrapper to keep content centered */
.nav-wrap {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Main nav links styling with LVHA order */
nav a:link,
nav a:visited {
  font-size: 1.3rem;
  color: #050417;
  text-decoration: none;
  margin-left: 1.5rem;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 500;
}

nav a:hover,
nav a:focus {
  color: #797292;
}

/* Dropdown links styling with LVHA order */
nav .dropdown-content a:link,
nav .dropdown-content a:visited {
  font-size: 1.1rem;
  font-weight: 200;
  color: #050417;
  margin-left: 0;        
  padding: 0.5rem 1rem;  
  display: block;        
  text-decoration: none;
}

nav .dropdown-content a:hover,
nav .dropdown-content a:focus {
  color: #797292;
}











/* Main container */
#main-container { 
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
gap: 0rem; 
}

.section-title {
  flex: 0 0 auto;                 /* don't grow, keep content width */
  display: flex;
  flex-direction: column;
  justify-content: center;        /* vertically center title & subtitle */
}
.section-title-wrap { 
  display: flex; 
  justify-content: space-between; /* keeps left and right at extremes */
  align-items: stretch;           /* make children same height */
  gap: 0rem;
  width: 100%;                    /* ensure it fills the parent */            /* optional max width */
  margin: 0 auto;     
  align-items: center;  /* vertically center the children */
  flex: 1;
}
.updates {
background:none; 
}

.countdown-section {
  display: flex;
  justify-content: flex-end;       /* keeps countdown to far right */
  align-items: center;             /* vertically center content */
  background-color: #f8f8fc;       /* light grey background */
  gap: 4rem;
  
  flex: 0 0 auto;                  /* don’t grow beyond content */
  height: 80%;                      /* relative to parent container */
  max-height: 100%;                 /* won’t exceed parent height */
  padding: 0.5rem 3rem;                  /* vertical padding with relative units */
}

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

.countdown-left h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  margin: 0 0 0.5rem 0;
}

.countdown-left p {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.6rem;
  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: 'Bebas Neue', sans-serif;
  font-size: 1.6rem; /* adjustable */
  font-weight: 400;
}

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








#page-hero {
  position: relative;
  height: 40vh;
  min-height: 40vh;
  display: flex;
  justify-content: center; /* centers wrap horizontally */
  align-items: stretch;    /* allows child to fill vertically */
  color: white;
  z-index: 0;
  background-color: #000;
}

/* Hero Background Image */
#page-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://madebyliam.co/nationsfc/hero.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: -1; /* behind content */
}

/* Hero Wrap (Red) */
#page-hero-wrap {
  max-width: 1200px;
  width: 80%;       /* only as wide as content */
  margin: 0 auto;

  display: flex;
  align-items: stretch; /* stretch children vertically */
  height: 100%;         /* match #page-hero height */
}

/* Hero Content (Blue) */
.page-hero-content {
  width: auto;      /* only as wide as content */
  height: 100%;     /* fill #page-hero-wrap vertically */
  
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center the text */
  padding-top:13vh; /* optional padding */
}





/* Double column section */
#hero {
  position: relative;           /* needed for pseudo-element positioning */
  height: 100vh;
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  color: white;
  z-index: 0;  
  background-color:#000;                 /* content will be above the pseudo-element */
}

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

#hero-wrap {
  width: 80%;         /* matches other sections */
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}



.hero-content { 
  margin-top:18vw;
  width: 50%;
}


.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: "Bebas Neue", 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: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom:0; 
}
#hero h1 { font-size:2.75rem; }
#hero h2 { font-size:1.75rem; }
#hero h3 { font-size:11pt; font-weight:100; font-family: Helvetica, Arial, sans-serif; }
#hero h4 { font-size:1.75rem; 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 */
}

#index-banner-contact { 
    width: 100%;
    height: auto;
    display: flex;
    justify-content: left;
    align-items: center;
}
#index-banner-contact h3 {
    padding-top: 0;          /* remove huge padding */
    margin-bottom: 0.25rem;  /* small space below h3 */
    color: #fff;
    font-size: 11pt;
    font-weight: 500;
    line-height: 1.2;        /* reasonable line height for readability */
    text-transform:uppercase;
}

#index-banner-contact h4 {
    margin-top: 0;           /* remove default top margin */
    font-family: 'Bebas Neue', sans-serif;
    color: #fff;
    font-size: 27pt;
    font-weight: 400;
    line-height: 1.2;
}

#index-banner-contact h4 a {
    text-decoration:none;   
    color: #fff;
}
#index-banner-contact h4 a:hover {
    text-decoration:none;   
    color: #eb66b8;
}

.index-banner-contact-icon {
    width: 54px;
    height: 54px;
    padding: 0;
    background-image: url("https://madebyliam.co/nationsfc/register.png");
    background-size: 54px 54px;
    background-repeat: no-repeat;
    background-position: left;
}
.index-banner-contact-detail {
    width: auto; padding-left:20px;
    margin: 0;
}


.hero-social {
  position: absolute;
  bottom: 0;           /* align to bottom of container */
  right: 0;            /* align to right edge */
  display: flex;
  flex-direction: column;
  gap: 1rem;           /* spacing between icons */
  padding-bottom: 3rem; /* optional padding from bottom */
  z-index: 2;
}


.hero-social a {
  display: block;
  width: 30px;
  height: 30px;
  background-color: none; 
  border-radius: 50%;
  border:1px solid #f8f8f8;
  text-decoration: none;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.hero-facebook {
  background-image: url('http://madebyliam.co/nationsfc/facebook.png');
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center center;  
}
.hero-x {
  background-image: url('http://madebyliam.co/nationsfc/x.png');
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center center;  
}
.hero-instagram {
  background-image: url('http://madebyliam.co/nationsfc/instagram.png');
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center center;  
}
.hero-tiktok {
  background-image: url('http://madebyliam.co/nationsfc/tiktok.png');
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center center;  
}
.hero-social-text {
  display: block;
  writing-mode: vertical-rl;      /* vertical text layout */
  transform: rotate(-180deg);     /* flip text to counter-clockwise */
  max-width: 30px;                /* constrain width */
  font-size: 0.9rem; font-weight:100;
  text-align: center;
  color: #f8f8fc;                   /* adjust color if needed */
  margin-top: 1rem;               /* spacing from icons */
  align-items:center;

  display: block;
  margin-left: auto;
  margin-right: auto;

}








/* Specific styles */




#info-updates { 
width: 100%;
margin: 0;
padding: 0;
}
#info-updates-wrap {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding: 3rem 0 0rem 0;
display: flex;
flex-direction:column;
border-left: 1px solid #00fcff;
border-right: 1px solid #00fcff;
}

#match-info { 
width: 100%;
margin: 0;
padding: 0 0 0 0;
min-height: 200px;

}
#match-info-wrap { 
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 3rem 0;
display: flex;
justify-content: space-between;
border-left: 1px solid #00fcff;
border-right: 1px solid #00fcff;
gap: 2rem; /* adds space between columns */
}
/* 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-wrap {
  max-width: 100%;
}
.match-info-content {
  flex: 1;  padding: 1rem;
}
.match-card {
  width: 100%;
  max-width: 380px;
  background: #f8f8f8;
  border-radius: 1rem;
  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: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
}

/* 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: 'Bebas Neue', 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: "Bebas Neue", 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: "Bebas Neue", 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%;
max-width: 1200px;
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%;
max-width: 1200px;
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%;
max-width: 1200px;
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%;
max-width: 1200px;
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 {
  width: 100%; height: 16px; 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  transition: height 0.3s ease, width 0.3s ease;   
}
.footer-left-socials-x {  }
.footer-left-socials-facebook {              
  background-image: url('http://madebyliam.co/nationsfc/facebook.png');
}
.footer-left-socials-instagram {            
  background-image: url('http://madebyliam.co/nationsfc/instagram.png');
}
.footer-left-socials-tiktok {             
  background-image: url('http://madebyliam.co/nationsfc/tiktok.png');
}
.footer-left-socials-x {            
  background-image: url('http://madebyliam.co/nationsfc/x.png');
}
.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('http://madebyliam.co/nationsfc/footer-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%;
  max-width: 1200px;
  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);
}



/* -------------------- DESKTOP (default) -------------------- */

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

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

/* -------------------- MOBILE -------------------- */
@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: 1rem 0 1rem 6%;
    font-size: 1.1rem;
    text-decoration: none;
    color: #050417;
    font-family: "Bebas Neue", 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;
  }

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

  .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;
  }
















.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;}

}

/* ===================== FC NATIONS STYLES END ===================== */

/* ===================== TWENTY THIRTEEN STYLES START ===================== */
/*
Theme Name: Twenty Thirteen
Theme URI: https://wordpress.org/themes/twentythirteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 4.5
Tested up to: 6.9
Requires at least: 3.6
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, footer-widgets, microformats, post-formats, rtl-language-support, sticky-post, translation-ready, accessibility-ready, block-patterns
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/**
 * Table of Contents:
 *
 * 1.0 - Reset
 * 2.0 - Repeatable Patterns
 * 3.0 - Basic Structure
 * 4.0 - Header
 *   4.1 - Site Header
 *   4.2 - Navigation
 * 5.0 - Content
 *   5.1 - Entry Header
 *   5.2 - Entry Meta
 *   5.3 - Entry Content
 *   5.4 - Galleries
 *   5.5 - Post Formats
 *   5.6 - Attachments
 *   5.7 - Post/Paging Navigation
 *   5.8 - Author Bio
 *   5.9 - Archives
 *   5.10 - Search Results/No posts
 *   5.11 - 404
 *   5.12 - Comments
 *   5.13 - Multisite
 * 6.0 - Sidebar
 *   6.1 - Widgets
 * 7.0 - Footer
 * 8.0 - Media Queries
 * 9.0 - Print
 * ----------------------------------------------------------------------------
 */


/**
 * 1.0 Reset
 *
 * Modified from Normalize.css to provide cross-browser consistency and a smart
 * default styling of HTML elements.
 *
 * @see http://git.io/normalize
 * ----------------------------------------------------------------------------
 */



/* ===================== TWENTY THIRTEEN STYLES END ===================== */