/* Trailer Toolkit - Custom Styles */

/* Base Styles */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility Classes */
.brutalist-border {
  border: 3px solid #1a1a1a;
  box-shadow: 8px 8px 0 #1a1a1a;
}

.brutalist-border-hover:hover {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 #1a1a1a;
  transition: all 0.2s ease;
}

.text-shadow {
  text-shadow: 3px 3px 0 rgba(255, 107, 53, 0.3);
}

/* Article Content Styling */
.article-content {
  @apply text-dark leading-relaxed;
  font-size: 1.125rem;
  line-height: 1.8;
}

.article-content h1 {
  @apply text-5xl font-bold mt-0 mb-8 text-dark;
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.2;
}

.article-content h2 {
  @apply text-4xl font-bold mt-16 mb-6 text-dark;
  font-family: "Space Grotesk", sans-serif;
  position: relative;
  padding-bottom: 0.5rem;
}

.article-content h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: #ff6b35;
}

.article-content h3 {
  @apply text-2xl font-bold mt-12 mb-4 text-dark;
  font-family: "Space Grotesk", sans-serif;
}

.article-content h4 {
  @apply text-xl font-semibold mt-8 mb-3 text-dark;
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-content p {
  @apply mb-6;
  color: #2a2a2a;
}

.article-content ul,
.article-content ol {
  @apply mb-8 ml-0 space-y-3;
}

.article-content li {
  @apply pl-8 relative;
}

.article-content ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ff6b35;
  font-weight: bold;
  font-size: 1.2em;
}

.article-content ol {
  counter-reset: item;
}

.article-content ol li {
  counter-increment: item;
}

.article-content ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  color: #ff6b35;
  font-weight: bold;
  font-family: "Space Mono", monospace;
}

.article-content a {
  @apply text-primary font-semibold;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all 0.2s ease;
}

.article-content a:hover {
  text-decoration-thickness: 3px;
  color: #d45a2a;
}

.article-content strong,
.article-content b {
  @apply font-bold text-dark;
}

.article-content em,
.article-content i {
  @apply italic;
  color: #3a3a3a;
}

.article-content blockquote {
  @apply my-8 p-6 bg-yellow-50;
  border-left: 6px solid #ff6b35;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  font-style: italic;
}

.article-content code {
  @apply px-2 py-1 rounded font-mono text-sm;
  background: #2a2a2a;
  color: #ff6b35;
  font-weight: 600;
}

.article-content pre {
  @apply p-6 rounded-none my-8 overflow-x-auto;
  background: #1a1a1a;
  border: 3px solid #1a1a1a;
}

.article-content pre code {
  @apply bg-transparent p-0;
  color: #f5f5f0;
  font-weight: 400;
}

.article-content table {
  @apply w-full my-8;
  border-collapse: separate;
  border-spacing: 0;
}

.article-content th {
  @apply px-6 py-4 text-left font-bold;
  background: #1a1a1a;
  color: #f5f5f0;
  border: 3px solid #1a1a1a;
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
}

.article-content td {
  @apply px-6 py-4;
  border: 2px solid #e0e0d8;
  background: white;
}

.article-content tr:hover td {
  background: #fffef8;
}

.article-content img {
  @apply my-12 w-full;
  border: 4px solid #1a1a1a;
}

.article-content hr {
  @apply my-12;
  border: none;
  height: 4px;
  background: #ff6b35;
  width: 100px;
}

/* Affiliate Link Styling */
.affiliate-link {
  @apply inline-block px-8 py-4 rounded-none font-bold no-underline;
  background: #ff6b35;
  color: white;
  border: 3px solid #1a1a1a;
  box-shadow: 6px 6px 0 #1a1a1a;
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.affiliate-link:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #1a1a1a;
  background: #d45a2a;
}

/* Product Box Styling */
.product-box {
  @apply p-8 my-8 bg-white;
  border: 3px solid #1a1a1a;
  box-shadow: 8px 8px 0 #1a1a1a;
}

.product-box h3 {
  @apply text-2xl font-bold mb-4;
  font-family: "Space Grotesk", sans-serif;
}

.product-box:hover {
  box-shadow: 12px 12px 0 #1a1a1a;
}

/* Warning/Info Boxes */
.warning-box {
  @apply p-6 my-8;
  background: #fff3cd;
  border-left: 6px solid #ff6b35;
  border-top: 3px solid #1a1a1a;
  border-right: 3px solid #1a1a1a;
  border-bottom: 3px solid #1a1a1a;
}

.info-box {
  @apply p-6 my-8;
  background: #e3f2fd;
  border-left: 6px solid #2196f3;
  border-top: 3px solid #1a1a1a;
  border-right: 3px solid #1a1a1a;
  border-bottom: 3px solid #1a1a1a;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f5f5f0;
}

::-webkit-scrollbar-thumb {
  background: #ff6b35;
  border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
  background: #d45a2a;
}

/* Selection Color */
::selection {
  background: #ff6b35;
  color: white;
}

::-moz-selection {
  background: #ff6b35;
  color: white;
}