@use "sass:math";
@use "sass:color";

// Variables
$primary-color: #2c3e50;
$secondary-color: #3498db;
$text-color: #333;
$light-gray: #f5f5f5;
$dark-gray: #2c3e50;
$header-height: 400px;
$spacing: 1rem;
$border-radius: 8px;
$max-width: 1200px;

// Mixins
@mixin container {
  max-width: $max-width;
  margin: 0 auto;
  padding: 0 $spacing;
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Reset et styles de base
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: $text-color;
  background-color: $light-gray;
}

// Header
.site-header {
  position: relative;

  .header-image {
    height: $header-height;
    position: relative;
    @include flex-center;
    flex-direction: column;
    color: white;
    text-align: center;
    padding: $spacing * 2;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    >* {
      position: relative;
      z-index: 2;
    }
  }

  .site-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: $spacing;
    border: 4px solid white;
  }

  .blog-title {
    font-size: 2.5rem;
    margin-bottom: $spacing;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .blog-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
  }
}

// Navigation
.navbar {
  background-color: $dark-gray;
  padding: $spacing;

  .navbar-menu {
    @include container;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-start,
  .navbar-end {
    display: flex;
    align-items: center;
    gap: $spacing;
  }

  a {
    color: white;
    text-decoration: none;
    padding: math.div($spacing, 2) $spacing;
    border-radius: $border-radius;
    transition: background-color 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

  .search-form {
    input {
      padding: math.div($spacing, 2);
      border-radius: $border-radius;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: white;

      &::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

// Articles
.body-wrap {
  @include container;
  padding-top: $spacing * 3;
  padding-bottom: $spacing * 3;
}

article {
  background: white;
  border-radius: $border-radius;
  margin-bottom: $spacing * 2;
  padding: $spacing * 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .article-title-container {
    margin-bottom: $spacing;

    h1 {
      font-size: 2rem;
      color: $primary-color;

      a {
        text-decoration: none;
        color: inherit;

        &:hover {
          color: $secondary-color;
        }
      }
    }
  }

  .article-date {
    color: color.adjust($text-color, $lightness: 20%);
    margin-bottom: $spacing;
    font-size: 0.9rem;
  }

  .article-tags {
    margin-top: $spacing;

    a {
      display: inline-block;
      padding: math.div($spacing, 4) math.div($spacing, 2);
      background: $light-gray;
      border-radius: math.div($border-radius, 2);
      margin-right: math.div($spacing, 2);
      color: $text-color;
      text-decoration: none;
      font-size: 0.9rem;

      &:hover {
        background: color.adjust($light-gray, $lightness: -5%);
      }
    }
  }
}

// Articles plus anciens
.more-content {
  padding: $spacing;
  border-bottom: 1px solid color.adjust($light-gray, $lightness: -10%);

  .article-title {
    a {
      text-decoration: none;
      color: $text-color;

      &:hover {
        color: $secondary-color;
      }
    }

    .article-date-inline {
      color: color.adjust($text-color, $lightness: 20%);
      margin-right: $spacing;
    }
  }
}

// Footer
.site-footer {
  background: $dark-gray;
  color: white;
  padding: $spacing * 2 0;
  margin-top: $spacing * 3;

  .footer-nav {
    @include flex-center;
    gap: $spacing * 2;

    a {
      color: white;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// Media queries
@media (max-width: 768px) {
  .header-image {
    height: 300px;

    .blog-title {
      font-size: 2rem;
    }
  }

  .navbar {
    .navbar-menu {
      flex-direction: column;
      gap: $spacing;
    }
  }

  article {
    padding: $spacing;
  }
}