/* Mobile Paragraph Font Size */
/* Scrolling Bio */
@media (max-width: 768px) {
  .desktopContentSection p {
    font-size: 13px !important;
  }
}
/* Metrics */
@media (max-width: 768px) {
  .metrics p {
    font-size: 14px !important;
  }
}

/* Tablet Scrolling Bio Paragraph Font Size */
/* Scrolling Bio */
@media (min-width: 769px) and (max-width: 1024px) {
  .desktopContentSection p {
    font-size: 15px !important;
  }
}

/* ===========================
   CUSTOM CSS (Paste in Appearance > Customize > Additional CSS)
   =========================== */

/* STICKY NAV: OUTER CONTAINER */
.custom-sticky-header {
  position: fixed; /* Makes it stick to the screen */
  top: 1.5vh;        /* Distance from the top (responsive vertical space) */
  left: 0;
  right: 0;
  margin: 0 auto;  /* Centers the nav horizontally */
  max-width: 1000px; /* Controls the total width of the nav bar */
  padding: 9px 24px;  /* Top-bottom and left-right spacing inside the nav */
  background: rgba(240, 240, 240, 0.40); /* Background color & transparency */
  border: 1px solid #36d6c5; /* Border with brand color */
  border-radius: 40px;       /* Rounded corners */
  backdrop-filter: blur(15px); /* Glassmorphism blur effect */
  z-index: 9999; /* Ensures it's always on top */
  transition: opacity 0.4s ease-in-out; /* For scrolling effect */
  opacity: 1;
  pointer-events: auto;
}

/* STICKY NAV: FADE OUT ON SCROLL */
.custom-sticky-header.hide {
  opacity: 0;
  pointer-events: none;
}

/* STICKY NAV: INNER FLEX WRAPPER */
.sticky-inner {
  display: flex;              /* Enables flexbox */
  justify-content: space-between; /* Separates logo and nav links */
  align-items: center;        /* Centers items vertically */
}

/* STICKY NAV: LOGO SECTION */
.nav-logo img {
  height: auto;        /* Keeps original aspect ratio */
  max-height: 60px;    /* Controls image height */
  margin-left: -10px;
  vertical-align: middle;
}

/* STICKY NAV: NAVIGATION MENU WRAPPER */
.nav-menu {
  display: flex;          /* Flex container for links */
  gap: 45px;              /* Adds space between each link */
  padding-right: 45px;    /* Pushes links away from right edge */
}

/* STICKY NAV: NAVIGATION LINKS */
.nav-menu a {
  font-size: 15px;         /* Text size */
  font-weight: 500;        /* Font boldness */
  color: #0d161b;          /* Font color */
  text-decoration: none;  /* Removes underline */
  padding: 3px;            /* Adds internal spacing (for better click area) */
  transition: font-weight 0.1s ease, color 0.1s ease; /* Smooth hover changes */
  position: relative;      /* Required for the animated underline */
}

.nav-menu a:hover {
  font-weight: 700;   /* Boldens the font */
}

.nav-menu a::after {
  content: "";                /* Creates a line after each link */
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #36d6c5;  /* Underline color */
  left: 0;
  bottom: -3px;               /* Distance from the bottom of the text */
  transform: scaleX(0);       /* Underline is initially invisible */
  transform-origin: left;     /* Where it starts the animation from */
  transition: transform 0.3s ease; /* Smooth slide-in effect */
}

.nav-menu a:hover::after {
  transform: scaleX(1);       /* Expands the underline on hover */
}

/* STICKY NAV: TABLET RESPONSIVE ADJUSTMENTS */
@media (max-width: 1024px) {
  .custom-sticky-header {
  position: fixed;				/* Re-assert fixed positioning on mobile */
  will-change: transform;		/* Hint browser to optimize transforms */
  bottom: 30px;
  top: auto;
  left: 0;
  right: 0;
  margin: 0 auto;               /* Centers it horizontally */
  padding: 9px 21px;
  max-width: 80vw;              /* Constrain width to avoid full width */
  }


  .sticky-inner {
    flex-direction: row;
    justify-content: center;
    gap: 15px;
  }

  .nav-logo img {
    max-height: 39px;            
    margin-left: 0;
  }

  .nav-menu {
    gap: 15px;
    padding-right: 0;
  }

  .nav-menu a:first-child {
    display: none; /* Hide "Home" on mobile */
  }

  .nav-menu a {
    font-size: 12px;
    padding: 3px;
  }

  .nav-menu a::after {
    display: none; /* Remove underline animation on mobile */
  }
}

/* 📱 PHONE OPTIMIZATION */
@media (max-width: 768px) {
  .custom-sticky-header {
    top: 10px;               /* show at top instead of bottom */
    bottom: auto;
    max-width: 92vw;         /* slightly wider than tablet setting */
    padding: 8px 18px;       /* balanced spacing for touch */
    border-radius: 32px;
  }

  .sticky-inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .nav-logo img {
    max-height: 24px;
    margin-left: 0;
  }

  .nav-menu {
    gap: 10px;
    padding-right: 0;
  }

  .nav-menu a {
    font-size: 11px;         /* smaller text for mobile */
    padding: 3px;
  }

  .nav-menu a:first-child {
    display: none;           /* hide “Home” on phone */
  }

  .nav-menu a::after {
    display: none;           /* remove underline animation on small screens */
  }
}