/* CSS Variables for theming - Updated to minimal grayscale color scheme */
:root {
  --primary-color: #1F2ADA;
  --accent-color: #4F6EFD;
  --special-color: #AC9BE8;
  --highlight-color: linear-gradient(to right, #e72c83, #CF50EE);

  --text-color: #eeeeee;
  --secondary-text: #bbbbbb;
  --background-color: #111111;
  --background-color-accent: linear-gradient(135deg, var(--card-bg) 0%, #151930 100%);
  --card-bg: #1d1d1d;
  --card-bg-rgb: 29, 29, 29;
  --border-color: #333333;

  --card-shadow: rgba(0, 0, 0, 0.25);
  --card-hover-shadow: rgba(255, 255, 255, 0.4);
  --nav-bg: rgba(17, 17, 17, 0.95);
  --nav-blur: 12px;

  --hero-section-bg: linear-gradient(170deg, var(--background-color) 0%, var(--background-color) 10%, #151930 40%, var(--background-color) 100%);
  --contact-section-bg: linear-gradient(135deg, #151930 0%, var(--background-color) 100%);

  /* Common Values */
  --border-radius-sm: 4px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-pill: 50px;
  --border-radius-circle: 50%;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  --spacing-xxxl: 6rem;

  /* Layout */
  --container-width: 1200px;
  --content-width: 800px;

  /* Add transition for theme switching */
  transition: --primary-color 0.3s ease, --secondary-text 0.3s ease,
    --background-color 0.3s ease, --text-color 0.3s ease, --card-bg 0.3s ease,
    --border-color 0.3s ease, --accent-color 0.3s ease, --nav-bg 0.3s ease;
}

/* Reset and base styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* Remove tap highlight on mobile devices */
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) var(--background-color);
  overflow-x: hidden;
  /* Prevent elastic scroll at the top */
  overscroll-behavior-y: none;
  /* Prevent zooming on iOS devices */
  touch-action: pan-x pan-y;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: var(--background-color);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 20px;
    border: 2px solid var(--background-color);
  }
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  /* Apply transition to all properties for smoother theme changes */
  transition: all 0.3s ease;
  position: relative;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  font-size: 1rem;
  font-weight: 400;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Typography - Mobile First */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

h1 {
  font-size: 2.18rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--spacing-md);
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--secondary-text);
  font-size: 1rem;
}

/* Common section separator styles */
section {
  width: 100%;
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  position: relative;

  /* Alternating section backgrounds */
  &:nth-child(odd) {
    background: var(--background-color-accent);
  }

  .width-limiter {
    max-width: var(--container-width);
    margin: 0 auto;
  }


  .section-header {
    text-align: center;
    max-width: 100%;
    padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);

    & p {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: var(--spacing-sm);
    }

    & .section-tagline {
      display: inline-block;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--accent-color);
      margin-bottom: 1rem;
      position: relative;
    }
  }



  /* Button Styles - Mobile First */
  .action-button {
    /* Positioning & Display */
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1;

    /* Box Model */
    padding: var(--spacing-sm) var(--spacing-md);
    gap: 0.5rem;

    /* Typography */
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;

    /* Colors & Backgrounds */
    border: none;
    border-radius: var(--border-radius-md);

    /* Effects & Transitions */
    transition: all 0.3s ease;
    overflow: hidden;

    /* Other */
    cursor: pointer;
  }

  .primary-button {
    /* Colors & Backgrounds */
    background-color: var(--primary-color);
    color: var(--card-bg);

    &:hover {
      /* Effects & Transitions */
      box-shadow: 0 5px 15px rgba(136, 136, 136, 0.2);
    }
  }

  .secondary-button {
    /* Colors & Backgrounds */
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);

    &:hover {
      /* Colors & Backgrounds */
      border-color: var(--accent-color);
      color: var(--accent-color);

      /* Effects & Transitions */
      box-shadow: 0 5px 15px var(--card-shadow);
    }
  }

  .outline-button {
    /* Colors & Backgrounds */
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);

    &:hover {
      /* Colors & Backgrounds */
      border-color: var(--accent-color);
      color: var(--accent-color);

      /* Effects & Transitions */
      box-shadow: 0 5px 15px var(--card-shadow);
    }
  }

  /* Helper class for horizontal scroll rows - Mobile First */
  .horizontal-scroll-row {
    /* Positioning & Display */
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;

    /* Box Model */
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);

    /* Other */
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: padding-right 0.3s ease, justify-content 0.3s ease;

    &::-webkit-scrollbar {
      display: none;
    }

    &>*:first-child {
      margin-left: var(--spacing-lg);
    }

    &>*:last-child {
      margin-right: var(--spacing-lg);
    }

    /* Fix for iOS horizontal scroll with padding after the last item */
    @supports (-webkit-touch-callout: none) {
      /* iOS specific styles */
      padding-right: calc(var(--spacing-lg) + 20px);

      /* Ensure padding doesn't affect layout and is only for scrolling space */
      &>*:last-child {
        margin-right: var(--spacing-lg);
        padding-right: 0;
      }
    }
  }

  /* Scroll Buttons Styling - Mobile First */
  .scroll-controls {
    /* Positioning & Display */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;

    /* Box Model */
    margin-top: 1rem;
    padding: 0 var(--spacing-md);
    gap: 0.5rem;
  }

  /* Dot Indicators - Mobile First */
  .dot-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0.5rem 0;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--border-color);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background-color: var(--accent-color);
    }

    &.active {
      background-color: var(--primary-color);
      transform: scale(1.2);
    }
  }

  .scroll-button {
    /* Positioning & Display */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Box Model */
    width: 44px;
    height: 44px;

    /* Typography */
    font-size: 1rem;

    /* Colors & Backgrounds */
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-color);

    /* Effects & Transitions */
    box-shadow: 0 2px 8px var(--card-shadow);
    transition: all 0.3s ease;

    /* Other */
    cursor: pointer;

    &:hover {
      background-color: var(--background-color);
      border-color: var(--accent-color);
      color: var(--accent-color);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      pointer-events: none;
      background-color: var(--background-color);
      border: 1px solid var(--border-color) !important;
    }

    &.hidden {
      display: none;
    }
  }

  /* Focus states for accessibility */
  button:focus,
  a:focus,
  input:focus,
  textarea:focus {
    outline-offset: 2px;
    font-weight: bold;
  }

  /* Skip to content for accessibility */
  .skip-to-content {
    position: absolute;
    left: -9999px;
    top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--accent-color);
    color: var(--card-bg);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    z-index: 9999;

    &:focus {
      left: 1rem;
      outline: none;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }

  /* Touch-specific styles */
  @media (hover: none) and (pointer: coarse) {

    button,
    a,
    input[type="button"],
    input[type="submit"] {
      touch-action: manipulation;
    }
  }

  /* Responsive styles for tablet devices */
  @media (min-width: 768px) {
    h1 {
      font-size: 3rem;
      margin-bottom: var(--spacing-lg);
    }

    h2 {
      font-size: 2.25rem;
    }

    h3 {
      font-size: 1.5rem;
    }

    p {
      font-size: 1.05rem;
    }

    .section-header {
      padding: 0 var(--spacing-lg);
      margin: 0 auto var(--spacing-xl);
    }

    section {
      padding: var(--spacing-xl) 0;
    }

    .horizontal-scroll-row {
      gap: var(--spacing-md);

      &>*:first-child {
        margin-left: var(--spacing-xl);
      }

      &>*:last-child {
        margin-right: var(--spacing-xl);
      }
    }

    .action-button {
      padding: var(--spacing-sm) var(--spacing-lg);
    }

    .primary-button:hover,
    .secondary-button:hover,
    .outline-button:hover {
      transform: translateY(-2px);
    }

    .scroll-button:hover {
      transform: scale(1.05);
    }
  }

  /* Responsive styles for desktop devices */
  @media (min-width: 1200px) {
    .section-header {
      max-width: var(--content-width);

      & p {
        max-width: 700px;
      }
    }

    .horizontal-scroll-row {
      gap: var(--spacing-lg);
      justify-content: center;

      &.scrollable {
        justify-content: flex-start;
      }

      &>*:first-child {
        margin-left: var(--spacing-xxl);
      }

      &>*:last-child {
        margin-right: var(--spacing-xxl);
      }
    }

    section {
      padding: var(--spacing-xxl) 0;
    }

    h1 {
      font-size: 3.75rem;
    }
  }
}