/*
Theme Name: Winning Portfolio 2026
Author: Nimrod
Description: Winning Portfolio theme for 2026 with Tailwind CSS support.
Version: 1.0
Text Domain: yinon
*/

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Smooth scrolling for all anchor links */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   WordPress Core Styles
   ========================================================================== */

/* WordPress alignment classes */
.alignwide,
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Accessibility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* ==========================================================================
   Plugin Overrides
   ========================================================================== */

/* Pojo Accessibility Toolbar */
.pojo-a11y-toolbar-toggle {
  transform: scale(0.5) translate(-50%, 0);
}

/* ==========================================================================
   RTL (Right-to-Left) Support
   ========================================================================== */
html[dir='rtl'] {
  direction: rtl;

  /* Global RTL styles */
  body {
    direction: rtl;
    text-align: right;
  }

  /* Apply RTL to all elements */
  * {
    direction: rtl;
  }

  /* Form elements RTL support */
  input,
  textarea,
  select {
    direction: rtl;
    text-align: right;
  }
}

/* ==========================================================================
   Theme Specific Styles
   ========================================================================== */

/* Typography - Paragraph spacing and line height */
p {
  margin-bottom: 1.5rem; /* 24px vertical spacing between paragraphs */
  line-height: 1.75; /* More spacious line height (28px for 16px text) */
}

/* Enhanced spacing in content areas */
.prose p,
.content p,
.entry-content p {
  margin-bottom: 1.5rem;
  line-height: 1.75;
}

/* Ensure last paragraph doesn't have bottom margin */
p:last-child,
.prose p:last-child,
.content p:last-child,
.entry-content p:last-child {
  margin-bottom: 0;
}

/* Better spacing for nested content */
.prose > *:not(:last-child),
.content > *:not(:last-child),
.entry-content > *:not(:last-child) {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Portfolio Icon Utility
   ========================================================================== */

/* Portfolio icon as decorative element */
.portfolio-icon {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background-image: url('./assets/images/logo-only.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(35deg);
    z-index: 10;
    pointer-events: none;
  }

  /* Size variants */
  &.portfolio-icon-16 {
    &::before {
      width: 16px;
      height: 16px;
      top: -7px;
      right: -11px;
    }

    &.on-the-right {
      margin-right: 24px;
      &::before {
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  &.portfolio-icon-32 {
    &::before {
      width: 32px;
      height: 32px;
      top: -4px;
      right: -20px;
    }

    &.on-the-right {
      margin-right: 40px;
      &::before {
        right: -32px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  &.portfolio-icon-48::before {
    width: 48px;
    height: 48px;
    top: -12px;
    right: -12px;
  }

  &.portfolio-icon-64::before {
    width: 64px;
    height: 64px;
    top: -16px;
    right: -16px;
  }

  /* Different rotation angles */
  &.portfolio-icon-rotate-0::before {
    transform: rotate(0deg);
  }

  &.portfolio-icon-rotate-30::before {
    transform: rotate(30deg);
  }

  &.portfolio-icon-rotate-60::before {
    transform: rotate(60deg);
  }

  /* Color variants */
  &.portfolio-icon-blue::before {
    filter: hue-rotate(200deg);
  }

  &.portfolio-icon-green::before {
    filter: hue-rotate(90deg);
  }
}

/* Result message styles */
.result-message {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}

.result-message.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.result-message.error {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.result-message.success {
  background-color: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.result-message.warning {
  background-color: #fefce8;
  color: #ca8a04;
  border: 1px solid #fef3c7;
}

.result-message.info {
  background-color: #f0f9ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

/* single post page */
body.single-post main,
body.page-template main {
  a:not(.text-blue-600) {
    color: #2563eb; /* Tailwind blue-600 */
    &:hover {
      color: #1e40af; /* Tailwind blue-800 */
    }
  }
}

/* Homepage Specific Styles */
body.home {
  /* Custom numbered list with blue circles */
  .custom-numbered-list {
    list-style: none;
    counter-reset: list-counter;
    margin: 0;
    padding: 0;

    li {
      display: flex;
      align-items: center;
      margin-bottom: 1.5rem;
      font-size: 1.125rem;
      line-height: 2.5rem;
      color: rgb(75 85 99);

      &::before {
        content: counter(list-counter);
        counter-increment: list-counter;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: white;
        border-radius: 50%;
        font-weight: 600;
        font-size: 0.75rem;
        margin-left: 0.5rem;
        flex-shrink: 0;
        box-shadow: 0 2px 3px -1px rgba(59, 130, 246, 0.3);
      }
    }
  }

  /* Testimonial Gallery Carousel */
  .testimonial-carousel {
    position: relative;
    height: 300px;
    overflow: hidden;
  }

  .testimonial-track {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease;
  }

  .testimonial-item {
    flex: 0 0 auto;
    height: 300px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .testimonial-item:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15);
  }

  .testimonial-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
  }

  /* Carousel Navigation Arrows */
  .carousel-nav {
    position: absolute;
    top: 0;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 1.25rem;

    &:hover {
      background: rgba(59, 130, 246, 1);
    }
    &.prev {
      left: 1rem;
    }
    &.next {
      right: 1rem;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .testimonial-carousel {
      height: 225px;
    }

    .testimonial-item {
      height: 225px;
    }

    .carousel-nav {
      width: 40px;
      height: 40px;
      font-size: 1rem;
      &.prev {
        left: 0.5rem;
      }
      &.next {
        right: 0.5rem;
      }
    }
  }
}
/* Tailwind CSS handles all other styling */