/* 1. CSS VARIABLES (Theme Configuration)
      --------------------------------------
      Centralized color management for consistency.
    */
    :root {
      --color-bg: #FFFFFF;
      --color-text: #222222;
      --color-primary: #8254ff;      /* Main Purple */
      --color-secondary: #ede8ff;    /* Light Purple BG for Nav */
      --color-hover: crimson;
      --color-decoration: #616161;
      
      --font-main: "Advent Pro", sans-serif;
      
      --spacing-container: 1rem;
      --max-width: 90%;           /* Constrains content width on large screens */
    }

    /* 2. RESET & BASE STYLES
      --------------------------------------
      Ensures consistent rendering across browsers.
    */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: "IBM Plex Sans", sans-serif;
      font-size: 1.125rem; /* Base size approx 18px */
      line-height: 1.6;
      
      /* Flexbox centering for the whole page */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      
      /* Prevent horizontal scroll from animations */
      overflow-x: hidden; 
    }

    /* 3. LAYOUT CONTAINER
      --------------------------------------
      Replaces the restrictive 'body width: 75%' logic.
      This ensures the site works on mobile (100% width) 
      and centers nicely on desktop (max-width).
    */
    main {
      width: 100%;
      max-width: var(--max-width);
      padding: 2rem var(--spacing-container) 2rem; /* Top padding for breathing room */
      text-align: center;
      position: relative;
      z-index: 10; /* Keeps content above the background blob */
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-main);
    }

    /* 4. TYPOGRAPHY & ELEMENTS
      --------------------------------------
    */
    h1 {
      color: var(--color-text);
      font-weight: 800;
      font-size: 3rem;
      margin-bottom: 1rem;
      text-decoration-line: underline;
      text-decoration-style: wavy;
      text-decoration-thickness: 3px;
      text-decoration-color: var(--color-decoration);
      text-underline-offset: 8px;
    }

    h2 {
      font-weight: 500;
      font-size: 1.75rem;
      margin-bottom: 1rem;
    }

    h3 {
      font-weight: 800;
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    /* Small tag inside h2 */
    small {
      display: block; /* Moves description to new line on small screens naturally */
      font-size: 1.1rem;
      color: #555;
      margin-bottom: 1rem;
    }

    p {
      font-weight: 400;
      font-size: 1.25rem; /* Adjusted for readability */
      line-height: 1.5;
      word-spacing: 2px;
      margin-bottom: 3rem;
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
      text-align: justify;
      text-align-last: left;
    }

    a {
      text-decoration: none;
      font-family: "IBM Plex Sans", sans-serif;
      font-weight: 800;
      color: var(--color-primary);
      transition: color 0.3s ease;
    }

    a:hover {
      color: var(--color-hover);
      text-decoration: underline;
    }

    mark {
      background-color: var(--color-primary);
      color: #FFFFFF;
      font-weight: 700;
      padding: 0 0.6rem 0.2rem 0.6rem;
      border-radius: 0.4em;
      /* Ensure mark doesn't break layout on very narrow screens */
      display: inline-block; 
      line-height: 1.2;
    }

    /* 5. NAVIGATION
      --------------------------------------
    */
    nav {
      background: var(--color-secondary);
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      margin: 0 auto;
      padding: 2rem auto 0 auto;
      display: inline-block; /* Fits to content */
      width: 100%;
      max-width: 800px; /* Cap width for aesthetics */
    }

    .menuItems {
      list-style: none;
      display: flex;
      justify-content: center;
      flex-wrap: wrap; /* Allows stacking on mobile */
      gap: 1.5rem;
    }

    .menuItems li {
      margin: 0.5rem;
    }

    .menuItems li a {
      color: var(--color-text);
      font-size: 1.5rem;
      font-weight: 800;
      text-transform: uppercase;
      position: relative;
      display: inline-block;
      overflow: hidden;
      padding: 0 0.2rem;
    }

    /* The "Fill" effect from original CSS */
    .menuItems li a::before {
      content: attr(data-item);
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      color: var(--color-primary);
      overflow: hidden;
      transition: width 0.5s ease-in-out;
      white-space: nowrap; /* Prevents text wrap inside the effect */
    }

    .menuItems li a:hover::before {
      width: 100%;
    }

    /* Remove default hover underline for nav items to keep the fill effect clean */
    .menuItems li a:hover {
      text-decoration: none;
      color: var(--color-text); /* Keep base color, let ::before handle color change */
    }

    /* 6. LOGO / FOOTER AREA
      --------------------------------------
    */
    .logo-container {
      width: 100%;
      max-width: 1200px; /* Match paragraph width approx */
      margin: 0 auto 0 auto;
      min-height: 16rem;
      
      /* Flex centering for the content inside */
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* Align text to bottom */
      align-items: center;
      font-size: 2rem;
      
      /* Background Image Logic */
      background-image: url("webestra-temporary-logo.webp");
      background-repeat: no-repeat;
      background-position: top center;
      background-size: 540px 139px; /* Ensures logo fits within box on mobile */
      
      border: 2px dotted var(--color-primary);
      border-radius: 0.5rem;
      background-color: #FFFFFF; /* Fallback if image fails or transparent */
    }

    /* 7. ANIMATED MOUSE BLOB (State of the Art addition)
      --------------------------------------
      A fluid SVG shape that follows the mouse cursor.
    */
    #cursor-blob {
      position: fixed;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, rgba(130, 84, 255, 1), rgba(232, 193, 255, 1));
      border-radius: 50%;
      pointer-events: none; /* Allows clicking through it */
      z-index: -1; /* Behind content */
      transform: translate(-50%, -50%); /* Centers div on coordinate */
      filter: blur(0px);
      
      /* Smooth Animation */
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
                  width 0.5s ease, 
                  height 0.5s ease,
                  border-radius 0.5s ease;
      
      /* Initial Clip Path (Circle-ish) */
      clip-path: polygon(
        30% 0%, 70% 0%, 
        100% 30%, 100% 70%, 
        70% 100%, 30% 100%, 
        0% 70%, 0% 30%
      );
      
      /* Hardware Acceleration */
      will-change: transform, clip-path;
    }

    /* 8. RESPONSIVE MEDIA QUERIES
      --------------------------------------
      Fine-tuning for smaller devices.
    */
    @media (max-width: 768px) {
      body {
        font-size: 1rem;
      }
      
      h1 {
        font-size: 1.75rem;
      }

      p {
        font-size: 1.15rem;
        line-height: 1.6;
      }
      
      .menuItems {
        flex-direction: column; /* Stack menu items */
        gap: 1rem;
      }
      
      nav {
        width: 100%;
        margin-top: 2rem;
      }

      .logo-container {
        background-size: 80%; /* Scale down logo image */
        height: auto;
        min-height: 16rem;
      }
    }

    section ul {
      list-style-type: disc;
      padding-left: 1.5rem;
      text-align: center;
      list-style-position: inside;
      font-size: 1.5rem;
      font-weight: 600;
    }

    .mt-5 {
      margin-top: 5rem;
    }

    article hgroup p strong {
      font-size: 1.35rem;
      font-weight: 700;
      font-family: "IBM Plex Sans", sans-serif !important;
    }