@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/*Global styling*/
/*CSS variables Color Palette*/
:root {
  --primary--font: "Inter", sans-serif;
  --secondary--font: "Bebas Neue", sans-serif;
  --primary: #2c1b69; /* Deep purple*/
  --secondary: #8c5bff; /* Bright purple — accents and highlights */
  --accent: #c4a8ff; /* Soft lilac — subtle highlights */
  --light: #f5f1fe; /* Lavender white — page background */
  --dark: #0d0a1a; /* Near black — footer background */
  --muted: #7a6e99; /* Purple-grey — body text and subtitles */
  --white: #ffffff; /* Pure white */

  --radius: 12px; /*--radius stores the border-radius value used on cards and boxes.*/
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.12); /*The values mean:
    - 0 = no horizontal offset (shadow directly below)
    - 8px = vertical offset (shadow sits 8px below the element)
    - 32px = blur radius (how soft/spread the shadow is)
    - rgba(0,0,0,0.12) = black at 12% opacity (very subtle shadow)*/
}

/* Global / Shared styles*/

.section-title{
  font-size: 2.5rem; /*- font-size: 2.5rem = 40px (rem is relative to the root font size, usually 16px)*/
  font-family: var(--secondary--font);
  color: var(--secondary);
}


.section-title span {
  color: var(--primary);
}
/*Targets <span> elements INSIDE .section-title headings.*/

.section-subtitle{
  font-family: var(--primary--font);
  color: var(--muted);
}


/*Buttons*/

.btn-ggg {
  
  padding: 10px 36px;
  border-radius: 50px;
  font-family: var(--primary--font);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
/*.btn-ggg is the base class for our custom buttons (not Bootstrap buttons).
- text-decoration: none = removes underline (important as buttons use <a> tags)*/

.btn-ggg-primary{
  background: var(--secondary);
  color: var(--white);
}


/*Navbar*/
/* Override the bootstrap color for the nav bar*/
.navbar {
  background-color: var(--primary) !important;
  padding: 14px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
}
/*background-color: var(--primary) =!important = deep purple background.
    !important overrides Bootstrap's default navbar background colour.
    We need !important here because Bootstrap also targets .navbar with
    its own background colour and our CSS would lose without it.
    
   - box-shadow: 0 2px 20px rgba(0,0,0,0.3) = subtle drop shadow below the
    navbar, making it feel elevated above the page content.
    Values: 0 horizontal, 2px vertical, 20px blur, 30% black opacity.
  
   - position: sticky = the navbar sticks to the top of the screen as
    the user scrolls down. It stays visible at all times.

   - top: 0 = required with sticky — tells it where to stick (top of viewport).

   - z-index controls which element appears ON TOP when elements overlap.
  Without this, page content could scroll over the navbar instead of under it.
  1000 is a high value that ensures the navbar always stays on top.
    */

.navbar-brand {
  font-family: var(--secondary--font);
  font-size: 1.7rem;
  color: var(--white) !important;
}
/* font-size: 1.7rem = slightly larger than normal navbar text*/

.navbar-brand span {
  color: var(--secondary);
}

.navbar-nav .nav-link {
  font-family: var(--primary--font);
  color: white !important;
  text-transform: uppercase;
  border-radius: 6px;
}

/* Styles all navigation links (Home, About, Sessions etc.).
- border-radius: 6px = slightly rounded corners on the link background,
    visible on hover when the background colour appears.
*/

.navbar-nav .nav-link.active {
  text-decoration: underline;
  font-weight: bold;
}

/*Styles the ACTIVE link — the one matching the current page.*/

.navbar-nav .nav-link:hover {
  background-color: var(--secondary);
  color: var(--primary) !important;
  padding: 8px 16px;
}
/*padding: 8px 16px = adds padding so the background fills nicely around the text.
:hover is a CSS pseudo-class — it only applies when the mouse is over the element.
*/

.navbar-toggler {
  border-color: white; 
}/*makes the button border white
*/

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}/*replaces the dark icon with a white version*/


/* HERO SECTION */

.hero-section {
  background:
    linear-gradient(rgba(44, 27, 105, 0.7), rgba(140, 91, 255, 0.7)),
    url("../images/Designer%20(1).png");
  background-size: cover;
  background-position: center; /*background-position: center = keeps the centre of the image in view
    when it's cropped on smaller screens.*/
  background-attachment: fixed; /*the background
    image stays fixed while the page content scrolls over it.*/
  text-align: left;
}
/*linear-gradient(rgba(44,27,105,0.7), rgba(140,91,255,0.7))
     = a purple gradient overlay on top of the image.
     rgba() is like hex but with a 4th value for opacity (0=transparent, 1=solid).
     0.7 = 70% opacity, so the image shows through slightly underneath.
    */

.hero-section h1 {
  color: var(--white);
  font-family: var(--secondary--font);
  font-size: 5rem;
}

.hero-section p {
  color: var(--white);
  font-family: var(--primary--font);
}

.hero-section .btn-primary {
  background-color: var(--white);
  color: var(--primary);
  border-color: var(--white);
  font-weight: bold;
}
/* Styles Bootstrap's .btn-primary class when it's INSIDE .hero-section.
  Overrides Bootstrap's default blue button with our white button style.*/

.hero-section .btn-primary:hover {
  background-color: var(--secondary);
  color: var(--white);
  border-color: var(--secondary);
}

/*Changes the hero button's appearance when hovered.*/

/* PAGE HERO (About, Sessions,Success)*/

.page-hero{
  background-color: var(--primary);
  padding: 80px 0 60px;
}

/* padding: 80px 0 60px = 80px top, 0 left/right, 60px bottom.*/

.page-hero-title{
  font-size: 4rem;
  color: var(--white);
  font-family: var(--secondary--font);
}

.page-hero-title span {
  color: var(--secondary);
}

.page-hero-sub{
  color: var(--muted);
}
/* SECTION 1 — Homepage "Why Girls Got Game?" cards */
.section-1 {
  background-color: var(--light);
  line-height: 2rem; /*This makes paragraphs easier to read by adding breathing room between lines*/
}

.section-1 h2 {
  text-transform: uppercase;
}

.section-1 .card-title {
  color: var(--primary);
  text-transform: uppercase;
  font-weight: bold;
}

.section-1 p {
  color: var(--muted);
}

.primary-text {
  color: var(--primary);
}

.secondary-text {
  color: var(--secondary);
}
/* ORIGIN STORY — About page */
.origin-story{
  background-color: var(--light);
  padding: 40px; /*padding: 40px = 40px on all four sides*/
}

.origin-story p {
color: var(--muted);
}

/* COACHES — About page */ 
.coaches-section{
  background-color: var(--accent);
  padding: 30px;
}
.coach-card{
  text-align: center;
  padding: 32px 20px; /* padding: 32px 20px = 32px top/bottom, 20px left/right*/
  background: var(--white);
  border-radius: var(--radius);
}

/*SESSION DETAILS — Sessions page*/
.session-details {
  padding: 80px; /*padding: 80px = generous spacing on all sides inside the section*/
  background-color: var(--light);
}
.info-box {
  border-radius: var(--radius);
  padding: 20px;
 color: var(--white);
}

.info-box--primary{
  background: var(--secondary);
}

.info-box--secondary{
  background: var(--primary);
}

.info-box--light{
  background: var(--light);
  border: 2px solid var(--white);
  color: var(--primary);
}

.info-box__icon {
  font-size: 1.8rem;
  margin-bottom: 6px;
}

.info-box__title{
  font-family: var(--secondary--font);
  font-size:1.3rem;
}

.info-box__title--dark{
  color: var(--primary);
}

/*TIMELINE — Sessions page*/

.timeline-heading {
  font-family: var(--secondary--font);
  font-size: 1.6rem;
  margin-top: 4rem; /*separating it from the section above*/
  margin-bottom: 24px; /*space below before the first timeline item*/
  color: var(--primary);
}

 
.timeline-label {
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 4px; /*small gap before the description paragraph below*/
}
 
.timeline-desc {
  color: var(--muted);
  font-size: 0.9rem; /*slightly smaller than normal, creating hierarchy*/
  margin: 0; /*removes default paragraph margin (spacing handled by the parent)*/
}

/* WHAT TO BRING — Sessions page*/

.bring-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
  margin-bottom: 28px;
}
 
.bring-card__title {
  font-family: var(--secondary--font);
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--secondary);
}
 
.bring-card__title span {
  color: var(--primary);
}
 
.bring-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*Resets the default <ul> styles for the items list.
  - list-style: none = removes the default bullet points
  - padding: 0 = removes default left indent browsers add to lists
  - margin: 0 = removes default top/bottom margin on the list*/
 
.bring-list__item {
  display: flex; /*display: flex = puts the icon and text side by side (not stacked)*/
  gap: 12px; /*spacing between the icon (✓) and the text*/
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f8; /*subtle light divider line between items*/
  align-items: center;
}

 
.bring-list__item:last-child {
  border-bottom: none;
}
/*
  Removes the divider line from the LAST item in the list.
  :last-child is a CSS pseudo-class that targets only the final <li>.
  Without this, the last item would have a border below it
  which would look odd against the card's padding.
*/
 
.bring-list__icon {
  font-size: 1.2rem;
  
}
 
.bring-list__icon--yes { color: var(--primary); } /*--yes = deep purple ✓ for items to bring*/
.bring-list__icon--no  { color: var(--muted); } /* --no  = muted grey ✗ for the "don't need to bring" item*/
 
.bring-list__no-text {
  color: var(--muted);
}
/*
  Styles the text on the "don't need to bring" item in muted grey,
  making it visually less prominent than the positive ✓ items.
*/

/*SIGN-UP FORM — Sessions page*/ 

#signup{
  background:var(--secondary); 
  padding:80px 0;
}

#signup .btn{
  background-color: var(--primary);
  border: 2px solid var(--primary);
}
/*Footer*/

footer {
  background-color: var(--dark);
  color: var(--muted);
  
}

footer h5 {
    text-transform: uppercase;
    font-family: var(--secondary--font);
}

footer span {
    color: var(--secondary);
}

.footer-link {
  color: var(--muted);
  text-decoration: none; /*removes the default underline from links*/
}

.footer-link:hover,
.footer-link:focus {
  color: var(--secondary);
  text-decoration: none;
}
/*
  Changes footer links when hovered over or focused (keyboard navigation).
  - color: var(--secondary) = bright purple on hover
  - text-decoration: none = keeps underline removed on hover
 
  :hover = triggered by mouse.
  :focus = triggered by keyboard (Tab key). Important for accessibility —
  keyboard users need to see which link is focused, same as mouse users.
  Listing both together means the style applies to both interactions.
*/

 /* Media Queries */

 /*@media (max-width: 768px) means:
  "Only apply these styles when the screen is 768px wide or LESS"
  768px is the standard breakpoint for mobile/tablet screens.*/

  @media (max-width: 768px) {
 
  /* --- PAGE HERO --- */
 
  .page-hero {
    padding: 40px 0 30px;/*
      Reduces the top and bottom padding on mobile.
      The original 80px top / 60px bottom was too tall for small screens,
      pushing content too far down.
    */
  }
 
  .page-hero-title {
    font-size: 2.2rem;
    /*
      This is the main fix for the cut-off hero title.
      The original font-size: 4rem (64px) is too wide for a mobile screen.
      2.2rem (35px) fits "WEDNESDAY SESSIONS" on the screen without overflowing.
    */
    word-break: break-word;
    /*
      word-break: break-word = if a single word is still too long,
      allow it to break onto the next line rather than overflow off screen.
      Safety net in case the title is ever longer.
    */
  }
 
  .page-hero-sub {
    font-size: 0.95rem;
    /*
      Slightly reduces the subtitle text size on mobile for better fit.
    */
  }
 
  /* --- SESSION DETAILS SECTION --- */
 
  .session-details {
    padding: 40px 16px;
    /*
      Reduces the padding on mobile.
      Original padding: 80px on all sides was creating too much
      empty space and squeezing the content on small screens.
      16px left/right gives the content breathing room from the screen edge.
    */
  }
 
  /* --- SECTION TITLE (SESSION DETAILS heading) --- */
 
  .section-title {
    font-size: 1.8rem;
    /*
      Reduces the "SESSION DETAILS" heading from 2.5rem to 1.8rem on mobile.
      This stops it stacking onto two lines as seen in your screenshot.
    */
  }
 
  /* --- INFO BOXES (Wednesday / Time boxes) --- */
 
  .info-box {
    padding: 14px;
    /*
      Reduces padding inside the boxes so the text has more room.
    */
  }
 
  .info-box__title {
    font-size: 1rem;
    /*
      Reduces the title text inside boxes (e.g. "EVERY WEDNESDAY").
      Original 1.3rem was too large for the box width, causing text to
      overflow and get cut off as seen in your screenshot.
    */
    word-break: break-word;
    /*
      Allows long words to wrap inside the box rather than overflow.
    */
  }
 
  .info-box__icon {
    font-size: 1.4rem;
    /*
      Slightly reduces the emoji icon size to save vertical space.
    */
  }
 
  /* --- BRING CARD --- */
 
  .bring-card {
    padding: 20px;
    /*
      Reduces the padding inside the What To Bring card on mobile.
      Original 36px was too much on a small screen.
    */
    margin-bottom: 20px;
  }
 
  /* --- TIMELINE --- */
 
  .timeline-heading {
    font-size: 1.3rem;
    /*
      Reduces the "How the Evening Runs" heading size on mobile.
    */
    margin-top: 2rem;
    /*
      Reduces the top margin from 4rem — less space needed on mobile.
    */
  }
 
  /* --- SIGN UP FORM --- */
 
  #signup {
    padding: 40px 0;
    /*
      Reduces the top and bottom padding of the signup section on mobile.
    */
  }
}