.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-68e01cb:#F9F4F0;--e-global-color-d2e8a18:#B7F01E;--e-global-color-5d7ed91:#104026;--e-global-color-5203b3e:#F9F4F0A1;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;gap:0px;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- 
  INSTALLATION NOTE:
  “Customizer can’t hold HTML navbar code. Please add the navbar globally using Elementor Theme Builder Header (Display: Entire Site). 
  If no Elementor Pro, use a Header/Footer Builder plugin. 
  If coding, insert the navbar in header.php and CSS in Additional CSS.”
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shirtphoria Navbar Widget</title>

<!-- Google Fonts Import -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet">

<style>
  /* * SCOPED STYLES FOR ELEMENTOR HTML WIDGET */

  /* CSS Variables based on Branding */
  :root {
    --sp-bg-color: #104026;      /* Call to Action Dark Green */
    --sp-text-color: #F9F4F0;    /* Main Hero Off-White */
    --sp-hover-color: #B7F01E;   /* CTA Hover Lime */
    --sp-font-title: 'Space Grotesk', sans-serif;
    --sp-font-body: 'Inter', sans-serif;
  }

  /* Reset for this widget only */
  .sp-nav-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .sp-nav-wrapper {
    width: 100%;
    background-color: var(--sp-bg-color);
    font-family: var(--sp-font-body);
    
    /* CSS CHANGE: Sticky Positioning */
    position: sticky; 
    top: 0;
    
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border for definition */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);      /* Soft shadow */
  }

  /* Inner Container - GRID STRUCTURE FOR CENTERED LINKS */
  .sp-nav__inner {
    width: 100%;       /* Full Width */
    max-width: none;   /* Remove constraint for edge-to-edge */
    padding: 0 40px;   /* Horizontal padding */
    height: 70px;      /* Height 70px */
    
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left, Center, Right */
    align-items: center;
    position: relative;
  }

  /* --- BRAND STYLING (Left) --- */
  .sp-brand {
    font-family: var(--sp-font-title);
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    justify-self: start; /* Push to far left */
    z-index: 1002;
  }

  .brand-white { color: #ffffff; }
  .brand-accent { color: var(--sp-hover-color); }

  /* --- LINKS STYLING (Center) --- */
  .sp-links {
    display: flex;
    align-items: center;
    gap: 40px;          /* Spacing between links */
    justify-self: center; /* Absolute center of the grid */
  }

  .sp-link {
    text-decoration: none;
    color: #ffffff;
    font-family: inherit;
    font-style: normal;
    font-weight: 600;
    font-size: 14px; 
    
    /* UPPERCASE AGENCY STYLE */
    text-transform: uppercase;
    letter-spacing: 1px;
    
    transition: color 0.3s ease;
    position: relative; /* Required for the underline positioning */
  }

  /* Custom Animated Underline */
  .sp-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 2px;
    background-color: var(--sp-hover-color); /* #B7F01E */
    transition: width 0.3s ease;
  }

  .sp-link:hover::after,
  .sp-link:focus::after {
    width: 100%;
  }

  .sp-link:hover,
  .sp-link:focus {
    color: var(--sp-hover-color);
    text-decoration: none; /* Remove standard underline */
  }

  /* --- RIGHT SIDE (Empty / Mobile Toggle container) --- */
  .sp-nav-right {
    justify-self: end; /* Push to far right */
    display: flex;
    align-items: center;
  }

  /* --- MOBILE TOGGLE & MENU --- */
  .sp-mobile-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    z-index: 1002;
  }

  .sp-bar {
    width: 100%;
    height: 2px;
    background-color: var(--sp-text-color);
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
  }

  .sp-mobile-toggle.active .sp-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: var(--sp-hover-color); }
  .sp-mobile-toggle.active .sp-bar:nth-child(2) { opacity: 0; }
  .sp-mobile-toggle.active .sp-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: var(--sp-hover-color); }

  /* Mobile Overlay */
  .sp-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--sp-bg-color);
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }

  .sp-mobile-menu.open { height: 100vh; opacity: 1; }

  .sp-mobile-link {
    font-family: var(--sp-font-title);
    font-size: 2rem;
    color: var(--sp-text-color);
    text-decoration: none;
    text-transform: uppercase; /* Matching desktop style */
    margin: 15px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }
  
  .sp-mobile-menu.open .sp-mobile-link { opacity: 1; transform: translateY(0); }
  .sp-mobile-menu.open .sp-mobile-link:nth-child(1) { transition-delay: 0.1s; }
  .sp-mobile-menu.open .sp-mobile-link:nth-child(2) { transition-delay: 0.2s; }
  .sp-mobile-menu.open .sp-mobile-link:nth-child(3) { transition-delay: 0.3s; }
  .sp-mobile-menu.open .sp-mobile-link:nth-child(4) { transition-delay: 0.4s; }

  /* RESPONSIVE */
  @media (max-width: 992px) {
    .sp-nav__inner {
      display: flex; /* Switch to flex for mobile simplicity */
      justify-content: space-between;
      padding: 0 20px; /* Smaller padding on mobile */
    }

    .sp-links {
      display: none; /* Hide Desktop Links */
    }

    .sp-mobile-toggle {
      display: flex; /* Show Toggle */
    }
    
    .sp-nav-right {
       /* Just a wrapper for toggle on mobile */
       width: auto;
    }
  }
</style>
</head>
<body>

<div class="sp-nav-wrapper">
  
  <nav class="sp-nav">
    <div class="sp-nav__inner">
      
      <!-- 1. Left: Brand -->
      <a href="/" class="sp-brand" aria-label="Home">
        <span class="brand-white">SHIRT</span><span class="brand-accent">PHORIA</span>
      </a>

      <!-- 2. Center: Links -->
      <div class="sp-links">
        <a href="/about" class="sp-link">About</a>
        <a href="/tools" class="sp-link">Tools</a>
        <a href="/template" class="sp-link">Template</a>
        <a href="/blog" class="sp-link">Blog</a>
      </div>

      <!-- 3. Right: Empty (Desktop) / Toggle (Mobile) -->
      <div class="sp-nav-right">
        <button class="sp-mobile-toggle" aria-label="Toggle Navigation" aria-expanded="false" id="sp-menu-btn">
          <span class="sp-bar"></span>
          <span class="sp-bar"></span>
          <span class="sp-bar"></span>
        </button>
      </div>

    </div>
  </nav>

  <!-- Mobile Fullscreen Menu -->
  <div class="sp-mobile-menu" id="sp-mobile-menu">
    <a href="/about" class="sp-mobile-link">About</a>
    <a href="/tools" class="sp-mobile-link">Tools</a>
    <a href="/template" class="sp-mobile-link">Template</a>
    <a href="/blog" class="sp-mobile-link">Blog</a>
  </div>

</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuBtn = document.getElementById('sp-menu-btn');
    const mobileMenu = document.getElementById('sp-mobile-menu');
    const mobileLinks = document.querySelectorAll('.sp-mobile-link');
    let isMenuOpen = false;

    function toggleMenu() {
      isMenuOpen = !isMenuOpen;
      menuBtn.classList.toggle('active');
      mobileMenu.classList.toggle('open');
      menuBtn.setAttribute('aria-expanded', isMenuOpen);
      document.body.style.overflow = isMenuOpen ? 'hidden' : '';
    }

    menuBtn.addEventListener('click', toggleMenu);
    
    mobileLinks.forEach(link => {
      link.addEventListener('click', () => {
        if (isMenuOpen) toggleMenu();
      });
    });

    window.addEventListener('resize', () => {
      if (window.innerWidth > 992 && isMenuOpen) {
        toggleMenu();
      }
    });
  });
</script>

</body>
</html>/* End custom CSS */